@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Roboto+Condensed:ital,wght@0,700;1,700&family=Rubik:wght@400;500;700;800;900&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Poppins:wght@300;400;500;600;700&family=Gochi+Hand&family=Press+Start+2P&display=swap');
/* ∂iario aventureros — DESIGN TOKENS
 * Fuente de verdad: Claude Design · "Diario Aventureros Design System" (project/tokens/*.css),
 * exportado a diario-aventureros-intelligence/diario-aventureros-design-system. Consolidado aquí
 * en un único archivo (la app importa uno solo) en el estilo del repo (tabs, hex minúsculas).
 * Brandbook 60/30/10: fondo claro + aire (60), texto sobrio (30), acento verde en acciones (10).
 * Negro nunca puro (#252525). Los colores de ROL son puntuales (badges, estados), nunca rellenos grandes. */

:root {
	/* ═══════════════════ COLOR ═══════════════════ */

	/* ---- Base de marca ---- */
	--da-surface: #f1f1f1; /* fondo base de toda la app */
	--da-surface-warm: #f4f4f0; /* variante cálida usada en el portal de marca */
	--da-paper: #ffffff; /* tarjetas, formularios, superficies elevadas */
	--da-paper-soft: #f7f7f7; /* "Accent 7" en Figma — gris casi blanco */
	--da-paper-2: #ececec; /* superficie hundida / fondo de chips */
	--da-card-base: #ededee; /* base de tarjeta "revelar" (success) */

	--da-ink: #252525; /* texto principal — NUNCA #000 */
	--da-ink-warm: #2f2418; /* madera, carteles, tinta cálida de botones-sign */
	--da-gray: #9d9d9d; /* texto secundario, placeholders, estado pendiente */
	--da-gray-line: #e5e7eb; /* caso puntual: línea/borde gris (gray-200) */

	--da-accent: #b9c91c; /* verde lima — acción, CTA, éxito, color de marca */
	--da-accent-deep: #cfde3f; /* cima del degradado del cartel activo */
	--da-accent-ink: #2e3300; /* texto oscuro legible SOBRE el verde */
	--da-accent-shadow: rgba(140, 155, 0, 0.3); /* sombra inferior chunky de botones verdes */

	/* ---- Roles de la comunidad (uso puntual) ---- */
	--da-member: #dc00d3; /* magenta — miembro, exclusividad */
	--da-grumete: #fed01a; /* amarillo — grumete, bienvenida, calidez */
	--da-partner: #23cf9d; /* verde-agua — partner / colaborador */
	--da-pendiente: #9d9d9d; /* gris — pendiente / explorando */

	/*
	 * El ámbar oscuro que pedía el punto A-3 del modelo, y que faltaba.
	 *
	 * La regla es: el color del rol vive en el aro, el sello y el relleno; el texto
	 * va en tinta. Ninguno de los colores de rol llega a 4,5:1 sobre blanco
	 * (grumete 1,47 · accent 1,84 · colaborador 2,00 · pendiente 2,71 · miembro 4,21),
	 * así que cuando hace falta ESCRIBIR algo en amarillo —"ya es grumete"— no se
	 * puede usar --da-grumete.
	 *
	 * Mismo tono (48°) y misma saturación que --da-grumete, bajada la luminosidad
	 * hasta pasar el listón con margen en TODAS las superficies claras del producto:
	 * blanco 5,87:1 · paper-soft #f7f7f7 5,48:1 · superficie #f1f1f1 5,20:1 ·
	 * card-base #ededee 5,02:1 · hundido #ececec 4,97:1 · pastilla #e9e9e9 4,84:1 ·
	 * crema de aviso #fdf3d0 5,29:1. Ya no hace falta la negrita para que se lea.
	 *
	 * 06/09/2026 — bajado de #846a01 (que se quedaba en 4,38:1 sobre la pastilla
	 * amarilla, a un pelo del listón) al #7a6200 que ya estaba escrito a mano en
	 * Embudo.css:232 y EmbudoAuth.css:306. Así hay UN solo ámbar de escribir.
	 */
	--da-grumete-ink: #7a6200;

	/*
	 * El gris que se puede LEER, y es la otra mitad del mismo punto A-3.
	 *
	 * `--da-gray` (#9d9d9d) está en la lista de colores que no llegan a 4,5:1 — da 2,71:1
	 * sobre blanco— y sin embargo es el que usa `--text-secondary`, o sea casi toda la letra
	 * pequeña del producto. Mientras eso sea solo ambiente da igual; el problema es cuando
	 * en ese gris va escrita **una regla** («avisa si no vas», «normas de comunidad»,
	 * «1 plaza pedida, todavía sin respuesta»), porque entonces lo que no se lee es
	 * información.
	 *
	 * Mismo gris neutro, bajado hasta pasar el listón en las tres superficies claras del
	 * producto: blanco 5,74:1 · superficie #f1f1f1 5,08:1 · hundido #ececec 4,86:1.
	 *
	 * **No sustituye a `--da-gray`**: el ambiente sigue siendo ambiente. Este es para lo
	 * secundario que además hay que poder leer.
	 */
	--da-gray-ink: #666666;

	/*
	 * El mismo valor, con un nombre que **no se redefine nunca**.
	 *
	 * Hace falta porque las pantallas de fondo oscuro redefinen `--da-gray-ink` a un gris
	 * claro para su contexto (ver `Resumen.css`), y dentro de ellas hay islas claras —una
	 * nota de papel, una tarjeta blanca— donde el secundario tiene que volver a ser oscuro.
	 * Sin un ancla, esa vuelta no se puede escribir.
	 */
	--da-gray-ink-claro: #666666;

	/*
	 * El magenta que se puede LEER — cierra el punto A-3 para el rol de miembro.
	 *
	 * `--da-member` (#dc00d3) da 4,21:1 sobre blanco: por debajo del 4,5:1 que hace
	 * falta para texto, y las pastillas de rol son de 10–12 px en negrita, o sea que
	 * no cuentan como «texto grande». Cuando hay que ESCRIBIR algo en magenta —«ya es
	 * miembro», la cifra de la cola de conversión— no se puede usar `--da-member`.
	 *
	 * Mismo tono (302,5°) y misma saturación (100%), luminosidad de 43,1% a 30,2%:
	 * blanco 7,51:1 · paper-soft 7,01:1 · superficie 6,65:1 · card-base 6,42:1 ·
	 * hundido 6,36:1 · --member-tint 5,66:1 · --member-tint-solid 4,80:1.
	 *
	 * **No sustituye a `--da-member`**: el color del rol sigue viviendo en el aro, el
	 * sello, el borde y el relleno. Este es solo para escribir.
	 */
	--da-member-ink: #9a0093;

	/*
	 * El verde-agua que se puede LEER — el par del colaborador, y el peor caso de
	 * todos: `--da-partner` (#23cf9d) da 2,00:1 sobre blanco, ni la mitad del listón.
	 *
	 * Este valor NO se inventa: ya se usaba como valor de repuesto de
	 * `--da-partner-ink` en Demo.css, Bienvenida.css ×2, FichaAlta.css ×2 y
	 * Guardia.css, y estaba fichado como candidato en el bundle de Design
	 * (2026-09-02-fundacion/tokens/README-diff.md:30). Solo faltaba darlo de alta.
	 * Mismo tono (162°), luminosidad 20,2%:
	 * blanco 7,99:1 · paper-soft 7,46:1 · superficie 7,07:1 · card-base 6,83:1 ·
	 * hundido 6,76:1 · --partner-tint 6,54:1 · lavado #dff7ef 7,11:1.
	 *
	 * ⚠️ Las dos son tinta de FONDO CLARO. En pantallas oscuras NO se usan: darían
	 * 2,04:1 y 1,92:1 sobre `--da-ink`.
	 */
	--da-partner-ink: #0b5c44;

	/*
	 * Los tres lavados que se usaban con valor de repuesto y no estaban declarados.
	 * Mismos valores que el repuesto → cambio visual cero; lo que se arregla es que
	 * el código deje de mentir. El crema es el fondo de los avisos de consejo
	 * (6 usos en 5 ficheros); con --da-grumete-ink encima da 5,29:1.
	 */
	--da-grumete-wash: #fdf3d0; /* crema de aviso — 6 usos, 0 declaraciones */
	--da-partner-wash: #dff7ef; /* lavado teal — 7 usos en 5 ficheros */
	--da-accent-wash: #f3f6d9; /* lavado lima — 6 usos en 3 ficheros */

	/* ═══════════ ESTADOS DEL SISTEMA — error · aviso · info · éxito ═══════════
	 *
	 * Hasta hoy no existían. `--color-error` se llamaba en 5 sitios y no estaba
	 * definido en ninguno: caía siempre al literal #d92d20. En otras 6 pantallas el
	 * error se pintaba con `--da-member`, el MAGENTA de miembro — un color de ROL
	 * haciendo de ESTADO. Y `--success` (el lima) estaba definido pero sin usar,
	 * porque el lima da 1,84:1 sobre blanco y no se puede leer.
	 *
	 * Mismo patrón que `--da-grumete-ink`: el color VIVO va en el aro, el borde
	 * izquierdo, el punto y el relleno; el TEXTO va siempre en tinta.
	 *
	 * ⚠️ NO uses `--er`, `--su`, `--wa` ni `--in`: son de DaisyUI v4 y las pisa.
	 * ⚠️ Tampoco `--color-error` ni `--color-primary`: son del espacio de DaisyUI v5.
	 */

	/* ERROR — ladrillo. Ni magenta (eso es «miembro») ni el rojo plano de framework:
	 * mismo tono cálido que la madera de los carteles, bajada la luminosidad hasta que
	 * el MISMO valor sirve de borde (listón 3:1) y de texto (4,5:1).
	 * Texto: 5,75 · 5,37 · 5,09 · 4,92 · 4,87. Blanco encima (badge relleno): 5,75. */
	--da-error: #bd3227;
	/* La tinta, para texto pequeño y para escribir SOBRE el tinte rojo:
	 * 7,50 · 7,00 · 6,64 · 6,41 · 6,34 sobre base; 6,40 · 6,01 · 5,73 sobre su tinte. */
	--da-error-ink: #9e2a1c;
	/* La misma tinta para ESCENAS OSCURAS (login de noche, Resumen). Ya estaba escrita
	 * a mano en Login.css:334 y da 9,18:1 sobre el velo rojo del cielo nocturno. */
	--da-error-ink-claro: #ffd7d3;

	/* AVISO — ámbar. Más naranja (31°) y más oscuro (L 40%) que el amarillo de grumete
	 * (48°, L 55%) para que no se lean como el mismo color. El vivo NO llega a 4,5:1 en
	 * ninguna superficie —ningún ámbar lo hace—, así que es SOLO borde/punto:
	 * 3,91 · 3,65 · 3,46 · 3,34 · 3,31. */
	--da-warn: #c4690a;
	/* Texto: 6,33 · 5,91 · 5,60 · 5,41 · 5,36 sobre base; 5,49 · 5,15 · 4,91 sobre tinte. */
	--da-warn-ink: #8a5300;

	/* INFO — azul pizarra. Único tono frío del sistema, a propósito poco saturado:
	 * informa, no compite con el lima ni con el magenta.
	 * Vivo, solo borde/punto: 4,28 · 3,99 · 3,79 · 3,66 · 3,62. */
	--da-info: #2f7fbf;
	/* Texto: 7,21 · 6,73 · 6,39 · 6,17 · 6,11 sobre base; 6,38 · 5,98 · 5,71 sobre tinte. */
	--da-info-ink: #215b87;

	/* ÉXITO — el lima de marca sigue siendo el RELLENO (`--da-accent`, con
	 * `--da-accent-ink` #2e3300 encima: 7,19:1). Lo que faltaba era el lima que SE LEE
	 * sobre fondo claro: 6,45 · 6,02 · 5,71 · 5,51 · 5,46. Ya existía suelto y sin
	 * nombre en Embudo.css:221, EmbudoAuth.css:31 y 58, Invitacion.css:68 y 112 y
	 * Onboarding.css:639. Arregla el peor contraste de la app: el veredicto «encaja»,
	 * que hoy es lima escrito sobre lima (1,47:1).
	 *
	 * ⚠️ Ojo al sufijo: `--da-accent-ink` es la tinta que va ENCIMA del lima;
	 * `--da-accent-text` es el lima convertido en tinta. No son intercambiables. */
	--da-accent-text: #5a6400;

	/* ---- Madera y carteles (signpost RPG) ----
	 *
	 * ⚠️ **Rebajados el 09/09/2026, y es el cambio que pidió Andoni:** *«se ha intentado hacer
	 * ese tablón de madera, pero parece algo del Paint. Hay que darle mucho más fino,
	 * profesional, elegante… pero con tokens, no saturando demasiado»*.
	 *
	 * Lo que fallaba no era la idea, era el **croma**. La madera iba a 53 % de saturación
	 * (`#8a5a2b`), que no es madera: es terracota, y a pantalla completa satura la vista y
	 * aplasta todo lo que se pone encima. Los mismos tonos con la mitad de croma leen como
	 * nogal envejecido, que es lo que se buscaba — el brandbook ya lo avisaba: *«no
	 * sobrecargar con estética RPG; usarla como guiño, no como sistema entero»*.
	 *
	 * Se ha mantenido la LUMINOSIDAD de cada uno para no romper las once pantallas que los
	 * usan (el Hogar, la carta de amor, el resumen, el índice, compartir…): en todas son
	 * fondo con tinta cálida oscura encima, así que bajar croma y subir claridad solo puede
	 * mejorar el contraste, nunca empeorarlo. */
	--da-wood-1: #76614c; /* nogal claro — antes #8a5a2b, que era terracota */
	--da-wood-2: #5c4a39; /* nogal — antes #6c431f */
	--da-sign-1: #ecdcbe; /* cara del cartel: pergamino, no oro */
	--da-sign-2: #ddc9a4;
	--da-pin-1: #a68a6a; /* chincheta de latón viejo, no de plástico naranja */
	--da-pin-2: #7a6247;

	/* ---- Canal WhatsApp (omnipresente en el producto) ---- */
	--da-wa: #25d366; /* verde WhatsApp — botones "abrir chat" */
	--da-wa-deep: #075e54; /* cabecera de chat */
	--da-wa-bubble: #dcf8c6; /* burbuja de mensaje saliente */

	/* ---- Tablón de anuncios (sello postal — paneles perforados) ---- */
	--da-board-bg: #dee2b7; /* verde salvia — fondo de fila de tablón (legacy) */
	--da-board-ink: #5b630c; /* olivo oscuro — texto del tablón */
	--da-board-title: #2c2825; /* tinta casi negra — título grande del tablón */
	--da-stamp-green: #a8bd1c; /* panel OFICIALES — cuerpo del sello verde lima */
	--da-stamp-olive: #6e7615; /* panel MIEMBROS — cuerpo del sello oliva oscuro */
	--da-board-card: #dce3b6; /* fila/tarjeta sage SOBRE panel verde */
	--da-board-card-muted: #c7ce9e; /* fila/tarjeta sage SOBRE panel oliva */
	--da-stamp-oficial: #fbb825; /* amarillo — cinta/badge "OFICIALES" */
	--da-stamp-check: #fbb825; /* badge circular ✓ (oficiales) */
	--da-stamp-key: #dc00d3; /* badge circular 🔑 (miembros) = magenta de marca */

	/* ---- Líneas y velos ---- */
	--da-border: rgba(0, 0, 0, 0.09); /* borde estándar de tarjetas */
	--da-border-soft: rgba(0, 0, 0, 0.06);
	--da-veil: rgba(10, 10, 10, 0.4); /* overlay de modales */

	/* ---- Alias semánticos — usa estos en componentes y pantallas ---- */
	--bg: var(--da-surface);
	--bg-warm: var(--da-surface-warm);
	--surface-card: var(--da-paper);
	--surface-sunken: var(--da-paper-2);

	--text-primary: var(--da-ink);
	/*
	 * ⚠️ **Secundario NO quiere decir ilegible.** Esto apuntaba a `--da-gray` (#9d9d9d), que
	 * da **2,4:1** sobre el fondo de la app — muy por debajo del 4,5:1 que hace falta para
	 * leer texto. Y como `--text-secondary` viste casi toda la letra pequeña del producto,
	 * ahí iban escritas cosas que hay que poder leer: *«avisa si no vas»*, *«normas de
	 * comunidad»*, *«1 plaza pedida, todavía sin respuesta»*, la letra de las cifras del
	 * histórico. Un texto que no se lee no es diseño discreto: es decoración.
	 *
	 * Se cambió el 29/08/2026 al gris legible (5,1:1 sobre la superficie de la app). Sube un
	 * punto el peso visual de la letra pequeña, y a cambio se lee. Es el punto A-3 del
	 * modelo llevado hasta el final: *«el texto va siempre en tinta»*.
	 *
	 * **`--da-gray` no se toca** y sigue siendo el de antes: es el gris de lo que de verdad
	 * es ambiente —placeholders, bordes, estados apagados, el pendiente de la senda— donde
	 * no hay nada que leer.
	 */
	--text-secondary: var(--da-gray-ink);
	--text-on-accent: var(--da-accent-ink);
	--text-on-dark: #ffffff;
	--text-warm: var(--da-ink-warm);
	--text-member: var(--da-member-ink); /* escribir «miembro» — nunca --da-member */
	--text-partner: var(--da-partner-ink); /* escribir «colaborador» — nunca --da-partner */

	--accent: var(--da-accent);
	--accent-ink: var(--da-accent-ink);
	/* ---- Estados: el vivo para el aro y el borde, la tinta para el texto ---- */
	--error: var(--da-error);
	--error-ink: var(--da-error-ink);
	--error-ink-claro: var(--da-error-ink-claro);
	--error-tint: rgba(189, 50, 39, 0.1);
	--error-tint-solid: rgba(189, 50, 39, 0.2);

	--warn: var(--da-warn);
	--warn-ink: var(--da-warn-ink);
	--warn-tint: rgba(196, 105, 10, 0.12);
	--warn-tint-solid: rgba(196, 105, 10, 0.22);

	--info: var(--da-info);
	--info-ink: var(--da-info-ink);
	--info-tint: rgba(47, 127, 191, 0.1);
	--info-tint-solid: rgba(47, 127, 191, 0.2);

	--success: var(--da-accent); /* relleno — el éxito se pinta con el verde de marca */
	--success-ink: var(--da-accent-text); /* texto y borde — el lima NO se lee (1,84:1) */
	--success-tint: var(--accent-tint);
	/* ⚠️ NO uses `--wa` en componentes: DaisyUI lo pisa con su color "warning" (oklch).
	 * Para el verde de WhatsApp usa el token crudo `--da-wa`. */
	--wa: var(--da-wa);

	--border: var(--da-border);
	--border-soft: var(--da-border-soft);
	/* ⚠️ **Es un COLOR, no un atajo.** `outline: var(--focus-ring)` deja el `outline-style` en
	 * `none` y entonces NO SE VE NINGÚN FOCO: quien navega con teclado se queda sin saber
	 * dónde está. Se escribe siempre con su grosor y su estilo delante —
	 * `outline: 3px solid var(--focus-ring)`— como hacen `Tablon.css` y `FichaAlta.css`. */
	--focus-ring: rgba(185, 201, 28, 0.2); /* halo de focus en inputs */

	/* tintes de rol al 10–12% para fondos suaves de badge */
	--member-tint: rgba(220, 0, 211, 0.1);
	--member-tint-solid: rgba(220, 0, 211, 0.2);
	--grumete-tint: rgba(254, 208, 26, 0.16);
	--grumete-tint-solid: rgba(254, 208, 26, 0.24);
	--partner-tint: rgba(35, 207, 157, 0.12);
	--partner-tint-solid: rgba(35, 207, 157, 0.2);
	--accent-tint: rgba(185, 201, 28, 0.12);
	--accent-tint-solid: rgba(185, 201, 28, 0.2);

	/* ═══════════════════ TIPOGRAFÍA ═══════════════════ */

	/* ---- Familias ---- */
	--font-display:
		'Bike Park', 'Roboto', system-ui, sans-serif; /* titulares (Bike Park aún no desplegada → cae a Roboto 900) */
	--font-body: 'Roboto', system-ui, -apple-system, sans-serif; /* cuerpo / UI */
	--font-editorial: 'Lora', Georgia, 'Times New Roman', serif; /* modo editorial */
	--font-hand: 'Gochi Hand', 'Comic Sans MS', cursive; /* acento manuscrito */
	--font-pixel: 'Minecraft', 'Press Start 2P', ui-monospace, monospace; /* acento retro/RPG */
	--font-mono: ui-monospace, Menlo, Consolas, monospace; /* rutas, código, tickers */
	--font-adventure: 'Rubik', var(--font-body); /* títulos de tarjeta de aventura (ExperienceCard) */
	--font-poster: 'Poppins', var(--font-body); /* carteles / tablón de anuncios vintage */

	/* ---- Pesos ---- */
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-bold: 700;
	--fw-black: 900;

	/* ---- Escala de tamaño (mobile-first, base 15px) ---- */
	--text-xs: 11px; /* micro-labels, hints, metadatos */
	--text-sm: 13px; /* secundario, subtítulos de tarjeta */
	--text-base: 15px; /* cuerpo por defecto */
	--text-md: 17px; /* destacado de párrafo, h3 de tarjeta */
	--text-lg: 20px; /* títulos de sección pequeños */
	--text-xl: 24px; /* h2 compacto */
	--text-2xl: 32px; /* títulos de pantalla */
	--text-3xl: 44px; /* héroes secundarios */
	--text-4xl: 62px; /* héroe grande */

	--text-counter: clamp(80px, 15vw, 144px); /* contadores gigantes de páginas de datos */
	--text-hero: clamp(28px, 6vw, 62px);

	/* ---- Interlineado ---- */
	--leading-tight: 0.95; /* titulares grandes */
	--leading-snug: 1.1; /* títulos de tarjeta */
	--leading-normal: 1.6; /* cuerpo */
	--leading-relaxed: 1.7; /* editorial / textos largos */

	/* ---- Tracking ---- */
	--tracking-mega: -0.06em; /* contadores y héroes */
	--tracking-tight: -0.04em; /* titulares */
	--tracking-snug: -0.02em; /* subtítulos */
	--tracking-normal: 0;
	--tracking-label: 0.12em; /* labels en MAYÚSCULA */
	--tracking-pixel: 0.05em; /* texto pixel/RPG */

	/* ═══════════════════ ESPACIADO · RADIOS · SOMBRAS · MOVIMIENTO ═══════════════════ */

	/* ---- Espaciado (base 4px) ---- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-22: 88px; /* padding vertical de secciones de landing */

	--measure: 480px; /* ancho de columna de lectura */
	--container: 1100px;
	--container-lg: 1280px;

	/*
	 * ---- Radios ----
	 *
	 * Andoni, 07/09/2026: *«en general botones cta más cuadrados como "mis productos" en el
	 * de colaboradores etc. En la mayoría de la app una estética más cuadrada que
	 * redondeada»*.
	 *
	 * El ancla es su propia referencia: `.co-rapido__card` (ColaboradorPortal.css:780), la
	 * tarjeta de «Mis productos», que ya estaba a **3 px**. Y no era un caso aislado: el 3 px
	 * ya se usaba a mano en 25 declaraciones de 15 ficheros. El lenguaje cuadrado estaba
	 * empezado y sin sistematizar; esto lo sistematiza.
	 *
	 * La escala vieja era 6/8/12/16/18/22/26. Se mantiene la progresión —cuanto más grande la
	 * pieza, algo más de radio— pero comprimida: una tarjeta grande a 3 px sigue leyéndose
	 * como tarjeta, y a 16 px se leía como pastilla.
	 *
	 * ⚠️ `--radius-pill` NO se toca, y es el freno de mano de todo esto. De él cuelgan los
	 * avatares, las pastillas de rol, los interruptores, las barras de progreso y los puntos
	 * de paginación: 257 declaraciones en 92 ficheros que TIENEN que seguir redondas. Una cara
	 * cuadrada deja de leerse como persona y una barra de progreso cuadrada deja de leerse
	 * como progreso.
	 */
	--radius-xs: 2px; /* chips de tag, code inline */
	--radius-sm: 3px; /* inputs */
	--radius: 3px; /* botones, campos grandes — el ancla: .co-rapido__card */
	--radius-md: 3px; /* tarjetas (estándar app) */
	--radius-lg: 4px; /* paneles del portal */
	--radius-xl: 6px; /* modales, drawers */
	--radius-2xl: 8px; /* tarjetas-héroe "revelar" */
	--radius-pill: 999px; /* badges, navegación, barras, avatares — NO se cuadra */

	/* ---- Bordes ---- */
	--border-width: 1px;
	--border-width-strong: 1.5px; /* inputs y burbujas RPG finas */
	--border-rpg: 3px; /* contorno grueso de carteles / bocadillos pixel */

	/* ---- Sombras ---- */
	--shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.04);
	--shadow-sm: 0 3px 14px rgba(0, 0, 0, 0.06);
	--shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);
	--shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.08);
	--shadow-float: 0 8px 24px rgba(0, 0, 0, 0.1); /* pastillas flotantes / topbar */
	--shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.25);
	--shadow-pop: 0 18px 44px rgba(0, 0, 0, 0.1);
	--shadow-inset: inset 0 2px 8px rgba(0, 0, 0, 0.04);

	/* Botones "chunky" — sombra inferior sólida (no blur). Se hunde al pulsar. */
	--press-accent: 0 4px 0 var(--da-accent-shadow);
	--press-member: 0 5px 0 rgba(180, 0, 170, 0.3);
	--press-wood: 0 5px 0 var(--da-ink-warm);
	--press-wa: 0 5px 0 rgba(20, 140, 60, 0.3);

	/* ---- La cámara del recorrido ----
	 * Lo que de la cámara de `shared/ui/recorrido` pinta el CSS. Y solo eso: el
	 * paralaje, el desenfoque y la persecución los calcula JS fotograma a fotograma y
	 * sus cifras viven, con nombre, en `shared/ui/recorrido/camara.ts`. Copiarlas aquí
	 * también sería tener el mismo número en dos sitios, que es como se desincronizan. */
	--cam-trama: 46px; /* el punteado del fondo — es lo que hace visible el paralaje */

	/* ---- Movimiento ---- */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
	--dur-fast: 0.15s;
	--dur: 0.3s;
	--dur-slow: 0.65s;
}

