/* ==========================================================================
Variáveis Globais (Paleta Dark & Vibrante)
========================================================================== */
:root {
    --cor-fundo: #09090b; 
    --cor-fundo-secundaria: #18181b; 
    --cor-texto-principal: #e4e4e7; 
    --cor-texto-secundario: #a1a1aa; 
    --cor-titulo: #00f0ff; 
    --cor-subtitulo: #a277ff; 
    --cor-destaque: #ff0055; 
    --cor-destaque-hover: #cc0044;
    --cor-verde-neon: #00ffaa; 
    --cor-icone-check: #ff6600; /* Laranja vibrante para os ícones */
    --cor-fundo-garantia: #ccff00; /* Verde-limão/amarelo vibrante da referência */

    --cor-ciano-vitalicio: #2bc4a9; /* Cor do título Acesso Vitalício */
    --cor-amarelo-tag: #fbbc04; /* Cor da tag de parcelamento */
    --cor-fundo-cartao: #ffffff;

    --fonte-principal: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --largura-maxima-recipiente: 1200px;
    --espacamento-padrao: 1rem; 
    --espacamento-secao: 4rem; 
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--fonte-principal);
    background-color: var(--cor-fundo);
    color: var(--cor-texto-principal);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /*padding-bottom: 90px; */
}

/* ==========================================================================
Estilos de Texto Globais
========================================================================== */
h1, h2, h3, h4 {
    color: var(--cor-titulo);
    line-height: 1.2;
    margin-bottom: 1rem;
}

h2 {
    color: var(--cor-subtitulo);
}

/* ==========================================================================
Classes Utilitárias e Layout
========================================================================== */
.recipiente {
    width: 100%;
    max-width: var(--largura-maxima-recipiente);
    margin: 0 auto;
    padding: 0 var(--espacamento-padrao);
}

.centralizar-conteudo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.texto-oculto-acessibilidade {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pular-navegacao {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--cor-destaque);
    color: #ffffff;
    padding: 8px 16px;
    font-weight: bold;
    z-index: 100;
    transition: top 0.3s;
    text-decoration: none;
}

.pular-navegacao:focus {
    top: 0;
}

section {
    padding: var(--espacamento-secao) 0;
}

/* ==========================================================================
   Seção da VSL (Tela Cheia)
   ========================================================================== */
   #secao-vsl {
    background-color: var(--cor-fundo);
    /* Força a seção a ocupar 100% da altura da tela (Viewport Height) */
    min-height: 100vh; 
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza verticalmente */
    align-items: center; /* Centraliza horizontalmente */
    padding: 1rem 0; /* Garante que o conteúdo não cole nas bordas em telas minúsculas */
}

.recipiente-vsl-tela-cheia {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.titulo-destaque-vsl {
    text-align: center;
    font-size: 2.8rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 2.5rem;
    max-width: 900px;
    line-height: 1.2;
}

/* ==========================================================================
Seção de Oferta (Hero Section)
========================================================================== */
/* ==========================================================================
   Seção de Oferta (Com Vídeo de Fundo)
   ========================================================================== */
   .secao-video-fundo {
    position: relative;
    padding: 6rem 0;
    min-height: 100vh; /* Ocupa a tela inteira */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Garante que o vídeo não vaze */
}

/* Configuração do fundo e do vídeo */
.recipiente-video-fundo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.video-fundo {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Faz o vídeo preencher todo o espaço sem distorcer (faz o crop automático) */
    object-position: center;
}

.overlay-escuro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Degradê que escurece mais o centro para destacar a leitura */
    background: radial-gradient(circle, rgba(9,9,11,0.6) 0%, rgba(9,9,11,0.85) 100%);
}

/* Conteúdo que vai por cima do vídeo */
.conteudo-sobre-video {
    position: relative;
    z-index: 1; /* Fica acima do vídeo e do overlay */
}

.apresentacao-oferta-centralizada {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.selo-oferta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #000000;
    border: 2px solid var(--cor-verde-neon);
    color: #ffffff;
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 0 15px rgba(0, 255, 170, 0.2);
}

.destaque-selo {
    color: var(--cor-verde-neon);
}

