/* =========================================================
   NEWWEST — Base: reset, tipografía y utilidades
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h-compact);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--taupe);
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--taupe); color: var(--paper); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

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

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  padding: 10px 16px; background: var(--paper); color: var(--taupe);
  font-size: .8rem; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { position: relative; padding: var(--section) 0; }
.section--marfil { background: var(--marfil); }
.section--taupe { background: var(--taupe); color: var(--paper); }

/* ---------- Tipografía ---------- */

.t-hero {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -.005em;
}

.t-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--fs-title);
  line-height: 1;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.t-hero-sub {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-hero-sub);
  line-height: 1.4;
}

.t-subtitle {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--fs-subtitle);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.t-italic {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
}

.t-lead {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--taupe);
}

.t-body { color: var(--ink); font-weight: 400; line-height: 1.85; }

/* Destacados: taupe en negrita sutil (como en los PDFs de la diseñadora) */
strong, b { font-weight: 500; color: inherit; }
.t-lead strong { font-weight: 500; }
.t-body + .t-body { margin-top: 1.1em; }

/* Pie de foto / leyenda en mayúsculas pequeñas */
.t-caption { font-size: .64rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; line-height: 1.5; }
/* Numeración 01, 02, 03 */
.t-index { font-size: .7rem; font-weight: 500; letter-spacing: .2em; font-variant-numeric: tabular-nums; }

.t-label {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 1.4;
}