/* ============================================================
   MARCIO DO SEO — Responsivo
   breakpoints: 1024 · 860 · 768 (nav) · 560
   main.js alterna .active em .menu-toggle/.nav-list — painel
   mobile = .nav-list.active abaixo.
   ============================================================ */

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

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

    .metrica-item:nth-child(2) { border-right: 0; }

    .metrica-item:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
}

@media (max-width: 860px) {
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }

    .processo-steps { grid-template-columns: 1fr; }
}

@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(--hairline);
        padding: 10px 24px 16px;
        box-shadow: 0 18px 30px rgba(31, 36, 40, 0.12);
    }

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

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

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

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

    .secao { padding: 58px 0; }

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

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

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

    .metricas-row { grid-template-columns: 1fr; }

    .metrica-item { border-right: 0; border-bottom: 1px solid var(--hairline); }

    .metrica-item:last-child { border-bottom: 0; }

    .processo-step { flex-direction: column; gap: 16px; }

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

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