/* ============================================================================
   CÓDIGO ALFA · SISTEMA DE DISEÑO DEL SITIO
   ----------------------------------------------------------------------------
   Una sola hoja para todo el sitio público. Cargarla es lo único que hace falta
   para que una página nueva se vea como el resto; no hay CSS por página.

   De dónde sale cada cosa (nada de esto se ha elegido «a ojo»):
     · Los colores son los de la app, transcritos de CodigoAlfa/Design/Theme.swift.
     · La rampa del DSA es la de CodigoAlfa/Design/ColorMaps.swift, punto por punto.
     · Las dos tipografías son las que ya imprime el juego de cartas físico
       (CodigoAlfa-CardGame/tools/lib/print.mjs): Baloo 2 y JetBrains Mono.
       Se sirven desde /assets/fonts/ — CERO peticiones a dominios ajenos.

   ORDEN DEL FICHERO
     0. Tipografías          5. Retícula y secciones
     1. Fichas (tokens)      6. Componentes
     2. Reinicio             7. Cabecera y pie
     3. Accesibilidad        8. Portada (héroe, galería)
     4. Bilingüe             9. Páginas de documento
   ========================================================================== */


/* == 0. TIPOGRAFÍAS ======================================================== */
/* Subconjunto latino + griego (α, δ, θ… salen en el texto clínico), generado con
   pyftsubset. Los cuatro ficheros suman ~79 KB. `swap` para que el texto se lea
   desde el primer fotograma aunque la fuente aún no haya llegado. */

@font-face{
  font-family:"Baloo 2"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/assets/fonts/baloo2-600.woff2") format("woff2");
}
@font-face{
  font-family:"Baloo 2"; font-style:normal; font-weight:800; font-display:swap;
  src:url("/assets/fonts/baloo2-800.woff2") format("woff2");
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/assets/fonts/jetbrainsmono-500.woff2") format("woff2");
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/assets/fonts/jetbrainsmono-700.woff2") format("woff2");
}


/* == 1. FICHAS ============================================================= */