.titulo-oferta {
    font-size: 3rem;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    /* Adicionada uma leve sombra no texto para ressaltar em cima do vídeo */
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
}

.texto-verde-neon {
    color: var(--cor-verde-neon);
}

.subtitulo-oferta {
    font-size: 1.2rem;
    color: var(--cor-texto-principal);
    margin-bottom: 2rem;
    max-width: 650px;
}

/* Prova Social (Centralizada) */
.prova-social-centralizada {
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza a prova social */
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.grupo-avatares {
    display: flex;
}

.avatar-aluno {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--cor-fundo);
    margin-left: -15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.avatar-aluno:first-child {
    margin-left: 0;
}

.texto-alunos {
    font-size: 1.1rem;
    color: #ffffff;
}

.botao-cta-principal {
    display: inline-block;
    background-color: var(--cor-verde-neon);
    color: #000000;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.1rem;
    padding: 1.2rem 3rem;
    border-radius: 8px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 255, 170, 0.4);
    width: 100%;
    text-align: center;
    max-width: 400px;
}

.botao-cta-principal:hover {
    background-color: #00cc88;
    transform: translateY(-2px);
    box-shadow: 0 5px 25px rgba(0, 255, 170, 0.6);
}

/* Acessibilidade: Pausar vídeo no CSS para quem tem sensibilidade a movimento */
@media (prefers-reduced-motion: reduce) {
    .video-fundo {
        display: none; /* Esconde o vídeo e mostra apenas a cor/poster para quem não pode ver movimento */
    }
}


/* ==========================================================================
Seção de Módulos do Curso
========================================================================== */
#secao-modulos {
    background-color: var(--cor-fundo-secundaria); 
    padding: 6rem 0;
}

.cabecalho-modulos {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem auto;
}

.cabecalho-modulos h2 {
    font-size: 2.8rem;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.subtitulo-modulos {
    font-size: 1.1rem;
    color: var(--cor-texto-principal);
    line-height: 1.6;
}

/* Estrutura de Grade para os Cartões */
.grade-modulos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

/* Estilo Individual de cada Cartão */
.cartao-modulo {
    position: relative; /* Fundamental para sobrepor o texto */
    border-radius: 16px;
    overflow: hidden; 
    border: 1px solid rgba(255, 255, 255, 0.05); 
    aspect-ratio: 16 / 9; /* Mantém a proporção horizontal exata */
    background-color: #111116;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.cartao-modulo:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    border-color: rgba(0, 255, 170, 0.3); 
}

/* Área da Mídia no Fundo */
.midia-cartao {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.midia-cartao img,
.midia-cartao video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center;
    display: block;
}

/* Degradê Escuro (Overlay) para legibilidade do texto */
.overlay-cartao {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75%; /* Ocupa apenas a parte de baixo */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
}

/* Área de Texto Sobreposta */
.conteudo-cartao {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem;
    z-index: 3; /* Fica acima de tudo */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.titulo-curso {
    font-size: 1.4rem; /* Tamanho reduzido para caber bem na imagem */
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.3rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Garante leitura caso falhe algo */
    line-height: 1.2;
}

.descricao-curso {
    font-size: 0.9rem; /* Tamanho reduzido e elegante */
    color: #e4e4e7;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limita a 2 linhas para não estourar o card */
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================================================
Seção de Garantia (Risco Zero)
========================================================================== */
#secao-garantia {
    background-color: var(--cor-fundo-garantia);
/* Um pouco menos de padding vertical para deixar a faixa mais estreita e elegante */
padding: 3rem 0; 
position: relative;
/* Adiciona uma sombra sutil para destacar a faixa do fundo escuro */
box-shadow: 0 10px 30px rgba(204, 255, 0, 0.1); 
}

.conteudo-garantia {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto;
}

/* Área do Selo */
.imagem-selo-garantia {
    flex-shrink: 0;
/* Faz o selo "vazar" ligeiramente para fora da faixa colorida para dar efeito de profundidade */
margin-top: -4rem; 
margin-bottom: -1rem;
}

.imagem-selo-garantia img {
    width: 200px; /* Ajuste este valor conforme o tamanho real da sua imagem do selo */
    height: auto;
/* Sombra projetada no selo para dar aspecto 3D */
filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.5));
}

