/* ==========================================================================
   typography-system.css — Escala tipográfica única para toda la web pública.
   Se carga la última. Usa :not(#_) para ganar a reglas de página sueltas
   sin recurrir a !important. Escala fluida: mismo criterio en móvil,
   tablet y escritorio.
   ========================================================================== */
:root {
  --ts-h1: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);        /* 32 → 52 */
  --ts-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem);      /* 24 → 40 */
  --ts-h3: clamp(1.125rem, 1.02rem + .45vw, 1.375rem);  /* 18 → 22 */
  --ts-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);    /* 17 → 20 */
  --ts-body: 1rem;                                       /* 16 */
  --ts-card: .9375rem;                                   /* 15 */
  --ts-small: .875rem;                                   /* 14 */

  --ts-h1-line: 1.08;
  --ts-h2-line: 1.15;
  --ts-h3-line: 1.3;
  --ts-lead-line: 1.6;
  --ts-body-line: 1.65;

  /* Reutiliza los tokens existentes para que lo que ya los consuma coincida */
  --hero-title-size: var(--ts-h1);
  --page-title-size: var(--ts-h1);
  --section-title-size: var(--ts-h2);
  --subsection-title-size: var(--ts-h3);
  --hero-intro-size: var(--ts-lead);
  --body-size: var(--ts-body);
  --small-size: var(--ts-small);
}

/* Títulos */
html body main h1:not(#_) {
  font-size: var(--ts-h1);
  line-height: var(--ts-h1-line);
  letter-spacing: -.035em;
}

html body main h2:not(#_) {
  font-size: var(--ts-h2);
  line-height: var(--ts-h2-line);
  letter-spacing: -.028em;
}

html body main h3:not(#_) {
  font-size: var(--ts-h3);
  line-height: var(--ts-h3-line);
  letter-spacing: -.018em;
}

/* Entradillas */
html body main :is(.hero-intro, .lead, .page-lead, [class*="-lead"], [class*="hero-copy"] > p, [class*="intro"]:is(p)):not(#_) {
  font-size: var(--ts-lead);
  line-height: var(--ts-lead-line);
}

/* Descripciones y párrafos generales */
html body main :is(p, li, dd, blockquote):not(
  [class*="meta"], [class*="caption"], [class*="kicker"], [class*="eyebrow"],
  [class*="note"], [class*="hint"], [class*="price"], [class*="badge"],
  [class*="label"], [class*="legal"], [class*="status"], [class*="error"],
  [class*="intro"], [class*="lead"], [class*="tag"], [class*="count"]
):not(#_) {
  font-size: var(--ts-body);
  line-height: var(--ts-body-line);
}

/* Texto dentro de tarjetas: un escalón por debajo, igual en todas las páginas */
html body main :is(.brand-card, .capability-card, .card, [class*="-card"]) :is(p, li):not(
  [class*="meta"], [class*="price"], [class*="badge"], [class*="label"], [class*="tag"]
):not(#_) {
  font-size: var(--ts-card);
  line-height: 1.6;
}

/* Texto secundario */
html body main :is(small, figcaption, .small, [class*="caption"], [class*="meta"], [class*="hint"]):not(#_) {
  font-size: var(--ts-small);
  line-height: 1.5;
}

/* Tarjetas del landing: títulos al mismo nivel que cualquier H3 */
html body main .capability-card h3:not(#_) {
  font-size: var(--ts-h3);
  line-height: var(--ts-h3-line);
}