/*
 * Los tests de revista (/tests).
 *
 * Una estructura y temas cerrados, como «no te puedes negar»: cada tema solo rellena variables y
 * pone sus adornos. Hoy hay uno, la revista de quiosco de finales de los noventa: rosa chicle,
 * fucsia, amarillo limón y cian; estrellas en ráfaga, cajitas redondeadas, letra gorda y letra a
 * mano. Lo que se busca es que se reconozca de un vistazo, no reproducir ninguna revista.
 *
 * Letras servidas desde queno.es, nada de terceros: Nunito a todo su peso hace de titular gordo
 * y redondo; Caveat, de rotulador; Anton, de reclamo de portada.
 */

@font-face {
	font-family: 'Nunito';
	src: url("../fonts/nunito-variable-JK0VToh.ttf") format('truetype');
	font-weight: 200 1000;
	font-display: swap;
}

@font-face {
	font-family: 'Caveat';
	src: url("../fonts/caveat-700-8ID2fbf.ttf") format('truetype');
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: 'Anton';
	src: url("../fonts/anton-KSH4Qgp.woff2") format('woff2');
	font-weight: 400;
	font-display: swap;
}

/* --- Estructura común ------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body.tests {
	margin: 0;
	min-height: 100vh;
	background-color: var(--fondo);
	background-image: var(--trama);
	background-size: var(--trama-tamano, auto);
	color: var(--tinta);
	font-family: 'Nunito', system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.45;
	overflow-x: hidden;
}

[hidden] {
	display: none !important;
}

.pagina {
	position: relative;
	width: min(100% - 2rem, 40rem);
	margin: 0 auto 2.5rem;
	padding: 2rem 1.25rem 1.5rem;
	background: var(--papel);
	border-radius: var(--radio-pagina);
	box-shadow: var(--sombra-pagina);
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

button:focus-visible,
a:focus-visible {
	outline: 3px solid var(--foco);
	outline-offset: 3px;
}

.aviso {
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	background: var(--caja);
	font-weight: 700;
	text-align: center;
}

/* --- La revista: tema único de momento -------------------------------------------------- */

.tests--revista {
	--fondo: #ff4fa3;
	--trama: radial-gradient(circle, rgb(255 255 255 / 0.28) 2.5px, transparent 3px);
	--trama-tamano: 18px 18px;
	--papel: #fffdf6;
	--tinta: #3b0a45;
	--fucsia: #e6007e;
	--limon: #fff35c;
	--cian: #00c2e0;
	--lila: #b39dff;
	--caja: #fff6a8;
	--foco: #00c2e0;
	--radio-pagina: 1.75rem;
	--sombra-pagina: 0.5rem 0.5rem 0 #3b0a45;
}

/* La cabecera: el nombre de la revista, gordo, con sombra a contraste y un poco torcido. */
.revista {
	position: relative;
	/* Abajo, sitio para la estrella de la hoja: sobresale 2,75rem y no debe pisar el lema. */
	padding: 1.25rem 1rem 2.75rem;
	text-align: center;
}

.revista__datos {
	display: flex;
	justify-content: space-between;
	width: min(100%, 40rem);
	margin: 0 auto 0.25rem;
	font-weight: 900;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
}

.revista__datos span {
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--tinta);
}

.revista__datos span:last-child {
	background: var(--cian);
	color: var(--tinta);
	transform: rotate(4deg);
}

.revista__cabecera {
	display: inline-block;
	font-weight: 1000;
	font-style: italic;
	font-size: clamp(3.25rem, 17vw, 6rem);
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--limon);
	text-decoration: none;
	transform: rotate(-3deg);
	text-shadow:
		0.06em 0.06em 0 var(--fucsia),
		0.12em 0.12em 0 var(--tinta);
	-webkit-text-stroke: 0.02em var(--tinta);
}

