/* ==========================================================================
           1. SISTEMA DE DISEÑO (DARK MODE / LUXURY TECH)
           ========================================================================== */
        :root {
            --color-bg-base: #020202; 
            --color-bg-card: rgba(12, 12, 16, 0.5); 
            --color-texto-main: #FFFFFF;
            --color-texto-muted: #A1A1AA;
            
            --color-neon: #00E5FF; 
            --color-neon-dim: rgba(0, 229, 255, 0.15);
            --color-borde: rgba(0, 229, 255, 0.3); 
            
            --font-display: 'Rajdhani', sans-serif;
            --font-body: 'Inter', sans-serif;
            
            --blur-card: blur(24px);
            --borde-radio: 16px;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        
        body { 
            font-family: var(--font-body); 
            background-color: var(--color-bg-base); 
            color: var(--color-texto-main); 
            line-height: 1.6; 
            overflow-x: hidden; 
            -webkit-font-smoothing: antialiased; 
            -moz-osx-font-smoothing: grayscale; 
        }

        /* Bloqueo de scroll para la pantalla inicial */
        .body-no-scroll { overflow: hidden !important; height: 100vh !important; }

        /* ==========================================================================
           2. FONDOS ELÉCTRICOS Y CYBER (EFECTOS PREMIUM)
           ========================================================================== */
        .fondo-premium {
            position: fixed; inset: 0; z-index: -2; pointer-events: none;
            background-color: var(--color-bg-base);
            background-image: 
                radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.08) 0%, transparent 60%);
        }

        /* Rayos Eléctricos Neón (Animación de luz en movimiento) */
        .rayos-electricos {
            position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.4;
            background: 
                linear-gradient(45deg, transparent 45%, rgba(0, 229, 255, 0.1) 48%, rgba(0, 229, 255, 0.4) 50%, rgba(0, 229, 255, 0.1) 52%, transparent 55%),
                linear-gradient(-45deg, transparent 45%, rgba(0, 229, 255, 0.1) 48%, rgba(0, 229, 255, 0.3) 50%, rgba(0, 229, 255, 0.1) 52%, transparent 55%);
            background-size: 200% 200%;
            animation: tormentaNeon 10s linear infinite;
        }
        @keyframes tormentaNeon {
            0% { background-position: 200% 0, -200% 100%; opacity: 0.1; }
            50% { opacity: 0.5; }
            100% { background-position: -200% 200%, 200% -100%; opacity: 0.1; }
        }

        /* Partículas flotantes ambientales */
        .particulas-container { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
        .particula { position: absolute; width: 3px; height: 3px; background: var(--color-neon); border-radius: 50%; box-shadow: 0 0 10px var(--color-neon); animation: subirParticula linear infinite; opacity: 0; }
        @keyframes subirParticula {
            0% { transform: translate3d(0, 100vh, 0); opacity: 0; }
            20% { opacity: 0.8; }
            80% { opacity: 0.8; }
            100% { transform: translate3d(0, -100px, 0); opacity: 0; }
        }

        h1, h2, h3, h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 2px; }
        a { text-decoration: none; color: inherit; }
        
        .contenedor { width: 100%; max-width: 600px; margin: 0 auto; padding: 0 6%; position: relative; z-index: 10; }
        .seccion-padding { padding: 70px 0; }
        .seccion-padding-bottom { padding-bottom: 70px; }
        
        .titulo-seccion { font-size: 2.4rem; text-align: center; margin-bottom: 40px; color: var(--color-texto-main); text-shadow: 0 5px 15px rgba(0,0,0,0.8); font-weight: 800; letter-spacing: 4px; }
        .titulo-seccion span { color: var(--color-neon); text-shadow: 0 0 25px rgba(0, 229, 255, 0.5); }

        /* ==========================================================================
           3. CLASES MAESTRAS: GLASSMORPHISM Y ANIMACIONES
           ========================================================================== */
        .tech-card {
            background: var(--color-bg-card);
            backdrop-filter: var(--blur-card);
            -webkit-backdrop-filter: var(--blur-card);
            border: 1px solid var(--color-borde);
            border-radius: var(--borde-radio);
            padding: 40px 30px;
            position: relative;
            box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 30px rgba(0, 229, 255, 0.05);
            transition: border-color 0.4s ease, box-shadow 0.4s ease;
            overflow: hidden;
        }
        /* Barrido de luz interno (Efecto Escáner) */
        .tech-card::before {
            content: ''; position: absolute; top: -100%; left: -100%; width: 50%; height: 300%;
            background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.1), transparent);
            transform: rotate(45deg); transition: top 0.8s ease, left 0.8s ease; pointer-events: none;
        }
        .tech-card:hover::before { top: 100%; left: 100%; }
        .tech-card:hover { border-color: rgba(0, 229, 255, 0.6); box-shadow: 0 25px 60px rgba(0,0,0,0.9), inset 0 0 40px rgba(0, 229, 255, 0.15); }

        .fade-up { opacity: 0; transform: translate3d(0, 50px, 0); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
        .fade-up.visible { opacity: 1; transform: translate3d(0, 0, 0); }
        .delay-1 { transition-delay: 150ms; }
        .delay-2 { transition-delay: 300ms; }

        /* ==========================================================================
           4. BOTONES PREMIUM (CERO SCALE)
           ========================================================================== */
        .btn-neon {
            display: flex; align-items: center; justify-content: center; gap: 10px;
            width: 100%; padding: 18px 24px;
            background: linear-gradient(90deg, rgba(0,229,255,0.05), rgba(0,229,255,0.2));
            color: var(--color-neon); border: 1px solid var(--color-neon); border-radius: 12px;
            font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: 2px;
            position: relative; cursor: pointer; text-transform: uppercase;
            transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 0 15px rgba(0,229,255,0.2);
        }
        .btn-neon:hover { transform: translate3d(0, -5px, 0); background-color: var(--color-neon); color: #000; box-shadow: 0 10px 30px rgba(0,229,255,0.6); }

        .btn-secundario {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            background: rgba(255,255,255,0.03); color: var(--color-texto-main);
            border: 1px solid rgba(255,255,255,0.15); padding: 14px 20px; border-radius: 10px;
            font-family: var(--font-body); font-size: 0.95rem; font-weight: 500;
            transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease; cursor: pointer; width: 100%; margin-bottom: 12px;
        }
        .btn-secundario:hover { background: rgba(0,229,255,0.1); transform: translate3d(0, -3px, 0); border-color: rgba(0,229,255,0.5); color: var(--color-neon); }

        /* ==========================================================================
           5. PRELOADER, TARJETA INTRO Y MÚSICA
           ========================================================================== */
        #preloader { position: fixed; inset: 0; background: #000; z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.8s ease; }
        #preloader.oculto { opacity: 0; pointer-events: none; }
        .cyber-loader { width: 200px; height: 3px; background: #111; margin-bottom: 20px; position: relative; overflow: hidden; }
        .cyber-loader::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 30%; background: var(--color-neon); box-shadow: 0 0 15px var(--color-neon); animation: cyberLoad 1s infinite ease-in-out alternate; }
        @keyframes cyberLoad { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
        .loader-text { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 8px; color: var(--color-neon); text-transform: uppercase; animation: pulseGlow 1.5s infinite alternate; }
        @keyframes pulseGlow { 0% { text-shadow: 0 0 5px rgba(0,229,255,0.2); } 100% { text-shadow: 0 0 20px rgba(0,229,255,0.8); } }

        /* Pantalla de Intro VIP (La Tarjeta de Acceso) */
        #intro-pantalla {
            position: fixed; inset: 0; z-index: 9000;
            background: rgba(2, 2, 2, 0.95);
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            display: flex; align-items: center; justify-content: center; padding: 20px;
            transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.8s;
        }
        #intro-pantalla.oculto {
            opacity: 0; visibility: hidden; transform: scale(1.1); pointer-events: none;
        }
        .intro-tarjeta {
            background: linear-gradient(135deg, rgba(15, 15, 20, 0.9), rgba(5, 5, 5, 0.9));
            border: 1px solid var(--color-neon); border-radius: 20px;
            padding: 50px 30px; text-align: center; max-width: 400px; width: 100%;
            box-shadow: 0 0 40px rgba(0, 229, 255, 0.2), inset 0 0 20px rgba(0, 229, 255, 0.05);
            cursor: pointer; animation: latidoTarjeta 3s infinite alternate; transition: transform 0.3s;
        }
        .intro-tarjeta:hover { transform: translateY(-5px); box-shadow: 0 0 60px rgba(0, 229, 255, 0.4); }
        @keyframes latidoTarjeta {
            0% { box-shadow: 0 0 20px rgba(0, 229, 255, 0.1), inset 0 0 10px rgba(0, 229, 255, 0.1); }
            100% { box-shadow: 0 0 50px rgba(0, 229, 255, 0.3), inset 0 0 20px rgba(0, 229, 255, 0.2); }
        }
        .intro-icono { font-size: 4rem; color: var(--color-neon); margin-bottom: 20px; animation: pulseGlow 2s infinite alternate; }
        .intro-titulo { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; color: #FFF; margin-bottom: 5px; letter-spacing: 2px; }
        .intro-sub { font-size: 1rem; color: var(--color-texto-muted); letter-spacing: 4px; text-transform: uppercase; margin-bottom: 30px; }
        .intro-btn { display: inline-block; background: var(--color-neon); color: #000; padding: 12px 30px; border-radius: 30px; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 2px; box-shadow: 0 0 15px rgba(0,229,255,0.4); }

        .btn-musica-flotante { position: fixed; bottom: 30px; right: 30px; width: 55px; height: 55px; background: var(--color-neon); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; cursor: pointer; z-index: 1000; box-shadow: 0 0 25px rgba(0, 229, 255, 0.6); transition: transform 0.3s ease; border: none; }
        .btn-musica-flotante:hover { transform: translate3d(0, -5px, 0); }
        .btn-musica-flotante.pausado { background: rgba(10,10,15,0.9); backdrop-filter: blur(10px); color: var(--color-texto-main); border: 1px solid var(--color-neon); box-shadow: 0 0 15px rgba(0,229,255,0.2); }
        .ecualizador-mini { display: flex; gap: 3px; align-items: flex-end; height: 16px; margin-left: 6px; }
        .ecualizador-mini span { width: 3px; background: #000; animation: eq 1s infinite alternate; }
        .btn-musica-flotante.pausado .ecualizador-mini span { background: var(--color-neon); animation-play-state: paused; }
        .ecualizador-mini span:nth-child(2) { animation-delay: 0.2s; }
        .ecualizador-mini span:nth-child(3) { animation-delay: 0.4s; }
        @keyframes eq { 0% { height: 4px; } 100% { height: 16px; } }

        /* ==========================================================================
           6. PORTADA (HERO VIP GLITCH)
           ========================================================================== */
        .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; overflow: hidden; }
        .hero-bg { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .marca-agua-inicial { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); font-family: var(--font-display); font-size: 90vh; font-weight: 800; color: #FFFFFF; opacity: 0.015; pointer-events: none; line-height: 1; z-index: 1; }
        
        .hero-content { position: relative; z-index: 10; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
        
        /* Efecto Glitch Cyber en Título */
        .glitch-wrapper { position: relative; margin-bottom: 10px; }
        .hero-nombre { font-size: 5rem; line-height: 1; font-weight: 800; color: #FFF; text-shadow: 0 10px 40px rgba(0,0,0,0.9); position: relative; letter-spacing: 2px; }
        .hero-nombre::before, .hero-nombre::after { content: 'ALEXANDER'; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg-base); opacity: 0.8; z-index: -1; }
        .hero-nombre::before { left: 3px; text-shadow: -2px 0 red; animation: glitch-anim 3s infinite linear alternate-reverse; clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%); }
        .hero-nombre::after { left: -3px; text-shadow: -2px 0 cyan; animation: glitch-anim 2.5s infinite linear alternate-reverse; clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%); }
        @keyframes glitch-anim { 0% { transform: translate3d(0,0,0); } 20% { transform: translate3d(-2px, 2px, 0); } 40% { transform: translate3d(-2px, -2px, 0); } 60% { transform: translate3d(2px, 2px, 0); } 80% { transform: translate3d(2px, -2px, 0); } 100% { transform: translate3d(0,0,0); } }

        .hero-fecha { font-size: 1.2rem; color: var(--color-neon); letter-spacing: 5px; text-shadow: 0 0 15px rgba(0,229,255,0.4); margin-bottom: 40px; font-weight: 600; }

        .contador-grid { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; }
        .contador-box { background: rgba(0,0,0,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--color-borde); width: 85px; height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 12px; position: relative; box-shadow: inset 0 0 20px rgba(0,229,255,0.08), 0 10px 30px rgba(0,0,0,0.8); }
        .contador-box::before { content: ''; position: absolute; top: 0; left: 10%; width: 80%; height: 2px; background: var(--color-neon); box-shadow: 0 0 15px var(--color-neon); }
        .contador-numero { font-family: var(--font-display); font-size: 2.8rem; font-weight: 700; line-height: 1; color: var(--color-texto-main); text-shadow: 0 0 20px rgba(255,255,255,0.4); }
        .contador-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; margin-top: 5px; color: var(--color-texto-muted); }

        /* ==========================================================================
           7. AGENDA Y MENSAJE
           ========================================================================== */
        .foto-marco { position: relative; width: 100%; max-width: 280px; aspect-ratio: 3/4; margin: 0 auto 35px; border-radius: var(--borde-radio); padding: 5px; background: linear-gradient(135deg, var(--color-neon), rgba(0,0,0,0), var(--color-neon)); box-shadow: 0 20px 60px rgba(0, 229, 255, 0.2); animation: respiroNeon 4s ease-in-out infinite alternate; }
        @keyframes respiroNeon { 0% { box-shadow: 0 10px 40px rgba(0, 229, 255, 0.1); } 100% { box-shadow: 0 20px 60px rgba(0, 229, 255, 0.3); } }
        .foto-marco img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; filter: grayscale(15%) contrast(1.2); }
        
        /* ==========================================================================
           8. MI EVOLUCIÓN (Timeline con Fotos Flotantes)
           ========================================================================== */
        .timeline { position: relative; padding: 20px 0; margin-left: 20px; }
        .timeline::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 2px; background: linear-gradient(to bottom, transparent, var(--color-neon), var(--color-neon), transparent); box-shadow: 0 0 10px var(--color-neon);}
        
        .timeline-item { position: relative; padding-left: 45px; margin-bottom: 60px; }
        .timeline-item:last-child { margin-bottom: 0; }
        .timeline-dot { position: absolute; left: -9px; top: 5px; width: 20px; height: 20px; background: var(--color-bg-base); border: 2px solid var(--color-neon); border-radius: 50%; box-shadow: 0 0 20px var(--color-neon); z-index: 2; animation: pulseDot 2s infinite; }
        @keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(0,229,255,0.4); } 70% { box-shadow: 0 0 0 15px rgba(0,229,255,0); } 100% { box-shadow: 0 0 0 0 rgba(0,229,255,0); } }
        
        .timeline-year { font-family: var(--font-display); font-size: 1.8rem; color: var(--color-neon); font-weight: 800; margin-bottom: 15px; text-shadow: 0 0 15px rgba(0, 229, 255, 0.4); letter-spacing: 2px; }
        .timeline-content { background: rgba(255,255,255,0.02); border: 1px solid rgba(0,229,255,0.15); padding: 20px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
        
        /* Fotos Flotantes en Timeline (Hardware Accelerated) */
        .img-flotante-wrapper { width: 100%; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; margin-bottom: 15px; border: 1px solid rgba(0,229,255,0.2); animation: flotarElemento 5s ease-in-out infinite alternate; box-shadow: 0 10px 25px rgba(0,0,0,0.8); }
        .timeline-item:nth-child(even) .img-flotante-wrapper { animation-delay: 1s; animation-duration: 6s; } /* Asincronía para que no se vean mecánicas */
        @keyframes flotarElemento { 0% { transform: translate3d(0, -8px, 0); } 100% { transform: translate3d(0, 8px, 0); } }
        .img-flotante-wrapper img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%); }

        .timeline-content p { font-size: 0.95rem; color: var(--color-texto-main); margin: 0; line-height: 1.7; }

        /* ==========================================================================
           9. GALERÍA 3D PREMIUM (Coverflow JS)
           ========================================================================== */
        .carousel-container { position: relative; width: 100%; height: 380px; perspective: 1200px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 25px; }
        .carousel-item { position: absolute; width: 240px; height: 320px; border-radius: 16px; border: 1px solid rgba(0, 229, 255, 0.4); overflow: hidden; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease, box-shadow 0.6s ease; box-shadow: 0 15px 40px rgba(0,0,0,0.9); }
        .carousel-item img { width: 100%; height: 100%; object-fit: cover; }
        .carousel-controls { display: flex; justify-content: center; gap: 25px; margin-top: 10px; }
        .btn-carousel { background: rgba(0,229,255,0.05); border: 1px solid var(--color-neon); color: var(--color-neon); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; cursor: pointer; transition: all 0.3s ease; box-shadow: inset 0 0 10px rgba(0,229,255,0.1); }
        .btn-carousel:hover { background: var(--color-neon); color: #000; transform: translate3d(0,-4px,0); box-shadow: 0 5px 20px rgba(0,229,255,0.5); }

        /* ==========================================================================
           10. MIXOLOGÍA / BARRA VIP (NUEVA SECCIÓN)
           ========================================================================== */
        .grid-bebidas { display: grid; grid-template-columns: 1fr; gap: 20px; }
        .bebida-card { background: linear-gradient(135deg, rgba(20,20,25,0.8), rgba(0,0,0,0.8)); border: 1px solid rgba(0,229,255,0.2); border-radius: 16px; padding: 20px; display: flex; align-items: center; gap: 20px; transition: transform 0.3s ease; }
        .bebida-card:hover { transform: translate3d(0, -5px, 0); border-color: var(--color-neon); }
        .bebida-icono { width: 60px; height: 60px; background: rgba(0,229,255,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--color-neon); border: 1px solid rgba(0,229,255,0.3); }
        .bebida-info h3 { font-size: 1.3rem; margin-bottom: 5px; color: #FFF; }
        .bebida-info p { font-size: 0.85rem; color: var(--color-texto-muted); line-height: 1.4; }

        /* ==========================================================================
           11. DRESS CODE & REGALOS
           ========================================================================== */
        .icono-seccion { width: 75px; height: 75px; background: rgba(0,229,255,0.05); color: var(--color-neon); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin: 0 auto 25px; border: 1px solid rgba(0, 229, 255, 0.4); box-shadow: inset 0 0 20px rgba(0, 229, 255, 0.1), 0 0 30px rgba(0,229,255,0.2); }
        .etiqueta-tech { display: inline-block; background: rgba(255,255,255,0.05); border: 1px solid var(--color-borde); padding: 8px 30px; border-radius: 30px; font-family: var(--font-display); font-size: 1.3rem; color: var(--color-neon); letter-spacing: 2px; margin-bottom: 15px; box-shadow: 0 0 15px rgba(0,229,255,0.1); }
        
        .tarjeta-bancaria { background: linear-gradient(135deg, rgba(20,20,25,0.9), rgba(5,5,5,0.9)); border: 1px solid var(--color-borde); border-radius: 16px; padding: 25px; text-align: left; margin-top: 25px; position: relative; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.7); }
        .tarjeta-bancaria::before { content: ''; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; background: var(--color-neon-dim); border-radius: 50%; filter: blur(50px); }
        .btn-copiar { background: transparent; border: 1px solid var(--color-neon); color: var(--color-neon); padding: 6px 16px; border-radius: 6px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s ease; font-weight: 600; }
        .btn-copiar:hover { background: var(--color-neon); color: #000; box-shadow: 0 0 20px rgba(0,229,255,0.6); }

        /* ==========================================================================
           12. FORMULARIO CONSOLIDADO (RSVP + DJ + MENSAJE)
           ========================================================================== */
        .mega-form { background: rgba(5,5,8,0.7); border: 1px solid var(--color-borde); border-radius: 20px; padding: 30px 20px; margin-top: 20px; box-shadow: inset 0 0 30px rgba(0,0,0,0.8); }
        .form-group { margin-bottom: 20px; text-align: left; }
        .form-group label { display: block; font-family: var(--font-display); font-size: 1.1rem; color: var(--color-neon); margin-bottom: 8px; letter-spacing: 1px; }
        .input-vip { width: 100%; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.15); color: #FFF; padding: 16px; border-radius: 12px; font-family: var(--font-body); font-size: 1rem; transition: all 0.3s ease; outline: none; }
        .input-vip:focus { border-color: var(--color-neon); background: rgba(0,229,255,0.05); box-shadow: 0 0 15px rgba(0,229,255,0.2); }
        .input-vip::placeholder { color: #52525B; }
        
        /* ==========================================================================
           13. FOOTER ARTEENLINK
           ========================================================================== */
        .footer-agencia { background-color: transparent; border-top: 1px solid var(--color-borde); padding: 60px 20px 90px; text-align: center; position: relative; }
        .footer-agencia::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 50%; height: 2px; background: linear-gradient(90deg, transparent, var(--color-neon), transparent); opacity: 0.8; box-shadow: 0 0 20px var(--color-neon); }
        .footer-pre { font-size: 0.85rem; color: var(--color-texto-muted); letter-spacing: 3px; margin-bottom: 10px; text-transform: uppercase; }
        .footer-logo { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; color: #FFF; margin-bottom: 15px; letter-spacing: 1px; }
        .footer-logo span { color: var(--color-neon); text-shadow: 0 0 20px rgba(0, 229, 255, 0.5); }
        .btn-contacto-footer { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: rgba(0, 229, 255, 0.08); border: 1px solid var(--color-neon); color: var(--color-neon); padding: 14px 30px; border-radius: 50px; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: 2px; transition: all 0.3s ease; text-transform: uppercase; cursor: pointer; margin-top: 20px; }
        .btn-contacto-footer:hover { background: var(--color-neon); color: #000; transform: translate3d(0, -4px, 0); box-shadow: 0 10px 25px rgba(0, 229, 255, 0.5); }

        /* ==========================================================================
           14. MEDIA QUERIES
           ========================================================================== */
        @media (min-width: 768px) {
            .hero-nombre { font-size: 7rem; }
            .contador-box { width: 100px; height: 110px; }
            .contador-numero { font-size: 3.5rem; }
            .grid-bebidas { grid-template-columns: repeat(2, 1fr); }
            .timeline { margin-left: auto; margin-right: auto; }
            .timeline::before { left: 50%; transform: translateX(-50%); }
            .timeline-item { width: 50%; padding-left: 0; padding-right: 50px; text-align: right; margin-left: 0; }
            .timeline-item:nth-child(even) { margin-left: 50%; padding-right: 0; padding-left: 50px; text-align: left; }
            .timeline-dot { left: auto; right: -11px; }
            .timeline-item:nth-child(even) .timeline-dot { right: auto; left: -11px; }
            .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        }