/* Estilos específicos para el componente Nav (navegación global) */

/* El Nav ya tiene posición sticky en styles.css, pero necesitamos que sea relative
   para que la lluvia de estrellas se posicione correctamente dentro de él. */
.site-nav {
  position: sticky; /* Mantenemos sticky para que el Nav siempre esté visible */
  top: 0; /* Se pega a la parte superior al hacer scroll */
  /* ¡IMPORTANTE! NO usar overflow: hidden aquí porque recorta el dropdown del carrito
     (que se posiciona debajo del Nav con absolute top-full).
     La lluvia ya está contenida porque su div mide exactamente 100% x 100% del Nav. */
}

/* --- EFECTO DE LLUVIA DE ESTRELLAS FUGACES SOBRE EL NAV --- */
/* La lluvia está dentro del Nav como fondo. Es liviana y le da vida a la navegación. */
.rainfall {
  position: absolute; /* Se posiciona respecto al .site-nav (que ahora es relative) */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/global/images/raindrops-animate.svg");
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none; /* No debe bloquear clicks en los links */
  z-index: 0; /* Por debajo del contenido del nav */
}

/* Versión OSCURA de la lluvia: para temas claros, estrellas de color oscuro */
.rainfall-dark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/global/images/raindrops-animate-dark.svg");
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}