/* ============================================================
   MEJORA POR PARTES: HEADER Y NAVEGACIÓN (MOBILE & TABLET)
   ============================================================ */

@media (max-width: 1024px) {
    /* --- EL CONTENEDOR BLANCO (Logo y Login) --- */
    header.glass-nav {
        padding: 0.5rem 1rem !important; /* Reducimos altura para ganar pantalla */
        height: 65px !important;
        display: flex !important;
        align-items: center !important;
    }

    header.glass-nav img {
        height: 32px !important; /* Logo más pequeño para que no empuje el botón */
        width: auto !important;
        object-fit: contain !important;
    }

    /* Ajuste del Botón de Usuario / Login */
    #userDropdownContainer button {
        padding: 4px 8px !important;
        border-radius: 12px !important;
        gap: 8px !important;
        border: 1px solid #f1f5f9 !important;
    }

    /* El avatar circular o inicial */
    #userDropdownContainer .w-10.h-10 {
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
    }

    /* Ocultamos textos secundarios en móvil para que no se amontone */
    .hidden.sm\:block.text-left.italic {
        display: none !important; 
    }

    /* --- EL MENÚ AZUL (Navegación Principal) --- */
    .glass-menu-v2 {
        height: 60px !important; /* Altura fija para que sea cómodo al tacto */
        padding: 0 !important;
        background: rgba(0, 43, 107, 0.98) !important; /* Más sólido en móvil */
    }

    .glass-menu-v2 .max-w-7xl {
        height: 100% !important;
        display: flex !important;
        justify-content: space-around !important; /* Distribuye los botones igualitos */
        gap: 0 !important;
    }

    .nav-link {
        flex-direction: column !important; /* ICONO ARRIBA, TEXTO ABAJO */
        gap: 4px !important;
        font-size: 8px !important; /* Texto muy pequeño pero legible */
        text-transform: uppercase;
        font-weight: 800;
        min-width: 60px;
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .nav-link svg {
        width: 20px !important;
        height: 20px !important;
    }

    .nav-link.active {
        color: #4ade80 !important; /* Verde vibrante para el activo */
        opacity: 1;
    }

    /* Quitamos la raya de abajo en móvil, se ve mejor el icono coloreado */
    .nav-link::after { display: none !important; }
}

/* AJUSTES PARA TABLET (Vista intermedia) */
@media (min-width: 768px) and (max-width: 1024px) {
    header.glass-nav { height: 80px !important; }
    header.glass-nav img { height: 45px !important; }
    .nav-link { flex-direction: row !important; font-size: 11px !important; gap: 10px !important; }
}


/* ============================================================
   PARTE 2: NAVEGACIÓN AZUL Y BANNER (MOBILE & TABLET)
   ============================================================ */

@media (max-width: 1024px) {
    /* --- 1. AJUSTE DEL MENÚ AZUL --- */
    /* Lo convertimos en una barra de pestañas tipo App */
    .glass-menu-v2 {
        height: 65px !important;
        padding: 0 !important;
        background: rgba(0, 43, 107, 0.98) !important;
    }

    .glass-menu-v2 .max-w-7xl {
        display: flex !important;
        justify-content: space-around !important; /* Espacio igual entre botones */
        gap: 0 !important;
        height: 100% !important;
        padding: 0 10px;
    }

    .nav-link {
        flex-direction: column !important; /* Icono arriba, texto abajo */
        gap: 2px !important;
        font-size: 8px !important;
        font-weight: 800;
        min-width: 60px;
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .nav-link svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Quitamos el borde inferior de PC, usamos el color para indicar activo */
    .nav-link::after { display: none !important; }
    
    .nav-link.active {
        color: #4ade80 !important;
        opacity: 1;
    }
    .nav-link.active svg {
        color: #4ade80 !important;
    }

    /* --- 2. AJUSTE DEL BANNER --- */
    /* Le damos una altura fija para que no se vea como una línea delgada */
    section.h-\[400px\] {
        height: 250px !important; 
    }

    .swiperBanners img {
        height: 100% !important;
        width: 100% !important;
        /* IMPORTANTE: cover evita que la imagen se estire feo */
        object-fit: cover !important; 
        object-position: center;
    }
}

/* --- AJUSTES PARA TABLET --- */
@media (min-width: 768px) and (max-width: 1024px) {
    .glass-menu-v2 { height: 75px !important; }
    .nav-link { flex-direction: row !important; font-size: 11px !important; gap: 8px !important; }
    section.h-\[400px\] { height: 350px !important; }
}

/* ============================================================
   ESTRUCTURA ORIGINAL: HEADER, MENÚ Y BANNER
   ============================================================ */

@media (max-width: 1024px) {
    /* --- 1. HEADER (Logo y Perfil) --- */
    header.glass-nav {
        padding: 0.5rem 1rem !important;
        height: 65px !important;
        display: flex !important;
        align-items: center !important;
    }

    header.glass-nav img {
        height: 32px !important; /* Logo más pequeño para que no estorbe */
        width: auto !important;
        object-fit: contain !important;
    }

    #userDropdownContainer button {
        padding: 4px 8px !important;
        border-radius: 12px !important;
    }

    #userDropdownContainer .hidden.sm\:block {
        display: none !important; /* Quitamos textos largos en móvil */
    }

    /* --- 2. MENÚ AZUL (Estilo Tab Bar de App) --- */
    .glass-menu-v2 {
        height: 60px !important;
        padding: 0 !important;
        background: rgba(0, 43, 107, 0.98) !important;
    }

    .glass-menu-v2 .max-w-7xl {
        display: flex !important;
        justify-content: space-around !important;
        gap: 0 !important;
        height: 100% !important;
    }

    .nav-link {
        flex-direction: column !important; /* Icono arriba, texto abajo */
        gap: 3px !important;
        font-size: 8px !important;
        font-weight: 800;
        min-width: 60px;
    }

    .nav-link svg {
        width: 20px !important;
        height: 20px !important;
    }

    .nav-link::after { display: none !important; } /* Quitamos la línea de PC */

    .nav-link.active {
        color: #4ade80 !important; /* Verde para resaltar el inicio */
    }

    /* --- 3. BANNER (Imagen con presencia) --- */
    section.h-\[400px\], section.md\:h-\[550px\] {
        height: 250px !important; /* Altura ideal para celular */
    }

    .swiperBanners img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Para que la foto del banner llene el espacio */
        object-position: center;
    }
}

