/* ═══════════════════════════════════════════════════════════════════════════
 * DIÁLOGOS — las cuatro formas que tiene el producto de hablarle a alguien.
 *
 * Medidas sacadas píxel a píxel de los PNG de Canva que están en
 * `apps/web/public/dialogos/referencia-*.png`. No son aproximaciones:
 *
 *   · pastilla   612 × 124 sobre un lienzo de 1280 de ancho, a 68px del suelo
 *   · relleno    rgba(34,34,34,.75) — TRANSLÚCIDA, no gris sólido
 *   · radio      pastilla entera (999px), comprobado contra la curva del PNG
 *   · arcos      trazo claro de 1,6px, 44px de alto, panza de 7px, a 14px del borde
 *   · punto      4px en la panza del arco, en el verde de marca
 *   · texto      Roboto Condensed Bold (e Italic), caja de 18px ≈ 26px de cuerpo
 *   · interlínea 27px · tres renglones y la pastilla está llena
 *   · nombre     encima, pisando el borde, a 63px de la izquierda de la pastilla
 *
 * La mesa de montaje (`docs/design/dialogos.html`) usa exactamente estas mismas
 * medidas. Si aquí se cambia una, allí también — o el vídeo dejará de parecerse
 * al producto.
 * ═══════════════════════════════════════════════════════════════════════════ */

.dialogo {
	/* Roboto Condensed no está en la familia base de la app: es de estas piezas y
	   de ninguna más. El respaldo es la condensada del sistema, no Roboto normal,
	   porque lo que hace que el bocadillo quepa es la anchura estrecha. */
	--dialogo-texto: 'Roboto Condensed', 'Helvetica Neue Condensed', 'Arial Narrow', var(--font-body);
	--dialogo-pastilla: rgba(34, 34, 34, 0.75);
	--dialogo-alto: 124px;
	--dialogo-ancho: 612px;
	--dialogo-linea: 27px;

	position: fixed;
	z-index: 60;
	pointer-events: none;
}

/* Metida dentro de una tarjeta o de una pantalla del laboratorio, la pieza deja
   de ser un HUD de pantalla completa y se ancla al contenedor. */
.dialogo[data-encaje='contenido'] {
	position: absolute;
}

