html, body {
    overflow-y: auto !important; /* Garante que a rolagem vertical sempre apareça se necessário */
    height: auto !important;     /* Remove qualquer altura fixa que possa impedir o crescimento da página */
}
/* =================================================================== */


/* --- Configuração Global --- */
body {
    /* padding: 5em; */
    font-family: 'Montserrat', sans-serif;
    background-color: #ffffff;
    color: #000000;
    margin: 0;
    font-weight: 400;
    line-height: 1.7;
}

/* --- Layout Principal Mais Amplo --- */
main {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 2rem;
    
}

/* --- Seções --- */
section {
    margin: 8rem 0;
}

.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 4rem;
}

/* --- Tipografia --- */
h1, h2 {
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    letter-spacing: -0.5px;
}

h1 {
    font-size: 3.5rem;
}

h2 {
    font-size: 2.2rem;
    margin-bottom: 3rem;
}

p {
    font-size: 1.1rem;
    text-align: justify;
    margin-bottom: 1.5em;
    text-indent: 3em;
}

p:last-of-type {
    margin-bottom: 0;
}

/* --- SVG --- */
.svg-container {
    width: 100%;
    margin-top: 3rem;
}

.svg-container img {
    max-width: 100%;
    height: auto;
}

/* --- Animação de Fade-in Suave --- */
.fade-in {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.visible {
    opacity: 1;
}

/* --- Estilização da Seção de Apoiadores --- */
.supporters-section {
    /* Usamos flexbox para centralizar facilmente o conteúdo */
    display: flex;
    justify-content: center;
}

.supporters-section img {
    /* Define a largura da imagem. 
      Ajuste o valor (ex: 60%) conforme o desejado.
    */
    width: 90%; 
    
    /* Define uma largura máxima para que a imagem não fique
      excessivamente grande em telas muito largas.
    */
    max-width: 1000px; 
}