/* Hallmark · genre: playful · macrostructure: Split Studio · design-system: explore/stackoo-puzzle/release/SITE-REDESIGN.md · designed-as-app
 * theme: custom (tuned) · vibe: "gominola brillante, menta calmada, regaliz medianoche"
 * paper: oklch(96.2% 0.010 131) · accent: oklch(57.9% 0.150 255) · display: Fraunces (SOFT 100, roman) · body: Figtree
 * axes: light / roman-serif (soft) / cool
 * enrichment: E5 tablero real (sprites + bandeja SVG) · suelo E7 (grano + 2 radiales) en hero, pasos, liga, gratis y cierre · charcos de gominola teñidos por su sección (--ico-wash) ·
 *   halo cónico tras el tablero del hero · 4+3 fichas fantasma a la deriva (pasos, cierre) · destello propio (deco/sparkle.svg) solo en la pareja que se une (hero, cierre) · pantalla real del juego sin marco (pasos) · polish: none
 * nav: N5 Floating pill (opaque jelly, no blur) · footer: Ft5 Statement (en la portada cede el cierre a «¿Listo…?»: un solo cierre)
 * motion: hero-entrance · sightline-march (4 iterations) · spark-pop (1 vez, al acabar el rayo) · drift de fichas (4 vaivenes y reposo, solo no-preference) · jelly-press · studied: no · context: inferred · hallmark v1.1.0
 * contrast: pass (40-41; axe + muestreo de píxeles sobre grano) · nav: N5 · footer: Ft5 · slop: pass (42-45) · honest: pass (46) · chrome: pass (47, pantalla real sin marco de dispositivo) · tokens: pass (48; croma ≥ 0,005 en los neutros, on-primary 13,5:1)
 * responsive: pass (49) · icons: pass (30, Phosphor MIT) · gates v2 reabiertas y cerradas: 22 croma · 24 escala · 25 medida del pie · 26 :active y [aria-disabled] · 35 subrayado 2px · 51 overflow-wrap · 54 número sobre el título (apilado)
 * mobile: pass (34, 49, 50-57; lede de una frase: 3 líneas a 320 px, CTA principal sobre el pliegue a 375×812) · restraint: un solo cierre en la portada
 */
/* Hallmark · pre-emit critique: P5 H4 E5 S5 R4 V5 */
/* Fuente: scripts/site-src/site.css (+ tokens.css, incrustado en el marcador de abajo)  ->  `node scripts/build-site.mjs`  ->  site/style.css.
   Material «Gominola brillante» de la app: lo que se pulsa lleva canto, lo que solo se lee es plano o hundido; una sola luz arriba a la izquierda.
   Sin JavaScript: el modo oscuro sigue al sistema (prefers-color-scheme). Cada color y cada font-family va por var(--…) (tokens.css). */

/* Hallmark tokens · stackoo.app · fuente de verdad del sistema bloqueado (SITE-REDESIGN.md §5 + §14).
   build-site.mjs incrusta este fichero en style.css (marcador @tokens de site.css): la CSP y site-check no admiten importaciones encadenadas.
   Regla (puerta 48): cada color y cada font-family del CSS va por var(--…). Si falta un valor, se añade AQUÍ y luego se usa. */
