@font-face{font-family:'DA Delta';src:local('Helvetica Neue'),local('HelveticaNeue'),local('Helvetica'),local('Arial'),local('ArialMT'),local('Roboto'),local('Segoe UI'),local('Noto Sans'),local('DejaVu Sans');unicode-range:U+2202;font-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:
		'DA Delta', 'Bike Park', 'Roboto', system-ui, sans-serif; /* titulares (Bike Park aún no desplegada → cae a Roboto 900) */
	--font-body: 'DA Delta', 'Roboto', system-ui, -apple-system, sans-serif; /* cuerpo / UI */
	--font-editorial: 'DA Delta', 'Lora', Georgia, 'Times New Roman', serif; /* modo editorial */
	--font-hand: 'DA Delta', 'Gochi Hand', 'Comic Sans MS', cursive; /* acento manuscrito */
	--font-pixel: 'DA Delta', 'Minecraft', 'Press Start 2P', ui-monospace, monospace; /* acento retro/RPG */
	--font-mono: 'DA Delta', ui-monospace, Menlo, Consolas, monospace; /* rutas, código, tickers */
	--font-adventure: 'DA Delta', 'Rubik', var(--font-body); /* títulos de tarjeta de aventura (ExperienceCard) */
	--font-poster: 'DA Delta', '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 buscador de respuestas · v2 (28/09/2026, tarde). Andoni: «el buscador muy bien centrado… que no parezca el
   típico… mi cara de los diálogos… que se vea más cercano… animaciones súper guapas y formas de filtrar muy chulas».
   Los tokens y las fuentes vienen de la app en cada build (construir.mjs los pone delante). Móvil primero: 390 px. */

*,
*::before,
*::after {
	box-sizing: border-box;
}
[hidden] {
	display: none !important;
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 12px;
}
body {
	margin: 0;
	background: #f6f5ef;
	color: var(--da-ink);
	font: 400 16px/1.5 var(--font-body);
	overflow-x: clip;
}
a {
	color: inherit;
}
button,
input {
	font: inherit;
	color: inherit;
}
img {
	max-width: 100%;
}
.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.envoltura {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 16px;
}

/* ── la barra de arriba: la marca y la campanita ─────────────────────── */
.barra {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 640px;
	margin: 0 auto;
	padding: 12px 16px 0;
}
.marca {
	font: 800 15px/1 var(--font-body);
	letter-spacing: 0.01em;
	color: var(--da-ink-warm);
	text-decoration: none;
}
.campana {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 16px 0 12px;
	border: 1.5px solid rgba(47, 36, 24, 0.18);
	border-radius: 99px;
	background: #fffdf7;
	color: var(--da-ink);
	font: 700 14.5px/1 var(--font-body);
	cursor: pointer;
}
.campana__icono {
	position: relative;
	display: grid;
}
.campana svg {
	width: 21px;
	height: 21px;
	transform-origin: 50% 10%;
	animation: tilin 3.2s ease-in-out 1.2s 2;
}
@keyframes tilin {
	0%,
	60%,
	100% {
		transform: rotate(0);
	}
	8% {
		transform: rotate(16deg);
	}
	16% {
		transform: rotate(-13deg);
	}
	24% {
		transform: rotate(9deg);
	}
	32% {
		transform: rotate(-5deg);
	}
}
.campana__punto {
	position: absolute;
	top: -2px;
	right: -3px;
	width: 10px;
	height: 10px;
	border: 2px solid #fffdf7;
	border-radius: 50%;
	background: var(--da-member);
}

/* ── la portada: el buscador en el centro ────────────────────────────── */
.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: calc(100svh - 56px);
	padding: 8px 16px 28px;
	text-align: center;
	overflow: hidden;
	transition:
		min-height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
		padding 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.buscando .hero {
	min-height: 0;
	padding-top: 4px;
	padding-bottom: 12px;
}
/* las manchas de color que respiran detrás */
.hero::before,
.hero::after {
	content: '';
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	filter: blur(40px);
	opacity: 0.55;
	pointer-events: none;
	animation: respira 14s ease-in-out infinite alternate;
}
.hero::before {
	top: 6%;
	right: -18%;
	width: 62vw;
	max-width: 380px;
	aspect-ratio: 1;
	background: #dfe98f;
}
.hero::after {
	bottom: 4%;
	left: -22%;
	width: 58vw;
	max-width: 360px;
	aspect-ratio: 1;
	background: #fde7a0;
	animation-delay: -7s;
}
@keyframes respira {
	to {
		transform: translate(-6%, 8%) scale(1.12);
	}
}
.hero > * {
	position: relative;
	z-index: 2;
}

/* los bocadillos que flotan (el recurso de vota.) */
.burbujas {
	position: absolute !important;
	inset: 0;
	z-index: 1 !important;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.buscando .burbujas {
	opacity: 0;
}
.burbuja {
	position: absolute;
	max-width: 46%;
	opacity: 0;
	animation: bub 18s ease-in-out infinite;
	pointer-events: auto;
}
.burbuja button {
	display: inline-block;
	min-height: 40px;
	padding: 8px 12px;
	border: 1.5px solid rgba(47, 36, 24, 0.45);
	border-radius: 16px 16px 16px 4px;
	background: #fffdf7;
	box-shadow: 2px 3px 0 rgba(47, 36, 24, 0.13);
	font: 400 16px/1.2 var(--font-hand);
	color: #252525;
	text-align: left;
	cursor: pointer;
}
.burbuja:nth-child(even) button {
	border-radius: 16px 16px 4px 16px;
	text-align: right;
}
.burbuja--lima button {
	background: #b9c91c;
	color: #2e3300;
}
@keyframes bub {
	0% {
		opacity: 0;
		transform: translateY(10px) scale(0.94);
	}
	4% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	15% {
		opacity: 1;
		transform: translateY(-2px) scale(1);
	}
	20% {
		opacity: 0;
		transform: translateY(-8px) scale(0.98);
	}
	100% {
		opacity: 0;
	}
}

/* Andoni, con su bocadillo */
.cara {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
}
.cara__foto {
	width: 92px;
	height: 92px;
	border: 3px solid #b9c91c;
	border-radius: 50%;
	background: #fffdf7 center 20% / 118% auto no-repeat;
	box-shadow: 0 0 0 5px rgba(185, 201, 28, 0.22);
	animation: late 3.8s ease-in-out infinite;
}
@keyframes late {
	50% {
		transform: translateY(-4px);
		box-shadow: 0 0 0 9px rgba(185, 201, 28, 0.1);
	}
}
.cara__dice {
	position: relative;
	max-width: 290px;
	margin: 0;
	padding: 8px 14px;
	border-radius: 16px;
	background: var(--da-ink);
	color: #fff;
	font: 400 18px/1.25 var(--font-hand);
}
.cara__dice::before {
	content: '';
	position: absolute;
	top: -6px;
	left: 50%;
	width: 12px;
	height: 12px;
	background: var(--da-ink);
	transform: translateX(-50%) rotate(45deg);
}
.cara__dice .cursor {
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-left: 2px;
	vertical-align: -2px;
	background: #b9c91c;
	animation: parpadea 0.9s steps(1) infinite;
}
@keyframes parpadea {
	50% {
		opacity: 0;
	}
}
.buscando .cara {
	display: none;
}

.hero__h1 {
	margin: 0;
	font: 900 clamp(38px, 11.5vw, 60px) / 0.9 'Poppins', sans-serif;
	letter-spacing: -0.055em;
	color: #252525;
	text-shadow: 4px 4px 0 #b9c91c;
}
.buscando .hero__h1 {
	font-size: 28px;
	text-shadow: 3px 3px 0 #b9c91c;
}

/* la caja del buscador */
.caja {
	position: relative;
	width: 100%;
	max-width: 520px;
	margin: 22px auto 0;
}
.buscando .caja {
	margin-top: 12px;
}
.caja__icono {
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	color: #252525;
	pointer-events: none;
}
.caja input {
	width: 100%;
	min-height: 66px;
	padding: 0 56px 0 54px;
	border: 2.5px solid #252525;
	border-radius: 999px;
	background: #fffdf7;
	box-shadow: 0 6px 0 #252525;
	font: 500 17px/1.2 var(--font-body);
	outline: none;
	transition:
		box-shadow 0.18s ease,
		transform 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}
.caja input::placeholder {
	color: #767676;
}
.caja input:focus {
	transform: translateY(3px);
	box-shadow:
		0 3px 0 #252525,
		0 0 0 6px rgba(185, 201, 28, 0.45);
}
.caja input::-webkit-search-cancel-button {
	display: none;
}
.caja__borrar {
	position: absolute;
	top: 50%;
	right: 12px;
	width: 42px;
	height: 42px;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: #ecebe3;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

/* quién eres (la puerta) */
.yo {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 10px;
	margin: 14px 0 0;
	font-size: 15px;
	color: #555;
}
.yo b {
	color: #252525;
}
.yo button {
	min-height: 40px;
	padding: 0 14px;
	border: 1.5px solid rgba(47, 36, 24, 0.35);
	border-radius: 999px;
	background: #fffdf7;
	font-size: 14.5px;
	cursor: pointer;
}
.buscando .yo {
	display: none;
}

/* ── el camino: las misiones ─────────────────────────────────────────── */
.camino {
	width: 100%;
	max-width: 560px;
	margin: 16px auto 0;
	padding: 14px 0 10px;
	overflow-x: auto;
	scrollbar-width: none;
}
.camino::-webkit-scrollbar {
	display: none;
}
.camino ol {
	position: relative;
	display: flex;
	gap: 2px;
	width: max-content;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.camino ol::before {
	content: '';
	position: absolute;
	top: 20px;
	left: 28px;
	right: 28px;
	border-top: 2.5px dashed rgba(47, 36, 24, 0.25);
}
.mision {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	min-width: 66px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.mision__n {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 2.5px solid #252525;
	border-radius: 50%;
	background: #fffdf7;
	font: 800 16px/1 var(--font-body);
	transition:
		transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1),
		background 0.2s ease;
}
.mision__t {
	max-width: 72px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.15;
}
.mision[aria-pressed='true'] .mision__n {
	background: #b9c91c;
	transform: scale(1.12);
	box-shadow: 0 3px 0 #252525;
}
.mision--aqui .mision__n::after {
	content: 'tú';
	position: absolute;
	top: -9px;
	right: 2px;
	padding: 1px 6px;
	border-radius: 99px;
	background: var(--da-member);
	color: #fff;
	font: 700 11px/1.4 var(--font-body);
}
.mision:active .mision__n {
	transform: scale(0.94);
}
/* «Organizar»: solo lo ven los colaboradores, con su color */
.camino [data-solo] .mision__n {
	border-color: var(--da-partner-ink);
	background: var(--da-partner-wash);
	color: var(--da-partner-ink);
}
.camino [data-solo] .mision[aria-pressed='true'] .mision__n {
	background: var(--da-partner);
	color: #fff;
	box-shadow: 0 3px 0 var(--da-partner-ink);
}

/* ── las respuestas ──────────────────────────────────────────────────── */
.resultados {
	padding: 0 0 8px;
}
.bloque {
	margin: 18px 0 0;
}
.bloque__t {
	margin: 0;
	font: 900 22px/1.1 'Poppins', sans-serif;
	letter-spacing: -0.03em;
}
.bloque__h {
	margin: 4px 0 12px;
	color: #666;
	font-size: 14.5px;
}
.fichas {
	display: grid;
	gap: 10px;
}
.ficha {
	border: 1.5px solid rgba(47, 36, 24, 0.14);
	border-radius: 18px;
	background: #fffdf7;
	box-shadow: 0 2px 0 rgba(47, 36, 24, 0.06);
	animation: entra 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
	animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes entra {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.98);
	}
}
.ficha > summary {
	display: flex;
	gap: 10px;
	align-items: center;
	min-height: 58px;
	padding: 12px 16px;
	font: 600 16px/1.35 var(--font-body);
	list-style: none;
	cursor: pointer;
}
.ficha > summary::-webkit-details-marker {
	display: none;
}
.ficha > summary::after {
	content: '+';
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin-left: auto;
	border-radius: 50%;
	background: #ecebe3;
	font-size: 18px;
	transition: transform 0.25s ease;
}
.ficha[open] > summary::after {
	transform: rotate(45deg);
	background: #b9c91c;
}
.ficha__cuerpo {
	padding: 0 16px 16px;
}
/* la respuesta, como si la contestara Andoni */
.contesta {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	gap: 10px;
	align-items: end;
}
.contesta__cara {
	width: 38px;
	height: 38px;
	border: 2px solid #b9c91c;
	border-radius: 50%;
	background: #fffdf7 center 20% / 118% auto no-repeat;
}
.contesta__bocadillo {
	margin: 0;
	padding: 11px 14px;
	border-radius: 18px 18px 18px 4px;
	background: #e9f1c4;
	font-size: 16px;
	line-height: 1.55;
	animation: bocadillo 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes bocadillo {
	from {
		opacity: 0;
		transform: translateY(6px) scale(0.97);
		transform-origin: 0 100%;
	}
}
.contesta__quien {
	display: block;
	margin: 0 0 3px;
	font: 400 15px/1 var(--font-hand);
	color: #5a6400;
}
.escribiendo {
	display: inline-flex;
	gap: 4px;
	padding: 12px 14px;
	border-radius: 18px 18px 18px 4px;
	background: #e9f1c4;
}
.escribiendo i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #7c8a12;
	animation: salta 0.9s ease-in-out infinite;
}
.escribiendo i:nth-child(2) {
	animation-delay: 0.15s;
}
.escribiendo i:nth-child(3) {
	animation-delay: 0.3s;
}
@keyframes salta {
	50% {
		transform: translateY(-4px);
		opacity: 0.5;
	}
}
.ficha__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 12px 0 0 48px;
}
.ir {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	background: #252525;
	color: #fff;
	font: 700 15px/1 var(--font-body);
	text-decoration: none;
}
.sirve {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 12px 0 0 48px;
	color: #666;
	font-size: 14.5px;
}
.sirve button {
	min-height: 40px;
	padding: 0 16px;
	border: 1.5px solid rgba(47, 36, 24, 0.2);
	border-radius: 999px;
	background: #fff;
	font-size: 14.5px;
	cursor: pointer;
}
.sirve__gracias {
	color: #5a6400;
	font-weight: 700;
}
.mas {
	margin: 12px 0 0;
	min-height: 44px;
	padding: 0 18px;
	border: 1.5px solid rgba(47, 36, 24, 0.2);
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
}

/* lo más pedido sin respuesta */
.pedidas {
	margin: 0;
	padding: 0 0 0 22px;
}
.pedidas li {
	padding: 8px 0;
	border-bottom: 1px solid rgba(47, 36, 24, 0.1);
	font-size: 15.5px;
}
.pedidas small {
	margin-left: 8px;
	color: #666;
	font-size: 13.5px;
}

/* ── cuando no está: pregúntalo ──────────────────────────────────────── */
.nada {
	margin: 18px 0 0;
}
.preguntar {
	margin: 24px 0 0;
	padding: 18px 16px;
	border: 2px dashed rgba(7, 94, 84, 0.3);
	border-radius: 20px;
	background: #fffdf7;
	text-align: center;
}
.preguntar__t {
	margin: 0;
	font: 900 21px/1.15 'Poppins', sans-serif;
	letter-spacing: -0.03em;
}
.preguntar__p {
	margin: 6px auto 14px;
	max-width: 420px;
	color: #666;
	font-size: 15px;
}
.preguntar__cita {
	display: inline-block;
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: 16px 16px 4px 16px;
	background: var(--da-wa-bubble);
	font-size: 15px;
	text-align: left;
	word-break: break-word;
}
.wa {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	min-height: 54px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--da-wa);
	color: #06331b;
	font: 800 16px/1.2 var(--font-body);
	text-decoration: none;
	box-shadow: 0 5px 0 #13974a;
}
.wa:active {
	transform: translateY(3px);
	box-shadow: 0 2px 0 #13974a;
}

/* ── el tráfico: lo que tiene Andoni por contestar ──────────────────── */
.trafico {
	margin: 34px 0 0;
	padding: 20px 16px;
	border-radius: 22px;
	background: #252525;
	color: #f6f5ef;
}
.trafico__t {
	margin: 0;
	font: 900 22px/1.1 'Poppins', sans-serif;
	letter-spacing: -0.03em;
}
.trafico__t em {
	font-style: normal;
	color: #b9c91c;
}
.trafico__p {
	margin: 6px 0 16px;
	color: #c8c6bd;
	font-size: 15px;
}
.cifras {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.cifra {
	padding: 12px;
	border-radius: 16px;
	background: #333129;
}
.cifra--grande {
	grid-column: 1 / -1;
}
.cifra__n {
	display: block;
	font: 900 34px/1 'Poppins', sans-serif;
	letter-spacing: -0.04em;
	color: #fff;
}
.cifra--grande .cifra__n {
	font-size: 54px;
	color: #b9c91c;
}
.cifra__t {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.3;
	color: #e3e1d8;
}
.cifra__f {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: #a5a399;
}
.cifra a {
	color: #dfe98f;
}
.roles {
	margin: 16px 0 0;
}
.roles__t {
	margin: 0 0 8px;
	font-size: 14px;
	color: #c8c6bd;
}
.rol-barra {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr) 34px;
	gap: 8px;
	align-items: center;
	margin: 6px 0;
	font-size: 14px;
}
.rol-barra__b {
	height: 12px;
	border-radius: 99px;
	background: #3d3b33;
	overflow: hidden;
}
.rol-barra__b i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 99px;
	background: var(--c, #b9c91c);
	transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rol-barra__n {
	text-align: right;
	font-weight: 700;
}
.trafico__f {
	margin: 14px 0 0;
	font-size: 13px;
	color: #a5a399;
}

/* ── la hoja de la campanita ─────────────────────────────────────────── */
.velo {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: rgba(20, 18, 12, 0.45);
	animation: aparecer 0.2s ease;
}
@keyframes aparecer {
	from {
		opacity: 0;
	}
}
.hoja {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 41;
	max-width: 560px;
	max-height: 86svh;
	margin: 0 auto;
	padding: 10px 18px 26px;
	overflow-y: auto;
	border-radius: 24px 24px 0 0;
	background: #fffdf7;
	animation: sube 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes sube {
	from {
		transform: translateY(100%);
	}
}
.hoja__asa {
	width: 44px;
	height: 5px;
	margin: 0 auto 12px;
	border-radius: 99px;
	background: #dcdad0;
}
.hoja__cab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.hoja__t {
	margin: 0;
	font: 900 22px/1.1 'Poppins', sans-serif;
	letter-spacing: -0.03em;
}
.hoja__cerrar {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #ecebe3;
	font-size: 20px;
	cursor: pointer;
}
/* ── el diario aventurero (la campanita), como un periódico ───────────── */
/* Los colores de cada tipo: amarillo grumete, lima, magenta miembro, verde colaborador y tinta. */
.novedad--campana,
.chip--campana,
.destacado--campana {
	--tipo: #fed01a;
	--tipo-fondo: #fdf3d0;
	--tipo-tinta: #7a6200;
}
.novedad--novedad,
.chip--novedad {
	--tipo: #b9c91c;
	--tipo-fondo: #f3f6d9;
	--tipo-tinta: #5a6400;
}
.novedad--decision,
.chip--decision {
	--tipo: #dc00d3;
	--tipo-fondo: #fbe6fa;
	--tipo-tinta: #9a0093;
}
.novedad--incubadora,
.chip--incubadora,
.destacado--incubadora {
	--tipo: #23cf9d;
	--tipo-fondo: #dff7ef;
	--tipo-tinta: #0b5c44;
}
.novedad--detras,
.chip--detras,
.destacado--detras {
	--tipo: #252525;
	--tipo-fondo: #ecebe3;
	--tipo-tinta: #252525;
}
.hoja--diario {
	padding: 10px 18px 30px;
	background:
		repeating-linear-gradient(0deg, transparent 0 27px, rgba(47, 36, 24, 0.04) 27px 28px),
		#fffdf7;
}
/* la × no se va al bajar */
.hoja__cerrar--flota {
	position: sticky;
	top: 0;
	z-index: 3;
	float: right;
	margin: 0 -6px -44px 0;
	box-shadow: 0 2px 10px rgba(47, 36, 24, 0.12);
}
.hoja__cerrar:focus-visible {
	outline: 3px solid #b9c91c;
	outline-offset: 2px;
}
/* la cabecera: el nombre del periódico entre dos rayas */
.diario__cabecera {
	padding: 2px 0 12px;
	text-align: center;
	border-bottom: 3px double rgba(47, 36, 24, 0.55);
}
.diario__kicker {
	display: flex;
	justify-content: space-between;
	margin: 0 52px 8px;
	padding: 0 0 6px;
	border-bottom: 1px solid rgba(47, 36, 24, 0.3);
	font: 400 16px/1.2 var(--font-hand);
	color: #5a6400;
}
.diario__t {
	margin: 0;
	font: italic 700 clamp(28px, 8.6vw, 38px) / 1.02 var(--font-editorial);
	letter-spacing: -0.02em;
}
.diario__sub {
	margin: 6px 0 0;
	color: #555;
	font-size: 14.5px;
}
/* la portada: la noticia grande */
.portada {
	position: relative;
	margin: 16px 0 0;
	padding: 16px 16px 16px 18px;
	border-radius: 18px;
	background: var(--tipo-fondo);
	color: var(--tipo-tinta);
	box-shadow: inset 5px 0 0 var(--tipo);
}
.portada__sobre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font: 400 16px/1.2 var(--font-hand);
}
.portada__sobre .novedad__tipo {
	margin: 0;
	background: var(--tipo);
	color: #252525;
}
.portada__t {
	margin: 8px 0 4px;
	color: #252525;
	font: 700 clamp(22px, 6.6vw, 27px) / 1.12 var(--font-editorial);
	letter-spacing: -0.01em;
}
.portada__texto {
	margin: 0;
	color: #3b372f;
	font-size: 16px;
	line-height: 1.45;
}
.portada__ir {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	margin-top: 10px;
	padding: 0 16px;
	border-radius: 99px;
	background: #252525;
	color: #fffdf7;
	font-weight: 700;
	text-decoration: none;
}
/* las dos puertas: detrás de escenas y la incubadora, una debajo de otra, con su flecha */
.destacados {
	display: grid;
	gap: 10px;
	margin: 12px 0 0;
}
.destacado {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 12px;
	padding: 12px 12px 13px 16px;
	border-radius: 16px;
	background: var(--tipo-fondo);
	color: var(--tipo-tinta);
	text-decoration: none;
	box-shadow: 0 3px 0 var(--tipo);
	transition: transform 0.15s ease;
}
.destacado > span:not(.destacado__boton),
.destacado > b {
	grid-column: 1;
}
.destacado:active {
	transform: translateY(2px);
}
.destacado--detras {
	background: #1e1b16;
	color: #f6f5ef;
	box-shadow: 0 3px 0 #b9c91c;
}
.destacado__tipo {
	font: 700 11.5px/1.3 var(--font-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}
.destacado b {
	margin: 3px 0 2px;
	font: 700 17px/1.2 var(--font-editorial);
}
.destacado__texto {
	font-size: 14px;
	line-height: 1.4;
	opacity: 0.9;
}
/* el texto del botón lo lee el lector de pantalla; a la vista, una flecha redonda */
.destacado__boton {
	grid-column: 2;
	grid-row: 1 / span 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--tipo);
	color: transparent;
	font-size: 0;
}
.destacado__boton::after {
	content: '→';
	color: #fff;
	font: 800 20px/1 var(--font-body);
}
.destacado--detras .destacado__boton {
	background: #b9c91c;
}
.destacado--detras .destacado__boton::after {
	color: #2e3300;
}
.destacado--incubadora .destacado__boton::after {
	color: #06331b;
}
/* los filtros: se quedan arriba al bajar */
.diario__filtros {
	position: sticky;
	top: -10px;
	z-index: 2;
	display: flex;
	gap: 6px;
	margin: 18px 48px 0 -18px;
	padding: 10px 8px 8px 18px;
	overflow-x: auto;
	scrollbar-width: none;
	background: linear-gradient(#fffdf7 80%, rgba(255, 253, 247, 0));
}
.diario__filtros::-webkit-scrollbar {
	display: none;
}
.diario__filtros button {
	flex: none;
	min-height: 40px;
	padding: 0 14px;
	border: 1.5px solid var(--tipo, rgba(47, 36, 24, 0.3));
	border-radius: 99px;
	background: #fffdf7;
	color: var(--tipo-tinta, #252525);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.diario__filtros button small {
	margin-left: 2px;
	font-size: 13px;
	opacity: 0.7;
}
.diario__filtros button[aria-pressed='true'] {
	background: var(--tipo, #252525);
	border-color: var(--tipo, #252525);
	color: #fff;
}
.diario__filtros .chip--novedad[aria-pressed='true'],
.diario__filtros .chip--campana[aria-pressed='true'] {
	color: #252525;
}
/* los días: lo último arriba, con su línea de tiempo */
.dias {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}
.dia {
	position: relative;
	padding: 0 0 4px 22px;
}
.dia::before {
	content: '';
	position: absolute;
	top: 12px;
	bottom: 0;
	left: 6px;
	border-left: 2.5px dashed rgba(47, 36, 24, 0.2);
}
.dia__t {
	position: relative;
	margin: 12px 0 8px;
	font: 400 18px/1.2 var(--font-hand);
	color: #5a6400;
}
.dia__t::before {
	content: '';
	position: absolute;
	top: 4px;
	left: -21px;
	width: 12px;
	height: 12px;
	border: 2.5px solid #252525;
	border-radius: 50%;
	background: #fffdf7;
}
.dia__t span {
	color: #7a6200;
}
.dia--principio::before {
	bottom: auto;
	height: 12px;
}
.dia--principio .dia__t::before {
	background: #fed01a;
}
.novedades {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.novedad {
	position: relative;
	padding: 11px 14px 12px 15px;
	border-radius: 14px;
	background: #fffdf7;
	box-shadow:
		inset 4px 0 0 var(--tipo, #b9c91c),
		0 0 0 1px rgba(47, 36, 24, 0.1);
}
/* la de portada ya está arriba: en «Todo» no se repite */
.dias:not(.dias--filtrado) .novedad--portada {
	display: none;
}
.novedad time {
	display: none;
}
.novedad__tipo {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 99px;
	background: var(--tipo-fondo);
	color: var(--tipo-tinta);
	font: 700 12px/1.6 var(--font-body);
}
.novedad b {
	display: block;
	margin: 5px 0 2px;
	font: 700 17px/1.25 var(--font-editorial);
}
.novedad p {
	margin: 0;
	color: #555;
	font-size: 15px;
	line-height: 1.45;
}
.novedad a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin: 2px 0 -8px;
	color: var(--tipo-tinta, #252525);
	font-weight: 700;
}
/* lo que ha salido desde tu última visita */
.novedad--nueva::after,
.portada--nueva::after {
	content: 'nuevo';
	position: absolute;
	top: 10px;
	right: 12px;
	padding: 1px 8px;
	border-radius: 99px;
	background: var(--da-member);
	color: #fff;
	font: 700 12px/1.6 var(--font-body);
}
.diario__fin {
	margin: 18px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid rgba(47, 36, 24, 0.2);
	color: #666;
	font-size: 14px;
	text-align: center;
}

/* ── /behind/: detrás de escenas ─────────────────────────────────────── */
.behind-cuerpo {
	background: #1e1b16;
	color: #f6f5ef;
}
.barra--oscura .marca {
	color: #f6f5ef;
}
.barra__volver {
	color: #dfe98f;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
}
.behind {
	max-width: 560px;
	margin: 0 auto;
	padding: 28px 16px 48px;
}
.behind__kicker {
	margin: 0;
	font: 400 18px/1 var(--font-hand);
	color: #b9c91c;
}
.behind__t {
	margin: 8px 0 0;
	font: 900 clamp(32px, 9.5vw, 46px) / 1.16 'Poppins', sans-serif;
	letter-spacing: -0.045em;
}
.behind__t em {
	font-style: normal;
	color: #1e1b16;
	background: #b9c91c;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	padding: 0 6px;
}
.behind__p {
	margin: 14px 0 0;
	color: #d6d4ca;
	font-size: 16px;
}
.chat {
	margin: 22px 0 0;
	border-radius: 22px;
	overflow: hidden;
	background: #efeae2;
	color: #111;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.chat__cab {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 10px 14px;
	background: #075e54;
	color: #fff;
}
.chat__cab small {
	display: block;
	opacity: 0.8;
	font-size: 13px;
}
.chat__cara {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fffdf7 center / 110% auto no-repeat;
}
.chat__cuerpo {
	display: grid;
	gap: 8px;
	justify-items: start;
	padding: 16px 14px 18px;
}
.chat__globo {
	max-width: 88%;
	margin: 0;
	padding: 9px 12px;
	border-radius: 4px 14px 14px 14px;
	background: #fff;
	font-size: 16px;
	line-height: 1.45;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	animation: bocadillo 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.chat__globo p {
	margin: 0 0 6px;
}
.chat__globo p:last-child {
	margin: 0;
}
.chat__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 99px;
	background: #25d366;
	color: #06331b;
	font: 800 17px/1 var(--font-body);
	text-decoration: none;
	box-shadow: 0 4px 0 #13974a;
}
.chat__boton:active {
	transform: translateY(2px);
	box-shadow: 0 2px 0 #13974a;
}
.escribiendo--chat {
	background: #fff;
}
.behind__notas {
	margin: 22px 0 0;
	padding: 0 0 0 20px;
	color: #d6d4ca;
	font-size: 15px;
}
.behind__notas li {
	margin: 0 0 8px;
}
.behind__notas a {
	color: #dfe98f;
	font-weight: 700;
}

/* La puerta es la pieza común de las páginas demo: aquí no es una demo, así que sin su cinta de «vista previa». */
body .puerta-cinta {
	display: none !important;
}

/* ── el pie ──────────────────────────────────────────────────────────── */
.pie {
	margin: 28px 0 0;
	padding: 18px 0 40px;
	border-top: 1px solid rgba(47, 36, 24, 0.12);
	color: #666;
	font-size: 13.5px;
}
.pie p {
	margin: 0 0 8px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
	.burbuja {
		display: none;
	}
}

/* ── la demo «así se hace» dentro de una respuesta (vota.: juntar el correo) ─────────────────────────── */
.demo {
	display: grid;
	gap: 8px;
	margin: 4px 0 10px 46px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.demo li {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 4px 10px;
	align-items: start;
	opacity: 0.55;
	transition: opacity 0.35s ease, transform 0.35s ease;
}
.demo li.demo__aqui {
	opacity: 1;
	transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
	.demo li {
		opacity: 1;
		transition: none;
	}
}
.demo__n {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #252525;
	color: #fff;
	font: 800 13px/1 var(--font-body);
}
.demo li.demo__aqui .demo__n {
	background: #b9c91c;
	color: #2e3300;
}
.demo__pantalla {
	display: grid;
	gap: 6px;
	padding: 10px 12px;
	border: 2px solid #252525;
	border-radius: 10px;
	background: #fff;
	font-size: 14.5px;
}
.demo__pantalla small {
	color: #666;
	font-size: 13px;
}
.demo__campo {
	padding: 7px 10px;
	border: 1.5px solid rgba(0, 0, 0, 0.25);
	border-radius: 6px;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 13.5px;
	overflow-wrap: anywhere;
}
.demo__boton {
	justify-self: start;
	padding: 6px 12px;
	border-radius: 99px;
	background: #252525;
	color: #fff;
	font-size: 13.5px;
}
.demo__op {
	padding: 6px 10px;
	border-radius: 6px;
	background: #f1f0ea;
	font-size: 14px;
}
.demo__op--si {
	background: #f3f6d9;
	box-shadow: inset 0 0 0 2px #b9c91c;
	font-weight: 700;
}
.demo__ok {
	color: #0b5c44;
	font-weight: 700;
}
.demo li p {
	grid-column: 2;
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
}

/* ── páginas sueltas: el calendario y el roadmap ────────────────────────────────────────────────────── */
.suelta {
	background: #f6f5ef;
}
.barra__volver--claro {
	color: #5a6400;
}
.suelta__main {
	max-width: 560px;
	margin: 0 auto;
	padding: 28px 16px 64px;
}
.suelta__kicker {
	margin: 0 0 6px;
	font: 400 18px/1.2 var(--font-hand);
	color: #5a6400;
}
.suelta__t {
	margin: 0 0 12px;
	font: 900 clamp(32px, 9vw, 44px) / 1.05 'Poppins', sans-serif;
	letter-spacing: -0.03em;
	text-wrap: balance;
}
.suelta__t em {
	font-style: normal;
	background: linear-gradient(transparent 60%, #b9c91c 60%, #b9c91c 92%, transparent 92%);
}
.suelta__p {
	margin: 0 0 18px;
	color: #3b372f;
	font-size: 17px;
	line-height: 1.5;
}
.suelta__botones {
	display: grid;
	gap: 10px;
	margin: 0 0 20px;
}
.suelta__boton {
	justify-content: center;
}
.suelta__boton--lima {
	display: flex;
	align-items: center;
	min-height: 54px;
	padding: 0 18px;
	border-radius: 99px;
	background: #b9c91c;
	box-shadow: 0 4px 0 rgba(140, 155, 0, 0.35);
	color: #2e3300;
	font-weight: 800;
	text-decoration: none;
}
.suelta__boton--claro {
	display: flex;
	align-items: center;
	min-height: 54px;
	padding: 0 18px;
	border-radius: 99px;
	background: #fff;
	box-shadow: inset 0 0 0 2px #252525;
	color: #252525;
	font-weight: 700;
	text-decoration: none;
}
.suelta__notas {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0 0 0 18px;
	color: #555;
	font-size: 15.5px;
}
.suelta__notas a {
	color: #252525;
	font-weight: 700;
}
.ruta {
	display: grid;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
.ruta li {
	display: grid;
	gap: 2px;
	padding: 12px 14px 12px 16px;
	border-radius: 12px;
	background: #fff;
	box-shadow: inset 4px 0 0 #b9c91c, 0 0 0 1px rgba(47, 36, 24, 0.1);
}
.ruta li b {
	font: 400 18px/1.2 var(--font-hand);
	color: #5a6400;
}
.ruta li span {
	font-size: 16px;
	line-height: 1.4;
}
.ruta__detras {
	display: grid;
	gap: 10px;
	padding: 18px 16px;
	border-radius: 16px;
	background: #1e1b16;
	color: #f6f5ef;
}
.ruta__detras h2 {
	margin: 0;
	font: 700 20px/1.2 var(--font-editorial);
}
.ruta__detras p {
	margin: 0;
	opacity: 0.85;
	font-size: 15.5px;
}