/* ============================================= */
/* 0. CSS GLOBAL E COMPONENTES */
/* ============================================= */

/* Reset Básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif, Arial;
    line-height: 1.6;
    color: #1D1D1B; /* Preto (Cor de texto padrão) */
    background-color: #F3F3F5; 
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    color: #1D1D1B;
}

h2 {
    font-size: 1.8rem;
    font-weight: 700;
}

h3 {
    font-size: 1.5rem;
    font-weight: 700;
}

p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    font-weight: 400; /* Texto padrão mais fino */
}

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

/* Componentes Globais */
.growth-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 20px; /* Padding padrão */
}

.growth-secao {
    width: 100%;
}

.text-yellow {
    color: #f9b000;
}

strong {
    font-weight: 700;
}

/* ============================================= */
/* 1. SEÇÃO HERO (COM IMAGEM INJETADA) */
/* ============================================= */
.growth-secao-1-hero {
    background-color: #1D1D1B; /* Fundo Preto (Fallback) */
    color: #FFFFFF;
    text-align: center;
    height: 65vh;
    
    /* Ajustes para centralizar e posicionar */
    display: flex; /* Para centralizar o conteúdo */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente (devido ao text-align) */
    position: relative; /* Essencial */
    overflow: hidden; /* Garante que a imagem não vaze */
}

/* NOVA REGRA PARA A IMAGEM INJETADA */
.growth-hero-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Camada 1 (Fundo) */
}

/* NOVA REGRA PARA O OVERLAY */
.growth-hero-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Camada 2 (Acima da imagem) */
}

/* AJUSTE NO CONTAINER (para ficar na frente de tudo) */
.growth-secao-1-hero .growth-container {
    padding: 100px 20px;
    position: relative; /* Para respeitar o z-index */
    z-index: 3; /* Camada 3 (Conteúdo) */
    width: 100%; /* Garante que o container ocupe o espaço */
}

/* --- O RESTO DO CSS DA SEÇÃO 1 CONTINUA IGUAL --- */

.growth-secao-1-title {
    color: #f9b000; /* Amarelo */
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}
.growth-secao-1-subtitle {
    color: #FFFFFF;
    font-size: 1.1rem;
    max-width: 850px;
    margin: 0 auto;
    font-weight: 400;
    margin-bottom: 0;
}

/* ============================================= */
/* 2. SEÇÃO SERVIÇO (BRANCO) - CORRIGIDO */
/* ============================================= */
.growth-secao-2-servico {
    background-color: #FFFFFF;
    text-align: center; /* Centraliza tudo */
}
.growth-secao-2-servico .growth-container {
    max-width: 800px; 
}
.growth-secao-2-item {
    margin-bottom: 1rem;
}

/* Centraliza o H3 e o ícone */
.growth-secao-2-subheading {
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza o H3 + Ícone */
    gap: 15px;
    color: #f9b000; /* Amarelo */
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
}
.growth-secao-2-subheading img {
    width: 40px; /* Tamanho do ícone */
    height: 40px;
    background-color: #f0f0f0; 
    border-radius: 50%;
}

/* Centraliza o BLOCO da lista */
.growth-secao-2-list {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
    padding-bottom: 2rem; 
    border-bottom: 1px solid #E7E7E7;
    
    display: inline-block; /* Faz o bloco UL ser centralizado */
    text-align: center; /* ALINHA O TEXTO NO CENTRO */
}

/* Itens da Lista: Adiciona bullet points */
.growth-secao-2-list li {
    font-size: 1.1rem;
    color: #1D1D1B;
    font-weight: 400;
    margin-bottom: 1.25rem;
    
    list-style: disc; /* Adiciona o bullet point (•) */
    list-style-position: inside; /* Coloca o bullet DENTRO do fluxo de texto */
    text-align: center; /* Garante que o texto está centralizado */
    margin-left: 0;

    padding-bottom: 0;
    border-bottom: none; 
}

.growth-secao-2-list li:last-child {
    margin-bottom: 0;
}

.growth-secao-2-item:last-child .growth-secao-2-list {
     border-bottom: none;
     margin-bottom: 0;
     padding-bottom: 0;
}


/* ============================================= */
/* 3. SEÇÃO DIFERENCIAL (COM IMAGEM INJETADA) */
/* ============================================= */
.growth-secao-3-diferencial {
    background-color: #1D1D1B; /* Fundo Preto (Fallback) */
    color: #FFFFFF;
    
    /* Adicionado para posicionamento */
    position: relative;
    overflow: hidden;
}

/* NOVA REGRA PARA A IMAGEM INJETADA */
.growth-diferencial-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Camada 1 (Fundo) */
}

/* NOVA REGRA PARA O OVERLAY */
.growth-diferencial-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Camada 2 (Acima da imagem) */
}

/* AJUSTE NO CONTAINER (para ficar na frente de tudo) */
.growth-secao-3-diferencial .growth-container {
    max-width: 900px;
    
    /* Adicionado para posicionamento */
    position: relative; /* Para respeitar o z-index */
    z-index: 3; /* Camada 3 (Conteúdo) */
    width: 100%; /* Garante que o container ocupe o espaço */
}

/* --- O RESTO DO CSS DA SEÇÃO 3 CONTINUA IGUAL --- */

