*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
.img { width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
figcaption { font-size: inherit; }

.page { position: relative; }
.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }

/* Tipografía utilitaria */
.h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.015em; }
.body-lg { font-size: var(--fs-body-lg); line-height: 1.55; color: var(--ink-soft); max-width: 36em; }
.is-dark .body-lg { color: var(--on-dark-soft); }
.label {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); display: inline-block; line-height: 1;
}
.label--dark, .is-dark .label { color: var(--on-dark-faint); }
.caption { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.01em; color: var(--ink-faint); margin-top: 14px; line-height: 1.4; }
.caption--center { text-align: center; }
.is-dark .caption { color: var(--on-dark-faint); }

/* Superficies oscuras */
.is-dark { background: var(--dark); color: var(--on-dark); }

/* Ratios cerrados del sistema */
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-21-9 { aspect-ratio: 21 / 9; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-3-4 { aspect-ratio: 3 / 4; }
.ratio-16-10 { aspect-ratio: 16 / 10; }
.ratio-screen { aspect-ratio: auto; min-height: 100svh; }

/* Section header */
.sh { max-width: 1040px; margin-bottom: var(--block); }
.sh--wide { max-width: none; }
.sh--center { margin-inline: auto; text-align: center; }
.sh__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.025em; max-width: 14em; }
.sh--center .sh__title { margin-inline: auto; }
.sh__body { margin-top: clamp(20px, 2.4vw, 32px); font-size: var(--fs-body-lg); line-height: 1.55; color: var(--ink-soft); max-width: 34em; }
.sh--dark .sh__body { color: var(--on-dark-soft); }
.sh--center .sh__body { margin-inline: auto; }
.sh--center .sh__title { max-width: 16em; }

/* Asset wrapper */
.asset { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; container-type: inline-size; }
.asset__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms var(--ease); }
.asset--contain .asset__media { object-fit: contain; }
.asset--loaded .asset__media { opacity: 1; }
.asset--placeholder .asset__media { pointer-events: none; }

/* Navegación lateral */
.sidenav {
  position: fixed; left: clamp(14px, 1.6vw, 28px); top: 50%; transform: translateY(-50%); z-index: 50;
  display: flex; flex-direction: column; gap: 10px; mix-blend-mode: difference; color: #fff;
}
.sidenav__item { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.45; transition: opacity var(--dur-fast); }
.sidenav__item.is-active, .sidenav__item:hover { opacity: 1; }
.sidenav__tick { width: 14px; height: 1px; background: currentColor; transition: width 400ms var(--ease); }
.sidenav__item.is-active .sidenav__tick { width: 26px; }
.sidenav__label { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width 400ms var(--ease); }
.sidenav:hover .sidenav__label { max-width: 180px; }
@media (max-width: 1180px) { .sidenav { display: none; } }

::selection { background: var(--brand-accent); color: #fff; }