/* ============================================================
   02 · BASE — reset, elementos base y escala tipográfica
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

a, button { cursor: none; }
::selection { background: var(--gold); color: var(--bg); }

/* --- Jerarquía semántica base (peso/familia, NO tamaño) ---
   El tamaño se aplica con las utilidades .t-* para desacoplar
   nivel SEO del tamaño visual. */
h1 { font-family: var(--font-display); font-weight: 400; }
h2 { font-family: var(--font-display); font-weight: 500; }
h3 { font-family: var(--font-display); font-weight: 500; }
h4 { font-family: var(--font-display); font-weight: 400; }
h5, h6 { font-family: var(--font-display); font-weight: 500; }
strong, b { font-weight: 900; }

/* ============================================================
   ESCALA TIPOGRÁFICA — utilidades reutilizables
   Aplicá el tag correcto por jerarquía y la clase por tamaño:
   p.ej.  <h2 class="t-display-xl">  ó  <div class="t-stat">
   ============================================================ */
.t-display-xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display-xl);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.t-display-l {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-display-l);
  line-height: 1.0;
  letter-spacing: -0.02em;
}
.t-display-m {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display-m);
  line-height: 0.94;
  letter-spacing: -0.035em;
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.t-stat {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-stat);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold);
}
.t-body-lg { font-size: var(--t-body-lg); line-height: 1.7; }
.t-body    { font-size: var(--t-body); line-height: 1.6; }
.t-body-sm { font-size: var(--t-body-sm); line-height: 1.7; color: var(--ink-dim); }
.t-caption { font-size: var(--t-caption); line-height: 1.6; color: var(--ink-dim); }
.t-eyebrow {
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Eyebrow de sección — compartido por todas las páginas */
.section-eyebrow {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 48px;
}

/* Acentos compartidos */
.gold { color: var(--gold); }
em.accent, .accent-em { font-style: italic; color: var(--gold); }