.growth-secao-3-text {
    color: #FFFFFF;
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 2.5rem;
    padding-right: 160px;
}
.growth-secao-3-list {
    list-style: none;
    padding: 0;
    margin-bottom: 2.5rem;
    padding-right: 160px;
}
.growth-secao-3-list li {
    color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    padding-left: 30px; /* Espaço para o bullet */
    position: relative;
}
.growth-secao-3-list li::before {
    content: '🔹'; /* Bullet de emoji/símbolo */
    position: absolute;
    left: 0;
    top: 0;
    color: #007bff; /* Cor azul do bullet (exemplo) */
    font-size: 1rem;
}
.growth-secao-3-conclusao {
    color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 0;
}

/* ============================================= */
/* 4. SEÇÃO RESULTADOS (AMARELO) */
/* ============================================= */
.growth-secao-4-resultados {
    background-color: #f9b000; /* Amarelo */
    color: #1D1D1B;
    text-align: center;
}
.growth-secao-4-resultados .growth-container {
    padding: 100px 20px;
}
.growth-secao-4-subtitle {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 2rem;
    color: #1D1D1B; /* Texto preto */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.growth-secao-4-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #FFFFFF; /* Texto branco */
    margin-bottom: 0;
    line-height: 1.3;
}

/* ============================================= */
/* 5. SEÇÃO CASE (CINZA) - CORRIGIDO */
/* ============================================= */
.growth-secao-5-case {
    background-color: #F3F3F5; /* Fundo Cinza */
}
.growth-secao-5-case .growth-container {
    max-width: 1080px;
}
/* Título "CASE" centralizado */
.growth-secao-5-title {
    text-align: center;
    color: #f9b000; /* Amarelo */
    font-size: 2.2rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 3rem;
}

/* O "Retângulo" branco com sombra */
.growth-secao-5-content {
    text-align: left;
    background-color: #FFFFFF; /* Fundo branco do box */
    padding: 90px; /* Espaçamento interno */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 20px rgba(0,0,0,0.07); /* Sombra */
}
.growth-secao-5-heading {
    color: #f9b000; /* Amarelo */
    font-size: 1.6rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f9b000; /* Linha amarela */
    display: inline-block; 
}
/* Garante que o primeiro heading não tenha margem em cima */
.growth-secao-5-content h3:first-of-type {
    margin-top: 0;
}

.growth-secao-5-content p {
    font-size: 1.1rem;
    color: #1D1D1B;
    margin-bottom: 1.5rem;
}
.growth-secao-5-content p:last-child {
    margin-bottom: 0;
}
/* Lista ordenada alinhada à esquerda */
.growth-secao-5-list-ordered {
    padding-left: 30px; /* Indentação da lista ordenada */
    margin: 1.5rem 0;
}
.growth-secao-5-list-ordered li {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}


/* ============================================= */
/* 6. SEÇÃO CTA (CINZA) */
/* ============================================= */
.growth-secao-6-cta {
    background-color: #F3F3F5; /* Cinza claro */
    text-align: center;
    padding-bottom: 180px;
}
.growth-secao-6-cta .growth-container {
    max-width: 700px;
}
.growth-secao-6-title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #f9b000; /* Amarelo */
}
.growth-secao-6-subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 2.5rem;
    color: #1D1D1B;
}

/* Estilos do formulário (reutilizados e adaptados) */
.growth-secao-6-form {
    max-width: 600px;
    margin: 0 auto;
}
.growth-secao-6-form-group {
    margin-bottom: 1rem;
}
.growth-secao-6-form-group input {
    width: 100%;
    padding: 14px;
    border-radius: 5px;
    border: none;
    /* Cor cinza claro do placeholder da imagem */
    background-color: #E7E7E7; 
    font-family: 'Poppins', sans-serif, Arial;
    font-size: 1rem;
    font-weight: 500;
    color: #1D1D1B;
}
.growth-secao-6-form-group input::placeholder {
    color: #A3A3A0;
    font-weight: 500;
}

/* Botão CTA (reutilizado) */
.growth-btn-yellow {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 5px;
    font-weight: 700;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-size: 1rem;
    background-color: #f9b000; /* Amarelo */
    color: #1D1D1B; /* Texto Preto */
    text-transform: uppercase;
    width: 100%;
    max-width: 350px; /* Largura do botão */
}
.growth-btn-yellow:hover {
    filter: brightness(0.9);
}

.ix-popup-growth {justify-self: center;}
#form-text {padding: 120px 20px 0 0;}


/* ============================================= */
/* RESPONSIVIDADE (BÁSICA) */
/* ============================================= */

@media (max-width: 768px) {
    .growth-container {
        padding: 50px 20px;
    }
    
    h2 {
        font-size: 1.6rem;
    }
    h3 {
        font-size: 1.4rem;
    }

    /* Seção 1 (Hero) */
    .growth-secao-1-title {
        font-size: 1.8rem;
    }
    .growth-secao-1-subtitle {
        font-size: 1rem;
    }

    /* Seção 2 (Serviço) */
    .growth-secao-2-subheading {
        font-size: 1.4rem;
    }
    .growth-secao-2-list {
        margin-left: 0; /* Remove indentação no mobile */
    }

    /* Seção 4 (Resultados) */
    .growth-secao-4-title {
        font-size: 2rem;
    }
    .growth-secao-4-subtitle {
        font-size: 1.1rem;
    }

    /* Seção 5 (Case) */
    .growth-secao-5-heading {
        font-size: 1.4rem;
        display: block; /* Garante que a borda vá até o fim */
    }
}