* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* PALETAS DE CORES */

    /*CORES DE FUNDOS  */
    --cor-primaria-verde: #2A9D8F;
    --cor-fundo-principal: #FFFFFF;
    --cor-fundo-card-cinza: #F4F4F4;
    --cor-fundo-secao: #F4F4F4;
    /* CORES DE TEXTOS */
    --cor-texto-principal: #212529;
    --cor-texto-secundario: #6c757d;
    /* CORES DE BUTTON */
    --cor-acao-amarelo: #E9C46A;

    /* --- TAMANHOS DE FONTE --- */
    --fonte-tamanho-xxl: 2.5rem;/* 40px */
    --fonte-tamanho-xl: 2.0rem;/* 32px */
    --fonte-tamanho-lg: 1.5rem;/* 24px */
    --fonte-tamanho-base: 1rem;/* 16px */
    --fonte-tamanho-sm: 0.875rem;/* 14px */

    /* --- PESOS DE FONTE (da fonte Nunito) --- */
    --fonte-peso-regular: 400;
    --fonte-peso-bold: 700;
    --fonte-peso-extrabold: 800;

    /* --- ESPAÇAMENTO --- */
  --espaco-xs:  0.5rem;   /* 8px */
  --espaco-sm:  1rem;     /* 16px */
  --espaco-md:  1.5rem;   /* 24px */
  --espaco-lg:  2rem;     /* 32px */
  --espaco-xl:  3rem;     /* 48px */
  --espaco-xxl: 4rem;     /* 64px */
}

/* GERAL */
body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--cor-fundo-principal);
    color: var(--cor-texto-secundario);
    line-height: 1.6;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--espaco-md);
}

.conteudo-principal {
    padding: var(--espaco-xxl) 0;
}

/* --- CABEÇALHO E NAVEGAÇÃO --- */
header {
    background-color: var(--cor-primaria-verde);
    color: var(--cor-fundo-principal);
    padding: var(--espaco-sm) 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

header .div_container_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--espaco-md);
}

.nav_h1 {
    font-size: var(--fonte-tamanho-xl);
    font-weight: var(--fonte-peso-extrabold);
}

.nav_principal .ul_nav {
    list-style: none;
    display: flex;
}

.nav_principal .li_nav {
    margin-left: var(--espaco-md);
}

.nav_principal .a_nav {
    text-decoration: none;
    color: var(--cor-fundo-principal);
    font-weight: var(--fonte-peso-bold);
    transition: opacity 0.3s;
    font-size: var(--fonte-tamanho-lg);
}

.a_nav:hover {
    opacity: 0.8;
}

/* Esconde o botão em telas maiores */
.buttonToggle {
    display: none;
    background: none;
    border: none;
    color: var(--cor-fundo-principal);
    cursor: pointer;
}

.buttonToggle .material-symbols-outlined {
    font-size: var(--fonte-tamanho-xxl);
}

/* --- SEÇÃO HERO (PÁGINA INICIAL) --- */
.hero-section {
    position: relative;
    height: 80vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../assets/imgs/pexels-eliomar-reis-32249053-7031742.jpg');
    background-size: cover;
    background-position: center;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(42, 157, 143, 1) 0%, transparent 30%);
}

.hero-texto {
    position: relative;
    color: var(--cor-fundo-principal);
    text-align: center;
    padding: var(--espaco-md);
    z-index: 1;

}

.hero-texto h1 {
    font-size: 3.5rem;
    font-weight: var(--fonte-peso-extrabold);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.hero-texto p {
    font-size: var(--fonte-tamanho-lg);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
    margin-top: var(--espaco-xs);
}


/* --- CONTEÚDO PÁGINA INICIAL --- */
.historia {
    text-align: center;
    margin-bottom: var(--espaco-xl);
}


.historia h2 {
    color: var(--cor-primaria-verde);
    margin-bottom: var(--espaco-md);
    font-size: var(--fonte-tamanho-xl);
    font-weight: var(--fonte-peso-extrabold);
}

.pagina-titulo-section {
    background-color: var(--cor-fundo-secao);
    padding: var(--espaco-xl) 0;
}

.pagina-titulo-texto {
    color: var(--cor-primaria-verde);
    text-align: center;
}

.pagina-titulo-texto h1 {
    font-size: var(--fonte-tamanho-xxl);
    font-weight: var(--fonte-peso-extrabold);
}


/* Cards */
.valores_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--espaco-lg);
    margin-top: var(--espaco-xl);
}

