/* ============================================================
   DOUTOR INTEGRA — Responsivo
   breakpoints: 1024 · 900 · 768 (nav) · 560
   Menu aberto: main.js injeta display:block + bg #fffdf7 inline
   no #mainNav — aqui só escondemos o nav no mobile e estilizamos
   a .nav-list dentro do painel injetado.
   ============================================================ */

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

    .approach-steps { grid-template-columns: repeat(3, 1fr); gap: 14px; }

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

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

    #terapias { background-image: none; }
}

@media (max-width: 900px) {
    .approach-steps { grid-template-columns: 1fr; gap: 36px; }

    .approach-steps::before {
        top: 12%;
        bottom: 12%;
        left: 32px;
        right: auto;
        width: 1px;
        height: auto;
        background: repeating-linear-gradient(180deg, var(--clay) 0 9px, transparent 9px 18px);
    }

    .step-card { text-align: left; display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; padding: 0; }

    .step-number { margin: 0; }

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

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

    .main-nav { display: none; }

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

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

    .nav-list a:hover { background: rgba(125, 150, 120, 0.2); }

    .section { padding: 58px 0; }

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

    .hero-body { padding: 24px 18px 18px; }

    .hero-body p, .hero-body h2 { padding-left: 0; }

    .hero-body p { text-align: left; }

    .hero-body { background-image: none; border-left: 4px solid var(--clay); }

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

    #ambiente-saude > .container > div,
    #energia-saude > .container > div { padding: 22px 18px 8px; }

    #ambiente-saude p, #energia-saude p { text-align: left; }

    .contact-box { padding: 26px 22px 24px; }
}

@media (max-width: 560px) {
    .hero h1 { font-size: clamp(1.5rem, 6.6vw, 1.95rem); }

    .hero-subtitle { font-size: 1.02rem; }

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

    .btn { text-align: center; }

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