/* ==========================================================================
   ESTILOS RESPONSIVOS - LIMPACTO
   Organizado por Breakpoints (max-width) e Seções
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Breakpoint: 960px (Tablets e Telas Médias)
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
    /* Topbar Navbar, Busca & Menu Mobile */
    .topbar__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 20px;
        gap: 16px;
    }

    .topbar__logo img {
        height: 70px;
    }


    .topbar__nav {
        display: none;
    }

    .bt_menu_mobile {
        display: flex;
    }

    .topbar__search {
        display: none;
        width: 100%;
        max-width: 220px;
        margin-left: auto;
    }

    .topbar__search kbd {
        display: none;
    }

    .topbar__search input {
        padding-right: 14px;
    }

    /* Catálogo & Sidebar Drawer */
    .catalog {
        grid-template-columns: 1fr;
    }

    .sidebar-toggle {
        display: inline-flex !important;
    }

    .sidebar__head-mobile {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--ink-10);
    }

    .sidebar {
        z-index: 9999 !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: min(320px, 85vw) !important;
        max-height: 100vh !important;
        padding: 24px 24px 32px !important;
        overflow-y: auto !important;
        transform: translateX(100%) !important;
        background: var(--white) !important;
        box-shadow: -10px 0 40px rgba(29, 43, 58, .25) !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .sidebar.is-open {
        transform: translateX(0) !important;
    }

    .sidebar-backdrop {
        display: block !important;
        z-index: 9998 !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(29, 43, 58, .5) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease !important;
    }

    .sidebar-backdrop.is-open {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* --------------------------------------------------------------------------
   2. Breakpoint: 920px (Grids de Conteúdo & Seções Institucionais)
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
    .diff-grid,
    .brands-grid,
    .process {
        grid-template-columns: repeat(2, 1fr);
    }

    .about,
    .sustain,
    .cta-wrap {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .sustain__media {
        order: -1;
    }
}

/* --------------------------------------------------------------------------
   3. Breakpoint: 900px (Cobertura e Marcas Parceiras)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .coverage {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .coverage__map {
        order: -1;
    }

    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .partners-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --------------------------------------------------------------------------
   4. Breakpoint: 820px (Missão/Visão/Valores, Cards & Rodapé)
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
    .vmv {
        grid-template-columns: 1fr;
    }

    .contact-card {
        grid-template-columns: 1fr;
        padding: 40px 28px;
    }

    .footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px 24px;
    }
}

/* --------------------------------------------------------------------------
   5. Breakpoint: 760px (Estatísticas Strips)
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .stats__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .stat__num {
        font-size: 42px;
    }
}

/* --------------------------------------------------------------------------
   6. Breakpoint: 640px (Hero & Grid de Produtos)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .hero__brand {
        margin-bottom: 28px;
    }

    .hero__brand-logo {
        max-width: 320px;
    }

    .hero__brand-halo {
        inset: -24px -24px -12px -24px;
    }

    .grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 14px;
    }
}

/* --------------------------------------------------------------------------
   7. Breakpoint: 560px (Formulários & Grids Compactos)
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .coverage__regions {
        grid-template-columns: 1fr;
    }

    .brands-grid {
        grid-template-columns: 1fr;
    }

    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .diff-grid,
    .process,
    .cform__row {
        grid-template-columns: 1fr;
    }
    .section {
        padding: 36px 28px;
    }
}

/* --------------------------------------------------------------------------
   8. Breakpoint: 480px (Smartphones / Mobile Small)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .hero {
        padding: 56px 20px 80px;
    }

    .section {
        padding: 64px 20px;
    }

    .catalog {
        padding: 40px 20px 72px;
    }

    .stats {
        padding: 36px 20px;
    }

    .footer__inner {
        grid-template-columns: 1fr;
    }
    .allia-card {
        flex-direction: column;
    }
}