/* ══════════════════════════════════════════════════════════════════════
   GRUPO PRODI — Sistema tipográfico homologado (fuente única de verdad)
   ----------------------------------------------------------------------
   Display / títulos : Lora      (≈ Tiempos, la serif editorial de J.P. Morgan;
                                   Lora = 85% de similitud con Tiempos)
   Cuerpo / UI        : Libre Franklin (grotesque neutra, registro institucional;
                                   maridaje análogo al Söhne/Founders del Tiempos real)
   Rótulos/eyebrows   : se quedan en sans (Libre Franklin), decisión de Carlos.
   Escala             : major third 1.25 (Bringhurst) — ver atomic_design_brad_frost.md
   Principio          : "fuerte contraste de escala" — ver blueprint_rediseno...md
   Doc / fuentes      : knowledge/web_development/design_systems/tipografia.md
   ----------------------------------------------------------------------
   Este archivo se carga DESPUÉS del <style> inline de cada página, por lo que
   su :root sobreescribe las variables de fuente y homologa los pesos de título
   en las 15 páginas sin tocar el layout ni los colores.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --serif: 'Lora', Georgia, serif;
  --sans:  'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
}

/* Títulos: serif semibold + tracking editorial → contraste de escala fuerte.
   !important porque cada página define sus pesos en CSS inline propio. */
h1, h2, h3,
.h-title, .div-title, .sn-title, .st, .s-title, .div-card-h, .div-card h3,
.ind-card h3, .fin-card h3, .why-item h4 {
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.018em;
}

.h-title { line-height: 1.05; }

/* Itálicas de énfasis en títulos (la <em> dorada de los heros) */
h1 em, h2 em,
.h-title em, .st em, .s-title em, .div-title em {
  font-style: italic;
  font-weight: 600;
}

/* Cuerpo: grotesque neutra, lectura cómoda y sin tracking forzado */
body { font-weight: 400; }
p, li, .s-desc, .hero-desc, .div-card-p { letter-spacing: 0; }