/* =========================================
   --- 🎄 TECHNO CHRISTMAS: FINAL EDITION 🎄 ---
   ========================================= */

:root {
    --neon-pink: #ff0033;   /* Rojo Navidad */
    --neon-green: #00ff00;  /* Verde Grinch */
    --neon-yellow: #ffd700; /* Dorado */
    --snow: #fff;
}

/* --- 1. NIEVE CAYENDO --- */
body::before { 
    content: ''; position: fixed; top: -100%; left: 0; width: 100%; height: 300%; z-index: 9997; pointer-events: none;
    background-image: radial-gradient(2px 2px at 100px 50px, var(--snow), transparent),
                      radial-gradient(3px 3px at 300px 250px, var(--snow), transparent),
                      radial-gradient(2px 2px at 500px 100px, var(--snow), transparent);
    background-size: 800px 800px; animation: snowFall 30s linear infinite; opacity: 0.4;
}
body::after { 
    content: ''; position: fixed; top: -100%; left: 0; width: 100%; height: 300%; z-index: 9998; pointer-events: none;
    background-image: radial-gradient(4px 4px at 50px 80px, var(--snow), transparent),
                      radial-gradient(5px 5px at 250px 30px, var(--snow), transparent),
                      radial-gradient(4px 4px at 450px 180px, var(--snow), transparent);
    background-size: 800px 800px; animation: snowFall 18s linear infinite;
}
@keyframes snowFall {
    0% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(50%) translateX(20px); }
    100% { transform: translateY(100%) translateX(0); }
}

/* --- 2. SCROLLBAR --- */
::-webkit-scrollbar { width: 16px; }
::-webkit-scrollbar-track { background: #111; border-left: 2px solid var(--neon-green); }
::-webkit-scrollbar-thumb {
    background: repeating-linear-gradient(45deg, #ff0033, #ff0033 10px, #ffffff 10px, #ffffff 20px);
    border-radius: 10px; border: 2px solid #000;
}

/* --- 3. LUCES MENÚ --- */
nav { border-bottom: none !important; position: relative; background: rgba(10, 0, 0, 0.95) !important; }
nav::after {
    content: ''; position: absolute; bottom: -8px; left: 0; width: 100%; height: 12px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="12"><circle cx="5" cy="6" r="4" fill="%23ff0033"/><circle cx="20" cy="6" r="4" fill="%2300ff00"/><circle cx="35" cy="6" r="4" fill="%23ffd700"/><circle cx="50" cy="6" r="4" fill="%23ff0033"/></svg>');
    animation: blinkLights 0.8s steps(2) infinite alternate; filter: drop-shadow(0 0 5px red);
}
@keyframes blinkLights { 0% { filter: brightness(0.8); } 100% { filter: brightness(1.5); } }

/* --- 4. GORRO LOGO --- */
.logo { position: relative; z-index: 1; }
.logo::after {
    content: '🎅'; font-size: 35px; position: absolute; top: -18px; right: -12px;
    transform: rotate(15deg); animation: bounceHat 1.5s infinite; filter: drop-shadow(0 0 5px white);
}
@keyframes bounceHat { 0%, 100% { transform: rotate(15deg) translateY(0); } 50% { transform: rotate(25deg) translateY(-8px); } }

/* --- 5. TÍTULOS --- */
h1, h2 {
    text-shadow: 0 -4px 0 #fff, 0 0 30px currentColor !important;
    animation: xmasTitleChange 4s infinite alternate ease-in-out !important;
}
@keyframes xmasTitleChange { 0% { color: var(--neon-pink); } 100% { color: var(--neon-green); } }

/* --- 6. TARJETAS --- */
.ticket-card, .product-card, .artist-card {
    border: 2px solid var(--neon-green) !important;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.3) !important;
    background: linear-gradient(to bottom, #0a1a0a, #000) !important;
    padding-bottom: 70px !important; /* Espacio extra para asegurar que cabe el botón */
}
.ticket-card:hover, .product-card:hover, .artist-card:hover {
    border-color: var(--neon-pink) !important;
    box-shadow: 0 0 30px var(--neon-pink) !important;
    animation: jingleBell 0.4s ease-in-out infinite;
}
@keyframes jingleBell { 0%, 100% { transform: rotate(0deg) scale(1.02); } 25% { transform: rotate(2deg); } 75% { transform: rotate(-2deg); } }

/* --- 7. PRECIOS LLAMATIVOS (MODIFICADO) --- */
.price {
    color: #ff0033 !important;
    font-size: 1.8rem !important; /* Más grandes */
    font-weight: 900 !important;
    text-shadow: 0 0 10px red, 0 0 20px white !important; /* Brillo extra */
    position: absolute !important;
    bottom: 15px !important;
    left: 15px !important;
    z-index: 5;
}

.old-price-tag {
    color: #ccc !important;
    opacity: 0.6 !important;
    font-size: 0.9rem !important;
    position: absolute !important;
    bottom: 45px !important; /* Lo subimos un poco encima del precio nuevo */
    left: 15px !important;
    text-decoration: line-through !important;
}

/* --- 8. BOTONES AÑADIR (MODIFICADO: Abajo Derecha) --- */
.btn-small {
    /* Posición fija */
    position: absolute !important;
    bottom: 15px !important;
    right: 15px !important;
    margin: 0 !important;
    
    /* Estilo Lingote de Oro */
    background: var(--neon-yellow) !important;
    color: #000 !important;
    font-weight: 900 !important;
    border: 2px solid #fff !important;
    border-radius: 20px !important; /* Más redonditos */
    padding: 8px 15px !important;
    box-shadow: 0 0 15px var(--neon-yellow) !important;
    font-size: 0.85rem !important;
    width: auto !important;
    z-index: 10;
}

.btn-small:hover {
    background: var(--neon-pink) !important; /* Rojo al pasar ratón */
    color: #fff !important;
    border-color: var(--neon-pink) !important;
    box-shadow: 0 0 25px var(--neon-pink) !important;
    transform: scale(1.1) !important;
}

/* --- 9. CURSOR --- */
#magic-cursor {
    border: 2px solid #fff !important;
    background: radial-gradient(circle at 30% 30%, #fff, var(--neon-pink)) !important;
    box-shadow: 0 0 20px #fff, 0 0 40px var(--neon-pink) !important;
    opacity: 0.8;
}

/* --- 10. BORDES PARPADEANTES --- */
.contact-form-wrapper, .cart-sidebar, details {
    border: 2px solid var(--neon-pink) !important;
    animation: borderBlink 2s infinite alternate;
}
@keyframes borderBlink {
    0% { border-color: var(--neon-pink); box-shadow: 0 0 20px rgb(255, 255, 255); }
    100% { border-color: var(--neon-green); box-shadow: 0 0 20px rgba(0,255,0,0.3); }
}