/* El apellido de la cabecera, a mano y colgando de la esquina: «¡QUÉ NO! la revista». */
.revista__apellido {
	display: block;
	margin: -0.15em 0 0 auto;
	width: max-content;
	padding: 0 0.35em 0.05em;
	border-radius: 0.3em;
	background: var(--tinta);
	font-family: 'Caveat', cursive;
	font-style: normal;
	font-weight: 700;
	font-size: 0.34em;
	line-height: 1;
	letter-spacing: 0;
	color: #fff;
	text-shadow: none;
	-webkit-text-stroke: 0;
	transform: rotate(-4deg);
}

.revista__lema {
	margin: 0.5rem 0 0;
	font-family: 'Caveat', cursive;
	font-size: 1.375rem;
	line-height: 1.1;
	color: #fff;
	transform: rotate(-1.5deg);
}

/* La estrella en ráfaga de las portadas: «¡TEST!», «¡NUEVO!». */
.estrella {
	--lado: 6.5rem;
	position: absolute;
	top: -2.75rem;
	right: -0.5rem;
	display: grid;
	place-items: center;
	width: var(--lado);
	height: var(--lado);
	margin: 0;
	background: var(--limon);
	clip-path: polygon(50% 0%, 61% 14%, 79% 7%, 80% 25%, 98% 26%, 89% 42%, 100% 56%, 84% 64%, 88% 82%, 70% 80%, 61% 97%, 50% 86%, 37% 98%, 30% 80%, 12% 84%, 16% 65%, 0% 56%, 11% 42%, 2% 26%, 20% 24%, 21% 7%, 39% 14%);
	transform: rotate(12deg);
	filter: drop-shadow(0.2rem 0.2rem 0 var(--tinta));
}

.estrella span {
	font-family: 'Anton', sans-serif;
	font-size: 1.5rem;
	letter-spacing: 0.02em;
	color: var(--fucsia);
}

/* La portada del test. */
.portada {
	text-align: center;
}

