/* Globo Online — Observatório da Água — responsivo (todos os @media aqui)
   Breakpoints: 1024 / 768 / 480 */

@media (max-width: 1024px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 2.8rem;
        padding-top: 3.6rem;
        padding-bottom: 4.2rem;
    }

    .hero-scope { max-width: 560px; margin: 0 auto; }

    .globe-wrap { width: min(260px, 64%); }

    .nav { gap: 1.15rem; }

    .live-status { display: none; }

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

    .join-grid { grid-template-columns: 1fr; gap: 2.6rem; }

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

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

    .nav {
        position: fixed;
        top: var(--header-h);
        right: 0;
        flex-direction: column;
        align-items: stretch;
        width: min(300px, 84vw);
        height: calc(100vh - var(--header-h));
        background: rgba(3, 24, 37, 0.97);
        border-left: 2px solid var(--petroleo);
        padding: 1.6rem 1.5rem;
        gap: 0.2rem;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        margin-left: 0;
        overflow-y: auto;
    }

    .nav.open { transform: translateX(0); }

    .nav a {
        padding: 0.85rem 0.3rem;
        border-bottom: 1px solid rgba(91, 124, 153, 0.25);
    }

    .nav a:hover { border-bottom-color: rgba(91, 124, 153, 0.25); }

    .topics, .numbers, .actions, .dive, .myths, .voices, .join { padding: 3.6rem 0 4rem; }

    .band-light { padding: 4rem 0 4.4rem; }

    .portal-grid { grid-template-columns: 1fr; gap: 2.6rem; }

    .portal-photo { max-width: 440px; margin: 0 auto; }

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

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

    .tab { flex: 1 1 auto; }

    .tab-panel { padding: 1.7rem 1.5rem; }

    .accordion-trigger { gap: 0.8rem; }

    .accordion-panel { padding-left: 2.6rem; }

    .hero-actions { flex-wrap: wrap; }

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

    .band-light::before, .band-light::after { height: 30px; }
}

@media (max-width: 480px) {
    .hero-inner { padding-top: 2.8rem; padding-bottom: 3.4rem; }

    .hero h1 { font-size: 1.85rem; }

    .lead { font-size: 1rem; }

    .hero-actions { flex-direction: column; align-items: stretch; }

    .btn { width: 100%; }

    .hero-badges li { font-size: 0.64rem; padding: 0.42rem 0.6rem; }

    .globe-wrap { width: min(210px, 70%); }

    .scope-stat strong { font-size: 1.7rem; }

    .cam-bar { font-size: 0.56rem; letter-spacing: 0.12em; }

    .station-head { flex-wrap: wrap; }

    .number-card { padding: 1.3rem 1.1rem; }

    .number-value { font-size: 2.15rem; }

    .bars { height: 26px; }

    .accordion-trigger { flex-wrap: wrap; padding: 1.05rem 0.2rem; }

    .accordion-trigger .q { flex-basis: 100%; order: 3; font-size: 0.95rem; }

    .accordion-trigger .acc-icon { margin-left: auto; order: 2; }

    .accordion-trigger .reg { order: 1; }

    .accordion-panel { padding-left: 0.4rem; }

    .join-card { padding: 1.7rem 1.4rem; }

    .container { padding: 0 1.1rem; }
}

/* movimento reduzido: desliga instrumentos animados */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }

    html { scroll-behavior: auto; }

    .reveal { opacity: 1; transform: none; }
}