/* Lo que sí se pulsa vuelve a recibir el ratón. */
.dialogo button,
.dialogo [data-pulsable] {
	pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIPOS 1 y 2 · LA PASTILLA
   El 2 es el 1 con una cara dentro: no son dos componentes, son un ajuste.
   ═══════════════════════════════════════════════════════════════════════════ */

.dialogoBanner {
	bottom: var(--dialogo-suelo, 68px);
	left: 50%;
	width: min(var(--dialogo-ancho), calc(100% - 96px));
	transform: translateX(-50%);
	animation: dialogoBannerEntra var(--dur) var(--ease) both;
}

@keyframes dialogoBannerEntra {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

/*
 * El nombre va en MANUSCRITA, no en palo seco.
 *
 * En `referencia-tipo-1.png` ampliado x8 se ve una letra de rotulador, de trazo único
 * y redondeada —la `{`, la `e` de remate inclinado, la `r` de brazo corto—. Eso es
 * `--font-hand` (Gochi Hand), que ya estaba en los tokens. Con Roboto Light el rótulo
 * se volvía un pie de foto; con la manuscrita vuelve a ser lo que era: alguien
 * apuntando quién habla.
 *
 * Medidas del asset: altura de la x ≈ 10 px → cuerpo ≈ 21 px. Empieza a 62 px del
 * borde de la pastilla y **le pisa el borde de arriba** unos 7 px.
 */
.dialogoBanner__quien {
	position: absolute;
	bottom: calc(100% - 7px);
	left: 62px;
	z-index: 3;
	font-family: var(--font-hand);
	font-size: 21px;
	font-weight: var(--fw-regular);
	line-height: 1.2;
	color: var(--text-on-dark);
	-webkit-text-stroke: 3px rgba(37, 37, 37, 0.34);
	white-space: nowrap;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	/* Vive medio sobre la pastilla y medio sobre lo que haya detrás —una foto, una
	   grabación de pantalla, lo que sea—. El contorno es lo que lo hace legible en
	   los dos sitios; la sombra sola no bastaba sobre claro. */
	paint-order: stroke fill;
	animation: dialogoAparece var(--dur-fast) ease both 0.1s;
}

@keyframes dialogoAparece {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* 124px es la ALTURA DE DISEÑO: tres renglones de 27 más aire. Va de `min-height`
   y no de `height` porque una línea que se parte no puede romper la composición —
   la pastilla crece y sigue siendo ella. */
.dialogoBanner__pastilla {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--dialogo-alto);
	padding: 19px 0;
	background: var(--dialogo-pastilla);
	border-radius: var(--radius-pill);
}

.dialogoBanner__arco {
	position: absolute;
	top: 50%;
	width: 12px;
	height: 44px;
	transform: translateY(-50%);
}
.dialogoBanner__arco[data-lado='izq'] {
	left: 14px;
}
.dialogoBanner__arco[data-lado='der'] {
	right: 14px;
	transform: translateY(-50%) scaleX(-1);
}
/* El trazo del asset compuesto sobre la pastilla da un blanco al 42 %, no al 32. */
.dialogoBanner__arco path {
	fill: none;
	stroke: rgba(255, 255, 255, 0.42);
	stroke-width: 2;
}
.dialogoBanner__arco circle {
	filter: drop-shadow(0 0 3px rgba(185, 201, 28, 0.9));
	fill: var(--da-accent);
}

.dialogoBanner__texto {
	position: relative;
	z-index: 2;
	flex: 1;
	min-width: 0;
	/* La sangría izquierda la escribe JS cuando hay cara: cada recorte del reparto
	   tiene su silueta y una cifra fija dejaría a unos apretados y a otros con
	   medio bocadillo vacío. Estos son los valores sin cara. */
	padding: 0 58px 0 62px;
}

.dialogoBanner__linea {
	font-family: var(--dialogo-texto);
	font-size: 26px;
	font-style: italic;
	font-weight: var(--fw-bold);
	line-height: var(--dialogo-linea);
	color: var(--text-on-dark);
	overflow-wrap: break-word;
	white-space: pre-wrap;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* La voz pixel: el mockup la ofrece como alternativa a la cursiva, no como
   añadido. Cuerpo más pequeño porque Press Start 2P tiene la caja llena. */
.dialogoBanner__linea[data-voz='pixel'] {
	font-family: var(--font-pixel);
	font-size: 15px;
	font-style: normal;
	letter-spacing: var(--tracking-pixel);
}

.dialogoBanner__linea em,
.dialogoNavi__globoTexto em {
	font-style: inherit;
	color: var(--da-accent);
	text-shadow: 0 0 12px rgba(185, 201, 28, 0.45);
}

.dialogo__cursor {
	display: inline-block;
	width: 3px;
	height: 20px;
	margin-left: 3px;
	vertical-align: -3px;
	background: var(--text-on-dark);
	animation: dialogoCursor 0.7s step-end infinite;
}
@keyframes dialogoCursor {
	50% {
		opacity: 0;
	}
}

/* La cara del tipo 2: apoyada en el suelo de la pastilla y asomando por arriba.
   Los recortes del reparto ya vienen cortados a la altura del pecho, así que no
   hay nada que recortar aquí: solo apoyarlos. */
.dialogoBanner__cara {
	position: absolute;
	bottom: 0;
	left: var(--dialogo-cara-x, 11%);
	z-index: 1;
	height: calc(var(--dialogo-alto) * var(--dialogo-cara-escala, 1.08));
	pointer-events: none;
	animation: dialogoCaraEntra var(--dur) var(--ease) both 0.06s;
}
.dialogoBanner__cara[data-lado='der'] {
	right: var(--dialogo-cara-x, 11%);
	left: auto;
}
.dialogoBanner__cara img {
	display: block;
	width: auto;
	height: 100%;
	object-fit: contain;
	object-position: bottom;
	filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
}
@keyframes dialogoCaraEntra {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* «Toca para continuar»: a caballo del borde de abajo, como en el asset. */
.dialogoBanner__flecha {
	position: absolute;
	/* 9 px por encima del borde y 12 por debajo: así está en el PNG. */
	bottom: -12px;
	left: 50%;
	z-index: 4;
	width: 26px;
	height: 21px;
	transform: translateX(-50%);
	animation: dialogoFlecha 1.25s ease-in-out infinite;
}
@keyframes dialogoFlecha {
	0%,
	100% {
		transform: translateX(-50%) translateY(0);
	}
	50% {
		transform: translateX(-50%) translateY(4px);
	}
}

/* Toda la pastilla es el botón de continuar. Sin borde ni fondo propios: el
   objetivo táctil es la pieza entera, que es como se lee. */
.dialogoBanner__seguir {
	position: absolute;
	inset: 0;
	z-index: 5;
	cursor: pointer;
	background: none;
	border: none;
	border-radius: var(--radius);
}
.dialogoBanner__seguir:focus-visible {
	outline: 2px solid var(--da-accent);
	outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIPO 3 · NAVI — para cuando hay que mirar a un punto concreto de la pantalla.
   ═══════════════════════════════════════════════════════════════════════════ */

.dialogoNavi {
	top: var(--dialogo-navi-y, 44%);
	left: var(--dialogo-navi-x, 62%);
	width: var(--dialogo-navi-tam, 150px);
	transform: translate(-50%, -50%);
	animation: dialogoNaviEntra var(--dur-slow) var(--ease-bounce) both;
}
@keyframes dialogoNaviEntra {
	from {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.4);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

.dialogoNavi__flota {
	animation: dialogoFlota 2.4s ease-in-out infinite;
}
@keyframes dialogoFlota {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-9px);
	}
}

.dialogoNavi__brillo {
	position: absolute;
	top: 52%;
	left: 50%;
	width: 58%;
	aspect-ratio: 1;
	pointer-events: none;
	background: radial-gradient(circle, rgba(120, 210, 255, 0.55) 0%, transparent 68%);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: dialogoBrillo 1.8s ease-in-out infinite alternate;
}
@keyframes dialogoBrillo {
	from {
		opacity: 0.35;
		transform: translate(-50%, -50%) scale(0.9);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.5);
	}
}

.dialogoNavi__sprite {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	/* Es pixel-art: suavizarlo lo convierte en un borrón. */
	image-rendering: pixelated;
}

/* El bocadillo pixel: borde negro duro, sombra dura y rabo escalonado. Sin blur
   en ninguna parte — la sombra suave rompería el registro. */
.dialogoNavi__globo {
	position: absolute;
	bottom: calc(100% + 16px);
	left: calc(100% - 26px);
	z-index: 3;
	/* `max-content` y no un ancho suelto: dentro de un contenedor de 150px el
	   bocadillo se estrangula y escribe una palabra por renglón. */
	width: max-content;
	min-width: 110px;
	max-width: 340px;
	padding: 11px 15px;
	color: var(--da-ink);
	background: var(--da-paper);
	border: var(--border-rpg) solid var(--da-ink);
	border-radius: 2px;
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.18);
	transform-origin: bottom left;
	animation: dialogoGlobo var(--dur) var(--ease-bounce) both 0.16s;
}
.dialogoNavi__globo[data-lado='izq'] {
	right: calc(100% - 26px);
	left: auto;
	transform-origin: bottom right;
}
@keyframes dialogoGlobo {
	from {
		opacity: 0;
		transform: scale(0.35);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* El bocadillo NO crece mientras escribe.
 *
 * Debajo del texto que se teclea va un fantasma con la frase entera, invisible
 * pero ocupando sitio. Con eso el bocadillo nace ya con su ancho definitivo, y
 * se arreglan dos cosas de un tiro: deja de dar saltos renglón a renglón, y el
 * cálculo de por qué lado sale (`DialogoNavi`) puede medirlo desde el primer
 * fotograma en vez de con la caja vacía. */
.dialogoNavi__globoTexto {
	position: relative;
	font-family: var(--font-pixel);
	font-size: 11px;
	line-height: 1.95;
	letter-spacing: var(--tracking-pixel);
	overflow-wrap: break-word;
	white-space: pre-wrap;
}
.dialogoNavi__fantasma {
	visibility: hidden;
}
.dialogoNavi__escrito {
	position: absolute;
	inset: 0;
}
.dialogoNavi__globoTexto em {
	color: var(--da-board-ink);
	text-shadow: none;
}

/* El rabo, a peldaños, igual que el PNG del kit. Dos capas: los bloques negros
   del contorno y los blancos que abren el hueco hacia el bocadillo. */
.dialogoNavi__rabo {
	position: absolute;
	top: 100%;
	left: 22px;
	width: 26px;
	height: 26px;
}
.dialogoNavi__globo[data-lado='izq'] .dialogoNavi__rabo {
	right: 22px;
	left: auto;
	transform: scaleX(-1);
}
.dialogoNavi__rabo b,
.dialogoNavi__rabo i {
	position: absolute;
	display: block;
}
.dialogoNavi__rabo b {
	background: var(--da-ink);
}
.dialogoNavi__rabo i {
	background: var(--da-paper);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIPO 5 · EL RÓTULO
   No es un bocadillo, es un plano: poquísimas palabras, enormes, sobre lo que haya
   detrás. El registro de savee y de los tráileres.
   ═══════════════════════════════════════════════════════════════════════════ */

.dialogoRotulo {
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 0.18em;
	align-items: var(--dialogo-rotulo-horizontal, center);
	justify-content: var(--dialogo-rotulo-vertical, center);
	padding: 8% 9%;
	text-align: var(--dialogo-rotulo-texto, center);
}

.dialogoRotulo__linea {
	font-family: var(--dialogo-texto);
	font-size: var(--dialogo-rotulo-tam, 72px);
	font-weight: var(--fw-bold);
	line-height: 0.94;
	color: var(--text-on-dark);
	text-transform: uppercase;
	letter-spacing: -0.02em;
	overflow-wrap: break-word;
	white-space: pre-wrap;
	text-shadow: 0 3px 30px rgba(0, 0, 0, 0.5);
	animation: dialogoRotulo 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dialogoRotulo__linea em {
	font-style: normal;
	color: var(--da-accent);
}
@keyframes dialogoRotulo {
	from {
		opacity: 0;
		transform: translateY(26px) scale(0.985);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* El pie va en manuscrita a posta: es la voz de al lado, la que matiza lo que
   acaba de gritar el titular. Sin él, el rótulo es un eslogan. */
.dialogoRotulo__pie {
	margin-top: 0.5em;
	font-family: var(--font-hand);
	font-size: calc(var(--dialogo-rotulo-tam, 72px) * 0.3);
	line-height: 1.25;
	color: rgba(255, 255, 255, 0.82);
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
	animation: dialogoRotulo 0.9s cubic-bezier(0.16, 1, 0.3, 1) both 0.42s;
}

.dialogoRotulo__seguir {
	position: absolute;
	inset: 0;
	cursor: pointer;
	background: none;
	border: none;
}
.dialogoRotulo__seguir:focus-visible {
	outline: 2px solid var(--da-accent);
	outline-offset: -6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIPO 4 · CHAT — WhatsApp simulado. Los tokens del canal ya existían en el
   design system (`--da-wa-deep`, `--da-wa-bubble`): aquí solo se usan.
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * El teléfono **nunca se sale del encuadre**.
 *
 * La ficha del grupo es más alta que la conversación —foto grande, descripción,
 * lista de gente— y con una altura libre se comía el marco por arriba y por abajo.
 * Con una columna flexible, la cabecera y la barra de escribir se quedan quietas y
 * lo de en medio es lo que rueda. Que es como se comporta un teléfono.
 */
.dialogoChat {
	top: var(--dialogo-chat-y, 50%);
	left: var(--dialogo-chat-x, 50%);
	display: flex;
	flex-direction: column;
	width: var(--dialogo-chat-ancho, 420px);
	max-width: calc(100% - 32px);
	max-height: calc(100% - 32px);
	transform: translate(-50%, -50%);
	animation: dialogoChatEntra var(--dur) var(--ease) both;
}

/* La pantalla: lo que de verdad recorta la conversación. Va aparte del marco para
   que el bisel del aparato quede por fuera y no le coma el borde a la cabecera. */
.dialogoChat__pantalla {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	background: var(--da-paper-2);
}

/*
 * EL CONTORNO — las tres lecturas de «ponle el marco de la app», para elegir viendo.
 *
 * Ninguna se inventa: las tres salen de sitios donde la casa ya dibuja esto.
 *  · `ninguno`  — como estaba: una tarjeta flotando. Sirve cuando el chat ES la
 *                 pantalla y no hay nada alrededor con lo que competir.
 *  · `movil`    — el teléfono a línea de tinta de `features/instalar/Instalar.css:57`.
 *                 Dos píxeles de `--da-ink` y radio 22 (que es `--radius-xl` clavado),
 *                 sin muesca y sin bisel plateado: la casa dibuja el aparato como un
 *                 boceto, no como una foto de un iPhone.
 *  · `tarjeta`  — la regla escrita en `shared/ui/eleccion/ElegirAoB.css:78`: lo que
 *                 dice «esto es una pantalla de la app» es que va **hundida** sobre
 *                 el fondo base, no elevada.
 *
 * El marco es de la CASA (tinta) y lo de dentro es del canal ajeno (verde WhatsApp).
 * Esa separación es justo lo que hace que se lea como «la app enseñando un WhatsApp»
 * y no como una copia de WhatsApp.
 */
.dialogoChat[data-marco='ninguno'] {
	overflow: hidden;
	border-radius: var(--radius-lg);
	/* `--shadow-modal` lo despegaba de la página: el chat no es un modal. */
	box-shadow: var(--shadow-pop);
}

.dialogoChat[data-marco='movil'] {
	padding: 8px;
	background: var(--da-paper-2);
	border: 2px solid var(--da-ink);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-pop);
}
.dialogoChat[data-marco='movil'] .dialogoChat__pantalla {
	/* 22 del marco menos los 8 del bisel: así las dos curvas son concéntricas. */
	border-radius: 14px;
}

.dialogoChat[data-marco='tarjeta'] {
	padding: var(--space-3);
	background: var(--da-surface);
	border: var(--border-width) solid var(--border-soft);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-inset);
}
.dialogoChat[data-marco='tarjeta'] .dialogoChat__pantalla {
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-xs);
}
@keyframes dialogoChatEntra {
	from {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

/* La cabecera ES el botón de entrar en la ficha del grupo, así que hay que
   quitarle lo de botón y devolverle lo de cabecera. */
.dialogoChat__cabecera {
	display: flex;
	flex: none;
	gap: var(--space-3);
	align-items: center;
	width: 100%;
	padding: 10px 13px;
	font: inherit;
	color: var(--text-on-dark);
	text-align: left;
	cursor: pointer;
	background: var(--da-wa-deep);
	border: none;
	transition: background var(--dur-fast) var(--ease);
}
.dialogoChat__cabecera:hover {
	background: #08695e;
}
.dialogoChat__cabecera:focus-visible {
	outline: 2px solid var(--da-accent);
	outline-offset: -3px;
}
.dialogoChat__volver {
	font-size: 17px;
	line-height: 1;
	opacity: 0.85;
}
.dialogoChat__foto {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	overflow: hidden;
	background: var(--da-paper-2);
	border-radius: 50%;
}
.dialogoChat__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.dialogoChat__quien {
	flex: 1;
	min-width: 0;
}
.dialogoChat__nombre {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	line-height: 1.25;
	white-space: nowrap;
}
.dialogoChat__estado {
	display: block;
	height: 14px;
	font-size: var(--text-xs);
	line-height: 1.3;
	opacity: 0.75;
}

/* El fondo de WhatsApp no se puede copiar: es suyo. Lo que sí se puede es su
   temperatura —beige cálido con motas— que es lo que hace que se lea como un
   chat y no como una tarjeta más de la app. */
.dialogoChat__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 5px;
	justify-content: flex-end;
	min-height: min(var(--dialogo-chat-alto, 220px), 100%);
	padding: 12px 11px;
	overflow-y: auto;
	background:
		radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.5) 0 2px, transparent 3px),
		radial-gradient(circle at 72% 63%, rgba(255, 255, 255, 0.5) 0 2px, transparent 3px),
		radial-gradient(circle at 44% 88%, rgba(255, 255, 255, 0.4) 0 2px, transparent 3px), #e5ddd5;
	background-size:
		140px 140px,
		180px 180px,
		120px 120px,
		auto;
}

/*
 * Una fila = el hueco de la cara + la burbuja.
 *
 * El hueco **ocupa sitio aunque esté vacío**: si Irene escribe tres mensajes
 * seguidos su cara sale una vez, pero los tres tienen que quedar alineados. Sin el
 * hueco, el segundo y el tercero se irían a la izquierda y se rompería la tanda.
 */
.dialogoChat__linea {
	display: flex;
	gap: 6px;
	align-items: flex-end;
}
.dialogoChat__linea[data-de='yo'] {
	justify-content: flex-end;
}
.dialogoChat__hueco {
	display: flex;
	/* No es `display: none` a posta: tiene que seguir ocupando su sitio. */
	visibility: hidden;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	overflow: hidden;
	border-radius: 50%;
}
.dialogoChat__hueco[data-visible='true'] {
	visibility: visible;
}
.dialogoChat__hueco img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Sin foto, las iniciales en su color. Una silueta gris no dice quién es. */
.dialogoChat__hueco b {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 10px;
	font-weight: var(--fw-bold);
	color: var(--text-on-dark);
	letter-spacing: 0.02em;
}

.dialogoChat__msg {
	position: relative;
	max-width: 78%;
	padding: 6px 9px 7px;
	font-size: var(--text-sm);
	line-height: 1.4;
	color: var(--da-ink);
	overflow-wrap: break-word;
	border-radius: var(--radius-sm);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
	animation: dialogoMsg 0.26s var(--ease-bounce) both;
}
@keyframes dialogoMsg {
	from {
		opacity: 0;
		transform: translateY(9px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.dialogoChat__msg[data-de='otro'] {
	background: var(--da-paper);
}
.dialogoChat__msg[data-de='yo'] {
	background: var(--da-wa-bubble);
}
/* La esquina en punta marca dónde empieza cada tanda, como en WhatsApp. */
.dialogoChat__msg[data-de='otro'][data-abre='true'] {
	border-top-left-radius: 2px;
}
.dialogoChat__msg[data-de='yo'][data-abre='true'] {
	border-top-right-radius: 2px;
}
.dialogoChat__de {
	/* Es un <span>: sin esto el nombre se pega al mensaje («Irene¿Alguien...»). */
	display: block;
	margin-bottom: 1px;
	font-size: 11.5px;
	font-weight: var(--fw-bold);
}
/* ── LA ENCUESTA dentro de una burbuja ──
   La pregunta arriba, cada opción con su barra y, al lado, las caras de quien la votó. Las
   caras son lo que la hace parecer de verdad: la barra sola es un gráfico. */
.dialogoChat__encuesta {
	display: grid;
	gap: 7px;
	min-width: 200px;
	padding-top: 2px;
}
.dialogoChat__encuestaPregunta {
	font-size: 13.5px;
	font-weight: var(--fw-bold);
	line-height: 1.3;
}
.dialogoChat__opcion {
	display: grid;
	gap: 3px;
	padding: 7px 9px;
	background: rgba(37, 37, 37, 0.05);
	border-radius: 10px;
}
.dialogoChat__opcionTexto {
	display: flex;
	gap: 8px;
	justify-content: space-between;
	font-size: 12.5px;
	line-height: 1.3;
}
.dialogoChat__opcionTexto b {
	font-variant-numeric: tabular-nums;
	color: var(--da-accent-text);
}
.dialogoChat__barra2 {
	display: block;
	height: 5px;
	overflow: hidden;
	background: rgba(37, 37, 37, 0.1);
	border-radius: 999px;
}
.dialogoChat__barra2 i {
	display: block;
	height: 100%;
	background: var(--da-accent);
	border-radius: inherit;
	transition: width 0.45s var(--ease);
}
.dialogoChat__votantes {
	display: flex;
	min-height: 18px;
	margin-top: 1px;
}
.dialogoChat__votante {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-right: -5px;
	overflow: hidden;
	font-size: 8px;
	font-weight: var(--fw-bold);
	color: var(--da-paper);
	border: 1.5px solid var(--da-paper);
	border-radius: 50%;
	animation: dialogoChatVoto 0.32s var(--ease) both;
}
.dialogoChat__votante img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@keyframes dialogoChatVoto {
	from {
		opacity: 0;
		transform: scale(0.4);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}
.dialogoChat__encuestaPie {
	font-size: 10.5px;
	color: rgba(37, 37, 37, 0.55);
}
@media (prefers-reduced-motion: reduce) {
	.dialogoChat__votante {
		animation: none;
	}
	.dialogoChat__barra2 i {
		transition: none;
	}
}

.dialogoChat__pie {
	float: right;
	display: flex;
	gap: 3px;
	align-items: center;
	margin: 6px 0 -2px 8px;
	font-size: 10.5px;
	color: rgba(37, 37, 37, 0.45);
}
.dialogoChat__ok {
	font-size: 11px;
	color: #53bdeb;
	letter-spacing: -2px;
}

.dialogoChat__msg[data-de='escribiendo'] {
	display: flex;
	gap: 4px;
	padding: 10px 13px;
	background: var(--da-paper);
	border-top-left-radius: 2px;
}
.dialogoChat__punto {
	display: block;
	width: 7px;
	height: 7px;
	background: var(--da-gray);
	border-radius: 50%;
	animation: dialogoPunto 1.1s ease-in-out infinite;
}
.dialogoChat__punto:nth-child(2) {
	animation-delay: 0.16s;
}
.dialogoChat__punto:nth-child(3) {
	animation-delay: 0.32s;
}
@keyframes dialogoPunto {
	0%,
	60%,
	100% {
		opacity: 0.35;
		transform: translateY(0);
	}
	30% {
		opacity: 1;
		transform: translateY(-4px);
	}
}

/* ── LA FICHA DEL GRUPO ────────────────────────────────────────────────────
   Es la pantalla donde se explica de qué va un grupo, así que tenía que poder
   enseñarse: para eso está el tipo 4. Se entra y se sale tocando la cabecera. */
.dialogoChat__info {
	flex: 1;
	min-height: 0;
	padding: var(--space-4) 0;
	overflow-y: auto;
	text-align: center;
	background: var(--da-paper-soft);
	animation: dialogoInfo var(--dur) var(--ease) both;
}
@keyframes dialogoInfo {
	from {
		opacity: 0;
		transform: translateX(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.dialogoChat__retrato {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	margin: 0 auto var(--space-3);
	overflow: hidden;
	font-size: var(--text-2xl);
	font-weight: var(--fw-bold);
	color: var(--text-on-dark);
	background: var(--da-wa-deep);
	border-radius: 50%;
}
.dialogoChat__retrato img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dialogoChat__infoTitulo {
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: var(--fw-medium);
	line-height: 1.2;
	color: var(--da-ink);
}
.dialogoChat__infoPie {
	margin-top: 2px;
	font-size: var(--text-xs);
	color: var(--text-secondary);
}

.dialogoChat__descripcion {
	padding: var(--space-3) var(--space-4);
	margin: var(--space-4) var(--space-3) 0;
	text-align: left;
	background: var(--da-paper);
	border-radius: var(--radius);
	box-shadow: var(--shadow-xs);
}
.dialogoChat__descripcion p {
	margin-top: 3px;
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--da-ink);
	white-space: pre-wrap;
}
.dialogoChat__etiqueta {
	font-size: var(--text-xs);
	color: var(--da-wa-deep);
}
.dialogoChat__creado {
	display: block;
	margin-top: var(--space-2);
	font-size: 11px;
	color: var(--text-secondary);
}

.dialogoChat__lista {
	padding: var(--space-2) 0;
	margin: var(--space-4) var(--space-3) 0;
	overflow: hidden;
	list-style: none;
	background: var(--da-paper);
	border-radius: var(--radius);
	box-shadow: var(--shadow-xs);
}
.dialogoChat__fila {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	padding: 7px var(--space-4);
	text-align: left;
}
.dialogoChat__cara {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	overflow: hidden;
	font-size: 12px;
	font-weight: var(--fw-bold);
	color: var(--text-on-dark);
	border-radius: 50%;
}
.dialogoChat__cara img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.dialogoChat__filaNombre {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: var(--text-sm);
	color: var(--da-ink);
	white-space: nowrap;
}
.dialogoChat__admin {
	padding: 2px 7px;
	font-size: 10px;
	color: var(--da-wa-deep);
	background: rgba(7, 94, 84, 0.1);
	border-radius: var(--radius-pill);
}

.dialogoChat__barra {
	display: flex;
	flex: none;
	gap: var(--space-2);
	align-items: center;
	padding: 8px 11px;
	background: var(--da-paper-soft);
}
.dialogoChat__campo {
	flex: 1;
	padding: 8px 13px;
	font-size: var(--text-sm);
	color: var(--da-gray);
	background: var(--da-paper);
	border-radius: var(--radius-pill);
}
.dialogoChat__enviar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-size: var(--text-sm);
	color: var(--text-on-dark);
	background: var(--da-wa);
	border-radius: 50%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOVIMIENTO REDUCIDO
   Va al final del fichero a posta: sin `!important`, lo único que le gana a las
   animaciones de arriba es llegar después con la misma especificidad. Y el texto
   ya sale entero por su lado — de eso se encarga `useEscritura`.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.dialogo,
	.dialogo *,
	.dialogo *::before,
	.dialogo *::after {
		animation: none;
	}
}

/* LA ENTRADA DE /comenzar/ · v2 recortable (Nil) con la escena del Profesor Oak y un flashback de campamento.
 * Sin transiciones a propósito: todo salta con el reloj de intro.js (12 fotogramas por segundo). */

html.con-intro,
html.con-intro body {
	overflow: hidden;
}
.intro {
	--papel: #fbfaf6;
	--tinta: #1d1c18;
	--lima: #b9c91c;
	--magenta: #dc00d3;
	--amarillo: #fed01a;
	--azul-poke: #2a5caa;
	--teja: #b5653a;
	--piel: #d99a74;
	--gris: #8f8c83;
	--mochila: #a8612a;
	--pelo: #b8834a;
	--manto: #2a2018;
	--rojo: #d62020;
	--dialogo: 150px;
	--escala: 1.05;
	--x: -340px;
	--salto: 0px;
	--tick: 0;
	--hervor: 0deg;
	--parpadeo: 1;
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	background: var(--papel);
	color: var(--tinta);
	font-family: Roboto, system-ui, -apple-system, sans-serif;
	overflow: hidden;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
@media (max-width: 360px) {
	.intro {
		--escala: 0.92;
		--dialogo: 140px;
	}
}
.intro.sale {
	clip-path: inset(0 0 100% 0);
}
.intro__escena {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.intro__escena > * {
	display: none;
}
.en-puerta .intro__puerta,
.en-escena .intro__suelo,
.en-escena .intro__equipo,
.con-titulo .intro__titulo,
.con-marca .intro__marca,
.con-sueno .intro__sueno,
.con-mapa .intro__mapa,
.con-app .intro__app,
.flashback .intro__fotos,
.con-tuad .intro__tuad,
.pum .intro__golpe,
.con-dialogo .intro__dialogo,
.con-plano .intro__plano,
.eligiendo .intro__caminos {
	display: block;
}

/* ═══ la puerta: «sube el volumen» ═══ */
.intro__puerta {
	position: absolute;
	inset: 0;
	padding: 18vh 24px 0;
	text-align: center;
}
.intro__mision {
	margin: 0 0 14px;
	font: 400 11px/1.6 'Press Start 2P', monospace;
	letter-spacing: 1px;
	color: #5a6400;
}
.intro__volumen {
	margin: 0 0 10px;
	font: 400 clamp(38px, 12vw, 58px) / 1 'Luckiest Guy', Roboto, sans-serif;
	color: var(--amarillo);
	-webkit-text-stroke: 4px var(--azul-poke);
	paint-order: stroke fill;
	text-shadow: 0 5px 0 var(--azul-poke);
	transform: rotate(calc(var(--hervor) * 0.6));
}
.intro__volumen span {
	-webkit-text-stroke: 0;
	text-shadow: none;
	display: inline-block;
	transform: scale(calc(1 + var(--tick) * 0.12));
}
.intro__prepara {
	margin: 0 auto;
	max-width: 22em;
	font: 500 19px/1.4 Roboto, sans-serif;
	text-wrap: balance;
}
.intro__prepara b {
	background: linear-gradient(transparent 58%, rgba(185, 201, 28, 0.6) 58%);
}
.intro__invita {
	margin: 18px auto 0;
	max-width: 22em;
	font: 700 17px/1.4 Roboto, sans-serif;
	color: #9a0093;
}
.intro__invita:empty {
	display: none;
}
.intro__asoma {
	position: absolute;
	left: -58px;
	bottom: 30%;
	width: 150px;
	transform: rotate(calc(18deg + var(--tick) * 4deg));
	filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
		drop-shadow(3px 5px 5px rgba(0, 0, 0, 0.25));
}

/* ═══ el escenario del Profesor Oak: suelo, sombra, Andoni y su perra ═══ */
.intro__suelo {
	position: absolute;
	left: 50%;
	bottom: calc(var(--dialogo) + 18px);
	width: min(96vw, 360px);
	height: 58px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(185, 201, 28, 0.28), rgba(185, 201, 28, 0.1) 60%, transparent 71%);
}
.andando .intro__suelo {
	display: none;
}
.intro__equipo {
	position: absolute;
	left: 0;
	bottom: calc(var(--dialogo) + 36px);
	width: 300px;
	height: 260px;
	transform-origin: 0 100%;
	transform: translate(var(--x), var(--salto)) scale(var(--escala));
	z-index: 2;
}
.salta {
	--salto: -22px;
}
.a-un-lado .intro__equipo {
	transform: translate(-14px, 0) scale(calc(var(--escala) * 0.7));
}
.intro__sombra {
	position: absolute;
	left: 18px;
	right: 6px;
	bottom: -8px;
	height: 26px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.08) 55%, transparent 72%);
}
.intro__dibujo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
		drop-shadow(2px 4px 3px rgba(0, 0, 0, 0.18));
}
.c-mochila { fill: var(--mochila); stroke: var(--tinta); stroke-width: 3; }
.c-esterilla { fill: #3f8f96; stroke: var(--tinta); stroke-width: 3; }
.c-piel { fill: none; stroke: var(--piel); stroke-width: 11; }
.c-manga { fill: none; stroke: var(--teja); stroke-width: 17; }
.c-pantalon { fill: var(--gris); stroke: var(--tinta); stroke-width: 3; }
.c-pierna { fill: none; stroke: var(--gris); stroke-width: 17; }
.c-camiseta { fill: var(--teja); stroke: var(--tinta); stroke-width: 3; }
.c-tirante { fill: none; stroke: #3a2c22; stroke-width: 4; }
.c-rinonera { fill: #232323; }
.c-rinonera-cinta { fill: none; stroke: #232323; stroke-width: 3; }
.c-zapato { fill: #3a3a3a; }
.c-correa { fill: none; stroke: var(--rojo); stroke-width: 3; }
.p-pelo { fill: var(--pelo); stroke: var(--tinta); stroke-width: 2.5; }
.p-manto { fill: var(--manto); }
.p-rabo { fill: none; stroke: var(--pelo); stroke-width: 8; }
.p-pata { fill: none; stroke: var(--pelo); stroke-width: 7; }
.p-collar { fill: none; stroke: var(--rojo); stroke-width: 4; }
.p-ojo { fill: var(--tinta); }

.intro__cara {
	position: absolute;
	left: 29px;
	bottom: 150px;
	width: 94px;
	transform: rotate(var(--hervor));
	transform-origin: 50% 95%;
	filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
		drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.22));
}
.intro__cara--perfil {
	left: 30px;
	width: 104px;
}
.andando .intro__cara {
	margin-bottom: calc(var(--tick) * 4px);
}
.tose .intro__cara {
	transform: translateX(calc(var(--tick) * 6px - 3px)) rotate(calc(var(--tick) * 6deg - 3deg));
}
.intro__equipo > span {
	display: none;
	position: absolute;
	white-space: nowrap;
}
.intro__notas {
	left: 128px;
	bottom: 222px;
	font: 400 28px/1 'Luckiest Guy', Roboto, sans-serif;
	transform: translateY(calc(var(--tick) * -6px)) rotate(12deg);
}
.intro__notas i {
	font-style: normal;
	margin-left: 6px;
	font-size: 20px;
	vertical-align: 14px;
}
.andando .intro__notas {
	display: block;
}
.intro__oh {
	left: 104px;
	bottom: 236px;
	padding: 8px 14px 4px;
	font: 400 42px/1 'Luckiest Guy', Roboto, sans-serif;
	color: var(--amarillo);
	-webkit-text-stroke: 3px var(--azul-poke);
	paint-order: stroke fill;
	background: #fff;
	border: 3px solid var(--tinta);
	border-radius: 18px;
	transform: rotate(-8deg) scale(calc(1 + var(--tick) * 0.06));
}
.oh .intro__oh {
	display: block;
}
.intro__gota {
	left: 112px;
	bottom: 214px;
	font-size: 34px;
	transform: translateY(calc(var(--tick) * 5px)) rotate(-18deg);
}
.ups .intro__gota {
	display: block;
}
.intro__cof {
	left: -40px;
	bottom: 238px;
	font: 400 28px/1 'Luckiest Guy', Roboto, sans-serif;
	transform: rotate(-14deg) scale(calc(1 + var(--tick) * 0.12));
}
.tose .intro__cof {
	display: block;
}

/* los cuerpos en foto (ChatGPT): el cuello, a la altura de la barbilla de las caras (y≈100 de 260) */
.intro__foto-cuerpo,

/* ═══ lo que sale arriba ═══ */
.intro__titulo {
	position: absolute;
	top: 6%;
	left: 16px;
	right: 16px;
	margin: 0;
	text-align: center;
	font: 400 clamp(44px, 14vw, 72px) / 0.98 'Luckiest Guy', Roboto, sans-serif;
	color: var(--amarillo);
	-webkit-text-stroke: 5px var(--azul-poke);
	paint-order: stroke fill;
	text-shadow: 0 6px 0 var(--azul-poke);
	text-transform: uppercase;
	z-index: 3;
}
.intro__titulo span {
	display: block;
	visibility: hidden;
	transform: rotate(calc(var(--hervor) * 1.5));
}
.intro__titulo span.si {
	visibility: visible;
}
.intro__titulo span:last-child {
	color: #fff;
	font-size: 1.12em;
}
.intro__golpe {
	position: absolute;
	inset: -30%;
	background: repeating-conic-gradient(from 0deg at 50% 58%, rgba(254, 208, 26, 0.55) 0 8deg, transparent 8deg 16deg);
	z-index: 1;
}
.intro__golpe span {
	display: none;
}
.intro__marca {
	position: absolute;
	top: 9%;
	left: 0;
	right: 0;
	text-align: center;
	font: 900 clamp(34px, 11vw, 52px) / 1.05 Roboto, sans-serif;
	letter-spacing: -1px;
	transform: rotate(calc(var(--hervor) * 0.5));
}
.intro__marca b {
	background: linear-gradient(transparent 58%, var(--lima) 58%);
	padding: 0 4px;
}
.intro__sueno {
	position: absolute;
	top: 7%;
	left: 50%;
	width: min(78vw, 300px);
	transform: translateX(-50%) rotate(calc(var(--hervor) * 0.8));
	padding: 26px 20px;
	text-align: center;
	font: 500 22px/1.25 Roboto, sans-serif;
	background: #fff;
	border: 3px dashed var(--tinta);
	border-radius: 48% 52% 46% 54% / 55% 48% 52% 45%;
	box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.08);
}
.intro__sueno b {
	font-weight: 900;
	background: linear-gradient(transparent 58%, rgba(185, 201, 28, 0.7) 58%);
}
.intro__sueno::before,
.intro__sueno::after {
	content: '';
	position: absolute;
	border: 3px dashed var(--tinta);
	border-radius: 50%;
	background: #fff;
}
.intro__sueno::before {
	width: 26px;
	height: 26px;
	left: 38%;
	bottom: -40px;
}
.intro__sueno::after {
	width: 14px;
	height: 14px;
	left: 44%;
	bottom: -66px;
}

/* el mapa de España de la app, a lápiz, y la gente que aparece en él */
.intro__mapa {
	position: absolute;
	top: 5%;
	left: 50%;
	width: min(96vw, 440px);
	transform: translateX(-50%) rotate(calc(var(--hervor) * 0.4));
}
.intro__mapa svg {
	display: block;
	width: 100%;
	overflow: visible;
}
.mapa__prov path {
	fill: #fff;
	stroke: var(--tinta);
	stroke-width: 1.3;
	stroke-linejoin: round;
}
.pin {
	visibility: hidden;
}
.pin.si {
	visibility: visible;
}
.pin circle:first-child {
	fill: var(--lima);
	stroke: var(--tinta);
	stroke-width: 2.5;
}
.pin__cabeza,
.pin__cuerpo {
	fill: var(--tinta);
}

/* la app sencillita: «ya veremos» tachado, «¿te subes o no te subes?» */
.intro__app {
	position: absolute;
	top: 4%;
	left: 58%;
	width: min(60vw, 230px);
	transform: translateX(-50%) rotate(calc(2deg + var(--hervor) * 0.5));
}
.app__pantalla {
	padding: 16px 12px 14px;
	background: #fff;
	border: 5px solid var(--tinta);
	border-radius: 26px;
	box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.12);
	display: grid;
	gap: 9px;
	font-size: 13.5px;
	line-height: 1.3;
}
.app__pantalla p {
	margin: 0;
}
.app__plan {
	display: grid;
	gap: 2px;
	padding: 9px 10px;
	border-radius: 12px;
	background: #f3f6d9;
}
.app__plan b {
	font-size: 15px;
}
.app__plan span {
	color: #5f5f5f;
	font-size: 12.5px;
}
.app__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.app__chips span {
	visibility: hidden;
	padding: 3px 8px;
	border: 2px solid var(--tinta);
	border-radius: 999px;
	font-weight: 700;
	font-size: 12px;
}
.app__chips span.si {
	visibility: visible;
}
.app__msg {
	visibility: hidden;
	justify-self: start;
	padding: 7px 11px;
	border-radius: 14px 14px 14px 4px;
	font-weight: 700;
}
.app__msg--gris {
	background: #ececec;
	color: #555;
}
.app__msg--lima {
	justify-self: end;
	border-radius: 14px 14px 4px 14px;
	background: var(--lima);
	color: var(--tinta);
}
.ya-veremos .app__msg--gris,
.te-subes .app__msg--lima {
	visibility: visible;
}
.tachado .app__msg--gris {
	text-decoration: line-through 3px var(--rojo);
	opacity: 0.55;
}
.app__botones {
	visibility: hidden;
	display: flex;
	gap: 6px;
}
.te-subes .app__botones {
	visibility: visible;
}
.app__botones span {
	flex: 1;
	padding: 7px 0;
	text-align: center;
	border: 2px solid var(--tinta);
	border-radius: 999px;
	font-weight: 700;
	font-size: 12.5px;
}
.app__botones .si {
	background: var(--tinta);
	color: #fff;
	transform: scale(calc(1 + var(--tick) * 0.06));
}

/* Tuad entra: «aquí te dejo con Tuad» */
.intro__tuad {
	position: absolute;
	left: 52%;
	bottom: calc(var(--dialogo) + 30px);
	width: min(46vw, 190px);
	transform: rotate(calc(var(--hervor) * -1)) translateY(calc(var(--tick) * -6px));
	z-index: 2;
}
.intro__tuad img {
	display: block;
	width: 100%;
	filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
		drop-shadow(3px 5px 5px rgba(0, 0, 0, 0.25));
}

/* ═══ el diálogo: abajo, centrado, letra a letra ═══ */

/* ═══ el flashback de campamento: «hemos visto en estos años…» ═══ */
.flashback {
	background: #1f1a14;
	color: #f4ead8;
}
.flashback .intro__escena {
	filter: sepia(0.35) brightness(var(--parpadeo)) contrast(1.06);
}
.flashback .intro__escena::before,
.flashback .intro__escena::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 6%;
	background: #000;
	z-index: 5;
}
.flashback .intro__escena::before {
	top: 0;
}
.flashback .intro__escena::after {
	bottom: 0;
}
.flashback .intro__suelo {
	display: none;
}
.flashback .intro__equipo {
	transform: translate(calc(50vw - 87px * var(--escala)), 0) scale(calc(var(--escala) * 0.7));
}
.intro__fotos {
	position: absolute;
	top: 9%;
	left: 0;
	right: 0;
	height: 44%;
}
.intro__fotos img {
	position: absolute;
	top: 0;
	width: min(40vw, 170px);
	aspect-ratio: 4 / 5;
	object-fit: cover;
	padding: 8px 8px 26px;
	background: #f4ead8;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}
.intro__fotos img:nth-child(1) {
	left: 4%;
	transform: rotate(calc(-9deg + var(--hervor)));
}
.intro__fotos img:nth-child(2) {
	left: 50%;
	top: 6%;
	transform: translateX(-50%) rotate(calc(3deg - var(--hervor)));
	z-index: 1;
}
.intro__fotos img:nth-child(3) {
	right: 4%;
	top: 2%;
	transform: rotate(calc(10deg + var(--hervor)));
}

/* ═══ botones y grano ═══ */
.intro__saltar {
	position: absolute;
	top: max(12px, env(safe-area-inset-top));
	right: 12px;
	min-height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.07);
	color: inherit;
	font: 700 14px/1 Roboto, sans-serif;
	cursor: pointer;
	z-index: 6;
}
.flashback .intro__saltar {
	background: rgba(255, 255, 255, 0.14);
}
.intro button:focus-visible {
	outline: 3px solid var(--magenta);
	outline-offset: 3px;
}
.intro__grano {
	position: absolute;
	inset: -50%;
	pointer-events: none;
	opacity: 0.07;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	transform: translate(calc(var(--tick) * 37px), calc(var(--tick) * -23px));
	mix-blend-mode: multiply;
	z-index: 7;
}
.flashback .intro__grano {
	opacity: 0.28;
	mix-blend-mode: screen;
}

/* ═══ quien pide menos movimiento: sin paseo, sin saltos, sin rayos ni grano que baile ═══ */
.intro--quieto,
.intro--quieto * {
	--tick: 0 !important;
	--hervor: 0deg !important;
	--salto: 0px !important;
}
.intro--quieto .intro__golpe,
.intro--quieto .intro__notas {
	display: none !important;
}

/* ═══ v3 · los cuerpos en foto (ChatGPT): intro.js los coloca con su cuello bajo la cara ═══ */
.intro__foto-cuerpo,
.intro__foto-perra {
	display: none;
	position: absolute;
	max-width: none;
	filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
		drop-shadow(2px 5px 4px rgba(0, 0, 0, 0.2));
}
.con-fotos .intro__foto-cuerpo,
.con-fotos .intro__foto-perra {
	display: block;
}
.con-fotos .c-correa {
	stroke-width: 2.5;
}

/* ═══ v3 · la puerta: «¡Vamos!» y el atajo de quien ya nos conoce ═══ */
.intro__entrar {
	display: none;
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: max(9%, 24px);
	flex-direction: column;
	align-items: center;
	gap: 12px;
	z-index: 6;
}
.en-puerta .intro__entrar {
	display: flex;
}
.intro__toca,
.intro--atajo .intro__atajo {
	min-height: 56px;
	padding: 0 32px;
	border: 3px solid var(--tinta);
	border-radius: 999px;
	background: var(--lima);
	color: var(--tinta);
	font: 400 24px/1 'Luckiest Guy', Roboto, sans-serif;
	letter-spacing: 1px;
	box-shadow: 0 5px 0 var(--tinta);
	cursor: pointer;
	transform: scale(calc(1 + var(--tick) * 0.04));
}
.intro__atajo,
.intro--atajo .intro__toca {
	min-height: 44px;
	padding: 0 12px;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--tinta);
	font: 700 15px/1.2 Roboto, sans-serif;
	letter-spacing: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
	transform: none;
	cursor: pointer;
}
.intro--atajo .intro__atajo {
	order: -1;
	text-decoration: none;
	font-size: 22px;
}

/* ═══ v3 · su diálogo de la app (DialogoBanner, apps/web/src/shared/ui/dialogos/Dialogos.css), afinado al móvil ═══ */
.intro .intro__dialogo {
	display: none;
	--dialogo-suelo: max(14px, env(safe-area-inset-bottom));
	--dialogo-alto: 104px;
	width: calc(100% - 24px);
	max-width: 560px;
	z-index: 4;
}
.intro.con-dialogo .intro__dialogo {
	display: block;
}
.intro .dialogoBanner__linea {
	padding: 0;
	font-size: 19px;
	line-height: 24px;
	text-align: center;
	text-wrap: balance;
}
.intro .dialogoBanner__texto {
	padding: 0 34px;
}
.intro .dialogoBanner__quien {
	display: none;
	left: 50%;
	transform: translateX(-50%);
	font-size: 22px;
}
.intro.con-nombre .dialogoBanner__quien {
	display: block;
}
.intro .dialogoBanner__flecha {
	display: none;
}
.intro.parada.linea-hecha .dialogoBanner__flecha {
	display: block;
	transform: translateY(calc(var(--tick) * 3px));
}
.intro__sigue {
	display: none;
	position: absolute;
	right: 22px;
	bottom: calc(var(--dialogo) - 18px);
	margin: 0;
	font: 400 18px/1 'Gochi Hand', 'Comic Sans MS', cursive;
	color: var(--tinta);
	opacity: calc(0.45 + var(--tick) * 0.4);
	z-index: 5;
}
.intro.parada.linea-hecha:not(.eligiendo) .intro__sigue {
	display: block;
}
.flashback .intro__sigue {
	color: #f4ead8;
}

/* el texto suelto, sin caja: se alterna con la pastilla (el flashback) */
.intro__plano {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: max(9%, 40px);
	margin: 0 auto;
	max-width: 520px;
	text-align: center;
	font: 500 21px/1.35 Roboto, sans-serif;
	color: #fff;
	text-shadow: 0 2px 10px #000, 0 0 2px #000;
	text-wrap: balance;
	z-index: 6;
}

/* ═══ v3 · «no sé si sabes o no sabes…»: tres caminos, y Tuad sigue por el elegido ═══ */
.intro__caminos {
	position: absolute;
	top: 11%;
	left: 50%;
	width: min(calc(100% - 40px), 360px);
	transform: translateX(-50%);
	z-index: 6;
}
.intro__caminos::before {
	content: '¿Qué quieres hacer?';
	display: block;
	margin-bottom: 12px;
	text-align: center;
	font: 400 11px/1.6 'Press Start 2P', monospace;
	letter-spacing: 1px;
	color: #5a6400;
}
.intro__camino {
	display: block;
	width: 100%;
	min-height: 54px;
	margin-bottom: 12px;
	padding: 0 18px;
	border: 3px solid var(--tinta);
	border-radius: 999px;
	background: #fff;
	color: var(--tinta);
	font: 700 18px/1.2 Roboto, sans-serif;
	box-shadow: 0 4px 0 var(--tinta);
	cursor: pointer;
}
.intro__camino--principal {
	background: var(--lima);
	font: 400 22px/1 'Luckiest Guy', Roboto, sans-serif;
	letter-spacing: 1px;
	transform: scale(calc(1 + var(--tick) * 0.03));
}
.intro__camino:focus-visible,
.intro__entrar button:focus-visible {
	outline: 3px solid var(--magenta);
	outline-offset: 3px;
}

/* ═══ v3.1 · ajustes finos (30/09 noche) ═══ */
/* el mapa: la gente de verdad por zona, su cifra y de dónde sale */
.pin__cifra {
	font: 900 22px/1 Roboto, sans-serif;
	fill: var(--tinta);
	paint-order: stroke fill;
	stroke: #fff;
	stroke-width: 6px;
	stroke-linejoin: round;
}
.pin--grande .pin__aro {
	stroke-width: 3.5;
	transform: scale(calc(1 + var(--tick) * 0.08));
}
.pin--grande .pin__cifra {
	font-size: 30px;
}
.intro__mapa-fuente {
	margin: 2px 0 0;
	text-align: right;
	font: 400 15px/1.2 'Gochi Hand', 'Comic Sans MS', cursive;
	color: #5f5f5f;
}
/* el flashback: las cifras de estos años, en ámbar de campamento, sobre las polaroids */
.intro__cifras {
	display: none;
	position: absolute;
	top: 8%;
	left: 16px;
	right: 16px;
	text-align: center;
	color: var(--amarillo);
	z-index: 6;
}
.flashback .intro__cifras {
	display: block;
}
.intro__cifras p {
	display: inline-block;
	margin: 0 10px;
	vertical-align: top;
	max-width: 44%;
}
.intro__cifras b {
	display: block;
	font: 400 clamp(38px, 12vw, 56px) / 1 'Luckiest Guy', Roboto, sans-serif;
	text-shadow: 0 0 22px rgba(254, 208, 26, 0.45);
	font-variant-numeric: tabular-nums;
}
.intro__cifras span {
	display: block;
	margin-top: 4px;
	font: 500 14px/1.25 Roboto, sans-serif;
	color: #f4ead8;
}
.intro__cifras small {
	display: block;
	margin-top: 8px;
	font: 400 14px/1.2 'Gochi Hand', 'Comic Sans MS', cursive;
	color: rgba(244, 234, 216, 0.75);
}
.flashback .intro__fotos {
	top: 27%;
	height: 32%;
}
.flashback .intro__fotos img {
	width: min(32vw, 140px);
}

/* ═══ v3.2 · la puerta, en calma (Andoni, 30/09: «el inicio es demasiado caótico… que el ¡Vamos! no sea tan caótico») ═══
   Quieto todo lo que se lee y se pulsa; solo la cara asoma, y lo hace una vez. El baile empieza al tocar. */
.en-puerta .intro__volumen,
.en-puerta .intro__volumen span,
.en-puerta .intro__toca,
.en-puerta .intro__atajo {
	transform: none;
}
.en-puerta .intro__asoma {
	transform: rotate(14deg);
	animation: intro-asoma 0.9s steps(4) 0.4s both;
}
@keyframes intro-asoma {
	from {
		transform: translateX(-70px) rotate(24deg);
	}
	to {
		transform: rotate(14deg);
	}
}
.en-puerta .intro__grano {
	opacity: 0.04;
	transform: none;
}
.intro__toca {
	letter-spacing: 0.5px;
}
@media (prefers-reduced-motion: reduce) {
	.en-puerta .intro__asoma {
		animation: none;
	}
}

/* ═══ v3.3 · los escenarios, los gestos y la despedida (30/09 noche) ═══ */
.intro__escena > .intro__fondo {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.en-puerta .intro__escena > .intro__fondo {
	display: none; /* la puerta, en blanco y en calma: el primer escenario aparece al tocar */
}
.intro__fondo--entra {
	animation: intro-fondo-entra 0.36s steps(4) both;
}
@keyframes intro-fondo-entra {
	from {
		transform: translateY(16%);
		opacity: 0.35;
	}
	to {
		transform: none;
		opacity: 1;
	}
}
.fondo__llama {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	transform: scaleY(calc(1 + var(--tick) * 0.14)) scaleX(calc(1 - var(--tick) * 0.06));
}
.flashback .intro__fondo {
	filter: none;
}
.se-va .intro__equipo {
	transform: translate(var(--x), 0) scale(calc(var(--escala) * 0.7));
}
/* la pista del gesto: «toca para seguir» o «desliza hacia arriba ↑» (y si tocas cuando toca deslizar, te lo recuerda) */
.intro[data-gesto='desliza'] .intro__sigue {
	right: 50%;
	transform: translate(50%, calc(var(--tick) * -6px));
	font-size: 22px;
	color: var(--magenta);
}
.intro.recuerda .intro__sigue {
	transform: translate(50%, -14px) scale(1.15);
}
.intro[data-gesto='desliza'].parada.linea-hecha .dialogoBanner__flecha {
	transform: rotate(180deg) translateY(calc(var(--tick) * 3px));
}
@media (prefers-reduced-motion: reduce) {
	.intro__fondo--entra {
		animation: none;
	}
}

/* ═══ v4 · «¿por qué Tuad es una seta?» (30/09 noche): se toca en los caminos ═══ */
.intro__seta-boton {
	display: block;
	margin: 4px auto 0;
	padding: 8px 14px;
	border: 0;
	border-bottom: 2px dashed #c14d1c;
	background: none;
	color: #8a3410;
	font: 700 16px/1.3 Roboto, sans-serif;
	cursor: pointer;
	transform: rotate(calc(var(--hervor) * 0.5));
}
.seta-vista .intro__seta-boton {
	display: none;
}
.micelio .intro__micelio,
.con-tele .intro__tele {
	display: block;
}
.en-seta .intro__tuad {
	left: 50%;
	bottom: auto;
	top: 9%;
	width: min(40vw, 170px);
	margin-left: min(-20vw, -85px);
}
/* los hilos del micelio: crecen a saltos desde Tuad y unen a la gente por debajo */
.intro__micelio {
	position: absolute;
	left: 0;
	right: 0;
	top: 20%;
	width: 100%;
	height: 42%;
	z-index: 1;
}
.intro__micelio path {
	fill: none;
	stroke: #b98a4a;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: calc(1 - var(--micelio, 0));
}
.intro__micelio circle {
	fill: var(--lima);
	stroke: var(--tinta);
	stroke-width: 3;
	opacity: var(--micelio, 0);
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(calc(1 + var(--tick) * 0.12));
}
/* el trozo del vídeo de la campaña, como una polaroid pegada con celo */
.intro__tele {
	position: absolute;
	left: 50%;
	top: 6%;
	width: min(58vw, 250px);
	margin: 0 0 0 calc(min(58vw, 250px) / -2);
	padding: 8px 8px 30px;
	background: #fff;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
	transform: rotate(calc(-2deg + var(--hervor) * 0.4));
	z-index: 7;
}
.intro__tele::before {
	content: '';
	position: absolute;
	top: -10px;
	left: 50%;
	width: 70px;
	height: 20px;
	margin-left: -35px;
	background: rgba(253, 242, 201, 0.85);
	transform: rotate(3deg);
}
.intro__tele video {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	background: #222;
}
.intro__tele figcaption {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 6px;
	font: 400 13px/1.2 'Gochi Hand', 'Comic Sans MS', cursive;
	color: var(--tinta);
	text-align: center;
}

/* ═══ v4 · el mapa, en tres versiones (?mapa=a|b|c) para que elija viéndolas ═══ */
.mapa__ruta,
.mapa__corazon {
	display: none;
}
.mapa__corazon {
	font: 400 44px/1 sans-serif;
	fill: #e0245e;
	paint-order: stroke fill;
	stroke: #fff;
	stroke-width: 5px;
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(calc(1 + var(--tick) * 0.15));
}
.con-corazon .mapa__corazon {
	display: inline;
}
/* (a) la gente de verdad: el mapa blanco, la gente por zona con su cifra y el corazón en Madrid — la de la v3, afinada */

/* (b) recortable: las provincias caen como piezas de papel kraft en tres tandas; la gente, pegatinas sin cifras */
[data-mapa='b'] .mapa__prov path {
	fill: #efce8e;
	stroke: #fff;
	stroke-width: 3;
	visibility: hidden;
}
[data-mapa='b'][data-tandas='1'] .mapa__prov path[data-tanda='0'],
[data-mapa='b'][data-tandas='2'] .mapa__prov path:is([data-tanda='0'], [data-tanda='1']),
[data-mapa='b'][data-tandas='3'] .mapa__prov path {
	visibility: visible;
}
[data-mapa='b'] .intro__mapa svg {
	filter: drop-shadow(4px 6px 0 rgba(0, 0, 0, 0.18));
}
[data-mapa='b'] .pin__cifra {
	display: none;
}
[data-mapa='b'] .pin circle:first-child {
	fill: #fff;
	stroke: var(--tinta);
	stroke-width: 3;
}

/* (c) ruta a lápiz: el mapa solo a trazo; en cada «cualquier lugar» se dibuja un tramo, y al final, una persona y un corazón */
[data-mapa='c'] .mapa__prov path {
	fill: rgba(255, 255, 255, 0.55);
	stroke: #5f5a4e;
	stroke-width: 1.4;
	stroke-dasharray: 4 2;
}
[data-mapa='c'] .mapa__pines,
[data-mapa='c'] .intro__mapa-fuente {
	display: none;
}
[data-mapa='c'] .mapa__ruta {
	display: inline;
}
.ruta {
	fill: none;
	stroke: #dc00d3;
	stroke-width: 6;
	stroke-linecap: round;
	stroke-dasharray: 1;
}
.ruta--1 {
	stroke-dashoffset: calc(1 - var(--ruta1, 0));
}
.ruta--2 {
	stroke-dashoffset: calc(1 - var(--ruta2, 0));
}
.ruta__meta {
	visibility: hidden;
}
.con-corazon .ruta__meta {
	visibility: visible;
}
.ruta__meta > circle {
	fill: var(--lima);
	stroke: var(--tinta);
	stroke-width: 3;
}

/* mantener pulsado para subirte: el «Me subo ✓» se llena mientras aguantas */
.aguanta .app__botones .si {
	background: var(--lima);
	color: var(--tinta);
	transform: scale(1.12);
}

/* ═══ v4.1 · en blanco y en calma (30/09 noche) ═══════════════════════════════════════════════════════════════════
   Andoni: «todo en fondo blanco» — la estética de Nil Ojeda: fondo blanco puro, recortables con una sombra suave, los
   objetos entran enteros. Y «todo lo parpadeante me genera epilepsia»: fuera los escenarios, el flashback oscuro con
   bandas y grano, los rayos del «¡pum!» y el temblor por fotograma (eso lo hace ahora intro.js: respira despacio). */
.intro {
	--papel: #fff;
	background: #fff;
}
.intro__suelo,
.intro__golpe,
.pum .intro__golpe {
	display: none !important;
}
/* el flashback de campamento SÍ va oscuro y con grano (Andoni, 1/10: «esa parte sí estaba bien»), pero quieto: sin el
   brillo que temblaba ni el grano que bailaba. Lo de la v3 (más arriba) vuelve a valer; aquí solo se quita el movimiento. */
.intro__grano,
.intro__hoguera {
	display: none;
}
.flashback .intro__grano,
.flashback .intro__hoguera {
	display: block;
}
.intro__hoguera {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1; /* detrás de la escena: la hoguera es el fondo, no tapa las polaroids */
	pointer-events: none;
}
.flashback .intro__escena {
	filter: sepia(0.35) contrast(1.06);
}
.intro.flashback {
	background: #1f1a14;
	color: #f4ead8;
}
.intro__grano,
.flashback .intro__grano {
	transform: none;
}
/* la sombra de recortable (Nil): cada objeto, un papel apoyado sobre el blanco */
.intro__sueno,
.intro__app,
.intro__mapa svg,
.intro__tele {
	filter: drop-shadow(6px 10px 0 rgba(0, 0, 0, 0.06)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.1));
}
.intro__mapa-fuente {
	color: #8a8375;
}
/* las entradas: cada cosa llega entera, en cuatro fotogramas, una sola vez (como en su carrusel) */
.con-titulo .intro__titulo,
.con-marca .intro__marca,
.con-sueno .intro__sueno,
.con-mapa .intro__mapa,
.con-app .intro__app,
.flashback .intro__fotos,
.flashback .intro__cifras,
.con-tuad .intro__tuad,
.eligiendo .intro__caminos,
.micelio .intro__micelio,
.con-tele .intro__tele {
	animation: intro-entra 0.4s steps(4) both;
}
@keyframes intro-entra {
	from {
		translate: 0 28px;
		scale: 0.82;
		opacity: 0;
	}
	60% {
		translate: 0 -4px;
		scale: 1.03;
		opacity: 1;
	}
	to {
		translate: none;
		scale: none;
		opacity: 1;
	}
}
@media (prefers-reduced-motion: reduce) {
	.intro * {
		animation: none !important;
	}
}
/* «¡Comienza tu aventura Poké…!»: cada palabra llega de un golpe (tres fotogramas), y «Poké…!» un poco más grande: el ¡pum! */
.intro__titulo span.si {
	animation: intro-palabra 0.25s steps(3) both;
}
.intro__titulo span.si:last-child {
	animation-name: intro-pum;
}
@keyframes intro-palabra {
	from {
		scale: 0.6;
	}
	66% {
		scale: 1.12;
	}
	to {
		scale: none;
	}
}
@keyframes intro-pum {
	from {
		scale: 0.5;
	}
	66% {
		scale: 1.3;
	}
	to {
		scale: none;
	}
}

/* ═══ v5.2 · la puerta es el «¿quién eres?» (01/10): tres puertas, la de «nuevo» delante ═══ */
.intro__quien {
	margin: 0 0 2px;
	font: italic 400 17px/1.2 'Lora', Georgia, serif;
	color: #5f5f5f;
}
.intro__comunidad {
	min-height: 44px;
	padding: 0 12px;
	border: 0;
	background: none;
	color: #5f5f5f;
	font: 500 15px/1.2 Roboto, sans-serif;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ═══ v5.4 · «somos todos», el «¡uy!» y el cuerpo que reacciona (01/10) ═══ */
.intro__gente {
	position: absolute;
	right: -30px;
	bottom: 38%;
	width: min(40vw, 190px);
	transform: rotate(-8deg);
	filter: drop-shadow(-3px 6px 8px rgba(0, 0, 0, 0.18));
	animation: intro-gente 0.9s steps(4) 0.6s both;
	pointer-events: none;
}
@keyframes intro-gente {
	from {
		transform: translateX(90px) rotate(-14deg);
	}
	to {
		transform: rotate(-8deg);
	}
}
.intro__uy {
	position: absolute;
	inset: 0;
	z-index: 9;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0 24px;
	background: #fff;
	text-align: center;
	font: 400 clamp(34px, 10vw, 52px) / 1.1 'Gochi Hand', 'Comic Sans MS', cursive;
	color: #9a0093;
	pointer-events: none;
	animation: intro-uy 1.9s ease both;
}
@keyframes intro-uy {
	0%,
	55% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}
/* deslizar ↑: sube, se choca con el techo (se aplasta un poco) y cae con un rebote */
.intro__equipo.reac-techo {
	animation: reac-techo 1.1s cubic-bezier(0.3, 0.7, 0.4, 1) both;
}
@keyframes reac-techo {
	0% {
		translate: 0 0;
		scale: 1;
	}
	32% {
		translate: 0 -46vh;
		scale: 1 1;
	}
	40% {
		translate: 0 -46vh;
		scale: 1.06 0.9;
	}
	72% {
		translate: 0 0;
		scale: 1;
	}
	84% {
		translate: 0 -16px;
	}
	100% {
		translate: 0 0;
	}
}
.intro__equipo.reac-derecha {
	animation: reac-lado 0.9s cubic-bezier(0.3, 0.7, 0.4, 1) both;
	--lado: 1;
}
.intro__equipo.reac-izquierda {
	animation: reac-lado 0.9s cubic-bezier(0.3, 0.7, 0.4, 1) both;
	--lado: -1;
}
@keyframes reac-lado {
	0% {
		translate: 0 0;
		rotate: 0deg;
	}
	35% {
		translate: calc(var(--lado) * 70px) 0;
		rotate: calc(var(--lado) * 8deg);
	}
	70% {
		translate: calc(var(--lado) * -10px) 0;
		rotate: calc(var(--lado) * -3deg);
	}
	100% {
		translate: 0 0;
		rotate: 0deg;
	}
}
@media (prefers-reduced-motion: reduce) {
	.intro__uy {
		animation-duration: 0.01s;
	}
	.intro__gente {
		animation: none;
	}
}