/* ========================================================================== 
   Sistema tipografico global CEMER
   --------------------------------------------------------------------------
   Alcance: tokens tipograficos, escala fluida, line-height, letter-spacing,
   pesos y utilidades tipograficas puras para toda la web publica.

   Familias institucionales (fase P0 — auditoria de diseno 2026-07-27):
   superfamilia IBM Plex en tres cortes con esqueleto compartido.
   - IBM Plex Sans  -> interfaz, navegacion, cuerpo y titulos de seccion.
   - IBM Plex Serif -> momentos editoriales (hero, titulos de publicacion).
   - IBM Plex Mono  -> metadatos verificables (anios, DOI, contadores, fechas).

   Sustituye a Questrial + Montserrat + Inter + Playfair + Cinzel (5 familias
   en 2 peticiones). Motivo tecnico principal: Questrial se distribuye en un
   solo peso (400), por lo que las 17 reglas que le pedian 700/800 renderizaban
   negrita sintetica. IBM Plex ofrece 100-700 reales en los tres cortes.

   No define colores ni layout. Las hojas publicas consumen estos tokens para
   sostener una unica jerarquia editorial entre HOME, modulos internos y footer.
   ========================================================================== */

:root {
  /* --- Familias ---
     Fallback seguro: si IBM Plex no carga, se cae a la pila del sistema del
     mismo genero (sans -> sans, serif -> serif, mono -> mono), nunca a una
     familia que ya no se descarga. */
  --font-sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", Times, serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Alias semanticos: el CSS existente consume --font-heading / --font-body,
     se preservan para no reescribir 162 declaraciones en esta fase.
     --font-display queda reservado al serif editorial. */
  --font-display: var(--font-serif);
  --font-heading: var(--font-sans);
  --font-body:    var(--font-sans);

  /* --- Pesos ---
     Solo valores que la familia sirve realmente. 650/750/800 no existen en
     IBM Plex: pedirlos obliga al navegador a sintetizarlos. */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Escala fluida (clamp: minimo movil -> techo desktop grande) ---
     Techos aprobados en la fase P0 (reduccion ~25% respecto de la escala
     anterior): Hero 56 / H1 40 / H2 32 / H3 22 / H4 18 / body 17 / lead 19.
     Se conservan los nombres --text-* y se agregan alias --fs-* usados por
     el Home. */
  --text-hero:   clamp(2.5rem, 1.9rem + 2.6vw, 3.5rem);     /* 40px -> 56px */
  --text-h1:     clamp(2rem, 1.65rem + 1.6vw, 2.5rem);      /* 32px -> 40px */
  --text-h2:     clamp(1.625rem, 1.4rem + 1.0vw, 2rem);     /* 26px -> 32px */
  --text-h3:     clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);/* 19px -> 22px */
  --text-h4:     clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);  /* 17px -> 18px */
  --text-body:   1.0625rem;  /* 17px — no escala, legibilidad de parrafo */
  --text-small:  0.9375rem;  /* 15px */
  --text-lead:   clamp(1.125rem, 1.05rem + 0.3vw, 1.1875rem); /* 18px -> 19px */
  --text-button: 0.9375rem;  /* 15px */
  --text-caption: 0.8125rem; /* 13px */
  --text-meta: 0.875rem;    /* 14px */
  --text-overline: 0.75rem; /* 12px */

  /* Alias --fs-*: nomenclatura de la auditoria, misma fuente de verdad. */
  --fs-display:  var(--text-hero);
  --fs-h1:       var(--text-h1);
  --fs-h2:       var(--text-h2);
  --fs-h3:       var(--text-h3);
  --fs-h4:       var(--text-h4);
  --fs-lead:     var(--text-lead);
  --fs-body:     var(--text-body);
  --fs-sm:       var(--text-small);
  --fs-caption:  var(--text-caption);
  --fs-meta:     var(--text-meta);
  --fs-overline: var(--text-overline);

  /* --- Line-height --- */
  --leading-tight: 1.1;
  --leading-heading: 1.25;
  --leading-body: 1.6;

  /* --- Letter-spacing --- */
  --tracking-tight: 0;
  --tracking-body: 0;
  --tracking-wide: 0.05em;
  --tracking-button: 0.075em;
  --tracking-eyebrow: 0.14em;

  /* --- Medidas de lectura --- */
  --measure-body: 68ch;
  --measure-lead: 760px;
  --space-heading-stack: 0.75rem;
  --space-section-head: clamp(1.75rem, 2.8vw, 2.5rem);
}

/* --- Utilidades de familia --- */
.u-font-heading {
  font-family: var(--font-heading);
}

.u-font-body {
  font-family: var(--font-body);
}

/* --- Utilidades de escala (tipografia pura: tamano + line-height + peso) --- */
.u-text-hero {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: var(--fw-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.u-text-h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--fw-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.u-text-h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--fw-regular);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
}

.u-text-h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--fw-regular);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
}

.u-text-h4 {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--fw-regular);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
}

.u-text-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-light);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

.u-text-lead {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  font-weight: var(--fw-light);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

.u-text-small {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--fw-regular);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-body);
}

.u-text-button {
  font-family: var(--font-body);
  font-size: var(--text-button);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-button);
}

.u-text-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}