/* --- ETAPA B: Variáveis da Marca --- */
:root {
    /* Paleta de Cores */
    --color-primary: #2D574E;   /* Verde Sólido (Árvore/Confiança) */
    --color-secondary: #1A1D23; /* Grafite (Raiz/Código) */
    --color-accent: #E87A00;    /* Âmbar (CTA/Conversão) */
    --color-background: #F7F7F7; /* Fundo Suave (Limpeza) */
    --color-text: #1A1D23;      /* Cor principal do texto */

    /* Tipografia */
    --font-headings: 'Merriweather', serif; /* Títulos (Credibilidade) */
    --font-body: 'Lato', sans-serif;      /* Corpo (Facilidade/Código Limpo) */

    /* Dimensões */
    --header-height: 70px; /* Altura do novo cabeçalho */
}

/* --- Estilos Globais (Reset Leve) --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
    
    /* ATUALIZAÇÃO: Impede que o Hero comece *atrás* do header fixo */
    padding-top: var(--header-height); 
}

/* --- Estilos Globais de Seção --- */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.section__title {
    font-family: var(--font-headings);
    font-size: 2.25rem; /* 36px */
    color: var(--color-primary); /* Verde (Confiança) */
    text-align: center;
    margin-bottom: 16px;
}

.section__subtitle {
    font-size: 1.125rem; /* 18px */
    color: var(--color-text);
    text-align: center;
    max-width: 700px; /* Limita a largura para melhor leitura */
    margin: 0 auto 40px auto;
}

/* Modificadores de cor para seções escuras */
.section__title.--color-light,
.section__subtitle.--color-light {
    color: var(--color-background); /* Branco Suave */
}

/* * ===================================================
 * NOVO: ESTILOS DO HEADER (CABEÇALHO)
 * ===================================================
 */
.header {
    width: 100%;
    height: var(--header-height);
    background-color: #FFFFFF; /* Fundo branco sólido */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Sombra sutil */
    
    /* Fixa no topo */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000; /* Garante que fique acima de todo o conteúdo */
}

.header__container {
    display: flex;
    justify-content: space-between; /* Logo (esquerda) e Nav (direita) */
    align-items: center;
    height: 100%;
}

.header__logo {
    font-family: var(--font-headings);
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    color: var(--color-primary); /* Verde da marca */
    text-decoration: none;
}

.header__nav ul {
    list-style: none; /* Remove bolinhas */
    display: flex;
    gap: 24px; /* Espaço entre os links */
}

.header__nav a {
    font-family: var(--font-body);
    font-size: 1rem; /* 16px */
    font-weight: 700;
    color: var(--color-text); /* Grafite */
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.header__nav a:hover {
    color: var(--color-primary); /* Verde no hover */
}


/* --- Estilos do Componente HERO --- */
.hero {
    width: 100%;
    /* ATUALIZAÇÃO: A altura mínima agora considera o padding do body */
    min-height: calc(80vh - var(--header-height)); 
    display: flex;
    align-items: center;
    padding: 40px 20px;
    background-color: #FFFFFF; /* Garante fundo branco para o Hero também */
}

.hero__container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap; 
    align-items: center;
    gap: 40px;
}

.hero__content {
    flex: 1; 
    min-width: 300px;
}

.hero__title {
    font-family: var(--font-headings);
    font-size: 2.5rem; /* 40px */
    color: var(--color-primary);
    line-height: 1.2;
    margin-bottom: 16px;
}

.hero__description {
    font-size: 1.125rem; /* 18px */
    margin-bottom: 32px;
}

