.shooting-stars {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100vw; 
  height: 100vh;
  pointer-events: none;
  z-index: 0; /* Detrás de todo */
}

.shooting-star {
  position: absolute;
  width: 2px;
  height: 200px; /* Aumentado de 120px a 200px */
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 10%,
    rgba(255, 255, 255, 0.6) 25%,
    rgba(173, 216, 255, 0.9) 40%,
    rgba(255, 255, 255, 1) 60%,
    rgba(255, 255, 255, 0.9) 75%,
    rgba(173, 216, 255, 0.6) 85%,
    rgba(255, 255, 255, 0.3) 95%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 2px;
  filter: drop-shadow(0 0 8px rgba(173, 216, 255, 0.8)) 
          drop-shadow(0 0 16px rgba(255, 255, 255, 0.6))
          drop-shadow(0 0 24px rgba(173, 216, 255, 0.4));
  animation: shooting 2s ease-out forwards;
}

/* Versión alternativa más brillante con cola extra larga */
.shooting-star.bright {
  width: 3px;
  height: 280px; /* Aumentado de 150px a 280px */
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 8%,
    rgba(255, 255, 255, 0.5) 20%,
    rgba(135, 206, 255, 0.8) 35%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 248, 220, 1) 65%,
    rgba(255, 255, 255, 0.9) 75%,
    rgba(135, 206, 255, 0.6) 85%,
    rgba(255, 255, 255, 0.4) 92%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: drop-shadow(0 0 12px rgba(135, 206, 255, 1)) 
          drop-shadow(0 0 24px rgba(255, 255, 255, 0.8))
          drop-shadow(0 0 36px rgba(173, 216, 255, 0.6));
}

/* Versión con cola súper larga para ocasiones especiales */
.shooting-star.long-tail {
  width: 2px;
  height: 350px; /* Cola muy larga */
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 5%,
    rgba(255, 255, 255, 0.3) 15%,
    rgba(173, 216, 255, 0.6) 30%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 1) 60%,
    rgba(173, 216, 255, 0.8) 70%,
    rgba(255, 255, 255, 0.6) 80%,
    rgba(173, 216, 255, 0.4) 88%,
    rgba(255, 255, 255, 0.2) 95%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: drop-shadow(0 0 10px rgba(173, 216, 255, 0.9)) 
          drop-shadow(0 0 20px rgba(255, 255, 255, 0.7))
          drop-shadow(0 0 30px rgba(173, 216, 255, 0.5))
          drop-shadow(0 0 40px rgba(255, 255, 255, 0.3));
}

@keyframes shooting {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(-50px) rotate(330deg) scale(0.5);
  }
  5% {
    opacity: 1;
    transform: translateX(20px) translateY(0) rotate(330deg) scale(1);
  }
  95% {
    opacity: 0.8;
    transform: translateX(400px) translateY(600px) rotate(330deg) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateX(450px) translateY(650px) rotate(330deg) scale(0.8);
  }

}