/* REINICIO GLOBAL Y FUENTES CORRECTAS (Mantiene orden y evita desbordamientos) */
        *, *::before, *::after {
            box-sizing: border-box;
            font-family: 'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif;
            font-style: normal;
        }

        body {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            background-color: #f4f6f8;
        }

        /* CONTROL DE IMÁGENES GLOBALES (Evita que iconos o botones se vuelvan gigantescos) */
        img {
            max-width: 100%;
            height: auto;
        }

        /* REINICIO DE LISTAS PARA MENÚS Y CABECERAS (Elimina viñetas desalineadas) */
        ul, ol, li {
            list-style: none !important;
            margin: 0;
            padding: 0;
        }

        /* --- EFECTO DE CARGA (LOADER BLUR GRIS) --- */
        #loader-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(60, 80, 70, 0.55);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            opacity: 1;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        #loader-overlay.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .loader-logo {
            max-width: 220px;
            width: 50vw;
            height: auto;
            object-fit: contain;
            animation: pulseLogo 1s infinite alternate ease-in-out;
        }

        @keyframes pulseLogo {
            0% { transform: scale(0.95); opacity: 0.85; }
            100% { transform: scale(1.05); opacity: 1; }
        }

        /* --- ESTILOS DE CABECERA Y BÚSQUEDA --- */
        header .top-bar-upper {
            background-color: #ff6600 !important;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 20px;
            gap: 15px;
            flex-wrap: wrap;
        }

        .top-search-container {
            position: relative;
            display: flex;
            align-items: center;
            background-color: #ffffff;
            border-radius: 20px;
            padding: 4px 12px;
            width: 100%;
            max-width: 450px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            border: 2px solid transparent;
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease;
        }

        .top-search-container:hover {
            transform: scale(1.04);
            animation: brillaBordeMulticolor 3s linear infinite;
        }

        .top-search-container:focus-within {
            transform: scale(1.05);
            animation: brillaBordeMulticolor 2s linear infinite;
        }

        .top-search-container input {
            border: none;
            outline: none;
            width: 100%;
            padding: 6px 10px;
            font-size: 14px;
            background: transparent;
            transition: transform 0.2s ease;
        }

        .top-search-container input:focus {
            transform: scale(1.02);
        }

        .top-search-container button {
            background: transparent;
            border: none;
            color: #666;
            cursor: pointer;
            font-size: 15px;
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.3s ease, transform 0.2s ease;
        }

        .top-search-container button:hover {
            color: #ff6600;
            transform: scale(1.15);
        }

        @keyframes brillaBordeMulticolor {
            0% { border-color: #ff007f; box-shadow: 0 0 12px rgba(255, 0, 127, 0.8); }
            25% { border-color: #00e5ff; box-shadow: 0 0 12px rgba(0, 229, 255, 0.8); }
            50% { border-color: #76ff03; box-shadow: 0 0 12px rgba(118, 255, 3, 0.8); }
            75% { border-color: #ffd600; box-shadow: 0 0 12px rgba(255, 214, 0, 0.8); }
            100% { border-color: #ff007f; box-shadow: 0 0 12px rgba(255, 0, 127, 0.8); }
        }

        /* CONTROL DE ICONOS ESPECÍFICOS EN HEADER (Garantiza tamaño prolijo) */
        .top-bar-upper img, 
        .top-bar-upper svg,
        header img {
            max-height: 45px;
            width: auto;
            object-fit: contain;
        }

        /* --- BÚSQUEDA AUTOCOMPLETADO --- */
        .search-results-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            width: 100%;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
            border: 1px solid #e0e0e0;
            max-height: 320px;
            overflow-y: auto;
            z-index: 10000;
            padding: 6px 0;
        }

        .search-results-dropdown.active {
            display: block;
            animation: slideDown 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

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

        .search-item-result {
            padding: 10px 16px;
            font-size: 14px;
            color: #333333;
            cursor: pointer;
            text-align: left;
            transition: background-color 0.2s ease, color 0.2s ease;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-bottom: 1px solid #f4f4f4;
        }

        .search-item-result:last-child {
            border-bottom: none;
        }

        .search-item-result:hover,
        .search-item-result.selected {
            background-color: #00aaff !important;
            color: #ffffff !important;
            font-weight: bold;
        }

        .search-no-result {
            padding: 12px 16px;
            font-size: 13px;
            color: #888888;
            text-align: center;
        }

        /* --- BOTÓN Y MENÚ SIDEBAR --- */
        .btn-sidebar {
            background: transparent;
            border: none;
            padding: 0;
            margin: 0;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            outline: none;
        }

        .btn-icon {
            width: 45px;
            height: 45px;
            object-fit: contain;
            transition: transform 0.2s ease;
        }

        .btn-sidebar:hover .btn-icon {
            transform: scale(1.1);
        }

        .sidebar-menu {
            display: none;
            position: absolute;
            top: 55px;
            left: 0;
            width: 240px;
            background-color: #ffffff;
            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.18);
            border-radius: 12px;
            overflow: hidden;
            z-index: 1000;
        }

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

        .sidebar-menu a.menu-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            color: #222222;
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            font-style: italic;
            border-bottom: 1px solid #eeeeee;
            transition: background-color 0.2s ease;
        }

        .sidebar-menu a.menu-item:hover {
            background-color: #f8f8f8;
        }

        .sidebar-menu a.menu-item:last-child {
            border-bottom: none;
        }

        .sidebar-menu .item-img {
            width: 45px;
            height: 45px;
            object-fit: contain;
        }

        /* --- SUBMENÚS Y DROPDOWNS --- */
        li.dropdown {
            position: relative;
        }

        li.dropdown .submenu {
            display: none;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: 220px;
            background: rgba(45, 75, 65, 0.85);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 10px 0;
            margin: 0;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
            z-index: 9999;
            overflow: visible !important;
        }

        li.dropdown:hover .submenu {
            display: block;
        }

        li.dropdown .submenu li {
            width: 100%;
            margin: 0;
            padding: 0;
        }

        li.dropdown .submenu li a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 18px;
            color: #ffffff;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: background-color 0.2s ease;
        }

        li.dropdown .submenu li a:hover {
            background: rgba(255, 255, 255, 0.15);
        }

        li.dropdown .submenu li a img.sub-icon {
            width: 32px !important;
            height: 32px !important;
            max-width: 32px !important;
            max-height: 32px !important;
            object-fit: contain;
            margin: 0;
            padding: 0;
            border-radius: 6px;
        }

        li.dropdown-right {
            position: relative !important;
        }

        li.dropdown-right .submenu-right {
            display: none;
            position: absolute;
            top: 0;
            left: 100%;
            min-width: 180px;
            background: rgba(45, 75, 65, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 8px;
            padding: 8px 0;
            margin: 0;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            z-index: 10000;
        }

        li.dropdown-right:hover > .submenu-right {
            display: block !important;
        }

        li.dropdown-right .submenu-right li a {
            display: block;
            padding: 8px 16px;
            color: #ffffff;
            text-decoration: none;
            font-size: 13px;
            white-space: nowrap;
            transition: background-color 0.2s ease;
        }

        li.dropdown-right .submenu-right li a:hover {
            background: rgba(255, 255, 255, 0.25);
            color: #ff6600;
        }

        li.dropdown .submenu:has(> li:nth-child(10)) {
            display: none;
            grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
            gap: 5px 15px !important;
            width: 420px !important;
            max-width: max-content !important;
            padding: 12px !important;
            box-sizing: border-box !important;
        }

        li.dropdown:hover > .submenu:has(> li:nth-child(10)) {
            display: grid !important;
        }

        li.dropdown .submenu:has(> li:nth-child(10)) > li {
            width: 100% !important;
            box-sizing: border-box !important;
        }

        li.dropdown .submenu:has(> li:nth-child(10)) > li:nth-child(n+8) .submenu-right {
            left: auto !important;
            right: 100% !important;
        }

        /* --- CARROUSEL DE MARCAS Y OFERTAS --- */
        .image-row {
            overflow: hidden;
            width: 100%;
            background: #ffffff;
            padding: 25px 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            position: relative;
            display: flex;
        }

        .image-row-track {
            display: flex;
            align-items: center;
            gap: 40px;
            width: max-content;
            animation: moverDerechaLento 40s linear infinite;
        }

        .image-row img {
            height: 90px;
            width: auto;
            object-fit: contain;
            transition: transform 0.3s ease, filter 0.3s ease;
            cursor: pointer;
        }

        .image-row img:hover {
            transform: scale(1.25);
            z-index: 5;
            filter: drop-shadow(0px 8px 15px rgba(255, 102, 0, 0.4));
        }

        @keyframes moverDerechaLento {
            0% { transform: translateX(-50%); }
            100% { transform: translateX(0); }
        }

        .header-ofertas-banner {
            position: relative;
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            border-radius: 15px;
            padding: 30px 20px;
            margin-bottom: 25px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        }

        .header-ofertas-banner .titulo-ofertas-seccion {
            color: #ffffff;
            font-size: 2.5rem;
            margin: 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
        }

        .img-oferta-especial-hover {
            max-height: 110px;
            width: auto;
            object-fit: contain;
            cursor: pointer;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
        }

        .img-oferta-especial-hover:hover {
            animation: moverOferta 0.6s ease-in-out infinite alternate;
            filter: drop-shadow(0px 10px 20px rgba(0, 255, 128, 0.6));
        }

        @keyframes moverOferta {
            0% { transform: scale(1.1) rotate(-5deg) translateY(0); }
            100% { transform: scale(1.2) rotate(5deg) translateY(-8px); }
        }

        .etiqueta-oferta-producto {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 60px;
            height: auto;
            z-index: 10;
            pointer-events: none;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
        }

        .content-ofertas {
            overflow: hidden;
            width: 100%;
            position: relative;
            padding: 20px 0;
        }

        .ofertas-carrusel-track {
            display: flex;
            flex-wrap: nowrap;
            gap: 20px;
            width: max-content;
            padding: 15px 10px;
            animation: carruselLento 35s linear infinite;
        }

        .ofertas-carrusel-track:hover {
            animation-play-state: paused;
        }

        @keyframes carruselLento {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* --- TARJETAS DE PRODUCTOS --- */
        .producto-card-oferta, 
        .producto-card-custom, 
        .producto-card-premium {
            background: #ffffff;
            border-radius: 12px;
            padding: 15px;
            width: 260px;
            flex: 0 0 260px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: flex !important;
            flex-direction: column !important;
            justify-content: space-between !important;
            color: #333;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
            cursor: pointer;
            position: relative;
            z-index: 1;
            border: 1px solid #e2e8f0;
            min-height: 400px;
        }

        .producto-card-oferta:hover, 
        .producto-card-custom:hover, 
        .producto-card-premium:hover {
            transform: translateY(-8px) scale(1.05) !important;
            z-index: 10;
            box-shadow: 0 14px 28px rgba(13, 71, 161, 0.25) !important;
            border-color: rgba(13, 71, 161, 0.5);
        }

        .img-container, 
        .img-container-premium {
            width: 100%;
            height: 180px !important;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            border-radius: 8px;
            margin-bottom: 12px;
            overflow: hidden;
            position: relative;
        }

        .img-container img, 
        .img-container-premium img, 
        .producto-card-oferta img.img-prod {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: transform 0.4s ease;
        }

        .producto-card-oferta:hover .img-container img.img-prod,
        .producto-card-premium:hover .img-container-premium img {
            transform: scale(1.12);
        }

        .pildora-oferta {
            background: #e63946;
            color: white;
            font-size: 10px;
            font-weight: bold;
            padding: 3px 8px;
            border-radius: 12px;
            text-transform: uppercase;
            align-self: flex-start;
            box-shadow: 0 2px 6px rgba(230, 57, 70, 0.4);
        }

        .titulo-producto, 
        .titulo-producto-premium {
            font-size: 15px;
            font-weight: bold;
            margin: 8px 0;
            color: #1d3557;
            min-height: 40px;
            line-height: 1.3;
        }

        .caja-precio {
            background: #f1faee;
            border-left: 4px solid #e63946;
            padding: 8px;
            border-radius: 4px;
            margin-bottom: 12px;
        }

        .etiqueta-precio {
            display: block;
            font-size: 11px;
            color: #6c757d;
        }

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

        .btn-oferta, 
        .btn-ver-premium {
            display: block;
            text-align: center;
            background: #080338;
            color: white;
            text-decoration: none;
            padding: 10px 0;
            border-radius: 50px;
            font-weight: bold;
            font-size: 14px;
            transition: background 0.2s ease, transform 0.2s ease;
        }

        .btn-oferta:hover, 
        .btn-ver-premium:hover {
            background: #120b54;
            transform: translateY(-2px);
        }

        /* --- HISTORIAS Y SECCIÓN AISAHF --- */
        .historias-bar {
            background-color: #d1d5db;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            gap: 20px;
            overflow-x: auto;
        }

        .historia-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .historia-item:hover {
            transform: scale(1.12);
        }

        .historia-cuadro-gris {
            width: 75px;
            height: 75px;
            background-color: #9ca3af;
            border-radius: 16px;
            border: 3px solid #0d47a1;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
            transition: box-shadow 0.3s ease, border-color 0.3s ease;
        }

        .historia-item:hover .historia-cuadro-gris {
            box-shadow: 0 0 15px rgba(13, 71, 161, 0.6);
            border-color: #ff6600;
        }

        .historia-cuadro-gris img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .historia-label {
            font-size: 12px;
            font-weight: bold;
            color: #1f2937;
            margin-top: 6px;
            max-width: 80px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
        }

        .aisahf-banner-section {
            background-color: #f7e300;
            position: relative;
            padding: 30px 20px;
            margin: 20px auto;
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            flex-wrap: wrap;
            box-shadow: 0 0 15px rgba(247, 227, 0, 0.5);
        }

        .aisahf-banner-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(transparent, #ffffff, #ffea00, #ff6600, transparent 30%);
            animation: rotateGlow 4s linear infinite;
            z-index: 1;
        }

        .aisahf-banner-section::after {
            content: '';
            position: absolute;
            inset: 4px;
            background: #f7e300;
            border-radius: 8px;
            z-index: 2;
        }

        @keyframes rotateGlow {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .aisahf-content-wrapper {
            position: relative;
            z-index: 3;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            flex-wrap: wrap;
        }

        .aisahf-grid-container {
            background: #ffffff;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            width: 100%;
            max-width: 320px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .aisahf-grid-4 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            width: 100%;
            margin-bottom: 15px;
        }

        .aisahf-grid-item {
            background: #f8f9fa;
            border-radius: 6px;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100px;
            border: 1px solid #e2e8f0;
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
            cursor: pointer;
        }

        .aisahf-grid-item:hover {
            transform: scale(1.12);
            box-shadow: 0 6px 15px rgba(255, 102, 0, 0.3);
            z-index: 4;
        }

        .aisahf-grid-item img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .btn-visitanos-aisahf {
            background: #0d47a1;
            color: #ffffff;
            text-decoration: none;
            font-weight: bold;
            font-size: 14px;
            padding: 10px 30px;
            border-radius: 20px;
            transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        }

        .btn-visitanos-aisahf:hover {
            background: #052c65;
            transform: scale(1.08);
            box-shadow: 0 0 12px rgba(13, 71, 161, 0.6);
        }

        .aisahf-text-block {
            flex: 1;
            min-width: 280px;
            text-align: center;
            color: #000000;
        }

        .aisahf-logo-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            margin-bottom: 15px;
        }

        .aisahf-logo-header h1 {
            font-size: 3.5rem;
            font-weight: 900;
            letter-spacing: -1px;
            margin: 0;
            color: #000;
        }

        .aisahf-logo-img {
            max-height: 100px;
            width: auto;
            object-fit: contain;
        }

        .aisahf-description {
            font-size: 1.1rem;
            font-weight: 700;
            line-height: 1.4;
            max-width: 600px;
            margin: 0 auto;
        }

        /* --- LO MÁS VENDIDO Y MODALES --- */
        .contenedor-titulo-naranja {
            background-color: #ff6600;
            padding: 15px 20px;
            border-radius: 8px;
            margin-bottom: 25px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3);
        }

        .contenedor-titulo-naranja h2 {
            color: #ffffff;
            margin: 0;
        }

        .lomas-vendido-wrapper {
            position: relative;
            width: 100%;
            margin-bottom: 20px;
            padding: 10px 40px;
            box-sizing: border-box;
        }

        #contenedorInvisibleLomasVendido {
            width: 100%;
            background: transparent;
            padding: 20px 0;
            display: flex;
            flex-wrap: nowrap;
            gap: 25px;
            overflow-x: auto;
            scroll-behavior: smooth;
            align-items: center;
        }

        #contenedorInvisibleLomasVendido::-webkit-scrollbar {
            display: none;
        }

        .btn-imagen-lomasvendido {
            background: transparent;
            border: none;
            padding: 0;
            cursor: pointer;
            outline: none;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
            display: inline-block;
            flex: 0 0 auto;
            border-radius: 12px;
            overflow: hidden;
        }

        .btn-imagen-lomasvendido:hover {
            transform: scale(1.15) translateY(-5px);
            z-index: 5;
            box-shadow: 0 10px 25px rgba(255, 102, 0, 0.35);
        }

        .btn-imagen-lomasvendido img {
            width: 185px;
            height: 185px;
            object-fit: contain;
            border-radius: 12px;
            display: block;
            background: #ffffff;
            padding: 10px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        }

        .lomas-arrow-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.7);
            color: #0d47a1;
            border: 1px solid rgba(13, 71, 161, 0.3);
            width: 38px;
            height: 38px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 20px;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(2px);
            transition: background 0.3s ease, transform 0.2s ease;
        }

        .lomas-arrow-btn:hover {
            background: rgba(255, 255, 255, 1);
            transform: translateY(-50%) scale(1.15);
        }

        .lomas-arrow-left { left: 0px; }
        .lomas-arrow-right { right: 0px; }

        .modal-aceptar-overlay, .modal-pin-overlay, .instagram-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(5px);
            z-index: 10000000;
            justify-content: center;
            align-items: center;
        }

        .modal-aceptar-box {
            background: #ffffff;
            border-radius: 20px;
            padding: 30px 25px;
            width: 90%;
            max-width: 380px;
            text-align: center;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }

        .btn-aceptar-verde {
            background-color: #28a745;
            color: #ffffff !important;
            font-size: 16px;
            font-weight: bold;
            padding: 12px 35px;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            width: 100%;
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .btn-aceptar-verde:hover {
            background-color: #218838;
            transform: translateY(-2px);
        }
        
        
        .body{
            font-family:Arial,Sans-Serif;
            font-size:16px;
            margin:20px;
            padding:0px;
            line-height:1.5;
        }
        
        /* ============================================================
   ESTILOS RESPONSIVOS PARA MÓVILES (MEJORAS DE DISEÑO)
   ============================================================ */

@media screen and (max-width: 768px) {
    
    /* 1. CABECERA Y SECCIÓN SUPERIOR NARANJA */
    .top-bar-upper {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 12px !important;
        background-color: #ff6600 !important; /* Mantener color corporativo */
    }

    /* Ocultar texto 'Mercocicles S.R.L.' en móviles */
    .logo-text, 
    #mainTitle {
        display: none !important;
    }

    /* Centrar logo giratorio en la parte superior */
    .logo-box {
        order: 1 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 6px !important;
    }

    .logo-rotating img, 
    #mainLogo {
        width: 55px !important;
        height: 55px !important;
        object-fit: contain !important;
    }

    /* Botón de Menú lateral ubicado a la izquierda debajo del logo */
    .top-bar-upper > div:first-child {
        order: 2 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Barra de búsqueda posicionada a la derecha del botón menú */
    .top-search-container {
        order: 3 !important;
        flex: 1 !important;
        margin-left: 8px !important;
        width: auto !important;
    }

    .top-search-container input {
        height: 38px !important;
        border-radius: 20px !important;
        font-size: 13px !important;
        padding-left: 35px !important;
    }

    /* 2. FRANJA AZUL DE NAVEGACIÓN Y MENÚS HORIZONTALES */
    .main-header, 
    .top-bar {
        background-color: #00449e !important; /* Azul de la franja */
        padding: 4px 0 !important;
        overflow-x: auto !important; /* Permitir desplazamiento horizontal fluído si es necesario */
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .top-bar nav > ul {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 8px !important;
        margin: 0 !important;
        width: max-content !important;
        min-width: 100% !important;
    }

    /* Ajustar tamaño de íconos y texto de los menús dentro de la franja azul */
    .top-bar nav ul li.menu-icon {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 4px !important;
    }

    .top-bar nav ul li.menu-icon a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        font-size: 9px !important;
        color: #ffffff !important;
        padding: 2px 4px !important;
        text-decoration: none !important;
    }

    .top-bar nav ul li.menu-icon img {
        width: 18px !important;
        height: 18px !important;
        object-fit: contain !important;
        margin-bottom: 2px !important;
    }

    .top-bar nav ul li.menu-icon i.fa-chevron-down {
        display: none !important; /* Ocultar flechas pequeñas para ahorrar espacio */
    }

    /* Acciones de la derecha: Comunicados, Favoritos, Carrito, Login y Sidebar */
    .menu-actions, 
    .right-actions {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin-left: 6px !important;
    }

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

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

    /* Adaptación para pantallas de teléfonos pequeños (ej: < 380px) */
    @media screen and (max-width: 380px) {
        .logo-rotating img, 
        #mainLogo {
            width: 45px !important;
            height: 45px !important;
        }

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

        .top-bar nav ul li.menu-icon a {
            font-size: 8px !important;
        }
    }
} 