:root {
  color-scheme: light dark;

  /* Suelo y superficies */
  --color-paper:       oklch(96.2% 0.010 131);   /* #F0F4ED menta-crema */
  --color-paper-2:     oklch(92.9% 0.014 139);   /* #E3EAE1 bandas */
  --color-surface:     oklch(98.4% 0.007 97);    /* #FBFAF5 crema de leche: píldora, tarjetas de lectura, ticket */
  --color-rule:        oklch(89.0% 0.019 140);   /* #D4DED2 filetes */
  /* Tinta */
  --color-ink:         oklch(19.8% 0.040 282);   /* #131327 · 16.4:1 sobre papel */
  --color-ink-2:       oklch(42.0% 0.047 276);   /* #464B67 · 7.7:1 papel · 7.0:1 papel-2 */
  /* Acento único: la línea de visión */
  --color-accent:      oklch(57.9% 0.150 255);   /* #347AD0 rayo, selección, objetivo, chip «pronto» · 3.9:1, NO para texto */
  --color-accent-glow: oklch(70.5% 0.107 214 / 0.32); /* halo de la ficha elegida (app --select-glow) */
  --color-link:        oklch(51.0% 0.150 255);   /* #1C65B9 texto de enlace · 5.2:1 papel · 4.7:1 papel-2 */
  --color-focus:       oklch(57.9% 0.150 255);   /* anillo de foco ≥ 3:1 */
  /* Bandeja del tablero */
  --color-well:        oklch(76.7% 0.049 169);   /* #95BEAE · tinta encima 8.9:1 */
  --color-well-rim:    oklch(66.1% 0.057 168);   /* #709E8C solo decorativo */
  --color-well-edge:   oklch(30.0% 0.052 283 / 0.08); /* bisel interior de la bandeja */
  --color-well-wash:   oklch(89.8% 0.025 167);   /* suelo del hero · lavado de iconos por defecto */
  --color-well-soft:   oklch(83.8% 0.037 168);   /* charco bajo el tablero: un punto más hondo que el suelo */
  --color-ground-light: oklch(99.7% 0.005 355 / 0.85); /* la única luz, arriba a la izquierda (app --ground-light) */
  /* Gominola de leche (lo pulsable secundario) */
  --color-jelly-hi:    oklch(99.7% 0.005 355);
  --color-jelly:       oklch(99.4% 0.005 355);   /* #FFFCFD */
  --color-jelly-lo:    oklch(95.3% 0.006 334);   /* #F2EEF1 */
  --color-jelly-lip:   oklch(85.2% 0.020 270);   /* #C9CEDC canto, el mismo de las fichas */
  /* Regaliz (lo pulsable principal) */
  --color-primary:     oklch(30.0% 0.052 283);   /* #2A2A47 */
  --color-primary-hi:  oklch(42.1% 0.050 283);   /* #494A68 */
  --color-primary-lip: oklch(19.8% 0.040 282);   /* #131327 */
  --color-on-primary:  oklch(99.4% 0.005 355);   /* ≥ 13:1 */
  /* Marca: SOLO el logotipo */
  --color-coral:       oklch(61.0% 0.171 20);
  --color-coral-shade: oklch(45.9% 0.119 16);
  --color-teal:        oklch(58.3% 0.101 214);
  --color-teal-shade:  oklch(41.7% 0.073 221);
  /* Lavados (capa trasera de los iconos duotono, charcos, :target, avisos) */
  --color-gold-wash:   oklch(92.1% 0.096 88);    /* #FFE29A precio · Gran Maestro */
  --color-gold-soft:   oklch(94.6% 0.058 90);    /* charco bajo el ticket: el dorado, en voz baja */
  --color-sky-wash:    oklch(91.8% 0.030 251);   /* privacidad · apartado :target */
  --color-warn-bg:     oklch(96.6% 0.040 88);
  --color-warn-line:   oklch(84.1% 0.106 88);
  --color-mark-bg:     oklch(92.1% 0.096 88);    /* marcador de dato pendiente (hoy no se pinta: la identidad está rellena) */
  --color-gold:        oklch(82.0% 0.135 85);    /* destello sobre papel: SOLO decorativo, nunca texto */
  --color-spark:       oklch(99.7% 0.005 355);   /* destello sobre la bandeja de menta: SOLO decorativo */

  /* Material de gominola (el alfa es un modificador dentro del token) */
  --lip-s: 3px;  --lip-m: 4px;  --lip-l: 5px;
  --rim-jelly:     inset 0 1.5px 0 oklch(99.7% 0.005 355 / 0.95), inset 0 -2px 0 oklch(19.8% 0.040 282 / 0.05);
  --rim-primary:   inset 0 1.5px 0 oklch(99.4% 0.005 355 / 0.22), inset 0 -10px 14px -10px oklch(80% 0.035 251 / 0.16);
  --recess:        inset 0 2px 3px oklch(19.8% 0.040 282 / 0.14), inset 0 -1px 0 oklch(99.7% 0.005 355 / 0.55);
  --shadow-drop-s: 0 7px 10px -7px oklch(30% 0.052 283 / 0.24);
  --shadow-drop-m: 0 10px 16px -8px oklch(30% 0.052 283 / 0.24);
  --shadow-drop-l: 0 14px 22px -10px oklch(30% 0.052 283 / 0.40);
  --shadow-tray:   0 22px 40px -22px oklch(30% 0.052 283 / 0.45);
  --filter-tile:   drop-shadow(0 6px 5px oklch(30% 0.052 283 / 0.16));
  --filter-ticket: drop-shadow(0 10px 9px oklch(30% 0.052 283 / 0.14));

  /* Tipos (2 familias; sin mono) */
  --font-display: "Fraunces", "New York", ui-serif, Georgia, serif;          /* 700–900, SOFT 100, siempre romana */
  --font-body:    "Figtree", "SF Pro Rounded", ui-rounded, -apple-system, system-ui, sans-serif;
  --weight-body: 400;  --weight-medium: 500;  --weight-ui: 600;  --weight-strong: 700;  --weight-head: 800;  --weight-display: 800;  --weight-wordmark: 900;

  /* 5 tamaños por página (+ logotipo) */
  --text-sm:       0.9375rem;                                   /* 15 px: meta, notas, pie legal, dt */
  --text-base:     1.0625rem;                                   /* 17 px: cuerpo */
  --text-md:       1.25rem;                                     /* 20 px: lede, h3, botón */
  --text-xl:       clamp(1.5rem, 1.05rem + 1.9vw, 2.25rem);     /* h2 · frase del pie */
  --text-display:  clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);       /* h1 · precio */
  --text-wordmark: 1.625rem;                                    /* logotipo de la píldora y del pie */
  --leading-display: 1.0;  --leading-head: 1.1;  --leading-md: 1.4;  --leading-body: 1.65;
  --tracking-display: -0.025em;  --tracking-head: -0.015em;
  --measure: 65ch;

  /* Espacio: 4 pt */
  --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem;  --space-sm: 0.75rem;
  --space-md:  1rem;     --space-lg:  1.5rem;  --space-xl: 2.5rem;  --space-2xl: 4rem;
  --space-3xl: 6rem;     --space-4xl: 9rem;
  --page-max: 70rem;
  --page-gutter: clamp(1rem, 4vw, 2rem);                        /* 16 px a 320/375 */
  --nav-h: 3.5rem;
  --nav-offset: calc(var(--nav-h) + var(--space-md) * 2);       /* scroll-padding, scroll-margin, raíl fijo */

  /* Radios */
  --radius-chip: 999px;  --radius-btn: 20px;  --radius-card: 22px;  --radius-tray: 28px;  --radius-ui: 8px;

  /* z-index con nombre */
  --z-base: 1;  --z-raised: 10;  --z-sticky: 200;  --z-skip: 400;

  /* Movimiento */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;  --dur-short: 220ms;  --dur-enter: 340ms;  --dur-long: 420ms;   /* entrada del hero ≤ 500 ms en total */
  --stagger: 60ms;  --stagger-text: 40ms;  --stagger-tile: 20ms;

  /* Línea de visión */
  --ray-period: 14px;  --ray-dot: 3.2px;  --ray-h: 12px;

  /* Atmósfera: fichas fantasma que flotan (opacidad baja) y su deriva */
  --ghost-opacity: 0.5;  --drift-y: 14px;
  --ground-sky: 42%;  --ground-gold: 80%;                       /* fuerza de los suelos de luz (se suaviza de noche) */
  --grain: url("/assets/deco/grain.png");
  --disabled-opacity: 0.55;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-paper:       oklch(19.9% 0.040 284);   /* #141327 */
    --color-paper-2:     oklch(16.5% 0.033 285);   /* #0D0C1C bandas hundidas */
    --color-surface:     oklch(25.4% 0.047 284);   /* #201F38 elevación por luz */
    --color-rule:        oklch(30.4% 0.052 284);   /* #2C2B48 */
    --color-ink:         oklch(95.5% 0.008 284);   /* texto: receta oscura, no blanco puro */
    --color-ink-2:       oklch(82.1% 0.031 254);   /* #B7C6D9 · 10.5:1 */
    --color-accent:      oklch(70.5% 0.107 214);   /* #3CB1C8 la línea de visión nocturna de la app · 7.2:1 */
    --color-link:        oklch(79.5% 0.106 254);   /* #8CC0FF · 9.6:1 */
    --color-focus:       oklch(70.5% 0.107 214);
    --color-well:        oklch(55.1% 0.057 170);   /* #4F7D6D */
    --color-well-rim:    oklch(42.9% 0.047 169);   /* #34584B */
    --color-well-edge:   oklch(5% 0.02 284 / 0.2);
    --color-well-wash:   oklch(26% 0.030 170);
    --color-well-soft:   oklch(30% 0.036 170);
    --color-ground-light: oklch(99.4% 0.005 355 / 0.05);
    --color-jelly-hi:    oklch(37.0% 0.044 282);   /* regaliz claro */
    --color-jelly:       oklch(32.0% 0.044 282);
    --color-jelly-lo:    oklch(28.9% 0.045 283);
    --color-jelly-lip:   oklch(16.9% 0.035 282);
    --color-primary:     oklch(99.4% 0.005 355);   /* el principal de noche es leche, como en la app */
    --color-primary-hi:  oklch(99.7% 0.005 355);
    --color-primary-lip: oklch(77.8% 0.027 300);   /* #B9B3C6 */
    --color-on-primary:  oklch(19.8% 0.040 282);
    --color-coral:       oklch(67.0% 0.164 18);
    --color-teal:        oklch(66.5% 0.112 213);
    --color-gold-wash:   oklch(36% 0.060 85);
    --color-gold-soft:   oklch(30% 0.030 72);
    --color-sky-wash:    oklch(30% 0.050 250);
    --color-warn-bg:     oklch(32.0% 0.032 87);
    --color-warn-line:   oklch(52.0% 0.078 90);
    --color-mark-bg:     oklch(36% 0.060 85);
    --color-gold:        oklch(84.0% 0.120 88);
    /* Los compuestos SE REDECLARAN (si no, se quedan con los colores claros) */
    --rim-jelly:     inset 0 1.5px 0 oklch(99.4% 0.005 355 / 0.12), inset 0 -2px 0 oklch(5% 0.02 284 / 0.18);
    --rim-primary:   inset 0 1.5px 0 oklch(99.7% 0.005 355), inset 0 -10px 14px -10px oklch(77.8% 0.027 300 / 0.25);
    --recess:        inset 0 2px 3px oklch(5% 0.02 284 / 0.40), inset 0 -1px 0 oklch(99.4% 0.005 355 / 0.05);
    --shadow-drop-s: 0 7px 10px -7px oklch(5% 0.02 284 / 0.55);
    --shadow-drop-m: 0 10px 16px -8px oklch(5% 0.02 284 / 0.55);
    --shadow-drop-l: 0 14px 22px -10px oklch(5% 0.02 284 / 0.60);
    --shadow-tray:   0 22px 40px -22px oklch(5% 0.02 284 / 0.60);
    --filter-tile:   drop-shadow(0 6px 5px oklch(5% 0.02 284 / 0.45));
    --filter-ticket: drop-shadow(0 10px 9px oklch(5% 0.02 284 / 0.5));
    --ghost-opacity: 0.4;
    --ground-sky: 70%;  --ground-gold: 50%;
    --grain: url("/assets/deco/grain-light.png");
    --weight-body: 370;                               /* luz sobre oscuro pesa más */
  }
}

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("/assets/fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url("/assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ==========================================================================
   1. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-offset); overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font: var(--weight-body) var(--text-base) / var(--leading-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; min-width: 0; font-family: var(--font-display); font-style: normal; font-variation-settings: "SOFT" 100; color: var(--color-ink); text-wrap: balance; overflow-wrap: anywhere; }
