/* ============================================================================
   BASE — reinicio, tipografía y utilidades
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* el ancla no queda debajo de la cabecera fija */
  scroll-padding-top: calc(var(--header-h) + var(--space-s));
}

.seccion__encabezado > h2,
.seccion__encabezado > h2 * {
    transform: initial !important;
}
body {
  min-height: 100svh;
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.beforeTop::before {
   top: -80px !important;
}
img, picture, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

/* [hidden] tiene que ganar siempre: los componentes con display propio
   (botones, pasos del formulario, fichas de sede) lo anulaban. */
[hidden] { display: none !important; }

input, button, textarea, select { font: inherit; color: inherit; }

p, li, figcaption { text-wrap: pretty; }

/* ── Titulares ─────────────────────────────────────────────────────────
   A tamaño de cartel el interlineado se cierra y el tracking se aprieta:
   sin eso, un titular grande se deshilacha y vuelve a parecer un folleto. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-wrap: balance;
  font-optical-sizing: auto;
}
/* A tamaño de cartel baja el peso y se aprieta el tracking: Fraunces 600 a
   88 px se empasta. A tamaño de párrafo ocurre lo contrario. */
h1 { font-size: var(--step-3);  font-weight: 500; line-height: .98; letter-spacing: -0.035em; }
h2 { font-size: var(--step-2);  font-weight: 500; line-height: 1.0;  letter-spacing: -0.03em; }
h3 { font-size: var(--step-1b); font-weight: 600; line-height: 1.1;  letter-spacing: -0.02em; }
h4 { font-size: var(--step-0);  font-weight: 600; line-height: 1.3;  letter-spacing: -0.005em; }

/* Titular mayor: solo en las tres secciones ancla (agenda, sedes, carta).
   Tres niveles reales de titular en lugar de uno repetido trece veces. */
.titular--mayor { font-size: var(--step-3); }

/* ── Enlaces ───────────────────────────────────────────────────────────── */
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--primary-strong); }

/* ── Foco visible ──────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.en-banda :focus-visible,
.banda-oscura :focus-visible { outline-color: var(--focus-invert); }

::selection { background: var(--primary-tint); color: var(--ink); }

/* ── Utilidades ────────────────────────────────────────────────────────── */
.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.salto-contenido {
  position: absolute;
  top: var(--space-2xs); left: var(--space-2xs);
  z-index: 200;
  padding: var(--space-2xs) var(--space-s);
  background: var(--surface);
  color: var(--ink);
  border: var(--rule) solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
  transform: translateY(-160%);
}
.salto-contenido:focus { transform: none; }

/* Rótulo en versalitas: el sistema de nomenclatura de secciones.
   Pequeño y muy abierto: su trabajo es señalar, no competir con el titular.
   Va en --primary-strong, no en gris: son treinta apariciones repartidas por
   la página, y son las que meten el color de la marca en el contenido en vez
   de dejarlo solo en los botones. */
.rotulo {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--primary-strong);
  line-height: 1.3;
}
.rotulo--claro { color: var(--gold-invert); }

/* Numeración de secuencia, tratada como grafismo.
   En --primary-strong y nunca en --gold: el oro no es color de texto. */
.indice {
  font-family: var(--font-display);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--primary-strong);
}

.texto-lectura {
  font-family: var(--font-read);
  font-size: var(--step-1);
  line-height: 1.62;
  max-width: var(--measure);
}
.texto-lectura p + p { margin-top: var(--space-s); }

.cifras { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.medida { max-width: var(--measure); }

/* Filete horizontal fino, la única jerarquía junto al color de fondo */
.filete {
  display: block;
  height: var(--rule);
  background: var(--line);
  border: 0;
}
.filete--oro { background: var(--gold); }
.filete--corto { width: 64px; height: 2px; background: var(--gold); }

/* Ornamento entre secciones: lirio o corazón del escudo, pequeño */
.ornamento {
  display: block;
  width: 24px; height: 24px;
  margin-inline: auto;
  color: var(--gold);
}

/* Cita: comillas latinas colgadas */
blockquote { hanging-punctuation: first; }

.itálica, .cursiva { font-style: italic; }

/* ── Preferencia de movimiento reducido ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}