/* ============================================================
   CORRECCIÓN RESPONSIVA DE FRANJA AZUL Y CONTENCIÓN DE MENÚS
   ============================================================ */

@media screen and (max-width: 768px) {

    /* 1. SECCIÓN NARANJA SUPERIOR (Asegurar que solo tenga Logo y Búsqueda) */
    .top-bar-upper {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 15px !important;
        background-color: #ff6600 !important;
        overflow: hidden !important;
    }

    /* Ocultar únicamente el texto "MERCOCICLES S.R.L." en móviles */
    .logo-text, 
    #mainTitle {
        display: none !important;
    }

    /* Logo centrado en la parte superior */
    .logo-box {
        order: 1 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 8px !important;
    }

    .logo-rotating img, 
    #mainLogo {
        width: 55px !important;
        height: 55px !important;
        object-fit: contain !important;
    }

    /* Botón Sidebar 2 (Izquierda) */
    .top-bar-upper > div:first-child {
        order: 2 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Buscador extendido al lado del menú desplegable */
    .top-search-container {
        order: 3 !important;
        flex: 1 !important;
        margin-left: 10px !important;
        width: auto !important;
    }

    .top-search-container input {
        height: 38px !important;
        border-radius: 20px !important;
        font-size: 13px !important;
        padding-left: 35px !important;
        box-sizing: border-box !important;
    }

    /* 2. FRANJA AZUL ANCHA Y ENVOLVENTE (DEPOSITA TODOS LOS MENÚS ADENTRO) */
    .main-header, 
    .top-bar {
        background-color: #00449e !important; /* Azul corporativo */
        width: 100% !important;
        min-height: 80px !important; /* Extensión y ancho incrementado */
        padding: 12px 6px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        overflow-x: auto !important; /* Desplazamiento horizontal para visualizar todos los íconos */
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: inset 0px 2px 5px rgba(0,0,0,0.2) !important;
    }

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

    /* Alineación interna en cuadrícula horizontal flexible dentro del azul */
    .top-bar nav > ul {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 5px !important;
        list-style: none !important;
        width: max-content !important;
        gap: 8px !important;
    }

    /* Estilos e Íconos de las Categorías (Jardinería, Agro, Construcción, etc.) */
    .top-bar nav ul li.menu-icon {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 2px !important;
        vertical-align: middle !important;
    }

    .top-bar nav ul li.menu-icon a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 10px !important;
        font-weight: bold !important;
        color: #ffffff !important;
        text-decoration: none !important;
        text-align: center !important;
        padding: 4px 6px !important;
        border-radius: 6px !important;
        background: rgba(255, 255, 255, 0.05) !important;
    }

    .top-bar nav ul li.menu-icon img {
        width: 22px !important;
        height: 22px !important;
        object-fit: contain !important;
        margin-bottom: 3px !important;
    }

    /* Ocultar flechas pequeñas para evitar desbordes */
    .top-bar nav ul li.menu-icon i.fa-chevron-down {
        display: none !important;
    }

    /* Integración de los botones de la derecha dentro de la franja azul */
    .menu-actions {
        display: inline-flex !important;
        align-items: center !important;
        margin-left: 10px !important;
        padding-left: 10px !important;
        border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
    }

    .right-actions {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .right-actions a, 
    .right-actions button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.15) !important;
        padding: 6px !important;
        border-radius: 50% !important;
        border: none !important;
    }

    .right-actions img, 
    .right-actions svg {
        width: 20px !important;
        height: 20px !important;
        fill: #ffffff !important;
    }

    /* Líneas del botón menú desplegable sidebar en blanco */
    .sidebar-btn span {
        background-color: #ffffff !important;
    }
} 

