/* ============================================================
   MWM DIGITAL — Responsivo
   breakpoints: 1024 · 900 · 768 (nav) · 560
   main.js alterna .active em .menu-toggle/.nav-list — o painel
   mobile é este .nav-list.active (position absolute sob o header).
   ============================================================ */

@media (max-width: 1024px) {
    .solucoes-grid { grid-template-columns: repeat(2, 1fr); }

    .hero .container::after { display: none; }
}

@media (max-width: 900px) {
    .diferencial-item { grid-template-columns: 76px 1fr; gap: 18px; }

    .diferencial-num { font-size: 1.6rem; }

    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 768px) {
    .menu-toggle { display: flex; }

    .nav-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--branco);
        border-bottom: 1px solid var(--linha-forte);
        padding: 10px 24px 16px;
        box-shadow: 0 18px 30px rgba(23, 22, 28, 0.1);
    }

    .nav-list a {
        display: block;
        padding: 13px 4px;
        border-bottom: 1px solid var(--linha);
    }

    .nav-list a:last-child { border-bottom: 0; }

    .nav-list a::after { display: none; }

    .hero { padding: calc(var(--header-h) + 52px) 0 64px; }

    .hero h1 span { white-space: normal; }

    .secao { padding: 58px 0; }

    .conteudo-section { padding: 54px 0; }

    .conteudo-wrapper > p:first-of-type::first-letter { font-size: 2.8em; }
}

@media (max-width: 560px) {
    .solucoes-grid { grid-template-columns: 1fr; }

    .diferencial-item { grid-template-columns: 1fr; gap: 8px; padding: 22px 4px; }

    .hero-buttons { flex-direction: column; align-items: stretch; }

    .btn-hero-primary, .btn-hero-secondary { width: 100%; max-width: 340px; margin-inline: auto; }

    .footer-bottom { flex-direction: column; align-items: flex-start; }

    .whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}