h1 { font-size: var(--text-display); font-weight: var(--weight-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-xl); font-weight: var(--weight-head); line-height: var(--leading-head); letter-spacing: var(--tracking-head); }
h3 { font-size: var(--text-md); font-weight: var(--weight-strong); line-height: var(--leading-md); }
p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--space-md); padding-left: var(--space-lg); }
li { margin-bottom: var(--space-2xs); }
strong { font-weight: var(--weight-strong); }
a { color: var(--color-link); text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 2px; }
[aria-disabled="true"], :disabled { opacity: var(--disabled-opacity); cursor: not-allowed; } /* receta única de «no disponible» (la insignia del App Store, mientras no haya ID) */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; } /* aparece al instante: sin transición */
::selection { background: var(--color-sky-wash); color: var(--color-ink); }

.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline-start: max(var(--page-gutter), env(safe-area-inset-left)); padding-inline-end: max(var(--page-gutter), env(safe-area-inset-right)); }
.skip { position: absolute; left: var(--page-gutter); top: -80px; z-index: var(--z-skip); background: var(--color-primary); color: var(--color-on-primary); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-ui); font-weight: var(--weight-strong); text-decoration: none; }
.skip:focus { top: var(--space-sm); }
mark.ph { background: var(--color-mark-bg); color: var(--color-ink); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-ui); font-weight: var(--weight-strong); white-space: nowrap; }

.lead { font-size: var(--text-md); line-height: var(--leading-md); color: var(--color-ink-2); max-width: 38em; }
.note { font-size: var(--text-sm); line-height: var(--leading-md); color: var(--color-ink-2); }
.note .ico { display: inline-block; vertical-align: -0.28em; margin-inline: var(--space-3xs) 0; }
.nowrap { white-space: nowrap; }

/* Iconos Phosphor duotono: trazo = currentColor; la capa trasera se repinta con el lavado de la sección (par «acento + papel» de la gominola) */
.ico { flex: none; }
.ico__bg { opacity: 1; fill: var(--ico-wash, var(--color-well-soft)); }

/* ==========================================================================
   2. Marca
   ========================================================================== */
.wm { display: inline-flex; align-items: baseline; font-family: var(--font-display); font-weight: var(--weight-wordmark); font-variation-settings: "SOFT" 100; letter-spacing: -0.03em; line-height: 1; color: var(--color-ink); }
.wm__o { display: inline-block; width: .6em; height: .6em; border-radius: 50%; border: .17em solid var(--color-coral); box-shadow: 0 .075em 0 var(--color-coral-shade); margin-left: .035em; transform: translateY(.045em); }
.wm__o + .wm__o { border-color: var(--color-teal); box-shadow: 0 .075em 0 var(--color-teal-shade); margin-left: .05em; }
.wm--nav { font-size: var(--text-wordmark); }

/* ==========================================================================
   3. Píldora (N5): gominola de leche opaca, sin blur, despegada de los bordes
   ========================================================================== */
.site-header { position: sticky; top: var(--space-md); z-index: var(--z-sticky); margin-top: var(--space-md); display: flex; justify-content: center; padding-inline: var(--page-gutter); pointer-events: none; }
.pill { pointer-events: auto; display: flex; align-items: center; gap: var(--space-2xs); height: var(--nav-h); max-width: 100%; padding: var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-xs); background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-chip); box-shadow: var(--rim-jelly), var(--shadow-drop-s); }
.brand { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-xs); text-decoration: none; }
.pill__links { display: flex; align-items: center; gap: var(--space-3xs); margin: 0; padding: 0; list-style: none; }
.pill__links li { margin: 0; }
.pill a:not(.brand) { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-sm); border-radius: var(--radius-chip); color: var(--color-ink); font: var(--weight-ui) var(--text-sm) / 1 var(--font-body); text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .pill a:not(.brand):not(.lang):hover { background: var(--color-paper-2); } }
.pill a:not(.brand):not(.lang):active { background: var(--color-paper-2); }
.pill a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--color-accent); }
.pill__mid, .pill__wide { display: none; }
@media (min-width: 25rem) { .pill__mid { display: block; } }
@media (min-width: 60rem) { .pill__wide { display: block; } }
.pill .lang { margin-inline-start: var(--space-2xs); padding-inline: var(--space-md); background: linear-gradient(180deg, var(--color-jelly-hi), var(--color-jelly-lo)); box-shadow: var(--rim-jelly), 0 var(--lip-s) 0 var(--color-jelly-lip); font-weight: var(--weight-strong); letter-spacing: .02em; transition: transform var(--dur-short) var(--ease-out); }
@media (hover: hover) { .pill .lang:hover { transform: translateY(-1px); } }
.pill .lang:active { transform: translateY(calc(var(--lip-s) - 1px)) scale(1.015, .97); box-shadow: var(--rim-jelly), 0 1px 0 var(--color-jelly-lip); transition-duration: var(--dur-micro); }

/* ==========================================================================
   4. Botones y marcador (gominola: filo + canto + una sombra blanda)
   ========================================================================== */
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-md); }
.btn, .btn--milk { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-btn); font: var(--weight-strong) var(--text-md) / 1 var(--font-body); text-decoration: none; white-space: nowrap; transition: transform var(--dur-short) var(--ease-out); }
.btn { background: linear-gradient(180deg, var(--color-primary-hi), var(--color-primary) 62%); color: var(--color-on-primary); box-shadow: var(--rim-primary), 0 var(--lip-l) 0 var(--color-primary-lip), var(--shadow-drop-l); }
.btn--milk { background: linear-gradient(180deg, var(--color-jelly-hi), var(--color-jelly-lo)); color: var(--color-ink); box-shadow: var(--rim-jelly), 0 var(--lip-m) 0 var(--color-jelly-lip), var(--shadow-drop-m); }
@media (hover: hover) { .btn:hover, .btn--milk:hover { transform: translateY(-1px); } }
.btn:active { transform: translateY(calc(var(--lip-l) - 1px)) scale(1.015, .97); box-shadow: var(--rim-primary), 0 1px 0 var(--color-primary-lip), var(--shadow-drop-l); transition-duration: var(--dur-micro); }
.btn--milk:active { transform: translateY(calc(var(--lip-m) - 1px)) scale(1.015, .97); box-shadow: var(--rim-jelly), 0 1px 0 var(--color-jelly-lip), var(--shadow-drop-m); transition-duration: var(--dur-micro); }
.btn--milk { margin-bottom: 0; }
/* «Próximamente»: el anillo discontinuo de la gemela destino. Es un span: no se pulsa. Cuando exista el ID de la app, la insignia oficial de Apple lo sustituye. */
.chip--soon { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 2px dashed var(--color-accent); border-radius: var(--radius-chip); color: var(--color-ink-2); font: var(--weight-ui) var(--text-sm) / 1 var(--font-body); white-space: nowrap; cursor: default; user-select: none; }

