:root {
        --primary-color: #c1121f;
        --primary-dark: #7f0d14;
        --navbar-bg: #c1121f; /* Rojo Carmesí Premium para el Nav */
        --btn-action-bg: #c1121f; /* Rojo Carmesí para botones de acción */
        --btn-action-hover: #7f0d14; /* Rojo Oscuro para hover */
        --glass-bg: rgba(255, 255, 255, 0.8);
        --glass-border: rgba(255, 255, 255, 0.2);
    }

    body {
        font-family: 'Outfit', sans-serif;
        background-color: #fdfdfd;
        color: #2d3436;
        overflow-x: hidden;
    }

    /* GLASSMORPHISM UTILITY */
    .glass-card {
        background: var(--glass-bg);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid var(--glass-border);
        border-radius: 20px;
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
    }

    .premium-shadow {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    }

    /* Navbar General compacta */
    .navbar { 
        background-color: var(--navbar-bg) !important;
        padding-top: 6px;
        padding-bottom: 6px;
        border-bottom: none !important;
    }

    .sub-navbar {
        background-color: #ffffff !important;
        border-bottom: 1px solid #eeeeee;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .sub-nav-link {
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #000000 !important;
        text-decoration: none;
        transition: color 0.2s;
        display: flex;
        align-items: center;
        position: relative;
    }

    .sub-nav-link:hover {
        color: var(--primary-color) !important;
    }

    .sub-nav-link i {
        font-size: 1rem;
        color: #000000 !important;
        margin-right: 6px;
    }

    .navbar-brand {
        color: white !important;
        font-size: 1.6rem;
        letter-spacing: -0.5px;
    }

    .vr-separator {
        border-left: 1px solid rgba(255, 255, 255, 0.3);
        height: 35px;
        margin: 0 15px;
    }

    /* Botón Categorías */
    #dropdownCategorias {
        color: white !important;
        background: transparent !important;
        border: none !important;
        font-weight: 500;
        font-size: 1.05rem;
        display: flex;
        align-items: center;
        padding: 0;
    }

    #dropdownCategorias:hover { opacity: 0.9; }

    /* Buscador como Píldora */
    .search-container {
        flex-grow: 1;
        max-width: 500px; 
        margin: 0 40px;
        position: relative;
    }

    #ajax-search-input {
        border-radius: 50px !important;
        border: none !important;
        padding: 10px 25px !important;
        font-size: 0.95rem;
        width: 100%;
        outline: none;
    }

    /* Links de Usuario y Carrito */
    .nav-link-custom {
        color: white !important;
        text-decoration: none;
        font-weight: 500;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 1rem;
        transition: opacity 0.2s, transform 0.2s;
    }

    .nav-link-custom:hover { 
        opacity: 1 !important; 
        color: #ffffff !important;
        text-shadow: 0 0 10px rgba(255,255,255,0.6) !important;
        transform: translateY(-1px);
    }
    .nav-link-custom i { font-size: 1.4rem; }

    /* Carrito Badge */
    .cart-badge {
        position: absolute;
        top: -5px;
        right: -8px;
        background-color: #d62828 !important; /* Rojo vibrante y premium para notificaciones */
        color: #ffffff !important; /* Blanco puro para contraste perfecto */
        font-weight: 700 !important;
        font-size: 0.65rem;
        padding: 2px 6px !important;
        border-radius: 50px;
        border: 1.5px solid #ffffff !important; /* Hermoso borde blanco protector */
        line-height: 1;
        z-index: 10;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    }

    /* MENU PRINCIPAL Y SUBMENUS */
    .dropdown-menu {
        background-color: #ffffff !important;
        opacity: 1 !important;
        border-radius: 15px !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
        box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
        padding: 0 !important; /* Quitar padding superior/inferior para encajar con los items redondeados */
        z-index: 1050;
    }

    .dropdown-item {
        font-size: 0.9rem;
        color: #333;
        padding: 10px 20px;
        border-bottom: 1px solid #f1f1f1;
        transition: all 0.2s;
    }

    .dropdown-item:hover {
        background-color: #f8f9fa;
        color: var(--primary-color);
        padding-left: 25px;
    }

    /* Redondear esquinas internas para evitar que el fondo de hover sobrepase los bordes redondeados del menú */
    .dropdown-menu > li:first-child > .dropdown-item,
    .dropdown-menu > :first-child > .dropdown-item {
        border-top-left-radius: 14px !important;
        border-top-right-radius: 14px !important;
    }
    
    .dropdown-menu > li:last-child > .dropdown-item,
    .dropdown-menu > :last-child > .dropdown-item {
        border-bottom-left-radius: 14px !important;
        border-bottom-right-radius: 14px !important;
        border-bottom: none !important; /* Limpia el borde divisorio al final */
    }

    .dropdown-submenu { position: relative; }
    .dropdown-submenu .submenu {
        display: none;
        position: absolute;
        left: 100%;
        top: 0;
        min-width: 280px;
        margin-top: -1px;
    }

    .dropdown-submenu:hover > .submenu { display: block; }
    .dropdown-toggle::after { display: none; }

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -1px;
    }

    .dropdown-submenu:hover > .dropdown-menu { display: block !important; }
    .dropdown-item:focus { background-color: #f8f9fa; }
    
    .dropdown-menu {
        z-index: 2000 !important;
    }

    .navbar {
        z-index: 1050; 
    }

    /* --- ESTILOS BUSCADOR AJAX --- */
    #search-results-container {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 2000;
        background: white;
        border-radius: 0 0 12px 12px;
        display: none;
        max-height: 450px;
        overflow-y: auto;
        margin-top: 5px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }

    .search-result-item {
        padding: 12px 20px;
        border-bottom: 1px solid #f8f9fa;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-decoration: none;
        transition: background 0.2s;
    }

    .search-result-item:hover {
        background-color: #f1f8f4;
    }

    .search-result-info .name {
        display: block;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 2px;
    }

    .search-result-info .sku {
        font-size: 0.75rem;
        color: #95a5a6;
    }

    .search-result-price {
        font-weight: bold;
        color: #111111;
        font-size: 1.1rem;
    }

    /* Mejora para el contenedor de resultados */
    #search-results-container {
        backdrop-filter: blur(8px); /* Desenfoque de fondo */
        background: rgba(255, 255, 255, 0.95); 
        border: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important;
        transition: all 0.3s ease;
    }

    /* Hover más suave en los items */
    .search-result-item:hover {
        background-color: rgba(243, 112, 33, 0.08); /* Usando naranja premium con transparencia */
        border-left: 4px solid var(--primary-color);
        padding-left: 16px; /* Efecto de desplazamiento */
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    #search-results-container {
        animation: fadeIn 0.2s ease-out;
    }

    /* --- PAGINACIÓN PREMIUM MULTICOLOR --- */

