/* tipografia.css · La pila de fuentes y la escala de tipo. NO toca publico/diseno/tokens.css (R1, byte a byte): redefine acá las DOS variables
   de fuente, después de que tokens.css ya cargó; los colores y los radios salen tal cual del token. Un color no es una fuente, así que V3
   (herramientas/verificar.mjs) no aplica a esa regla.

   Tanda visual 1 (docs/ESPEC_visual_tanda1.md): la pila EMPIEZA por las fuentes de marca de tokens.json (Baloo 2 en títulos, Nunito Sans en
   cuerpo) y sigue con las redondeadas del sistema. Desde el 2026-10-13 (con el sí de Christiam) las de marca SE CARGAN, del mismo origen: los
   dos .woff2 variables de /publico/fuentes/ (copiados tal cual; publico/fuentes/PROCEDENCIA.md trae origen, versión, tamaño, sha256 y licencia,
   y tests/unit/fuentes_procedencia.test.mjs los compara). La CSP sigue en `font-src 'self'`. `font-display: swap`: el texto se pinta de una vez
   con la fuente del sistema y cambia cuando llega la de marca (nunca texto invisible). El rango de `font-weight` es el del eje `wght` MEDIDO en
   cada archivo (Baloo 2: 400 a 800; Nunito Sans: 200 a 1000), no supuesto. El subconjunto latino trae ñ, ¿, ¡ y las vocales con tilde.
   tests/unit/css_cara.test.mjs vigila que toda `url(` de las hojas apunte a un archivo de este mismo origen que exista en el disco. */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/publico/fuentes/baloo-2-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/publico/fuentes/nunito-sans-latin-wght-normal.woff2") format("woff2-variations");
}
:root {
  --fuente-titulos: "Baloo 2", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --fuente-cuerpo: "Nunito Sans", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
}

/* Escala de tipo (§9.4 de la espec del MVP: mínimo 16 px de cuerpo). Tres escalones con carácter: el título de la pantalla, el de una sección
   y el de un bloque. Sin `text-wrap: balance`: en "Errores por ítem · SINT-B1-01" mandaba el punto medio al principio del segundo renglón. */
h1 {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
h2 {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

/* Texto de apoyo (lo que acompaña a un título: "2 estudiantes", "Pregunta 1 de 3", "Mide tu nivel con el examen de tu institución."). Antes
   iba en MAYÚSCULAS grises al 55 % (3,8:1 sobre blanco: no pasaba el 4,5:1) y una frase entera en mayúsculas pesaba más que su título. Ahora es
   una frase normal, más chica y más suave que el cuerpo, al 70 % (6:1 sobre blanco, 5,7:1 sobre el fondo crema). */
.texto-apoyo {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  color: color-mix(in srgb, var(--texto) 70%, white);
  margin: 0;
}