/* ==========================================================================
   5. Fichas, tablero y línea de visión (el arte «Gominola brillante» del juego)
   ========================================================================== */
.tile { position: relative; display: grid; place-items: center; aspect-ratio: 162 / 192; background: url("/assets/game/tile.png") center / 100% 100% no-repeat; filter: var(--filter-tile); }
.tile img { width: 60%; height: auto; margin-top: -9%; }
.tile--stone { background-image: url("/assets/game/stone.png"); }
.tile--sel::after, .tile--tgt::after { content: ""; position: absolute; inset: 1% -2% 0 -2%; border-radius: 16%; pointer-events: none; }
.tile--sel::after { border: 3px solid var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-glow); }
.tile--tgt::after { border: 3px dashed var(--color-accent); }
.ray { display: block; width: 100%; height: var(--ray-h); background: radial-gradient(circle, var(--color-accent) 0 var(--ray-dot), transparent calc(var(--ray-dot) + .6px)) left center / var(--ray-period) var(--ray-h) repeat-x; }
@media (prefers-reduced-motion: no-preference) { .ray--live { animation: march 1.2s linear 4; } } /* 4 ciclos y reposo: el único bucle del sitio */
@keyframes march { to { background-position: var(--ray-period) center; } }
.span, .span2, .raycell, .arrowcell { display: grid; align-items: center; align-content: center; }
.arrowcell { color: var(--color-accent); }

.board { display: grid; gap: var(--space-xs); padding: var(--space-sm); border-radius: var(--radius-tray); background: var(--color-well); box-shadow: inset 0 0 0 3px var(--color-well-rim), inset 0 0 0 5px var(--color-well-edge), var(--shadow-tray); }
.board--hero { --lift: clamp(4px, 1vw, 9px); grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(var(--space-xs), 1.6vw, var(--space-sm)); padding: clamp(var(--space-sm), 2.6vw, var(--space-md)); }
.board--hero .span { grid-column: span 3; }
.board--hero .span .ray { transform: translateY(calc(-1 * var(--lift))); }
.board--mini { --lift: 5px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); padding: var(--space-xs); border-radius: 20px; max-width: 300px; width: 100%; margin-inline: auto; }
.board--mini .span2 { grid-column: span 2; }
.board--mini .span2 .ray, .board--mini .raycell .ray, .board--mini .arrowcell svg { transform: translateY(calc(-1 * var(--lift))); }
/* viñetas de la campaña */
.board--stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stack { position: relative; display: block; }
.stack .tile:last-child { position: absolute; inset: 0; transform: translate(13%, -9%); }
.board--belt { grid-template-columns: 4.5rem 2.5rem; max-width: 9rem; }
.board--belt .tile { grid-column: 1; }
/* la flecha de la cinta recorre las tres fichas: eje que se estira + cabeza */
.belt__arrow { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: center; padding-block: var(--space-xs); color: var(--color-accent); }
.belt__arrow i { flex: 1; width: 4px; border-radius: var(--radius-chip); background: currentColor; }
.belt__arrow svg { width: 24px; height: 14px; margin-top: calc(-1 * var(--space-2xs)); }

/* la pareja unida por la línea de visión (quieta) */
.pair { --lift: 6px; padding-inline: var(--space-xs); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs); width: min(100%, 24rem); }
.pair .tile { width: 6rem; }
.pair .ray { transform: translateY(calc(-1 * var(--lift))); }
.pair--mini { --lift: 3px; width: min(100%, 12rem); }
.pair--mini .tile { width: 40px; }
.pair--final .tile { width: 6.5rem; }
.pair--cut { width: min(100%, 20rem); }
.pair--cut .ray { width: 55%; }

/* ==========================================================================
   6. Atmósfera: una sola materia (charcos de gominola que toman el tono de su sección), suelo de luz, ondas, grano y fichas fantasma
   ========================================================================== */
.puddle { position: relative; isolation: isolate; padding: var(--space-lg); --puddle: var(--ico-wash, var(--color-well-soft)); }
.puddle::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--puddle); -webkit-mask: var(--puddle-shape, url("/assets/deco/puddle-board.svg")) center / 100% 100% no-repeat; mask: var(--puddle-shape, url("/assets/deco/puddle-board.svg")) center / 100% 100% no-repeat; }
.puddle--board { --puddle-shape: url("/assets/deco/puddle-board.svg"); }
.puddle--tall { --puddle-shape: url("/assets/deco/puddle-tall.svg"); padding: var(--space-xl) var(--space-lg); }
@media (min-width: 40rem) { .puddle--tall { padding-inline: var(--space-2xl); } }
.puddle--round { --puddle-shape: url("/assets/deco/puddle-round.svg"); --puddle: var(--color-gold-soft); padding: var(--space-xl); }

.band, .site-footer { position: relative; background: var(--grain) 0 0 / 128px 128px, var(--color-paper-2); }
.band::before, .band::after, .site-footer::before { content: ""; position: absolute; left: 0; right: 0; height: 24px; background: var(--grain) 0 0 / 128px 128px, var(--color-paper-2); -webkit-mask: url("/assets/deco/wave.svg") repeat-x center bottom / 120px 24px; mask: url("/assets/deco/wave.svg") repeat-x center bottom / 120px 24px; pointer-events: none; }
.band::before, .site-footer::before { top: -23px; }
.band::after { bottom: -23px; transform: scaleY(-1); }

/* Suelo de luz: la receta del hero (grano + dos radiales) continúa, más callada, detrás de cada sección con prueba. Se funde con el papel arriba y abajo. */
.steps-sec, .league, .free, .final { position: relative; isolation: isolate; }
.steps-sec::before, .league::before, .free::before, .final::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  -webkit-mask: linear-gradient(to bottom, transparent, var(--color-ink) 24%, var(--color-ink) 76%, transparent); mask: linear-gradient(to bottom, transparent, var(--color-ink) 24%, var(--color-ink) 76%, transparent); }
.steps-sec::before { background: var(--grain) 0 0 / 128px 128px, radial-gradient(ellipse 46% 52% at 100% 42%, var(--color-well-wash), transparent), radial-gradient(ellipse 40% 36% at 0% 6%, var(--color-ground-light), transparent); }
.league::before { background: var(--grain) 0 0 / 128px 128px, radial-gradient(ellipse 52% 50% at 90% 12%, var(--color-ground-light), transparent), radial-gradient(ellipse 60% 70% at 78% 78%, color-mix(in oklab, var(--color-sky-wash) var(--ground-sky), transparent), transparent); }
.free::before { background: var(--grain) 0 0 / 128px 128px, radial-gradient(ellipse 54% 64% at 6% 70%, color-mix(in oklab, var(--color-gold-soft) var(--ground-gold), transparent), transparent), radial-gradient(ellipse 44% 44% at 100% 8%, var(--color-ground-light), transparent); }
.final::before { background: var(--grain) 0 0 / 128px 128px, radial-gradient(ellipse 58% 90% at 88% 70%, var(--color-well-wash), transparent), radial-gradient(ellipse 40% 60% at 4% 0%, var(--color-ground-light), transparent); }

