/* Las páginas para leer (la portada, index.html, y historia, personajes, como-jugar, novedades y preguntas): la marca
   (brand/tokens.json) sobre legal.css, más la cabecera, la portada y las tarjetas. El juego está en jugar.html */
@import url('legal.css');
@font-face { font-family: 'Unbounded'; font-weight: 600; font-style: normal; font-display: swap; src: url('assets/fuentes/unbounded-latin-600-normal.woff2') format('woff2'); }

:root { --dusk: #1d1a2b; --flare: #ff4d9d; --on-neon: #0a0910; }

/* La cabecera: el logo, las secciones (en el móvil se deslizan de lado) y «Jugar» */
.cabecera {
  position: sticky; top: 0; z-index: 2;
  background: var(--void);
  border-bottom: 1px solid var(--line-strong);
}
.cabecera-dentro {
  max-width: 1100px; margin: 0 auto;
  padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 16px;
}
.cabecera .marca { display: inline-flex; min-height: 44px; align-items: center; flex: none; }
.cabecera .marca img { height: 22px; width: auto; }
.secciones { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.secciones::-webkit-scrollbar { display: none; }
.secciones a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  color: var(--ink-muted); text-decoration: none; font: 700 12px/1 'Space Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase;
}
.secciones a[aria-current="page"], .secciones a:hover { color: var(--ink); }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font: 600 15px/1 'Unbounded', 'Arial Black', sans-serif; text-decoration: none;
  border: 2px solid var(--line-strong); background: var(--dusk); color: var(--ink);
}
.boton.primario { background: var(--ultra); border-color: var(--ultra); color: var(--on-neon); }
.boton.grande { min-height: 60px; padding: 0 36px; font-size: 18px; }
.boton:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }
.cabecera .boton { min-height: 40px; padding: 0 18px; font-size: 13px; flex: none; }

/* Las páginas largas: más anchas que las legales */
.hoja.ancha { max-width: 1100px; }
.hoja h1 { margin-top: 32px; }
.entradilla { font-size: 19px; line-height: 1.55; color: var(--ink); max-width: 62ch; }

/* La portada */
.portada { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-strong); }
.portada img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.portada::after { content: ''; position: absolute; inset: 0; background: rgba(10, 9, 16, 0.55); }
.portada-dentro {
  position: relative; z-index: 1; max-width: 1100px; margin: 0 auto;
  padding: 56px max(16px, env(safe-area-inset-right)) 64px max(16px, env(safe-area-inset-left));
  display: grid; gap: 20px; justify-items: start;
}
.portada .chapa { font: 700 12px/1 'Space Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-neon); background: var(--volt); padding: 8px 12px; border-radius: 999px; }
.portada h1 { margin: 0; font: 700 clamp(34px, 8vw, 64px)/1.05 'Unbounded', 'Arial Black', sans-serif; letter-spacing: -0.02em; max-width: 14ch; }
.portada p { margin: 0; font-size: clamp(17px, 2.4vw, 20px); color: var(--ink); max-width: 46ch; }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.portada .datos { display: flex; flex-wrap: wrap; gap: 8px; }
.portada .datos span { font: 700 12px/1 'Space Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--line-strong); background: rgba(10, 9, 16, 0.7); padding: 9px 12px; border-radius: 999px; }

/* Tarjetas con captura */
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; margin: 24px 0; }
.tarjeta { background: var(--night); border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.tarjeta img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--dusk); }
.tarjeta .texto { padding: 16px 20px 20px; }
.tarjeta h3 { margin: 0 0 6px; font: 700 18px/1.3 'Unbounded', 'Arial Black', sans-serif; color: var(--ink); }
.tarjeta p { margin: 0; }
.galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; margin: 20px 0; }
.galeria figure { margin: 0; }
.galeria img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid var(--line-strong); display: block; }
.galeria figcaption { font-size: 14px; color: var(--ink-muted); padding: 6px 2px 0; }

/* Capítulos y personajes */
.capitulos { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 12px; counter-reset: cap; }
.capitulos li { margin: 0; background: var(--night); border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px 18px; counter-increment: cap; }
.capitulos li::before { content: 'Capítulo ' counter(cap); display: block; font: 700 11px/1.4 'Space Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--volt); }
.capitulos strong { display: block; font: 700 17px/1.35 'Unbounded', 'Arial Black', sans-serif; margin: 2px 0 4px; }
.fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; margin: 20px 0; }
.ficha { background: var(--night); border: 1px solid var(--line-strong); border-radius: 12px; padding: 16px 18px; }
.ficha h3 { margin: 0; font: 700 18px/1.3 'Unbounded', 'Arial Black', sans-serif; }
.ficha .papel { margin: 2px 0 8px; font: 700 11px/1.4 'Space Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--volt); }
.ficha p { margin: 0; }

/* Controles */
.controles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin: 20px 0; }
.controles section { background: var(--night); border: 1px solid var(--line-strong); border-radius: 12px; padding: 16px 20px; }
.controles h3 { margin: 0 0 8px; font: 700 17px/1.3 'Unbounded', 'Arial Black', sans-serif; }
.controles ul { margin: 0; }
kbd { font: 700 13px/1 'Space Mono', monospace; color: var(--ink); background: var(--dusk); border: 1px solid var(--line-strong); border-bottom-width: 3px; border-radius: 6px; padding: 3px 7px; }

/* Novedades y preguntas */
.entrada-diario { border-left: 6px solid var(--ultra); padding: 4px 0 4px 18px; margin: 28px 0; }
.entrada-diario time { font: 700 12px/1 'Space Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--volt); }
.entrada-diario h2 { margin: 8px 0 8px; }
details { background: var(--night); border: 1px solid var(--line-strong); border-radius: 12px; padding: 0 18px; margin: 10px 0; }
summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-weight: 600; color: var(--ink); }
details p { margin: 0 0 16px; }

/* El aviso de jugar, al final de cada página */
.llamada { margin: 48px 0 8px; padding: 28px; border-radius: 16px; background: var(--night); border: 1px solid var(--line-strong); display: grid; gap: 14px; justify-items: start; }
.llamada h2 { margin: 0; }
.llamada p { margin: 0; }
.pie-sitio { max-width: 1100px; margin: 0 auto; padding: 24px max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left)); border-top: 1px solid var(--line-strong); display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; }
.pie-sitio a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink-muted); }
.pie-sitio small { width: 100%; color: var(--ink-muted); }