/* css/style.css */

/* --- 1. Importação de Fontes e Reset Básico --- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@400;800&display=swap');

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

body {
    font-family: 'Manrope', sans-serif;
    /* Adicionei uma cor de fundo base para evitar "flashes" brancos entre as seções */
    background-color: #f0f0f0; 
}

/* --- 2. Estilos da Seção Principal (Hero) --- */
.hero-section {
    background-color: #72d3e0;
    color: #ffffff;
    padding: 40px 4%; 
    min-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    width: 100%;
    gap: 40px;
}

/* --- 3. Conteúdo da Esquerda (Textos e Botão) --- */
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    flex: 1;
    max-width: 600px;
}

/* AJUSTE 1: Estilos do h1 e h2 foram combinados aqui */
.hero-content h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem; /* Estilo da primeira linha (antigo h1) */
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    color: #000000;
    margin-bottom: 20px; /* Margem do antigo h2 foi movida para cá */
}

/* NOVO: Estilo para a segunda linha do título, que agora é um span */
.hero-content h1 span {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4rem; /* Estilo do antigo h2 */
    font-weight: 500;
    text-transform: uppercase;
    color: #000000;
}
/* A regra para .hero-content h2 foi removida pois não existe mais no HTML */

/* Agora esta regra é a mais específica e vai funcionar */
.hero-content h1 .titulo_verde {
    color: #2e5900;
}
.hours-highlight {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13rem;
    font-weight: 900;
    color: #66fdff;
    line-height: 0.8;
    margin-bottom: 35px;
    word-break: keep-all;
    white-space: nowrap;
}

.hero-content .description {
    font-family: 'Manrope', sans-serif;
    font-size: 1.95rem;
    padding-top: 2rem;
    font-weight: 700;
    line-height: 1.6; 
    text-align: justify;
    color: #2e5900;
    
}

.hero-content .details {
    font-family: 'Manrope', sans-serif;
    padding-top: 1rem;
    font-size: 1.2rem;
    margin-bottom: 30px;
    line-height: 1.5;
    color: #000000;
    text-align: justify;
    text-align-last: justify;

}

.cta-button {
    display: inline-block;
    background-color: #b4d69a; 
    color: #2e5900; 
    padding: 15px 40px;
    border-radius: 50px; 
    text-decoration: none;
    font-weight: 800;
    font-size: 1.1rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    font-family: 'Manrope', sans-serif;
}

.cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* --- 4. Conteúdo da Direita (Imagem e Logo) --- */
.hero-image-wrapper {
    flex: 1;
    display: flex;
    justify-content: flex-end; 
    align-items: center;
}

.image-frame {
    position: relative;
    border-radius: 25px;
    padding: 20px;
}
/* Este é o código CORRIGIDO */
.hero-image-wrapper .main-image {
    max-width: 100%;
    width: 100%; /* Garante que a imagem preencha o contêiner */
    height: 700px; /* MANTÉM a altura grande que você quer no desktop */
    display: block; /* Apenas corrigindo o 'flex' para 'block' */
    object-fit: cover; /* MUITO IMPORTANTE: Impede a distorção da imagem */
}


/* --- 5. Responsividade (Seção Hero) --- */
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column;
        text-align: left;
    }

    .hero-content {
        order: 2;
        max-width: 100%;
        align-items: center;
        text-align: center;       
    }

    .hero-content .description, .hero-content .details {
        text-align: center;
        padding-left: 15px;
        padding-right: 15px;
    }

    .hero-image-wrapper {
        order: 1;
        margin-bottom: 30px;
        width: 100%;
        max-width: 350px;
    }

    .hero-image-wrapper .main-image {
        height: auto; /* Isso faz a mágica acontecer no celular! */
    }
    .hours-highlight {
        font-size: clamp(8rem, 25vw, 10rem);
    }

    .hero-content .description,
    .hero-content .details {
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- 6. Seção de Vídeo --- */
/* (Nenhuma mudança necessária nesta seção) */
.video-section {
    background: linear-gradient(135deg, #8ECF7B, #3E783E);
    padding: 80px 4%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    max-width:1600px;
    margin: 60px auto;
}

.video-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    margin-left: 200px;
    flex-wrap: wrap;
    padding-right: 200px;
}

.video-placeholder {
    position: relative;
    width: 500px; /* Mantém a largura que você definiu */
    max-width: 100%; /* Garante que seja responsivo */
    background-color: #282A03;
    border-radius: 20px;
    flex-shrink: 0;
    overflow: hidden; /* Garante que o iframe respeite o border-radius */

    /* A Mágica da Proporção (aspect-ratio 16:9) */
    padding-top: 56.25%; /* (9 / 16 * 100) */
    height: 0; 
}

.video-placeholder iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.video-text {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: #ffffff;
}

.video-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 550px;
    text-align: right;

}