/* Estilo para los botones normales (Anterior, Siguiente y Números) */
.custom-page-link {
    color: var(--btn-action-bg) !important; /* Rojo Carmesí */
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    font-weight: 600;
    transition: all 0.2s ease;
    border-radius: 10px !important;
    margin: 0 4px;
    padding: 8px 16px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* Efecto al pasar el mouse por los botones normales */
.custom-page-link:hover {
    background-color: #fff0f1 !important; /* Fondo Rojo Suave */
    color: var(--btn-action-hover) !important; /* Rojo Oscuro Hover */
    border-color: var(--btn-action-bg) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(193, 18, 31, 0.08);
}

/* Estilo para el número de página ACTIVO */
.custom-active-link {
    background-color: var(--btn-action-bg) !important; /* Rojo Carmesí Premium */
    border-color: var(--btn-action-bg) !important;
    color: #ffffff !important;
    font-weight: 700;
    border-radius: 10px !important;
    margin: 0 4px;
    padding: 8px 16px;
    box-shadow: 0 4px 10px rgba(193, 18, 31, 0.2);
}

.btn-premium {
    background-color: var(--btn-action-bg) !important;
    border-color: var(--btn-action-bg) !important;
    color: #fff !important;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-premium:hover {
    background-color: var(--btn-action-hover) !important;
    border-color: var(--btn-action-hover) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(45, 106, 79, 0.3);
}

.btn-premium-outline {
    background-color: transparent !important;
    border: 2px solid var(--btn-action-bg) !important;
    color: var(--btn-action-bg) !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-premium-outline:hover {
    background-color: var(--btn-action-bg) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* Eliminar el resplandor azul de Bootstrap al hacer clic */
.page-link:focus {
    box-shadow: 0 0 0 0.25rem rgba(243, 112, 33, 0.25) !important;
}

/* Estilo para el pequeño texto inferior */
.cursor-pointer:hover {
    color: var(--primary-color) !important;
    cursor: pointer;
}

.page-item:first-child .page-link {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.page-item:last-child .page-link {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* --- ESTILO CERTIFICADOS (PÍLDORAS GRISES) --- */
.certificado-badge {
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    padding: 4px 12px 4px 4px; /* Padding izquierdo menor por el círculo */
    border-radius: 50px;
    border: 1px solid #e0e0e0;
    font-size: 0.8rem;
    color: #444;
}

.certificado-badge .icon-circle {
    background: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* --- ESTILO OCTÓGONOS (NEGROS OFICIALES) --- */
.octogono-badge {
    background-color: #000;
    color: #fff;
    padding: 10px;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    line-height: 1.1;
}

.octogono-text {
    font-size: 0.65rem;
    font-family: 'Arial Black', sans-serif;
}

.octogono-text strong {
    font-size: 0.75rem;
}

/* --- ESTILO FAVORITOS --- */
.btn-favorito {
    width: 38px;
    height: 38px;
    background-color: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #888;
    position: relative;
    text-decoration: none !important;
    flex-shrink: 0; /* Evita que se deforme en flexbox */
}

.btn-favorito:hover {
    background-color: #ffffff;
    color: #e63946;
    border-color: #e63946;
    box-shadow: 0 4px 10px rgba(230, 57, 70, 0.2);
}

/* Estado Activo (Clickeado) */
.btn-favorito.active {
    background-color: #ffffff;
    color: #e63946 !important;
    border-color: #e63946 !important;
    box-shadow: 0 2px 8px rgba(230, 57, 70, 0.3);
}

.btn-favorito.active i::before {
    content: "\f415"; /* bi-heart-fill */
}

.btn-favorito i {
    font-size: 1.2rem;
    transition: transform 0.2s ease;
}

.btn-favorito:hover i {
    transform: scale(1.15);
}

/* Borde VERDE en la card */
.card-producto-favorito {
    transition: all 0.3s ease;
    border: 1px solid #eee !important;
}

.card-producto-favorito:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 8px 15px rgba(243, 112, 33, 0.15) !important;
}

    /* --- OPTIMIZACIÓN MÓVIL --- */
    @media (max-width: 991px) {
        .search-container.desktop-only { display: none !important; }
        .mobile-search-container {
            padding: 8px 15px;
            background-color: var(--primary-color);
            margin-top: -1px;
        }
        #ajax-search-input-mobile {
            border-radius: 50px !important;
            border: none !important;
            padding: 6px 18px !important;
            font-size: 1rem;
            width: 100%;
        }
        .navbar-brand { font-size: 1.6rem; }
        h1 { font-size: 1.8rem !important; }
        h2 { font-size: 1.5rem !important; }
        .section-title { font-size: 1.4rem !important; }

        /* Fix submenús que se salen de pantalla */
        .dropdown-submenu .submenu, 
        .dropdown-submenu .dropdown-menu {
            position: static !important;
            display: none;
            width: 100% !important;
            min-width: 100% !important;
            box-shadow: none !important;
            border: none !important;
            border-left: 3px solid var(--primary-color) !important;
            padding-left: 15px !important;
            background: #fafafa !important;
        }
        .dropdown-submenu:hover > .submenu,
        .dropdown-submenu:hover > .dropdown-menu {
            display: block !important;
        }
    }

    /* Botón Flotante Carrito */
    .btn-floating-cart {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 60px;
        height: 60px;
        background-color: var(--primary-color);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        z-index: 2000;
        text-decoration: none;
        transition: transform 0.2s;
    }
    .btn-floating-cart:active { transform: scale(0.9); }
    .btn-floating-cart i { font-size: 1.5rem; }
    .btn-floating-cart .badge {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 0.65rem;
    }

    /* --- ANIMATIONS & TRANSITIONS SYSTEM --- */
    :root {
        --transition-soft: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        --transition-fast: all 0.2s ease-in-out;
        --hover-lift: translateY(-5px);
    }

    .animate-up {
        opacity: 0;
        transform: translateY(40px);
        transition: var(--transition-soft);
    }
    .animate-up.aos-animate {
        opacity: 1;
        transform: translateY(0);
    }

    /* Micro-interacciones Globales */
    .hover-lift { transition: var(--transition-soft); }
    .hover-lift:hover { transform: var(--hover-lift); }

    .hover-scale { transition: var(--transition-soft); }
    .hover-scale:hover { transform: scale(1.05); }

    /* Botones con Brillo Sutil */
    .btn-premium, .btn-premium-outline, .btn-premium-add {
        position: relative;
        overflow: hidden;
    }
    .btn-premium::after {
        content: '';
        position: absolute;
        top: -50%; left: -50%; width: 200%; height: 200%;
        background: rgba(255,255,255,0.1);
        transform: rotate(45deg);
        transition: 0.5s;
        left: -100%;
    }
    .btn-premium:hover::after { left: 100%; }

    /* Scrollbar invisible pero funcional para carruseles */
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    /* Ajuste de Navbar para suavidad */
    .navbar, .sub-navbar {
        transition: background-color 0.3s ease, padding 0.3s ease;
    }

    /* Clases para transparencia de logos con fondo blanco */
    .mix-multiply { mix-blend-mode: multiply; }
    .mix-screen { mix-blend-mode: screen; }
    .invert-white { filter: grayscale(1) invert(1); }

    /* --- MOBILE NAV REFINEMENT --- */
    @media (max-width: 991px) {
        .navbar-collapse {
            background-color: var(--navbar-bg); /* Fondo sólido naranja */
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            padding: 20px;
            box-shadow: 0 15px 30px rgba(0,0,0,0.2);
            border-radius: 0 0 25px 25px;
            z-index: 1000;
        }
        .nav-link-custom span { display: none; } /* Ocultar texto en iconos móviles */
        .nav-link-custom i { font-size: 1.6rem !important; }
        .navbar-brand img { height: 32px !important; }

        footer {
            padding-top: 2rem !important;
            padding-bottom: 1rem !important;
        }
        footer h6 {
            margin-bottom: 0.8rem !important;
            font-size: 0.8rem !important;
        }
        footer li {
            margin-bottom: 0.4rem !important;
        }
        footer .row.g-4 {
            --bs-gutter-y: 1.5rem !important;
        }
        footer .py-3 {
            padding-top: 1rem !important;
            padding-bottom: 1rem !important;
        }
    }

    /* ==========================================================================
       MEJORAS DE CONTRASTE Y TIPOGRAFÍA PARA LIGHTHOUSE ACCESIBILIDAD
       ========================================================================== */
    
    /* 1. Botón de Categorías - Default, focus y desplegado */
    #dropdownCategorias {
        font-weight: 700 !important;
        color: #ffffff !important;
        opacity: 1 !important;
    }
    #dropdownCategorias:focus, 
    #dropdownCategorias:active, 
    #dropdownCategorias.show {
        color: #000000 !important;
        font-weight: 700 !important;
    }

    /* 2. Enlaces del Navbar y los spans (Héctor, Favoritos, Carrito, Nosotros, Contacto) */
    nav.navbar .nav-link, 
    nav.navbar span,
    .navbar-expand-lg .nav-link,
    .navbar-expand-lg span {
        font-weight: 700 !important;
        opacity: 1 !important;
    }

    /* 3. Enlaces sueltos en el Body (Clase text-decoration-none) */
    body a.text-decoration-none:not(.nav-link-custom) {
        color: #2d6a4f !important;
        font-weight: 600 !important;
    }
    body a.text-decoration-none:not(.nav-link-custom):hover {
        color: #1b4d3e !important;
        text-decoration: underline !important;
    }
    
    /* Excepción de alta especificidad para los nombres de producto en las tarjetas */
    body .card-premium .card-title a,
    body .card-title a.text-decoration-none {
        color: #111111 !important;
        text-decoration: none !important;
    }
    body .card-premium .card-title a:hover,
    body .card-title a.text-decoration-none:hover {
        color: var(--primary-color) !important;
        text-decoration: none !important;
    }

    /* 4. Bloques de descripción o contenedores grises claros (bg-light) */
    div.bg-light p, 
    .bg-light p, 
    div.bg-light, 
    .bg-light {
        color: #1a1a1a !important;
    }

    /* 5. Transparencias de enlaces del Footer (Eliminar opacidad reducida) */
    footer a.text-white {
        opacity: 1 !important;
        color: #ffffff !important;
    }
    footer a.text-white:hover {
        text-decoration: none !important;
        color: #e0e0e0 !important;
    }
    footer a.text-white-50 {
        color: #ffffff !important;
        opacity: 1 !important;
    }
    footer a.text-white-50:hover {
        color: #e0e0e0 !important;
        text-decoration: none !important;
    }

    /* 6. Enlaces de categorías del submenú desplegable en gris oscuro/negro */
    .dropdown-menu a, .dropdown-item {
        color: #111111 !important;
        font-weight: 600 !important;
    }
    
    /* Mantener el color de hover destacado de las categorías */
    .dropdown-item:hover {
        color: var(--primary-color) !important;
        background-color: #f8f9fa !important;
    }

    /* ==========================================================================
       OPTIMIZACIÓN RESPONSIVA DE ESCRITORIO (DISEÑO PREMIUM, CONTRASTE Y ALINEACIÓN)
       ========================================================================== */
    @media (min-width: 992px) {
        /* 1. Agrandar tipografía de la marca */
        .navbar-brand span {
            font-size: 1.65rem !important;
            letter-spacing: -1px !important;
        }

        /* 2. Agrandar tipografía y espaciado del botón de Categorías */
        #dropdownCategorias {
            font-size: 1.15rem !important;
            padding: 8px 16px !important;
        }

        /* 3. Agrandar iconos y etiquetas (Héctor, Favoritos, Carrito) para mejorar contraste */
        .nav-link-custom {
            font-size: 0.95rem !important;
        }
        .nav-link-custom i {
            font-size: 1.65rem !important;
            margin-bottom: 4px !important;
        }

        /* 4. Barra de búsqueda centrada y equilibrada */
        .search-container.desktop-only {
            margin-left: 2.5rem !important; /* Espacio elegante respecto a Categorías */
            margin-right: 2.5rem !important; /* Espacio elegante respecto a los iconos */
            max-width: 550px !important; /* Ancho perfecto para el centro */
            flex-grow: 1 !important;
            width: 100% !important;
        }
    }

    /* ==========================================================================
       FIX PARA EL FOOTER (Elimina la penalización de Touch Targets y Contraste)
       ========================================================================== */
    footer a,
    footer a.text-decoration-none,
    body footer a.text-decoration-none:not(.nav-link-custom) {
        /* 1. Le damos tamaño físico real para el dedo en el celular (Touch Target 48px) */
        display: inline-block !important;
        padding: 8px 12px !important; /* Aire arriba/abajo y a los costados */
        margin-bottom: 6px !important; /* Separa un enlace del que está abajo */
        
        /* 2. Matamos las opacidades que rompen el contraste en el reporte anterior */
        opacity: 1 !important; 
        color: #ffffff !important; /* Blanco pleno y sólido */
        transition: transform 0.2s ease, color 0.2s ease !important;
        text-decoration: none !important;
    }
    footer a:hover,
    footer a.text-decoration-none:hover,
    body footer a.text-decoration-none:not(.nav-link-custom):hover {
        color: #e0e0e0 !important;
        text-decoration: none !important;
        transform: translateY(-1px);
    }

    /* Forzar a que cualquier texto semitransparente o gris en el footer sea blanco puro */
    footer .opacity-75, 
    footer .text-white-50,
    footer p.text-white-50,
    footer span.text-white-50,
    footer .list-unstyled.text-white {
        opacity: 1 !important;
        color: #ffffff !important;
    }

    /* Si usás listas <ul> <li> en el footer, dales espacio a los renglones */
    footer li {
        margin-bottom: 8px !important;
    }

    /* ==========================================================================
       MEJORAS DE NAVEGACIÓN DOCK/LINEAR Y OFFCANVAS PREMIUM
       ========================================================================== */
    
    /* Hover en menú lineal de escritorio para el Mega Menú */
    @media (min-width: 992px) {
        .sub-navbar .container {
            position: relative;
        }
        
        .sub-navbar .dropdown-menu.mega-menu {
            position: absolute;
            left: 0;
            right: 0;
            width: 100% !important;
            top: 100%;
            margin-top: 13px; /* Lo baja para que nazca justo desde el borde inferior de la barra (top del hero) */
            background-color: #ffffff !important;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04) !important;
            border: 1px solid #e0e0e0 !important;
            border-top: none !important;
            border-radius: 0 0 4px 4px !important;
            padding: 25px 30px !important;
            
            /* Ocultar por defecto */
            display: block !important;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px);
            /* Sin transición aquí para que el cierre sea inmediato y no se superpongan */
            transition: none;
        }

        /* Puente invisible de ancho completo para que el usuario no pierda el hover si mueve el mouse en diagonal */
        .sub-navbar .dropdown-menu.mega-menu::before {
            content: '';
            position: absolute;
            top: -15px; /* Cubre la brecha del margin-top */
            left: 0;
            right: 0;
            height: 15px;
            background: transparent;
        }
        
        .sub-navbar .dropdown:hover > .dropdown-menu.mega-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            /* Transición solo al abrir */
            transition: opacity 0.25s ease-out, transform 0.25s ease-out;
        }
        
        .sub-navbar .dropdown {
            position: static; /* Imprescindible para que el absolute del mega menú se alinee al .container */
        }
    }

    /* Flujo en 5 columnas balanceadas para el Mega Menú */
    .mega-menu-columns {
        column-count: 5;
        column-gap: 30px;
        width: 100%;
    }

    .mega-menu-item {
        break-inside: avoid;
        display: inline-block;
        width: 100%;
        margin-bottom: 20px;
        vertical-align: top;
    }

    /* Título de Subcategoría (Nivel 2) */
    .mega-menu-title {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        color: #000000 !important;
        text-transform: uppercase;
        text-decoration: none;
        display: block;
        padding-bottom: 6px;
        border-bottom: 2px solid var(--primary-color);
        margin-bottom: 10px;
        transition: color 0.2s;
    }

    .mega-menu-title:hover {
        color: var(--primary-color) !important;
    }

    /* Listado de Sub-subcategorías (Nivel 3) */
    .mega-menu-sublist {
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }

    .mega-menu-sublink {
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        color: #555555 !important;
        text-decoration: none;
        display: block;
        padding: 4px 0;
        transition: color 0.2s, padding-left 0.2s;
    }

    .mega-menu-sublink:hover {
        color: var(--primary-color) !important;
        padding-left: 5px;
    }

    /* Offcanvas Sidebar Personalizado (Estilo App) */
    .offcanvas-navigation {
        background-color: #ffffff !important;
        color: #111111 !important;
        border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 15px 0 30px rgba(0, 0, 0, 0.05);
        z-index: 1060 !important; /* Asegura que pase por encima del navbar (1050) */
    }
    
    .offcanvas-navigation .btn-close {
        filter: none !important; /* Close button negro nativo */
        opacity: 0.8;
    }
    
    .offcanvas-navigation .offcanvas-title {
        font-family: 'Outfit', sans-serif;
        font-weight: 800;
        letter-spacing: -0.5px;
        color: #111111 !important;
    }

    .offcanvas-navigation .offcanvas-header {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    }

    /* Enlaces dentro del Offcanvas */
    .offcanvas-nav-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .offcanvas-nav-item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .offcanvas-nav-link {
        display: flex;
        font-size: 14px !important;
        align-items: center;
        justify-content: space-between;
        color: #111111 !important;
        text-decoration: none !important;
        font-weight: 600;
        padding: 14px 20px;
        transition: background-color 0.2s ease;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        max-height: 999999px; /* Defeats Android Chrome Font Boosting */
    }
    
    .offcanvas-nav-link:hover {
        background-color: rgba(0, 0, 0, 0.02);
    }

    .offcanvas-nav-link i, 
    .offcanvas-accordion-btn i, 
    .offcanvas-navigation .text-white-50 {
        color: #666666 !important;
        font-size: 16px !important;
        max-height: 999999px;
    }

    .offcanvas-navigation .text-white {
        color: #111111 !important;
    }

    /* Acordeón móvil dentro del Offcanvas */
    .offcanvas-accordion-btn {
        background: none;
        border: none;
        width: 100%;
        text-align: left;
        color: #111111 !important;
        font-weight: 600;
        font-size: 14px;
        padding: 14px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: background-color 0.2s ease;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        max-height: 999999px;
    }
    
    .offcanvas-accordion-btn:focus {
        outline: none;
        box-shadow: none;
    }
    
    .offcanvas-accordion-btn:hover {
        background-color: rgba(0, 0, 0, 0.02);
    }

    .offcanvas-submenu-list {
        list-style: none;
        padding-left: 20px;
        margin: 0;
        background-color: rgba(0, 0, 0, 0.02);
    }
    
    .offcanvas-submenu-link {
        display: block;
        color: #444444 !important;
        text-decoration: none !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 12px 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.02);
        transition: color 0.2s ease;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        max-height: 999999px;
    }
    
    .offcanvas-submenu-link:hover {
        color: var(--primary-color) !important;
        background-color: rgba(0, 0, 0, 0.01);
    }

    /* Rotación de flechas en colapsables */
    .offcanvas-accordion-btn .bi-chevron-down {
        transition: transform 0.3s ease;
    }
    
    .offcanvas-accordion-btn[aria-expanded="true"] .bi-chevron-down {
        transform: rotate(180deg);
    }

    /* Footer del Offcanvas (Perfil / Cuenta) */
    .offcanvas-footer-account {
        background-color: #f8f9fa !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        padding: 15px 20px;
    }

    /* Estilos simétricos del logo centrado en celular */
    @media (max-width: 991px) {
        .logo-center-mobile {
            position: absolute;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            pointer-events: none;
        }
        .logo-center-mobile > a {
            pointer-events: auto;
        }
        .navbar-brand img {
            max-height: 38px !important;
        }
    }

/* Animación para que el numerito del carrito "salte" al agregar */
.badge { transition: transform 0.2s ease; }
.pumping { transform: scale(1.4); color: yellow !important; }
.no-scrollbar::-webkit-scrollbar { display: none; }