/* ============================================================================
   MAXICAL C.A. — RESPONSIVE MÓVIL
   Mejoras visuales para pantallas < 768px
   ============================================================================ */

/* ── 1. LOGO FLOTANTE DEL BANNER — oculto en móvil ── */
@media (max-width: 768px) {
    .hero-floating-logo {
        display: none !important;
    }
}

/* ── 2. HERO BANNER ── */
@media (max-width: 768px) {
    #banner {
        height: 100svh !important;
        min-height: 560px !important;
        max-height: none !important;
    }

    #banner header {
        padding: 0 1.25rem !important;
        max-width: 100% !important;
    }

    #banner header h1,
    #banner header h2 {
        font-size: clamp(2rem, 8vw, 2.8rem) !important;
        line-height: 1.15 !important;
    }

    .hero-eyebrow { font-size: .7rem !important; margin-bottom: 1rem !important; }

    .hero-subtitle {
        font-size: .9rem !important;
        margin-bottom: 1.75rem !important;
        padding: 0 .5rem;
    }

    .hero-ctas {
        flex-direction: column !important;
        align-items: center !important;
        gap: .75rem !important;
        margin-bottom: 2rem !important;
    }

    .btn-hero-primary,
    .btn-hero-outline {
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
        font-size: .9rem !important;
        padding: .8em 1.5em !important;
    }

    .hero-stats-row {
        gap: 1.25rem !important;
        padding-top: .75rem !important;
    }

    .hero-stat-number { font-size: 1.6rem !important; }
    .hero-stat-label  { font-size: .65rem !important; }
}

/* ── 3. NAVBAR ── */
@media (max-width: 860px) {
    .topbar {
        padding: 0 1rem !important;
        height: 60px !important;
    }

    .topbar-brand-logo-wrap {
        width: 38px !important;
        height: 38px !important;
    }

    .topbar-brand-logo-wrap img { width: 24px !important; height: 24px !important; }

    .topbar-brand-text strong { font-size: .88rem !important; }
}

/* ── 4. STATS BAR ── */
@media (max-width: 600px) {
    .stats-bar-premium { padding: 1.75rem 0 !important; }

    .stats-bar-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: .75rem !important;
    }

    .stats-bar-number { font-size: 1.6rem !important; }
    .stats-bar-label  { font-size: .65rem !important; }
}

/* ── 5. CATÁLOGO HERO INDEX ── */
@media (max-width: 600px) {
    .catalogo-hero-index {
        padding: 3rem 0 2.5rem !important;
    }

    .catalogo-hero-index h2,
    .catalogo-hero-index .h1 {
        font-size: 1.6rem !important;
    }

    .catalogo-hero-index p,
    .catalogo-hero-index .lead {
        font-size: .9rem !important;
        padding: 0 .5rem;
    }
}

/* ── 6. FEATURES STRIP ── */
@media (max-width: 600px) {
    .feat-list {
        gap: .75rem !important;
        padding: 0 .5rem !important;
        justify-content: flex-start !important;
    }

    .feat-list li {
        font-size: .8rem !important;
    }
}