/* Área de Texto */
.texto-garantia {
    color: #000000; /* Texto preto para forçar alto contraste com o fundo limão */
}

.texto-garantia h2 {
    color: #000000;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.texto-garantia p {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    max-width: 500px;
}


/* ==========================================================================
Seção de Depoimentos (Carrossel)
========================================================================== */
#secao-depoimentos {
    background-color: var(--cor-fundo);
    padding: 6rem 0;
    overflow: hidden; /* Evita que o carrossel quebre a largura da página */
}

.titulo-depoimentos {
    text-align: center;
    color: var(--cor-fundo-garantia); /* Reaproveitando o verde-limão vibrante */
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

/* Container que envolve trilha e botões */
.recipiente-carrossel {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Trilha rolável nativa (CSS Scroll Snap) */
.trilha-carrossel {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* Força a parada perfeita no item */
    scroll-behavior: smooth;
    padding-bottom: 1.5rem; /* Espaço para a barra de rolagem nativa, se aparecer */

/* Esconde a barra de rolagem em navegadores modernos para um visual mais limpo */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none;  /* IE and Edge */
}

.trilha-carrossel::-webkit-scrollbar {
    display: none; /* Chrome, Safari e Opera */
}

/* Item individual do carrossel (Print) */
.item-carrossel {
/* No desktop, mostra cerca de 4 itens (25% menos o gap) */
flex: 0 0 calc(25% - 1.125rem); 
scroll-snap-align: center; /* Centraliza o item quando o scroll para */
border-radius: 12px;
overflow: hidden;
background-color: #000; /* Fundo de fallback */
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
transition: transform 0.3s ease;
}

.item-carrossel:hover {
    transform: scale(1.02);
}

.item-carrossel img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Botões de Navegação (Setas) */
.botao-navegacao-carrossel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--cor-verde-neon);
    color: #000000;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 255, 170, 0.4);
    transition: all 0.2s ease;
}

.botao-navegacao-carrossel:hover {
    background-color: #00cc88;
    transform: translateY(-50%) scale(1.1);
}

.botao-navegacao-carrossel svg {
    width: 24px;
    height: 24px;
}

.btn-anterior {
    left: -20px;
}

.btn-proximo {
    right: -20px;
}

@keyframes scrollContinuoMobile {
    0% {
        transform: translateX(0);
    }
    100% {
        /* A matemática perfeita: Translada exatamente a metade da trilha (os itens originais).
           O -0.5rem compensa a metade do gap (1rem) que sobra na duplicação dos itens. */
           transform: translateX(calc(-50% - 0.5rem));
       }
   }



/* ==========================================================================
   Seção de Acesso Vitalício e Atualizações
   ========================================================================== */
#secao-vitalicio {
    background-color: var(--cor-fundo);
    padding: 6rem 0 8rem 0; /* Espaço extra embaixo para respirar antes do checkout */
}

.cabecalho-vitalicio {
    text-align: center;
    margin-bottom: 5rem;
}

#titulo-vitalicio {
    font-size: 2.8rem;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.subtitulo-vitalicio {
    font-size: 1.15rem;
    color: var(--cor-texto-principal);
    max-width: 700px;
    margin: 0 auto;
}

.layout-vitalicio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

