/* tema.css — el tema de la página: la Averox saneada, los tokens de color y
   tipografía, y los tamaños de los titulares `display`. Lo comparten la home
   (`synthetrial_web_v0-4/index.html`) y la subpágina «Datos sintéticos»
   (`datos-sinteticos_v0-2.html`). Vivía inline en index.html hasta el 2026-09-02;
   se movió sin cambiar un valor para que las dos páginas lo compartan.
   Se enlaza DESPUÉS de landing.css y hero-marco.css: sus tamaños de titular
   sobreescriben los de landing.css, como hacían inline. */

/*
  ⚠️ EL FICHERO DE AVEROX DISPONIBLE ES LA VERSIÓN DEMO, NO LA COMERCIAL.

  Nueve caracteres — ! # $ & 4 6 9 ? @ — no traen su glifo: traen un dibujo
  de marca de agua que pone "PERSONAL USE ONLY · almarkhatype.com". Se
  detectan porque los diez comparten exactamente el mismo contorno (ancho de
  avance 1213 y 1370 puntos, frente a los ~636 de una letra normal).

  Mientras no llegue el fichero comercial se sirve `averox-saneado.woff2`,
  del que se han retirado esos glifos: el navegador cae al siguiente tipo de
  la pila solo para esos caracteres, en lugar de estampar la marca de agua.

  Para volver al fichero completo cuando esté: cambiar la URL a
  `averox.woff2` (regenerado desde el .ttf comercial) y borrar este bloque.
*/
@font-face {
  font-family: "Averox";
  src: url("../activos/fuentes/averox-saneado.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* El manual fija #1F1D2B como azul oscuro. Aquí el fondo sube un escalón
     hasta #282637 — misma familia, algo menos plomizo — y #1F1D2B pasa a ser
     el tono de los bordes y la viñeta. Es el punto más claro que mantiene el
     azul corporativo sobre él en contraste AA (4,75:1); a partir de ahí el
     texto tenue deja de cumplir. */
  --fondo: #282637;
  --fondo-hondo: #1F1D2B; /* azul oscuro oficial: bordes y viñeta */
  --fondo-alt: #DFE6EB;
  --texto: #DFE6EB;
  --texto-tenue: #7C95AD;
  --acento: #67E8F9;
  --acento-alt: #E879C7;

  --tipo-display: "Averox", "Space Grotesk", system-ui, sans-serif;
  /* ⚠️ Lato en Google Fonts sólo tiene 100/300/400/700/900: NO hay 600. Las
     páginas pedían `wght@300;400;600`, Google devolvía 300 y 400, y todo
     `font-weight: 600` salía en negrita SINTÉTICA —la 400 engordada, con las
     letras pegadas—: los h4/h5 de las cifras, las portadas del flujo, las
     tablas de «Análisis» y los títulos legales. Desde el 2026-09-14 se carga
     700 y la hoja pide 700. Un `600` nuevo cae a 700, pero escríbelo 700. */
  --tipo-cuerpo: "Lato", system-ui, sans-serif;
  --tipo-mono: "JetBrains Mono", ui-monospace, monospace;
  --peso-display: 400;
  --tracking-display: 0.1em;
  --caja-display: uppercase;
}

/* Averox tiene un interletraje muy abierto de origen y, en caja alta, ocupa
   bastante más ancho que una grotesca al mismo cuerpo. Con la escala común
   el titular se descolgaba a cinco líneas y empujaba la etiqueta fuera del
   encuadre, así que aquí baja un escalón y recorta el tracking. */
h1.display {
  font-size: clamp(29px, 5.1vw, 66px);
  letter-spacing: 0.05em;
  line-height: 1.14;
}
h2.display {
  font-size: clamp(25px, 3.5vw, 46px);
  letter-spacing: 0.06em;
  line-height: 1.16;
}
/* En las tarjetas el titular baja de tamaño; ahí Averox pierde legibilidad,
   así que ese nivel vuelve a Lato. h4.display va con él: es el titular de «El
   problema» dentro de «El principio», al mismo cuerpo que h3. */
h3.display,
h4.display {
  font-family: var(--tipo-cuerpo);
  font-weight: 300;
  text-transform: none;
  letter-spacing: -0.01em;
}

/* ── El tono claro ──────────────────────────────────────────────────────
   Las secciones que van entre «El principio» y «Análisis» llevan fondo
   claro, con dos transiciones estrelladas en las fronteras
   (`efectos/transicion/`). Aquí no hay una hoja aparte ni un segundo juego de
   reglas: landing.css no tiene ni un color literal, todo sale de tokens, así
   que basta con redefinirlos en el subárbol y la sección entera se adapta.

   ⚠️ Los tokens del tema oscuro NO valen aquí, y no es cuestión de gusto:
   sobre #DCEAF0 el azul corporativo da 2,53:1 y el cian de acento 1,18:1 —o
   sea, invisible—. Los de abajo son los mismos tonos del manual bajados de
   luminosidad hasta cumplir AA, medidos uno a uno:

     texto      #1F1D2B  13,45:1   (azul oscuro oficial)
     tenue      #536373   5,02:1   (azul corporativo bajado)
     acento     #126D7A   4,89:1   (el cian bajado)
     acento-alt #8A2F70   6,27:1   (el magenta bajado; era 2,14:1)

   El fondo #DCEAF0 es el gris claro del logotipo (#DFE6EB en el manual, medido
   #DFE5EA sobre el PNG oficial) con el tono girado 6° al cian y la saturación
   del 5 % al 8 %. Es EXTENSIÓN de paleta, igual que el cian y el magenta del
   hero, y queda sujeta a la decisión de marca abierta (wiki/decisiones.md §4).
   Aprobado por Julio el 2026-09-03. Todo el porqué, en
   contexto/seccion_3/SPEC-transicion.md. */
.tono-claro {
  --fondo: #DCEAF0;
  --fondo-hondo: #C8DDE6;  /* un escalón por debajo: bordes y viñetas */
  --fondo-alt: #F2F7FA;    /* las tarjetas, que así flotan sin sombra */
  --texto: #1F1D2B;
  --texto-tenue: #536373;
  --acento: #126D7A;
  --acento-alt: #8A2F70;
  background: var(--fondo);
  color: var(--texto);
}