/* tu_proyecto/static/css/navbar.css - Versión unificada */

    body {
        background-color: #121212;
        color: #ffffff;
        font-family: 'Archivo Black', sans-serif;
    }

    /* Banner de beneficios */
    .benefits-banner {
        background-color: #FFB800;
        color: #121212;
        padding: 20px 0;
        font-family: 'Archivo Black', sans-serif;
    }

    .benefits-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .benefit-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-align: center;
    }

    .benefit-item h3 {
        font-size: 18px;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .benefit-icon {
        font-size: 20px;
        color: #121212;
    }

    .benefit-item p {
        font-size: 14px;
        margin: 0;
        color: #121212;
    }

    /* Header y navbar */
    header {
        background-color: #121212;
        color: #ffffff;
    }

    #main-navbar {
        background-color: #121212 !important;
        color: #ffffff;
    }

    .nav-icon, .mobile-icon {
        color: #ffffff;
    }

    .nav-icon:hover, .mobile-icon:hover {
        color: #FFB800;
    }

    .text-gray-700 {
        color: #ffffff !important;
    }

    .text-gray-900 {
        color: #ffffff !important;
    }

    .hover\:text-gray-900:hover {
        color: #FFB800 !important;
    }

    .bg-white {
        background-color: #1a1a1a !important;
    }

    .bg-gray-100 {
        background-color: #333 !important;
    }

    /* Footer */
    footer {
        background-color: #121212;
        color: #ffffff;
    }

    .text-gray-300 {
        color: #888 !important;
    }

    .text-gray-400 {
        color: #888 !important;
    }

    .text-gray-500 {
        color: #888 !important;
    }

    .border-gray-200, .border-gray-300, .border-gray-700, .border-gray-800 {
        border-color: #333 !important;
    }

    .bg-gray-800 {
        background-color: #1a1a1a !important;
    }

    .bg-gray-700 {
        background-color: #FFB800 !important;
        color: #121212 !important;
    }

    .hover\:bg-gray-600:hover {
        background-color: #e6a800 !important;
    }

    /* WhatsApp button */
    .bg-\[#25D366\] {
        background-color: #FFB800 !important;
    }

    .hover\:bg-\[#128C7E\]:hover {
        background-color: #e6a800 !important;
    }

    /* Cart modal */
    #cart-container {
        background-color: #1a1a1a !important;
        color: #ffffff;
    }

    /* Ajuste del Espaciador */
    .content-spacer {
        display: block;
        width: 100%;
        height: 190px; 
    }

    @media (min-width: 768px) {
        .content-spacer {
            height: 210px; 
        }
    }

    .navbar-search {
        width: min(92vw, 680px);
    }

    .navbar-search input {
        font-family: Arial, sans-serif;
        letter-spacing: 0;
    }

    .navbar-search-results {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 8px);
        z-index: 10000;
        background-color: #1a1a1a;
        border: 1px solid #333;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
        overflow: hidden;
    }

    .navbar-search-results.is-visible {
        display: block;
    }

    .navbar-search-result {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-bottom: 1px solid #333;
        font-family: Arial, sans-serif;
        letter-spacing: 0;
    }

    .navbar-search-result:last-child {
        border-bottom: 0;
    }

    .navbar-search-result:hover,
    .navbar-search-result:focus {
        background-color: #242424;
    }

    .navbar-search-result img,
    .navbar-search-thumb {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        object-fit: cover;
        background-color: #2a2a2a;
    }

    @media (max-width: 767px) {
        .navbar-search {
            width: calc(100% - 2rem);
        }
    }   
/* Estilos base */
body {
    font-family: 'Arapey', serif;
}

/* Estilos para ocultar/mostrar menús */
.hidden-menu {
    display: none !important;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.mobile-nav-menu.active {
    display: flex !important;
    max-height: 500px;
}

.user-menu {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.show-menu {
    opacity: 1;
    transform: translateY(0);
}
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 0.4s ease-in-out, background-color 0.3s;
    z-index: 1000;
}

.mobile-nav-menu {
    transition: max-height 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
}

/* Estilos para el carrito */
.cart-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease-in-out;
}

