/* ============================================================
   FÓRUM DE MARKETING DIGITAL — Responsivo
   breakpoints: 1024 · 880 · 768 (nav) · 560
   main.js alterna .open em #mainNav e .active em #menuToggle —
   painel mobile = .main-nav.open abaixo.
   ============================================================ */

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

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

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

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

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

    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--palco-deep);
        border-bottom: 2px solid var(--sinal);
        box-shadow: 0 18px 30px rgba(0, 0, 0, 0.5);
        padding: 8px 24px 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;
        padding: 13px 4px;
        border-bottom: 1px solid rgba(167, 173, 192, 0.16);
        border-radius: 0;
    }

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

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

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

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

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

    .card::before { letter-spacing: 0.16em; }

    .cta-button { width: 100%; text-align: center; }

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