:root{
  --neon: #2bff88;
}

/* Capa de partículas por encima del fondo y debajo del UI */
.particles{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* tu topbar/hero están arriba; sube si quieres que brillen más */
  overflow: hidden;
}

/* Partícula base (usa variables CSS para random) */
.particle{
  --size: 3px;         /* 2–5px recomendado */
  --duration: 8s;      /* 5–12s recomendado */
  --delay: 0s;         /* 0–8s */
  --drift: 0px;        /* -40px a 40px */
  --alpha: .9;         /* .5–1 */
  position: absolute;
  top: -6vh;
  left: 50%;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  opacity: 0;

  /* brillo suave con halo */
  background: radial-gradient(circle,
    rgba(255,255,255,1) 0%,
    var(--neon) 45%,
    rgba(43,255,136,0) 75%);
  box-shadow:
    0 0 6px rgba(43,255,136,var(--alpha)),
    0 0 14px rgba(43,255,136,calc(var(--alpha) * .7));

  /* “cola” del cometa */
  transform-origin: center;
}
.particle::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: calc(100% - 1px);
  width: 2px;
  height: calc(var(--size) * 10);
  transform: translateX(-50%);
  background: linear-gradient(to top,
    rgba(43,255,136,.45) 0%,
    rgba(43,255,136,.12) 60%,
    rgba(43,255,136,0) 100%);
  filter: blur(0.4px);
  border-radius: 999px;
}

.particle{
  animation:
    particle-fall var(--duration) linear var(--delay) infinite,
    particle-twinkle 1.4s ease-in-out calc(var(--delay) * .37) infinite;
}

/* Caída + deriva horizontal + fade in/out */
@keyframes particle-fall{
  0%   { opacity: 0; transform: translate3d(0, -8vh, 0) rotate(0.001deg); }
  8%   { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--drift), 112vh, 0) rotate(0.001deg); }
}

/* Pequeño parpadeo para dar vida */
@keyframes particle-twinkle{
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.35); }
}

/* Respeto a usuarios con menos movimiento */
@media (prefers-reduced-motion: reduce){
  .particle{ animation: none; opacity: .2; }
  .particle::after{ display:none; }
}