.video-content h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.8rem;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 0.9;
    margin-bottom: 2px;
    text-align: right;

}

.video-content .gray-title,
.video-content .gray-text {
    color: #e0e0e0;
}

.video-content .green-text {
    color: #b7ff9e;

}

.video-description {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    margin-left: 50px;
    font-size: 1.3rem;
    color: #C0FEB3;
    margin-top: 15px;
    margin-bottom: 40px;
    text-align: right;
    
}

.video-cta-button {
    display: inline-block;
    background-color: #b7ff9e;
    color: #1c1c1c;
    margin-left: 70px;
    padding: 17px 52px;
    border-radius: 50px;
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

.video-cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

@media (max-width: 992px) {
    .video-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
        margin: auto;
        padding-right: 0px;
    }
    .video-section{
        margin: auto;

    }
    .video-placeholder{
        margin: auto;
        width: 350px;
    }
    .video-content {
        align-items: center;
        text-align: center;
    }
    .video-content h2{
        text-align: center;
    }
    .video-description{
        margin-left: 0px;
    }
    .video-cta-button {
        margin-left: 0px;
    }
}


/* --- 7. Seção do Público Alvo (UNIFICADA) --- */
/* AJUSTE 2: As classes .audience-title-section e .audience-content-section foram removidas. */
/* Agora, estilizamos os containers internos que estão dentro da nova <section class="audience-section"> */

.audience-title-container {
    background-color: #3E783E; /* Cor de fundo verde escura */
    color: #ffffff;
    padding: 30px 4%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative; /* Para posicionar a seta */
}

/* O seletor foi ajustado para ser mais específico ao container */
.audience-title-container h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(6.5rem, 5vw, 4rem);
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.3;
    display: inline-block;
    background: linear-gradient(to right, #ffffff, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    padding: 0 10px;
    
}
.audience-title-container .letra-verde {
    /* Sua cor original, que está correta */
    color: #b7ff9e;

    /* Adicione estas 3 linhas para anular o efeito do h2 */
    -webkit-background-clip: initial; /* Reseta o corte do fundo */
    -webkit-text-fill-color: initial; /* Reseta a cor de preenchimento */
    background-clip: initial;         /* Versão padrão do 'background-clip' */
}

.scroll-down-icon {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-color: #B7FF94;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 10; /* Garante que a seta fique por cima de tudo */
}

.scroll-down-icon img {
    width: 25px;
    height: 25px;
}

.audience-content-container {
    background-color: #72d3e0;
    padding: 80px 4%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Para alinhar o h3 e o card-grid */
}

/* O seletor foi ajustado para ser mais específico ao container */
.audience-content-container h3 {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(to right, #558B2F, #81C784);
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    line-height: 1.2;
    text-align: center;
    display: inline-block; /* Faz o fundo se ajustar ao tamanho do texto + padding */
    padding: 15px 300px;  /* AUMENTEI o padding lateral para esticar o fundo */
    margin: 0 auto 60px auto;
}

.audience-content-container .highlight-green {
    color: #b7ff9e;
}

.card-grid {
    /* AJUSTE 3: Resetando o estilo de lista padrão do navegador */
    list-style: none; /* Remove as bolinhas da lista */
    padding: 0; /* Remove o espaçamento padrão da lista */

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.card {
    background-color: #72d3e0;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    min-height: 180px;
    border: 2px solid white; 
}

.card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-bottom: 10px;
}

.card-icon img {
    width: 48px;
    height: 60px;
}

.card p {
    font-family: 'Manrope', sans-serif;
    font-size: 1.1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-weight: 800;
    color: #000000;

    line-height: 1.5;
    text-align: center;
}

/* --- 8. Responsividade (Seção Público Alvo) --- */
@media (max-width: 992px) {
    .audience-title-container h2 {
        font-size: clamp(2rem, 8vw, 3rem);
    }
    .audience-content-container h3 {
        font-size: clamp(1.5rem, 5vw, 2rem);
        padding-left: 30px;
        padding-right: 30px;
    }
    .card-grid {
        grid-template-columns: 1fr;
    }
}

/* --- 9. Seção Por Que Comprar --- */
.why-buy-section {
    background-color: #558B2F; /* Verde escuro do seu layout */
    padding: 80px 4%;
    color: #ffffff;
}

.why-buy-container h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 60px;
}

