/* =========================================================================
   TRAZENIA · TIPOGRAFÍA
   Archivo (ancho 112 %) para titulares — la misma con la que está construido
   el logotipo. IBM Plex Sans para texto. IBM Plex Mono para datos y etiquetas.
   ========================================================================= */

body {
  font-family: var(--texto);
  font-size: var(--t-16);
  line-height: 1.62;
  color: var(--tinta);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .display, .titulo {
  font-family: var(--display);
  font-stretch: 112%;
  font-variation-settings: "wdth" 112;
  text-wrap: balance;
  margin: 0;
}

/* Display · Archivo 700, −2 % de tracking, 1.1 de interlínea */
.display {
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.02;
}

/* Display contenido: el mismo peso y tracking, para columnas angostas donde
   el display completo se sale de su medida. */
.display--medio {
  font-size: clamp(2.125rem, 5vw, 4.25rem);
  line-height: 1.04;
}

/* Título de sección · Archivo 600, −1 % */
h2, .titulo-seccion {
  font-size: var(--t-seccion);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.08;
}

h3, .titulo-3 {
  font-size: var(--t-26);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.18;
}

h4, .titulo-4 {
  font-size: var(--t-21);
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.26;
}

p { margin: 0; }
p + p { margin-top: 1em; }

/* Entrada de sección: el párrafo grande que sigue al titular */
.lede {
  font-size: var(--t-21);
  line-height: 1.5;
  color: var(--tinta-media);
  max-width: 58ch;
  text-wrap: pretty;
}

.prosa {
  max-width: var(--ancho-lectura);
  color: var(--tinta-media);
  text-wrap: pretty;
}

.prosa strong,
.lede strong { color: var(--tinta); font-weight: 500; }

/* Dato / etiqueta · IBM Plex Mono 500, +8 %, mayúsculas */
.mono {
  font-family: var(--mono);
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-debil);
  font-variant-numeric: tabular-nums;
}

.mono--acento { color: var(--acento); }
.mono--senal { color: var(--senal); }
.mono--14 { font-size: var(--t-14); letter-spacing: 0.06em; }

/* Cifra grande de prueba */
.cifra {
  font-family: var(--display);
  font-stretch: 112%;
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: var(--t-44);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums lining-nums;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Enlace de texto: la subraya se dibuja como un trazo que crece */
.enlace {
  color: var(--acento);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--rapido) var(--curva);
  padding-bottom: 1px;
}
.enlace:hover,
.enlace:focus-visible { background-size: 100% 1px; }

::selection {
  background: var(--turquesa);
  color: var(--grafito);
}