body { font-family: 'Poppins', sans-serif; }
        /* prelo */
        /* Evita el scroll mientras carga */
        /* --- PRELOADER PREMIUM DEVPRO (FLUJO DE DATOS CUÁNTICO) --- */
        
        body.loading {
            overflow: hidden !important;
        }

        #devpro-preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Fondo con profundidad sutil */
            background: radial-gradient(circle at center, #ffffff 0%, #f1f5f9 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 99999;
            transition: opacity 0.8s ease-in-out, visibility 0.8s;
            opacity: 1;
            visibility: visible;
        }
        /* Esta clase se agrega con JS para iniciar el desvanecimiento */
        #devpro-preloader.fade-out {
            opacity: 0;
            visibility: hidden;
            pointer-events: none; /* Esto permite hacer clic en la web mientras el preloader se desvanece */
        }

        /* Clase para ocultar suavemente */
        #devpro-preloader.hide-preloader {
            opacity: 0;
            visibility: hidden;
        }

        .devpro-logo-anim {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* Flotación suave de todo el conjunto */
            animation: subtleFloat 3s ease-in-out infinite;
        }

        /* --- FORMAS GEOMÉTRICAS CON VOLUMEN --- */

        .logo-shape {
            width: 55px;
            height: 40px;
            background: linear-gradient(90deg, #0f172a 50%, #2563eb 50%);
            opacity: 0;
            /* Sombras suaves para efecto 3D */
            filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.15));
        }

        /* Flecha SUPERIOR */
        .shape-top {
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            margin-bottom: 20px; 
            transform: translateY(-40px) scale(0.8);
            animation: slideInTopPremium 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; /* Efecto rebote */
        }

        /* Flecha INFERIOR */
        .shape-bottom {
            clip-path: polygon(0 0, 100% 0, 50% 100%);
            margin-top: 20px;
            transform: translateY(40px) scale(0.8);
            animation: slideInBottomPremium 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; /* Efecto rebote */
        }

        /* --- TEXTO PREMIUM --- */
        .brand-text {
            font-family: 'Inter', sans-serif;
            font-size: 36px;
            font-weight: 900;
            margin: 0;
            line-height: 1;
            letter-spacing: -0.5px;
            opacity: 0;
            /* Texto con degradado sutil */
            background: linear-gradient(to right, #0f172a, #1e40af);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
            animation: fadeInText 1s ease forwards 0.4s;
        }

        /* --- AQUÍ ESTÁ EL CAMBIO: BARRA DE FLUJO DE DATOS --- */

        /* El "riel" por donde pasan los datos */
        .loading-line-container {
            width: 160px;
            height: 4px; /* Barra fina y elegante */
            /* Fondo de riel muy sutil */
            background: rgba(59, 130, 246, 0.1); 
            border-radius: 10px;
            overflow: hidden;
            margin-top: 35px;
            opacity: 0;
            /* Sombra interna para profundidad */
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
            animation: fadeInText 0.5s ease forwards 1s;
            position: relative;
        }

        /* Los paquetes de datos corriendo */
        .loading-line {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            /* CREAMOS EL EFECTO DE ENERGÍA:
            Un degradado complejo que simula "paquetes" de luz azul moviéndose.
            Transparente -> Azul Suave -> Azul Brillante -> Azul Suave -> Transparente
            */
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(37, 99, 235, 0.4) 25%, 
                #60a5fa 50%, 
                rgba(37, 99, 235, 0.4) 75%, 
                transparent 100%
            );
            /* Hacemos el fondo más ancho que el contenedor para poder moverlo */
            background-size: 200% auto;
            /* Añadimos un resplandor (glow) azul intenso */
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.8);
            /* Animación de flujo rápido e infinito */
            animation: quantumFlow 1.2s linear infinite;
        }

        /* --- KEYFRAMES --- */

        /* Animación del flujo de datos */
        @keyframes quantumFlow {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        @keyframes slideInTopPremium {
            to { transform: translateY(0) scale(1); opacity: 1; }
        }

        @keyframes slideInBottomPremium {
            to { transform: translateY(0) scale(1); opacity: 1; }
        }

        @keyframes fadeInText {
            to { opacity: 1; }
        }

        @keyframes subtleFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }
        /* --- TEXTO DE PIE DE PRELOADER --- */

        .preloader-footer {
            margin-top: 25px; /* Separación de la barra de carga */
            text-align: center;
            font-family: 'Inter', sans-serif;
            color: #64748b; /* Gris suave (Slate-500) para no competir con el logo */
            animation: fadeInText 1s ease forwards 0.8s; /* Aparece suavemente al final */
            opacity: 0;
        }

        .trust-services {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #94a3b8; /* Gris más claro */
        }

        .dot {
            color: #cbd5e1;
            margin: 0 4px;
        }
        /* fun prelo */
        
        .hero-bg {
            background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1558060370-d644479cb673?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-position: center;
            background-size: cover;
        }
        
        /* Animaciones */
        #mobile-menu {
            transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
        }
        #mobile-menu.open {
            max-height: 400px;
            opacity: 1;
        }

        .animate-fade-in-up { animation: fadeInUp 0.3s ease-out forwards; }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(10px) scale(0.95); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

        /* CARRITO LATERAL */
        #cart-sidebar { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #cart-sidebar.open { transform: translateX(0); }
        #cart-sidebar.closed { transform: translateX(100%); }
        /* Ajuste de altura para celulares (Modo Modal Inferior) */
        @media (max-width: 639px) {
            #cart-sidebar {
                height: 70vh !important; /* Altura corta: 70% de la pantalla */
                border-top-left-radius: 30px;
                border-top-right-radius: 30px;
                bottom: 0;
                top: auto; /* Anula el top-0 de PC */
            }
        }