/* Fichas fantasma: las del juego, a opacidad baja, a la deriva. aria-hidden. Solo transform y opacity; 4 vaivenes y reposo; nada si pides menos movimiento. */
.drift { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.drift .tile { position: absolute; width: 2.75rem; opacity: var(--ghost-opacity); transform: rotate(var(--r, 0deg)); }
.drift .tile:nth-child(1) { top: 2%; left: var(--space-xs); --r: -9deg; --d: 0s; --t: 9s; }
.drift .tile:nth-child(2) { top: 31%; right: var(--space-xs); --r: 8deg; --d: -3s; --t: 11s; }
.drift .tile:nth-child(3) { top: 66%; left: var(--space-sm); --r: 6deg; --d: -5s; --t: 10s; }
.drift .tile:nth-child(4) { top: 90%; right: var(--space-md); --r: -7deg; --d: -1s; --t: 12s; }
@media (min-width: 60rem) { .drift .tile { width: 3.5rem; } .drift .tile:nth-child(1), .drift .tile:nth-child(3) { left: -4%; } .drift .tile:nth-child(2) { right: -3%; } }
/* detrás del cierre: solo en escritorio, en el hueco entre el texto y la pareja (en móvil taparían el texto) */
.final .drift { display: none; }
@media (min-width: 60rem) {
  .final .drift { display: block; }
  .final .drift .tile:nth-child(1) { top: 0; left: auto; right: 40%; }
  .final .drift .tile:nth-child(2) { top: 36%; right: -4%; }
  .final .drift .tile:nth-child(3) { top: 72%; left: auto; right: 46%; }
}
@keyframes drift { to { transform: translateY(calc(-1 * var(--drift-y))) rotate(calc(var(--r, 0deg) + 5deg)); } }
@media (prefers-reduced-motion: no-preference) { .drift .tile { animation: drift var(--t, 10s) var(--ease-in-out) var(--d, 0s) 4 alternate both; } }

/* Destello propio (deco/sparkle.svg): solo donde se encuentra una pareja. El del hero salta cuando termina el rayo (4 × 1,2 s). */
.hero .tile--tgt::before, .final .tile--tgt::before { content: ""; position: absolute; z-index: 2; top: -30%; right: -34%; width: 68%; aspect-ratio: 1; background: var(--color-spark); pointer-events: none;
  -webkit-mask: url("/assets/deco/sparkle.svg") center / contain no-repeat; mask: url("/assets/deco/sparkle.svg") center / contain no-repeat; }
.final .tile--tgt::before { top: -26%; right: -18%; width: 56%; background: var(--color-gold); }
.final .pair { padding-inline-end: var(--space-lg); } /* sitio para el destello dentro del ancho */
@keyframes spark-pop { from { opacity: 0; transform: scale(.3) rotate(-24deg); } 62% { transform: scale(1.18) rotate(8deg); } }
@media (prefers-reduced-motion: no-preference) { .hero .tile--tgt::before { animation: spark-pop 560ms var(--ease-out) 4.8s both; } }

/* ==========================================================================
   7. Portada
   ========================================================================== */
.sec-head { max-width: 40rem; margin-bottom: var(--space-xl); }
.sec-head p { margin-top: var(--space-sm); color: var(--color-ink-2); }

/* Hero: suelo E7 (2 paradas + grano) y la única luz, arriba a la izquierda. Móvil: el juego se ve en la primera pantalla. */
.hero { position: relative; isolation: isolate; padding-block: var(--space-md) var(--space-xl); }
@media (min-width: 40rem) { .hero { padding-block: var(--space-lg) var(--space-xl); } }
.hero::before { content: ""; position: absolute; z-index: -1; inset: calc(-1 * (var(--nav-h) + var(--space-md) * 2)) 0 0 0;
  background: var(--grain) 0 0 / 128px 128px, radial-gradient(ellipse 60% 50% at 6% 0%, var(--color-ground-light), transparent), radial-gradient(ellipse 80% 62% at 74% 30%, var(--color-well-wash), var(--color-paper));
  -webkit-mask: linear-gradient(to bottom, var(--color-ink) 70%, transparent); mask: linear-gradient(to bottom, var(--color-ink) 70%, transparent); } /* el suelo se funde con el papel: sin canto de textura abajo */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "tag" "proof" "lead" "cta" "note"; }
.hero__title { grid-area: title; }
.tagline { grid-area: tag; min-width: 0; overflow-wrap: anywhere; margin: var(--space-xs) 0 0; font: var(--weight-head) var(--text-xl) / var(--leading-head) var(--font-display); font-variation-settings: "SOFT" 100; letter-spacing: var(--tracking-head); color: var(--color-ink-2); text-wrap: balance; }
.hero__proof { grid-area: proof; margin: var(--space-sm) 0; width: 100%; max-width: 20rem; margin-inline: auto; }
@media (max-width: 23.99rem) { .hero__proof { max-width: 16.5rem; } } /* 320 px: el botón principal también cae sobre el pliegue */
@media (min-width: 40rem) { .hero__proof { max-width: 35rem; } }
.hero .lead { grid-area: lead; margin-top: var(--space-xs); }
.hero .hero__cta { grid-area: cta; margin-top: var(--space-md); }
.hero .note { grid-area: note; margin-top: var(--space-md); }
.tray { position: relative; isolation: isolate; padding: var(--space-md) var(--space-sm); }
@media (min-width: 40rem) { .tray { padding: var(--space-xl) var(--space-lg); } }
/* halo de gominola: un cónico pastel (cielo · menta · oro) que asoma por detrás del charco, sin llegar a los bordes de la pantalla */
.tray::after { content: ""; position: absolute; inset: -28% -4%; z-index: -2; pointer-events: none; background: conic-gradient(from 210deg at 50% 50%, var(--color-sky-wash), var(--color-well-soft), var(--color-gold-soft), var(--color-sky-wash)); -webkit-mask: radial-gradient(closest-side, var(--color-ink) 52%, transparent); mask: radial-gradient(closest-side, var(--color-ink) 52%, transparent); }
.tray::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-well-soft); -webkit-mask: url("/assets/deco/puddle-board.svg") center / 100% 100% no-repeat; mask: url("/assets/deco/puddle-board.svg") center / 100% 100% no-repeat; }
@media (min-width: 60rem) {
  .hero { padding-block: var(--space-xl) var(--space-2xl); }
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: repeat(4, auto) minmax(0, 1fr); grid-template-areas: "title proof" "tag proof" "lead proof" "cta proof" "note proof"; column-gap: var(--space-2xl); align-items: start; }
  .hero__proof { align-self: center; margin-block: 0; margin-inline: 0 auto; }
  .hero .lead { margin-top: var(--space-lg); }
  .hero .hero__cta { margin-top: var(--space-lg); }
}

