/* ==========================================================================
   Tipografía
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-black);
  background: var(--color-white);
}

h1, h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: 700; /* Helvetica Neue Bold */
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

.logo-wordmark {
  font-family: var(--font-body);
  font-weight: 700; /* Helvetica Neue Bold: no existe un corte "Black" no-condensado */
  letter-spacing: -0.03em;
}

.display-xl {
  font-family: var(--font-display);
  font-weight: 400; /* Helvetica Neue Regular: mayúscula + tamaño grande, no un corte Black */
  font-size: var(--fs-display-xl);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  /* Red de seguridad para responsive: son palabras sueltas en mayúscula
     ("CAPACIDADES", "EXPERIENCIA") y el clamp de --fs-display-xl tiene un
     piso fijo de 3.5rem/56px que ya no baja más aunque la pantalla se
     angoste — en celulares de gama angosta (320-375px) esa palabra sola,
     sin ningún espacio donde partir, puede llegar a medir más que el
     ancho disponible. Sin esto se saldría del contenedor (o forzaría
     scroll horizontal de toda la página); con esto, en el peor caso pasa
     a 2 líneas en vez de recortarse o desbordar — nunca se pierde texto.
     En cualquier pantalla donde ya cabía en una línea (todo el resto del
     sitio) esto no cambia nada visualmente. */
  overflow-wrap: break-word;
  word-break: break-word;
}

.stat-number {
  font-family: var(--font-display);
  font-weight: 400; /* Helvetica Neue Regular: tamaño grande, no un corte Black */
  font-size: var(--fs-stat);
  line-height: 0.85;
  color: var(--color-blue);
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 400; /* Helvetica Neue Regular, no Medium */
  letter-spacing: normal; /* sin kerning ampliado: el que trae la fuente por defecto */
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

.eyebrow--on-dark { color: rgba(255, 255, 255, 0.6); }
.eyebrow--on-color { color: rgba(255, 255, 255, 0.75); }

.text-lede {
  font-size: var(--fs-body-lg);
  line-height: 1.4;
}

.text-muted { color: var(--color-muted-on-white); }

.byline {
  font-size: var(--fs-small);
  font-weight: 400; /* Helvetica Neue Regular */
  letter-spacing: normal; /* sin kerning ampliado: el que trae la fuente por defecto */
  text-transform: uppercase;
  color: var(--color-muted-on-black);
}