/* Ajustes para Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    header.glass-nav img { height: 45px !important; }
    .nav-link { flex-direction: row !important; font-size: 11px !important; }
    section.h-\[400px\] { height: 350px !important; }
}

/* RESET ABSOLUTO PARA PRODUCTOS */
.img-container-fj {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* Cuadrado perfecto siempre */
    max-height: 200px !important;    /* No puede crecer más de esto */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* LA IMAGEN: Prohibido estirarse */
.product-img-fix {
    width: auto !important;
    height: auto !important;
    max-width: 90% !important;
    max-height: 90% !important;
    object-fit: contain !important; /* Mantiene la forma real del bote/caja */
    flex-shrink: 0 !important;
}

/* AJUSTE PARA TABLET (iPad) */
@media (min-width: 768px) and (max-width: 1024px) {
    .img-container-fj {
        max-height: 180px !important;
    }
    .product-card-fj {
        height: 380px !important;
    }
}

/* AJUSTE PARA MÓVIL (iPhone 12 Pro) */
@media (max-width: 767px) {
    .img-container-fj {
        max-height: 150px !important;
    }
    .product-card-fj {
        height: 340px !important;
    }
}

/* PIE DE PAGINA*/

/* =========================================
   FOOTER RESPONSIVO DEFINITIVO
   ========================================= */

@media (max-width: 768px) {
    /* 1. Ajuste de escala para el teléfono */
    footer p.text-2xl {
        font-size: 1.5rem !important; /* Evita que el número de Comayagua se salga */
        letter-spacing: -1px !important;
        margin-top: 10px;
    }

    /* 2. Espaciado entre bloques para que no se vea amontonado */
    footer .grid-cols-1 > div {
        padding-bottom: 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    footer .grid-cols-1 > div:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* 3. Centrado total en móvil */
    footer .flex {
        align-items: center !important;
        text-align: center !important;
    }

    /* 4. El logo un poco más pequeño en el cel */
    footer img {
        height: 45px !important;
        margin-bottom: 1.5rem !important;
    }

    /* 5. Copyright con aire */
    footer .pt-8 {
        padding-top: 2rem !important;
        margin-top: 1rem !important;
    }
}

/* Ajuste para Tablet (iPad) */
@media (min-width: 769px) and (max-width: 1024px) {
    footer .grid-cols-3 {
        gap: 2rem !important;
    }
    
    footer p.text-4xl {
        font-size: 1.8rem !important;
    }
}

/* Bloqueo de tamaño para pantallas tipo Tablet (iPad) */
@media (min-width: 768px) and (max-width: 1023px) {
    footer p.text-4xl, 
    footer p.font-[1000] {
        /* Bajamos el tamaño a uno más elegante para el iPad */
        font-size: 1.5rem !important; 
        line-height: 1 !important;
        white-space: nowrap !important;
        letter-spacing: -1px !important;
    }
    
    /* Centramos el bloque de contacto en tablet para que no se vea pegado al borde */
    footer .md\:text-right {
        text-align: center !important;
        margin-top: 1rem;
    }
}