:root{
  /* -- Fondos y superficies (Palette, Theme.swift) ------------------------- */
  --bg-0:#090D17;          /* fondo de página */
  --bg-1:#0E1422;          /* franja alterna */
  --bg-2:#161E32;
  --panel:#182136;
  --panel-hi:#212C45;
  --line:rgba(255,255,255,.08);
  --line-hi:rgba(255,255,255,.16);

  /* -- Marca y acento ------------------------------------------------------ */
  --alpha:#49CAF2;         /* cian «alfa»: enlaces, foco, acción primaria */
  --alpha-deep:#2E8FD9;
  --teal:#32DAC7;
  --mint:#60F1AA;
  --violet:#8F78FA;        /* campaña 2D · «demasiado profundo» */
  --gold:#FECD60;          /* avisos · curso */

  /* -- Semántica clínica ---------------------------------------------------
     NO son decorativas. En la app cada una significa algo y aquí significan lo
     mismo: verde = conducta segura / 40-60; ámbar = precaución / 60-80;
     rojo = error crítico / despierto >80; violeta = demasiado profundo <25. */
  --safe:#4CE18F;
  --caution:#FEC14D;
  --danger:#F76569;
  --deep:#A58BFE;

  /* -- Texto --------------------------------------------------------------- */
  --ink:#ECF2FA;
  --dim:#A5B2CB;
  /* --faint es el #717E98 de Theme.swift ACLARADO A PROPÓSITO. Medido: el valor
     de la app da 3,92:1 sobre --panel, y aquí se usa para rótulos de 11-13 px
     (la marca del aparato dentro de una tarjeta, los pies de cifra), que es
     texto normal y necesita 4,5:1. Con #8290AB queda en 4,98:1 sobre --panel,
     5,72:1 sobre --bg-1 y 6,03:1 sobre --bg-0. En la app el mismo color se usa
     sobre fondos más oscuros y ahí sí cumple; el sitio no tiene por qué heredar
     un contraste que en su propio contexto no da. */
  --faint:#8290AB;

  /* -- Los dos fósforos ----------------------------------------------------
     Muestreados a píxel de las capturas de la app. Son el corazón visual: un
     trazo de EEG en la web tiene que ser de uno de estos dos verdes/ámbares
     sobre negro, no de un color de marca cualquiera. */
  --phosphor-bis:#3CE46A;    /* sobre #000000 */
  --phosphor-amber:#FFC322;  /* sobre #070707 */
  --phosphor-bg:#070707;

  /* -- Tipografías --------------------------------------------------------- */
  --f-display:"Baloo 2",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --f-body:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,
           Helvetica,Arial,sans-serif;

  /* -- Escala tipográfica: cuarta justa (×1,333), truncada ----------------- */
  --fs-micro:11px;
  --fs-mono:13px;
  --fs-small:14.5px;
  --fs-body:17px;
  --fs-lead:clamp(19px,.6vw + 17px,23px);
  --fs-h3:21px;
  --fs-h2:clamp(27px,2.2vw + 16px,40px);
  --fs-h1:clamp(42px,6vw + 10px,78px);
  --fs-digit:clamp(60px,8vw,108px);   /* el numeral del monitor: UNO por página */

  /* -- Retícula ------------------------------------------------------------ */
  --w-max:1240px;
  --gutter:clamp(20px,4vw,40px);
  --rail:88px;                        /* carril de canal en ≥1000 px */
  --gap:24px;
  --sec-pad:clamp(64px,9vw,128px);

  /* -- Radios --------------------------------------------------------------
     Deliberadamente pequeños: son el antídoto contra el aspecto de plantilla.
     --r-bezel se usa UNA SOLA VEZ en todo el sitio (el aparato del héroe). */
  --r-panel:4px;
  --r-chip:2px;
  --r-bezel:18px;

  /* -- La rampa del DSA, literal de ColorMaps.swift -----------------------
     Es la firma de color de la marca. Va en filetes, barras de progreso y
     escalas. NUNCA como fondo de una tarjeta. */
  --dsa:linear-gradient(90deg,
    #050517 0%,  #170D52 12%, #21389E 28%, #1A85C7 44%, #1CC7B5 58%,
    #5CE670 70%, #EDDB3D 82%, #FA852E 92%, #FCEDDB 100%);
}


/* == 2. REINICIO =========================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--bg-0);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}

a{color:var(--alpha);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--mint)}

::selection{background:var(--alpha);color:#04121A}

hr{border:0;height:1px;background:var(--line);margin:0}


/* == 3. ACCESIBILIDAD ======================================================
   Foco visible SIEMPRE con teclado y NUNCA con ratón: :focus-visible ya hace
   esa distinción, así que no hay que quitarle el contorno a nadie. El anillo es
   cian sobre fondo oscuro (contraste 7,2:1 contra --bg-0) y lleva un halo
   oscuro para que también se vea si cae sobre un panel claro. */

:focus{outline:none}
:focus-visible{
  outline:2px solid var(--alpha);
  outline-offset:3px;
  border-radius:var(--r-chip);
  box-shadow:0 0 0 6px rgba(9,13,23,.85);
}

/* Salto al contenido: primer elemento tabulable de cada página. */
.saltar{
  position:absolute; left:var(--gutter); top:-100px; z-index:100;
  background:var(--alpha); color:#04121A; font-weight:700;
  padding:10px 16px; border-radius:var(--r-chip);
  transition:top .12s ease;
}
.saltar:focus{top:12px}

/* Solo para lectores de pantalla. */
.sr{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

[hidden]{display:none!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}


/* == 4. BILINGÜE ===========================================================
   EL TEXTO DE LOS DOS IDIOMAS ESTÁ EN EL HTML, no en atributos que rellena un
   script. Esto no es un capricho: /privacy y /support son las dos URL que abre
   el revisor de Apple, y con el mecanismo anterior (todo en data-es/data-en,
   pintado por JS) un bloqueador, un fallo de red o un rastreador las dejaba en
   un <body> mudo.

   CÓMO SE ESCRIBE UNA PÁGINA NUEVA
       <p data-t="es" lang="es">El BIS marca 45.</p>
       <p data-t="en" lang="en">The BIS reads 45.</p>
   o en línea, dentro de una frase:
       <span data-t="es" lang="es">…</span><span data-t="en" lang="en">…</span>

   Reglas del mecanismo:
     · Solo se declara el elemento que SE OCULTA. El visible conserva su display
       natural (bloque, línea, celda de rejilla…), así que esto funciona con
       cualquier etiqueta sin listas de excepciones.
     · Sin JavaScript: <html lang="es" data-lang="es"> en el marcado → sale el
       español completo. La página es legible, indexable y traducible por el
       navegador aunque /assets/js/site.js no llegue nunca.
     · El atributo lang= de cada mitad no es decorativo: es lo que hace que un
       lector de pantalla pronuncie el inglés en inglés.
     · Lo que no se puede duplicar (title, alt, aria-label, href) lleva el
       español en el atributo real y el inglés en data-<attr>-en; el script lo
       cambia. Sin script, se queda el español, que es correcto. */

html[data-lang="es"] [data-t="en"],
html[data-lang="en"] [data-t="es"]{display:none!important}


/* == 5. RETÍCULA Y SECCIONES =============================================== */

.wrap{
  width:100%; max-width:var(--w-max);
  margin-inline:auto; padding-inline:var(--gutter);
}

.seccion{
  padding-block:var(--sec-pad);
  border-top:1px solid var(--line);
  position:relative;
}
.seccion--alt{background:var(--bg-1)}
.seccion--sinlinea{border-top:0}

/* EL CARRIL DE CANAL.
   En ≥1000 px la primera columna queda fija como carril: el número de sección
   en vertical, en mono, con un filete. Es la columna de etiquetas L1·R1·L2·R2 de
   un SedLine, y es lo que sustituye al patrón «rótulo + h2 + párrafo pegados al
   margen». Da estructura sin centrar nada. Por debajo de 1000 px desaparece y
   el rótulo se lee en horizontal, como una etiqueta más. */
.carril{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap);
}
.carril__n{
  font-family:var(--f-mono); font-weight:700; font-size:var(--fs-micro);
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
}
@media (min-width:1000px){
  .carril{grid-template-columns:var(--rail) minmax(0,1fr)}
  .carril__n{
    writing-mode:vertical-rl; text-orientation:mixed;
    justify-self:start; align-self:start;
    padding-block:2px; padding-inline-start:0;
    border-left:1px solid var(--line-hi);
    padding-left:14px; min-height:120px;
  }
}

/* Tira a sangre: rompe la retícula de lado a lado, como el área de onda ocupa
   todo el bisel de un aparato real. Sirve además para separar bloques sin
   sembrar la página de líneas horizontales. */
.sangre{
  margin-inline:calc(50% - 50vw);
  width:100vw; border-radius:0;
}

/* El filete de la rampa del DSA: 3 px de la firma cromática del proyecto. */
.filete-dsa{height:3px;background:var(--dsa);border:0;margin:0}

/* La retícula del monitor: 1 px cada 24 px. Cuatro líneas de CSS, cero imágenes. */
.rejilla{
  background-image:
    repeating-linear-gradient(0deg,rgba(124,158,196,.05) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(90deg,rgba(124,158,196,.05) 0 1px,transparent 1px 24px);
}


/* == 6. COMPONENTES ======================================================== */

/* -- Tipografía aplicada -------------------------------------------------- */

.rotulo{                      /* eyebrow · etiqueta de aparato */
  font-family:var(--f-mono); font-weight:700; font-size:var(--fs-micro);
  letter-spacing:.18em; text-transform:uppercase; color:var(--alpha);
  display:block; margin-bottom:14px;
}
.rotulo--gold{color:var(--gold)}
.rotulo--violet{color:var(--violet)}
.rotulo--dim{color:var(--faint)}

h1,.h1{
  font-family:var(--f-display); font-weight:800; font-size:var(--fs-h1);
  line-height:.95; letter-spacing:-.03em; text-wrap:balance;
}
h2,.h2{
  font-family:var(--f-display); font-weight:800; font-size:var(--fs-h2);
  line-height:1.08; letter-spacing:-.02em; text-wrap:balance;
}
h3,.h3{
  font-family:var(--f-display); font-weight:600; font-size:var(--fs-h3);
  line-height:1.25; letter-spacing:-.01em;
}

.entradilla{
  font-size:var(--fs-lead); line-height:1.5; color:var(--dim);
  max-width:56ch; margin-top:20px;
}
.parrafo{max-width:68ch; color:var(--dim); margin-top:16px}
.parrafo strong{color:var(--ink); font-weight:600}

.dato{                        /* metadatos, pies de figura, cifras sueltas */
  font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--faint);
  font-variant-numeric:tabular-nums;
}

.pie{                         /* pie de figura: aquí el humor va a plena potencia */
  font-size:var(--fs-small); color:var(--dim); max-width:60ch; margin-top:14px;
}

/* El numeral del monitor. UNO POR PÁGINA, COMO MÁXIMO. Es el gesto que dice
   «esto es un instrumento» antes de leer una palabra. */
.numeral{
  font-family:var(--f-mono); font-weight:700; font-size:var(--fs-digit);
  line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.04em;
  color:var(--safe);
}

/* -- Botones -------------------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-body); font-weight:650; font-size:var(--fs-small);
  padding:14px 22px; border-radius:var(--r-chip);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.btn--primario{background:var(--alpha); color:#04121A; border-color:var(--alpha)}
.btn--primario:hover{background:var(--mint); border-color:var(--mint); color:#04121A}
.btn--fantasma{background:transparent; border-color:var(--line-hi); color:var(--ink)}
.btn--fantasma:hover{border-color:var(--alpha); color:var(--alpha)}

/* EL BOTÓN DE LA TIENDA.
   No hay insignia oficial de Apple en el árbol y descargarla de fuera está
   prohibido; redibujar la manzana a mano, todavía más. Así que es un botón
   propio: dos líneas de texto, tipografía del sistema, sin ningún logotipo
   ajeno. El enlace es la ÚNICA ficha que existe — una sola para iPhone, iPad y
   Mac; no hay «Mac App Store» aparte. */
.tienda{
  display:inline-flex; align-items:center; gap:14px;
  background:var(--alpha); color:#04121A; text-decoration:none;
  padding:12px 24px 12px 20px; border-radius:var(--r-chip);
  border:1px solid var(--alpha);
  transition:background .14s ease,border-color .14s ease;
}
.tienda:hover{background:var(--mint); border-color:var(--mint); color:#04121A}
.tienda__glifo{
  flex:none; width:34px; height:34px; border-radius:8px;
  background:#04121A; color:var(--alpha);
  display:grid; place-items:center;
}
.tienda__glifo svg{width:22px;height:22px}
.tienda__txt{display:flex; flex-direction:column; line-height:1.15; text-align:left}
.tienda__sup{
  font-family:var(--f-mono); font-weight:500; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; opacity:.72;
}
.tienda__main{font-weight:700; font-size:17px; letter-spacing:-.01em}

.acciones{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:32px}

/* -- Paneles, pastillas, avisos ------------------------------------------- */

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-panel);
  padding:24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);  /* el vidrio de la app */
}
a.panel{text-decoration:none; color:inherit; display:block; transition:border-color .14s ease,background .14s ease}
a.panel:hover{border-color:var(--line-hi); background:var(--panel-hi)}
.panel h3{margin-bottom:8px}
.panel p{color:var(--dim); font-size:var(--fs-small)}

