/* Base: reseteo, tipografía y utilidades. */
*, *::before, *::after { box-sizing: border-box }
:root { font-size: clamp(100%, .5vw + 8.6px, 115%) }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 12px) }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 1.0625rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto }
a { color: inherit; text-decoration: none }
h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0 }
ul, ol { padding: 0; list-style: none }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer }
[hidden] { display: none !important }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 4px }
.contents { display: contents }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.wrap { max-width: 1400px; margin-inline: auto; padding-inline: var(--gut) }

/* grano de película sobre todo */
.grain {
  position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .9  0 0 0 0 .85  0 0 0 0 .75  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* tipografía */
/* .serif es el nombre histórico de la clase de títulos: hoy es la grotesca gruesa (Bricolage), sin cursiva */
.serif { font-family: var(--display); font-weight: 800; font-variation-settings: "opsz" 96; letter-spacing: -.03em; line-height: .98; text-wrap: balance }
.serif em { font-style: normal; font-weight: inherit; color: var(--bronze) }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 4px; font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze) }
::selection { background: var(--bronze); color: var(--cta-ink) }
/* palabras partidas para la animación de títulos */
/* el recorte deja lugar a las colas (g, p, q, y) de la grotesca gruesa, que bajan más que las de la serif anterior */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .06em .3em; margin: -.12em -.06em -.3em }
.wi { display: inline-block }
.vacio { color: var(--muted); padding: 24px 0 }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important }
}