/* =============================================================
   Tipografía — Montserrat para la interfaz, INTRO RUST para marca
   ============================================================= */

/* INTRO RUST es una fuente comercial. Cuando tengas el archivo,
   cópialo a assets/fonts/IntroRust.woff2 y descomenta la línea url(). */
@font-face {
  font-family: "Intro Rust";
  src: local("Intro Rust"), local("IntroRust-Base")
    /* , url("../assets/fonts/IntroRust.woff2") format("woff2") */;
  font-weight: 700 900;
  font-display: swap;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--color-text);
}

h1, h2, h3, h4 {
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
  color: inherit;
}

/* H1 de marca: INTRO RUST 700, 32–40px */
.h1, h1 {
  font-family: var(--font-brand);
  font-weight: var(--weight-brand);
  font-size: clamp(var(--text-3xl), 5vw, 40px);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}
/* H2: Montserrat 700, 26–32px */
.h2, h2 {
  font-weight: var(--weight-bold);
  font-size: clamp(26px, 3.4vw, 32px);
}
/* H3: Montserrat 600, 20–24px */
.h3, h3 {
  font-weight: var(--weight-semibold);
  font-size: clamp(var(--text-xl), 2.4vw, var(--text-2xl));
}
/* H4: Montserrat 600, 17–20px */
.h4, h4 {
  font-weight: var(--weight-semibold);
  font-size: clamp(17px, 1.8vw, var(--text-xl));
}

/* Las clases .h2/.h3/.h4 fijan el estilo Montserrat aunque el elemento sea
   un h1 (p. ej. el título de un documento, que puede ser largo). */
.h2, .h3, .h4 {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
}

/* Titular de portada (landing) — estructura Tomorro: display pesado,
   interlineado muy apretado, una palabra en lima como acento. */
.display {
  font-family: var(--font-brand);
  font-weight: var(--weight-brand);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

p { text-wrap: pretty; }
.lead { font-size: var(--text-lg); line-height: var(--leading-body); }
.small, small { font-size: var(--text-sm); }
.xsmall { font-size: var(--text-xs); }
.muted { color: var(--color-text-secondary); }
strong, .emphasis { font-weight: var(--weight-medium); }
b { font-weight: var(--weight-semibold); }

.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-primary);
}

.num {
  font-variant-numeric: tabular-nums;
}