/* Entrada del hero: una sola orquestación al cargar (≤ 500 ms). Sin revelaciones al hacer scroll en todo el sitio. */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__grid > .hero__title, .hero__grid > .tagline, .hero__grid > .lead, .hero__grid > .hero__cta, .hero__grid > .note { animation: rise var(--dur-enter) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger-text)); }
  .hero__grid > .tagline { --i: 1; } .hero__grid > .lead { --i: 2; } .hero__grid > .hero__cta { --i: 3; } .hero__grid > .note { --i: 4; }
  .board--hero > .tile { animation: drop-in var(--dur-short) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger-tile)); }
  .board--hero > :nth-child(2) { --i: 1; } .board--hero > :nth-child(3) { --i: 2; } .board--hero > :nth-child(4) { --i: 3; } .board--hero > :nth-child(5) { --i: 4; } .board--hero > :nth-child(6) { --i: 5; }
  .board--hero > :nth-child(7) { --i: 6; } .board--hero > :nth-child(8) { --i: 7; } .board--hero > :nth-child(9) { --i: 8; } .board--hero > :nth-child(10) { --i: 9; } .board--hero > :nth-child(11) { --i: 10; } .board--hero > :nth-child(12) { --i: 11; } .board--hero > :nth-child(13) { --i: 12; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__grid > .hero__title, .hero__grid > .tagline, .hero__grid > .lead, .hero__grid > .hero__cta, .hero__grid > .note, .board--hero > .tile { animation: fade 150ms var(--ease-out) both; }
}

/* Cómo se juega: tres filas en zigzag, sin caja. El tablero es la única contención. */
.steps-sec { padding-block: var(--space-2xl); }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xl); }
.step { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); align-items: center; }
.step .board--mini { margin-inline: 0; }
.step__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); margin-bottom: var(--space-xs); }
.step p { margin: 0; color: var(--color-ink-2); max-width: 34em; }
.disc { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(180deg, var(--color-primary-hi), var(--color-primary)); color: var(--color-on-primary); box-shadow: var(--rim-primary); font: var(--weight-head) var(--text-base) / 1 var(--font-display); }
.disc .ico__bg { fill: var(--color-primary-hi); }
@media (min-width: 40rem) {
  .steps-sec { padding-block: var(--space-3xl); }
  .steps { gap: var(--space-2xl); }
  .step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); }
  .step:nth-child(even) .board--mini { order: 2; margin-inline: auto 0; }
}
/* La pantalla real del juego (sin marco de dispositivo) ocupa la columna que quedaba vacía; las fichas fantasma derivan alrededor. */
.steps-aside { position: relative; margin-top: var(--space-xl); }
.screen { margin: 0 auto; width: min(100%, 15rem); }
.screen img { width: 100%; height: auto; border-radius: var(--radius-tray); box-shadow: var(--shadow-tray); }
.screen figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); line-height: var(--leading-md); color: var(--color-ink-2); text-align: center; text-wrap: balance; }
@media (min-width: 60rem) {
  .steps-sec .wrap { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-areas: "head aside" "list aside"; column-gap: var(--space-2xl); align-items: start; }
  .steps-sec .sec-head { grid-area: head; }
  .steps-sec .steps { grid-area: list; }
  .steps-aside { grid-area: aside; margin-top: var(--space-md); align-self: stretch; }
  .screen { width: min(100%, 17rem); }
  .step { column-gap: var(--space-xl); }
  .step:nth-child(even) .board--mini { order: 0; margin-inline: 0; }
}

/* Lo que te espera: banda con grano y ondas. Afirmación (lista sin tarjetas) | prueba (viñetas de la campaña) */
.diptych { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
@media (min-width: 60rem) {
  .diptych { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl); }
  .diptych--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .diptych--flip > .diptych__claim { order: 2; }
}
.band--features { padding-block: var(--space-2xl); margin-block: var(--space-xl); --ico-wash: var(--color-sky-wash); }
@media (min-width: 60rem) { .band--features .diptych { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.band--features .sec-head { margin-bottom: var(--space-lg); }
.features { list-style: none; margin: 0; padding: 0; display: grid; column-gap: var(--space-xl); }
@media (min-width: 40rem) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.features li { margin: 0; padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.features h3 { display: flex; align-items: flex-start; gap: var(--space-xs); margin-bottom: var(--space-2xs); }
.features h3 .ico { margin-top: var(--space-3xs); color: var(--color-link); }
.features p { margin: 0; color: var(--color-ink-2); }
.mechanics { margin: 0; display: grid; gap: var(--space-md); padding-inline: var(--space-xl); }
.mech { display: grid; gap: var(--space-2xs); }
.mech__label { margin: 0; font: var(--weight-strong) var(--text-sm) / var(--leading-md) var(--font-body); color: var(--color-ink); text-align: center; }
.mechanics figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); line-height: var(--leading-md); color: var(--color-ink-2); text-align: center; }
@media (min-width: 40rem) and (max-width: 59.99rem) { .mechanics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mechanics figcaption { grid-column: 1 / -1; } }
@media (min-width: 60rem) { .mechanics { position: sticky; top: var(--nav-offset); align-self: start; } }

/* Liga: prueba (escalera) | afirmación */
.league { padding-block: var(--space-2xl); }
@media (min-width: 40rem) { .league { padding-block: var(--space-3xl); } }
.facts { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-md); }
.facts li { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: start; }
.facts .ico { margin-top: var(--space-3xs); }
.league { --ico-wash: var(--color-sky-wash); }
.facts--gold, .free { --ico-wash: var(--color-gold-wash); }
.league .note { margin-top: var(--space-lg); }
.league .lead { margin-top: var(--space-sm); }
.ladder { margin: 0; --step: var(--space-xs); }
.ladder figcaption { margin-bottom: var(--space-sm); font: var(--weight-strong) var(--text-sm) / var(--leading-md) var(--font-body); color: var(--color-ink-2); }
.ladder figcaption { text-align: center; }
.ladder .note { max-width: 28ch; margin: 0 auto; text-align: center; }
.ladder__steps { display: flex; flex-direction: column-reverse; gap: var(--space-xs); width: max-content; max-width: 100%; margin: 0 auto var(--space-md); padding: 0; list-style: none; }
.ladder__steps li { align-self: flex-start; margin: 0; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-chip); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--recess); font: var(--weight-strong) var(--text-sm) / var(--leading-md) var(--font-body); white-space: nowrap; } /* solo se lee: sin canto ni sombra (el canto es de lo que se pulsa) */
.ladder__steps li:nth-child(2) { margin-inline-start: var(--step); }
.ladder__steps li:nth-child(3) { margin-inline-start: calc(var(--step) * 2); }
.ladder__steps li:nth-child(4) { margin-inline-start: calc(var(--step) * 3); }
.ladder__steps li:nth-child(5) { margin-inline-start: calc(var(--step) * 4); }
.ladder__steps li:nth-child(6) { margin-inline-start: calc(var(--step) * 5); }
.ladder__steps li:nth-child(7) { margin-inline-start: calc(var(--step) * 6); background: var(--color-gold-wash); }
@media (min-width: 40rem) { .ladder { --step: var(--space-md); } }

