/* ==========================================
   AJUSTES RESPONSIVOS TRANSVERSAIS
   Pequenos ajustes que tocam vários componentes ao mesmo tempo em
   telas menores. Regras responsivas específicas de um único
   componente (ex.: menu móvel, tabela de cronograma, card de
   disciplina) ficam junto do próprio componente em layout.css/
   components.css — aqui só entram ajustes que cruzam componentes.
   Depende de: tokens.css, layout.css, components.css
========================================== */

@media(max-width:900px){

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

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

    .hero h2{
        font-size:26px;
    }
}

@media(max-width:600px){

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

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

    .hero h2{
        font-size:22px;
    }

    .hero p{
        font-size:17px;
    }

    .membro-card img{
        width:180px;
        height:180px;
    }

    .mastro{
        padding:var(--space-2) var(--space-4);
    }

    .logo-elegante{
        height:60px;
    }

    .nav-discreta{
        gap:var(--space-4);
        justify-content:center;
    }

    .botoes-hero a{
        padding:var(--space-2) var(--space-4);
    }

    .infra-bloco{
        padding:var(--space-5);
    }
}