*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  font-variant-ligatures: no-common-ligatures;
  margin: 0; background: var(--paper); color: var(--ink);
  font: 300 var(--fs-body)/1.618 var(--sans); letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
picture { display: block; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
dl, dd, figure, blockquote { margin: 0; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
::selection { background: var(--olive); color: #fff; }
main { display: block; }
main:focus { outline: none; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 200; background: var(--ink); color: #fff; padding: 0.6rem 1rem; }
.skip:focus { top: 1rem; }

/* ---- Tipografía ------------------------------------------------------------------------------- */
.kicker {
  display: flex; align-items: center; gap: 0.75em; margin: 0 0 var(--s2);
  font: 400 var(--fs-kicker)/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite);
}
.kicker::before { content: ""; width: 0.62em; height: 0.62em; border: 1px solid currentColor; flex: none; }
.kicker--light { color: var(--on-dark); }
.kicker a { text-decoration: none; }
.h1 { font: 400 var(--fs-h1)/0.9 var(--serif); letter-spacing: -0.025em; }
.h1--giant { font-size: var(--fs-giant); line-height: 0.82; letter-spacing: -0.04em; }
.h2 { font: 400 var(--fs-h2)/0.98 var(--serif); letter-spacing: -0.02em; max-width: 16ch; }
.h3 { font: 400 var(--fs-h3)/1.05 var(--serif); letter-spacing: -0.01em; }
.body-l { font-size: var(--fs-body-l); line-height: 1.5; font-weight: 300; max-width: 38em; }
.caption { font: 400 0.78rem/1.5 var(--mono); color: var(--mute); margin-top: var(--s1); }
.ln { display: block; }
.w { display: inline-block; }
.w__in { display: inline-block; }
.h1 em, .h2 em { font-style: italic; }

.frac {
  display: inline-flex; align-items: baseline; gap: 0.15em; font: 400 0.78rem/1 var(--mono);
  letter-spacing: 0.06em; color: var(--olive);
}
.frac i { font-style: normal; color: var(--mute); }

.pv { display: inline-block; margin-left: 0.6em; padding: 0.1em 0.5em; background: #fff2b3; color: #6b5300;
  font: 400 0.65rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; }

/* ---- Enlaces y botones ------------------------------------------------------------------------- */
.arrow { width: 1.15em; height: 1.15em; flex: none; transition: transform var(--t-mid) var(--ease-grow); }
.link {
  display: inline-flex; align-items: center; gap: 0.6em; margin-top: var(--s2);
  font: 400 0.82rem/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  padding-bottom: 0.45em; border-bottom: 1px solid currentColor; color: var(--ink);
}
.link:hover .arrow, .link:focus-visible .arrow { transform: translateX(0.382em); }
.link--light { color: var(--on-dark); }
.link--end { margin-left: auto; }
.btn {
  display: inline-flex; align-items: center; gap: 1em; padding: 1.05em 1.618em; background: var(--ink); color: #fff;
  font: 400 0.84rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  position: relative; overflow: hidden; isolation: isolate;
}
.btn::before { content: ""; position: absolute; inset: 0; background: var(--olive); z-index: -1;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-mid) var(--ease-cut); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:hover .arrow { transform: translateX(0.382em); }

/* ---- Maquetación ------------------------------------------------------------------------------- */
.section { padding: var(--s5) var(--gutter); max-width: var(--max); margin: 0 auto; }
.section__head { display: grid; gap: 0; margin-bottom: var(--s4); max-width: 60rem; }
.section__lead { margin-top: var(--s2); color: var(--graphite); max-width: 34em; }
.section > .link--end { display: flex; width: max-content; }

@media (min-width: 900px) {
  .section { padding-block: var(--s6); }
}

/* Marco con proporción: las fotos reciben un fondo neutro mientras cargan */
picture img { width: 100%; height: 100%; object-fit: cover; background: var(--stone); }