/* ============================================================
   03-typography.css — Sistema tipográfico corporativo
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--bg);
}

h1, h2, h3, h4, h5, h6,
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--navy-900);
}

.eyebrow,
.ui {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mute);
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss01";
}

.h-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-weight: 700;
}

.h-mega {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.h-section {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--navy-900);
}

.body-lead {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink-soft);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Italic refinado — clase utilitaria */
.italic-accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--orange-500);
}

/* R-001: em itálico naranja compartido por todos los títulos de sección */
.hero__headline em,
.flow__title em,
.faq__title em,
.contact__title em,
.promo__title em,
.gracias-headline em,
.gracias-next__title em,
.gracias-explore__title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--orange-500);
}

/* Highlighter sutil corporativo (sin skew agresivo) */
.hl {
  background: linear-gradient(180deg, transparent 60%, var(--orange-100) 60%);
  color: var(--navy-900);
  padding: 0 0.08em;
  display: inline;
}

/* Underline en gradient (más corporativo) */
.u-grad {
  position: relative;
  display: inline-block;
  color: inherit;
}
.u-grad::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 4px;
  background: linear-gradient(90deg, var(--orange-500), var(--teal-500));
  border-radius: 4px;
}

/* Acento color naranja directo */
.t-orange { color: var(--orange-500); }
.t-teal { color: var(--teal-500); }
.t-navy { color: var(--navy-700); }

/* Variante reducida de h-section para contextos donde el headline es muy grande */
.h-section--sm {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
}