.titulo-tela-principal {
    text-align: center;
    color: var(--primary-color-verde); /* Verde escuro */
    border-bottom: 1px solid #5cb85c;
    padding-bottom: 5px;
    margin-top: 20px;
    font-size: 2rem;
}

.container-artigos {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}


.titulo-tela-principal {
    font-size: 3em; /* Aumente o tamanho da fonte */
    margin-bottom: 0.5em;
    margin-top: 10rem;
    z-index: 2;/*Fica frente a sombra*/
    position: relative;/*Posiciona*/
}

.hero {
    padding: 0px 5px; /* Reduz o padding em telas menores */
}

.subtitulo-hero {
    font-size: 1.5em;
    margin-bottom: 1.5em;
    font-weight: 300; /* Deixa a fonte um pouco mais fina */
    z-index: 2;/*Fica a frente sombra*/
    position: relative;/*Posiciona*/
}

.botao-cta {
    display: inline-block; /* Permite definir largura e altura */
    padding: 15px 30px;
    background-color: var(--primary-color-verde); /* Verde escuro */
    color: var(--text-color-branco); /* Branco */
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    z-index: 2;/*Fica frente a sombra*/
    position: relative;/*Posiciona*/
}

.botao-cta:hover {
    background-color: var(--secondary-color-amarelo); /* Amarelo */
    color: var(--primary-color-verde); /* Verde escuro */
}
/* Artigos */

.container-artigos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* Espaço entre os artigos */
    gap: 20px;
    padding: 40px 0;
}

.artigo {
    width: 300px; /* Ou use porcentagem para responsividade */
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden; /* Importante para o border-radius funcionar com a imagem */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
     /* Transição suave */
}
.artigo:hover{
    transform: scale(1.05); /*Aumenta*/
}

.artigo a {
    display: block; /* Faz o link ocupar todo o bloco */
    text-decoration: none; /* Remove o sublinhado */
    color: inherit; /* Herda a cor do texto do pai (para não ficar azul) */
}

.artigo img {
    width: 100%; /* A imagem ocupa toda a largura do artigo */
    height: auto; /* Mantém a proporção */
    display: block; /* Remove espaço extra abaixo da imagem */
}

.artigo h3 {
    font-size: 1.2em;
    margin: 10px;
    color: var(--primary-color-verde); /* Verde escuro */
}

.artigo p {
    font-size: 1em;
    margin: 10px;
    color: var(--text-color-light); /* Cor do texto */
    line-height: 1.5; /* Espaçamento entre linhas */
    line-height: 1.4;
}

/* Destaques (opcional) */

.destaques {
    padding: 40px 20px;
    background-color: #f8f8f8;
}

.destaques h2 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--primary-color-verde); /* Verde escuro */
    font-size: 1.7rem; /* Aumenta o tamanho da fonte */
    font-weight: bold; /* Deixa o texto mais forte */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Sombra para destaque */
}

.destaques-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Layout responsivo */
    gap: 20px;
}

.destaque-item {
    text-align: center;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
}
.destaque-img { 
    margin-bottom: 15px;/*Espaçamento*/
    width: 120px;
    height: 120px;
    object-fit: cover; /* Mantém a proporção sem distorcer */
    border-radius: 8px; /* Opcional: arredonda as bordas */
}

/* Newsletter (opcional) */

.newsletter {
    padding: 40px 20px;
    background-color: #e0f2f1; /* Cor de fundo suave */
    text-align: center;
}

.newsletter h2 {
    margin-bottom: 10px;
    color: var(--primary-color-verde); /* Verde escuro */
    font-size: 1.7rem; /* Aumenta o tamanho da fonte */
}

.newsletter p {
    margin-bottom: 20px;
}

.newsletter form {
    display: flex;
    justify-content: center;
   align-items: center;
    gap: 10px;
}

.newsletter input[type="email"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 250px;
    max-width: 100%; /* Garante que não fique muito largo em telas pequenas */
}

.newsletter button[type="submit"] {
    padding: 10px 20px;
    background-color: var(--primary-color-verde); /* Verde escuro */
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.newsletter button[type="submit"]:hover {
    background-color: var(--secondary-color-amarelo); /* Amarelo */
    color: var(--primary-color-verde); /* Verde escuro */

}

.mensagem-error {
    margin-top: 10px;
}

/* Media Queries (Responsividade - ajuste conforme necessário) */

@media (max-width: 768px) {
    .hero {
        padding: 0px 20px; /* Reduz o padding em telas menores */
    }
    .titulo-tela-principal{
        font-size: 2em;/*Reduz fonte*/
    }
    .subtitulo-hero{
        font-size: 1.2em;/*Reduz fonte*/
    }

    .container-artigos {
        flex-direction: column; /* Empilha os artigos em telas menores */
        align-items: center; /* Centraliza os artigos */
    }

    .artigo {
        width: 80%; /* Aumenta a largura dos artigos em telas menores */
        max-width: 400px;/*Limite*/
    }
}