/* ───────────────────────────────────────────────
   Tyr · «Tu saga» — landing del Modo Guerrero
   Tokens exactos de Tyr/docs/DESIGN.md §1 (bruma nórdica / noche nórdica).
   Marcellus (display) + Inter (cuerpo) + Press Start 2P (SOLO cifras, D13).
   ─────────────────────────────────────────────── */

:root{
  --bg:#E9EFF4;
  --bg-deep:#DCE6EE;
  --surface:#F4F8FB;
  --surface-2:#FFFFFF;
  --surface-hi:#F2F7FB;
  --ink:#1C2A38;
  --ink-soft:#36495A;
  --ink-muted:#5E7080;
  --ink-faint:#98A8B6;
  --primary:#2C4B6F;
  --on-primary:#F2F6FA;
  --primary-deep:#20384F;
  --primary-container:#D3E0EC;
  --on-primary-container:#1B3149;
  --accent:#C68A52;
  --accent-ink:#5A3A18; /* texto/foco ámbar: --accent solo como color decorativo/fill, NUNCA como texto (2,53:1) */
  --accent-container:#F4E2CE;
  --on-accent-container:#5A3A18;
  --salvia:#6E8A86;
  --salvia-container:#D9E5E1;
  --on-salvia-container:#243734;
  --plata:#B7C6D2;
  --outline-variant:#D2DEE7;
  --line:rgba(44,75,111,0.13);
  --ok:#4C7A55; --ok-container:#DCEBDC; --on-ok-container:#1F3A24;
  --danger-ink:#8A5A3C;
  --pixel-ink:#1C2A38; /* contorno de sprite FIJO (DESIGN.md §2.4): no cambia con el tema */

  --radius-card:22px;
  --radius-lg:28px;
  --ease-decel:cubic-bezier(0.05,0.7,0.1,1);
  --ease-standard:cubic-bezier(0.2,0,0,1);
  --dur-fast:140ms; --dur-med:240ms; --dur-slow:420ms;
  --maxw:1160px;
  --font-display:'Marcellus', 'Iowan Old Style', serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
  --font-pixel:'Press Start 2P', 'Courier New', monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0F1822;
    --bg-deep:#0B131C;
    --surface:#141F2A;
    --surface-2:#182633;
    --surface-hi:#1B2A38;
    --ink:#E7EEF4;
    --ink-soft:#C4D2DE;
    --ink-muted:#8D9FAE;
    --ink-faint:#5E7183;
    --primary:#97BAD9;
    --on-primary:#102234;
    --primary-deep:#B9D2E8;
    --primary-container:#2C4B6F;
    --on-primary-container:#D5E4F2;
    --accent:#E4B582;
    --accent-ink:#E4B582; /* en oscuro el ámbar claro ya pasa AA sobre bg/superficies (≈9,6:1 / ≈8,2:1) */
    --accent-container:#6A461F;
    --on-accent-container:#F6E2CC;
    --salvia:#A2C0BA;
    --salvia-container:#233531;
    --on-salvia-container:#D7E6E1;
    --plata:#5A6B79;
    --outline-variant:#344350;
    --line:rgba(151,186,217,0.14);
    --ok:#8FC097; --ok-container:#2A4630; --on-ok-container:#D7EBD9;
    --danger-ink:#E0AE6E;
    color-scheme: dark;
  }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink-soft);
  font-family:var(--font-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%; height:auto;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent-ink); outline-offset:3px; border-radius:6px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ─── grano de papel, muy sutil (invariante "textura") ─── */
.grain{
  position:fixed; inset:-10%; z-index:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── skip link ─── */
.skip-link{position:absolute; left:12px; top:-60px; z-index:200; background:var(--primary); color:var(--on-primary);
  padding:10px 16px; border-radius:10px; transition:top var(--dur-med) var(--ease-standard);}
.skip-link:focus{top:12px;}

/* ─── barra de progreso de scroll ─── */
.scrollbar{position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,var(--salvia),var(--accent));
  z-index:100; transition:width 80ms linear;}
@media (prefers-reduced-motion: reduce){ .scrollbar{transition:none;} }