.rejilla-paneles{display:grid; gap:16px; margin-top:32px}
@media (min-width:640px){ .rejilla-paneles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:980px){ .rejilla-paneles--3{grid-template-columns:repeat(3,minmax(0,1fr))} }

.pastilla{
  display:inline-block; font-family:var(--f-mono); font-weight:500;
  font-size:var(--fs-micro); letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r-chip);
  padding:5px 10px;
}
.pastilla--violet{color:var(--violet); border-color:color-mix(in srgb,var(--violet) 38%,transparent)}
.pastilla--gold{color:var(--gold); border-color:color-mix(in srgb,var(--gold) 38%,transparent)}
.pastillas{display:flex; flex-wrap:wrap; gap:8px}

/* EL AVISO LEGAL. Aquí el tono va a CERO, deliberadamente plano. El contraste
   con el humor del resto es lo que convierte el chiste en una decisión y no en
   un descuido: quien se ríe en la portada y luego encuentra el aviso escrito
   como un aviso entiende que alguien pensó dónde estaba la raya. */
.aviso{
  border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);
  background:color-mix(in srgb,var(--gold) 7%,var(--panel));
  border-radius:var(--r-panel);
  padding:24px 26px;
}
.aviso p{color:var(--ink); max-width:74ch}

/* Barra de progreso / escala con la rampa del DSA. */
.escala{height:6px; border-radius:0; background:var(--dsa); border:0}