/* EL ALTA · /exp/demo/comenzar/ — la carta guiada (v5, 01/10/2026). Tokens de la app (--da-*) delante, en la build.
   Dos estéticas que se cambian arriba (Andoni: «con esa estética distinta o que la pudieran cambiar»):
   · CARTA (por defecto): la del sample embudo (wa.diarioaventureros.com/sample/embudo): papel, tinta marrón, Lora y
     su firma; los botones cuadrados, en mayúsculas.
   · APP: la de la app y espíritu joven: gris claro, Roboto, lima y botones de un dedo.
   Pantalla a pantalla, centrado, una acción principal por pantalla; letra de 17–18 px y campos de 16 px o más (si no,
   el iPhone hace zoom). Nada parpadea: cada pantalla entra una vez y ya. */
:root {
	--bg: #f9f8f5;
	--paper: #fff;
	--ink: #2f2418;
	--ink-soft: #6b5f52;
	--line: rgba(47, 36, 24, 0.12);
	--accent: #b9c91c;
	--accent-ink: #2e3300;
	--accent-text: #5a6400;
	--accent-wash: #f3f6d9;
	--member: #dc00d3;
	--member-ink: #9a0093;
	--cta-bg: #2f2418;
	--cta-ink: #fff;
	--cta-r: 3px;
	--cta-case: uppercase;
	--cta-spacing: 0.06em;
	--cta-font: 600 15px/1.2 var(--font-body);
	--serif: 'Lora', Georgia, serif;
	--titulo: 600 clamp(28px, 7.4vw, 38px) / 1.2 var(--serif);
	--kicker: italic 400 16px/1.4 var(--serif);
	--font-body: 'Roboto', system-ui, -apple-system, sans-serif;
	--pixel: 'Press Start 2P', monospace;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
:root[data-estetica='app'] {
	--bg: #f1f1f1;
	--ink: #252525;
	--ink-soft: #5f5f5f;
	--line: rgba(0, 0, 0, 0.1);
	--cta-bg: var(--accent);
	--cta-ink: var(--accent-ink);
	--cta-r: 14px;
	--cta-case: none;
	--cta-spacing: 0;
	--cta-font: 700 18px/1.2 var(--font-body);
	--titulo: 900 clamp(28px, 7.4vw, 40px) / 1.15 var(--font-body);
	--kicker: 700 12px/1.5 var(--font-body);
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	overflow-x: clip;
}
body {
	margin: 0;
	min-height: 100svh;
	background: var(--bg);
	color: var(--ink);
	font: 400 17px/1.55 var(--font-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	transition: background-color 0.3s;
}
[hidden] {
	display: none !important;
}
.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
a {
	color: inherit;
}

/* ── arriba: la marca, la estética y el tren de paradas ── */
.barra {
	position: sticky;
	top: 0;
	z-index: 5;
	padding: max(10px, env(safe-area-inset-top)) 16px 10px;
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}
.barra__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 520px;
	margin: 0 auto;
}
.marca {
	font: 700 15px/1 var(--font-body);
	text-decoration: none;
	letter-spacing: -0.01em;
}
.estetica {
	min-height: 36px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink-soft);
	font: 500 13px/1 var(--font-body);
	cursor: pointer;
}
.tren {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	max-width: 520px;
	margin: 10px auto 0;
	padding: 0;
	list-style: none;
	counter-reset: parada;
}
.tren li {
	position: relative;
	padding-top: 16px;
	text-align: center;
	font: 500 11px/1.2 var(--font-body);
	color: var(--ink-soft);
	opacity: 0.75;
}
.tren li::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 50%;
	width: 9px;
	height: 9px;
	margin-left: -4.5px;
	border-radius: 50%;
	background: var(--paper);
	border: 2px solid var(--line);
	z-index: 1;
}
.tren li::after {
	content: '';
	position: absolute;
	top: 7px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 8px);
}
.tren li:first-child::after {
	display: none;
}
.tren li.hecho {
	opacity: 1;
}
.tren li.hecho::before {
	background: var(--accent);
	border-color: var(--accent);
}
.tren li.hecho::after,
.tren li.aqui::after {
	background: var(--accent);
}
.tren li.aqui {
	opacity: 1;
	color: var(--ink);
	font-weight: 700;
}
.tren li.aqui::before {
	width: 13px;
	height: 13px;
	top: 1px;
	margin-left: -6.5px;
	background: var(--accent);
	border-color: var(--ink);
}
.seguimos {
	max-width: 520px;
	margin: 10px auto 0;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--accent-wash);
	font-size: 15px;
	text-align: center;
}
.seguimos button,
.pie button {
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
	padding: 4px;
}

