/* ==========================================================================
   LAYOUT GLOBAL
   --------------------------------------------------------------------------
   Contenedor, secciones, textura de fondo y utilidades de accesibilidad.
   ========================================================================== */

/* Contenedor centrado con márgenes laterales fluidos */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Espaciado vertical estándar de cada sección */
.section {
  position: relative;
  padding-block: var(--sp-section);
}

/* Cabecera estándar de sección: eyebrow + título + texto */
.section-head {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

/* En pantallas grandes: título a la izquierda, texto a la derecha */
@media (min-width: 960px) {
  .section-head--split {
    grid-template-columns: 1.2fr 1fr;
    align-items: end;
    column-gap: var(--sp-8);
  }

  .section-head--split .eyebrow {
    grid-column: 1 / -1;
  }
}

/* Separador de sección: línea con gradiente de marca que se desvanece */
.section + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  max-width: calc(var(--container) - var(--gutter) * 2);
  margin-inline: auto;
  height: 1px;
  background: var(--grad-brand);
  opacity: 0.35;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

/* Resplandor de color ambiental. Uso: agrega .section--glow a la sección
   y define en su CSS --glow-rgb (color), --glow-x y --glow-y (posición). */
.section--glow {
  overflow: clip; /* recorta sin permitir desplazamiento lateral */
  isolation: isolate;
}

.section--glow::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 60vw;
  max-width: 900px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--glow-rgb, var(--c-teal-rgb)), 0.16), transparent 65%);
  pointer-events: none;
  top: var(--glow-y, 10%);
  left: var(--glow-x, -20%);
}

/* Textura de grano sutil sobre todo el sitio (da profundidad) */
.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

:root[data-theme="light"] .grain {
  opacity: 0.05;
}

/* Barra de progreso de scroll (arriba de todo) */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  height: 3px;
  background: var(--grad-brand);
  transform-origin: left;
  transform: scaleX(0);
}

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

/* Oculta visualmente pero mantiene para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Enlace "Saltar al contenido" visible solo con teclado */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: 200;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.skip-link:focus {
  top: var(--sp-4);
}

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