/* ==========================================================================
   La Cumbre - base.css
   Reset, tipografía global, primitivas de layout y accesibilidad.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa la nav flotante al saltar a un ancla. */
  scroll-padding-top: 6.5rem;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

body {
  min-height: 100%;
  background-color: var(--ink-950);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Grano fijo: da materia al fondo sin repintar en cada scroll.
   Pseudo-elemento fixed + pointer-events:none (nunca dentro de un scroller). */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

/* <picture> solo existe para que el navegador elija entre WebP y JPG; no debe
   generar una caja propia. Con display: contents la imagen se coloca como si
   fuera hija directa de su contenedor, así que todo el layout que ya existía
   (media, bento, galería, hero) sigue funcionando sin tocar una regla. */
picture {
  display: contents;
}

img,
video {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-heading);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}

h2 {
  font-size: var(--fs-h2);
  letter-spacing: var(--track-h2);
}

h3 {
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
}

h4 {
  font-size: var(--fs-h4);
  letter-spacing: -0.005em;
}

/* Énfasis en titulares: itálica de la MISMA familia, con reserva para los
   descendentes (y, g, j, p, q) que leading-none recortaría. */
h1 em,
h2 em,
h3 em {
  font-style: italic;
  color: var(--accent);
  line-height: 1.1;
  padding-bottom: 0.06em;
}

p {
  max-width: var(--measure);
  text-wrap: pretty;
}

strong {
  font-weight: 700;
}

a {
  color: inherit;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.25em;
  transition: color var(--dur) var(--ease-out);
}

::selection {
  background: var(--accent);
  color: var(--ink-950);
}

.lead {
  font-size: var(--fs-lead);
  color: var(--bone-dim);
  max-width: 56ch;
}

.muted {
  color: var(--bone-mute);
}

.nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

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

.wrap--narrow {
  max-width: var(--wrap-narrow);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* Más aire arriba del encabezado que abajo (ajuste óptico deliberado). */
.section__head {
  margin-bottom: var(--sp-7);
}

.section__head p {
  margin-top: var(--sp-4);
}

.stack > * + * {
  margin-top: var(--sp-4);
}

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* Un párrafo de entrada siempre respira debajo de su titular. Esta regla
   existe para que el markup no cargue estilos en línea repetidos. */
h1 + .lead,
h2 + .lead,
h3 + .lead {
  margin-top: var(--sp-4);
}

/* Utilidades de ritmo vertical, sobre la misma escala de espaciado. */
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-0 { margin-top: 0; }

/* Notas y textos de pie que ocupan todo el ancho de su columna en vez de
   quedar limitados a la medida de lectura. */
.no-measure { max-width: none; }

/* Titular de página interna: el mismo peso visual que un H2 de sección. */
.title-page { font-size: var(--fs-h2); }

/* Contenedor del sprite de iconos: fuera del flujo y sin ocupar espacio. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.row-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   Accesibilidad
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-modal);
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--ink-950);
  font-weight: 700;
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

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

.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;
}

/* --------------------------------------------------------------------------
   Revelado al scroll
   Un solo mecanismo (IntersectionObserver) para toda la página.
   Solo transform y opacity. Sin animación hasta que JS marque .reveal-ready,
   para que el contenido siga visible si JS falla.
   -------------------------------------------------------------------------- */

.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready [data-reveal='left'] {
  transform: translate3d(-24px, 0, 0);
}

.reveal-ready [data-reveal='scale'] {
  transform: scale(0.96);
}

.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion: más suave, no cero.
   Se conserva la opacidad (ayuda a entender que algo entró) y se elimina
   todo desplazamiento y escalado.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal-ready [data-reveal],
  .reveal-ready [data-reveal='left'],
  .reveal-ready [data-reveal='scale'] {
    transform: none;
    transition-duration: 360ms;
    transition-delay: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}