/* ── el escenario: una pantalla cada vez, centrada ── */
.escenario {
	max-width: 520px;
	margin: 0 auto;
	padding: 8px 20px 40px;
}
.pantalla {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100svh - 190px);
	padding: 36px 0 16px;
	text-align: center;
}
.pantalla.entra {
	animation: entra 0.35s var(--ease) both;
}
@keyframes entra {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.atras {
	position: absolute;
	top: 4px;
	left: -6px;
	min-height: 40px;
	padding: 0 8px;
	border: 0;
	background: none;
	color: var(--ink-soft);
	font: 500 15px/1 var(--font-body);
	cursor: pointer;
}
.kicker {
	margin: 0 0 10px;
	font: var(--kicker);
	color: var(--ink-soft);
}
:root[data-estetica='app'] .kicker {
	color: var(--accent-text);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.t {
	margin: 0 0 14px;
	font: var(--titulo);
	letter-spacing: -0.01em;
	text-wrap: balance;
	outline: none;
}
.t em,
.carta__t em {
	font-style: italic;
	font-weight: 600;
}
:root[data-estetica='app'] .t em,
:root[data-estetica='app'] .carta__t em {
	font-style: normal;
	background: linear-gradient(transparent 60%, rgba(185, 201, 28, 0.55) 60%);
}
.sub {
	margin: 0 auto 12px;
	max-width: 30em;
	color: var(--ink);
	text-wrap: pretty;
}
.sub b,
.pasos__t b {
	font-weight: 700;
}
.pieza {
	margin-top: 18px;
}

/* ── los botones: uno principal por pantalla ── */
.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 12px 22px;
	border: 2px solid transparent;
	border-radius: var(--cta-r);
	font: var(--cta-font);
	text-transform: var(--cta-case);
	letter-spacing: var(--cta-spacing);
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: transform 0.15s var(--ease), box-shadow 0.15s;
}
.boton:active {
	transform: translateY(1px);
}
.boton:focus-visible,
.fila:focus-visible,
.principal:focus-visible,
.estetica:focus-visible {
	outline: 3px solid var(--member);
	outline-offset: 3px;
}
.boton--grande {
	width: 100%;
	min-height: 56px;
	margin-top: 10px;
}
.boton--acento {
	background: var(--cta-bg);
	color: var(--cta-ink);
}
:root[data-estetica='app'] .boton--acento {
	box-shadow: 0 4px 0 rgba(140, 155, 0, 0.45);
}
.boton--acento:disabled {
	opacity: 0.45;
	cursor: default;
	box-shadow: none;
}
.boton--negro {
	background: #252525;
	color: #fff;
}
.boton--claro {
	width: 100%;
	margin-top: 10px;
	background: var(--paper);
	color: var(--ink);
	border-color: var(--line);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
	font-size: 16px;
}
.boton--texto {
	min-height: 44px;
	margin-top: 6px;
	background: none;
	color: var(--ink-soft);
	text-transform: none;
	letter-spacing: 0;
	font: 500 16px/1.3 var(--font-body);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.pieza--dos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.pieza--dos .boton--grande {
	margin-top: 0;
}
.pieza--enlaces {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ── la carta (la «¿tú quién eres?» del sample embudo) ── */
.carta {
	text-align: left;
}
.carta__cara {
	display: flex;
	justify-content: center;
	margin-bottom: 22px;
}
.carta__cara img,
.carta__inicial {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--accent);
	object-fit: cover;
	background: var(--paper);
}
.carta__inicial {
	display: grid;
	place-items: center;
	background: var(--accent-wash);
	font: 700 30px/1 var(--serif);
	color: var(--accent-text);
}
.carta__kicker {
	margin: 0 0 6px;
	font: italic 400 16px/1.4 var(--serif);
	color: var(--ink-soft);
}
:root[data-estetica='app'] .carta__kicker {
	font: 700 15px/1.4 var(--font-body);
	color: var(--member-ink);
}
.carta__t {
	outline: none;
	margin: 0 0 18px;
	font: var(--titulo);
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.carta__p {
	margin: 0 0 14px;
	font-weight: 300;
	font-size: 17px;
	line-height: 1.7;
}
:root[data-estetica='app'] .carta__p {
	font-weight: 400;
}
.carta__cita {
	margin: 20px 0;
	padding: 4px 0 4px 16px;
	border-left: 3px solid var(--accent);
	font: italic 400 18px/1.55 var(--serif);
}
.carta__botones {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin-top: 22px;
}
.carta__botones .boton--texto {
	align-self: center;
}
.carta__firma {
	margin: 28px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font: italic 400 16px/1.5 var(--serif);
	color: var(--ink-soft);
}
.carta__firma span {
	font: italic 600 19px/1.4 var(--serif);
	color: var(--ink);
}

/* ── qué es: polaroids, los pasos ── */
.polaroids {
	position: relative;
	height: 190px;
	margin: 6px auto 4px;
	max-width: 360px;
}
.polaroid {
	position: absolute;
	top: 6px;
	width: 42%;
	margin: 0;
	padding: 7px 7px 24px;
	background: #fff;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}
.polaroid img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}
.polaroid figcaption {
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 4px;
	font: 400 13px/1.2 'Gochi Hand', cursive;
	color: #5f5f5f;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.polaroid--1 {
	left: 0;
	transform: rotate(-7deg);
}
.polaroid--2 {
	left: 29%;
	top: 0;
	transform: rotate(2deg);
	z-index: 1;
}
.polaroid--3 {
	right: 0;
	transform: rotate(8deg);
}
.cifras {
	margin: 18px 0 0;
	font-size: 16px;
}
.cifras small {
	display: block;
	color: var(--ink-soft);
	font-size: 13px;
}
.pasos {
	margin: 10px auto 0;
	padding: 0;
	max-width: 30em;
	list-style: none;
	text-align: left;
}
.pasos li {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 12px;
	align-items: start;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}
.pasos li:last-child {
	border-bottom: 0;
}
.pasos__e {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--accent-wash);
	font-size: 21px;
}
.pasos__t {
	padding-top: 9px;
	font-size: 16px;
	line-height: 1.5;
}

/* ── los grupos de avisos ── */
.grupos {
	position: relative;
	display: grid;
	gap: 12px;
	text-align: left;
}
.grupo {
	padding: 14px;
	border: 2px solid var(--line);
	border-radius: 14px;
	background: var(--paper);
	transition: border-color 0.2s, background-color 0.2s;
}
.grupo--extra {
	border-style: dashed;
	border-color: rgba(220, 0, 211, 0.35);
}
.grupo__opcional {
	margin: 0 0 8px;
	font: italic 400 14px/1.3 var(--serif);
	color: var(--member-ink);
}
.grupo__cab {
	display: grid;
	grid-template-columns: 40px 1fr 30px;
	gap: 10px;
	align-items: center;
	margin-bottom: 10px;
}
.grupo__emoji {
	font-size: 28px;
	text-align: center;
}
.grupo__txt b {
	display: block;
	font-size: 17px;
}
.grupo__txt span {
	font-size: 14px;
	color: var(--ink-soft);
}
.grupo__ok {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--line);
	color: transparent;
	font-weight: 900;
}
.grupo .boton {
	width: 100%;
}
.grupo__pie {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
}
.grupo__mini {
	min-height: 40px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--ink-soft);
	font: 400 14px/1 var(--font-body);
	text-decoration: underline;
	cursor: pointer;
}
.grupo--hecho {
	border-color: var(--accent);
	background: var(--accent-wash);
}
.grupo--hecho .grupo__ok {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}
.confeti {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.confeti i {
	position: absolute;
	top: 45%;
	left: var(--x);
	width: 8px;
	height: 12px;
	border-radius: 2px;
	background: var(--c);
	opacity: 0;
	animation: salta 1.4s var(--d) cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes salta {
	0% {
		opacity: 1;
		transform: translateY(0) rotate(var(--r));
	}
	100% {
		opacity: 0;
		transform: translateY(-140px) rotate(calc(var(--r) + 360deg));
	}
}

/* ── los campos: nombre, @usuario ── */
.campo input {
	display: block;
	width: 100%;
	min-height: 56px;
	padding: 0 16px;
	border: 2px solid var(--line);
	border-radius: 12px;
	background: var(--paper);
	color: var(--ink);
	font: 400 18px/1 var(--font-body);
	text-align: center;
}
.campo input:focus {
	outline: none;
	border-color: var(--accent);
}

/* ── tu cuenta y «¿ya está?» ── */
.nota {
	margin: 12px auto 0;
	max-width: 30em;
	font-size: 15px;
	color: var(--ink-soft);
}
.nota b {
	color: var(--ink);
}
.pieza--correo {
	text-align: left;
}
.recien {
	margin-top: 18px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--accent-wash);
	font-size: 15px;
}
.recien summary {
	min-height: 32px;
	font-weight: 700;
	cursor: pointer;
}
.recien p {
	margin: 8px 0 12px;
}
.campo--usuario label {
	display: block;
	margin-bottom: 8px;
}
.campo--usuario .boton {
	width: 100%;
	margin-top: 10px;
}

/* ── ¿qué quieres hacer ahora? ── */
.principal {
	position: relative;
	display: block;
	padding: 18px 46px 18px 18px;
	border: 2px solid var(--ink);
	border-radius: 16px;
	background: var(--accent-wash);
	text-align: left;
	text-decoration: none;
	box-shadow: 4px 4px 0 var(--ink);
}
.principal__k {
	display: block;
	margin-bottom: 4px;
	font: italic 400 14px/1.3 var(--serif);
	color: var(--accent-text);
}
.principal b {
	display: block;
	font-size: 19px;
	line-height: 1.3;
}
.principal__p {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	color: var(--ink-soft);
}
.principal__flecha {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
}
.filas {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
.fila {
	display: grid;
	grid-template-columns: 34px 1fr 20px;
	gap: 8px;
	align-items: center;
	width: 100%;
	min-height: 54px;
	padding: 8px 4px;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: none;
	color: var(--ink);
	font: 500 16px/1.3 var(--font-body);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.fila__e {
	font-size: 20px;
	text-align: center;
}
.fila__f {
	color: var(--ink-soft);
}
.fila--pendiente .fila__t small {
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--member);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}
.nota--demo {
	margin-top: 22px;
	padding: 12px 14px;
	border: 1px dashed var(--line);
	border-radius: 12px;
	text-align: left;
}

/* ── abajo ── */
.pie {
	padding: 14px 20px max(24px, env(safe-area-inset-bottom));
	text-align: center;
	font-size: 14px;
	color: var(--ink-soft);
}
.sin-js {
	padding: 40px 0;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.pantalla.entra,
	.confeti i {
		animation: none;
	}
	body {
		transition: none;
	}
}
@media (max-width: 360px) {
	.tren li {
		font-size: 10px;
	}
	.escenario {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ═══ v5.1 (01/10, segunda vuelta): la foto épica, «necesito ver más ↓», el vídeo y las misiones ═══ */
.tren li small {
	display: block;
	font-size: 10px;
	font-weight: 400;
	opacity: 0.85;
}
.portada {
	margin: 4px -4px 0;
}
.portada img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 10px 26px rgba(47, 36, 24, 0.18);
}
.portada figcaption {
	margin-top: 8px;
	font: italic 400 14px/1.3 var(--serif);
	color: var(--ink-soft);
}
/* el «sigue leyendo» de ser miembro: un botón tranquilo que abre hacia abajo */
.mas__abrir {
	align-self: center;
	min-height: 44px;
	margin-top: 14px;
	padding: 0 14px;
	border: 0;
	border-bottom: 2px dashed var(--accent);
	background: none;
	color: var(--ink);
	font: italic 500 17px/1 var(--serif);
	cursor: pointer;
}
.mas {
	margin-top: 18px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	text-align: left;
	animation: entra 0.35s var(--ease) both;
}
.mas__dentro > * + * {
	margin-top: 14px;
}
.mas__t {
	margin: 18px 0 6px;
	font: 600 21px/1.3 var(--serif);
	text-align: center;
}
:root[data-estetica='app'] .mas__t {
	font: 800 20px/1.3 var(--font-body);
}
.mas__cita {
	margin: 0;
	font: italic 400 16px/1.5 var(--serif);
	color: var(--ink-soft);
	text-align: center;
}
.mas .polaroids {
	margin-top: 10px;
}
.video {
	position: relative;
	margin-top: 12px;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: #111;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}
.video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.video__cifras {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.video__cifras li {
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--paper);
	border: 1px solid var(--line);
	font-size: 14px;
	color: var(--ink-soft);
}
.video__cifras b {
	display: block;
	font: 700 22px/1.2 var(--font-body);
	color: var(--ink);
}
.video__fuente {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--ink-soft);
	text-align: center;
}
.mas .pieza--dos {
	margin-top: 12px;
}
.mas .pieza--dos .boton--claro {
	margin-top: 0;
	font-size: 15px;
}
/* «✓ Misión 1 completada»: aparece, se queda un momento y se va (una vez, sin parpadeos) */
.mision-hecha {
	position: fixed;
	left: 50%;
	bottom: max(18px, env(safe-area-inset-bottom));
	z-index: 20;
	margin: 0;
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font: 600 15px/1.2 var(--font-body);
	white-space: nowrap;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	opacity: 0;
	transform: translate(-50%, 12px);
	pointer-events: none;
}
.mision-hecha--va {
	animation: mision 2.8s var(--ease) both;
}
@keyframes mision {
	0% {
		opacity: 0;
		transform: translate(-50%, 12px);
	}
	12%,
	82% {
		opacity: 1;
		transform: translate(-50%, 0);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, 6px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.mas {
		animation: none;
	}
	/* sin moverse: solo aparece y se va */
	.mision-hecha {
		transform: translate(-50%, 0);
	}
	.mision-hecha--va {
		animation-name: mision-quieta;
	}
}
@keyframes mision-quieta {
	0%,
	100% {
		opacity: 0;
	}
	10%,
	85% {
		opacity: 1;
	}
}

/* ═══ v5.2 (01/10, tercera vuelta): texturas, colores suaves, misiones, grupos sin salir, «sigue bajando», Navi ═══
   Andoni: «juega con las texturas de las tipografías… rayado… más personalidad» · «tipo carta no excluye matices,
   colorcitos suaves» · «las letras de degradado a brillante poco a poco» · «estilo Navi… dejando un destello». */
:root {
	--rosa-wash: #fbeaf3;
	--amarillo-wash: #fdf3d0;
	--cielo-wash: #e6f2fb;
	--grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.14 0 0 0 0 0.09 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* el papel: un grano quieto de fondo (no se mueve: nada que parpadee) y una luz suave de color en las esquinas */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(60% 40% at 100% 0%, var(--amarillo-wash), transparent 70%),
		radial-gradient(50% 35% at 0% 100%, var(--rosa-wash), transparent 70%);
	opacity: 0.8;
}
/* el grano del papel, aparte y muy flojo (antes ensuciaba el fondo) */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: var(--grano);
	opacity: 0.1;
}
:root[data-estetica='app'] body::before {
	opacity: 0.35;
}
:root[data-estetica='app'] body::after {
	opacity: 0;
}

/* las texturas de la letra (guion.mjs): ==rotulador== · ~~rayado~~ · ^^a mano^^ · !!sello!! */
mark {
	padding: 0 0.12em;
	margin: 0 -0.06em;
	color: inherit;
	background: linear-gradient(100deg, rgba(185, 201, 28, 0.15) 0%, rgba(185, 201, 28, 0.55) 4%, rgba(185, 201, 28, 0.42) 90%, rgba(185, 201, 28, 0.1) 100%);
	background-size: 100% 0.62em;
	background-position: 0 88%;
	background-repeat: no-repeat;
	border-radius: 0.2em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.rayado {
	padding-bottom: 0.14em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 20 2, 40 9, 60 5 S 100 2, 118 6' fill='none' stroke='%23dc00d3' stroke-width='2.4' stroke-linecap='round' opacity='.75'/%3E%3Cpath d='M6 8.5 C 30 6, 70 9.5, 114 7.5' fill='none' stroke='%23dc00d3' stroke-width='1.4' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
	background-size: 100% 0.42em;
	background-position: 0 100%;
	background-repeat: no-repeat;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.mano {
	display: inline-block;
	font: 400 1.12em/1 'Gochi Hand', 'Comic Sans MS', cursive;
	color: var(--member-ink);
	transform: rotate(-3deg);
	letter-spacing: 0.01em;
}
.t .mano,
.carta__t .mano {
	font-size: 1.05em;
}
/* la tinta de sello: la frase que importa, con grano dentro de la letra (quieto) */
.sello {
	color: transparent;
	background: var(--grano), linear-gradient(var(--ink), var(--ink));
	background-size: 140px, auto;
	-webkit-background-clip: text;
	background-clip: text;
	font-style: italic;
	text-decoration: underline;
	text-decoration-color: rgba(185, 201, 28, 0.6);
	text-decoration-thickness: 0.12em;
	text-underline-offset: 0.18em;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.sello {
		color: var(--ink);
	}
}

/* la carta: sin cara, con la gente en la esquina */
.pantalla--hola {
	overflow: visible;
}
.carta {
	position: relative;
	padding-bottom: 96px;
}
.carta__recorte {
	position: absolute;
	right: -22px;
	bottom: -6px;
	width: min(46vw, 210px);
	height: auto;
	pointer-events: none;
	filter: drop-shadow(0 8px 12px rgba(47, 36, 24, 0.18));
	transform: rotate(-3deg);
	z-index: 0;
}
.carta__firma,
.carta__botones {
	position: relative;
	z-index: 1;
}
.carta__firma {
	max-width: 52%;
}
.carta__otra {
	display: inline-block;
	position: relative;
	z-index: 1;
	margin-top: 10px;
	font-size: 14px;
	color: var(--ink-soft);
}
.carta__cita {
	background: linear-gradient(90deg, var(--accent-wash), transparent);
	border-radius: 0 12px 12px 0;
	padding: 10px 14px;
}
/* la cita en cualquier pantalla (la frase madre) */
.pantalla .carta__cita {
	text-align: left;
}

/* el camino por misiones, con su cartel */
.misiones {
	display: grid;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
.mision {
	position: relative;
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: 12px;
	align-items: center;
	padding: 8px;
	border-radius: 14px;
	background: var(--paper);
	border: 1px solid var(--line);
	opacity: 0.72;
}
.mision img {
	width: 112px;
	height: 76px;
	object-fit: cover;
	border-radius: 10px;
}
.mision__k {
	display: block;
	font: 600 13px/1.3 var(--font-body);
	color: var(--ink-soft);
}
.mision__k em {
	font: italic 400 14px/1 'Gochi Hand', cursive;
	color: var(--member-ink);
}
.mision b {
	display: block;
	font-size: 16px;
	line-height: 1.3;
}
.mision__p {
	display: block;
	font-size: 14px;
	color: var(--ink-soft);
}
.mision--hoy {
	opacity: 1;
	background: var(--amarillo-wash);
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
}
.mision--2 {
	background: var(--cielo-wash);
}

/* los grupos para deslizar, sin salir */
.carrusel {
	display: flex;
	gap: 12px;
	margin: 14px -20px 0;
	padding: 4px 20px 10px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	text-align: left;
}
.carrusel::-webkit-scrollbar {
	display: none;
}
.carrusel__g {
	flex: 0 0 72%;
	scroll-snap-align: center;
	padding: 14px;
	border-radius: 16px;
	background: var(--paper);
	border: 1px solid var(--line);
	box-shadow: 0 6px 14px rgba(47, 36, 24, 0.08);
}
.carrusel__g:nth-child(3n + 1) {
	background: linear-gradient(160deg, var(--amarillo-wash), var(--paper) 60%);
}
.carrusel__g:nth-child(3n + 2) {
	background: linear-gradient(160deg, var(--rosa-wash), var(--paper) 60%);
}
.carrusel__g:nth-child(3n) {
	background: linear-gradient(160deg, var(--cielo-wash), var(--paper) 60%);
}
.carrusel__em {
	display: block;
	font-size: 30px;
}
.carrusel__g b {
	display: block;
	margin-top: 6px;
	font-size: 17px;
	line-height: 1.25;
}
.carrusel__l {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--accent-text);
	font-weight: 600;
}
.carrusel__v {
	display: -webkit-box;
	margin-top: 6px;
	font-size: 14px;
	color: var(--ink-soft);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.carrusel__g--fin {
	display: grid;
	place-items: center;
	flex-basis: 56%;
	background: none !important;
	border-style: dashed;
	box-shadow: none;
}
.carrusel__pista {
	margin: 0;
	text-align: right;
	font: 400 15px/1 'Gochi Hand', cursive;
	color: var(--ink-soft);
}

/* «¿necesitas ver más? sigue bajando ↓» y las letras que se encienden al bajar */
.mas__pista {
	margin: 34px 0 0;
	font: italic 400 16px/1.4 var(--serif);
	color: var(--ink-soft);
}
.mas__pista span {
	display: block;
	font: 400 18px/1.3 'Gochi Hand', cursive;
	color: var(--member-ink);
}
.mas {
	animation: none;
}
.encender .pal {
	opacity: 0.16;
	transition: opacity 0.6s ease;
}
.encender .pal.luz {
	opacity: 1;
}
.dudas {
	margin: 8px 0 0;
}
.dudas dt {
	margin-top: 18px;
	font: 400 20px/1.25 'Gochi Hand', cursive;
	color: var(--member-ink);
}
.dudas dd {
	margin: 4px 0 0;
}
.dudas dd p {
	margin: 0;
}

/* los grupos de avisos: el +35, obligatorio y con su porqué */
.grupo--35 {
	border-color: rgba(220, 0, 211, 0.35);
	background: linear-gradient(160deg, var(--rosa-wash), var(--paper) 55%);
}
.grupo__35 {
	margin: 0 0 8px;
	font: 400 17px/1.2 'Gochi Hand', cursive;
	color: var(--member-ink);
}
.grupo__nota {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--ink-soft);
}
/* el ejemplo: «grupos en común», como en WhatsApp */
.en-comun {
	margin: 18px 0 4px;
	text-align: left;
}
.en-comun__tel {
	padding: 12px 14px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
	font-family: -apple-system, system-ui, Roboto, sans-serif;
}
.en-comun__k {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #667781;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.en-comun__fila {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	border-top: 1px solid #eef0f1;
	font-size: 15px;
}
.en-comun__em {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #e7f5ec;
}
.en-comun figcaption {
	margin-top: 8px;
	font-size: 15px;
	color: var(--ink-soft);
	text-align: center;
}

/* lo siguiente: el cartel de la misión 2 */
.principal--cartel {
	padding-top: 0;
	overflow: hidden;
}
.principal__img {
	display: block;
	width: calc(100% + 64px);
	height: 120px;
	margin: 0 -46px 14px -18px;
	object-fit: cover;
}

/* Tuad-Navi y su rastro de destellos (cada chispa aparece una vez y se apaga despacio) */
.navi {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 30;
	width: 44px;
	height: 44px;
	pointer-events: none;
	image-rendering: pixelated;
	filter: drop-shadow(0 0 8px rgba(120, 210, 255, 0.7));
}
.chispa {
	position: fixed;
	z-index: 29;
	width: 9px;
	height: 9px;
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(185, 225, 255, 0.55) 45%, transparent 70%);
	transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: reduce) {
	.encender .pal {
		opacity: 1;
		transition: none;
	}
}

/* ═══ v5.3 · testimonios silenciosos, la abuela, el índice del vídeo y los iconos de las redes ═══ */
.silencio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 6px;
}
.silencio__p {
	position: relative;
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	background: #ddd;
	aspect-ratio: 3 / 4;
	box-shadow: 0 6px 14px rgba(47, 36, 24, 0.12);
}
.silencio__p:nth-child(4n + 1) {
	transform: rotate(-1.2deg);
}
.silencio__p:nth-child(4n + 3) {
	transform: rotate(1deg);
}
.silencio__p video,
.silencio__p img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.silencio__p figcaption {
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 5px;
	font: 400 12px/1.15 'Gochi Hand', cursive;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.abuela {
	margin: 26px 0 0;
	padding: 18px 16px;
	border-radius: 16px;
	background: linear-gradient(160deg, var(--rosa-wash), var(--paper) 70%);
	text-align: center;
}
.abuela__pregunta {
	margin: 0;
	font: italic 500 19px/1.45 var(--serif);
}
.abuela__respuesta {
	margin: 12px 0 0;
	font: 400 22px/1.25 'Gochi Hand', cursive;
	color: var(--member-ink);
}
.abuela__quien {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--ink-soft);
}
.capitulos__k {
	margin: 14px 0 6px;
	font: italic 400 15px/1.3 var(--serif);
	color: var(--ink-soft);
}
.capitulos {
	margin: 0;
	padding: 0;
	list-style: none;
}
.capitulo {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 10px;
	align-items: center;
	width: 100%;
	min-height: 44px;
	padding: 6px 4px;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: none;
	color: var(--ink);
	font: 500 15px/1.3 var(--font-body);
	text-align: left;
	cursor: pointer;
}
.capitulo__t {
	font: 700 13px/1 var(--font-body);
	color: var(--accent-text);
	font-variant-numeric: tabular-nums;
}
.boton--red {
	gap: 8px;
}
.red__icono {
	width: 18px;
	height: 18px;
	fill: currentColor;
	flex: none;
}
.boton--ig .red__icono {
	fill: #e4405f;
}
.boton--tt .red__icono {
	fill: #111;
}

/* ═══ v5.4 · la gente de la esquina se agarra y protesta ═══ */
.carta__recorte {
	pointer-events: auto;
	touch-action: none;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
.carta__recorte.agarrado {
	cursor: grabbing;
	z-index: 20;
	filter: drop-shadow(0 18px 18px rgba(47, 36, 24, 0.28));
	scale: 1.06;
}
.carta__recorte.vuelve {
	transition: translate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), rotate 0.6s ease, scale 0.3s ease;
}
.grito {
	position: absolute;
	right: 70px;
	bottom: 150px;
	z-index: 21;
	padding: 8px 12px;
	border: 2px solid var(--ink);
	border-radius: 16px 16px 4px 16px;
	background: #fff;
	font: 400 19px/1.1 'Gochi Hand', cursive;
	color: var(--ink);
	white-space: nowrap;
	opacity: 0;
	scale: 0.6;
	pointer-events: none;
	transition: opacity 0.2s ease, scale 0.2s ease;
}
.grito--ve {
	opacity: 1;
	scale: 1;
}
@media (prefers-reduced-motion: reduce) {
	.carta__recorte.vuelve {
		transition: none;
	}
}

/* ═══ v5.4 · el himno con la letra al estilo Spotify, y los atajos de abajo ═══ */
.cancion {
	padding: 16px;
	border-radius: 20px;
	background: linear-gradient(170deg, #5a1d55, #2f2418 75%);
	color: #fff;
	text-align: left;
	box-shadow: 0 14px 30px rgba(47, 36, 24, 0.25);
}
.cancion__cab {
	display: flex;
	align-items: center;
	gap: 12px;
}
.cancion__play {
	flex: none;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-ink);
	font: 700 18px/1 var(--font-body);
	cursor: pointer;
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}
.cancion__tit b {
	display: block;
	font: 700 18px/1.2 var(--font-body);
}
.cancion__tit span {
	font-size: 13px;
	opacity: 0.75;
}
.cancion__barra {
	height: 4px;
	margin: 14px 0 6px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.2);
	overflow: hidden;
}
.cancion__barra i {
	display: block;
	width: 0;
	height: 100%;
	background: #fff;
	transition: width 0.25s linear;
}
.cancion__letra {
	height: 250px;
	margin: 0;
	padding: 90px 0;
	list-style: none;
	overflow-y: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
	mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}
.cancion__letra::-webkit-scrollbar {
	display: none;
}
.cancion__letra li {
	padding: 4px 0;
	font: 800 21px/1.25 var(--font-body);
	color: rgba(255, 255, 255, 0.38);
	cursor: pointer;
	transition: color 0.4s ease;
}
.cancion__letra li.pasado {
	color: rgba(255, 255, 255, 0.6);
}
.cancion__letra li.ahora {
	color: #fff;
}
.pie__atajos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 14px;
	margin: 0 0 10px;
}
.pie__atajos button {
	font-weight: 600;
	color: var(--ink);
}

/* «¡Ey, @and•••!»: el teléfono ya tiene cuenta (telefono-cuenta.sql). Sin parpadeos: entra una vez, suave. */
.reconocido {
	display: grid;
	justify-items: center;
	gap: 12px;
	padding: 20px 16px;
	background: var(--accent-wash);
	border: 1px solid var(--line);
	border-radius: 14px;
	text-align: center;
	animation: reconocido-entra 0.5s var(--ease) both;
}
.reconocido__cara {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-ink);
	font: 700 24px/1 var(--font-body);
}
.reconocido__t {
	margin: 0;
	font: 500 19px/1.4 var(--serif);
	color: var(--ink);
}
.reconocido__t i,
.reconocido__t em {
	display: block;
	margin-top: 4px;
	font: 400 15px/1.4 var(--font-body);
	color: var(--ink-soft);
}
.reconocido .boton {
	width: 100%;
	max-width: 340px;
}
@keyframes reconocido-entra {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.reconocido {
		animation: none;
	}
}

