/* Base: reinicio, tipografía, contenedor y secciones. */
/* Ajustes que el contenedor de la página aplica por defecto, repetidos aquí para que cada página funcione sola. */
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  background: var(--surface); z-index: 40;
}
h1, h2, h3, h4 { font-family: var(--f-display); margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wrap {
  width: 100%; max-width: 1120px; margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.mono { font-family: var(--f-mono); }
.eyebrow {
  font: 500 .75rem/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.h2 {
  font-weight: 800; font-stretch: 112%; font-size: clamp(1.75rem, 4.2vw, 2.7rem); line-height: 1.04; letter-spacing: -.01em;
}
.lead { color: var(--muted); font-size: 1.0625rem; max-width: 62ch; }
.sec { padding-block: clamp(56px, 8vw, 100px); scroll-margin-top: 110px; }
.sec-head { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 44px); }
.alt { background: var(--bg-alt); }