:root{
/* ══ LAS DOS FAMILIAS — Manual, sección 04 (p.13–14) ══════════════════
   Agrandir manda la jerarquía; DM Sans la sostiene. Regla de contraste:
   nunca dos familias con el mismo peso visual en un mismo bloque. */
--font-display:"Agrandir Grand","Agrandir",system-ui,sans-serif;  /* Heavy — titulares */
--font-title:"Agrandir",system-ui,sans-serif;                      /* Bold — subtítulos y rótulos */
--font-narrow:"Agrandir Narrow","Agrandir",system-ui,sans-serif;
--font-tight:"Agrandir Tight","Agrandir",system-ui,sans-serif;
--font-wide:"Agrandir Wide","Agrandir",system-ui,sans-serif;
--font-body:"DM Sans",system-ui,sans-serif;
--font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;

/* Pesos declarados en el manual. Agrandir: Heavy · ExtraBold · Bold ·
   Medium (ExtraBold y Medium no fueron entregados). DM Sans: Bold ·
   Regular, y nada más — no usar Light, Medium ni Black de DM Sans. */
--weight-heavy:800;
--weight-bold:700;
--weight-regular:400;
--weight-body:400;
--weight-body-bold:700;

/* ══ JERARQUÍA SUGERIDA (manual p.14) ═════════════════════════════════
   H1  Agrandir Heavy   tracking −3 %
   H2  Agrandir Bold    tracking +4 %
   H3  Agrandir Bold    tracking +16 %   (rótulo, en versalitas)
   Cuerpo  DM Sans Regular  interlínea 1,65
   Pie de foto y notas  DM Sans Regular en Gris Medio */
--track-display:-0.03em;   /* H1 — −3 % */
--track-title:0.04em;      /* H2 — +4 % */
--track-rotulo:0.16em;     /* H3 — +16 % */
--track-body:0em;
--track-eyebrow:var(--track-rotulo);
--track-label:0.08em;      /* derivado de interfaz: etiquetas de control */

--leading-display:0.94;
--leading-title:1.15;
--leading-body:1.65;       /* manual: entre 1,6 y 1,7 en bloques largos */
--leading-tight:1.25;

/* Escala — pasos de módulo */
--size-display-1:80px;
--size-display-2:56px;
--size-display-3:40px;
--size-title-1:32px;
--size-title-2:24px;
--size-title-3:20px;
--size-rotulo:13px;
--size-body-lg:18px;
--size-body:16px;
--size-body-sm:14px;
--size-caption:12px;
--size-eyebrow:13px;

/* Recetas listas para usar */
--type-h1:var(--weight-heavy) var(--size-display-2)/var(--leading-display) var(--font-display);
--type-h2:var(--weight-bold) var(--size-title-1)/var(--leading-title) var(--font-title);
--type-rotulo:var(--weight-bold) var(--size-rotulo)/1.2 var(--font-title);
--type-display-1:var(--weight-heavy) var(--size-display-1)/var(--leading-display) var(--font-display);
--type-display-2:var(--weight-heavy) var(--size-display-2)/var(--leading-display) var(--font-display);
--type-display-3:var(--weight-heavy) var(--size-display-3)/var(--leading-title) var(--font-display);
--type-title-1:var(--weight-bold) var(--size-title-1)/var(--leading-title) var(--font-title);
--type-title-2:var(--weight-bold) var(--size-title-2)/var(--leading-title) var(--font-title);
--type-title-3:var(--weight-bold) var(--size-title-3)/var(--leading-tight) var(--font-title);
--type-body-lg:var(--weight-regular) var(--size-body-lg)/var(--leading-body) var(--font-body);
--type-body:var(--weight-regular) var(--size-body)/var(--leading-body) var(--font-body);
--type-body-sm:var(--weight-regular) var(--size-body-sm)/var(--leading-body) var(--font-body);
--type-caption:var(--weight-regular) var(--size-caption)/1.5 var(--font-body);
--type-eyebrow:var(--weight-bold) var(--size-eyebrow)/1.2 var(--font-title);
--type-figure:var(--weight-heavy) var(--size-display-2)/1 var(--font-display);
--type-control:var(--weight-body-bold) 12px/1 var(--font-body);
}