/* ============================================================
   AJERO — Responsivo
   breakpoints: 1024 · 900 · 768 (nav) · 560
   Menu aberto = #main-nav.active (main.js alterna classe única)
   ============================================================ */

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

    .methodology-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 22px; }

    .methodology-grid::before { display: none; }

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

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

    .footer-col:first-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .hero { padding: calc(var(--header-h) + 44px) 0 66px; }

    .deco-1 { width: 380px; height: 380px; left: -140px; }

    .deco-2 { width: 280px; height: 280px; right: -90px; }

    .deco-3 { display: none; }
}

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

    #main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: calc(var(--gutter) * -1);
        right: calc(var(--gutter) * -1);
    }

    #main-nav.active { display: block; }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 14px 18px 18px;
        background: var(--parchment-2);
        border-bottom: 4px double var(--gold);
        box-shadow: 0 26px 42px rgba(18, 43, 29, 0.2);
    }

    .nav-list a {
        text-align: center;
        padding: 12px 10px;
        border-bottom: 0;
        border-radius: var(--radius);
    }

    .nav-list a:hover { background: rgba(185, 138, 47, 0.16); }

    .section { padding: 60px 0; }

    .hero-content { padding: 30px 18px; }

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

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

    #direitos-trabalhistas .content-block,
    #infraestrutura-eventos .content-block { padding: 24px 18px 8px; }

    .content-block p { text-align: left; }
}

@media (max-width: 560px) {
    .hero h1 { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }

    .hero-badge { letter-spacing: 0.18em; padding: 6px 14px; }

    .impact-grid { grid-template-columns: 1fr; gap: 18px; }

    .cta-wrapper { padding: 22px 18px; }

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

    .whatsapp-btn { right: 16px; bottom: 16px; width: 50px; height: 50px; }
}