/* ==========================================================================
   El Ayudador de Pibes — Base
   Versión 1.0 · Fuente de verdad: docs/SISTEMA-VISUAL.md

   Este archivo consume exclusivamente las variables de tokens.css.
   Ningún color, tamaño, radio o espaciado literal se declara aquí.

   Fuentes IBM Plex Sans/Mono — SIL OFL 1.1, ver
   fonts/LICENSE-IBM-Plex-Sans.txt y fonts/LICENSE-IBM-Plex-Mono.txt.
   ========================================================================== */

/* --- Fuentes autoalojadas (subset latin) ----------------------------------- */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Reset mínimo ----------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
p,
figure {
  margin: 0;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

/* Oculta visualmente sin ocultar para lectores de pantalla. Los valores de
   1px son parte fija de la técnica de recorte, no una decisión de diseño —
   igual que los bordes de 1px, no salen de la escala de espaciado. */
.sr-solo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Tipografía base --------------------------------------------------------- */

body {
  background: var(--fondo);
  color: var(--texto-1);
  font-family: var(--fuente-texto);
  font-size: var(--txt-cuerpo);
  line-height: var(--interlinea-cuerpo);
}

h1,
h2,
h3 {
  font-weight: 600;
  line-height: var(--interlinea-titulo);
  letter-spacing: var(--tracking-titulo);
}

h1 {
  font-size: var(--txt-h1);
}

h2 {
  font-size: var(--txt-h2);
}

h3 {
  font-size: var(--txt-h3);
}

.txt-display {
  font-size: var(--txt-display);
  font-weight: 600;
  line-height: var(--interlinea-titulo);
  letter-spacing: var(--tracking-titulo);
}

.txt-micro {
  font-size: var(--txt-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-micro);
}

.txt-cuerpo-lg {
  font-size: var(--txt-cuerpo-lg);
}

/* --- Regla de la monoespaciada: toda cantidad va en Mono -------------------- */

.dato {
  font-family: var(--fuente-dato);
  font-size: var(--txt-dato);
  font-weight: 500;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.dato-peq {
  font-family: var(--fuente-dato);
  font-size: var(--txt-dato-peq);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.dato-micro {
  font-family: var(--fuente-dato);
  font-size: var(--txt-micro);
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* --- Layout ------------------------------------------------------------------ */

.contenedor {
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--esp-4);
}

@media (min-width: 600px) {
  .contenedor {
    padding-inline: var(--esp-6);
  }
}

@media (min-width: 1024px) {
  .contenedor {
    padding-inline: var(--esp-8);
  }
}

.medida-lectura {
  max-width: var(--medida-lectura);
}