.valores-card {
    background-color: var(--cor-fundo-card-cinza);
    padding: var(--espaco-lg);
    border-radius: var(--espaco-xs);
}

.valores-card h3 {
    color: var(--cor-primaria-verde);
    text-align: center;
    margin-bottom: var(--espaco-sm);
    font-size: var(--fonte-tamanho-lg);
    font-weight: var(--fonte-peso-bold );
}

.lista-valores {
    list-style: none;
    padding: 0;
}

.lista-valores li {
    margin-bottom: var(--espaco-sm);
}

.lista-valores li:last-child {
    margin-bottom: 0;
}


.projetos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--espaco-lg);
}

.card-project {
    background-color: var(--cor-fundo-principal);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card-project:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.card-imgs {
    height: 220px;
    width: 100%;
}

.card-imgs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-text {
    padding: var(--espaco-md);
    flex-grow: 1;
}

.card-text h3 {
    color: var(--cor-primaria-verde);
    margin-bottom: var(--espaco-sm);
    font-size: var(--fonte-tamanho-lg);
    font-weight: var(--fonte-peso-bold);
}


/* Formulario */
.form-cadastro {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--espaco-lg);
    background-color: var(--cor-fundo-card-cinza);
    border-radius: 10px;
}

.form-cadastro h2,
.form-cadastro p {
    text-align: center;
    margin-bottom: var(--espaco-md);
}

.form-cadastro label {
    display: block;
    margin-bottom: var(--espaco-xs);
    font-weight: var(--fonte-peso-bold);
}

.form-cadastro input,
.form-cadastro textarea {
    width: 100%;
    padding: var(--espaco-sm);
    margin-bottom: var(--espaco-md);
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Nunito', sans-serif;
    font-size: var(--fonte-tamanho-base);
}

.form-cadastro button {
    width: 100%;
    padding: var(--espaco-sm);
    background-color: var(--cor-acao-amarelo);
    color: var(--cor-texto-principal);
    border: none;
    border-radius: 5px;
    font-size: var(--fonte-tamanho-lg);
    font-weight: var(--fonte-peso-bold);
    cursor: pointer;
    transition: background-color 0.3s;
}

.form-cadastro button:hover {
    background-color: #f1bf54;
}


/* footer */
footer {
    background-color: var(--cor-primaria-verde);
    color: var(--cor-fundo-principal);
    text-align: center;
    padding: var(--espaco-md) 0;
    margin-top: var(--espaco-xl);
    font-size: var(--fonte-tamanho-sm);
    font-weight: var(--fonte-tamanho-sm);
}

/* mensages  */
.mensagem-erro {
    color: #c0392b;
    font-size: var(--fonte-tamanho-sm);
    margin-top: -15px;
    margin-bottom: var(--espaco-sm);
    display: block;
    height: 1rem;
}

.input-erro {
    border: 2px solid #c0392b !important;
    background-color: #fbe9e7;
}


/* resposividade para mobile */

@media (max-width: 768px) {

    .buttonToggle {
        display: block;
    }


    .nav_principal {
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: var(--cor-primaria-verde);

        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;
        z-index: 1000;
    }


    .nav_principal.ativo {
        max-height: 300px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }


    .nav_principal .ul_nav {
        flex-direction: column;
        align-items: center;
        padding: var(--espaco-md) 0;
        gap: var(--espaco-sm);
    }

    .nav_principal .li_nav {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }

    .nav_principal .a_nav {
        font-size: var(--fonte-tamanho-lg);
        padding: var(--espaco-sm) 0;
        display: block;
    }


    .hero-texto h1,
    .pagina-titulo-texto h1 {
        font-size: var(--fonte-tamanho-lg);
    }
}