/* ─── topbar ─── */
.topbar{position:sticky; top:0; z-index:90; backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom:1px solid var(--line);}
.topbar .row{display:flex; align-items:center; gap:14px; height:64px; flex-wrap:wrap;}
.topbar .row.pad{padding:6px 0;}
.brandmark{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font-weight:700;}
.brandmark .glyph{font-family:var(--font-display); font-size:22px; color:var(--accent-ink); line-height:1;}
.brandmark .txt{font-family:var(--font-display); font-size:18px; letter-spacing:.01em;}
.topnav{display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap;}
.navlink{font-size:13.5px; font-weight:600; color:var(--ink-muted); padding:14px 10px; border-radius:999px; text-decoration:none;
  transition:color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);}
.navlink:hover{color:var(--ink); background:var(--surface-hi);}

/* ─── botones ─── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; height:52px; padding:0 26px;
  border-radius:999px; font-family:var(--font-body); font-weight:600; font-size:15px; border:none; cursor:pointer;
  text-decoration:none; white-space:nowrap; transition:transform var(--dur-med) var(--ease-standard), filter var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard);}
.btn.small{height:42px; padding:0 20px; font-size:13.5px;}
.btn-primary{background:var(--primary); color:var(--on-primary); box-shadow:0 10px 26px rgba(28,42,56,.22);}
.btn-primary:hover{filter:brightness(1.08); transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--ink-soft); border:1.5px solid var(--plata);}
.btn-ghost:hover{background:var(--surface-hi); border-color:var(--ink-muted);}
.btn-tonal{background:var(--primary-container); color:var(--on-primary-container);}
.btn-tonal:hover{filter:brightness(1.03); transform:translateY(-1px);}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.62; cursor:not-allowed; transform:none !important; filter:none !important; box-shadow:none;}
@media (max-width:480px){
  .btn{white-space:normal; height:auto; min-height:52px; padding:13px 20px; text-align:center; line-height:1.3;}
  .cta-row{flex-direction:column; align-items:stretch;}
  .cta-row .btn{width:100%;}
  .topnav .btn.small{white-space:nowrap;}
}
.tag-w{font-family:var(--font-body); font-weight:700; font-size:9px; letter-spacing:.1em; text-transform:uppercase; background:var(--accent-container);
  color:var(--on-accent-container); padding:4px 7px; border-radius:6px; margin-left:2px; line-height:1;}
.icon-ext{width:14px; height:14px; flex:none;}

/* ─── secciones ─── */
.section{padding:104px 0; position:relative; overflow:hidden;}
.section.alt{background:var(--bg-deep);}
.section.tight{padding:72px 0;}
@media (max-width:720px){ .section{padding:64px 0;} .section.tight{padding:48px 0;} }

.section-head{max-width:66ch; margin:0 0 44px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:700; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 14px;}
.secnum{font-family:var(--font-pixel); font-size:11px; color:var(--accent-ink);}
h1,h2,h3{font-family:var(--font-display); font-weight:400; color:var(--ink); margin:0;}
h2.title{font-size:clamp(1.7rem,1.3rem + 2vw,2.55rem); line-height:1.1; margin:0 0 16px;}
h3.card-title{font-size:1.25rem; margin:0 0 8px; color:var(--ink);}
.lead{font-size:16.5px; color:var(--ink-soft); max-width:64ch; margin:0;}
.lead.center{margin-left:auto; margin-right:auto;}
p{margin:0 0 1em;}

/* ─── reveal on scroll ───
   Progressive enhancement: por defecto TODO visible (sin JS, o si el observer
   nunca dispara, el contenido nunca queda invisible — LE "empty states no mienten").
   Solo se oculta si <html> lleva la clase .js-reveal, añadida por un script
   inline en <head> ANTES del primer pintado; saga.js trae además un fallback
   por tiempo que revela cualquier resto tras 1.2s, por si el IntersectionObserver
   no llegara a disparar (p. ej. capturas automatizadas de pantalla completa). */