/* == 7. CABECERA Y PIE ===================================================== */

.cab{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb,var(--bg-0) 88%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.cab__fila{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:62px;
}
.marca{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--f-display); font-weight:800; font-size:19px;
  letter-spacing:-.01em; color:var(--ink); text-decoration:none;
}
.marca:hover{color:var(--ink)}
.marca svg{flex:none}

.nav{display:flex; align-items:center; gap:8px}
.nav a{
  color:var(--dim); text-decoration:none; font-size:var(--fs-small);
  padding:8px 10px; border-radius:var(--r-chip);
}
.nav a:hover{color:var(--ink); background:var(--bg-2)}
.nav a[aria-current="page"]{color:var(--alpha)}

/* El conmutador de idioma: dos botones, estado en aria-pressed (no en una clase
   suelta) para que un lector de pantalla anuncie cuál está activo. */
.idioma{
  display:inline-flex; margin-left:6px;
  border:1px solid var(--line-hi); border-radius:var(--r-chip); overflow:hidden;
}
.idioma button{
  background:transparent; border:0; cursor:pointer;
  font-family:var(--f-mono); font-weight:700; font-size:var(--fs-micro);
  letter-spacing:.1em; color:var(--dim); padding:8px 11px;
}
.idioma button:hover{color:var(--ink); background:var(--bg-2)}
.idioma button[aria-pressed="true"]{background:var(--alpha); color:#04121A}

/* Menú de móvil con <details>: funciona SIN JavaScript y el <summary> ya trae
   el papel, el estado expandido y el manejo de teclado de serie. */
.menu{position:relative}
.menu>summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-weight:700; font-size:var(--fs-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  border:1px solid var(--line-hi); border-radius:var(--r-chip); padding:9px 13px;
}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary:hover{color:var(--ink)}
.menu[open]>summary{color:var(--alpha); border-color:var(--alpha)}
.menu__panel{
  position:absolute; right:0; top:calc(100% + 10px); z-index:70;
  min-width:216px; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line-hi);
  border-radius:var(--r-panel); padding:8px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
/* Los enlaces van dentro del envoltorio de idioma (<span data-t="es">…), así que
   el envoltorio es quien tiene que apilarlos: si no, salen en línea y el menú
   se lee como un párrafo de enlaces. */
.menu__panel>[data-t]{display:flex; flex-direction:column}
.menu__panel a{
  padding:11px 12px; color:var(--dim); text-decoration:none;
  font-size:var(--fs-small); border-radius:var(--r-chip);
}
.menu__panel a:hover{color:var(--ink); background:var(--bg-2)}
.menu__panel .idioma{align-self:start}

@media (min-width:860px){ .menu{display:none} }
@media (max-width:859px){ .nav--ancha{display:none} }

/* -- Pie ------------------------------------------------------------------ */

.pie-sitio{border-top:1px solid var(--line); padding-block:56px 72px; background:var(--bg-1)}
.pie-sitio__cols{display:grid; gap:36px}
@media (min-width:760px){ .pie-sitio__cols{grid-template-columns:1.6fr 1fr 1fr} }
.pie-sitio h2{
  font-family:var(--f-mono); font-weight:700; font-size:var(--fs-micro);
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
  margin-bottom:14px;
}
.pie-sitio ul{display:flex; flex-direction:column; gap:9px}
.pie-sitio a{color:var(--dim); text-decoration:none; font-size:var(--fs-small)}
.pie-sitio a:hover{color:var(--alpha); text-decoration:underline}
.pie-sitio__legal{
  margin-top:44px; padding-top:24px; border-top:1px solid var(--line);
  color:var(--faint); font-size:var(--fs-mono); max-width:76ch;
}


/* == 8. PORTADA ============================================================ */

/* -- Héroe ---------------------------------------------------------------- */
/* El aparato va EN SU PROPIA COLUMNA, no de fondo detrás del texto. En la web
   anterior el lienzo del EEG corría por debajo de la entradilla y del botón y
   se los comía, sobre todo a 375 px. */

.heroe{position:relative; overflow:hidden; padding-block:clamp(48px,7vw,92px) var(--sec-pad)}
.heroe__rejilla{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  mask-image:radial-gradient(120% 80% at 30% 0%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 80% at 30% 0%,#000 20%,transparent 78%);
}
.heroe .wrap{position:relative; z-index:1}
.heroe__cols{display:grid; gap:clamp(36px,5vw,56px); align-items:center}
@media (min-width:900px){ .heroe__cols{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)} }

/* EL BISEL. La única vez en todo el sitio que se usan --r-bezel y una sombra
   grande. En todo lo demás la separación es filete de 1 px y valor de
   superficie, como en la UI de un monitor. */
.aparato{
  border-radius:var(--r-bezel);
  background:linear-gradient(180deg,#1B2438,#101725);
  border:1px solid var(--line-hi);
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  padding:14px;
  max-width:520px; margin-inline:auto; width:100%;
}
.aparato__marco{
  border-radius:10px; overflow:hidden; background:var(--phosphor-bg);
  border:1px solid rgba(0,0,0,.7);
}
.aparato__barra{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:2px 4px 12px;
  font-family:var(--f-mono); font-weight:700; font-size:var(--fs-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
.aparato__led{
  width:7px; height:7px; border-radius:50%; background:var(--safe);
  box-shadow:0 0 8px var(--safe); display:inline-block; margin-right:8px;
  vertical-align:middle;
}
#eeg{width:100%; height:auto; aspect-ratio:5/4; display:block}

/* -- Galería de capturas --------------------------------------------------
   En la web una captura de la app se ve pequeña, y una captura densa a tamaño
   pequeño no dice NADA. Por eso son pocas, grandes, con su rótulo delante y su
   pie explicando qué hay que mirar. */

.galeria{display:grid; gap:36px 28px; margin-top:40px}
.toma{display:flex; flex-direction:column; gap:14px; align-items:start}
/* El <picture> ES un elemento de flex, y `align-items:start` lo encoge a su
   contenido en el eje transversal. Como el <img> de dentro pide `width:100%`,
   su ancho pasaba a depender del ancho del padre, que dependía del suyo: sin
   nada que rompiera el círculo, la caja colapsaba a los 2 px de los bordes.
   Las tres capturas de la app se quedaban en una astilla invisible — y, al no
   tener caja, `loading="lazy"` no llegaba a pedir el fichero NUNCA, así que
   tampoco había imagen rota que delatara el fallo: la sección «cómo se ve»
   simplemente no enseñaba nada. El <picture> necesita anchura propia; el tope
   por imagen sigue viviendo en `.toma img` de más abajo. */
.toma picture{align-self:stretch; display:block}
.toma img{
  width:100%; border-radius:var(--r-panel);
  border:1px solid var(--line-hi); background:var(--bg-2);
}
/* Dos retratos y un apaisado NO caben en tres columnas iguales: o el Mac queda
   ridículo al lado de dos teléfonos, o los teléfonos salen enormes. Van en dos
   filas — los dos móviles arriba, el Mac ancho debajo — y cada imagen tiene su
   tope de anchura para que se vea a un tamaño en el que se lea algo. */
@media (min-width:820px){
  .galeria{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start}
  .toma:not(.toma--ancha) img{max-width:340px}
  .toma--ancha{grid-column:1 / -1}
  .toma--ancha img{max-width:780px}
}
.toma figcaption{max-width:46ch}
.toma figcaption{font-size:var(--fs-small); color:var(--dim)}
.toma figcaption b{
  display:block; font-family:var(--f-mono); font-weight:700;
  font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin-bottom:5px;
}

/* -- Cifras de la app ----------------------------------------------------- */

.cifras{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:36px}
@media (min-width:560px){ .cifras{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .cifras{grid-template-columns:repeat(4,1fr)} }
.cifra{background:var(--bg-1); padding:22px 20px}
.cifra__v{
  font-family:var(--f-mono); font-weight:700; font-size:30px;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--ink);
}
.cifra__k{
  display:block; margin-top:6px;
  font-family:var(--f-mono); font-weight:500; font-size:var(--fs-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}

/* -- Métricas en vivo (Supabase; ids que espera /metrics.js) --------------- */

.vivo{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-top:28px}
.vivo__punto{
  width:8px; height:8px; border-radius:50%; background:var(--faint); flex:none;
  transition:background .3s ease;
}
.vivo__punto.on{background:var(--safe); animation:latido 2.4s infinite}
@keyframes latido{
  0%{box-shadow:0 0 0 0 rgba(76,225,143,.5)}
  70%{box-shadow:0 0 0 8px rgba(76,225,143,0)}
  100%{box-shadow:0 0 0 0 rgba(76,225,143,0)}
}
.vivo__dato{font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--faint)}
.vivo__dato b{color:var(--dim); font-weight:700; font-variant-numeric:tabular-nums}


/* == 9. PÁGINAS DE DOCUMENTO ===============================================
   /privacy, /support, /terms y lo que venga. Medida corta, jerarquía sobria y
   CERO humor: son las páginas donde el tono va a cero. */

.doc{padding-block:clamp(48px,7vw,80px) var(--sec-pad); max-width:76ch}
.doc h1{font-size:clamp(32px,4vw,46px); margin-bottom:12px}
.doc__fecha{
  font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--faint);
  margin-bottom:36px;
}
.doc h2{
  font-size:22px; line-height:1.3; margin-top:44px; margin-bottom:10px;
  letter-spacing:-.01em;
}
.doc h3{font-size:18px; margin-top:28px; margin-bottom:8px}
.doc p,.doc li{color:var(--dim)}
.doc p+p{margin-top:14px}
.doc ul{list-style:disc; padding-left:22px; margin-top:12px}
.doc li+li{margin-top:8px}
.doc__caja{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-panel); padding:20px 22px; margin-block:26px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.doc__caja p{color:var(--ink)}
.doc code{
  font-family:var(--f-mono); font-size:.9em;
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-chip); padding:1px 5px;
}
.doc__volver{margin-top:52px; display:inline-block}

/* Una cita literal de un texto que manda en otro sitio (la licencia tal y como
   la enseña la app). Va marcada como cita PARA QUE SE VEA que es una cita: si
   el sitio y la app dicen cosas distintas, manda la app, y quien lo lea tiene
   que poder saber qué parte es copia exacta y qué parte es explicación. */
.doc__cita{
  border-left:3px solid var(--alpha-deep);
  background:var(--bg-1);
  border-radius:0 var(--r-panel) var(--r-panel) 0;
  padding:20px 22px; margin-block:20px;
}
.doc__cita p{color:var(--ink)}
.doc__cita .dato{margin-bottom:12px}

/* -- Ficha de autor (/creditos) -------------------------------------------
   Los selectores del nombre llevan `.doc` delante a propósito: la ficha vive en
   una página de documento y `.doc h3` (0-1-1) le ganaría a `.autor__n` (0-1-0)
   el tamaño y los márgenes. Es el único sitio del sistema donde hace falta.

   El filete de color del retrato NO es adorno: es el mismo que la app le pone a
   cada autor en su pantalla de Créditos —cian para Jophiel, dorado para
   Ricardo, CreditsView.swift—, así que quien viene de la app reconoce la ficha
   antes de leer el nombre. */
.autor{display:flex; gap:18px; align-items:flex-start}
.autor+.autor{margin-top:24px; padding-top:24px; border-top:1px solid var(--line)}
.autor>picture{flex:none}
.autor__foto{
  width:76px; height:76px; object-fit:cover;
  border-radius:var(--r-panel); border:2px solid var(--alpha);
  background:var(--bg-2);
}
.autor--gold .autor__foto{border-color:var(--gold)}
.doc .autor__n{
  font-family:var(--f-display); font-weight:800; font-size:19px;
  line-height:1.2; letter-spacing:-.01em; color:var(--ink);
  margin:0 0 5px;
}
.autor__rol{
  display:block; font-family:var(--f-mono); font-weight:700;
  font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase;
  color:var(--alpha);
}
.autor--gold .autor__rol{color:var(--gold)}
.doc .autor__d{color:var(--dim); font-size:var(--fs-small); margin-top:9px}
@media (max-width:479px){
  .autor{gap:14px}
  .autor__foto{width:58px; height:58px}
}

/* Página 404. */
.perdido{
  min-height:62vh; display:grid; place-content:center; text-align:center;
  padding-block:var(--sec-pad);
}
.perdido .numeral{color:var(--faint); margin-bottom:8px}


/* == 10. TEMARIO Y LISTAS (/curso, /contacto) ==============================
   Lo único que las dos páginas nuevas necesitaban y el sistema no tenía. Todo
   lo demás —secciones, carril, paneles, cifras, avisos, botones— se reutiliza
   tal cual. */

/* -- La lista con viñeta --------------------------------------------------
   El reinicio (§2) deja sin viñeta y sin sangría cualquier <ul class="…">, que
   es lo que se quiere en los menús y en el pie. Cuando la lista es de verdad
   una enumeración —los datos que hay que poner en un correo, por ejemplo— hace
   falta recuperarla. `.doc ul` ya lo hacía para las páginas de documento; esto
   es lo mismo para una lista dentro de un .panel o de una sección.

   VA CALIFICADA COMO `ul.lista`, Y NO COMO `.lista` A SECAS, A PROPÓSITO. El
   reinicio usa `ul[class]`, que puntúa (0,1,1): una clase suelta puntúa (0,1,0)
   y PIERDE, así que `.lista` se quedaba sin viñeta y sin sangría sin avisar de
   nada. Con el tipo delante empata a (0,1,1) y gana por venir después. Es el
   mismo motivo por el que `.doc ul` funciona. Medido antes y después. */
ul.lista{list-style:disc; padding-left:20px; margin-top:12px}
ul.lista li{color:var(--dim); font-size:var(--fs-small)}
ul.lista li+li{margin-top:7px}
ul.lista li::marker{color:var(--faint)}

/* -- EL TEMARIO -----------------------------------------------------------
   Trece módulos con su reparto de horas y contenidos. NO es una <table>: a
   375 px una tabla de seis columnas o se sale de la pantalla o se lee con
   lupa, y esta es una página que va a abrir gente en el móvil, entre casos.
   Cada módulo es una fila apilable —identificador en mono a la izquierda,
   título, descripción y la línea de conteos debajo—, con el mismo tratamiento
   de rejilla de 1 px que .cifras: el fondo del contenedor asoma por los huecos
   y hace de filete sin sembrar la página de <hr>.

   Las filas van sobre --panel, no sobre --bg-1, para que el bloque se lea igual
   en una .seccion y en una .seccion--alt (en la franja alterna, unas filas de
   --bg-1 se fundirían con el fondo). Es además el color sobre el que está
   medido --faint, que es lo que usa la línea de conteos. */
.temario{
  display:grid; gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-left:3px solid var(--line-hi);   /* el color lo pone el arco */
  margin-top:14px;
}
/* Los tres arcos del temario (A/B/C) con el color que ya tienen en la app
   (CursoArco.color en CodigoAlfa/Curso/CursoModels.swift): menta, turquesa y
   violeta. Es un filete de 3 px, no un fondo: la regla de que la rampa y los
   colores de marca no se usan como relleno de tarjeta sigue en pie. */
.temario--a{border-left-color:var(--mint)}
.temario--b{border-left-color:var(--teal)}
.temario--c{border-left-color:var(--violet)}

.mod{
  background:var(--panel);
  padding:16px 20px;
  display:grid; gap:3px 14px;
  grid-template-columns:auto minmax(0,1fr);
}
.mod__id{
  font-family:var(--f-mono); font-weight:700; font-size:var(--fs-mono);
  font-variant-numeric:tabular-nums; color:var(--faint);
  min-width:2.6em; padding-top:2px;
}
.mod__t{
  font-family:var(--f-display); font-weight:600; font-size:var(--fs-h3);
  line-height:1.25; letter-spacing:-.01em; color:var(--ink);
}
/* La descripción y los conteos van bajo el título, no bajo el identificador:
   la columna del identificador es un carril, no una celda. */
.mod__d{grid-column:2; color:var(--dim); font-size:var(--fs-small); max-width:74ch}
.mod__meta{
  grid-column:2; margin-top:4px;
  font-family:var(--f-mono); font-size:var(--fs-micro); letter-spacing:.08em;
  color:var(--faint); font-variant-numeric:tabular-nums;
}