/* Gratis: afirmación | ticket plano (se lee, no se pulsa) con muescas por máscara */
.free { padding-block: var(--space-2xl); }
.free h2 { margin-bottom: var(--space-xs); }
.ticket { display: grid; width: 100%; max-width: 22rem; margin-inline: auto; filter: var(--filter-ticket); }
.ticket__main, .ticket__stub { position: relative; padding: var(--space-lg); background: var(--color-surface); }
.ticket__main { border-radius: var(--radius-card) var(--radius-card) 0 0;
  -webkit-mask: radial-gradient(circle at 0 100%, transparent 12px, var(--color-ink) 12.5px) left bottom / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent 12px, var(--color-ink) 12.5px) right bottom / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 100%, transparent 12px, var(--color-ink) 12.5px) left bottom / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent 12px, var(--color-ink) 12.5px) right bottom / 51% 100% no-repeat; }
.ticket__main::after { content: ""; position: absolute; left: var(--space-lg); right: var(--space-lg); bottom: 0; border-top: 2px dashed var(--color-rule); }
.ticket__stub { border-radius: 0 0 var(--radius-card) var(--radius-card); padding-top: var(--space-lg);
  -webkit-mask: radial-gradient(circle at 0 0, transparent 12px, var(--color-ink) 12.5px) left top / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent 12px, var(--color-ink) 12.5px) right top / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 0, transparent 12px, var(--color-ink) 12.5px) left top / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent 12px, var(--color-ink) 12.5px) right top / 51% 100% no-repeat; }
.ticket__label { margin: 0; font: var(--weight-strong) var(--text-sm) / var(--leading-md) var(--font-body); color: var(--color-ink-2); }
.price { min-width: 0; overflow-wrap: anywhere; margin: var(--space-2xs) 0 var(--space-md); font: var(--weight-display) var(--text-display) / 1 var(--font-display); font-variation-settings: "SOFT" 100; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.price small { display: block; margin-top: var(--space-xs); font: var(--weight-body) var(--text-sm) / var(--leading-md) var(--font-body); letter-spacing: 0; color: var(--color-ink-2); }
.ticket__stub .note { margin-top: var(--space-sm); }

/* Privacidad: la ruptura deliberada del díptico (texto | texto), en banda */
.band--statement { padding-block: var(--space-2xl) var(--space-2xl); margin-block: var(--space-xl); }
@media (min-width: 40rem) { .band--statement { padding-block: var(--space-3xl) var(--space-2xl); } }
.statement { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.statement__head { display: flex; align-items: flex-start; gap: var(--space-sm); --ico-wash: var(--color-sky-wash); }
.statement__head .ico { margin-top: var(--space-2xs); }
.statement__body p { font-size: var(--text-md); line-height: var(--leading-md); margin-bottom: var(--space-lg); }
.band--statement .hero__cta { margin-top: 0; }
@media (min-width: 60rem) { .statement { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: start; } }

/* Cierre: espeja el hero. Alineado a la izquierda, con la pareja ya unida. */
.final { padding-block: var(--space-xl); }
.final .wrap { position: relative; }
.final__text h2 { margin-bottom: var(--space-lg); }
.final .pair { justify-self: start; }
@media (min-width: 60rem) { .final .pair { justify-self: end; } }

/* ==========================================================================
   8. Pie (Ft5): una sentencia con la línea de visión; el resto, en pequeño
   ========================================================================== */
.site-footer { margin-top: var(--space-3xl); padding-block: var(--space-2xl) var(--space-xl); padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom)); }
.foot__close { display: grid; gap: var(--space-md); justify-items: start; }
.foot__statement { margin: 0; min-width: 0; overflow-wrap: anywhere; max-width: 20ch; font: var(--weight-display) var(--text-xl) / var(--leading-head) var(--font-display); font-variation-settings: "SOFT" 100; letter-spacing: var(--tracking-head); text-wrap: balance; }
.foot__meta { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); display: grid; gap: var(--space-lg); }
.foot__brand p { margin: var(--space-sm) 0 0; max-width: 36ch; font-size: var(--text-sm); line-height: var(--leading-md); color: var(--color-ink-2); }
.foot h2 { margin: 0 0 var(--space-2xs); font: var(--weight-strong) var(--text-sm) / var(--leading-md) var(--font-body); letter-spacing: 0; color: var(--color-ink-2); }
.foot ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); margin: 0; padding: 0; list-style: none; }
.foot li { margin: 0; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); font-weight: var(--weight-medium); white-space: nowrap; text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot a:active { color: var(--color-link); }
.foot__legal { margin: 0; max-width: var(--measure); font-size: var(--text-sm); line-height: var(--leading-md); color: var(--color-ink-2); }
/* enlaces sobre las bandas con grano: tinta (el azul de enlace bajaba de 4,5:1 sobre el grano); siguen subrayados */
.site-footer a:not(.btn):not(.btn--milk), .band a:not(.btn):not(.btn--milk) { color: var(--color-ink); }
/* en la portada el cierre es la sección final: el pie no repite el motivo */
.site-footer--home { margin-top: var(--space-xl); padding-top: var(--space-xl); }
.site-footer--home .foot__meta { margin-top: 0; padding-top: 0; border-top: 0; }
@media (min-width: 60rem) {
  .foot__meta { grid-template-columns: minmax(0, 1fr) max-content minmax(0, 22rem); column-gap: var(--space-xl); align-items: start; }
  .foot__legal { grid-column: 1 / -1; padding-top: var(--space-md); }
}

/* ==========================================================================
   9. Documentos: columna de lectura de 65ch + raíl con el índice fijo. Calma: sin grano, ondas ni fichas.
   ========================================================================== */
.page-head { padding-block: var(--space-xl) var(--space-md); }
.page-head h1 { max-width: 16ch; }
.page-head .lead { margin-top: var(--space-md); max-width: 60ch; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); margin: var(--space-md) 0 0; font-size: var(--text-sm); line-height: var(--leading-md); color: var(--color-ink-2); }
.meta__app { width: 24px; height: 24px; border-radius: 22%; }
.meta__app-name { margin-inline-end: auto; }
.meta__date { flex-basis: 100%; }

.doc { display: grid; grid-template-columns: minmax(0, 1fr); max-width: var(--page-max); margin-inline: auto; padding-inline-start: max(var(--page-gutter), env(safe-area-inset-left)); padding-inline-end: max(var(--page-gutter), env(safe-area-inset-right)); }
.doc > section, .doc > .summary { margin-top: var(--space-xl); }
.doc > section:first-of-type { margin-top: var(--space-lg); }
.doc > section.summary { margin-top: var(--space-xl); }
.doc > .doc__rail + section { margin-top: var(--space-lg); }
.doc h2 { margin-bottom: var(--space-md); scroll-margin-top: var(--nav-offset); }
.doc section[id] { scroll-margin-top: var(--nav-offset); }
.doc h3 { margin: var(--space-lg) 0 var(--space-xs); }
.doc p, .doc li { max-width: var(--measure); }
.doc ul, .doc ol { color: var(--color-ink); }
/* el apartado al que saltas lleva debajo la línea de visión, quieta */
.doc section:target > h2::after, .doc section:target > .option__head::after { content: ""; display: block; height: var(--ray-h); margin-top: var(--space-xs); border-radius: var(--radius-chip); background: radial-gradient(circle, var(--color-accent) 0 var(--ray-dot), transparent calc(var(--ray-dot) + .6px)) left center / var(--ray-period) var(--ray-h) repeat-x, var(--color-sky-wash); }
@media (min-width: 60rem) {
  .doc { grid-template-columns: minmax(0, var(--measure)) minmax(0, 16rem); column-gap: var(--space-2xl); justify-content: start; }
  .doc > * { grid-column: 1; }
  .doc > .doc__rail { grid-column: 2; grid-row: 1 / span 40; margin-top: var(--space-lg); }
  .doc--support { grid-template-columns: minmax(0, var(--measure)) minmax(0, 18rem); }
}
.doc__rail { align-self: stretch; }
.toc { margin: var(--space-lg) 0 0; }
.toc h2 { margin: 0 0 var(--space-xs); font: var(--weight-strong) var(--text-sm) / var(--leading-md) var(--font-body); letter-spacing: 0; color: var(--color-ink-2); }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc li { margin: 0; max-width: none; }
.toc a { display: flex; align-items: center; min-height: 44px; color: var(--color-ink-2); font: var(--weight-medium) var(--text-sm) / var(--leading-md) var(--font-body); white-space: nowrap; text-decoration: none; }
.toc a:hover, .toc a:active { color: var(--color-link); }
.toc__top { gap: var(--space-xs); margin-top: var(--space-xs); font-weight: var(--weight-ui); }
.doc__top { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; margin-top: var(--space-xl); color: var(--color-link); font-weight: var(--weight-ui); }
.doc__top:active { color: var(--color-ink); }
@media (min-width: 60rem) {
  .doc__top { display: none; }
  .toc { position: sticky; top: var(--nav-offset); margin: 0; padding-inline-start: var(--space-md); border-inline-start: 1px solid var(--color-rule); }
  .toc a { min-height: 36px; }
}
@media (pointer: coarse) { .toc a { min-height: 44px; } }
@media (max-width: 59.99rem) { .toc .toc__top { display: none; } }