.reveal{opacity:1; transform:none;}
.js-reveal .reveal{opacity:0; transform:translateY(18px); transition:opacity var(--dur-slow) var(--ease-decel), transform var(--dur-slow) var(--ease-decel);}
.js-reveal .reveal.in{opacity:1; transform:none;}
.reveal.d1{transition-delay:.04s;} .reveal.d2{transition-delay:.08s;} .reveal.d3{transition-delay:.12s;}
.reveal.d4{transition-delay:.16s;} .reveal.d5{transition-delay:.2s;} .reveal.d6{transition-delay:.24s;}
@media (prefers-reduced-motion: reduce){ .js-reveal .reveal{opacity:1; transform:none; transition:none;} }

/* ─── grids ─── */
.grid{display:grid; gap:18px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-5{grid-template-columns:repeat(5,1fr);}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
@media (max-width:920px){ .grid-3,.grid-4,.grid-5{grid-template-columns:repeat(2,1fr);} .grid-2{grid-template-columns:1fr;} }
@media (max-width:560px){ .grid-3,.grid-4,.grid-5,.grid-2{grid-template-columns:1fr;} }

/* ─── card ─── */
.card{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-card); padding:22px;
  box-shadow:0 1px 2px rgba(20,31,42,.05), 0 10px 26px rgba(20,31,42,.06);}
.card.flat{background:var(--surface); box-shadow:none;}
.card p.small{font-size:14.5px; color:var(--ink-muted); margin:0;}

/* ─── slot honesto de arte pendiente (Magnific genera; el kernel lo coloca) ─── */
.art-slot{display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--surface-2); border:1.5px dashed var(--plata); border-radius:14px;
  color:var(--ink-muted); font-size:11px; line-height:1.35; padding:10px;}

/* ─── animación idle: arte v3 (draugr, 2 frames con holds irregulares) ───
   BUG 2026-09-13 #1 (gate): background-position en % cortaba el sprite a media
   tira. Corregido con width/height EXACTOS del frame + background-position en
   px negativos literales.
   BUG 2026-09-13 #2 (gate, verificado con Web Animations API .currentTime):
   el truco de "porcentaje doblado" (0%,33.3%{A} 33.3%,50%{B}) NO crea un tramo
   plano — en la cascada de @keyframes, cuando dos reglas comparten el MISMO
   offset exacto, solo sobrevive la ÚLTIMA declaración para ese offset; la
   anterior se descarta entera (no queda como "llegada"), así que el navegador
   interpola linealmente desde el frame anterior en vez de sostenerlo. Arreglo:
   separar cada "salto" con un offset epsilon (+0.001%) en vez de reusar el
   mismo número. Solo aplica a draugr (holds irregulares); el resto pasó a v4
   (ver .anim-v4 más abajo, 8 frames uniformes, sin holds ⇒ sin este riesgo). */
.anim-draugr{
  image-rendering:pixelated; background-repeat:no-repeat; overflow:hidden; display:block; margin:0 auto;
  width:192px; height:288px; background-size:384px 288px; animation: kf-draugr 1.2s infinite;
}
@keyframes kf-draugr{
  0%       { background-position: 0 0; }
  66.666%  { background-position: 0 0; }
  66.667%  { background-position: -192px 0; }
  100%     { background-position: -192px 0; }
}
@media (prefers-reduced-motion: reduce){
  .anim-draugr{ animation:none !important; background-position:0 0 !important; }
}

/* ─── animación v4 (arte 2026-09-14, Tyr commit fa2eb2b): 8 frames UNIFORMES
   por vídeo-a-imagen (catalog.json: "reproducir en orden 0..7 en bucle",
   125ms/frame = 1000ms el ciclo). Al ser un solo tramo 0%→100% (sin holds
   irregulares, sin offsets duplicados) el calc(var(--fw)*-8) por instancia es
   seguro: no hay dos reglas compitiendo por el mismo offset (ese fue el bug
   #2 de arriba). Verificado igualmente con .currentTime antes del gate. */
.anim-v4{
  image-rendering:pixelated; background-repeat:no-repeat; overflow:hidden; display:block; margin:0 auto;
  animation: kf-v4-8 1s steps(8) infinite;
}
@keyframes kf-v4-8{ to { background-position: calc(var(--fw) * -8) 0; } }
@media (prefers-reduced-motion: reduce){
  .anim-v4{ animation:none !important; background-position:0 0 !important; }
}

.beast-card .anim-draugr,.beast-card .anim-v4{ margin-bottom:12px; }

