/* General Resets */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body{
    background: #fff;
}

/* ==================== */
/* NUEVA BARRA SUPERIOR */
/* ==================== */
.top-contact-bar {
    background: linear-gradient(135deg, #00195b 0%, #002a8a 100%);
    padding: 8px 20px;
    border-bottom: 2px solid #f47c00;
}

.contact-bar-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 20px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.contact-item i {
    font-size: 16px;
}

.contact-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Teléfono */
.phone-link {
    background: rgba(255,255,255,0.1);
}

.phone-link:hover {
    background: rgba(255,255,255,0.2);
}

/* Ubicación */
.location-btn {
    background: rgba(76, 175, 80, 0.2);
}

.location-btn:hover {
    background: #4CAF50;
}

/* WhatsApp */
.whatsapp-btn {
    background: rgba(37, 211, 102, 0.2);
}

.whatsapp-btn:hover {
    background: #25D366;
}

/* Redes Sociales */
.social-btn {
    background: rgba(255,255,255,0.1);
}

.facebook-btn:hover {
    background: #1877F2;
}

.instagram-btn:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

/* ==================== */
/* HEADER PRINCIPAL */
/* ==================== */
header {
    background: #f8f8f8;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    position: sticky;
    top: 0;
    z-index: 100;
}

.main-header {
    background: #f8f8f8;
}

.top-bar{
    max-width: 1400px;
    margin: auto;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

/* MENU & LOGO INTEGRATION */
nav ul{
    display: flex;
    list-style: none;
    align-items: center;
    gap: 25px;
}

nav a{
    text-decoration: none;
    color: #333;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

nav a:hover{
    color: #0c3c88;
}

/* LOGO ESTILOS */
.logo-item {
    margin-right: 15px;
}

.logo-box{
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-rotating{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    perspective: 1000px;
}

.logo-rotating img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    animation: spinLogo 10s linear infinite;
}

.logo-text{
    font-size: 13px;
    color: #00195b;
    font-weight: bold;
    line-height: 1.2;
    white-space: nowrap;
}

/* ANIMACIÓN GIRO */
@keyframes spinLogo{
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* DROPDOWN PRINCIPAL */
.dropdown{
    position: relative;
}

.dropdown > a{
    gap: 7px;
    padding: 10px 0;
}

.submenu{
    position: absolute;
    top: 100%;
    left: 0;
    width: 240px;
    background: #fff;
    list-style: none;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .3s ease;
    z-index: 1000;
}

.dropdown:hover .submenu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu li{
    border-bottom: none;
}

.submenu-right li{
    border-bottom: none;
}
.submenu a{
    display: block;
    padding: 12px 18px;
    color: #333;
    font-size: 14px;
    font-weight: normal;
    transition: .3s;
}

.submenu a:hover{
    background: #0c3c88;
    color: #fff;
}

/* DROPDOWN SUBMENU */
.dropdown-right{
    position: relative;
}

.submenu-right{
    position: absolute;
    top: 0;
    left: 100%;
    width: 220px;
    background: #fff;
    list-style: none;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: .3s ease;
    z-index: 1001;
}

.dropdown-right:hover .submenu-right{
    opacity: 1;
    visibility: visible;
}

.submenu-right li{
    border-bottom: 1px solid #eee;
}

.submenu-right li:last-child{
    border-bottom: none;
}

.submenu-right a{
    display: block;
    padding: 12px 18px;
    color: #333;
    font-size: 14px;
    transition: .3s;
}

.submenu-right a:hover{
    background: #0c3c88;
    color: #fff;
}

/* INFO Y COMPRAS */
.header-info{
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 13px;
    color: #555;
}

.cart{
    width: 55px;
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s;
}

.cart:hover {
    border-color: #00195b;
    background: #f0f0f0;
}

.cart span{
    color: red;
    font-weight: bold;
}

/* SECCIÓN MARCAS */
.brands{
    max-width: 1200px;
    margin: 25px auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.brands img{
    max-height: 70px;
    object-fit: contain;
}

/* BANNER */
.banner{
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.banner img{
    width: 70%;
    max-width: 1000px;
}

/* CONTENIDO */
.content{
    min-height: 500px;
    background-image: url("img/fondo.jpg");
    background-size: cover;
    background-position: center;
}

/* FOOTER */
footer{
    background: #00195b;
    color: white;
}

.footer-content{
    max-width: 1200px;
    margin: auto;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.address{
    font-size: 13px;
    line-height: 1.8;
}

.social{
    display: flex;
    gap: 10px;
}

.social a{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s;
}

.social a:hover {
    background: #f47c00;
    border-color: #f47c00;
    transform: scale(1.1);
}

.copyright{
    background: #f47c00;
    text-align: center;
    padding: 10px;
    font-size: 13px;
}

/* ==================== */
/* RESPONSIVE */
/* ==================== */
@media screen and (max-width: 768px) {
    .contact-bar-content {
        justify-content: center;
        gap: 10px;
    }
    
    .contact-item {
        font-size: 11px;
        padding: 4px 8px;
    }
    
    .contact-item span {
        display: none;
    }
    
    .contact-item i {
        font-size: 18px;
    }
    
    .top-bar {
        height: auto;
        flex-direction: column;
        padding: 10px;
    }
    
    nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    
    .logo-box {
        flex-direction: column;
    }
    
    .logo-text {
        white-space: normal;
        text-align: center;
    }
    
    .header-info {
        margin-top: 10px;
    }
    
    .banner img {
        width: 100%;
    }
    
    .brands {
        flex-wrap: wrap;
    }
    
    .brands img {
        max-height: 50px;
    }
}


.image-row img{
    width: 190px;
    height: 110px;
    object-fit: contain;
    background: white;
    border-radius: 8px;
    border: 1px solid #ddd; /* ← esta línea separa visualmente */
}

.image-row{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

    gap: 8px; /* separación moderada */

    overflow-x: auto;
    padding: 8px 10px;

    max-width: 100%;
}

/* LOGOS TAMAÑO MEDIANO */
.image-row img{
    width: 190px;
    height: 110px;

    object-fit: contain;

    background: white;
    border-radius: 8px;

    flex-shrink: 0;
}

/* SIN HOVER */
.image-row img:hover{
    transform: none;
    box-shadow: none;
} 

/* =========================
   CARRUSEL PREMIUM
========================= */

/* --- ESTILOS PARA EL CARRUSEL Y CARGA DE BANNERS --- */
.banner-carousel {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-container {
    position: relative;
    width: 100%;
    max-width: 100%; 
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
}

.carousel-slide {
    display: none;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.carousel-slide.active {
    display: flex !important;
}

/* La imagen se expande al 100% del ancho del carrusel */
.carousel-slide img {
    width: 30%px;
    height: 112%px;
    max-height: 160%px;
    object-fit: fill; /* O 'cover' si prefieres mantener la proporción */
    display: block;
}

/* Botones transparentes pegados a los bordes de la imagen */
.carousel-container .prev,
.carousel-container .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.4); /* Fondo semi-transparente como en tu imagen */
    color: #ffffff;
    border: none;
    padding: 18px 22px;
    cursor: pointer;
    font-size: 24px;
    border-radius: 50%;
    z-index: 10;
    transition: background 0.3s ease;
}

.carousel-container .prev:hover,
.carousel-container .next:hover {
    background: rgba(255, 255, 255, 0.7);
}

.carousel-container .prev {
    left: 10px; /* Posicionado justo encima del borde izquierdo de la imagen */
}

.carousel-container .next {
    right: 10px; /* Posicionado justo encima del borde derecho de la imagen */
}
/* INDICADORES */

.carousel-dots{

    position: absolute;

    bottom: 20px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    gap: 10px;

    z-index: 200;
}

.carousel-dots span{

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: rgba(255,255,255,.4);

    cursor: pointer;

    transition: .3s;
}

.carousel-dots span.active{

    width: 35px;

    border-radius: 20px;

    background: #4da3ff;
}

/* RESPONSIVE */

@media(max-width:1200px){

    .carousel-container{
        height: 450px;
    }

}

@media(max-width:768px){

    .carousel-container{
        width: 100%;
        height: 300px;
        border-radius: 0;
    }

    .prev,
    .next{
        width: 45px;
        height: 45px;
        font-size: 22px;
    }

}

.footer{
    background: #000;
    color: white;
    text-align: center;
}

/* BLOQUE PRINCIPAL */
.footer-main{
    padding: 40px 20px;
}

.footer-text{
    font-size: 15px;
    max-width: 800px;
    margin: 0;          /* 👈 quitar centrado */
    line-height: 1.6;
    text-align: left;   /* 👈 importante */
}

/* BLOQUE GRIS */
.footer-bottom{
    background: #333;
    padding: 12px;
    font-size: 13px;
    color: #ddd;
}

/* LOGO ABAJO */
.footer-logo{
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* LOGO REDONDO LIMPIO SIN BORDE NI FONDO */
.footer-logo img{
    width: 90px;          /* tamaño */
    height: 90px;
    border-radius: 50%;   /* redondo */
    object-fit: cover;    /* ajusta bien la imagen */

    background: none;     /* ❌ sin fondo */
    padding: 0;           /* ❌ sin espacio extra */
    border: none;         /* ❌ sin contorno */
    box-shadow: none;     /* ❌ sin sombra */
} 

/* =========================
   BASE TIPO EBAY / APPLE GREY
========================= */

body{
    background: #f2f2f2;   /* gris claro elegante */
    color: #222;
    font-family: Arial, Helvetica, sans-serif;
}

/* LINKS */
a{
    color: #222;
    text-decoration: none;
}

a:hover{
    color: #e53238; /* rojo estilo eBay */
}

/* =========================
   HEADER
========================= */

header{
    background: #ffffff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* TOP BAR */
.top-contact-bar{
    background: #eaeaea;
    border-bottom: 1px solid #d0d0d0;
}

.contact-item{
    background: #ffffff;
    color: #333;
    border: 1px solid #ddd;
}

.contact-item:hover{
    background: #f5f5f5;
    border-color: #bbb;
}

/* =========================
   MENU PRINCIPAL
========================= */

nav a{
    color: #333;
    font-weight: 600;
}

nav a:hover{
    color: #e53238;
}

/* SUBMENUS */
.submenu,
.submenu-right{
    background: #ffffff;
    border: 1px solid #ddd;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.submenu a,
.submenu-right a{
    color: #333;
}

.submenu a:hover,
.submenu-right a:hover{
    background: #f2f2f2;
    color: #e53238; 
}

/* =========================
   LOGO
========================= */

.logo-text{
    color: #333;
}

/* =========================
   CARRITO
========================= */

.cart{
    background: #ffffff;
    border: 1px solid #ccc;
    color: #333;
}

.cart:hover{
    background: #f5f5f5;
    border-color: #999;
}

/* =========================
   BANNER
========================= */

.carousel-container{
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
}

/* =========================
   MARCAS
========================= */

.brands{
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
}

.brands img{
    filter: grayscale(10%);
    opacity: 0.9;
}

/* =========================
   GALERÍA / IMÁGENES
========================= */

.image-row img{
    background: #ffffff;
    border: 1px solid #ddd;
}

/* =========================
   FOOTER
========================= */

footer{
    background: #2b2b2b;
    color: #ffffff; 
}

.footer-bottom{
    background: #1f1f1f;
    color: #ccc;
}

.footer-text{
    color: #ffffff;
}

/* =========================
   EFECTOS GENERALES EBAY
========================= */

.contact-item,
.cart,
.submenu a{
    transition: all 0.3s ease;
}

.contact-item:hover,
.cart:hover{
    transform: translateY(-2px);
}

/* SCROLL BAR ESTILO LIMPIO */
::-webkit-scrollbar{
    width: 8px;
}

::-webkit-scrollbar-track{
    background: #eaeaea;
}

::-webkit-scrollbar-thumb{
    background: #bbb;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover{
    background: #888;
}   

.cart{
    width: 80px;
    height: 45px;
    border: 1px solid #ccc;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* IMAGEN DEL CARRITO */
.cart img{
    width: 28px;        /* tamaño del icono */
    height: 28px;
    object-fit: contain;
}

/* CONTADOR */
.cart span{
    font-size: 14px;
    font-weight: bold;
    color: red;
}

/* HOVER */
.cart:hover{
    background: #f5f5f5;
    transform: scale(1.05);
} 

/* BUSCADOR SUPERIOR */
/* BUSCADOR CUADRADO BLANCO */
.top-search{
    display: flex;
    align-items: center;

    width: 260px;
    height: 42px;

    background: #ffffff;      /* blanco sólido */
    border: 1px solid #ccc;

    border-radius: 4px;       /* 🔥 más cuadrado */
    overflow: hidden;

    margin-left: 0;
}
/* CAMPO DE TEXTO */
.top-search input{
    flex: 1;

    height: 100%;

    border: none;
    outline: none;

    padding: 0 12px;

    background: #ffffff;

    color: #333;

    font-size: 14px;
}

/* BOTÓN LUPA */
.top-search button{
    width: 50px;
    height: 100%;

    border: none;

    background: #ffffff;

    cursor: pointer;

    border-left: 1px solid #dcdcdc;
}

/* ICONO LUPA */
.top-search i{
    color: #000000;
    font-size: 18px;
}

/* INPUT */
.top-search input{
    border: none;
    outline: none;
    padding: 8px 12px;
    width: 100%;
    font-size: 13px;
}

/* BOTÓN */
.top-search button{
    border: none;
    background: #f1f1f1;
    padding: 8px 12px;
    cursor: pointer;
}

.top-search button:hover{
    background: #e0e0e0;
}

/* ICONO */
.top-search i{
    font-size: 14px;
    color: #555;
} 

.contact-bar-content{
    display: flex;
    align-items: center;
    justify-content: flex-start; /* importante */
    flex-wrap: nowrap;           /* 👈 evita que baje */
    gap: 15px;
}

/* empuja el buscador a la derecha */
.top-search{
    margin-left: auto;   /* 👈 CLAVE: lo manda a la extrema derecha */
    display: flex;
    align-items: center;
    border-radius: 25px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ddd;
    width: 260px;
} 

/* =========================
   HEADER AZUL OSCURO MODERNO
========================= */

header{
    background: #0b1f3a !important;
    border-bottom: 1px solid #123a66;
}

/* =========================
   BARRA SUPERIOR CONTACTOS
========================= */

.top-contact-bar{
    background: #0e2a4a !important;
    border-bottom: 1px solid #123a66;
}

.contact-item{
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.15);
}

.contact-item:hover{
    background: #1f5fa8;
}

/* =========================
   MENÚ PRINCIPAL
========================= */

.main-header,
.top-bar{
    background: #0b1f3a !important;
}

nav a{
    color: #ffffff !important;
    font-weight: 600;
}

nav a:hover{
    color: #4da3ff;
}

/* SUBMENÚS */
.submenu,
.submenu-right{
    background: #0e2a4a;
    border: 1px solid #123a66;
}

.submenu a,
.submenu-right a{
    color: #ffffff;
}

.submenu a:hover,
.submenu-right a:hover{
    background: #1f5fa8;
    color: #fff;
}

/* =========================
   LOGO
========================= */

.logo-text{
    color: #ffffff;
}

/* =========================
   BUSCADOR SUPERIOR
========================= */

.top-search{
    background: #0e2a4a;
    border: 1px solid #123a66;
}

.top-search input{
    background: transparent;
    color: #fff;
}

.top-search button{
    background: #123a66;
}

.top-search button:hover{
    background: #1f5fa8;
}

.top-search i{
    color: #fff;
}

/* =========================
   CARRITO
========================= */

.cart{
    background: #0e2a4a;
    border: 1px solid #123a66;
    color: #fff;
}

.cart:hover{
    background: #1f5fa8;
} 


/* ===================================
   CONTENEDOR BUSCADOR + FILTRO
=================================== */
.top-search {
    width: 420px !important;    
    height: 46px !important;    
    border-radius: 4px !important; 
    background: #146c43 !important; 
    border: 1px solid #198754 !important;
}

/* ===================================
   BOTÓN FILTRADO
=================================== */

.filter-dropdown{
    position: relative;
}

.filter-btn{
    background: #123a66;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 10px 18px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;

    display: flex;
    align-items: center;
    gap: 8px;

    transition: .3s;
}

.filter-btn:hover{
    background: #1f5fa8;
}

/* ===================================
   MENÚ DE MARCAS
=================================== */

.filter-grid{
    position: absolute;
    top: 55px;
    right: 0;

    width: 380px;

    background: #0e2a4a;

    border: 1px solid #1f5fa8;
    border-radius: 12px;

    padding: 15px;

    display: none;

    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    box-shadow: 0 8px 25px rgba(0,0,0,.35);

    z-index: 9999;
}

/* MENÚ OCULTO POR DEFECTO */
.filter-grid{
    display: none;
}

/* MENÚ VISIBLE AL HACER CLIC */
.filter-grid.active{
    display: grid;
}

/* botones de marcas */

.filter-grid a{
    text-decoration: none;
    color: white;

    background: #123a66;

    padding: 12px 10px;

    border-radius: 8px;

    text-align: center;

    transition: .3s;
}

.filter-grid a:hover{
    background: #1f5fa8;
} 

/* BOTÓN INICIO */

.home-button{

    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:#ffffff;

    margin-right:12px;

    text-decoration:none;

    transition:0.3s ease;

    box-shadow:
    0 3px 10px rgba(0,0,0,.15);
}

.home-button img{

    width:28px;
    height:28px;

    object-fit:contain;
}

.home-button:hover{

    transform:translateY(-2px);

    box-shadow:
    0 6px 18px rgba(0,0,0,.25);
}

.sidebar-menu-panel {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100%;
    background: #111;
    color: white;
    transition: 0.3s;
    z-index: 2000;
    padding: 20px;
}

.sidebar-menu-panel.active {
    right: 0;
}

.sidebar-header {
    text-align: center;
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.sidebar-logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-links a {
    color: white;
    text-decoration: none;
    padding: 10px;
    background: #1a1a1a;
    border-radius: 6px;
}

.sidebar-links a:hover {
    background: #333;
}

.sidebar-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
}

.sidebar-bg.active {
    display: block;
}  

/* =========================
   BOTÓN SIDEBAR MODERNO
========================= */

.sidebar-btn{
    width: 50px;
    height: 50px;

    border: none;
    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #123a66,
        #1f5fa8
    );

    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    transition: .3s ease;

    box-shadow:
        0 4px 12px rgba(0,0,0,.25);
}

/* HOVER */

.sidebar-btn:hover{

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(31,95,168,.45);
}

/* LAS 3 RAYAS */

.sidebar-btn span{
    position: absolute;

    width: 24px;
    height: 3px;

    background: white;

    border-radius: 10px;

    transition: .3s ease;
}

/* raya superior */
.sidebar-btn span:nth-child(1){
    transform: translateY(-8px);
}

/* raya central */
.sidebar-btn span:nth-child(2){
    transform: translateY(0);
}

/* raya inferior */
.sidebar-btn span:nth-child(3){
    transform: translateY(8px);
}

/* animación hover */

.sidebar-btn:hover span:nth-child(1){
    width: 18px;
}

.sidebar-btn:hover span:nth-child(3){
    width: 18px;
}

.right-actions {
    display: flex;
    align-items: center;

    /* 👇 EMPUJA TODO AL EXTREMO DERECHO */
    margin-left: auto;

    gap: 12px;

    /* opcional: separarlo del borde */
    padding-right: 20px;
} 


/* BOTÓN SIDEBAR */
.sidebar-btn {
    background: #111;
    color: white;
    border: none;
    padding: 10px 12px;
    border-radius: 50%;
    cursor: pointer;

    /* clave para alineación perfecta */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CARRITO */
.cart {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ICONO DEL CARRITO */
.cart img {
    width: 28px;
    height: 28px;
} 


/* =========================
   SIDEBAR HEADER
========================= */

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #333;
}

/* logo + texto juntos */
.sidebar-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* logo */
.sidebar-logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

/* =========================
   SWITCH DARK MODE (SIDEBAR)
========================= */

.switch-dark {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

/* ocultar checkbox */
.switch-dark input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* fondo switch */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #555;
    transition: 0.4s;
    border-radius: 34px;
}

/* círculo */
.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

/* activado */
.switch-dark input:checked + .slider {
    background-color: #1f5fa8;
}

.switch-dark input:checked + .slider:before {
    transform: translateX(22px);
}  

/* =========================
   MODO OSCURO AMOLED
========================= */

body.dark {
    background: #000 !important;
    color: #fff !important;
}

/* HEADER */
body.dark header {
    background: #000 !important;
    border-bottom: 1px solid #111;
}

/* TOP BAR */
body.dark .top-contact-bar {
    background: #000 !important;
    border-bottom: 1px solid #111;
}

/* TEXTO GENERAL */
body.dark a,
body.dark nav a,
body.dark .logo-text,
body.dark span,
body.dark p {
    color: #fff !important;
}

/* MENÚS */
body.dark .submenu,
body.dark .submenu-right {
    background: #0a0a0a !important;
    border: 1px solid #222 !important;
}

/* ITEMS MENU */
body.dark .submenu a,
body.dark .submenu-right a {
    color: #fff !important;
}

/* HOVER */
body.dark .submenu a:hover,
body.dark .submenu-right a:hover {
    background: #1f1f1f !important;
}

/* BUSCADOR */
body.dark .top-search {
    background: #0a0a0a !important;
    border: 1px solid #222 !important;
}

body.dark .top-search input {
    color: #fff !important;
    background: transparent;
}

/* CARRITO */
body.dark .cart {
    background: #0a0a0a !important;
    border: 1px solid #222 !important;
}

/* SIDEBAR */
body.dark .sidebar-menu-panel {
    background: #000 !important;
}

/* FILTRO */
body.dark .filter-grid {
    background: #0a0a0a !important;
    border: 1px solid #222 !important;
}

/* BOTONES */
body.dark .filter-btn {
    background: #111 !important;
} 

/* =========================
   BENEFICIOS FOOTER
========================= */

.footer-benefits{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 120px; /* más separación horizontal */
    padding: 35px 20px 50px;
    flex-wrap: wrap;
    background: #000;
}

.benefit-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 180px;
}

/* IMÁGENES MÁS GRANDES */
.benefit-item img{
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

/* EFECTO AL PASAR EL MOUSE */
.benefit-item img:hover{
    transform: scale(1.1);
}

/* LETRAS MÁS GRANDES */
.benefit-item p{
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
} 


/* ==================================
   SECCIÓN NOSOTROS - ZIG ZAG COMPACTO
================================== */

.about-company{
    position: relative;

    background-image: url("../Src/Images/Equipo_mercocicles.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    padding: 60px 0;

    overflow: hidden;
}

/* CAPA OSCURA */

.about-overlay{
    position: absolute;
    inset: 0;
    background: rgba(10,20,35,0.75);
    z-index: 1;
}

/* CONTENEDOR */

.about-content{
    position: relative;
    z-index: 2;

    max-width: 1200px;
    margin: auto;

    display: flex;
    flex-direction: column;

    gap: 20px; /* mucho más juntos */

    padding: 20px;
}

/* ==========================
   TARJETAS
========================== */

.info-card{

    width: 500px;
    max-width: 95%;

    background: rgba(255,255,255,0.10);

    border: 1px solid rgba(255,255,255,0.15);

    border-radius: 15px;

    padding: 20px 25px;

    color: white;

    box-shadow: 0 8px 20px rgba(0,0,0,.30);

    opacity: 0;

    animation: subirTarjeta 1s forwards;

    transition: all .35s ease;
}

/* POSICIÓN ZIG ZAG */

/* QUIENES SOMOS */
/* QUIENES SOMOS */
.info-card:nth-child(1){
    margin-left: 20px;
    animation-delay: .2s;
}

/* MISIÓN */
.info-card:nth-child(2){
    margin-left: auto;
    margin-right: 20px;
    animation-delay: .5s;
}

/* VISIÓN */
.info-card:nth-child(3){
    margin-left: 20px;
    animation-delay: .8s;
}



/* TÍTULOS */

.info-card h2{
    font-size: 24px;
    margin-bottom: 12px;
    color: #fff;
}

/* TEXTO */

.info-card p{
    font-size: 15px;
    line-height: 1.7;
    text-align: justify;
}

/* EFECTO HOVER */

.info-card:hover{

    transform: scale(1.05);

    background: rgba(255,255,255,0.18);

    border-color: rgba(255,255,255,.4);

    box-shadow:
        0 15px 35px rgba(0,0,0,.45);
}

/* ANIMACIÓN */

@keyframes subirTarjeta{

    from{
        opacity: 0;
        transform: translateY(80px);
    }

    to{
        opacity: 1;
        transform: translateY(0);
    }
}

/* RESPONSIVE */

@media(max-width: 768px){

    .info-card{
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

} 

/* =========================
   MENÚ HORIZONTAL CENTRADO
========================= */

.top-bar{
    justify-content: center; /* centra todo el menú */
}

/* UL PRINCIPAL */
.top-bar nav ul{
    display:flex;
    align-items:flex-end;
    gap:1px;              /* Mucho más juntos */
    width:100%;
}

/* LINKS PRINCIPALES */
.top-bar nav ul > li > a{
    color: #fff;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 6px;
    transition: 0.3s ease;
    text-decoration: none;
    display: block;
}

/* 🔥 EFECTO ENCENDIDO */
.top-bar nav ul > li > a:hover{
    background: rgba(77,163,255,0.25);
    color: #4da3ff;
    box-shadow: 0 0 12px rgba(77,163,255,0.6);
}

/* ❌ QUITAR FLECHAS */
.top-bar nav ul li i{
    display: none !important;
}

/* =========================
   SUBMENÚS COMPACTOS
========================= */

.submenu,
.submenu-right{
    display: none;
    position: absolute;
    background: #0e2a4a;
    min-width: 180px;
    padding: 5px 0; /* menos espacio */
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* mostrar al pasar mouse */
li:hover > .submenu,
li:hover > .submenu-right{
    display: block;
}

/* ITEMS MÁS JUNTOS */
.submenu li a,
.submenu-right li a{
    padding: 6px 10px;   /* 🔥 más compacto */
    display: block;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    border: none; /* ❌ quita rayas */
}

/* hover submenu */
.submenu li a:hover,
.submenu-right li a:hover{
    background: #1f5fa8;
    padding-left: 14px;
}

/* submenus laterales */
.dropdown-right{
    position: relative;
}

.submenu-right{
    left: 100%;
    top: 0;
} 

/* =========================
   DROPDOWN REDES SOCIALES
========================= */

.social-dropdown{
    position: relative;
}

.social-btn-main{
    background: #123a66;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 25px;
    cursor: pointer;

    display: flex;
    align-items: center;
    gap: 8px;

    font-weight: 600;
    transition: 0.3s;
}

.social-btn-main:hover{
    background: #1f5fa8;
}

/* MENU DESPLEGABLE */
.social-menu{
    position: absolute;
    top: 110%;
    left: 0;

    background: #0e2a4a;
    border: 1px solid #123a66;
    border-radius: 10px;

    width: 200px;

    display: none;
    flex-direction: column;

    box-shadow: 0 8px 20px rgba(0,0,0,.3);
    z-index: 9999;
}

/* ACTIVAR AL PASAR O HACER CLICK (HOVER SIMPLE) */
.social-dropdown:hover .social-menu{
    display: flex;
}

/* ITEMS */
.social-menu a{
    color: white;
    text-decoration: none;

    padding: 10px 12px;

    display: flex;
    align-items: center;
    gap: 8px;

    transition: 0.3s;
}

.social-menu a:hover{
    background: #1f5fa8;
}  

/* SIDEBAR */
.sidebar-menu-panel{
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100%;
    background: #111;
    color: white;
    transition: 0.3s;
    z-index: 2000;
    padding: 20px;
}

/* BOTÓN ADMINISTRADOR */
.sidebar-admin{
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.admin-btn{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 30px;
    background: #1a1a1a;
    color: white;
    text-decoration: none;
    font-size: 14px;
}

.admin-btn img{
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
} 

/* ==========================
BOTÓN SEGURO
========================== */

/* BOTÓN SEGURO FIJO */
.security-button{
    position: fixed !important;

    bottom: 30px !important;
    right: 30px !important;

    width: 60px;
    height: 60px;

    border-radius: 50%;

    background: #111;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;

    z-index: 999999;

    transition: none !important;
    transform: none !important;
}

.security-button:hover{
    transform: none !important;
}

.security-button img{
    width: 35px;
    height: 35px;
    object-fit: contain;
    pointer-events: none;
}

/* ==========================
PANEL
========================== */

.security-panel{
    position: fixed;
    right: 90px;
    bottom: 20px;

    width: 260px;

    background:#111;
    color:white;

    padding:15px;

    border-radius:10px;

    display:none;

    z-index:10000;
}

.security-panel.active{
    display:block;
}

.security-panel h3{
    margin-bottom:10px;
    font-size:16px;
}

.security-panel input{
    width:100%;
    padding:10px;
    border:none;
    border-radius:6px;
    margin-bottom:10px;
}

.security-panel button{
    width:100%;
    padding:10px;
    border:none;
    border-radius:6px;
    cursor:pointer;
}

/* ==========================
SWITCH
========================== */

.switch-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.admin-switch{
    position:relative;
    width:60px;
    height:30px;
}

.admin-switch input{
    display:none;
}

.admin-slider{
    position:absolute;
    inset:0;
    background:#555;
    border-radius:30px;
    cursor:pointer;
}

.admin-slider::before{
    content:"";
    position:absolute;
    width:24px;
    height:24px;
    left:3px;
    top:3px;
    background:white;
    border-radius:50%;
    transition:.3s;
}

.admin-switch input:checked + .admin-slider::before{
    transform:translateX(30px);
}

.security-button:hover{
    transform: none !important;
}

.security-button img:hover{
    transform: none !important;
}

.security-panel{
    transform: none !important;
} 

#sidebarAdmin{
    display:none;
} 

/* CONTENEDOR PIN */

.pin-box{
    position: relative;
}

.pin-box input{
    width: 100%;
    padding: 10px 45px 10px 10px;
}

/* BOTÓN MOSTRAR PIN */

.show-pin-btn{

    position: absolute;

    right: 5px;
    top: 50%;

    transform: translateY(-50%);

    width: 35px;
    height: 35px;

    border: none;
    border-radius: 6px;

    cursor: pointer;
}

/* BOTONES */

.pin-actions{

    display: flex;
    gap: 10px;

    margin-top: 10px;
}

.pin-actions button{

    flex: 1;

    padding: 10px;

    border: none;

    border-radius: 6px;

    cursor: pointer;
}

#verifyPin{
    background: #1f5fa8;
    color: white;
}

#cancelPin{
    background: #555;
    color: white;
} 


.pin-container{
    position: relative;
    width: 100%;
}

.pin-input{
    width: 100%;
    height: 42px;
    padding: 0 40px 0 12px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}

.toggle-pin{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);

    width: 22px;
    height: 22px;

    border: none;
    background: transparent;
    cursor: pointer;

    font-size: 12px;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==================================
   SECCION DE ADMINISTRADOR
================================== */ 

.password-wrapper{
    position: relative;
}

.toggle-password{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);

    width: 24px;
    height: 24px;

    border: none;
    background: transparent;

    cursor: pointer;
    z-index: 999;
} 

/* ==================================
   PORTADA OFERTAS
================================== */

.offers-hero{
    position: relative;

    width: 300%;

    /* Ocupa toda la pantalla */
    min-height: calc(100vh - 120px);

    background-color: #ffffff;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;

    display: flex;
    align-items: flex-start;
}

/* CAPA OSCURA */

.offers-overlay{
    position: absolute;
    inset: 0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.75),
        rgba(0,0,0,.30)
    );

    z-index: 1;
}

/* CONTENIDO */

.offers-content{
    position: absolute;

    top: 70px;
    left: 60px;

    z-index: 2;

    max-width: 650px;

    color: white;
}

/* TEXTO DECORATIVO */

.offers-decorative{

    display: block;

    font-family:
    "Brush Script MT",
    cursive;

    font-size: 90px;

    font-weight: normal;

    color: #ffae00;

    margin-bottom: 10px;

    text-shadow:
        0 0 20px rgba(255,174,0,.6);

    letter-spacing: 2px;
}

/* TÍTULO */

.offers-content h1{

    font-size: 48px;

    line-height: 1.2;

    margin-bottom: 20px;

    font-weight: 700;
}

/* DESCRIPCIÓN */

.offers-content p{

    font-size: 20px;

    line-height: 1.8;

    color: #e5e5e5;
}

/* EFECTO */

.offers-content{
    animation: offersFade 1.2s ease;
}

@keyframes offersFade{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* RESPONSIVE */

@media(max-width:768px){

    .offers-hero{
    height: calc(100vh - 90px);
}

    .offers-content{
        left:25px;
        top:50px;
        right:25px;
    }

    .offers-decorative{
        font-size:55px;
    }

    .offers-content h1{
        font-size:32px;
    }

    .offers-content p{
        font-size:16px;
    }

} 

/* ==========================================
MENU PRINCIPAL MÁS COMPACTO
========================================== */

/* ==========================================
MENÚ CON ICONOS MEDIANOS
========================================== */

.menu-icon{
    position: relative;
}

.menu-icon > a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 66px;      /* Más compacto */

    padding: 3px 3px;

    gap: 2px;             /* Texto más cerca del icono */

    text-decoration: none;
}

.menu-icon > a img{
    width: 44px;          /* Icono mediano */
    height: 44px;

    object-fit: contain;

    transition: .3s;
}

.menu-icon > a span{
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    white-space: normal;
}

.menu-icon > a:hover img{
    transform: scale(1.08);
}

.menu-icon > a:hover span{
    color: #4da3ff;
}

/* Menús más juntos */
.top-bar nav ul{
    display: flex;
    align-items: flex-end;
    gap: 3px;
    width: 100%;
}

/* Logo más cerca del menú */
.logo-item{
    margin-right: 8px;
}

/* RESPONSIVE */
@media(max-width:1200px){

    .menu-icon > a img{
        width:34px;
        height:34px;
    }

    .menu-icon > a span{
        font-size:11px;
    }

    .top-bar nav ul{
        gap:4px;
    }
}


/* ==========================================
BOTON FAVITO
========================================== */

/* CONTENEDOR BOTONES DERECHA */
.right-actions{
    display:flex;
    align-items:center;
    gap:15px;
    margin-left:auto;
}

/* SOLO CORAZÓN */
.favorite-btn{
    background: none;
    border: none;

    width: auto;
    height: auto;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition: .3s ease;
}

/* EFECTO HOVER */
.favorite-btn:hover{
    transform: scale(1.15);
    box-shadow: none;
}

/* CORAZÓN */
.favorite-btn svg{
    width: 32px;
    height: 32px;

    stroke: #ffffff;
    stroke-width: 2.5;

    fill: none;

    transition: .3s ease;
}

/* EFECTO AL PASAR EL MOUSE */
.favorite-btn:hover svg{
    stroke: #ff4d6d;
}
.favorite-btn span{
    position:absolute;
    top:-6px;
    right:-6px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#111;
    border:1px solid #fff;
    color:#fff;
    font-size:11px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}


/* =========================
   BOTON USUARIO
========================= */

.user-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    text-decoration:none;
    cursor:pointer;
    transition:.3s;
}

.user-btn:hover{
    transform:scale(1.12);
}

.user-btn img{
    width:38px;
    height:38px;
    object-fit:contain;
    display:block;
} 

.menu-actions{
    margin-left:auto;
    list-style:none;
}

.right-actions{
    display:flex;
    align-items:center;
    gap:15px;
}

.top-bar nav ul{
    display:flex;
    align-items:center;
    width:100%;
}

.logo-item{
    margin-right:20px;
} 

/* =====================================
   BOTÓN SECRETO (LLAVE)
===================================== */
.secret-key {
    position: fixed;
    bottom: 20px;
    right: 20px; /* ajusta si lo quieres cerca de redes sociales */
    background: transparent;
    border: none;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.3;
    transition: 0.3s;
    z-index: 9999;
}

.secret-key:hover {
    opacity: 1;
    transform: scale(1.2);
}

/* =====================================
   BOTÓN SEGURO (OCULTO)
===================================== */
.secure-button {
    position: fixed;
    bottom: 80px;
    right: 20px;
    padding: 10px 15px;
    border-radius: 15px;
    border: none;
    background: #1b65d6;
    color: white;
    font-weight: bold;
    display: none; /* oculto */
    cursor: pointer;
    z-index: 9999;
} 

/*=============================
 BOTÓN COMUNICADOS
=============================*/

.comunicados-btn-container{
    display:flex;
    align-items:center;
    margin-left:-5px;
}

/* BOTÓN COMUNICADOS */
.comunicados-btn{
    display: flex;
    align-items: center;
    gap: 4px;

    margin-left: 3px;   /* Más cerca del botón Redes */

    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;

    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.comunicados-btn img{
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

/* Sin fondo al pasar el mouse */
.comunicados-btn:hover{
    background: transparent;
    transform: none;
    opacity: 0.8;
}

/* ==========================================================================
   ESTILOS ADICIONALES PARA SIDEBAR (AGREGAR AL FINAL DE STYLE.CSS)
   ========================================================================== */

/* 1. Resetear el fondo de los contenedores de los enlaces del sidebar */
.sidebar-links a {
    background: transparent !important; /* Quita el fondo de los contenedores */
    border-radius: 0; /* Opcional: Quita el redondeado si no te gusta con fondo transparente */
}

/* 2. Efecto al pasar el mouse por encima de los enlaces del sidebar */
.sidebar-links a:hover {
    background: rgba(255, 255, 255, 0.1) !important; /* Fondo sutil al hacer hover para identificarlo */
    transform: translateX(10px); /* Opcional: Pequeño movimiento hacia la derecha */
} 

/* ==========================================================================
   PERSONALIZACIÓN FINAL DEL ENCABEZADO (VERDE, MÁS GRANDE Y BUSCADOR CUADRADO)
   ========================================================================== */

/* 1. Fondo Verde para todo el encabezado y barras superiores */
header, 
.main-header, 
.top-bar, 
.top-contact-bar,
.search-filter-container {
    background: #0f5132 !important; /* Verde oscuro elegante */
    border-bottom: 1px solid #146c43;
}

/* 2. Encabezado un poco más grande (Aumento de altura general) */
.top-bar {
    height: 110px !important; /* Incrementado de 90px a 110px */
}

/* 3. Buscador Superior: Más largo, más cuadrado y estilizado */
.top-search {
    width: 420px !important;    /* Más largo (Antes 260px) */
    height: 46px !important;    /* Un poco más alto para el nuevo diseño */
    border-radius: 4px !important; /* Más cuadrado (Bordes mínimos) */
    background: #146c43 !important; /* Verde intermedio para contraste interno */
    border: 1px solid #198754 !important;
}

/* Campo de entrada de texto del buscador */
.top-search input {
    background: transparent !important;
    color: #ffffff !important;
    font-size: 15px !important;
    padding-left: 15px !important;
}

/* Marcador de posición (Placeholder) en color blanco semi-transparente */
.top-search input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* Botón de la lupa dentro del buscador */
.top-search button {
    background: #198754 !important; /* Verde más claro para destacar el botón */
    border-left: 1px solid #146c43 !important;
    width: 55px !important;
}

.top-search i {
    color: #ffffff !important; /* Lupa blanca para legibilidad */
    font-size: 16px !important;
}

/* 4. Ajustes de Submenús y Botones Desplegables para combinar con el Verde */
.submenu, 
.submenu-right, 
.filter-grid, 
.social-menu {
    background: #0b3d26 !important; /* Fondo del menú desplegable más oscuro */
    border: 1px solid #146c43 !important;
}

.submenu a:hover, 
.submenu-right a:hover, 
.filter-grid a:hover, 
.social-menu a:hover {
    background: #198754 !important; /* Hover verde brillante */
    color: #ffffff !important;
}

/* Ajuste para los botones de Redes y Filtrado */
.social-btn-main, 
.filter-btn, 
.filter-grid a {
    background: #146c43 !important;
    border: 1px solid #198754 !important;
}

.social-btn-main:hover, 
.filter-btn:hover {
    background: #198754 !important;
} 

/* ==========================================================================
   AJUSTE DE SLIDER: ELIMINAR CONTROLES Y LOGRAR UN DISEÑO MÁS PEGADO
   ========================================================================== */

/* 1. Eliminar por completo los botones manuales que mueven el slide */
.slider-btn,
.prev-btn,
.next-btn,
.carousel-control-prev,
.carousel-control-next {
    display: none !important;
}

/* 2. Reducir márgenes y espacios para que el slide quede bien pegado */
.slider-container,
.main-slider,
.carousel-section {
    margin-top: 0 !important;
    margin-bottom: 5px !important; /* Espacio mínimo hacia abajo */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Ajuste del contenedor principal o main para eliminar huecos superiores */
main, 
.main-content {
    padding-top: 0 !important;
}


/* ==========================================================================
   MÁXIMO DESPLAZAMIENTO A LA ESQUINA EXTREMA DERECHA
   ========================================================================== */

/* 1. Eliminamos el límite de ancho de la barra para que use el 100% de la pantalla */
.top-bar {
    max-width: 100% !important; 
    width: 100% !important;
    padding-right: 0px !important; /* Quitamos espacio del borde derecho */
}

/* 2. Forzamos a que el contenedor de navegación use todo el espacio libre */
.top-bar nav {
    width: 100% !important;
}

.top-bar nav ul {
    width: 100% !important;
    display: flex !important;
}

/* 3. Empuje absoluto y eliminación de espacios en los botones de acción */
.menu-actions {
    margin-left: auto !important; /* Empuja con fuerza magnética a la derecha */
    padding-right: 0px !important;
}

.right-actions {
    margin-left: auto !important;
    gap: 15px !important; /* Espaciado entre los iconos */
    padding-right: 5px !important; /* Espacio mínimo casi imperceptible con el borde de la pantalla */
}

/* 4. Aseguramos que el botón de menú (sidebar) sea el último elemento pegado al borde */
.sidebar-btn {
    margin-right: 0px !important; 
} 

/* ==========================================================================
   CENTRADOR DE DESCRIPCIONES EN LOS MENÚS
   ========================================================================== */

.menu-icon > a {
    display: flex !important;
    flex-direction: column !important; /* Coloca el texto exactamente debajo del icono */
    align-items: center !important;    /* Centra horizontalmente el icono y el texto */
    justify-content: center !important; /* Centra verticalmente si hay variaciones de altura */
    text-align: center !important;     /* Centra las líneas de texto (ej. "Herramientas de\nMano") */
}

.menu-icon > a span {
    display: block !important;
    width: 100% !important;            /* Ocupa todo el ancho disponible para alinearse correctamente */
    text-align: center !important;     /* Fuerza a que el texto multilínea se mantenga en el eje central */
} 


/* Esto ocultará el contenedor fantasma que genera tu script al fondo de la página */
body > div:last-of-type:not(.security-panel):not(.sidebar-menu-panel) {
    display: none !important;
} 

/* ==========================================================================
   ALINEACIÓN Y DISTRIBUCIÓN DEL MENÚ (IGUAL A LA IMAGEN)
   ========================================================================== */

/* Asegurar que el contenedor principal ocupe todo el ancho y alinee los elementos al centro verticalmente */
.top-bar nav {
    width: 100% !important;
}

.top-bar nav ul {
    display: flex !important;
    align-items: center !important; /* Centra verticalmente logo, iconos y acciones */
    width: 100% !important;
    gap: 15px !important; /* Espaciado uniforme entre los iconos del menú */
    padding: 0 10px !important;
}

/* Forzar que el logo se quede estático a la izquierda */
.logo-item {
    margin-right: 0 !important;
}

/* CLAVE: Empuja el primer icono de menú hacia el centro, separándolo del logo */
.top-bar nav ul > li.menu-icon:nth-of-type(1) {
    margin-left: auto !important;
}

/* CLAVE: Empuja las acciones del usuario a la extrema derecha, separándolas de los menús */
.menu-actions {
    margin-left: auto !important;
}

/* ==========================================================================
   ESTILIZACIÓN DE ICONOS Y TEXTOS DEL MENÚ
   ========================================================================== */

/* Ajuste del contenedor de los enlaces */
.menu-icon > a {
    display: flex !important;
    flex-direction: column !important; /* Icono arriba, texto abajo */
    align-items: center !important;    /* Centrado horizontal */
    justify-content: center !important;
    text-align: center !important;
    text-decoration: none !important;
    min-width: 75px !important;
    padding: 5px !important;
}

/* Hacer que las imágenes/iconos se vean blancos y limpios como en tu barra verde */
.menu-icon > a img {
    width: 38px !important;  /* Tamaño ideal para no saturar */
    height: 38px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important; /* Convierte los iconos a color blanco puro */
    transition: transform 0.3s ease !important;
    margin-bottom: 4px !important;
}

/* Texto debajo del icono */
.menu-icon > a span {
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important; /* Evita saltos de línea extraños */
}

/* Corrección específica para textos largos de dos líneas (ej. Herramientas de Mano) */
.menu-icon > a span br {
    display: block !important;
}

/* Efecto Hover sutil */
.menu-icon > a:hover img {
    transform: scale(1.1) !important;
}

.menu-icon > a:hover span {
    color: #a3cfbb !important; /* Tono verde claro/pastel al pasar el mouse */
}

/* Ocultar las flechas hacia abajo (i) para limpiar la vista como en la foto */
.top-bar nav ul li.dropdown > a > i.fa-chevron-down {
    display: none !important;
}

/* ==========================================
   ESTILOS CORREGIDOS PARA SECCIÓN DE OFERTAS 🔥
   ========================================== */

.content-ofertas {
    position: relative;
    padding: 30px 20px;
    border-radius: 20px;
    margin: 25px 0;
    overflow: hidden; /* Evita que el desenfoque sobresalga de las esquinas */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    background: #12151e; /* Fondo de respaldo */
    z-index: 1;
}

/* Capa con la imagen de fondo, transparencia y blur suave */
.content-ofertas::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Ruta de tu imagen */
    background-image: url('../Src/Fondos/image_1784566473029.jpeg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Filtro de blur sutil (3px) y ligera transparencia */
    filter: blur(3px);
    opacity: 0.35; 
    
    z-index: -1; /* Mantiene la imagen detrás del contenido */
}

.content-ofertas h2 {
    position: relative;
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #00d2ff !important;
    text-shadow: 0 0 12px rgba(0, 210, 255, 0.6);
    margin-bottom: 25px;
    font-size: 2rem;
    font-weight: 700;
    z-index: 2;
}

.ofertas-carrusel-track {
    position: relative;
    display: flex;
    gap: 20px;
    padding-bottom: 10px;
    overflow-x: auto;
    z-index: 2;
}

/* TARJETA INDIVIDUAL */
.producto-card-oferta {
    width: 280px;
    min-width: 280px;
    background: #ffffff; /* Fondo blanco para legibilidad limpia */
    border: 2px solid #00d2ff;
    border-radius: 12px;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* CONTENEDOR DE LA IMAGEN */
.producto-card-oferta .img-container {
    width: 100%;
    height: 200px; /* Altura fija para uniformidad */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.producto-card-oferta .img-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Mantiene la proporción de la imagen sin deformar */
}

/* INFORMACIÓN Y TEXTO */
.producto-card-oferta .info-oferta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pildora-oferta {
    background: #e63946;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    align-self: flex-start;
    text-transform: uppercase;
}

.producto-card-oferta .titulo-producto {
    font-size: 16px;
    color: #111111;
    font-weight: bold;
    margin: 4px 0;
    word-break: break-word;
}

.producto-card-oferta .caja-precio {
    display: flex;
    flex-direction: column;
    background: #f1f3f5;
    padding: 8px;
    border-radius: 6px;
}

.producto-card-oferta .etiqueta-precio {
    font-size: 12px;
    color: #6c757d;
}

.producto-card-oferta .valor-precio {
    font-size: 16px;
    font-weight: bold;
    color: #2b9348;
}

.producto-card-oferta .btn-oferta {
    display: block;
    width: 100%;
    background-color: #00d2ff;
    color: #000000;
    text-align: center;
    padding: 10px 0;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    margin-top: 8px;
    transition: background 0.2s ease-in-out;
}

.producto-card-oferta .btn-oferta:hover {
    background-color: #00b4d8;
    color: #ffffff;
}

/* ==========================================
   ESTILOS CATÁLOGO COMPLETO & ANIMACIONES
   ========================================== */

/* 1. Transición suave y bordes redondeados para la tarjeta del producto */
.producto-card-custom {
    border-radius: 16px !important; /* Bordes redondeados más marcados */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                border-color 0.3s ease !important;
    position: relative;
    will-change: transform, box-shadow;
}

/* 2. EFECTO HOVER: Movimiento hacia arriba, incremento de tamaño y luz azul (Glow) */
.producto-card-custom:hover {
    transform: translateY(-8px) scale(1.03); /* Se mueve hacia arriba y se agranda un 3% */
    border-color: #00d2ff !important; /* Cambia el borde a azul brillante */
    
    /* Luz/Resplandor azul (Glow Effect) */
    box-shadow: 0 10px 25px rgba(0, 210, 255, 0.45), 
                0 0 15px rgba(0, 140, 255, 0.3) !important;
}

/* 3. Animación ligera dentro de la imagen al pasar el mouse */
.producto-card-custom:hover img {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.producto-card-custom img {
    transition: transform 0.3s ease;
}

/* 4. Efecto Hover suave para el botón "VER PRODUCTO" */
.producto-card-custom a {
    transition: background-color 0.25s ease, box-shadow 0.25s ease !important;
}

.producto-card-custom a:hover {
    background-color: #00d2ff !important;
    color: #0d1117 !important;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
}

/* ==========================================
   ESTILO PARA EL TÍTULO CURSIVO Y ANIMACIÓN
   ========================================== */

.titulo-script-hover {
    /* Tipografía estilo la imagen (cursiva/junta) */
    font-family: 'Dancing Script', 'Brush Script MT', cursive !important;
    font-size: 38px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 20px;
    
    /* Configuración para animación suave */
    display: inline-block; /* Requerido para que el escalado funcione fluidamente */
    transition: transform 0.3s ease, color 0.3s ease;
    cursor: pointer;
    will-change: transform;
}

/* EFECTO HOVER: Agranda la letra al pasar el mouse */
.titulo-script-hover:hover {
    transform: scale(1.12); /* Agranda el título un 12% */
    color: #0d3b66;         /* (Opcional) Cambia a tono azul de tu marca al pasar el mouse */
}

/* =========================================================
   AJUSTES DE ALINEACIÓN DEL HEADER Y MENÚ DE NAVEGACIÓN
   ========================================================= */

/* 1. Asegurar que el contenedor principal sea la referencia de posición */
.top-bar nav > ul {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

/* 2. Fijar la posición del Logo para que no se mueva al desplazar los menús */
.top-bar nav > ul > li.logo-item {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* 3. Empujar todos los elementos del menú hacia la derecha */
.top-bar nav > ul > li.dropdown,
.top-bar nav > ul > li.menu-icon {
    margin-left: 0;
}

/* El primer menú después del logo recibe un espacio automático a la izquierda para empujar todo a la derecha */
.top-bar nav > ul > li.logo-item + li {
    margin-left: auto; /* Empuja el resto de menús hacia la derecha */
}

/* 4. Mantiene agrupados los botones de acciones (favoritos, carrito, usuario) a la derecha */
.top-bar nav > ul > li.menu-actions {
    margin-left: 15px; /* Espaciado con los ítems del menú */
}



/* =========================================================
   AJUSTE DE DESPLAZAMIENTO MÁS A LA DERECHA (HEADER Y LOGO)
   ========================================================= */

/* 1. Contenedor flexible principal */
.top-bar nav > ul {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    padding-right: 0px; /* Asegura aprovechar todo el espacio al borde derecho */
}

/* 2. Mantener el logo inmóvil en el borde izquierdo */
.top-bar nav > ul > li.logo-item {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* 3. Empujar los menús hacia la derecha con espacio flexible */
.top-bar nav > ul > li.logo-item + li {
    margin-left: auto; /* Desplaza el bloque completo a la derecha */
}

/* 4. Ajuste fino de espacio individual entre cada categoría */
.top-bar nav > ul > li.dropdown,
.top-bar nav > ul > li.menu-icon {
    margin-left: 10px; /* Controla qué tan juntos o pegados van hacia la derecha */
}

/* 5. Pegar completamente los iconos finales (favoritos, carrito, usuario) a la derecha */
.top-bar nav > ul > li.menu-actions {
    margin-left: 12px;
    margin-right: -5px; /* Empuja un chiquitito más hacia el borde derecho exterior */
}

/* =========================================================
   ESTILO CRISTAL TRANSPARENTE Y ANIMACIONES DE SUBMENÚS
   ========================================================= */

/* 1. Posicionamiento relativo para los desplegables padres */
.top-bar nav ul li.dropdown {
    position: relative;
}

/* 2. Contenedor Principal del Submenú (Efecto Cristal) */
.top-bar nav ul .submenu,
.top-bar nav ul .submenu-right {
    background: rgba(13, 59, 38, 0.65) !important; /* Verde semitransparente estilo cristal */
    backdrop-filter: blur(12px) saturate(160%);   /* Desenfoque de fondo "Glassmorphism" */
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.18);  /* Borde tenue brillante */
    border-radius: 12px;                          /* Bordes suavemente redondeados */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Sombra elegante profunda */
    
    padding: 8px 6px !important;                 /* Menos espacio vertical interno */
    min-width: 210px;                            /* Ancho compacto y uniforme */
    list-style: none;
    margin: 0;
    
    /* Animación de entrada suave */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 3. Posicionamiento del submenú de primer nivel */
.top-bar nav ul .submenu {
    top: 100%;
    left: 0;
}

/* 4. Posicionamiento de submenús anidados (Submenú desplegable a la derecha) */
.top-bar nav ul .submenu-right {
    top: 0;
    left: 100%;
    margin-left: 5px !important;
}

/* 5. Estructura y espaciado de los ítems (Más compactos y ordenados) */
.top-bar nav ul .submenu li,
.top-bar nav ul .submenu-right li {
    margin: 2px 0 !important;                     /* Reduce drásticamente la distancia vertical */
    padding: 0 !important;
    position: relative;
}

/* 6. Enlaces del submenú */
.top-bar nav ul .submenu li a,
.top-bar nav ul .submenu-right li a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px !important;                /* Espaciado compacto del botón */
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 500;
    text-decoration: none !important;
    text-align: left !important;
    border-radius: 8px;                           /* Bordes redondeados individuales */
    
    /* Transición suave para el efecto Zoom */
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                background 0.2s ease, 
                color 0.2s ease,
                box-shadow 0.2s ease;
}

/* 7. EFECTO ZOOM Y BRILLO al pasar el mouse sobre las subcategorías (Hover) */
.top-bar nav ul .submenu li a:hover,
.top-bar nav ul .submenu-right li a:hover {
    transform: scale(1.04) translateX(4px);        /* Zoom ligero + pequeño desplazamiento */
    background: rgba(255, 255, 255, 0.22) !important;/* Fondo blanco traslúcido encendido */
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);     /* Destaque de sombra */
}

/* 8. Estilo para el icono flecha (si existe) dentro de submenús */
.top-bar nav ul .submenu li a i {
    font-size: 11px;
    opacity: 0.8;
    transition: transform 0.2s ease;
}

.top-bar nav ul .submenu li a:hover i {
    transform: translateX(3px);                   /* Mueve levemente la flecha en hover */
}


/* =========================================================
   REDUCCIÓN RIGUROSA DE ESPACIADO EN SUBMENÚS
   ========================================================= */

/* 1. Reduce el espacio del contenedor general del submenú */
ul.submenu, 
ul.submenu-right,
.top-bar nav ul .submenu,
.top-bar nav ul .submenu-right {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. Elimina cualquier margen entre los elementos de la lista */
ul.submenu li, 
ul.submenu-right li,
.top-bar nav ul .submenu li,
.top-bar nav ul .submenu-right li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important; /* Mantiene el alto de línea al mínimo */
}

/* 3. Ajusta el relleno (padding) de cada enlace individual */
ul.submenu li a, 
ul.submenu-right li a,
.top-bar nav ul .submenu li a,
.top-bar nav ul .submenu-right li a {
    padding: 6px 14px !important; /* 6px arriba/abajo hace que queden pegados y ordenados */
    margin: 0 !important;
    display: flex !important;
    align-items: center;
}


/* =========================================================
   ESTILO LIMPIO PARA EL BOTÓN DE CARRITO CON CONTADOR AL LADO
   ========================================================= */

/* 1. Eliminar contenedor, fondos y bordes del carrito */
.main-header .cart {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;            /* Espacio entre la imagen y el contador */
    cursor: pointer;
}

/* 2. Tamaño y ajuste de la imagen del carrito */
.main-header .cart img {
    width: 28px !important;          /* Puedes ajustar el tamaño de la imagen si lo deseas */
    height: auto !important;
    display: block !important;
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.2)); /* Sombra ligera opcional para destacar */
}

/* 3. Estilo del contador al lado de la imagen */
.main-header .cart .mi-contador-carrito-span {
    position: static !important;     /* Quita la posición superpuesta sobre la imagen */
    transform: none !important;
    background-color: #ff3b30 !important; /* Rojo llamativo para la notificación */
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: bold !important;
    border-radius: 12px !important;  /* Forma de píldora */
    padding: 2px 7px !important;
    min-width: 18px;
    text-align: center;
    line-height: 1;
    display: inline-block !important;
}

/* ----- AJUSTE DE ESPACIADO PARA EL MENÚ PRINCIPAL ----- */

/* 1. Opción recomendada: Agregar un margen izquierdo al contenedor de las categorías */
.nav-menu, 
.categories-nav, 
.menu-categorias { /* Usa la clase que envuelva a tus ítems de menú */
    margin-left: 40px !important; /* Desplaza todo el menú hacia la derecha */
    gap: 25px !important;         /* Espaciado uniforme entre los íconos del menú */
}

/* 2. Si las categorías están alineadas mediante Flexbox con el logo */
.header-navigation, 
.navbar-container { 
    display: flex;
    align-items: center;
    gap: 35px; /* Crea separación directa entre el logo y el primer menú */
}

/* 3. Asegurar que el logo tenga una anchura definida para que no pise el texto */
.brand-logo-container, 
.logo-mercocicles {
    min-width: 160px; /* Asegura espacio suficiente para el logo y su texto */
    margin-right: 20px;
}


/* ----- POSICIONAR TEXTO DEBAJO DEL LOGO GIRATORIO ----- */

/* 1. Cambiamos la orientación del contenedor del logo y texto a columna */
.header-right,
.brand-container,
.logo-container,
.header-brand { 
  display: flex !important;
  flex-direction: column !important; /* Coloca el texto abajo de la imagen */
  align-items: center !important;     /* Centra la imagen y el texto horizontalmente */
  justify-content: center !important;
  text-align: center !important;
}

/* 2. Ajuste del texto para que no se encima con la primera categoría */
.brand-name,
.logo-container span,
.header-right span {
  margin-top: 4px !important;    /* Espacio entre el logo y el texto */
  font-size: 0.75rem !important;  /* Tamaño adecuado para no ocupar demasiado alto */
  line-height: 1.1 !important;
  white-space: nowrap !important; /* Evita que el texto se rompa en varias líneas */
}

/* 3. Aseguramos que el logo no sea demasiado grande para el header */
.logo-circular,
.logo-giratorio,
.header-right img {
  margin-bottom: 2px !important;
}

/* =========================================================
   AJUSTE DE MENÚ: POSICIÓN DERECHA, COMPACTO Y EFECTO HOVER
   ========================================================= */

/* 1. Empuja el bloque completo de categorías hacia la derecha */
.categories-nav,
.nav-menu,
.menu-categorias,
.header-navigation ul {
  display: flex !important;
  align-items: center !important;
  margin-left: auto !important;  /* Empuja todo el bloque a la derecha */
  margin-right: 25px !important;  /* Distancia justa antes del botón favorito (corazón) */
  gap: 12px !important;           /* Menús más juntos/compactos */
}

/* 2. Estilos base y transición fluida para cada ítem del menú */
.categories-nav li,
.nav-menu a,
.menu-categorias .item-menu,
.nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
              filter 0.3s ease !important;
  cursor: pointer !important;
  padding: 4px 6px !important;
}

/* 3. EFECTO HOVER: Zoom general y Brillo Blanco brillante */
.categories-nav li:hover,
.nav-menu a:hover,
.menu-categorias .item-menu:hover,
.nav-item:hover {
  /* Hace zoom al elemento */
  transform: scale(1.18) translateY(-3px) !important;
  
  /* Crea el resplandor / brillo blanco alrededor del ícono y texto */
  filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.95)) 
          drop-shadow(0px 0px 15px rgba(255, 255, 255, 0.6)) !important;
}

/* 4. Asegura la transición limpia e independiente en imágenes/íconos y textos */
.categories-nav img,
.nav-menu img,
.categories-nav svg,
.menu-categorias img {
  transition: transform 0.3s ease !important;
}

.categories-nav span,
.nav-menu span,
.menu-categorias span {
  color: #ffffff !important;
  font-weight: 600 !important;
  transition: color 0.3s ease, text-shadow 0.3s ease !important;
}

/* Brillo extra de texto en Hover */
.categories-nav li:hover span,
.nav-menu a:hover span,
.menu-categorias .item-menu:hover span {
  text-shadow: 0 0 10px #ffffff, 0 0 18px #ffffff !important;
} 

/* ==========================================================
   AJUSTES SUPERIORES: BUSCADOR A LA IZQUIERDA Y LOGO CENTRADO
   ========================================================== */

/* 1. Organización del contenedor principal de la barra superior */
header .top-bar-upper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding-left: 0 !important; /* Elimina espacio en el borde izquierdo */
}

/* 2. Buscador fijado a la izquierda */
header .top-bar-upper .top-search {
    order: 1 !important;
    margin-left: 0 !important;   /* Lo pega al límite izquierdo */
    margin-right: auto !important; /* Empuja el resto hacia la derecha */
}

/* 3. Logo centrado en el medio */
header .top-bar-upper .logo-box {
    order: 2 !important;
    margin: 0 !important; 
}

/* 4. Mantiene intacto el contenedor del logo giratorio para evitar desplazamientos */
header .top-bar-upper .logo-box .logo-rotating {
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* 5. Botón Comunicados fijado a la derecha */
header .top-bar-upper .comunicados-btn-container {
    order: 3 !important;
    margin-left: auto !important;
}

/* ==========================================================
   DISEÑO DE BUSCADOR REDONDEADO Y MEDIANO (ESTILO IMAGEN)
   ========================================================== */

/* Contenedor principal estilo cápsula flotante */
header .top-bar-upper .top-search {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 280px !important;            /* Tamaño mediano */
    height: 42px !important;            /* Altura proporcional */
    background: linear-gradient(180deg, #ffffff 0%, #e8ecef 100%) !important; /* Gradiente suave */
    border-radius: 50px !important;     /* Bordes redondeados en forma de píldora */
    border: 1px solid #dcdcdc !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 
                inset 0 1px 2px rgba(255, 255, 255, 0.8) !important; /* Sombra flotante e iluminación interna */
    padding: 0 15px !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

/* Efecto al pasar el cursor (Hover) */
header .top-bar-upper .top-search:hover {
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2), 
                inset 0 1px 2px rgba(255, 255, 255, 1) !important;
    transform: translateY(-1px);
}

/* Campo de texto de entrada */
header .top-bar-upper .top-search input {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    font-size: 14px !important;
    color: #444444 !important;
    padding-left: 32px !important;     /* Espacio para que el texto no tape la lupa */
    box-shadow: none !important;
}

/* Placeholder discreto */
header .top-bar-upper .top-search input::placeholder {
    color: #999999 !important;
    font-weight: 400 !important;
}

/* Botón con el ícono de Lupa posicionado a la izquierda (como en la imagen) */
header .top-bar-upper .top-search button {
    position: absolute !important;
    left: 14px !important;              /* Ubica la lupa a la izquierda */
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Estilo del ícono de la lupa */
header .top-bar-upper .top-search button i {
    font-size: 16px !important;
    color: #4a6fa5 !important;          /* Tono azul/grisáceo como la imagen */
    transition: color 0.2s ease !important;
}

header .top-bar-upper .top-search button:hover i {
    color: #1e5bb8 !important;          /* Azul más intenso al hacer hover */
}


/* ==========================================
   ESTILOS PARA EL BOTÓN DE COMUNICADOS
   ========================================== */

.comunicados-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 6px;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease, box-shadow 0.3s ease;
}

/* Ajuste del tamaño de la imagen dentro del botón */
.comunicados-btn img {
    width: 38px;  /* Tamaño más grande que los íconos estándar */
    height: 38px;
    object-fit: contain;
    transition: filter 0.3s ease;
}

/* EFECTO HOVER: Zoom + Brillo Resplandeciente */
.comunicados-btn:hover {
    transform: scale(1.25); /* Zoom al pasar el cursor */
    /* Resplandor luminoso (Glow) */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 25px rgba(255, 102, 0, 0.6);
    background-color: rgba(255, 255, 255, 0.15); /* Fondo suave brillante */
}

/* Brillo adicional directamente sobre la imagen */
.comunicados-btn:hover img {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)) brightness(1.2);
}

/* EFECTO AL HACER CLIC */
.comunicados-btn:active {
    transform: scale(1.1);
}

/* Ajuste de tamaño y visibilidad para el texto Mercocicles S.R.L. */
        .logo-box {
            display: flex;
            align-items: center;
            gap: 15px; /* Espacio entre el logo y el texto */
        }

        .logo-text, #mainTitle {
            font-size: 2.2rem !important; /* Aumenta sensiblemente el tamaño de la letra */
            font-weight: 900 !important;   /* Hace el texto más grueso y destacado */
            letter-spacing: 1px;          /* Espaciado entre letras */
            line-height: 1.1;             /* Ajuste de altura de línea */
            color: #ffffff;               /* O el color que tengas en tu tema (ej. #0d47a1 o #ff6600) */
            margin: 0;
        }

        /* Ajuste responsivo para pantallas pequeñas / móviles */
        @media (max-width: 768px) {
            .logo-text, #mainTitle {
                font-size: 1.5rem !important;
            }
        }


        /* =========================================================
           CAMBIO DE COLORES: FRANJA SUPERIOR E INFERIOR DEL HEADER
           ========================================================= */

        /* 1. Franja Superior (Buscador, Logo Giratorio y Texto): Naranja */
        header .top-bar-upper {
            background-color: #ff6600 !important; /* Color naranja principal */
            padding: 10px 20px;                   /* Relleno para dar buena estructura */
        }

        /* Asegurar que el texto 'Mercocicles S.R.L.' sea visible sobre el naranja */
        .logo-text, #mainTitle {
            color: #ffffff !important;           /* Texto blanco para buen contraste */
            font-size: 2.2rem !important;        /* Mantiene el tamaño grande */
            font-weight: 900 !important;
            margin: 0;
        }

        /* Ajuste de alineación del contenedor del logo */
        .logo-box {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        /* 2. Franja Inferior (Menú principal hasta el botón Sidebar): Azul */
        header .main-header,
        header .top-bar {
            background-color: #0d47a1 !important; /* Color azul institucional */
        }

        /* Ajuste de colores de texto y enlaces del menú sobre el fondo azul */
        header .top-bar nav ul li a {
            color: #ffffff !important;           /* Enlaces en blanco */
        }

        /* Efecto hover opcional para los enlaces del menú sobre azul */
        header .top-bar nav ul li a:hover {
            color: #ffcc80 !important;           /* Tono naranja suave al pasar el cursor */
        }

        /* Ajustes responsivos para dispositivos móviles */
        @media (max-width: 768px) {
            .logo-text, #mainTitle {
                font-size: 1.5rem !important;
            }
        }

        /* Estilos para el contenedor e icono del carrito */
.cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.cart img {
    width: 24px; /* Ajusta según el tamaño de tu icono */
    height: auto;
    display: block;
}

/* Badge rojo indicador de cantidad */
.mi-contador-carrito-span {
    position: absolute;
    top: -2px;
    right: -6px;
    background-color: #ff0000;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    line-height: 1;
}

/* Clase para ocultar el contador cuando está en 0 */
.oculto-contador {
    display: none !important;
} 


/* ==========================================================================
   STYLING RESPONSIVO Y ADAPTABILIDAD MÓVIL (ANDROID, IOS, TABLETS & MINI)
   Mercocicles S.R.L. - Sistema Web Responsivo
   ========================================================================== */

/* 1. REGLAS BASE Y PREVENCIÓN DE OVERFLOW HORIZONTAL */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch; /* Desplazamiento suave en iOS Safari */
    -webkit-tap-highlight-color: transparent; /* Elimina recuadro azul de tap en móvil */
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

img, video, svg {
    max-width: 100%;
    height: auto;
}

/* 2. ADAPTABILIDAD PARA TABLETS Y PANTALLAS MEDIANAS (≤ 992px) */
@media screen and (max-width: 992px) {
    /* Cabecera y Barra Superior */
    header .top-bar-upper {
        flex-direction: column-reverse;
        gap: 12px;
        padding: 12px 15px;
    }

    .top-search-container {
        max-width: 100% !important;
        width: 100% !important;
    }

    .logo-box {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .logo-text {
        font-size: 1.5rem !important;
    }

    /* Navegación y Menú Mobile */
    header .main-header .top-bar nav > ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 8px 10px;
    }

    /* Forzar que los ítems del menú colapsen o permitan scroll horizontal si es necesario */
    header .main-header .top-bar nav > ul > li.dropdown {
        position: relative;
    }

    /* Submenús en Móvil/Tablet */
    .submenu, .submenu-right {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
    }

    /* Ajuste de Botones de Acción (Comunicados, Favoritos, Carrito, Login, Sidebar) */
    .menu-actions {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
    }

    .right-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
    }

    /* Banner AISAHF */
    .aisahf-banner-section {
        flex-direction: column;
        padding: 20px 15px;
        gap: 20px;
    }

    .aisahf-content-wrapper {
        flex-direction: column-reverse;
        gap: 20px;
    }

    .aisahf-grid-container {
        max-width: 100% !important;
        width: 100%;
    }

    .aisahf-text-block {
        width: 100%;
        min-width: auto;
    }

    .aisahf-logo-header h1 {
        font-size: 2.5rem !important;
    }

    /* Banner Oferta Superior */
    .header-ofertas-banner {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 20px 15px;
    }

    .header-ofertas-banner .titulo-ofertas-seccion {
        font-size: 1.8rem !important;
    }

    .img-oferta-especial-hover {
        max-height: 80px;
    }
}

/* 3. ADAPTABILIDAD PARA SMARTPHONES (ANDROID / IOS - ≤ 768px) */
@media screen and (max-width: 768px) {
    /* Fijar la cabecera arriba para evitar que los botones bajen al carrusel */
    header {
        position: sticky;
        top: 0;
        z-index: 9999;
        background-color: #ff6600;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

    /* Rediseño compacto de la barra superior */
    header .top-bar-upper {
        padding: 8px 10px !important;
        gap: 8px !important;
    }

    .logo-box {
        gap: 6px !important;
    }

    .logo-rotating img {
        width: 35px !important;
        height: 35px !important;
    }

    .logo-text {
        font-size: 1.2rem !important;
    }

    /* Barra de búsqueda móvil */
    .top-search-container {
        padding: 2px 8px !important;
        height: 38px !important;
    }

    .top-search-container input {
        font-size: 13px !important;
    }

    /* Alineación de la barra de acciones fijas (Comunicados, Favoritos, Carrito, Login, Sidebar) */
    .menu-actions {
        margin-top: 0 !important;
        padding: 5px 0 !important;
    }

    .right-actions {
        justify-content: space-around !important;
        gap: 8px !important;
        padding: 4px 8px !important;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 8px;
    }

    .right-actions a, 
    .right-actions button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
    }

    .right-actions img, 
    .right-actions svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* Menú navegable con scroll horizontal en pantalla pequeña */
    header .main-header .top-bar nav > ul {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding: 6px 5px !important;
        -webkit-overflow-scrolling: touch;
    }

    header .main-header .top-bar nav > ul::-webkit-scrollbar {
        display: none;
    }

    header .main-header .top-bar nav > ul > li {
        display: inline-block !important;
        flex: 0 0 auto !important;
        margin-right: 10px !important;
    }

    header .main-header .top-bar nav > ul > li > a {
        padding: 5px 8px !important;
        font-size: 12px !important;
    }

    /* Prevención para evitar que los botones bajen al carrusel */
    .banner-carousel, 
    .image-row, 
    .spam-mediano-container {
        clear: both !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Ajustes generales de relleno */
    .content, 
    .content-ofertas, 
    .lomas-vendido-wrapper {
        padding: 12px 10px !important;
    }

    /* Ajuste del carrusel de marcas (Image-Row) */
    .image-row {
        padding: 15px 0 !important;
    }

    .image-row img {
        height: 50px !important; /* Ajuste para que no ocupe demasiado alto en móvil */
    }

    .image-row-track {
        gap: 20px !important;
    }

    /* Historias estilo Instagram / WhatsApp */
    .historias-bar {
        padding: 10px 12px !important;
        gap: 12px !important;
    }

    .historia-cuadro-gris {
        width: 62px !important;
        height: 62px !important;
        border-radius: 14px !important;
    }

    .historia-label {
        font-size: 10px !important;
        max-width: 65px !important;
    }

    /* Tarjetas de Ofertas en carrusel móvil */
    .producto-card-oferta {
        width: 200px !important;
        flex: 0 0 200px !important;
        padding: 10px !important;
    }

    .producto-card-oferta .img-container {
        height: 120px !important;
    }

    .titulo-producto {
        font-size: 13px !important;
        min-height: 32px !important;
    }

    .valor-precio {
        font-size: 13px !important;
    }

    /* Contenedor "Lo Más Vendido" */
    .lomas-vendido-wrapper {
        padding: 10px 15px !important;
    }

    .lomas-vendido-titulo {
        font-size: 1.3rem !important;
    }

    .btn-imagen-lomasvendido img {
        max-width: 130px !important;
        height: 130px !important;
    }

    .lomas-arrow-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    /* Grid principal de productos */
    .productos-grid, 
    #contenedorInvisibleBuscador .busqueda-resultados-wrapper {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 10px !important;
        padding: 10px 0 !important;
    }

    /* Rediseño de tarjeta de producto estándar para pantallas táctiles móviles */
    .producto-card-custom {
        padding: 10px !important;
    }

    .producto-card-custom > div:first-child {
        height: 120px !important;
        padding: 6px !important;
    }

    .producto-card-custom h3 {
        font-size: 12px !important;
        min-height: 32px !important;
        margin-bottom: 6px !important;
    }

    .producto-card-custom a {
        padding: 8px 0 !important;
        font-size: 12px !important;
    }

    /* Modal estilo Instagram (Historias) */
    .instagram-card {
        width: 95% !important;
        max-width: 360px !important;
        border-radius: 12px !important;
    }

    .instagram-img-container,
    .instagram-img-container img {
        max-height: 280px !important;
    }

    /* Modal de PIN de Seguridad */
    .modal-pin-box {
        width: 92% !important;
        padding: 20px 15px !important;
    }

    /* Título Naranja de Sección */
    .contenedor-titulo-naranja {
        padding: 10px 8px !important;
        margin-bottom: 15px !important;
    }

    .contenedor-titulo-naranja h2 {
        font-size: 1.2rem !important;
    }

    /* Footer Responsivo */
    .footer {
        padding: 20px 15px !important;
    }

    .footer-benefits {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin-top: 15px !important;
    }

    .benefit-item img {
        max-width: 35px !important;
        height: auto !important;
    }

    .benefit-item p {
        font-size: 10px !important;
    }
}

/* 4. ADAPTABILIDAD PARA TELÉFONOS PEQUEÑOS Y PLEGABLES (IOS / ANDROID ≤ 400px) */
@media screen and (max-width: 400px) {
    .productos-grid, 
    #contenedorInvisibleBuscador .busqueda-resultados-wrapper {
        grid-template-columns: 1fr !important;
    }

    .top-search-container input {
        font-size: 11px !important;
    }

    .btn-imagen-lomasvendido img {
        max-width: 110px !important;
        height: 110px !important;
    }

    .aisahf-grid-4 {
        grid-template-columns: 1fr 1fr;
        gap: 6px !important;
    }

    .aisahf-grid-item {
        height: 75px !important;
    }

    .aisahf-logo-header h1 {
        font-size: 1.8rem !important;
    }

    .aisahf-description {
        font-size: 0.85rem !important;
    }

    .btn-visitanos-aisahf {
        padding: 6px 16px !important;
        font-size: 11px !important;
    }

    .right-actions {
        gap: 4px !important;
    }

    .right-actions a, 
    .right-actions button {
        width: 32px !important;
        height: 32px !important;
    }
} 


/* Estilos ajustados para móviles: Buscador arriba y únicamente el Logo Giratorio abajo */
@media screen and (max-width: 768px) {
    /* 1. Coloca el buscador arriba y el logo giratorio abajo */
    header .top-bar-upper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    /* 2. Posiciona el buscador en la parte superior */
    .top-search-container {
        width: 100% !important;
        max-width: 340px !important;
        margin: 0 auto !important;
        order: 1 !important;
    }

    /* 3. Centra el contenedor del logo debajo del buscador */
    .top-bar-upper .logo-box {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        order: 2 !important;
    }

    /* 4. Ajuste de tamaño para el logo giratorio */
    .top-bar-upper .logo-rotating {
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
    }

    .top-bar-upper .logo-rotating img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /* 5. Oculta el texto "Mercocicles S.R.L." en pantallas móviles y pequeñas */
    .top-bar-upper .logo-text {
        display: none !important;
    }
}