/* --- ESTILOS GENERALES --- */
body {
    background-color: transparent; 
    margin: 0;
    overflow: hidden; 
    min-height: 100vh; 
    display: flex;
    align-items: center; 
    justify-content: center; 
}

/* --- ESTILOS DEL MARCO --- */

/* 1. El Contenedor Exterior (Neón) */
.neon-border-frame {
    display: inline-block;
    border-radius: 15px; 
    padding: 15px; 
    
    /* === LÍNEA 1 MODIFICADA === */
    /* Añadimos paradas extra de Verde para darle más tiempo */
    background-image: linear-gradient(
        120deg, 
        #00D000, /* Verde (Parada 1) */
        #00D000, /* Verde (Parada 2 - Mantiene el color) */
        #FFFFFF, /* Blanco (Parada 3) */
        #FF00FF, /* Morado (Parada 4) */
        #FFFFFF, /* Blanco (Parada 5) */
        #00D000, /* Verde (Parada 6) */
        #00D000  /* Verde (Parada 7 - Reinicio) */
    );
    
    /* === LÍNEA 2 MODIFICADA === */
    /* Aumentamos el tamaño a 700% (7 paradas) */
    background-size: 700% 700%;
    
    /* === LÍNEA 3 MODIFICADA === */
    /* Aumentamos la duración a 14s (2s por segmento) */
    animation: flow-liquid 30s linear infinite;
    
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.7), 0 5px 15px rgba(0,0,0,0.5);

    position: relative;
    z-index: 5; 
}

/* 3. La Imagen QR (Sin cambios) */
.neon-border-frame img {
    display: block; 
    border: 5px solid white; 
    border-radius: 5px;      
    max-width: 100%;
    height: auto;
    box-sizing: border-box; 
}

/* 4. Animación del Neón (MODIFICADO) */
@keyframes flow-liquid {
    0% {
        background-position: 0% 50%;
    }
    
    /* === LÍNEA 4 MODIFICADA === */
    /* Ajustamos al nuevo tamaño de 700% */
    100% {
        background-position: 700% 50%;
    }
}


/* --- ESTILOS DE NIEVE --- */
/* (Esta sección permanece exactamente igual) */

.snow-container {
/* ... (igual que antes) ... */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1; 
    pointer-events: none; 
}

.snowflake {
/* ... (igual que antes) ... */
    position: absolute;
    top: -20px; 
    color: white;
    font-size: 1.5rem;
    text-shadow: 0 0 5px white, 0 0 10px white; 
    animation: fall linear infinite;
}

@keyframes fall {
/* ... (igual que antes) ... */
    to {
        transform: translateY(100vh) translateX(5vw);
        opacity: 0; 
    }
}

/* (Todas las variaciones de .snowflake:nth-child 
   permanecen exactamente iguales) */
.snowflake:nth-child(1) { left: 10%; animation-duration: 12s; animation-delay: 0s; font-size: 1rem; }
.snowflake:nth-child(2) { left: 20%; animation-duration: 8s; animation-delay: -2s; }
.snowflake:nth-child(3) { left: 30%; animation-duration: 10s; animation-delay: -5s; font-size: 1.2rem; }
.snowflake:nth-child(4) { left: 40%; animation-duration: 7s; animation-delay: -1s; }
.snowflake:nth-child(5) { left: 50%; animation-duration: 9s; animation-delay: -3s; font-size: 1.5rem; }
.snowflake:nth-child(6) { left: 60%; animation-duration: 11s; animation-delay: -4s; }
.snowflake:nth-child(7) { left: 70%; animation-duration: 8s; animation-delay: -1s; font-size: 1rem; }
.snowflake:nth-child(8) { left: 80%; animation-duration: 13s; animation-delay: -6s; }
.snowflake:nth-child(9) { left: 90%; animation-duration: 6s; animation-delay: -2s; font-size: 1.2rem; }
.snowflake:nth-child(10) { left: 5%; animation-duration: 10s; animation-delay: -7s; }