/* fondo animado del hero (plano 1, v4): capa detrás del hearth/sprite (z-index 0),
   parallax MUY sutil actualizado por saga.js vía --parallax-y (scroll), desactivado
   bajo reduce-motion (ver saga.js). */
.hero-plano1{position:absolute; left:50%; bottom:0; z-index:0; opacity:.85; pointer-events:none;
  transform:translateX(-50%) translateY(var(--parallax-y,0px));}
@media (prefers-reduced-motion: reduce){ .hero-plano1{ transform:translateX(-50%); } }

/* ─── hero ─── */
.hero{position:relative; padding:64px 0 88px;}
.hero-bg{position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(640px 420px at 82% -6%, rgba(198,138,82,.16), transparent 62%),
    radial-gradient(520px 420px at -6% 30%, rgba(110,138,134,.14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-deep));
}
.hero .wrap{position:relative; z-index:1;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;}
@media (max-width:880px){ .hero-grid{grid-template-columns:1fr; gap:40px;} }
.hero-eyebrow{color:var(--salvia); }
.hero h1{font-size:clamp(2.6rem, 2rem + 4vw, 5rem); line-height:1.02; color:var(--primary-deep); margin:0 0 .18em;}
.hero .claim{font-size:clamp(1.05rem,.95rem + .6vw,1.3rem); color:var(--ink-soft); max-width:46ch; margin:0 0 18px; font-weight:500;}
.hero .support{font-size:15px; color:var(--ink-muted); max-width:48ch; margin:0 0 30px;}
.hero .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px;}
.hero .privacy-note{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-muted);}
.hero .privacy-note svg{width:15px; height:15px; color:var(--salvia); flex:none;}
.stat-row{display:flex; gap:22px; flex-wrap:wrap; margin-top:30px;}
.stat{display:flex; flex-direction:column; gap:4px;}
.stat b{font-family:var(--font-pixel); font-size:15px; color:var(--accent-ink);}
.stat span{font-size:11.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.08em;}

/* ─── escena del caballero (hero) ─── */
.hero-scene{position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(175deg, var(--primary-container), var(--surface)); padding:34px 20px 22px; text-align:center;}
.hero-scene .hearth{position:absolute; width:220px; height:220px; border-radius:50%; left:50%; bottom:-90px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(198,138,82,.35), transparent 68%); filter:blur(6px);}
.hero-scene .sprite-slot{position:relative; z-index:1; width:288px; margin:0 auto 14px;}
/* leyenda sobre caja opaca (gate v7, P0: el texto caía sobre las copas del plano 1 animado a 1,3:1);
   fondo --surface sólido con fallback y sin depender de color-mix. */
.hero-scene .cap-box{position:relative; z-index:1; display:inline-block; max-width:100%; margin-top:2px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:9px 16px 8px;}
.hero-scene .cap{position:relative; z-index:1; font-family:var(--font-display); font-size:1.05rem; color:var(--primary-deep); margin:0 0 4px;}
.hero-scene .cap-sub{position:relative; z-index:1; font-size:13px; color:var(--ink-muted); margin:0;}

/* pixel sprite: rendering nítido, sin antialiasing (sprites reales Magnific) */
.pixel{ image-rendering:pixelated; }

/* ─── insignias: PNG reales de Magnific (img/insignias/) ─── */
.badge-grid{display:flex; flex-wrap:wrap; gap:16px;}
.badge{width:104px; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center;}
.badge img{width:96px; height:96px;}
.badge span{font-size:10px; color:var(--ink-muted); line-height:1.2;}

/* ─── compañero: texto, sin icono ─── */
.companion{font-size:13.5px; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:8px 16px;}

/* ─── bullets (cada paso cuenta) ─── */
.bullet h3{font-size:15px; font-weight:700; color:var(--ink); margin:0 0 4px; font-family:var(--font-body);}
.bullet p{font-size:14.5px; color:var(--ink-muted); margin:0;}

