/* ============================================================
   CTS SAÚDE PREMIUM — Responsivo
   breakpoints: 1024 · 880 · 768 (nav) · 560
   main.js alterna .active em #menuToggle e aplica estilos
   inline no painel #mainNav — re-skin via !important abaixo.
   ============================================================ */

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

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

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

    .hero::before { width: 320px; height: 400px; top: -40px; right: -60px; }

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

@media (max-width: 880px) {
    .footer-inner { flex-direction: column; gap: 30px; }

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

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

    .main-nav { display: none; }

    /* painel aberto pelo JS (inline) — re-skin para a paleta */
    .main-nav[style*="display: block"] {
        background: var(--porcelana) !important;
        border-top: 2px solid var(--jade) !important;
        border-bottom: 1px solid var(--hairline) !important;
        box-shadow: 0 18px 34px rgba(29, 40, 48, 0.22) !important;
    }

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

    .nav-list a {
        display: block;
        font-size: 14px;
        padding: 14px 4px;
        border-bottom: 1px solid var(--areia);
        border-radius: 0;
    }

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

    .section { padding: 58px 0; }

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

    .hero::before { width: 240px; height: 300px; }

    .hero-subtitle { padding-left: 16px; margin-bottom: 30px; }

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

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

    .cta-group { flex-direction: column; align-items: stretch; }

    .btn { text-align: center; }

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

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