.summary { padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); --ico-wash: var(--color-sky-wash); }
.summary h2 { margin: 0 0 var(--space-sm); font-size: var(--text-md); line-height: var(--leading-md); letter-spacing: 0; }
.summary ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); }
.summary li { margin: 0; max-width: none; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: start; }
.summary .ico { margin-top: var(--space-3xs); }

.callout { margin: var(--space-lg) 0; padding: var(--space-md); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: start; border: 1.5px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); --ico-wash: var(--color-sky-wash); }
.callout .ico { margin-top: var(--space-3xs); }
.callout p { margin: 0; max-width: none; }
.ui { display: inline; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-ui); background: var(--color-paper-2); box-shadow: var(--recess); font-weight: var(--weight-strong); color: var(--color-ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* §2 de privacidad: bloques apilados (antes, tarjetas) */
.blocks { margin: var(--space-lg) 0; }
.block { padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.block h3 { margin: 0 0 var(--space-sm); }
.block dl { margin: 0; display: grid; gap: var(--space-2xs) var(--space-lg); }
.block dt { font: var(--weight-strong) var(--text-sm) / var(--leading-md) var(--font-body); color: var(--color-ink-2); }
.block dd { margin: 0; max-width: none; }
.block dd + dt { margin-top: var(--space-xs); }
@media (min-width: 40rem) {
  .block dl { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-xs) var(--space-lg); }
  .block dd + dt { margin-top: 0; }
}

table { width: 100%; border-collapse: collapse; margin: var(--space-md) 0; font-size: var(--text-base); font-variant-numeric: tabular-nums; }
th, td { text-align: left; vertical-align: top; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-rule); }
th { font: var(--weight-strong) var(--text-sm) / var(--leading-md) var(--font-body); color: var(--color-ink-2); background: var(--color-paper-2); }
th:first-child { border-top-left-radius: var(--radius-ui); } th:last-child { border-top-right-radius: var(--radius-ui); }
td:first-child { width: 46%; font-weight: var(--weight-ui); }
table.kv td:first-child { width: 34%; font-weight: var(--weight-strong); }
@media (max-width: 39.99rem) {
  table, tbody, tr, td { display: block; width: 100%; }
  thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  tr { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
  td, td:first-child, table.kv td:first-child { width: 100%; padding: var(--space-3xs) 0; border: 0; }
  td:first-child { font-weight: var(--weight-strong); }
}

/* Borrar cuenta: filas de opción (F4) con disco de regaliz */
.option { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); --ico-wash: var(--color-primary-hi); }
.doc > .option { margin-top: var(--space-xl); }
.option .disc { grid-row: 1; margin-bottom: var(--space-sm); }
.option h2 { grid-row: 2; margin: 0; }
.option__body { grid-row: 3; margin-top: var(--space-md); }
.path { margin: 0 0 var(--space-md); }
.path h3 { margin-top: 0; }
.path ol { margin-bottom: var(--space-sm); }
.path ol li::marker { font-weight: var(--weight-strong); color: var(--color-ink-2); }

/* Soporte: tarjeta de contacto en el raíl + preguntas frecuentes en gominola de leche */
.contact { padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); --ico-wash: var(--color-sky-wash); }
.contact > .ico { margin-bottom: var(--space-xs); }
.contact__label { margin: 0 0 var(--space-3xs); font-weight: var(--weight-strong); color: var(--color-ink-2); }
.contact__mail { margin: 0 0 var(--space-md); font: var(--weight-head) var(--text-md) / var(--leading-md) var(--font-display); font-variation-settings: "SOFT" 100; overflow-wrap: anywhere; }
.contact ul { margin: 0; padding-left: var(--space-lg); color: var(--color-ink-2); }
.contact li { max-width: none; }
.faq { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.faq details { margin: 0; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 52px; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: linear-gradient(180deg, var(--color-jelly-hi), var(--color-jelly-lo)); color: var(--color-ink); box-shadow: var(--rim-jelly), 0 var(--lip-s) 0 var(--color-jelly-lip), var(--shadow-drop-s); font: var(--weight-strong) var(--text-base) / var(--leading-md) var(--font-body); cursor: pointer; list-style: none; transition: transform var(--dur-short) var(--ease-out); }
.faq summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .faq summary:hover { transform: translateY(-1px); } }
.faq summary:active { transform: translateY(calc(var(--lip-s) - 1px)) scale(1.015, .97); box-shadow: var(--rim-jelly), 0 1px 0 var(--color-jelly-lip); transition-duration: var(--dur-micro); }
.faq summary .ico { transition: transform var(--dur-short) var(--ease-in-out); }
.faq details[open] summary .ico { transform: rotate(180deg); }
.faq .answer { padding: var(--space-md) var(--space-xs) var(--space-xs); }
.faq .answer p, .faq .answer ol, .faq .answer ul { max-width: var(--measure); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn--milk, .pill .lang, .faq summary { transition: none; }
  .btn:hover, .btn--milk:hover, .pill .lang:hover, .faq summary:hover { transform: none; }
  .btn:active, .btn--milk:active, .pill .lang:active, .faq summary:active { transform: translateY(calc(var(--lip-m) - 1px)); }
  .faq summary .ico { transition: none; }
}

/* Colores forzados (Windows Alto contraste): sin gradientes ni sombras, el borde lo da el sistema */
@media (forced-colors: active) {
  .btn, .btn--milk, .pill, .pill .lang, .chip, .faq summary, .summary, .contact { border: 1px solid CanvasText; }
  .ray { background: none; border-top: 2px dotted CanvasText; }
}

/* 404 */
.e404 { padding-block: var(--space-2xl) var(--space-xl); }
.e404 .wrap { display: grid; justify-items: start; gap: var(--space-lg); }
.e404 .lead { margin: 0; }

@media print {
  .site-header, .site-footer, .skip, .doc__rail, .doc__top { display: none; }
  body { background: var(--color-surface); color: var(--color-ink); }
}