.hero__cta {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    color: #FFFFFF;
    background-color: var(--color-accent); /* Cor de Destaque */
    padding: 14px 28px;
    border-radius: 6px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.hero__cta:hover {
    background-color: #c76900; 
    transform: translateY(-2px);
}

.hero__visual {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

/* --- 1. Estilos da Seção PROBLEMA --- */
.problem {
    background-color: #FFFFFF; 
    padding: 60px 0;
}

.problem__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
}

.problem__card {
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 24px;
    background-color: #FFFFFF;
}

.problem__card-title {
    font-family: var(--font-headings);
    font-size: 1.25rem;
    color: var(--color-primary);
    margin-bottom: 12px;
}

/* --- 2. Estilos da Seção SOLUÇÃO --- */
.solution {
    background-color: var(--color-secondary); 
    padding: 60px 0;
    color: var(--color-background); 
}

.solution__container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
}

.solution__visual {
    flex: 1;
    min-width: 250px;
    text-align: center;
}

.solution__visual img {
    max-width: 350px;
}

.solution__content {
    flex: 2; 
    min-width: 300px;
}

.solution .section__title,
.solution .section__subtitle {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

.solution__cta {
    display: inline-block;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-background); 
    border: 2px solid var(--color-background);
    padding: 12px 24px;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-top: 20px;
}

.solution__cta:hover {
    background-color: var(--color-background);
    color: var(--color-secondary); 
}

/* --- 3. Estilos da Seção SERVIÇOS --- */
.services {
    background-color: var(--color-background); 
    padding: 60px 0;
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service__card {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-top: 4px solid var(--color-primary); 
    /* Transição para o efeito "flutuar" */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service__card:hover {
    transform: translateY(-8px); /* Efeito "Flutuar" */
    box-shadow: 0 10px 20px rgba(0,0,0,0.10); 
}

.service__card-title {
    font-family: var(--font-headings);
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 16px;
}

/* --- 4. Estilos da Seção CTA FINAL (Formulário) --- */
.cta-final {
    background-color: #FFFFFF;
    padding: 60px 0;
}

.cta-final__container {
    max-width: 700px; 
}

.cta-final__form {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form__group {
    display: flex;
    flex-direction: column;
}

.form__label {
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 8px;
}

.form__input {
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 14px;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    background-color: #F9F9F9;
}

.form__input:focus {
    outline: 2px solid var(--color-primary);
    border-color: var(--color-primary);
}

.cta-final__button {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.125rem;
    color: #FFFFFF;
    background-color: var(--color-accent); 
    padding: 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    margin-top: 10px;
}

.cta-final__button:hover {
    background-color: #c76900;
    transform: translateY(-2px);
}

/* --- 5. Estilos do RODAPÉ --- */
.footer {
    background-color: var(--color-secondary); 
    color: var(--color-background);
    text-align: center;
    padding: 30px 0;
    margin-top: 40px;
}

/* --- 6. Estilos da MENSAGEM DE SUCESSO --- */
#form-success-message {
    display: none; 
    background-color: #EBF1F0; 
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    padding: 32px;
    margin-bottom: 30px;
    text-align: center;
}

#form-success-message h3 {
    font-family: var(--font-headings);
    color: var(--color-primary);
    font-size: 1.75rem; /* 28px */
    margin-bottom: 12px;
}

#form-success-message p {
    font-family: var(--font-body);
    font-size: 1.125rem; /* 18px */
    line-height: 1.6;
    color: var(--color-secondary); 
}

/* --- 7. Estilos de ANIMAÇÃO "FADE-IN" --- */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- 8. Media Queries (Ajustes para Mobile) --- */
@media (max-width: 768px) {
    /* Ajuste do Header */
    .header__logo {
        font-size: 1.25rem; /* { RaizCode } menor */
    }
    .header__nav ul {
        gap: 12px; /* Menos espaço entre links */
    }
    .header__nav a {
        font-size: 0.875rem; /* Links menores */
    }

    /* Ajustes Gerais */
    .section__title {
        font-size: 2rem; /* 32px */
    }

    .hero__container {
        flex-direction: column-reverse; 
    }
    .hero__content {
        text-align: center; 
    }
    .hero__title {
        font-size: 2.25rem; /* Ajuste para mobile */
    }

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

    .solution .section__title,
    .solution .section__subtitle {
        text-align: center; 
    }
}