/* ===== HERO (#home) — mobile-first e centralizado ===== */
#home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* gap:clamp(8px, 2.2vw, 18px); */
    padding: 20px;
    /* min-height:100vh;          em vez de height:100% */
    margin: 5% 0 50% 0;
    /* evita % baseado na largura */
}

#home h1,
#home h2 {
    margin: 0;
    padding: 10px;
    font-weight: 200;
}

/* tamanhos fluídos (nada de 12px fixo) */
#home h1 {
    font-size: clamp(24px, 5.2vw, 48px);
    line-height: 1.2;
}

#home h2 {
    font-size: clamp(18px, 3.2vw, 28px);
    line-height: 1.35;
    margin-bottom: clamp(12px, 3vh, 32px);
}

/* telas médias+: só limita largura/respira melhor */
@media (min-width:600px) {
    #home {
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 1100px;
        margin: 5% 10% ;
        text-align: center;
    }
}

/* telas muito baixas */
@media (max-height:600px) {
    #home {
        padding: 12px 20px;
    }
}