/* =========================================================
   Ajuste para centrar el menú dentro de la franja azul 
   y visibilidad de botones (Comunicados, Favoritos, Carrito)
   ========================================================= */

/* 1. Fondo de la franja azul y centrado vertical */
.main-header, 
.top-bar {
    background-color: #0d47a1 !important; /* Color de la franja azul */
    min-height: 60px;
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center;
    width: 100%;
}

/* 2. Estructura de la lista de navegación */
.top-bar nav > ul {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important; /* Centra verticalmente todos los items */
    justify-content: space-between;
    margin: 0 !important;
    padding: 0 15px !important;
    list-style: none !important;
    width: 100%;
}

/* 3. Ajuste de enlaces con iconos y texto en la franja azul */
.top-bar nav ul li.menu-icon > a {
    display: flex !important;
    align-items: center !important;
    gap: 6px;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 13px;
    padding: 8px 10px !important;
}

.top-bar nav ul li.menu-icon > a img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain;
    display: inline-block !important;
}

/* 4. Corrección de la sección de botones del lado derecho (Comunicados, Favoritos, Carrito, Sidebar) */
.menu-actions, 
.right-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    margin-left: auto; /* Empuja los iconos a la derecha */
}

/* Icono de Comunicados */
.comunicados-btn img {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
}