.portada__titulo,
.sumario__titulo {
	margin: 0.5rem 0 1rem;
	padding-right: 3rem;
	font-weight: 1000;
	font-size: clamp(2rem, 8vw, 2.75rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-align: left;
	text-wrap: balance;
}

.portada__entradilla,
.sumario__entradilla {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	font-weight: 600;
	text-align: left;
}

.portada__grito {
	margin: 0.25rem 0 1.5rem;
	font-family: 'Caveat', cursive;
	font-size: 2.25rem;
	line-height: 1;
	color: var(--fucsia);
	transform: rotate(-4deg);
}

.portada__grito::before,
.portada__grito::after {
	content: '♥';
	margin: 0 0.4rem;
	font-family: 'Nunito', sans-serif;
	font-size: 1.5rem;
	vertical-align: 0.2em;
}

/* Botones: gordos, redondos, con la sombra dura de la página. */
.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.7rem 1.4rem;
	border: 3px solid var(--tinta);
	border-radius: 999px;
	background: var(--fucsia);
	color: #fff;
	font-weight: 900;
	font-size: 1.0625rem;
	text-decoration: none;
	box-shadow: 0.25rem 0.25rem 0 var(--tinta);
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.boton:hover {
	transform: translate(-1px, -1px);
	box-shadow: 0.3rem 0.3rem 0 var(--tinta);
}

.boton:active {
	transform: translate(0.2rem, 0.2rem);
	box-shadow: 0 0 0 var(--tinta);
}

.boton--grande {
	min-height: 3.5rem;
	padding-inline: 2rem;
	font-size: 1.25rem;
}

.boton--secundario {
	background: var(--limon);
	color: var(--tinta);
}

.boton--elegido {
	background: var(--cian);
	color: var(--tinta);
}

.boton:disabled {
	cursor: default;
}

.boton:disabled:not(.boton--elegido) {
	opacity: 0.45;
}

/* Una pregunta: la cuenta como pestaña, el enunciado gordo y las opciones en cajitas. */
.pregunta__cuenta {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.2rem 0.75rem;
	border-radius: 999px;
	background: var(--cian);
	font-weight: 900;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* En los de flechas, el número de la casilla en un círculo gordo, como en la doble página. */
.pregunta__cuenta--casilla {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	border: 3px solid var(--tinta);
	border-radius: 50%;
	background: var(--limon);
	font-family: 'Anton', sans-serif;
	font-size: 1.75rem;
	letter-spacing: 0;
	color: var(--fucsia);
	transform: rotate(-8deg);
	box-shadow: 0.2rem 0.2rem 0 var(--tinta);
}

.pregunta__enunciado {
	margin: 0 0 1.25rem;
	font-weight: 1000;
	font-size: clamp(1.5rem, 6vw, 2rem);
	line-height: 1.1;
	text-wrap: balance;
}

.opciones {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.opcion {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	width: 100%;
	padding: 0.85rem 1rem;
	border: 3px solid var(--tinta);
	border-radius: 1.25rem;
	background: var(--caja);
	text-align: left;
	font-weight: 700;
	box-shadow: 0.2rem 0.2rem 0 var(--tinta);
	transition: transform 0.1s ease, background-color 0.15s ease;
}

.opciones li:nth-child(2) .opcion {
	background: #ffd6ec;
}

.opciones li:nth-child(3) .opcion {
	background: #c9f3fb;
}

.opciones li:nth-child(4) .opcion {
	background: #e3dbff;
}

.opcion:hover {
	transform: rotate(-0.6deg) scale(1.01);
}

.opcion__marca {
	flex: none;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--tinta);
	color: #fff;
	font-weight: 1000;
	line-height: 1;
}

/* La flecha de cada respuesta: «→ ve a la 4». Va a la derecha, en mano, como pintada con rotulador. */
.pregunta--flechas .opcion {
	align-items: center;
	justify-content: space-between;
	font-size: 1.125rem;
	font-weight: 900;
}

.opcion__flecha {
	flex: none;
	font-family: 'Caveat', cursive;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--fucsia);
	white-space: nowrap;
}

.opcion--elegida .opcion__flecha {
	color: var(--limon);
}

.opcion--elegida {
	background: var(--fucsia) !important;
	color: #fff;
	transform: scale(1.02);
}

.opcion--elegida .opcion__marca {
	background: var(--limon);
	color: var(--tinta);
}

.enlace-atras {
	padding: 0.25rem 0;
	border: 0;
	background: none;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* El resultado: «Mayoría de B» gordo, el título, el texto y el consejo en un pósit torcido. */
.resultado {
	text-align: center;
}

.resultado__entradilla {
	margin: 0;
	font-family: 'Caveat', cursive;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--fucsia);
}

.resultado__mayoria {
	margin: 0.25rem 0 0.75rem;
	font-family: 'Anton', sans-serif;
	font-size: clamp(2rem, 10vw, 3rem);
	line-height: 1;
	text-transform: uppercase;
}

.resultado__letra {
	display: inline-grid;
	place-items: center;
	width: 1.5em;
	height: 1.5em;
	margin-left: 0.15em;
	border: 3px solid var(--tinta);
	border-radius: 50%;
	background: var(--limon);
	color: var(--fucsia);
	vertical-align: middle;
	transform: rotate(-8deg);
	box-shadow: 0.15rem 0.15rem 0 var(--tinta);
}

/* En los de puntos, el número no cabe en un círculo justo: va en una pastilla. */
.resultado__letra--puntos {
	width: auto;
	min-width: 1.5em;
	padding: 0 0.3em;
	border-radius: 0.6em;
}

.resultado__tramo {
	margin: -0.25rem 0 0.75rem;
	font-weight: 900;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.resultado__titulo {
	margin: 0 0 0.75rem;
	font-weight: 1000;
	font-size: clamp(1.75rem, 7vw, 2.5rem);
	line-height: 1.05;
	color: var(--fucsia);
	text-wrap: balance;
}

.resultado__texto {
	margin: 0 0 1.25rem;
	font-size: 1.125rem;
	font-weight: 600;
	text-align: left;
}

.resultado__consejo {
	position: relative;
	margin: 0 0.5rem 1.75rem;
	padding: 1rem 1.25rem;
	background: var(--limon);
	font-family: 'Caveat', cursive;
	font-size: 1.625rem;
	line-height: 1.15;
	text-align: left;
	transform: rotate(-1.5deg);
	box-shadow: 0.25rem 0.3rem 0 rgb(59 10 69 / 0.25);
}

.resultado__consejo::before {
	content: '';
	position: absolute;
	top: -0.6rem;
	left: 50%;
	width: 4.5rem;
	height: 1.2rem;
	background: rgb(179 157 255 / 0.7);
	transform: translateX(-50%) rotate(3deg);
}

/* Compartir: la pregunta, la elección y después los botones. */
.compartir {
	margin: 0 0 1.25rem;
	padding: 1.25rem 1rem;
	border: 3px dashed var(--fucsia);
	border-radius: 1.25rem;
	text-align: center;
}

.compartir__pregunta {
	margin: 0 0 1rem;
	font-weight: 900;
	font-size: 1.125rem;
}

.compartir__eleccion,
.compartir__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

.compartir__acciones {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 2px dotted var(--tinta);
}

.compartir__enlace {
	width: 100%;
	padding: 0.6rem 0.8rem;
	border: 2px solid var(--tinta);
	border-radius: 0.75rem;
	background: #fff;
	color: var(--tinta);
	font: inherit;
	font-size: 0.875rem;
	text-align: center;
}

.compartir__error {
	margin: 1rem 0 0;
	font-weight: 800;
	color: var(--fucsia);
}

.final > .enlace-atras {
	display: block;
	margin: 0 auto;
}

/* El test hecho de otra persona. */
.hecho__test {
	margin: 0 3rem 1.25rem 0;
	font-weight: 900;
	font-size: 1.125rem;
	line-height: 1.2;
}

.pagina--hecho > .boton--grande {
	display: flex;
	width: fit-content;
	margin: 0 auto 2rem;
}

.respuestas {
	padding-top: 1.5rem;
	border-top: 3px dotted var(--tinta);
}

.respuestas__titulo {
	margin: 0 0 1rem;
	font-family: 'Caveat', cursive;
	font-size: 2rem;
	line-height: 1;
	color: var(--fucsia);
}

.respuestas__lista {
	display: grid;
	gap: 0.85rem;
	margin: 0 0 1.5rem;
	padding-left: 1.5rem;
	font-weight: 900;
}

.respuestas__lista li::marker {
	color: var(--fucsia);
}

.respuestas__pregunta {
	margin: 0;
	font-weight: 900;
}

.respuestas__opcion {
	display: inline-block;
	margin: 0.3rem 0 0;
	padding: 0.2rem 0.65rem;
	border-radius: 0.6rem;
	background: var(--caja);
	font-weight: 700;
}

.respuestas__puntos {
	margin-left: 0.35rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: var(--tinta);
	color: #fff;
	font-weight: 900;
	font-size: 0.875em;
}

/* El camino de un test de flechas: cada casilla con su número y una flecha hasta la siguiente. */
.respuestas__lista--flechas {
	gap: 0;
	padding: 0;
	list-style: none;
}

.respuestas__lista--flechas li[data-casilla] {
	position: relative;
	padding: 0 0 1.75rem 3rem;
}

.respuestas__lista--flechas li[data-casilla]::before {
	content: attr(data-casilla);
	position: absolute;
	top: -0.2rem;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 3px solid var(--tinta);
	border-radius: 50%;
	background: var(--limon);
	font-family: 'Anton', sans-serif;
	color: var(--fucsia);
}

.respuestas__lista--flechas li[data-casilla]::after {
	content: '';
	position: absolute;
	top: 2.2rem;
	bottom: 0.2rem;
	left: 1.05rem;
	border-left: 3px dashed var(--tinta);
}

.respuestas__final {
	justify-self: start;
	padding: 0.35rem 0.9rem;
	border: 3px solid var(--tinta);
	border-radius: 999px;
	background: var(--fucsia);
	color: #fff;
	font-family: 'Anton', sans-serif;
	font-size: 1.25rem;
	text-transform: uppercase;
	transform: rotate(-3deg);
}

.respuestas__secretas {
	margin: 0 0 1.5rem;
	font-weight: 800;
}

/* El sumario de tests. */
.sumario__lista {
	display: grid;
	gap: 1rem;
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}

.sumario__test {
	display: block;
	padding: 1rem 1.25rem;
	border: 3px solid var(--tinta);
	border-radius: 1.25rem;
	background: var(--caja);
	color: inherit;
	text-decoration: none;
	box-shadow: 0.25rem 0.25rem 0 var(--tinta);
}

.sumario__lista li:nth-child(3n + 2) .sumario__test {
	background: #ffd6ec;
}

.sumario__lista li:nth-child(3n) .sumario__test {
	background: #c9f3fb;
}

.sumario__titular {
	display: block;
	font-weight: 1000;
	font-size: 1.375rem;
	line-height: 1.1;
}

.sumario__resumen {
	display: block;
	margin-top: 0.4rem;
	font-weight: 600;
}

/* La firma de queno.es. Mientras se contesta no hace falta: estorba entre pregunta y pregunta. */
.pagina:has(.pregunta:not([hidden])) .firma {
	display: none;
}

.firma {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 3px solid var(--tinta);
	text-align: center;
}

.firma__texto {
	margin: 0;
	font-family: 'Caveat', cursive;
	font-size: 1.5rem;
}

.firma__logo {
	font-family: 'Anton', sans-serif;
	font-size: 2.25rem;
	color: var(--tinta);
	text-decoration: none;
}

.firma__logo span {
	color: var(--fucsia);
}

.firma__mas {
	margin: 0.25rem 0 0;
	font-weight: 800;
}

.firma__mas a {
	color: inherit;
}

@media (min-width: 48rem) {
	.pagina {
		padding: 2.75rem 2.5rem 2rem;
	}

	.estrella {
		--lado: 8rem;
		top: -3.5rem;
		right: -2.5rem;
	}

	.estrella span {
		font-size: 1.875rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.boton,
	.opcion {
		transition: none;
	}
}

/* El diagrama del final de un test de flechas: todas las casillas, con el camino encendido. Las
   que no se pisaron se quedan en gris, para que se vea por dónde NO se fue. */
.diagrama {
	margin: 1.5rem 0;
	text-align: left;
}

.diagrama__titulo {
	margin: 0 0 0.75rem;
	font-family: 'Caveat', cursive;
	font-size: 2rem;
	line-height: 1;
	color: var(--fucsia);
	text-align: center;
}

.diagrama__casillas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.casilla {
	position: relative;
	display: grid;
	gap: 0.35rem;
	align-content: start;
	padding: 0.6rem 0.7rem 0.7rem;
	border: 2px dashed color-mix(in srgb, var(--tinta) 35%, transparent);
	border-radius: 1rem;
	color: color-mix(in srgb, var(--tinta) 45%, transparent);
	font-size: 0.8125rem;
	line-height: 1.25;
}

.casilla__numero {
	font-family: 'Anton', sans-serif;
	font-size: 1.25rem;
	line-height: 1;
}

.casilla__pregunta {
	font-weight: 800;
}

.casilla__flechas {
	display: grid;
	gap: 0.1rem;
	font-family: 'Caveat', cursive;
	font-size: 1.0625rem;
	font-weight: 700;
}

.casilla--camino {
	border: 3px solid var(--tinta);
	background: var(--caja);
	color: var(--tinta);
	box-shadow: 0.2rem 0.2rem 0 var(--tinta);
}

.casilla__flecha--elegida {
	justify-self: start;
	padding: 0 0.35rem;
	border-radius: 0.4rem;
	background: var(--fucsia);
	color: #fff;
}

.casilla--camino .casilla__numero {
	color: var(--fucsia);
}

/* El paso del camino, en una pegatina en la esquina: 1.º, 2.º, 3.º… */
.casilla--camino::after {
	content: attr(data-paso) 'º';
	position: absolute;
	top: -0.6rem;
	right: -0.4rem;
	padding: 0.05rem 0.45rem;
	border-radius: 999px;
	background: var(--fucsia);
	color: #fff;
	font-weight: 1000;
	font-size: 0.8125rem;
	transform: rotate(6deg);
}