/* ─── creador (chips) ─── */
.creator{display:grid; grid-template-columns:1fr 1.15fr; gap:36px; align-items:start;}
@media (max-width:880px){ .creator{grid-template-columns:1fr;} }
.creator-preview{text-align:center; padding:28px 18px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line);}
.creator-preview .sprite-slot{width:192px; margin:0 auto 12px;}
.trait-row{margin-bottom:18px;}
.trait-row .lbl{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); margin-bottom:9px; display:block;}
.chip{display:inline-flex; align-items:center; padding:8px 15px; border-radius:999px; border:1px solid var(--line);
  font-size:13px; color:var(--ink-soft); background:var(--surface-hi); margin:0 6px 6px 0;}
.chip.on{background:var(--primary-container); color:var(--on-primary-container); border-color:transparent; font-weight:600;}
.swatch{display:inline-block; width:20px; height:20px; border-radius:50%; border:2px solid var(--surface-2); box-shadow:0 0 0 1px var(--line); margin:0 5px 6px 0; vertical-align:middle;}

/* ─── niveles ─── */
.levels{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:920px){ .levels{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .levels{grid-template-columns:1fr;} }
.level-card{position:relative; text-align:center; padding:22px 14px 18px;}
.level-card .lvl-n{position:absolute; top:12px; left:14px; font-family:var(--font-pixel); font-size:10px; color:var(--ink-faint);}
.level-card .sprite-slot{width:192px; margin:8px auto 10px;}
.level-card h3{font-family:var(--font-display); font-size:1.05rem; color:var(--ink); margin:0 0 2px;}
.level-card .pts{font-family:var(--font-pixel); font-size:10px; color:var(--accent-ink); margin:0 0 8px; display:block;}
.level-card p{font-size:13px; color:var(--ink-muted); margin:0;}

/* ─── mapa: galería de 6 escenarios (arte v2) ─── */
.map-wrap{margin:0 auto;}
.escenarios-grid{margin-bottom:8px;}
.escenario-card{margin:0; padding:0; text-align:center;}
.escenario-card img{width:100%; height:auto; border-radius:14px; display:block; border:1px solid var(--line);}
.escenario-card figcaption{margin-top:8px; font-size:13.5px; font-weight:600; color:var(--ink-soft);}
.map-caption{text-align:center; font-size:13.5px; color:var(--ink-muted); margin-top:14px;}
.map-caption + .map-caption{margin-top:8px;}
.lugares-row{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:22px;}
.lugar-item{display:flex; flex-direction:column; align-items:center; gap:6px; width:78px; text-align:center;}
.lugar-item img{width:56px; height:56px;}
.lugar-item span{font-size:11.5px; color:var(--ink-muted);}

/* ─── sendas ─── */
.senda-card{text-align:left;}
.senda-card img{width:96px; height:96px; margin-bottom:14px;}
.senda-card .lvlbar{height:6px; border-radius:99px; background:var(--outline-variant); margin-top:12px; overflow:hidden;}
.senda-card .lvlbar > i{display:block; height:100%; background:var(--salvia); border-radius:99px;}

/* ─── gestas ─── */
.gestas-layout{display:grid; grid-template-columns:.85fr 1.15fr; gap:36px; align-items:center;}
@media (max-width:880px){ .gestas-layout{grid-template-columns:1fr;} }
.mentor-card{text-align:center; padding:30px 20px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line);}
.mentor-card img{width:100%; max-width:280px; height:auto; border-radius:14px; margin:0 auto 12px; display:block;}
.chain12{display:flex; gap:7px; flex-wrap:wrap; margin:18px 0 4px;}
.chain12 i{width:14px; height:14px; border-radius:50%; background:var(--outline-variant); display:inline-block;}
.chain12 i.done{background:var(--salvia);}
.gesta-list{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;}
.gesta-list li{display:flex; align-items:center; gap:12px; font-size:14.5px; color:var(--ink-soft);
  background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:12px 16px;}
.gesta-list li .box{width:20px; height:20px; border-radius:6px; border:2px solid var(--salvia); flex:none;}

/* ─── forja / materiales ─── */
.materials{display:flex; gap:14px; flex-wrap:wrap;}
.material{display:flex; flex-direction:column; align-items:center; gap:8px; width:88px; text-align:center;}
.material img{width:72px; height:72px; border-radius:12px;}
.material span{font-size:12px; color:var(--ink-muted);}
.companion-row{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap;}

