/* ====================================================================
   BASE — Reset + tipografía global (mobile-first, base 375px)
   Todos los colores provienen de variables.css. No hardcodear hex aquí.
   ==================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* compensa el header fijo en anclas */
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-azul-profundo);
  background-color: var(--color-crema);
  -webkit-font-smoothing: antialiased;
  /* Red de seguridad: ningún elemento decorativo (marcos, letter-spacing
     amplio) debe provocar scroll horizontal en móvil */
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance; /* evita líneas huérfanas en títulos (progresivo) */
  overflow-wrap: break-word;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.65rem; }
h3 { font-size: 1.25rem; }

p {
  max-width: 65ch;
}

img,
video {
  max-width: 100%;
  height: auto; /* conserva la proporción cuando max-width reduce la imagen */
  display: block;
}

/* Las fotos del sitio son solo para verse: no se pueden abrir, arrastrar,
   guardar ni copiar desde el menú contextual (clic derecho en escritorio,
   mantener presionado en móvil). Los enlaces que envuelven alguna imagen
   (el logo en nav/footer) siguen funcionando normalmente: al quedar la
   imagen fuera del hit-testing del puntero, el clic lo recibe el enlace
   que la envuelve. */
img {
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

/* Accesibilidad: anillo de foco de doble tono (claro + oscuro) para
   garantizar ≥3:1 tanto sobre fondos crema como sobre azul profundo */
a:focus-visible,
button:focus-visible {
  box-shadow: 0 0 0 2px var(--color-texto-claro);
  outline: 2px solid var(--color-azul-medio);
  outline-offset: 2px;
}

/* Enlace para saltar al contenido (lectores de pantalla / teclado) */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 200;
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-azul-profundo);
  color: var(--color-texto-claro);
  border-radius: var(--radius-elegante);
}

.skip-link:focus {
  top: var(--space-xs);
}

/* Encabezados de sección necesarios para la jerarquía semántica
   (h1→h2→h3 sin saltos) pero sin equivalente visual en el diseño */
.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;
}

/* Contenedor y ritmo vertical de secciones — protagonismo al espacio en blanco */
.contenedor {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

.seccion {
  padding-block: var(--space-lg);
}

/* Variante tonal: banda blanca marfil que rompe el fondo crema continuo
   (ritmo de fondos alternados inspirado en la referencia de diseño) */
.seccion--marfil {
  background-color: var(--color-blanco);
}

.seccion__titulo {
  text-align: center;
  margin-bottom: var(--space-md);
}

.seccion__intro {
  text-align: center;
  margin-inline: auto;
  margin-bottom: var(--space-md);
  color: var(--color-azul-medio);
}

/* Separador sutil dorado inspirado en el manual de marca */
.separador-dorado {
  width: 4rem;
  height: 1px;
  margin: var(--space-sm) auto;
  background-color: var(--color-dorado);
  border: none;
}

/* Accesibilidad: respeta la preferencia de movimiento reducido del
   sistema — sin scroll animado ni transiciones/transformaciones */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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