/* ============================================================
   WEBMAC — Responsivo
   breakpoints: 1024 · 880 · 768 (nav) · 560
   main.js alterna .open em #mainNav e .active em #menuToggle.
   ============================================================ */

@media (max-width: 1024px) {
    .hero { padding: 80px 0 86px; }

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

    .nav-list { gap: 22px; }
}

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

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

    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--carbono);
        border-bottom: 1px solid var(--cobre);
        box-shadow: 0 18px 30px rgba(0, 0, 0, 0.6);
        padding: 8px 26px 14px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity 0.28s ease, transform 0.28s ease;
    }

    .main-nav.open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav-list a {
        display: block;
        font-size: 12px;
        padding: 13px 4px;
        border-bottom: 1px solid rgba(166, 171, 179, 0.16);
        border-radius: 0;
    }

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

    .content-section { padding: 56px 0; }

    .hero { padding: 60px 0 66px; }

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

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

    .cta-button { display: block; text-align: center; }

    .hero h1 { font-size: 22px; }

    .whatsapp-float { right: 14px; bottom: 14px; }
}