/* Colunas Laterais */
.vitalicio-coluna {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Itens Individuais */
.item-beneficio-vitalicio {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
}

.icone-beneficio-vitalicio {
    background-color: rgba(0, 255, 170, 0.1);
    color: var(--cor-verde-neon);
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(0, 255, 170, 0.2);
    box-shadow: 0 4px 15px rgba(0, 255, 170, 0.15);
}

.icone-beneficio-vitalicio svg {
    width: 24px;
    height: 24px;
}

.textos-beneficio-vitalicio h4 {
    color: #ffffff;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.textos-beneficio-vitalicio p {
    color: var(--cor-texto-secundario);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Símbolo Infinito Central (Glow Neon) */
.vitalicio-centro {
    flex: 0 0 250px; /* Largura fixa para manter a simetria */
    display: flex;
    justify-content: center;
    align-items: center;
}

.icone-infinito-glow {
    width: 100%;
    max-width: 200px;
    color: var(--cor-verde-neon);
    /* Múltiplos drop-shadows criam o efeito realístico de um tubo de LED neon */
    filter: 
        drop-shadow(0 0 10px rgba(0, 255, 170, 0.8)) 
        drop-shadow(0 0 30px rgba(0, 255, 170, 0.6)) 
        drop-shadow(0 0 60px rgba(0, 255, 170, 0.4));
    animation: pulsarNeon 3s infinite alternate;
}

/* Animação de pulsação suave do Neon */
@keyframes pulsarNeon {
    0% {
        filter: 
            drop-shadow(0 0 10px rgba(0, 255, 170, 0.8)) 
            drop-shadow(0 0 30px rgba(0, 255, 170, 0.5));
    }
    100% {
        filter: 
            drop-shadow(0 0 15px rgba(0, 255, 170, 1)) 
            drop-shadow(0 0 40px rgba(0, 255, 170, 0.8)) 
            drop-shadow(0 0 70px rgba(0, 255, 170, 0.6));
    }
}



/* ==========================================================================
   Seção de Oferta Final / Checkout
   ========================================================================== */
   #secao-checkout {
    background-color: var(--cor-fundo-secundaria);
    padding: 6rem 0;
    position: relative;
}

.cabecalho-checkout {
    text-align: center;
    margin-bottom: 4rem;
}

.cabecalho-checkout h2 {
    font-size: 2.5rem;
    color: #ffffff;
    line-height: 1.3;
}

/* Estrutura do Cartão */
.cartao-preco {
    background-color: var(--cor-fundo-cartao);
    max-width: 480px;
    margin: 0 auto;
    border-radius: 16px;
    position: relative;
    padding: 3rem 2.5rem 2.5rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    color: #1a1a1a; /* Texto escuro para contrastar com o fundo branco */
}

/* Badge (Pílula superior preta) */
.badge-oferta {
    position: absolute;
    top: -16px; /* Sobe um pouco para não espremer o título */
    left: 50%;
    transform: translateX(-50%);
    background-color: #0a0a0c;
    color: #ffffff;
    font-weight: 900;
    font-size: 0.85rem;
    padding: 0.5rem 2.5rem;
    border-radius: 50px; /* Formato de pílula arredondada fica mais elegante */
    letter-spacing: 1px;
    white-space: nowrap; /* Impede que o texto quebre em duas linhas */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.conteudo-cartao-preco {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.titulo-vitalicio {
    color: var(--cor-ciano-vitalicio);
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Preço Original (Ancoragem com risco vermelho) */
.preco-ancoragem {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

.preco-ancoragem del {
    text-decoration-color: #ff0000;
    text-decoration-thickness: 2px;
}

/* Tag de Parcelamento (Amarela) */
.tag-parcelamento {
    background-color: var(--cor-amarelo-tag);
    color: #000000;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.3rem 1.2rem;
    border-radius: 50px;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

/* Preço Principal em Destaque */
.preco-destaque {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: #0a0a0c;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
}

.simbolo-moeda {
    font-size: 2rem;
    font-weight: 700;
}

.preco-avista {
    font-size: 1rem;
    color: #666666;
    margin-bottom: 2rem;
}

/* Botão do Cartão (Reaproveita o CTA principal e força 100% de largura) */
.cta-cartao {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1.5rem;
    box-shadow: 0 5px 20px rgba(0, 255, 170, 0.3);
}

/* Imagens de Segurança e Pagamento */
.selos-seguranca {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 2rem;
    width: 100%;
}

.imagem-pagamento, .imagem-garantia {
    max-width: 100%;
    height: auto;
    opacity: 0.6; /* Deixa ligeiramente transparente para não brigar com o botão */
}

/* Lista de Entregáveis no Cartão */
.lista-entregaveis {
    list-style: none;
    text-align: left;
    width: 100%;
    margin-top: 1rem;
}

.lista-entregaveis li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #1a1a1a;
    font-weight: 500;
    line-height: 1.4;
}

/* Ícone SVG Quadrado da Lista */
.icone-check-quadrado {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}


/* ==========================================================================
   Seção Sobre o Professor (Autoridade)
   ========================================================================== */
   #secao-professor {
    background-color: var(--cor-fundo);
    padding: 6rem 0;
}

.conteudo-professor {
    display: flex;
    align-items: center;
    gap: 4rem;
    max-width: 1000px;
    margin: 0 auto;
}

/* Área de Textos */
.texto-professor {
    flex: 1;
}

#titulo-professor {
    color: var(--cor-fundo-garantia); /* Reaproveita o verde-limão vibrante */
    font-size: 2.8rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.destaque-professor {
    font-size: 1.1rem;
    color: #ffffff;
    margin-bottom: 1.2rem;
}

.texto-professor p {
    font-size: 1rem;
    color: var(--cor-texto-secundario);
    margin-bottom: 1.2rem;
    line-height: 1.6;
}

/* Área da Imagem e Moldura */
.imagem-professor {
    flex: 1;
    display: flex;
    justify-content: center;
}

.moldura-imagem {
    background-color: #111116; /* Fundo escuro do card da imagem */
    padding: 0.5rem; /* Espaço que cria o efeito de borda grossa */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 450px;
}

.moldura-imagem img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px; /* Arredondamento interno ligeiramente menor que o externo */
    object-fit: cover;
}


/* ==========================================================================
   Seção de FAQ e Contato
   ========================================================================== */
   #secao-faq {
    background-color: var(--cor-fundo-secundaria);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.layout-faq {
    display: flex;
    gap: 4rem;
    align-items: flex-start;
}

/* Coluna da Esquerda (Textos e Botão WPP) */
.faq-contato {
    flex: 1;
    position: relative;
    max-width: 400px;
}

.marca-dagua-faq {
    position: absolute;
    top: -50px;
    left: -20px;
    font-size: 8rem;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05); /* Cria o efeito de contorno transparente */
    z-index: 0;
    pointer-events: none;
    letter-spacing: 5px;
}

#titulo-faq {
    font-size: 2.8rem;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.texto-apoio-faq {
    color: var(--cor-texto-principal);
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

/* Botão de WhatsApp Escuro */
.botao-whatsapp-faq {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #212126; /* Fundo cinza escuro da referência */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.2rem 1.5rem;
    border-radius: 12px;
    text-decoration: none;
    color: #ffffff;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.botao-whatsapp-faq:hover {
    background-color: #2a2a30;
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.icone-wpp svg {
    width: 35px;
    height: 35px;
    color: var(--cor-verde-neon); /* Ícone no tom verde vibrante */
}

.textos-wpp {
    display: flex;
    flex-direction: column;
}

.textos-wpp strong {
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.textos-wpp span {
    font-size: 0.85rem;
    color: var(--cor-texto-secundario);
}

/* Coluna da Direita (Acordeão) */
.faq-acordeao {
    flex: 1.5;
    width: 100%;
}

.item-faq {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.item-faq:last-child {
    border-bottom: none;
}

.pergunta-faq {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 1.5rem 0;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    font-family: var(--fonte-principal);
    transition: color 0.3s ease;
}

.numero-faq {
    color: var(--cor-verde-neon);
    margin-right: 0.5rem;
}

.pergunta-faq:hover {
    color: var(--cor-verde-neon);
}

/* Ícones de + e - */
.icone-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.icone-mais {
    display: block;
}

.icone-menos {
    display: none;
}

/* Resposta Oculta por Padrão */
.resposta-faq {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease; /* Animação suave de abertura */
}

.conteudo-resposta {
    padding-bottom: 1.5rem;
    color: var(--cor-texto-secundario);
    font-size: 1rem;
    line-height: 1.6;
}

/* Estado Ativo (Aberta) */
.item-faq.ativo .pergunta-faq {
    color: var(--cor-verde-neon);
}

.item-faq.ativo .icone-toggle {
    color: var(--cor-verde-neon);
}

.item-faq.ativo .icone-mais {
    display: none;
}

.item-faq.ativo .icone-menos {
    display: block;
}








/* ==========================================================================
   Seção: Não precisa de PC potente (Requisitos)
   ========================================================================== */
#secao-requisitos {
    background-color: var(--cor-fundo); 
    padding: 6rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cabecalho-requisitos {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem auto;
}

#titulo-requisitos {
    font-size: 2.8rem;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.subtitulo-requisitos {
    font-size: 1.15rem;
    color: var(--cor-texto-principal);
    line-height: 1.6;
}

/* Grade de 3 colunas */
.grade-requisitos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.item-requisito {
    background-color: var(--cor-fundo-secundaria);
    padding: 2.5rem 2rem;
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.item-requisito:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(0, 255, 170, 0.15);
}

.icone-requisito {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem auto;
    background-color: rgba(0, 255, 170, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-verde-neon);
    box-shadow: 0 0 15px rgba(0, 255, 170, 0.1);
}

.icone-requisito svg {
    width: 28px;
    height: 28px;
}

.item-requisito h3 {
    color: #ffffff;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.item-requisito p {
    color: var(--cor-texto-secundario);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ==========================================================================
   Responsividade (Mobile) - Requisitos
   ========================================================================== */
@media (max-width: 992px) {
    .grade-requisitos {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas no tablet */
    }
}

@media (max-width: 768px) {
    .cabecalho-requisitos h2 {
        font-size: 2.2rem;
    }

    .grade-requisitos {
        grid-template-columns: 1fr; /* 1 coluna no celular */
        gap: 1.5rem;
    }

    .item-requisito {
        padding: 2rem 1.5rem;
    }
}


















/* ==========================================================================
   Barra Fixa Inferior (Sticky CTA)
   ========================================================================== */
   #barra-fixa-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--cor-fundo-secundaria);
    /* Borda muito sutil em cima para separar do conteúdo */
    border-top: 1px solid rgba(255, 255, 255, 0.05); 
    /* Sombra projetada para cima */
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.4); 
    padding: 1rem 0;
    z-index: 999; /* Garante que ficará acima de tudo no site */
    
    /* Animação suave caso queira ocultar/mostrar com JS no futuro */
    transition: transform 0.3s ease; 
}

.botao-barra-fixa {
    margin: 0; /* Zera margens para não desalinhar */
    padding: 1rem 2rem;
    width: 100%;
    max-width: 500px; /* Limita a largura no desktop para não ficar um botão gigante e distorcido */
    font-size: 1.1rem;
    box-shadow: 0 0 15px rgba(0, 255, 170, 0.3); /* Brilho neon sutil */
}



/* ==========================================================================
Rodapé
========================================================================== */
#rodape-principal {
    text-align: center;
    padding: 2rem 0;
    background-color: var(--cor-fundo-secundaria);
    color: var(--cor-texto-secundario);
    font-size: 0.9rem;
}

/* ==========================================================================
Responsividade (Mobile)
========================================================================== */
@media (max-width: 992px) {
    .titulo-oferta {
        font-size: 1.8rem;
    }

    .subtitulo-oferta {
        font-size: 1.05rem;
    }
    
    .botao-cta-principal {
        max-width: 100%;
    }

/*Módulos*/
.cabecalho-modulos h2 {
        font-size: 2.2rem;
    }

    .grade-modulos {
        grid-template-columns: 1fr; /* Muda para 1 coluna no mobile */
        gap: 1.5rem;
    }

    .conteudo-cartao {
        padding: 1.2rem;
    }
    
    .titulo-curso {
        font-size: 1.25rem;
    }
    
    .descricao-curso {
        font-size: 0.85rem;
    }

/* Carrossel depoimentos */
.item-carrossel {
    flex: 0 0 calc(50% - 0.75rem); /* Mantém 2 itens em telas médias (Tablets) */
}


/* Acesso vitalício */

.layout-vitalicio {
        flex-direction: column;
    }

    /* Move o Infinito para o topo, logo abaixo do título no celular */
    .vitalicio-centro {
        order: -1; 
        flex: 0 0 auto;
        margin-bottom: 2rem;
    }
    
    .icone-infinito-glow {
        max-width: 150px; /* Diminui um pouco para não engolir a tela inteira */
    }

    #titulo-vitalicio {
        font-size: 2.2rem;
    }



/* FAQ */
.layout-faq {
    flex-direction: column;
    gap: 3rem;
}

.faq-contato {
    max-width: 100%;
    text-align: center;
}

.marca-dagua-faq {
    left: 50%;
    transform: translateX(-50%);
}

.botao-whatsapp-faq {
    justify-content: center;
}


}

@media (max-width: 768px) {

    /* Seção VSL */

    .titulo-destaque-vsl {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
        padding: 0 1rem; /* Dá um respiro lateral no celular */
    }

/* Seção de Garantia */

#secao-garantia {
    padding: 4rem 0 3rem 0; /* Aumenta o padding superior no mobile para o selo vazar corretamente */
}

.conteudo-garantia {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
}

.imagem-selo-garantia {
    margin-top: -6rem; /* Ajusta o vazamento do selo no topo no mobile */
    margin-bottom: 0;
}

.texto-garantia h2 {
    font-size: 2rem;
}

.texto-garantia p {
    font-size: 1rem;
    margin: 0 auto;
}

/* Seção de Depoimentos */

.titulo-depoimentos {
    font-size: 2rem;
}


.botao-navegacao-carrossel {
    display: none; /* Oculta as setas pois a rolagem no mobile será automática */
}

.recipiente-carrossel {
    overflow: hidden; /* Fundamental para o efeito contínuo não vazar a tela */
}

.trilha-carrossel {
    gap: 1rem;
    width: max-content; /* Permite que a trilha estique para caber os itens originais + clonados */
    overflow: visible; /* Desliga o scroll nativo */
    scroll-snap-type: none; /* Desliga a trava de scroll */

    animation: scrollContinuoMobile 30s linear infinite;/* Animação CSS nativa: 30s de duração, movimento constante (linear), loop infinito */
}


.trilha-carrossel:active {
    animation-play-state: paused; /* Se o usuário tocar e segurar na tela, a animação pausa para ele conseguir ler */
}

.item-carrossel {

width: 80vw; /* Deixamos a imagem com 80% da tela. Assim o usuário sempre vê um "pedaço" 
do próximo print entrando, o que incentiva ele a continuar olhando. */
flex: 0 0 auto;
}


/* Acesso vitalício */

.item-beneficio-vitalicio {
        /* Centraliza tudo e empilha o ícone em cima do texto no mobile */
        flex-direction: column;
        align-items: center;
        text-align: center;
        background-color: var(--cor-fundo-secundaria);
        padding: 2rem;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .icone-beneficio-vitalicio {
        margin-bottom: 0.5rem;
    }



/* Seção checkout */

#secao-checkout {
    padding: 4rem 0 0 0; 
}

#secao-checkout .recipiente {
    padding: 0; /* Remove as margens laterais apenas no mobile para ocupar 100% da tela */
}

.cabecalho-checkout {
    padding: 0 1rem; /* Mantém a margem do título */
}

.cabecalho-checkout h2 {
    font-size: 2rem;
}

.cartao-preco {
    max-width: 100%;
    width: 100%; 
    border-radius: 0;
    padding: 3.5rem 1.5rem 2.5rem;
    box-shadow: none; 
    margin: 0;
}

.preco-destaque {
    font-size: 3.5rem;
}


/* Seção Professor */

.conteudo-professor {
    /* Inverte a ordem: Imagem sobe para o topo, texto desce */
    flex-direction: column-reverse; 
    gap: 2.5rem;
}

.texto-professor {
    text-align: center;
}

#titulo-professor {
    font-size: 2.2rem;
}

.texto-professor p {
    /* Centraliza os parágrafos no mobile, idêntico à referência */
    text-align: center; 
}

.moldura-imagem {
    max-width: 100%;
}

/* Barra fixa pós VSL */

#barra-fixa-cta {
    padding: 0.8rem 0;
}

.botao-barra-fixa {
    font-size: 1rem;
    padding: 1rem;
}

body {
    /*padding-bottom: 80px;  Ajusta o respiro final no mobile */
}


}