:root {
  /* ─── Familias ────────────────────────────────────────── */
  --font-display:  'Newsreader', Georgia, serif;
  --font-body:     'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:     'IBM Plex Mono', ui-monospace, monospace;

  /* ─── Escala ──────────────────────────────────────────── */
  --font-display-size:   72px;  --font-display-lh:  0.95;  --font-display-weight: 500;
  --font-h1-size:        48px;  --font-h1-lh:       1.05;  --font-h1-weight:      500;
  --font-h2-size:        32px;  --font-h2-lh:       1.15;  --font-h2-weight:      500;
  --font-h3-size:        22px;  --font-h3-lh:       1.25;  --font-h3-weight:      500;
  --font-body-lg-size:   18px;  --font-body-lg-lh:  1.55;  --font-body-lg-weight: 400;
  --font-body-size:      16px;  --font-body-lh:     1.55;  --font-body-weight:    400;
  --font-caption-size:   13px;  --font-caption-lh:  1.45;  --font-caption-weight: 500;

  /* ─── Tracking ────────────────────────────────────────── */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.16em;   /* uppercase eyebrows */
}

/* ─── Clases utilitarias ─────────────────────────────────── */
.text-display {
  font-family: var(--font-display);
  font-size:   var(--font-display-size);
  line-height: var(--font-display-lh);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.text-h1 {
  font-family: var(--font-display);
  font-size:   var(--font-h1-size);
  line-height: var(--font-h1-lh);
  font-weight: var(--font-h1-weight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.text-h2 {
  font-family: var(--font-display);
  font-size:   var(--font-h2-size);
  line-height: var(--font-h2-lh);
  font-weight: var(--font-h2-weight);
  letter-spacing: -0.015em;
  color: var(--color-text);
}

.text-h3 {
  font-family: var(--font-display);
  font-size:   var(--font-h3-size);
  line-height: var(--font-h3-lh);
  font-weight: var(--font-h3-weight);
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.text-body-lg {
  font-family: var(--font-body);
  font-size:   var(--font-body-lg-size);
  line-height: var(--font-body-lg-lh);
  font-weight: var(--font-body-lg-weight);
  color: var(--color-text);
}

.text-body {
  font-family: var(--font-body);
  font-size:   var(--font-body-size);
  line-height: var(--font-body-lh);
  font-weight: var(--font-body-weight);
  color: var(--color-text);
}

.text-caption {
  font-family: var(--font-body);
  font-size:   var(--font-caption-size);
  line-height: var(--font-caption-lh);
  font-weight: var(--font-caption-weight);
  color: var(--color-text-muted);
}

.text-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.italic-display { font-style: italic; color: var(--color-primary); }