/* ─── pruebas ─── */
.beast-card{text-align:center;}
.beast-card h3{font-size:1.05rem; margin:0 0 6px;}
.retreat-note{margin-top:32px; text-align:center; font-size:14px; color:var(--ink-muted);}

/* ─── estaciones ─── */
.season-row{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px;}
.season-pill{display:inline-flex; align-items:center; padding:9px 16px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line); font-size:13.5px; color:var(--ink-soft);}
.era-row{display:flex; gap:12px; flex-wrap:wrap;}
.era-pill{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  background:var(--accent-container); color:var(--on-accent-container); font-size:13.5px; font-weight:600;}

/* ─── lo que no hay ─── */
.nohay-card h3{font-family:var(--font-body); font-size:15px; font-weight:700; color:var(--ink); margin:0 0 4px;}
.nohay-card p{font-size:14px; color:var(--ink-muted); margin:0;}
.nohay-close{margin-top:36px; text-align:center; font-family:var(--font-display); font-size:1.3rem; color:var(--primary-deep);
  max-width:36ch; margin-left:auto; margin-right:auto;}

/* ─── hoja de ruta ─── */
.roadmap{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;}
.roadmap li{display:grid; grid-template-columns:76px 96px 1fr; gap:16px; align-items:center; padding:16px 6px;
  border-bottom:1px solid var(--line);}
.roadmap li:last-child{border-bottom:none;}
@media (max-width:640px){ .roadmap li{grid-template-columns:1fr; row-gap:6px;} }
.rm-code{font-family:var(--font-body); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.rm-status{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; width:fit-content;}
.rm-status.done{background:var(--ok-container); color:var(--on-ok-container);}
.rm-status.doing{background:var(--accent-container); color:var(--on-accent-container);}
.rm-status.next{background:var(--surface-hi); color:var(--ink-muted); border:1px solid var(--line);}
.rm-status i{width:6px; height:6px; border-radius:50%; background:currentColor;}
.rm-name{font-size:14.5px; color:var(--ink-soft);}
.rm-name b{color:var(--ink); font-weight:700;}

/* ─── FAQ ─── */
.faq-list{display:flex; flex-direction:column; gap:10px;}
details.faq{background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:4px 20px; overflow:hidden;}
details.faq summary{list-style:none; cursor:pointer; padding:16px 30px 16px 0; position:relative; font-weight:600; color:var(--ink);
  font-size:15.5px;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:''; position:absolute; right:2px; top:50%; width:11px; height:11px; margin-top:-7px;
  border-right:2px solid var(--ink-muted); border-bottom:2px solid var(--ink-muted); transform:rotate(45deg);
  transition:transform var(--dur-med) var(--ease-standard);}
details.faq[open] summary::after{transform:rotate(-135deg);}
details.faq .a{padding:0 0 18px; font-size:14.5px; color:var(--ink-muted); max-width:70ch;}
@media (prefers-reduced-motion: reduce){ details.faq summary::after{transition:none;} }

/* ─── sobre tyr ─── */
.about-card{display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; padding:36px;}
@media (max-width:640px){ .about-card{grid-template-columns:1fr; text-align:center;} }
.about-glyph{font-family:var(--font-display); font-size:52px; color:var(--accent-ink); line-height:1;}
.about-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px;}
@media (max-width:640px){ .about-actions{justify-content:center;} }

/* ─── footer ─── */
footer.site{background:var(--bg-deep); border-top:1px solid var(--line); padding:48px 0 30px;}
footer.site .cols{display:flex; flex-wrap:wrap; gap:34px; justify-content:space-between;}
footer.site h4{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 12px; font-weight:700;}
footer.site a{display:block; color:var(--ink-soft); font-size:14px; padding:14px 0; margin:0; text-decoration:none;}
footer.site a:hover{color:var(--primary);}
footer.site .legal{width:100%; border-top:1px solid var(--line); margin-top:22px; padding-top:18px; font-size:12.5px; color:var(--ink-muted);}
footer.site .brandline{font-family:var(--font-display); font-size:19px; color:var(--ink); margin-bottom:8px;}
footer.site p.desc{max-width:34ch; font-size:13.5px; color:var(--ink-muted);}

/* ─── comentario de mantenimiento visible en fuente, no en pantalla ─── */