.reasons-grid {
    display: grid;
    /* Cria colunas que se ajustam automaticamente ao tamanho da tela */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px; /* Espaçamento entre os cards */
    max-width: 1200px;
    margin: 0 auto;
}

.reason-card {
    background-color: #e1eaf0; /* Fundo cinza-azulado claro */
    color: #2c3e50; /* Cor do texto escura */
    border-top: 15px solid #B7FF9E; /* Borda verde clara no topo */
    border-radius: 15px;
    padding: 50px 25px 25px 25px; /* Mais padding no topo para o número */
    position: relative; /* Essencial para posicionar o número */
    
    /* A MÁGICA DO EFEITO SUAVE */
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* EFEITO AO PASSAR O MOUSE */
.reason-card:hover {
    transform: scale(1.20); /* Aumenta o tamanho do card em 5% */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Sombra opcional para dar profundidade */
    cursor: pointer;
}

.reason-number {
    position: absolute;
    top: -25px; /* Puxa o círculo para cima, metade para fora */
    left: 25px; /* Distância da esquerda */
    
    /* Estilo do Círculo */
    width: 50px;
    height: 50px;
    background-color: #B7FF9E; /* Verde claro */
    color: #558B2F; /* Texto do número em verde escuro */
    border-radius: 50%; /* Deixa o elemento redondo */
    
    /* Centraliza o número dentro do círculo */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Estilo da Fonte */
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
}

.reason-card p {
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 500;
}

/* --- 10. Seção de Prova Social (Depoimentos) --- */
.testimonial-section {
    background-color: #ffffff; /* Fundo branco */
    padding: 80px 4%;
    text-align: center;
    overflow: hidden; /* Importante para o carrossel não vazar */
}

.testimonial-section h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: #43A047; /* Verde escuro */
    text-transform: uppercase;
    margin-bottom: 60px;
}

/* Container do Carrossel */
.testimonial-swiper {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 50px; /* Espaço para as bolinhas de paginação */
}

.testimonial-card {
    background-color: #e3f2fd; /* Azul bem claro */
    border-radius: 20px;
    padding: 30px;
    height: 100%; /* Garante que todos os cards tenham a mesma altura */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

    /* Efeito de zoom suave */
    transition: transform 0.3s ease;
}

/* EFEITO AO PASSAR O MOUSE */
.testimonial-card:hover {
    transform: scale(1.08); /* Aumenta o tamanho em 8% */
    cursor: pointer;
    z-index: 10;
    position: relative;
}

.testimonial-text {
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #37474F;
    margin-bottom: 20px;
    font-style: italic;
}

.testimonial-author {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #43A047;
}

/* Estilo das bolinhas de paginação */
.swiper-pagination-bullet {
    background-color: #BDBDBD; /* Cor da bolinha inativa */
    width: 12px;
    height: 12px;
    opacity: 0.8;
}

.swiper-pagination-bullet-active {
    background-color: #43A047; /* Cor da bolinha ativa (verde) */
}

/* --- 11. Seção de Perguntas Frequentes (FAQ) --- */
.faq-section {
    background-color: #43A047; /* Mesmo verde da seção de depoimentos */
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 200px;
    color: #ffffff;
}

.faq-container {
    max-width: 1200px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 20px;
    margin-right: 100px;
    display: flex;
    align-items: center;
    gap: 300px;
}

/* Coluna da Esquerda (Título) */
.faq-header {
    flex: 1; /* Ocupa 1 parte do espaço */
    border-left: 3px solid #B7FF9E; /* Linha vertical verde clara */
    padding-left: 30px;
}

.faq-header h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 1;
    text-transform: uppercase;
    color: #B7FF9E;
}

.faq-header p {
    font-family: 'Manrope', sans-serif;
    font-size: 1.1rem;
    margin-top: 15px;
    margin-right: 20px;
    max-width: 400px;
}

/* Coluna da Direita (Perguntas) */
.faq-accordion {
    flex: 2; /* Ocupa 3 partes do espaço, sendo maior */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 15px;
}
.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    width: 100%;
    background-color: #B7FF9E; /* Verde claro */
    color: #43A047; /* Verde escuro */
    border: none;
    border-radius: 10px;
    padding: 20px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background-color: #d2ffc4; /* Um pouco mais claro no hover */
}

