/* Base: reset liviano, tipografía y utilidades. */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.6;
  font-feature-settings: 'ss01';
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease);
}

[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--ink-strong); line-height: 1.12; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 48px);
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}
@media (min-width: 700px) {
  .wrap { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
}
.narrow { max-width: 820px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.section-title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.section-title--sm { font-size: var(--fs-xl); letter-spacing: -0.02em; }
.section-subtitle { color: var(--ink-soft); font-size: var(--fs-lg); line-height: 1.5; max-width: 52ch; }
.section-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }

.icon { flex: none; }
.prose { display: grid; gap: var(--s-4); max-width: 65ch; color: var(--ink); }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--on-ink); padding: 10px 16px; border-radius: var(--r-control);
}
.skip-link:focus { top: 12px; }