/* ===========================
   EFECTO DE PARTÍCULAS PARA LA PORTADA
   =========================== */

.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.particle {
  position: absolute;
  border-radius: 50%;
  animation: float 6s infinite ease-in-out;
  pointer-events: none;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 215, 0, 0.6));
  box-shadow: 
    0 0 10px rgba(255, 215, 0, 0.4),
    inset 0 0 10px rgba(255, 255, 255, 0.3);
  filter: blur(0.5px);
  transition: all 0.3s ease;
}

.particle:hover {
  transform: scale(1.2);
  box-shadow: 
    0 0 20px rgba(255, 215, 0, 0.7),
    inset 0 0 15px rgba(255, 255, 255, 0.5);
}

.particle.golden {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(255, 215, 0, 0.8));
  box-shadow: 
    0 0 15px rgba(255, 215, 0, 0.6),
    0 0 30px rgba(255, 215, 0, 0.3),
    inset 0 0 10px rgba(255, 255, 255, 0.4);
  animation: float 7s infinite ease-in-out, goldenShimmer 3s infinite ease-in-out;
}

@keyframes goldenShimmer {
  0%, 100% {
    filter: brightness(1) blur(0.5px);
  }
  50% {
    filter: brightness(1.3) blur(0.2px);
  }
}

.particle.white {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 1), rgba(240, 240, 240, 0.7));
  box-shadow: 
    0 0 12px rgba(255, 255, 255, 0.5),
    0 0 25px rgba(255, 255, 255, 0.2),
    inset 0 0 8px rgba(255, 255, 255, 0.6);
  animation: float 8s infinite ease-in-out, whiteGlow 4s infinite ease-in-out;
}

@keyframes whiteGlow {
  0%, 100% {
    opacity: 0.7;
    filter: brightness(1) blur(0.5px);
  }
  50% {
    opacity: 1;
    filter: brightness(1.5) blur(0.1px);
  }
}

.particle.light-gold {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 235, 150, 0.6));
  box-shadow: 
    0 0 8px rgba(255, 235, 150, 0.4),
    0 0 20px rgba(255, 235, 150, 0.2),
    inset 0 0 6px rgba(255, 255, 255, 0.3);
  animation: float 9s infinite ease-in-out, lightPulse 5s infinite ease-in-out;
}

@keyframes lightPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }
}

/* Diferentes tamaños de partículas */
.particle.small {
  width: 4px;
  height: 4px;
}

.particle.medium {
  width: 6px;
  height: 6px;
}

.particle.large {
  width: 8px;
  height: 8px;
}

.particle.extra-large {
  width: 12px;
  height: 12px;
}

/* Animaciones de flotación mejoradas */
@keyframes float {
  0% {
    transform: translateY(100vh) translateX(0px) rotate(0deg) scale(0.8);
    opacity: 0;
    filter: blur(2px);
  }
  5% {
    opacity: 0.3;
    filter: blur(1px);
  }
  15% {
    opacity: 1;
    filter: blur(0.5px);
    transform: translateY(80vh) translateX(10px) rotate(45deg) scale(1);
  }
  50% {
    transform: translateY(50vh) translateX(-5px) rotate(180deg) scale(1.1);
  }
  85% {
    opacity: 1;
    transform: translateY(20vh) translateX(15px) rotate(270deg) scale(0.9);
  }
  95% {
    opacity: 0.3;
    filter: blur(1px);
  }
  100% {
    transform: translateY(-20px) translateX(0px) rotate(360deg) scale(0.6);
    opacity: 0;
    filter: blur(2px);
  }
}

/* Variaciones de animación para mayor naturalidad */
.particle:nth-child(odd) {
  animation-duration: 8s;
  animation-delay: -2s;
}

.particle:nth-child(even) {
  animation-duration: 7s;
  animation-delay: -4s;
}

.particle:nth-child(3n) {
  animation-duration: 9s;
  animation-delay: -1s;
}

.particle:nth-child(4n) {
  animation-duration: 6s;
  animation-delay: -3s;
}

.particle:nth-child(5n) {
  animation-duration: 10s;
  animation-delay: -5s;
}

/* Movimiento horizontal sutil */
@keyframes float-horizontal {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(10px);
  }
}

.particle.drift {
  animation: float 8s infinite ease-in-out, float-horizontal 4s infinite ease-in-out;
}

/* Efecto de brillo para algunas partículas */
.particle.glow {
  animation: float 7s infinite ease-in-out, glow-pulse 2s infinite ease-in-out;
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 25px rgba(255, 215, 0, 0.4);
  }
}

/* Responsive - menos partículas en móviles */
@media (max-width: 768px) {
  .particle:nth-child(n+15) {
    display: none;
  }
}

/* Optimizaciones para dispositivos móviles */
@media (max-width: 768px) {
  .particles-container {
    opacity: 0.7; /* Reducir opacidad en tablets */
  }
  
  .particle {
    animation-duration: 8s; /* Animaciones más lentas para mejor rendimiento */
  }
  
  .particle.large {
    width: 6px; /* Reducir tamaño de partículas grandes */
    height: 6px;
  }
}

@media (max-width: 480px) {
  .particles-container {
    opacity: 0.5; /* Reducir más la opacidad en móviles */
  }
  
  .particle {
    animation-duration: 10s; /* Animaciones aún más lentas */
  }
  
  /* Simplificar efectos de sombra para mejor rendimiento */
  .particle.golden {
    box-shadow: none;
  }
  
  .particle.white {
    box-shadow: none;
  }
  
  .particle.light-gold {
    box-shadow: none;
  }
}

@media (max-width: 320px) {
  .particles-container {
    opacity: 0.4; /* Opacidad mínima en pantallas muy pequeñas */
  }
}

/* Optimización para dispositivos de baja potencia */
@media (max-width: 480px) and (max-height: 800px) {
  .particle {
    will-change: transform; /* Optimizar animaciones */
    transform: translateZ(0); /* Forzar aceleración por hardware */
  }
}

/* Reducir movimiento para usuarios que prefieren menos animación */
@media (prefers-reduced-motion: reduce) {
  .particles-container {
    display: none !important; /* Ocultar completamente si prefiere menos movimiento */
  }
  
  .particle {
    animation: none;
    opacity: 0;
  }
}