.faq-icon {
    font-size: 1.8rem;
    font-weight: 500;
    transition: transform 0.3s ease;
}

/* Estilo para quando o item estiver ativo (aberto) */
.faq-question.active .faq-icon {
    transform: rotate(45deg); /* Gira o '+' para formar um 'x' */
}

.faq-answer {
    max-height: 0; /* A MÁGICA: Começa com altura 0 */
    overflow: hidden; /* Esconde o conteúdo que transborda */
    transition: max-height 0.4s ease-out, padding 0.4s ease-out; /* Animação suave */
    font-family: 'Manrope', sans-serif;
    line-height: 1.7;
    padding: 0 15px;
}

.faq-answer p {
    padding: 20px 0; /* Espaçamento interno do texto da resposta */
}

/* Responsividade */
@media (max-width: 992px) {
        .faq-section {
        padding: 40px 20px; /* reduz padding lateral */
    }
    .faq-container {
        flex-direction: column;
        align-items: center;
        gap: 40px; /* reduz espaço entre colunas */
        margin: 0 auto;
    }

    .faq-header {
        text-align: center;
        margin-bottom: 20px;
    }
        .reason-card:hover {
        transform: none; /* desativa zoom em mobile */
    }

    .faq-header p {
        margin: 15px auto 0 auto;
    }
}

/* --- 12. Seção de Oferta e Preço --- */
.offer-section {
    background-color: #B7FF9E; /* Verde claro do seu layout */
    padding: 80px 4%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.offer-container {
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.offer-intro-text {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(2rem, 4vw, 2.8rem); /* AJUSTE: Texto maior e mais impactante */
    font-weight: 800;
    color: #43A047; /* Verde escuro */
    margin-bottom: 40px; /* AJUSTE: Menos margem */
    max-width: 700px;
    line-height: 1.3;
}

.darker-green-text {
    color: #19631d;

}
.pricing-card {
    background-color: #ffffff; /* Fundo branco do card */
    border-radius: 25px; /* AJUSTE: Um pouco mais arredondado */
    padding: 40px 30px; /* AJUSTE: Padding otimizado */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); /* AJUSTE: Sombra mais sutil */
    max-width: 380px; /* AJUSTE: Card um pouco mais estreito */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* NOVO: Estilo para o texto do logo */
.product-logo-placeholder {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    color: #a0a0a0;
    font-size: 0.9rem;
    letter-spacing: 1px;
    padding-bottom: 20px; /* Espaçamento para o divisor */
    width: 100%;
}

.product-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pricing-text-small {
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    color: #616161;
    margin-bottom: 5px;
}

.pricing-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 6rem; /* AJUSTE: Preço muito maior para destaque */
    font-weight: 500;
    color: #236e27; /* Verde escuro */
    line-height: 1;
    margin-bottom: 10px;
}

.pricing-installments {
    font-family: 'Manrope', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #616161;
}

.black-text {
    color: #000000;
}

.divider {
    width: 100%; /* AJUSTE: Ocupa toda a largura interna */
    height: 1px;
    background-color: #eeeeee; /* AJUSTE: Cor mais clara */
    margin: 25px 0;
}

.cta-buy-button {
    display: inline-block;
    background-color: #227426; /* Verde escuro para o botão de compra */
    color: #ffffff;
    padding: 18px 50px;
    border-radius: 12px; /* AJUSTE: Cantos menos arredondados */
    text-decoration: none;
    font-weight: 800;
    font-size: 1.3rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-family: 'Manrope', sans-serif;
    width: 90%; /* AJUSTE: Ocupa 90% da largura do card */
}

.cta-buy-button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.green-price{
    color:#19631d;
    width: 200;
    
}

.pricing-text-old{
    font-family: 'Manrope', sans-serif;
    font-size: 2rem;
    color: #616161;
    margin-bottom: 5px;
}

.green-price{
    text-decoration: line-through;
    text-decoration-color: #000000;
}

/* Responsividade para a seção de oferta */
@media (max-width: 768px) {
    .offer-section {
        padding: 60px 4%;
    }

    .offer-intro-text {
        font-size: clamp(1.3rem, 4vw, 1.8rem);
        margin-bottom: 40px;
    }

    .pricing-card {
        padding: 30px;
    }

    .pricing-value {
        font-size: 3.8rem;
    }

    .cta-buy-button {
        font-size: 1.2rem;
        padding: 15px 40px;
    }
}

html {
  scroll-behavior: smooth;
}