/**
 * Nexo Scroll Motion Background - Production Stylesheet (v1.0.2)
 *
 * Configuración visual:
 * - Canvas fijo en viewport que cubre el 100% de la ventana.
 * - Fondos de secciones semitransparentes en body.home para permitir visualización continua del fotograma.
 * - Alto contraste y legibilidad preservados en tarjetas, modales, formularios y avisos de cookies.
 */

/* 1. Viewport Fijo para Fondo de Pantalla Completa */
.nexo-canvas-viewport {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
}

/* 2. Canvas Responsivo con Cobertura Total */
#nexo-motion-canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  object-fit: cover !important;
  pointer-events: none !important;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* 3. Base Transparente en la Portada (body.home y body.front-page) */
body.home,
body.home #page,
body.home #content,
body.home main,
body.home .site-main,
body.home .site-content,
body.front-page,
body.front-page #page,
body.front-page #content,
body.front-page main,
body.front-page .site-main,
body.front-page .site-content {
  background-color: transparent !important;
}

/* 4. Transparencia Calibrada en Secciones y Footer de Portada */
body.home section,
body.home section.bg-surface,
body.home section.bg-surface-container,
body.home section.bg-surface-container-lowest,
body.home section.bg-surface-container-low,
body.home section.bg-surface-container-high,
body.home section.bg-surface-container-highest,
body.home section.section-void,
body.home #vanta-hero,
body.home footer,
body.home footer.bg-surface,
body.home footer.bg-surface-container,
body.home footer.bg-surface-container-lowest,
body.home footer.bg-surface-container-low,
body.front-page section,
body.front-page section.bg-surface,
body.front-page section.bg-surface-container,
body.front-page section.bg-surface-container-lowest,
body.front-page section.bg-surface-container-low,
body.front-page section.bg-surface-container-high,
body.front-page section.bg-surface-container-highest,
body.front-page section.section-void,
body.front-page #vanta-hero,
body.front-page footer,
body.front-page footer.bg-surface,
body.front-page footer.bg-surface-container,
body.front-page footer.bg-surface-container-lowest,
body.front-page footer.bg-surface-container-low {
  background-color: rgba(10, 10, 10, 0.35) !important;
}

/* 5. Orden de Capas y Apilamiento de Contenido */
body.home > *:not(.nexo-canvas-viewport):not(#nexo-motion-loader),
body.front-page > *:not(.nexo-canvas-viewport):not(#nexo-motion-loader),
body.home main,
body.front-page main,
body.home section,
body.front-page section,
body.home footer,
body.front-page footer {
  position: relative;
  z-index: 1;
}

/* 6. Preservación de Legibilidad y Contraste en Tarjetas y Bloques Internos */
body.home section div.bg-surface-container,
body.home section div.bg-surface-container-high,
body.home section div.bg-surface-container-highest,
body.home section div.bg-surface-container-low,
body.front-page section div.bg-surface-container,
body.front-page section div.bg-surface-container-high,
body.front-page section div.bg-surface-container-highest,
body.front-page section div.bg-surface-container-low {
  background-color: rgba(18, 18, 18, 0.82) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 7. Navegación, Modales, Formularios y Avisos de Cookies */
body.home nav,
body.front-page nav,
body.home header,
body.front-page header {
  z-index: 50 !important;
}

body.home [role="dialog"],
body.front-page [role="dialog"],
body.home .modal,
body.front-page .modal,
body.home .cookie-notice,
body.front-page .cookie-notice,
body.home .cookie-banner,
body.front-page .cookie-banner,
body.home #mobile-menu-overlay,
body.front-page #mobile-menu-overlay {
  z-index: 9999 !important;
}

/* 8. Overlay de Precarga */
#nexo-motion-loader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background-color: #000000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s !important;
}

#nexo-motion-loader.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

.nexo-loader-bar-bg {
  width: 200px !important;
  max-width: 80vw !important;
  height: 2px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}

.nexo-loader-bar-fill {
  width: 0%;
  height: 100% !important;
  background: #ffffff !important;
  transition: width 0.15s ease-out !important;
}

.nexo-loader-text {
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 500 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* 9. Ajustes Responsivos */
@media screen and (max-width: 768px) {
  .nexo-loader-bar-bg {
    width: 160px !important;
  }
  .nexo-loader-text {
    font-size: 10px !important;
  }
}

/* 10. Soporte para Accesibilidad y Reducción de Movimiento */
@media (prefers-reduced-motion: reduce) {
  #nexo-motion-loader {
    transition: none !important;
  }
}