/* Icono de Favoritos */
.favorite-btn svg {
    width: 24px !important;
    height: 24px !important;
    fill: #ffffff !important;
    display: block !important;
}

/* Contenedor e icono del Carrito */
.cart {
    display: flex !important;
    align-items: center !important;
    position: relative;
}

.cart img {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
}

/* Contador flotante del Carrito */
.mi-contador-carrito-span {
    position: absolute;
    top: -6px;
    right: -8px;
    background-color: #ff6600;
    color: #fff;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: bold;
}

/* Botón Sidebar (Hamburguesa) */
.sidebar-btn {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.sidebar-btn span {
    width: 100%;
    height: 3px;
    background-color: #ffffff;
    border-radius: 2px;
} 

/* =========================================================
   AJUSTES PERSONALIZADOS DE LA FRANJA AZUL Y MENÚS
   ========================================================= */

/* 1. Franja azul más ancha (mayor grosor y padding) */
.main-header, 
.top-bar {
    background-color: #0d47a1 !important; /* Mantiene el tono azul */
    min-height: 95px !important;            /* Incrementa significativamente el ancho vertical */
    height: auto !important;
    padding: 10px 0 !important;
    display: flex !important;
    align-items: center !important;        /* Centra todo verticalmente exactamente en el medio */
    justify-content: center !important;
    width: 100% !important;
}

/* 2. Lista contenedora de la barra de navegación */
.top-bar nav > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;        /* Centrado en el medio vertical */
    justify-content: center !important;     /* Agrupa todos los menús juntos en el centro */
    gap: 2px !important;                    /* Espaciado mínimo (juntos/casi pegados) */
    margin: 0 auto !important;
    padding: 0 10px !important;
    list-style: none !important;
    width: auto !important;
}

