:root {
            --primary-bg: #0b1120; 
            --secondary-bg: #111827; 
            --tertiary-bg: #1f2937; 
            --primary-text: #f3f4f6; 
            --secondary-text: #9ca3af; 
            --accent-purple: #818cf8; 
            --accent-blue: #3b82f6; 
            --accent-cyan: #06b6d4; 
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--primary-bg);
            color: var(--primary-text);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        .font-outfit { font-family: 'Outfit', sans-serif; }
        .font-caveat { font-family: 'Caveat', cursive; }
        .font-montserrat { font-family: 'Montserrat', sans-serif; }
        .font-orbitron { font-family: 'Orbitron', sans-serif; }
        .font-fira { font-family: 'Fira Code', monospace; }

        ::selection { background-color: var(--accent-cyan); color: #0b1120; }
        
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--primary-bg); }
        ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan); }

        /* Aurora Background Dinámico */
        .aurora-background {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100vh;
            overflow: hidden; z-index: 0;
            filter: blur(140px) saturate(180%);
            opacity: 0.42;
            pointer-events: none;
        }
        .aurora-dot { position: absolute; border-radius: 50%; will-change: transform; mix-blend-mode: screen; }
        .aurora-dot-1 { width: 650px; height: 650px; background-color: rgba(99, 102, 241, 0.45); top: -150px; left: -200px; animation: aurora-float 18s ease-in-out infinite alternate; }
        .aurora-dot-2 { width: 550px; height: 550px; background-color: rgba(6, 182, 212, 0.45); top: 35%; left: 65%; animation: aurora-float 22s ease-in-out infinite alternate-reverse; }
        .aurora-dot-3 { width: 500px; height: 500px; background-color: rgba(168, 85, 247, 0.35); top: 75%; left: 15%; animation: aurora-float 20s ease-in-out infinite alternate; }
        @keyframes aurora-float {
            from { transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); }
            to { transform: translateY(80px) translateX(60px) scale(1.1) rotate(20deg); }
        }
        
        main, header, footer, #header-container { position: relative; z-index: 2; }

        /* Banner Promocional */
        #top-bar {
            background: linear-gradient(90deg, rgba(15, 23, 42, 0.98), rgba(14, 116, 144, 0.95), rgba(67, 56, 202, 0.98));
            border-bottom: 1px solid rgba(6, 182, 212, 0.3);
            backdrop-filter: blur(12px);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
        }

        /* Header Ancho Completo */
        #main-header {
            background-color: rgba(11, 17, 32, 0.6);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.3s ease;
        }

        .header-scrolled #main-header {
            background-color: rgba(11, 17, 32, 0.95) !important;
            backdrop-filter: blur(20px) !important;
            border-bottom-color: rgba(6, 182, 212, 0.3) !important;
            box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(6, 182, 212, 0.12);
            padding-top: 0.6rem !important;
            padding-bottom: 0.6rem !important;
        }

        .scrolled-down #top-bar {
            transform: translateY(-100%);
            opacity: 0;
            pointer-events: none;
        }

        /* Navigation Links */
        .nav-link {
            color: #cbd5e1;
            transition: all 0.3s ease;
            position: relative;
            font-weight: 500;
            font-size: 0.875rem;
        }
        .nav-link:hover { color: #ffffff; text-shadow: 0 0 10px rgba(6, 182, 212, 0.6); }
        .nav-link::after {
            content: '';
            position: absolute; width: 100%; transform: scaleX(0);
            height: 2px; bottom: -6px; left: 0;
            background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
            transform-origin: bottom right;
            transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
            border-radius: 2px;
        }
        .nav-link:hover::after { transform: scaleX(1); transform-origin: bottom left; }

        /* Gradient Text Animado */
        @keyframes text-shine {
            0% { background-position: 0% center; }
            100% { background-position: -200% center; }
        }
        .animate-text-shine {
            background: linear-gradient(to right, #f8fafc 15%, var(--accent-cyan) 35%, #818cf8 65%, #f8fafc 85%);
            background-size: 200% auto;
            color: transparent;
            background-clip: text;
            -webkit-background-clip: text;
            animation: text-shine 5s linear infinite;
        }

        @keyframes icon-pulse-glow {
            0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.6)); }
            50% { transform: scale(1.1); filter: drop-shadow(0 0 16px rgba(59, 130, 246, 0.9)); }
        }
        .animate-icon-pulse { animation: icon-pulse-glow 3s ease-in-out infinite; }

        /* Tarjetas Glassmorphism avanzadas */
        .glass-card, .card-hover-effect, .announcement-card, .faq-card, .tilt-card {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.7) 100%);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 1.5rem;
            transition: transform 0.3s cubic-bezier(0.1, 0, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
            transform-style: preserve-3d;
            will-change: transform;
        }

        .glass-card::before, .card-hover-effect::before, .announcement-card::before, .faq-card::before {
            content: "";
            position: absolute; inset: 0; z-index: -1;
            background: radial-gradient(500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(6, 182, 212, 0.25), transparent 50%);
            opacity: 0; transition: opacity 0.4s ease;
        }

        .glass-card:hover, .card-hover-effect:hover, .announcement-card:hover, .faq-card:hover {
            border-color: rgba(6, 182, 212, 0.6);
            box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.85), 0 0 40px -5px rgba(6, 182, 212, 0.35);
        }

        .glass-card:hover::before, .card-hover-effect:hover::before, .announcement-card:hover::before, .faq-card:hover::before { opacity: 1; }

        .glass-panel {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.92) 100%);
            backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.7);
        }

        /* Ticker Infinite Scroll */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        @keyframes ticker {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .ticker-wrap { width: 100%; overflow: hidden; position: relative; }
        .ticker-wrap::before, .ticker-wrap::after {
            content: ''; position: absolute; top: 0; width: 140px; height: 100%; z-index: 2;
        }
        .ticker-wrap::before { left: 0; background: linear-gradient(to right, var(--primary-bg), transparent); }
        .ticker-wrap::after { right: 0; background: linear-gradient(to left, var(--primary-bg), transparent); }
        .ticker { display: flex; width: max-content; animation: ticker 30s linear infinite; }
        .ticker:hover { animation-play-state: paused; }
        .ticker-item { flex-shrink: 0; padding: 0 2.5rem; display: flex; align-items: center; justify-content: center; }

        /* Animaciones Flotantes */
        @keyframes float-slow {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-12px) rotate(1deg); }
        }
        .animate-float-slow { animation: float-slow 5s ease-in-out infinite; }
        .animate-float-delayed { animation: float-slow 5s ease-in-out infinite 2.5s; }

        /* Shine Sweep */
        .shine-hover { position: relative; overflow: hidden; }
        .shine-hover::after {
            content: ''; position: absolute; top: -50%; left: -60%; width: 50%; height: 200%;
            background: linear-gradient(to right, transparent, rgba(255,255,255,0.15), transparent);
            transform: rotate(25deg);
            transition: all 0.75s ease;
        }
        .shine-hover:hover::after { left: 130%; }

        /* Estilos Range Sliders */
        input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none; height: 22px; width: 22px; border-radius: 50%;
            background: #06b6d4; cursor: pointer;
            box-shadow: 0 0 15px rgba(6, 182, 212, 0.9); margin-top: -7px;
            transition: transform 0.2s ease;
        }
        input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
        input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8px; cursor: pointer; background: #1e293b; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.08); }

        /* Modal Blur Back */
        .modal-blur {
            backdrop-filter: blur(20px);
            background-color: rgba(7, 10, 18, 0.88);
        }

        /* Fondo global: Burbujas de Espuma flotando en toda la página */
        .page-bubbles {
            position: fixed;
            inset: 0;
            z-index: 1;
            overflow: hidden;
            pointer-events: none;
        }
        .page-bubbles .bubble {
            position: absolute;
            bottom: -12%;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 28%, rgba(255,255,255,0.95), rgba(255,255,255,0.15) 55%, rgba(255,255,255,0.05) 75%);
            box-shadow: inset 0 0 6px rgba(255,255,255,0.5), 0 0 10px rgba(103,232,249,0.25);
            border: 1px solid rgba(255,255,255,0.25);
            animation-name: page-bubble-rise;
            animation-timing-function: ease-in;
            animation-iteration-count: infinite;
        }
        @keyframes page-bubble-rise {
            0%   { transform: translate(0, 0) scale(0.8); opacity: 0; }
            8%   { opacity: 0.75; }
            50%  { transform: translate(var(--drift, 20px), -55vh) scale(1); }
            92%  { opacity: 0.55; }
            100% { transform: translate(calc(var(--drift, 20px) * 1.6), -115vh) scale(0.9); opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .page-bubbles .bubble { animation: none; opacity: 0; }
        }