/* css/nieve.css CORREGIDO */

/* El contenedor de la nieve */
.nieve-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none; /* Permite hacer clic a través de la nieve */
    z-index: 1; /* Nivel 1: Encima del fondo */
    overflow: hidden;
}

/* Capa 1: Copos pequeños (más gradientes para más copos) */
.nieve {
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 100px 70px, #fff, transparent),
        radial-gradient(2px 2px at 200px 250px, #fff, transparent),
        radial-gradient(3px 3px at 300px 100px, #fff, transparent),
        radial-gradient(2px 2px at 400px 300px, #fff, transparent),
        radial-gradient(3px 3px at 500px 20px, #fff, transparent),
        radial-gradient(2px 2px at 600px 400px, #fff, transparent), /* Nuevo gradiente */
        radial-gradient(2px 2px at 800px 200px, #fff, transparent), /* Nuevo gradiente */
        radial-gradient(3px 3px at 100px 500px, #fff, transparent); /* Nuevo gradiente */
    
    background-size: 300px 300px; /* Tamaño más pequeño para un patrón más denso */
    animation: caerNieve 8s linear infinite; /* Animación más rápida */
}

/* Capa 2: Copos más pequeños y lentos para dar profundidad */
.nieve.capa-2 {
    background-image: 
        radial-gradient(1.5px 1.5px at 15px 15px, #fff, transparent),
        radial-gradient(2px 2px at 150px 50px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 350px 250px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 600px 500px, #fff, transparent), /* Nuevo gradiente */
        radial-gradient(2px 2px at 800px 400px, #fff, transparent); /* Nuevo gradiente */
    
    background-size: 250px 250px; /* Tamaño más pequeño para más densidad */
    animation-duration: 12s; /* Más lento que la capa 1 */
    opacity: 0.6; /* Un poco más transparente */
}

/* Animación de la nieve */
@keyframes caerNieve {
    0% { background-position: 0 0; }
    100% { background-position: 0 400px; } /* Mantén la misma velocidad de caída */
}