/* Reinicio, tipografía base y utilidades. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
html.is-locked { overflow: hidden; }
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.1; }
::selection { background: var(--accent); color: var(--accent-ink); }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
:root[data-theme="dark"] :focus-visible, :root:not([data-theme]) :focus-visible { outline-color: var(--accent); }

/* El contenedor es el que se pega arriba (un sticky solo dura lo que dura su padre) */
#site-top { position: sticky; top: 0; z-index: var(--z-header); min-height: var(--header-h); }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(40px, 6vw, 80px); }
.section--alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.pad-b { padding-bottom: var(--section-y); }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; font-weight: 700; }
.skip:focus { top: 12px; }

/* Titulares: Archivo condensado, mayúsculas, apretados */
.display, .h1, .h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 72%;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: .94;
}
.h1 { font-size: clamp(3rem, 9vw, 7.5rem); }
.h2 { font-size: clamp(2.25rem, 5.6vw, 4.5rem); }
.h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 78%; text-transform: uppercase; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--muted); max-width: 46ch; line-height: 1.55; }
.muted { color: var(--muted); }
.kicker { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.tnum { font-variant-numeric: tabular-nums; }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 0; font-size: .85rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-inline: 10px; color: var(--line-2); }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Transición suave entre páginas (navegadores que la soportan) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
}