/* ==========================================================================
   Capa global de atmósfera — grano/ruido "film" reusable en todo el sitio.

   Overlay fijo, no interactivo (pointer-events:none), por encima del contenido
   y por debajo de navbar (1000) / lightbox (9000) / WhatsApp. Es ESTÁTICO a
   propósito: el tráfico es mobile/IG y un grano animado repinta cada frame.
   El SVG (feTurbulence desaturado) va inline como data-URI → 0 requests.
   ========================================================================== */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* En reduced-motion no hay animación, solo bajamos un toque la intensidad. */
@media (prefers-reduced-motion: reduce) {
  .grain-overlay { opacity: 0.05; }
}

/* ==========================================================================
   Fondos de sección — negro con velo rojo-bordó (estilo del sitio original).
   Las secciones "planas" (fondo negro liso) pasan a un gradiente sutil; alternan
   de lado para dar variación a lo largo de la página. Carga al final → gana en la
   cascada sobre sections.css. (El hero, sedes, CTA y contacto ya tienen su propio
   tratamiento de fuego/aurora y NO se tocan acá.)
   ========================================================================== */
:root {
  --sec-a: radial-gradient(135% 92% at 8% 0%,  rgba(224,30,30,0.16), rgba(224,30,30,0) 46%), linear-gradient(180deg, #190a0c 0%, #0b0708 72%);
  --sec-b: radial-gradient(135% 92% at 92% 0%, rgba(224,30,30,0.14), rgba(224,30,30,0) 48%), linear-gradient(180deg, #1e0f12 0%, #120a0c 74%);
}
.servicios, .nav-cards { background: var(--sec-a); }
.porque, .faq          { background: var(--sec-b); }

/* ===== Galería (carrusel) reusable — portada de sede / producto / comunidad.
   El contenido lo inyecta js/site-config.js leyendo settings/media[key] (array). ===== */
.sede-gallery { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; margin-bottom: 16px; background: #0d0809; }
.gal-track { display: flex; height: 100%; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.gal-slide { flex: 0 0 100%; height: 100%; background-size: cover; background-position: center; }
.gal-slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-dots { position: absolute; bottom: 9px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; z-index: 2; }
.gal-dot { width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: rgba(255,255,255,0.45); transition: background .25s ease; }
.gal-dot.on { background: var(--red); }
.gal-ph { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-family: var(--font-sub); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; background: radial-gradient(circle at 50% 38%, rgba(224,30,30,0.12), transparent 70%); }