.cart-container {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.cart-container.active {
    transform: translateX(0);
}

/* Estilos para botones y efectos */
.btn-primary {
    background: linear-gradient(to right, #4F46E5, #7C3AED);
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(79, 70, 229, 0.2);
}

.btn-primary:hover {
    background: linear-gradient(to right, #4338CA, #6D28D9);
    box-shadow: 0 6px 8px rgba(79, 70, 229, 0.3);
    transform: translateY(-2px);
}

.btn-secondary {
    background: linear-gradient(to right, #10B981, #059669);
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.2);
}

.btn-secondary:hover {
    background: linear-gradient(to right, #059669, #047857);
    box-shadow: 6px 8px rgba(16, 185, 129, 0.3);
    transform: translateY(-2px);
}

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Iconos personalizados */
.akar-icons--person {
    display: inline-block;
    width: 48px;
    height: 48px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='%235A5550' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M24 27a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-2a6 6 0 1 0 0-12a6 6 0 0 0 0 12'/%3E%3Cpath d='M44 24c0 11.046-8.954 20-20 20S4 35.046 4 24S12.954 4 24 4s20 8.954 20 20M33.63 39.21A17.9 17.9 0 0 1 24 42a17.9 17.9 0 0 1-9.831-2.92q-.36-.45-.73-.93A2.14 2.14 0 0 1 13 36.845c0-1.077.774-1.98 1.809-2.131c6.845-1 11.558-.914 18.412.035A2.08 2.08 0 0 1 35 36.818c0 .48-.165.946-.463 1.31q-.461.561-.907 1.082m3.355-2.744c-.16-1.872-1.581-3.434-3.49-3.698c-7.016-.971-11.92-1.064-18.975-.033c-1.92.28-3.335 1.856-3.503 3.733A17.94 17.94 0 0 1 6 24c0-9.941 8.059-18 18-18s18 8.059 18 18a17.94 17.94 0 0 1-5.015 12.466'/%3E%3C/g%3E%3C/svg%3E");
}

.guidance--shop {
    display: inline-block;
    width: 96px;
    height: 96px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231b1c1a' d='M5.5 21a2 2 0 1 0 4 0m3 0a2 2 0 1 0 4 0M7 7.5h15.5v.25l-.239.283A16 16 0 0 0 18.5 18.34v.16h-13v-1.88c0-2.08-.066-4.158-.386-6.212C4.56 6.852 3.337 1.5 1 1.5' stroke-width='2'/%3E%3C/svg%3E");
}

.line-md--account {
    display: inline-block;
    width: 48px;
    height: 48px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='%235A5550' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M24 27a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-2a6 6 0 1 0 0-12a6 6 0 0 0 0 12'/%3E%3Cpath d='M44 24c0 11.046-8.954 20-20 20S4 35.046 4 24S12.954 4 24 4s20 8.954 20 20M33.63 39.21A17.9 17.9 0 0 1 24 42a17.9 17.9 0 0 1-9.831-2.92q-.36-.45-.73-.93A2.14 2.14 0 0 1 13 36.845c0-1.077.774-1.98 1.809-2.131c6.845-1 11.558-.914 18.412.035A2.08 2.08 0 0 1 35 36.818c0 .48-.165.946-.463 1.31q-.461.561-.907 1.082m3.355-2.744c-.16-1.872-1.581-3.434-3.49-3.698c-7.016-.971-11.92-1.064-18.975-.033c-1.92.28-3.335 1.856-3.503 3.733A17.94 17.94 0 0 1 6 24c0-9.941 8.059-18 18-18s18 8.059 18 18a17.94 17.94 0 0 1-5.015 12.466'/%3E%3C/g%3E%3C/svg%3E");
}

.fluent-mdl2-guidance--shop {
    display: inline-block;
    width: 2048px;
    height: 2048px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'%3E%3Cpath fill='%235A5550' d='M1600 1536q40 0 75 15t61 41t41 61t15 75t-15 75t-41 61t-61 41t-75 15t-75-15t-61-41t-41-61t-15-75q0-31 11-64H885q11 33 11 64q0 40-15 75t-41 61t-61 41t-75 15t-75-15t-61-41t-41-61t-15-75q0-55 29-102t80-71L189 256H0V128h281l85 256h1682l-298 896H665l85 256zM409 512l213 640h1035l213-640zm359 1216q0-26-19-45t-45-19t-45 19t-19 45t19 45t45 19t45-19t19-45m832 64q26 0 45-19t19-45t-19-45t-45-19t-45 19t-19 45t19 45t45 19'/%3E%3C/svg%3E");
    }


body {
    font-family: 'Arapey', serif;
    margin: 0;
    padding: 0;
    padding-top: 120px; /* Espacio para el navbar fijo */
}
/* Estilos para ocultar/mostrar menús */
.hidden-menu {
    display: none !important;
}
.mobile-nav-menu.active {
    display: flex !important;
}
.cart-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease-in-out;
}
.cart-container {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
.cart-container.active {
    transform: translateX(0);
}
/* Ocultar flechas en los dropdowns */
.no-arrow::after {
    display: none !important;
}

.navbar-hidden {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

.navbar-visible {
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}

.sticky-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}
.nav-hidden {
    transform: translateY(-100%);
}
.nav-scrolled {
    background-color: #121212;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* Estilos mejorados para los iconos - MÁS GRANDES */
.nav-icon {
    width: 40px; /* Aumentado de 32px */
    height: 40px; /* Aumentado de 32px */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4B5563; /* gray-700 */
    transition: all 0.2s ease-in-out;
    border: none;
    background: none;
}

.nav-icon:hover {
    color: #111827; /* gray-900 */
    transform: scale(1.05);
}

/* Tamaño de iconos aumentado */
.nav-icon i {
    font-size: 1.5rem; /* Aumentado de text-xl (1.25rem) */
}

/* Posicionamiento mejorado de los iconos en desktop */
.desktop-icons {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Iconos móviles más grandes */
.mobile-icon {
    width: 36px; /* Tamaño para móvil */
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4B5563;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    background: none;
}

.mobile-icon i {
    font-size: 1.375rem; /* Tamaño intermedio para móvil */
}
.mobile-icon.is-active {
    transform: scale(1.2); /* Se agranda un 20% */
    color: #000; /* Se oscurece (ajusta según tu color de marca) */
    filter: drop-shadow(0 0 8px rgba(0,0,0,0.2)); /* Un brillo sutil */
}
.mobile-icon.is-active i {
    transform: rotate(90deg);
}

@media (max-width: 767px) {
    .benefits-banner {
        display: none !important;
    }
}