/* ── 7. SECCIÓN VALORES ── */
@media (max-width: 600px) {
    .valores-section  { padding: 3rem 0 !important; }
    .valores-grid,
    .valores-grid-premium {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .valor-card,
    .valor-card-premium { padding: 1.5rem !important; }

    .valor-card__icon,
    .valor-icon-premium {
        width: 56px !important;
        height: 56px !important;
    }
}

/* ── 8. SECCIÓN CLIENTES ── */
@media (max-width: 600px) {
    .clientes-section,
    .clientes-premium { padding: 2.5rem 0 !important; }

    .clientes-grid,
    .clientes-grid-premium {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .cliente-card,
    .cliente-card-premium { padding: 1rem .75rem !important; }

    .cliente-card__logo,
    .cliente-logo-wrap { width: 60px !important; height: 60px !important; }
}

/* ── 9. HERO PÁGINAS INTERNAS ── */
@media (max-width: 600px) {
    .page-hero { padding: 2.75rem 0 2rem !important; }

    .page-hero-title {
        font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
    }

    .page-hero-subtitle {
        font-size: .9rem !important;
        padding: 0 .5rem;
    }

    .page-hero-chip { font-size: .68rem !important; }
}

/* ── 10. CATÁLOGOS DE PRODUCTOS ── */
@media (max-width: 600px) {
    .cat-products-grid,
    #catalogo-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .cat-card-img { height: 200px !important; }

    .cat-card-body {
        padding: 1.1rem 1.25rem .5rem !important;
    }

    .cat-card-footer {
        padding: .65rem 1.25rem 1.1rem !important;
        gap: .5rem !important;
    }

    /* Qty control + botón añadir bien proporcionados */
    .qty-control { flex-shrink: 0 !important; }

    .qty-btn {
        width: 30px !important;
        height: 36px !important;
    }

    .qty-input {
        width: 34px !important;
        height: 36px !important;
    }

    .btn-add-cart {
        height: 36px !important;
        font-size: .78rem !important;
        padding: 0 .65rem !important;
    }
}

/* ── 11. PANEL DEL CARRITO ── */
@media (max-width: 480px) {
    .cart-panel { width: 100vw !important; }

    .cart-panel-header { padding: 1rem 1.1rem !important; }

    .cart-items-list { padding: .75rem 1rem !important; }

    .cart-panel-footer { padding: 1rem !important; }

    .cart-item { padding: .65rem !important; gap: .55rem !important; }

    .cart-item-img { width: 44px !important; height: 44px !important; }

    .cart-item-name { font-size: .82rem !important; }
    .cart-item-brand { font-size: .68rem !important; }
}

/* ── 12. MODAL CHECKOUT ── */
@media (max-width: 560px) {
    .checkout-modal-overlay { padding: .5rem !important; align-items: flex-end !important; }

    .checkout-modal {
        border-radius: 16px 16px 0 0 !important;
        max-height: 95vh !important;
    }

    .checkout-modal-header { padding: 1rem 1.25rem .75rem !important; }
    .checkout-modal-body   { padding: 1rem 1.25rem 1.25rem !important; }

    .form-row { grid-template-columns: 1fr !important; gap: .6rem !important; }

    .payment-methods { grid-template-columns: repeat(2, 1fr) !important; }

    .checkout-modal-actions { flex-direction: column-reverse !important; }
    .btn-modal-back { text-align: center !important; }
}

/* ── 13. SECCIÓN NOSOTROS — TIMELINE ── */
@media (max-width: 600px) {
    .timeline-premium { padding-left: 1.1rem !important; }
    .tl-dot { left: -2rem !important; font-size: .62rem !important; padding: .25em .5em !important; }
    .tl-content { padding: 1.1rem !important; }
    .historia-card .card-img { height: 200px !important; }
    .historia-body { padding: 1.25rem !important; }
}

/* ── 14. CTA INTERIOR ── */
@media (max-width: 600px) {
    .cta-interior { padding: 3rem 0 !important; }

    .cta-interior-title { font-size: 1.5rem !important; }
    .cta-interior-text  { font-size: .88rem !important; }

    .cta-interior-btns {
        flex-direction: column !important;
        align-items: center !important;
    }

    .btn-cta-wa,
    .btn-cta-outline-white {
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
    }
}

/* ── 15. LOGÍSTICA ── */
@media (max-width: 600px) {
    .logistica-section { padding: 2.5rem 0 !important; }

    .logistica-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .logistica-card-premium { padding: 1.25rem 1rem !important; }
    .logistica-icon { width: 48px !important; height: 48px !important; font-size: 1.2rem !important; }
    .logistica-card-premium h4 { font-size: .88rem !important; }
    .logistica-card-premium p  { font-size: .78rem !important; }
}

/* ── 16. FOOTER ── */
@media (max-width: 600px) {
    .mc-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .mc-footer-brand-col { max-width: 100% !important; }
    .mc-footer-main { padding: 2rem 0 1.5rem !important; }
}

/* ── 17. PORTAL DE RETENCIONES ── */
@media (max-width: 560px) {
    .portal-hero-premium { padding: 3.5rem 0 2.5rem !important; }

    .portal-hero-title { font-size: 1.8rem !important; }

    .portal-stats {
        gap: 1.25rem !important;
        flex-wrap: wrap !important;
    }

    .portal-stat-num { font-size: 1.6rem !important; }

    .busqueda-card-premium { padding: 2rem 1.25rem !important; }

    .como-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
}

/* ── 18. CONTACTO ── */
@media (max-width: 600px) {
    .contacto-section { padding: 2rem 0 !important; }

    .contact-main-card { padding: 1.5rem !important; }

    .dept-grid {
        grid-template-columns: 1fr !important;
        gap: .75rem !important;
    }
}

/* ── 19. SECTION TITLES ── */
@media (max-width: 600px) {
    .section-title-premium {
        font-size: 1.5rem !important;
    }

    .section-lead-premium {
        font-size: .88rem !important;
    }
}

/* ── 20. GENERAL: evitar overflow horizontal ── */
@media (max-width: 768px) {
    html, body { overflow-x: hidden !important; }

    .container { padding-left: 1rem !important; padding-right: 1rem !important; }

    /* Imágenes responsivas */
    img { max-width: 100% !important; height: auto; }

    /* Evitar que los grids rompan el layout */
    .row { margin: 0 !important; }
    .row > * { padding-left: .5rem !important; padding-right: .5rem !important; }
}