/* 3. Estilos de los ítems del menú (Jardines hasta Herramientas y Redes) */
.top-bar nav ul li.menu-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Enlaces del menú (icono + texto) */
.top-bar nav ul li.menu-icon > a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;        /* Baja el texto e icono al medio exacto */
    justify-content: center !important;
    gap: 4px !important;                   /* Separa ligeramente el texto del icono */
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 6px !important;           /* Margen compacto para mantenerlos pegados */
    white-space: nowrap !important;
}

/* Tamaño controlado de los iconos dentro del menú */
.top-bar nav ul li.menu-icon > a img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Flechas desplegables */
.top-bar nav ul li.menu-icon > a i {
    font-size: 11px !important;
    margin-left: 2px !important;
}

/* 4. Bloque de botones a la derecha (Comunicados, Favoritos, Carrito, Usuario, Sidebar) */
.menu-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 6px !important;            /* Mantiene cercanía con el último menú */
}

.right-actions {
    display: flex !important;
    align-items: center !important;        /* Alineación vertical perfecta al centro */
    gap: 6px !important;                    /* Espaciado pegado pero ligeramente separado */
}

/* Ajuste de iconos a la derecha para que no sobresalgan */
.comunicados-btn img,
.cart img,
.user-btn img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    display: block !important;
}

.favorite-btn svg {
    width: 22px !important;
    height: 22px !important;
    fill: #ffffff !important;
    display: block !important;
}

/* Botón del Sidebar */
.sidebar-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 22px !important;
    height: 16px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin-left: 4px !important;
}

.sidebar-btn span {
    width: 100% !important;
    height: 3px !important;
    background-color: #ffffff !important;
    border-radius: 2px !important;
}