/* ── «Tú», arriba (la navegación ligera, 02/10/2026): sin barra abajo; un botón que abre la capa «dime quién eres» o,
   si la puerta ya te conoce, tu sitio (memoria feedback-navegacion-ligera-sin-barra) ── */
.barra__lado {
	display: flex;
	align-items: center;
	gap: 8px;
}
.tu-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 12px 0 5px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	font: 700 13px/1 var(--font-body);
	cursor: pointer;
}
.tu-chip__cara {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 14px;
	line-height: 1;
}
.tu-chip__cara[data-con-cara] {
	font-size: 11px;
	font-weight: 800;
	color: #12130f;
	background: #fff;
	border: 2px solid var(--aro, #9a9a93);
}
.tu-chip:focus-visible {
	outline: 3px solid var(--member);
	outline-offset: 3px;
}
.estetica,
.tu-chip {
	white-space: nowrap;
}
/* en los móviles estrechos, «Tú» solo con su cara (el nombre sigue en aria-label) */
@media (max-width: 360px) {
	.barra__lado {
		gap: 6px;
	}
	.estetica {
		padding: 0 10px;
	}
	.tu-chip {
		padding: 0 5px;
	}
	.tu-chip__t {
		display: none;
	}
}

/* ── la capa «dime quién eres» (02/10/2026, guion.mjs → CAPA): al llegar, por encima de todo (también de la entrada de
   Andoni). Blanco de base y nada que parpadee (feedback-blanco-y-sin-parpadeos): entra quieta y se va con un fundido. ── */
.capa {
	position: fixed;
	inset: 0;
	z-index: 2147483600;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	color: var(--ink);
	text-align: center;
}
.capa__caja {
	max-width: 480px;
	min-height: 100%;
	margin: 0 auto;
	padding: max(8px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
}
.capa__arriba {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	margin-bottom: 4vh;
	text-align: left;
}
.capa__marca {
	font: 700 15px/1 var(--font-body);
	letter-spacing: -0.01em;
}
.capa__x {
	min-height: 44px;
	padding: 0 2px 0 14px;
	border: 0;
	background: none;
	color: var(--ink-soft);
	font: 500 15px/1 var(--font-body);
	cursor: pointer;
}
.capa__x:focus-visible,
.capa .boton:focus-visible {
	outline: 3px solid var(--member);
	outline-offset: 3px;
}
.capa .sub {
	color: var(--ink-soft);
}
.capa__acciones {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin-top: 6px;
}
.capa__acciones .boton--texto {
	align-self: center;
}
.capa__volumen {
	margin: 8px 0 2px;
	font-size: 14px;
	color: var(--ink-soft);
}
.capa__puerta {
	margin-top: 10px;
	text-align: left;
}
.capa[data-modo='tu'] .capa__puerta {
	margin-top: 22px;
	padding-top: 6px;
	border-top: 1px solid var(--line);
}
.capa--sale {
	opacity: 0;
	transition: opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
	.capa--sale {
		transition: none;
	}
}