/* ───────────────────────────────────────────────────────────
   TYPOGRAPHY
   Display · Salvaterra Alt Rd   (titulares)
   Body    · Salvaterra          (texto y párrafos / UI)
   Calm, paused rhythm. Wide tracking on small labels (voyeur,
   technical), tight on big display. Lowercase-friendly.
   ─────────────────────────────────────────────────────────── */
:root {
  --font-display: "Salvaterra Alt Rd", "Salvaterra", system-ui, sans-serif;
  --font-body:    "Salvaterra", system-ui, -apple-system, sans-serif;

  /* Weights */
  --w-thin:     100; /* @kind font */
  --w-light:    300; /* @kind font */
  --w-regular:  400; /* @kind font */
  --w-semibold: 600; /* @kind font */
  --w-bold:     700; /* @kind font */
  --w-black:    900; /* @kind font */

  /* Type scale — fluid-ready px ramp (1.25 major-third-ish) */
  --fs-display-xl: 76px;  /* hero titulares */
  --fs-display-lg: 56px;
  --fs-display-md: 40px;
  --fs-display-sm: 30px;
  --fs-title:      24px;
  --fs-subtitle:   20px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    13px;
  --fs-label:      12px;  /* tracked technical labels */
  --fs-micro:      11px;

  /* Line heights */
  --lh-tight:   1.04; /* @kind font */
  --lh-snug:    1.18; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.62; /* @kind font */

  /* Letter-spacing — the brand's signature wide technical tracking */
  --ls-display: -0.01em; /* @kind font */
  --ls-normal:  0em; /* @kind font */
  --ls-wide:    0.12em; /* @kind font */
  --ls-wider:   0.24em; /* @kind font */
}

/* ---- Reusable type classes ---- */
.t-display-xl {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  text-wrap: balance;
}
.t-display-lg {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  text-wrap: balance;
}
.t-display-md {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--fs-display-md);
  line-height: var(--lh-snug);
  color: var(--text-strong);
  text-wrap: balance;
}
.t-display-sm {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--fs-display-sm);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
.t-title {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
.t-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
.t-body-lg {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
.t-caption {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}
/* Eyebrow / kicker — wide tracking, uppercase. The technical voice. */
.t-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-label);
  line-height: 1.2;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}