/* ===================================================================
   OASIS — Base: reset, tipografía, layout primitivo, accesibilidad
   =================================================================== */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--fuente-cuerpo);
  font-size: var(--txt-base);
  font-weight: var(--peso-cuerpo);
  line-height: var(--interlinea-cuerpo);
  color: var(--texto);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

/* --- Títulos --- */
h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo);
  line-height: var(--interlinea-titulo);
  letter-spacing: -0.01em;
  color: var(--texto);
  text-wrap: balance;
}
h1 { font-size: var(--txt-3xl); }
h2 { font-size: var(--txt-2xl); }
h3 { font-size: var(--txt-xl); }
h4 { font-size: var(--txt-lg); }

p { text-wrap: pretty; }
p + p { margin-top: var(--s-3); }

/* --- Layout primitivo --- */
.container { width: var(--ancho); margin-inline: auto; }
.container--angosto { width: var(--ancho-angosto); margin-inline: auto; }

.seccion { padding-block: var(--seccion-y); }
.seccion--oscuro  { background: var(--bg-oscuro);  color: var(--texto-claro); }
.seccion--noche   { background: var(--bg-noche);   color: var(--texto-claro); }
.seccion--caoba   { background: var(--bg-caoba);   color: var(--texto-claro); }
.seccion--arena   { background: var(--bg-arena); }
.seccion--oscuro h2, .seccion--noche h2, .seccion--caoba h2,
.seccion--oscuro h3, .seccion--noche h3, .seccion--caoba h3 { color: var(--texto-claro); }

/* --- Encabezado de sección --- */
.eyebrow {
  display: inline-block;
  font-family: var(--fuente-cuerpo);
  font-size: var(--txt-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-mayus);
  text-transform: uppercase;
  color: var(--c-oro-oscuro);
}
.seccion--oscuro .eyebrow, .seccion--noche .eyebrow, .seccion--caoba .eyebrow { color: var(--c-oro-claro); }

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.8rem; height: 2px;
  background: var(--c-oro);
  vertical-align: middle;
  margin-right: .6rem;
  transform: translateY(-2px);
}

.titulo-seccion { margin-top: var(--s-2); }
.entradilla {
  margin-top: var(--s-3);
  color: var(--texto-suave);
  max-width: 56ch;
  font-size: var(--txt-lg);
}
.seccion--oscuro .entradilla, .seccion--noche .entradilla, .seccion--caoba .entradilla { color: var(--texto-claro-suave); }

.cabecera-centrada { text-align: center; }
.cabecera-centrada .entradilla { margin-inline: auto; }

/* --- Helpers --- */
.serif { font-family: var(--fuente-titulo); }
.italic { font-style: italic; }
.oro { color: var(--c-oro); }
.flow > * + * { margin-top: var(--s-3); }
.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;
}
.no-js-oculto { } /* visible por defecto; ui.js puede alternar */

/* --- Foco visible accesible --- */
:focus-visible {
  outline: 3px solid var(--c-oro);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Saltar al contenido --- */
.skip-link {
  position: absolute; left: var(--s-3); top: -100%;
  background: var(--c-verde); color: var(--texto-claro);
  padding: .6rem 1rem; border-radius: var(--r-sm); z-index: var(--z-modal);
  transition: top var(--t-rapido);
}
.skip-link:focus { top: var(--s-3); }