/* --- CONFIGURAÇÕES GERAIS E RESET --- */
/* Importando Inter com mais pesos para controle total */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
html {
    scroll-behavior: smooth;
    /* ... outras propriedades que já existiam no html ... */
}
:root {
    /* NOVAS CORES DO DEGRADÊ VIBRANTE */
    --blue-light: #43b2ff;    /* Azul mais vivo no início */
    --blue-brand: #1988fe;    /* Azul da marca no final */
    
    /* Variavel de Degradê Reutilizável */
    --gradient-primary: linear-gradient(90deg, var(--blue-light), var(--blue-brand));

    --text-dark: #111827;     /* Quase preto para títulos */
    --text-gray: #4B5563;     /* Cinza um pouco mais escuro para melhor leitura */
    --bg-light: #FFFFFF;
    --bg-soft: #F9FAFB;
    --border: #E5E7EB;
}

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

body {
    font-family: 'Plus Jakarta Sans', sans-serif; /* AQUI A MUDANÇA */
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased; /* Deixa a fonte mais nítida */
    -moz-osx-font-smoothing: grayscale;
    /* ADICIONE ISTO: Impede que as bolhas criem barra de rolagem horizontal */
    overflow-x: hidden;
}

a { text-decoration: none; transition: all 0.3s ease; }
ul { list-style: none; }
button { cursor: pointer; border: none; font-family: inherit; }

/* --- COMPONENTES GERAIS --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- BOTÕES MODERNOS (Igual referência) --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px; /* Botões mais "gordinhos" */
    border-radius: 8px;
    font-weight: 600; /* Fonte bem grossa no botão */
    font-size: 1rem;
    letter-spacing: -0.01em; /* Letras levemente mais juntas */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Animação mais suave */
}

/* Botão Principal com Novo Degradê */
.btn-primary {
    background-image: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(25, 136, 254, 0.1), 0 2px 4px -1px rgba(25, 136, 254, 0.06);
}
.btn-primary:hover {
    filter: brightness(1.05); /* Brilho sutil */
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(25, 136, 254, 0.2), 0 4px 6px -2px rgba(25, 136, 254, 0.1);
}

/* Botão Fantasma */
.btn-ghost {
    background-color: white;
    color: var(--text-dark);
    border: 2px solid #E5E7EB; /* Borda cinza clara */
    font-weight: 600;
}
.btn-ghost:hover {
    border-color: var(--text-dark); /* Borda fica escura no hover */
    background-color: #F9FAFB;
}

/* --- HEADER / NAVBAR (Efeito Glassmorphism) --- */
header {
    padding: 12px 0;
    position: fixed;
    width: 100%;
    top: 0;
    
    /* O SEGREDO DO VIDRO: */
    background: rgba(255, 255, 255, 0.75); /* Branco com 75% de opacidade */
    backdrop-filter: blur(12px);          /* O desfoque do que passa atrás */
    -webkit-backdrop-filter: blur(12px);  /* Para funcionar no Safari/iPhone */
    
    z-index: 1000;
    
    /* Borda sutil para parecer vidro lapidado */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03); /* Sombra muito leve */
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Colas isto aqui para garantir que o PC não mostra coisas do telemóvel */
.mobile-menu-btn {
    display: none;
}

.mobile-menu-container {
    display: none;
}

.logo-img {
    height: 40px;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 40px;
}

.nav-links a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-gray);
}
.nav-links a:hover { color: var(--blue-brand); }

/* --- HERO SECTION --- */
/* --- HERO SECTION & ANIMAÇÃO AURORA --- */

.hero {
    position: relative;
    /* MUDANÇA 1: z-index alto garante que a Hero (e a sombra) fique POR CIMA da próxima seção */
    z-index: 10; 
    
    padding-top: 130px;
    padding-bottom: 40px;
    text-align: center;
    background: #FFFFFF;
    
    /* MUDANÇA 2: visible permite que a sombra "vaze" para baixo sem ser cortada */
    overflow: visible; 
}

/* O Container das Bolhas (Fica atrás de tudo) */
.hero-aurora {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Camada 0 (Fundo) */
    pointer-events: none; /* Deixa clicar através dele */
}

/* Configuração Geral das Bolhas */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px); /* O SEGREDO: Muito desfoque para parecer fumaça */
    opacity: 0.6; /* Transparência */
}

/* BOLHA 1 (Azul Claro - Esquerda) */
.blob-1 {
    width: 500px;
    height: 500px;
    background: #43b2ff;
    top: -100px;
    left: -100px;
    animation: float-1 8s ease-in-out infinite alternate;
}

/* BOLHA 2 (Azul Escuro - Direita) */
.blob-2 {
    width: 400px;
    height: 400px;
    background: #1988fe;
    top: 20%;
    right: -50px;
    animation: float-2 10s ease-in-out infinite alternate;
}

/* IMPORTANTE: Traz o texto para frente das bolhas */
.hero .container {
    position: relative;
    z-index: 1; /* Camada 1 (Frente) */
}

/* --- BADGE APPLE GLASS MODERN (COM PAVIO REAL) --- */

/* 1. Definimos a variável animável para a rotação suave */
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    
    /* O SEGREDO DO VIDRO APPLE: */
    /* Fundo branco super transparente */
    background: rgba(255, 255, 255, 0.1);
    /* Desfoque intenso + Aumento de saturação (faz as cores do fundo vibrarem) */
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    
    /* Borda interna de luz para dar volume 3D sutil */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3),
                0 10px 30px rgba(0, 0, 0, 0.05);
                
    border: none;
    padding: 8px 20px;
    border-radius: 50px;
    
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--blue-brand);
    margin-bottom: 32px;
    z-index: 1;
    overflow: hidden;
    
    /* Transição suave de cores */
    transition: all 0.3s ease;
}

/* 2. O PAVIO (Borda Giratória) */
/* Usamos 'mask' para deixar o centro OCO, permitindo ver o vidro real */
.badge::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50px;
    padding: 1.5px; /* Grossura do pavio */
    
    /* O Gradiente do pavio */
    background: conic-gradient(
        from var(--gradient-angle),
        transparent 0%,
        transparent 80%,
        var(--blue-brand) 100%
    );
    
    /* MÁGICA: Corta o miolo do gradiente, deixando só a borda */
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
            
    /* Animação usando a variável moderna */
    animation: spin-glow 3s linear infinite;
    pointer-events: none;
}

/* Removemos o antigo fundo sólido */
.badge::after {
    display: none !important;
}

/* A Nova Animação de Rotação */
@keyframes spin-glow {
    0% { --gradient-angle: 0deg; }
    100% { --gradient-angle: 360deg; }
}

/* --- AJUSTE DARK MODE (Vidro Escuro Premium) --- */
[data-theme="dark"] .badge {
    /* Vidro preto translúcido */
    background: rgba(0, 0, 0, 0.3) !important;
    
    /* Reflexo de luz na borda mais sutil */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1),
                0 10px 40px rgba(0, 0, 0, 0.3) !important;
                
    color: #ffffff !important;
}

/* Garante que o ícone de brilho continue azul */
[data-theme="dark"] .badge i {
    color: var(--blue-brand) !important;
}

/* Título Principal (A Mágica da Fonte) */
.hero h1 {
    font-size: 4.5rem; /* Bem grande */
    font-weight: 700; 
    letter-spacing: -0.02em; /* Letras bem juntas para ficar compacto */
    line-height: 1.05;
    margin-bottom: 24px;
    color: var(--text-dark);
}

/* Texto com Degradê */
.text-highlight {
    background-image: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Subtítulo (Contraste de peso) */
.hero p {
    font-size: 1.25rem;
    color: var(--text-gray);
    font-weight: 400; /* Regular - Leve para contrastar com o título */
    line-height: 1.6; /* Bom espaçamento entre linhas */
    max-width: 700px;
    margin: 0 auto 48px auto;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 64px;
}

/* Prova Social com Glassmorphism + Sombra Perceptível */
.hero-social-proof {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--text-gray);
    font-weight: 500;
    
    /* Efeito de Vidro */
    background: rgba(244, 246, 249, 0.75); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Borda sutil */
    border: 1px solid rgba(255, 255, 255, 0.6);
    
    /* AQUI A MUDANÇA: Sombra mais marcada */
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    padding: 10px 24px;
    border-radius: 50px;
}

/* Isso garante que apenas o número fique preto e negrito */
.hero-social-proof b {
    color: var(--text-dark); /* Preto */
    font-weight: 700;        /* Negrito */
}

/* Opcional: Garante que o ícone fique alinhado visualmente se precisar */
.hero-social-proof i {
    margin-right: -4px; /* Aproxima um pouco o ícone do texto se achar que ficou longe */
}

.hero-social-proof i {
    color: var(--blue-brand); /* Ícone azul vibrante */
    font-size: 1.4rem;
}

/* Estilo do Texto "Veja como funciona:" */
.video-label {
    /* 1. Distância da prova social (Aumentei de 50px para 80px) */
    margin-top: 50px !important; 
    
    /* 2. Distância do vídeo (Diminuí de 16px para 8px) */
    margin-bottom: 8px; 
    
    /* Estilos de fonte (Mantidos) */
    font-size: 0.9rem;
    color: var(--text-gray);
    font-weight: 600;      
    letter-spacing: 0.02em; 
    text-transform: uppercase;
}

/* --- VÍDEO NA HERO --- */
.hero-video-container {
    /* Espaçamento */
    margin-top: 0px; /* Distância da prova social */
    max-width: 900px; /* Largura máxima para não ficar exagerado em telas grandes */
    margin-left: auto;
    margin-right: auto; /* Centraliza horizontalmente */
    
    /* Visual Premium */
    border-radius: 24px; /* Bordas bem arredondadas */
    overflow: hidden; /* Garante que o vídeo respeite as bordas */
    border: 8px solid rgba(255, 255, 255, 0.5); /* Moldura de vidro sutil */
    box-shadow: 0 25px 50px -12px rgba(25, 136, 254, 0.25); /* Sombra azulada suave e profunda */
    
    /* Mágica da Responsividade (Proporção 16:9 Widescreen) */
    aspect-ratio: 16 / 9;
    background: #E5E7EB; /* Cor de fundo enquanto o vídeo carrega */
}

.hero-video-container iframe {
    width: 100%;
    height: 100%;
    display: block; /* Remove espaços extras */
}

/* --- RESPONSIVIDADE BÁSICA --- */
/* --- RESPONSIVIDADE (Mobile Ajustado) --- */
@media (max-width: 768px) {
    /* 1. Esconde os links de texto do menu */
    .nav-links { display: none; } 
    
    /* 2. Ajustes do Título no Celular */
    .hero h1 { 
        font-size: 2.5rem; /* Diminui o textão */
        padding: 0 10px;
    }
    
    .hero p { 
        font-size: 1rem; 
        padding: 0 20px; 
    }

    /* 3. Ajustes dos Botões da HERO (Esses continuam grandes) */
    .hero-buttons { 
        flex-direction: column; 
        padding: 0 20px; 
    }
    .hero-buttons .btn { 
        width: 100%; /* Ocupa a tela toda só aqui */
    }

    /* 4. CORREÇÃO DO BOTÃO DO CABEÇALHO */
    header .btn {
        padding: 6px 14px !important; /* Mais fininho */
        font-size: 0.8rem !important; /* Letra menor */
        width: auto !important; /* Tira a largura de 100% */
    }
    
    /* Ajuste extra para a logo não ficar gigante no mobile */
    .logo-img {
        height: 32px !important; /* Logo um pouco menor no cel */
    }
    /* --- CORREÇÃO DAS BOLHAS NO MOBILE (Para salvar o contraste) --- */
    
    /* 1. Deixa as bolhas quase invisíveis para não brigar com o texto */
    .blob {
        opacity: 0.25 !important; /* Reduz de 0.6 para 0.25 */
        filter: blur(50px);       /* Diminui um pouco o borrão para performance */
    }

    /* 2. Diminui o tamanho das bolhas (eram 500px, agora 200px) */
    .blob-1 {
        width: 250px;
        height: 250px;
        top: -50px;   /* Sobe mais para sair do meio do texto */
        left: -50px;
    }

    .blob-2 {
        width: 200px;
        height: 200px;
        top: 10%;
        right: -50px; /* Joga mais para a borda */
    }
}

/* --- ANIMAÇÕES DE MOVIMENTO (Copie isso também) --- */

@keyframes float-1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(100px, 50px) scale(1.1); } /* Move pra direita e cresce */
}

@keyframes float-2 {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-80px, 40px) rotate(180deg); } /* Sobe, desce e gira */
}

/* --- SEÇÃO DO PROBLEMA (Design de Alerta) --- */

:root {
    /* Adicionando tons de vermelho para esta seção */
    --red-brand: #EF4444;      /* Vermelho forte */
    --red-soft: #FEF2F2;       /* Fundo vermelho bem clarinho */
    --red-border: #FEE2E2;     /* Borda vermelha suave */
}

.section-problem {
    padding-top: 40px;    /* MUDANÇA: Reduzi de 100px para 40px */
    padding-bottom: 50px; 
    background-color: #FFFFFF;
}

.problem-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 60px auto;
}

.problem-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 16px;
    line-height: 1.2;
}

/* Forçamos o "jeito errado" a não quebrar */
.text-danger {
    color: var(--red-brand);
    white-space: nowrap; /* MÁGICA: Impede que as palavras se separem */
}

.problem-header p {
    font-size: 1.125rem;
    color: var(--text-gray);
}

/* O Grid de Cards (2 colunas) */
.problem-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colunas iguais */
    gap: 32px; /* Espaço entre os cards */
}

/* O Card Individual */
.problem-card {
    display: flex; /* Ícone ao lado do texto */
    align-items: flex-start; /* Alinha no topo */
    gap: 20px;
    
    background: #FFFFFF;
    border: 1px solid var(--red-border); /* Borda sutil */
    border-radius: 16px;
    padding: 32px;
    
    /* Sombra suave avermelhada para dar profundidade */
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.05), 0 2px 4px -1px rgba(239, 68, 68, 0.03);
    transition: all 0.3s ease;
}

.problem-card:hover {
    transform: translateY(-5px); /* Sobe um pouquinho ao passar o mouse */
    box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.1), 0 4px 6px -2px rgba(239, 68, 68, 0.05);
    border-color: #FECACA;
}

/* O Quadrado do Ícone */
.card-icon-box {
    width: 56px;
    height: 56px;
    background-color: var(--red-soft);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Garante que o ícone não esmague */
    color: var(--red-brand);
    font-size: 1.75rem;
}

.problem-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.problem-content p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
}

/* Texto de Conclusão (Rodapé da seção) */
.problem-footer {
    text-align: center;
    margin-top: 60px;
    font-size: 1.1rem;
    color: var(--text-gray);
}
.problem-footer b {
    color: var(--text-dark);
}

/* Responsividade para Tablet/Celular */
@media (max-width: 768px) {
    .problem-grid {
        grid-template-columns: 1fr; /* Vira 1 coluna no celular */
        gap: 20px;
    }
    .problem-card {
        padding: 24px; /* Menos espaçamento interno */
    }
    .problem-header h2 {
        font-size: 2rem;
    }
}

/* --- SEÇÃO SOLUÇÃO (Mentoris) --- */

.section-solution {
    padding: 70px 0;
    background-color: #F8FAFC; /* Fundo levemente cinza/azulado para diferenciar */
    overflow: hidden; /* Garante que animações não vazem */
}

.solution-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Metade texto, Metade visual */
    align-items: center;
    gap: 60px;
}

/* LADO ESQUERDO: TEXTO */
.solution-badge {
    display: inline-block;
    background: #E0F2FE;
    color: var(--blue-brand);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 24px;
}

.solution-text h2 {
    font-size: 3rem;
    line-height: 1.1;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 24px;
}

.solution-text p {
    font-size: 1.1rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 40px;
}

/* Lista de Benefícios */
.solution-features {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.feature-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: #EFF6FF; /* Azul bem clarinho */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--blue-brand);
    flex-shrink: 0;
}

.feature-desc h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.feature-desc p {
    font-size: 0.95rem;
    margin-bottom: 0; /* Remove margem extra */
}

/* LADO DIREITO: VISUAL ANIMADO */
.solution-visual {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- CORREÇÃO DEFINITIVA DOS AROS (TARGET RINGS) --- */

.target-ring {
    position: absolute;
    /* Centralização Forçada */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    border-radius: 50%;
    /* MUDANÇA: Cor base mais forte para garantir visibilidade */
    border: 2px solid #BAE6FD; 
    pointer-events: none;
    box-sizing: border-box; /* Garante que a borda conte no tamanho */
}

/* Tamanhos e Cores Ajustadas */

/* Anel 1 (Interno - Grosso) */
.ring-1 { 
    width: 250px; 
    height: 250px; 
    z-index: 1; 
    border-width: 40px; 
    /* Azul claro visível, não transparente */
    border-color: #E0F2FE; 
}

/* Anel 2 (Médio - Linha Fina) */
.ring-2 { 
    width: 400px; 
    height: 400px; 
    z-index: 0; 
    /* Azul médio */
    border: 1px solid #7DD3FC; 
}

/* Anel 3 (Externo - Pontilhado) */
.ring-3 { 
    width: 550px; 
    height: 550px; 
    z-index: 0; 
    /* Azul tracejado visível */
    border: 2px dashed #BAE6FD; 
    opacity: 0.6; 
}

/* Animação de Pulso */
.ring-animated {
    animation: pulse-ring 3s ease-in-out infinite alternate;
}

/* --- ATUALIZAR KEYFRAMES (Cole isso no final do arquivo se não tiver) --- */
@keyframes pulse-ring {
    0% { 
        transform: translate(-50%, -50%) scale(0.9); 
        opacity: 0.5;
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.05); 
        opacity: 1;
    }
}

/* --- KEYFRAMES CORRIGIDOS (Mantendo o translate) --- */

/* Flutuar Cards (Sobe e desce) */
@keyframes float-up-down {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* Pulsar Aros (CORRIGIDO: Inclui o translate para não perder o centro) */
@keyframes pulse-opacity {
    0% { 
        opacity: 0.4; 
        transform: translate(-50%, -50%) scale(0.95); /* Começa menor */
    }
    100% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1.05); /* Cresce um pouco */
    }
}

/* Logo Central */
.center-logo-box {
    width: 120px;
    height: 120px;
    background: white;
    border-radius: 50%; /* Círculo perfeito */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px -10px rgba(25, 136, 254, 0.2);
    z-index: 5;
    position: relative;
}
.center-logo-box img {
    width: 60px;
    height: auto;
}

/* 1. O WRAPPER (Invisível - Cuida da Posição e do Mouse) */
.magnetic-wrap {
    position: absolute;
    z-index: 20;
    /* Essa transição resolve o movimento brusco. 
       0.2s é o tempo que ele demora para seguir o mouse (suave) */
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform; /* Otimiza performance */
}

/* Posicionamento dos Wrappers (Onde cada um fica) */
.pos-1 { top: 15%; right: 10%; }
.pos-2 { bottom: 20%; right: 0%; }
.pos-3 { bottom: 15%; left: 0%; }

/* 2. O CARD VISUAL (Visível - Cuida da Beleza e do Pulo) */
.float-card {
    background: white;
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 10px 25px -5px rgba(25, 136, 254, 0.15);
    
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    cursor: pointer;
    
    /* Transição apenas para a cor de fundo (clique) */
    transition: background-color 0.2s, color 0.2s, transform 0.1s;
}

/* Animações de Flutuar (Aplicadas no CARD, não no wrapper) */
/* Usamos classes diferentes para tempos diferentes, assim não flutuam juntos */
.anim-delay-1 { animation: float-card 4s ease-in-out infinite; }
.anim-delay-2 { animation: float-card 5s ease-in-out infinite reverse; }
.anim-delay-3 { animation: float-card 6s ease-in-out infinite 1s; }

.float-card i { color: var(--blue-brand); font-size: 1.1rem; }

/* EFEITO DE CLIQUE (Ativo) */
.float-card:active {
    background-color: var(--blue-brand) !important;
    color: white !important;
    transform: scale(0.95); /* Leve aperto */
}
.float-card:active i { color: white !important; }

/* RESPONSIVIDADE */
@media (max-width: 900px) {
    /* No celular, resetamos posições para não vazar da tela */
    .pos-1 { top: 0; right: 0; }
    .pos-2 { bottom: 0; right: 0; }
    .pos-3 { bottom: 0; left: 0; }
    
    .float-card { font-size: 0.75rem; padding: 8px 16px; }
}

/* Mobile */
@media (max-width: 900px) {
    .solution-grid {
        grid-template-columns: 1fr; /* Empilha */
        text-align: center;
    }
    .solution-features { text-align: left; } /* Mantém lista alinhada */
    .solution-visual { height: 400px; margin-top: -40px; }
    .ring-3 { display: none; } /* Remove aro muito grande no mobile */
    .ring-2 { width: 300px; height: 300px; }
    .float-card { font-size: 0.8rem; padding: 8px 16px; }
}

/* --- AS ANIMAÇÕES QUE FALTARAM --- */

/* 1. Animação de Flutuar (Para os Cards) */
@keyframes float-card {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); } /* Sobe 15 pixels */
    100% { transform: translateY(0px); }  /* Volta pro lugar */
}

/* 2. Animação de Pulsar (Para o Alvo Azul) - Caso tenha apagado sem querer */
@keyframes pulse-ring {
    0% { 
        transform: translate(-50%, -50%) scale(0.95); 
        opacity: 0.6;
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.05); 
        opacity: 1;
    }
}

/* --- SEÇÃO "COMO FUNCIONA" --- */
.section-how-it-works {
    padding: 100px 0;
    background-color: #FFFFFF;
    text-align: center;
    overflow: hidden; /* Evita vazamentos de layout */
}

.how-it-works-header {
    max-width: 700px;
    margin: 0 auto 80px auto;
}

.how-it-works-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 16px;
}

.how-it-works-header p {
    font-size: 1.1rem;
    color: var(--text-gray);
}

/* Grid dos 4 Passos */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colunas lado a lado */
    gap: 30px;
    position: relative; /* Necessário para a linha que passa atrás */
    padding-top: 30px; /* Espaço para os números que "saltam" pra fora */
}

/* A Linha Azul Conectora (Fica atrás dos cards) */
.steps-line {
    position: absolute;
    top: 55px; /* Ajustado para alinhar com o centro dos números */
    left: 50px; /* Começa depois do primeiro card */
    right: 50px; /* Termina antes do último */
    height: 2px;
    background-color: #E0F2FE; /* Azul bem clarinho */
    z-index: 0; /* Fica na camada de trás */
}

/* O Card Individual do Passo */
.step-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 40px 32px;
    text-align: left;
    position: relative;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05); /* Sombra sutil inicial */
    z-index: 1; /* Fica na frente da linha */
    
    /* A MÁGICA DA ANIMAÇÃO */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transição suave */
    cursor: default; /* Cursor normal */
}

/* --- MICROANIMAÇÃO MINIMALISTA NO HOVER --- */
.step-card:hover {
    transform: translateY(-12px); /* Sobe suavemente */
    border-color: #BAE6FD; /* A borda fica levemente azul */
    /* A sombra fica maior, mais azul e mais difusa */
    box-shadow: 0 20px 40px -10px rgba(25, 136, 254, 0.15); 
}

/* O Círculo do Número (01, 02...) */
.step-number {
    position: absolute;
    top: -25px; /* Fica para fora do card */
    left: 32px;
    width: 44px;
    height: 44px;
    background-color: var(--blue-brand);
    color: white;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    border: 4px solid white; /* Borda branca grossa para "cortar" a linha azul atrás dele */
}

/* A Caixinha do Ícone */
.step-icon-box {
    width: 56px;
    height: 56px;
    background-color: #EFF6FF; /* Fundo azul claro */
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue-brand); /* Ícone azul vibrante */
    font-size: 1.75rem;
    margin-bottom: 24px;
    margin-top: 10px; /* Espaço do número */
}

.step-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.step-card p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Responsividade (Celular) */
@media (max-width: 900px) {
    .steps-grid {
        grid-template-columns: 1fr; /* Vira uma coluna só */
        gap: 60px; /* Mais espaço entre os passos */
    }
    
    /* No celular, a linha vira vertical! */
    .steps-line {
        width: 2px;
        height: calc(100% - 100px); /* Altura total menos as pontas */
        top: 50px;
        left: 52px; /* Alinhada com os números */
        right: auto;
    }
    
    .step-number {
        left: 30px; /* Ajusta a posição do número */
    }
    /* --- CORREÇÃO DO ESPAÇO NO MOBILE (Como Funciona) --- */
    .section-how-it-works {
        /* Reduzi de 100px para 30px no topo. 
           Isso remove o "buraco" entre a solução e o como funciona. */
        padding-top: 30px; 
        padding-bottom: 60px;
    }

    .how-it-works-header {
        /* Diminui também o espaço entre o título e os cards */
        margin-bottom: 40px; 
    }
    /* Dentro do @media (max-width: 900px) ... */

    .section-features {
        /* No celular, removemos totalmente o topo, pois o espaço 
           da seção anterior já é suficiente. */
        padding-top: 0px; 
    }
}

/* --- ANIMAÇÃO ESPECIAL: CARD VENCEDOR (PASSO 04) --- */

/* Prepara a caixinha do ícone para os efeitos 3D e de borda */
.step-card-winner .step-icon-box {
    position: relative;
    z-index: 1;
    overflow: hidden; /* Corta o excesso do pavio */
    background: transparent; /* Remove o fundo sólido para o truque da borda */
    perspective: 1000px; /* Ativa o ambiente 3D para o troféu girar */
}

/* 1. O PAVIO (Borda que corre) */
.step-card-winner .step-icon-box::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 300%; height: 300%;
    
    /* Degradê cônico: Transparente na maior parte, ponta azul forte */
    background: conic-gradient(transparent 0deg, transparent 270deg, #1988fe 360deg);
    
    transform: translate(-50%, -50%);
    opacity: 0; /* Invisível até passar o mouse */
    z-index: -2;
}

/* 2. O FUNDO (A máscara interna para criar a borda fina) */
.step-card-winner .step-icon-box::after {
    content: '';
    position: absolute;
    inset: 2px; /* Espessura do pavio */
    background: #EFF6FF; /* Cor original do fundo */
    border-radius: 12px;
    z-index: -1;
}

/* --- O GATILHO (HOVER) --- */

/* Ação 1: Dispara o Pavio (Rápido e uma única vez) */
.step-card-winner:hover .step-icon-box::before {
    opacity: 1;
    /* 0.6s = Rápido | linear = Constante | forwards = Para no final */
    animation: pavio-flash 0.6s linear forwards; 
}

/* Ação 2: Gira o Troféu em 3D */
.step-card-winner:hover i {
    color: #1988fe;
    /* 0.8s = Suave | ease-in-out = Começa e termina devagar */
    animation: trophy-spin 0.8s ease-in-out forwards; 
}

/* --- KEYFRAMES (As Animações) --- */

@keyframes pavio-flash {
    0% { 
        /* Começa visível e na posição 0 */
        transform: translate(-50%, -50%) rotate(0deg); 
        opacity: 1; 
    }
    80% {
        /* Mantém visível durante quase toda a volta */
        opacity: 1; 
    }
    100% { 
        /* Termina a volta e DESAPARECE instantaneamente */
        transform: translate(-50%, -50%) rotate(360deg); 
        opacity: 0; 
    }
}

@keyframes trophy-spin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); } /* Gira 360 no próprio eixo */
}

/* --- SEÇÃO DE RECURSOS (Grid de Funcionalidades) --- */

.section-features {
    padding-top: 20px; 
    padding-bottom: 40px;
    background-color: #FFFFFF; /* Fundo branco limpo */
}

/* Cabeçalho igual aos outros para manter consistência */
.features-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}
.features-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 16px;
}
.features-header p {
    font-size: 1.1rem;
    color: var(--text-gray);
}

/* O GRID (3 Colunas) */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas iguais */
    gap: 24px; /* Espaçamento entre os cards */
}

/* ESTILO DO CARD PADRÃO (Branco) */
.feature-card {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px;
    text-align: left;
    transition: all 0.3s ease;
    position: relative; /* Para posicionar a etiqueta IA se tiver */
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
    border-color: #BAE6FD;
}

/* ESTILO DO CARD "IA" (Azul Destacado) */
.feature-card-ai {
    background: #F0F9FF; /* Fundo azul bem clarinho */
    border: 1px solid #BAE6FD; /* Borda azul mais visível */
}
.feature-card-ai:hover {
    box-shadow: 0 10px 30px -5px rgba(25, 136, 254, 0.15); /* Sombra azulada */
}

/* A Etiqueta "IA" (Bolinha azul no canto) */
.ai-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--blue-brand);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 12px;
    border: 2px solid white; /* Borda branca para separar do card */
    box-shadow: 0 4px 6px rgba(25, 136, 254, 0.2);
}

/* Ícone do Card */
.f-icon-box {
    width: 48px;
    height: 48px;
    background: #EFF6FF; /* Fundo azul padrão para ícones */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue-brand);
    font-size: 1.5rem;
    margin-bottom: 20px;
}

/* Para cards de IA, o fundo do ícone é um pouco mais escuro para contrastar */
.feature-card-ai .f-icon-box {
    background: #DBEAFE; 
}

.feature-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.feature-card p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.5;
}

/* Responsividade */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas no tablet */
    }
}

@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr; /* 1 coluna no celular */
    }
}

/* --- AJUSTE FINO: Centralizar o 10º Card de Recursos --- */
@media (min-width: 1025px) {
    /* Seleciona o 10º item e joga para a coluna do meio (2) */
    .features-grid .feature-card:nth-child(10) {
        grid-column: 2; 
    }
}

/* --- SEÇÃO APP SHOWCASE (Galeria Infinita) --- */

.section-app-showcase {
    background-color: #F4F6F9;
    padding-top: 20px;
    padding-bottom: 80px;
    overflow: hidden;
    position: relative;
}

/* O Container de Rolagem */
.app-gallery-track {
    display: flex;
    /* Ajuste no gap para ficar elegante */
    gap: 32px; 
    
    overflow-x: auto;
    /* O snap ajuda a travar a imagem certa no centro */
    scroll-snap-type: x mandatory; 
    
    /* Removemos o comportamento 'smooth' aqui para o JS controlar os "pulos" infinitos */
    scroll-behavior: auto; 
    
    padding: 20px 0;
    
    /* Esconde barra de rolagem */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.app-gallery-track::-webkit-scrollbar { display: none; }

/* As Imagens */
.app-image {
    border-radius: 20px;
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.1);
    scroll-snap-align: center;
    flex-shrink: 0;
    height: auto;
    display: block; /* Garante renderização correta */
}

/* --- BOTÕES DE NAVEGAÇÃO --- */
.gallery-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.nav-btn {
    background: white;
    border: 1px solid #E5E7EB;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--blue-brand);
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    z-index: 10;
}

.nav-btn:hover {
    background: var(--blue-brand);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(25, 136, 254, 0.2);
}

/* --- RESPONSIVIDADE --- */

/* DESKTOP */
@media (min-width: 901px) {
    .app-image {
        /* Largura controlada para desktop */
        width: 800px; 
    }
}

/* MOBILE (Ajuste para Imagens Grandes/Legíveis) */
@media (max-width: 900px) {
    
    /* ... (Mantenha os outros ajustes de Hero/Menu que já existiam aqui) ... */

    /* SEÇÃO APP SHOWCASE */
    .section-app-showcase {
        padding-bottom: 40px; 
    }

    .app-gallery-track {
        /* Gap menor para conectar visualmente */
        gap: 20px; 
        /* Remove padding lateral para aproveitar todo espaço */
        padding: 20px 0; 
        /* Remove o snap para a rolagem ser livre e fluida */
        scroll-snap-type: none; 
    }

    .app-image {
        /* O PULO DO GATO: */
        /* Definimos a ALTURA como 50% da tela do celular. */
        height: 50vh; 
        
        /* A largura será calculada automaticamente (vai ficar maior que a tela) */
        width: auto; 
        max-width: none; /* Destrava o limite de largura */
        
        /* Margem para a primeira imagem não colar na borda esquerda */
        margin-left: 20px;
        
        /* Sombra para destacar do fundo */
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }

    /* Esconde as setinhas de navegação no mobile */
    .gallery-nav { display: none; }
}

/* --- CORREÇÃO DE EMERGÊNCIA: CABEÇALHO MOBILE --- */
@media (max-width: 600px) {
    /* 1. Diminui a margem lateral para dar mais espaço ao conteúdo */
    header .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 10px !important; /* Aproxima a logo do botão */
    }

    /* 2. Força a Logo a ficar pequena */
    header img, .logo-img {
        height: 28px !important; /* Reduz de 40px para 28px */
        width: auto !important;
    }

    /* 3. Reduz o Botão "Começar Agora" */
    header .btn, header .btn-primary {
        padding: 8px 16px !important; /* Botão mais magrinho */
        font-size: 0.75rem !important; /* Letra menor (12px) */
        width: auto !important;
        white-space: nowrap !important; /* Impede que o texto quebre */
    }
}

/* --- LIGHTBOX (Zoom nas Imagens) --- */
/* Fundo escuro que aparece ao clicar */
.lightbox-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: none; /* Escondido por padrão */
    align-items: center;
    justify-content: center;
    cursor: zoom-out; /* Indica que clica pra fechar */
}

/* A imagem expandida */
.lightbox-overlay img {
    max-width: 95%;
    max-height: 95%;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    transform: scale(1);
    transition: transform 0.3s ease;
}

/* Cursor de lupa nas imagens da galeria */
.app-image {
    cursor: zoom-in;
}

/* --- SEÇÃO "PARA TODOS" (Marquee Infinito) --- */

.section-for-everyone {
    padding: 60px 0;
    background-color: #FFFFFF; /* Fundo branco limpo */
    overflow: hidden; /* Esconde o que sai da tela */
    border-bottom: 1px solid var(--border); /* Linha sutil para separar */
}

.for-everyone-header {
    text-align: center;
    margin-bottom: 40px;
}

.for-everyone-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* O Container que vai correr */
.marquee-container {
    display: flex;
    width: 100%;
    overflow: hidden;
    white-space: nowrap; /* Impede quebra de linha */
    position: relative;
}

/* O Trilho com os itens */
.marquee-track {
    display: flex;
    gap: 40px; /* Espaço entre os itens */
    animation: marquee-scroll 30s linear infinite; /* A mágica do movimento */
    width: max-content; /* Garante que o container tenha o tamanho dos itens */
    padding-left: 40px; /* Um respiro inicial */
}

/* O Item Individual (Pílula) */
.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #F3F4F6; /* Cinza bem clarinho */
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    color: var(--text-dark);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.marquee-item i {
    color: var(--blue-brand);
    font-size: 1.2rem;
}

/* Efeito ao passar o mouse (opcional: pausa para ler) */
.marquee-container:hover .marquee-track {
    animation-play-state: paused;
}

.marquee-item:hover {
    background: #E0F2FE; /* Fica azulzinho */
    color: var(--blue-brand);
    transform: translateY(-2px);
}

/* Sombras laterais para suavizar a entrada/saída (Fade) */
.marquee-container::before,
.marquee-container::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.marquee-container::before {
    left: 0;
    background: linear-gradient(to right, #FFFFFF, transparent);
}
.marquee-container::after {
    right: 0;
    background: linear-gradient(to left, #FFFFFF, transparent);
}

/* A Animação */
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Move metade (já que duplicamos o conteúdo) */
}

/* Mobile */
@media (max-width: 900px) {
    .section-for-everyone { padding: 40px 0; }
    .for-everyone-header h3 { font-size: 1rem; margin-bottom: 24px; }
    .marquee-item { padding: 10px 20px; font-size: 0.9rem; }
    .marquee-track { animation-duration: 20s; } /* Um pouco mais rápido no cel */
}

/* --- SEÇÃO PROVA SOCIAL (Quem usa, aprova) --- */

.section-testimonials {
    padding-top: 20px;
    padding-bottom: 100px;
    background-color: #FFFFFF; 
}

/* Cabeçalho da Seção */
.testimonials-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto;
}
.testimonials-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 16px;
}
.testimonials-header p {
    font-size: 1.1rem;
    color: var(--text-gray);
}

/* GRID 1: Estatísticas (Os números grandes) */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas */
    gap: 24px;
    margin-bottom: 40px; /* Espaço entre os números e os depoimentos */
}

.stat-card {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px;
    text-align: center;
    transition: transform 0.3s ease;
}
.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.05);
    border-color: #BAE6FD;
}

.stat-number {
    font-size: 3.5rem; /* Números bem grandes */
    font-weight: 800;
    color: var(--blue-brand);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -0.03em;
}

.stat-label {
    font-size: 1rem;
    color: var(--text-gray);
    font-weight: 500;
}

/* GRID 2: Depoimentos (Os reviews) */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.testimonial-card {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px;
    text-align: left;
    position: relative;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Para ficarem todos da mesma altura */
}
.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.05);
    border-color: #BAE6FD;
}

/* Estrelas */
.stars {
    color: var(--blue-brand); /* Azul da marca */
    font-size: 1.1rem;
    margin-bottom: 20px;
    display: flex;
    gap: 4px;
}

/* Ícone de Aspas (Decorativo no canto) */
.quote-icon {
    position: absolute;
    top: 32px;
    right: 32px;
    font-size: 2rem;
    color: #F3F4F6; /* Cinza bem clarinho */
}

.testimonial-text {
    font-size: 1rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 24px;
    /* font-style: italic; (Opcional: se quiser itálico, descomente) */
}

/* Perfil do Usuário */
.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto; /* Empurra para o fundo do card */
}

.avatar {
    width: 48px;
    height: 48px;
    background-color: var(--blue-brand);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.user-info h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
    margin-bottom: 2px;
}

.user-info span {
    font-size: 0.85rem;
    color: var(--text-gray);
}

/* RESPONSIVIDADE (Mobile) */
@media (max-width: 900px) {
    .section-testimonials {
        padding-top: 20px; /* Garante que fique perto no celular também */
        padding-bottom: 60px;
    }
    
    .stats-grid, .testimonials-grid {
        grid-template-columns: 1fr; /* Empilha tudo em 1 coluna */
        gap: 16px;
    }
    
    .stat-number { font-size: 2.5rem; } /* Número um pouco menor no cel */
    
    .testimonial-card {
        padding: 24px; /* Padding menor no cel */
    }
}

/* --- SEÇÃO DE PREÇOS (Fiel à Referência) --- */

.section-pricing {
    padding: 60px 0;
    background-color: #F8FAFC; /* Fundo cinza claro */
}

/* Cabeçalho */
.pricing-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}
.pricing-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 16px;
}
.pricing-header .text-highlight {
    color: var(--blue-brand); /* Azul sólido ao invés de gradiente para leitura */
}
.pricing-header p {
    font-size: 1.1rem;
    color: var(--text-gray);
    max-width: 600px;
    margin: 0 auto;
}

/* GRID */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: flex-start;
}

/* O CARD */
.pricing-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB; /* Borda cinza suave padrão */
    border-radius: 24px;
    padding: 32px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Estado inicial para animação */
    opacity: 0;
    transform: translateY(40px);
    display: flex;
    flex-direction: column;
}

/* Efeito Hover (Borda Azul + Sombra) */
.pricing-card:hover {
    border-color: var(--blue-brand);
    box-shadow: 0 20px 40px -10px rgba(25, 136, 254, 0.15);
    transform: translateY(-5px);
}

/* BADGE 50% OFF */
.discount-badge {
    display: inline-block;
    background-color: #E0F2FE; /* Azul bem clarinho */
    color: var(--blue-brand);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 50px;
    margin-bottom: 16px;
    width: fit-content;
}

/* Título do Plano */
.plan-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
}

/* Preço */
.pricing-details {
    margin-bottom: 24px;
}
.price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--text-dark);
}
.prefix-price {
    font-size: 0.95rem;
    color: var(--text-gray);
    font-weight: 500;
}
.main-price {
    font-size: 2.5rem; /* R$ grande */
    font-weight: 800;
    letter-spacing: -1px;
}
.period {
    font-size: 1rem;
    color: var(--text-gray);
    font-weight: 400;
}
.old-price {
    display: block;
    font-size: 0.9rem;
    color: #9CA3AF; /* Cinza claro */
    text-decoration: line-through;
    margin-top: 4px;
    font-weight: 500;
}

/* Botão */
.pricing-card .btn {
    width: 100%;
    border-radius: 50px; /* Botão bem redondo igual referência */
    padding: 14px;
    font-size: 1rem;
    margin-bottom: 32px;
}
/* Botão Outline (Padrão) */
.btn-outline-blue {
    background: transparent;
    border: 1px solid #E5E7EB; /* Borda cinza inicial */
    color: var(--blue-brand);
    font-weight: 700;
}
.btn-outline-blue:hover {
    border-color: var(--blue-brand);
    background: #F0F9FF;
}

/* Lista de Recursos */
.plan-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}
.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-gray);
    line-height: 1.5;
}
.plan-features i {
    color: var(--blue-brand); /* Check azul */
    font-size: 1rem;
    margin-top: 2px; /* Alinha com o texto */
    flex-shrink: 0;
}

/* Link "+5 recursos" */
.more-features {
    font-size: 0.9rem;
    color: var(--blue-brand);
    font-weight: 600;
    margin-top: auto; /* Empurra pro final */
    cursor: pointer;
}

/* --- CARD POPULAR (ANUAL) --- */
.card-popular {
    border: 2px solid #BAE6FD; /* Borda azul clara fixa */
    background: #F8FCFF; /* Fundo levemente azulado (opcional, pode ser branco) */
    z-index: 2; /* Fica acima se sobrepor */
}
.card-popular:hover {
    border-color: var(--blue-brand); /* Borda azul forte no hover */
}

/* Badge "Mais popular" */
.popular-badge {
    position: absolute;
    top: -14px;
    right: 32px; /* Alinhado à direita conforme imagem */
    background-color: var(--blue-brand);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 50px;
    box-shadow: 0 4px 6px -1px rgba(25, 136, 254, 0.3);
}
.popular-badge i {
    margin-right: 4px;
}

/* Botão Sólido (Melhor Escolha) */
.btn-solid-blue {
    background: var(--blue-brand);
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(25, 136, 254, 0.3);
}
.btn-solid-blue:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(25, 136, 254, 0.4);
}

/* --- ANIMAÇÃO DE ENTRADA --- */
@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fadeInUp 0.6s ease-out forwards; }
.pricing-card:nth-child(2).animate-in { animation-delay: 0.15s; }
.pricing-card:nth-child(3).animate-in { animation-delay: 0.3s; }

/* RESPONSIVIDADE */
@media (max-width: 1024px) {
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-card:nth-child(3) { grid-column: span 2; } 
}
@media (max-width: 768px) {
    .pricing-grid { grid-template-columns: 1fr; gap: 32px; }
    .pricing-card:nth-child(3) { grid-column: auto; }
}

/* --- CARD "TODOS OS PLANOS INCLUEM" --- */

.all-features-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB; /* Mesma borda suave dos outros */
    border-radius: 24px;
    padding: 48px;
    margin-top: 60px; /* Espaço para separar dos cards de preço */
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.all-features-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 32px;
}

/* Grid da Lista (3 Colunas) */
.features-list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas iguais */
    gap: 20px 40px; /* Gap vertical 20px, horizontal 40px */
    text-align: left;
}

.features-list-grid li {
    display: flex;
    align-items: center; /* Alinha ícone e texto */
    gap: 12px;
    font-size: 0.95rem;
    color: var(--text-gray);
    font-weight: 500;
}

.features-list-grid i {
    color: var(--blue-brand); /* Check azul */
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Responsividade */
@media (max-width: 900px) {
    .all-features-card {
        padding: 32px 24px;
        margin-top: 40px;
    }
    
    .features-list-grid {
        grid-template-columns: 1fr; /* 1 coluna no celular */
        gap: 16px;
    }
}

/* --- SEÇÃO COMPARATIVO (Mentoris vs Outros) --- */

.section-comparison {
    /* MUDANÇA: Reduzi de 100px para 20px no topo */
    padding-top: 20px;
    padding-bottom: 100px;
    background-color: #FFFFFF;
}

/* Reutilizando o header das seções anteriores */
.comparison-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

/* O Grid de Comparação (2 Colunas) */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% / 50% */
    gap: 40px;
    max-width: 1000px; /* Limita a largura para não ficar muito esticado */
    margin: 0 auto;
}

/* Estilo Base dos Cards */
.comparison-card {
    border-radius: 24px;
    padding: 40px;
    position: relative; /* Para o badge absoluto */
    display: flex;
    flex-direction: column;
}

/* CARD MENTORIS (Azul - Recomendado) */
.card-mentoris {
    background: #F0F9FF; /* Azul bem clarinho */
    border: 2px solid #BAE6FD; /* Borda azul bonita */
    box-shadow: 0 10px 30px -5px rgba(25, 136, 254, 0.1);
}

/* CARD OUTROS (Branco - Genérico) */
.card-others {
    background: #FFFFFF;
    border: 1px solid #E5E7EB; /* Borda cinza padrão */
}

/* O Badge "Recomendado" */
.rec-badge {
    position: absolute;
    top: -14px;
    left: 40px;
    background-color: var(--blue-brand);
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(25, 136, 254, 0.3);
}

/* Títulos dentro dos cards */
.comp-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.comp-subtitle {
    font-size: 1rem;
    color: var(--text-gray);
    margin-bottom: 32px;
    font-weight: 500;
}

/* A Lista de Itens */
.comp-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comp-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    color: var(--text-dark); /* Texto mais escuro para leitura */
    font-weight: 500;
}

/* Estilo dos Ícones (As bolinhas) */
.icon-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}

/* Ícone de Sucesso (Mentoris) */
.icon-check {
    background-color: #BAE6FD; /* Fundo azul claro */
    color: var(--blue-brand); /* Check azul forte */
}

/* Ícone de Erro (Outros) */
.icon-close {
    background-color: #FEE2E2; /* Fundo vermelho claro */
    color: #EF4444; /* X vermelho */
}

/* Item cinza na lista "ruim" para dar ideia de desbotado */
.card-others li {
    color: var(--text-gray);
}

/* Responsividade */
@media (max-width: 900px) {
    .comparison-grid {
        grid-template-columns: 1fr; /* Um embaixo do outro */
        gap: 30px;
    }
    .section-comparison {
        padding-top: 20px; 
        padding-bottom: 60px;
    }
    
    .comparison-card {
        padding: 30px 24px;
    }
    
    .rec-badge {
        left: 24px; /* Ajuste do badge no mobile */
    }
}

/* --- SEÇÃO BENEFÍCIOS (Sem Riscos) --- */

.section-benefits {
    padding: 20px 0 100px 0; /* Topo curto para colar na anterior, fundo longo */
    background-color: #FFFFFF;
}

/* Cabeçalho (Centralizado) */
.benefits-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.benefits-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-dark);
}

/* Grid de 3 Cards */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* O Card Individual */
.benefit-card {
    background: #FFFFFF;
    border: 1px solid var(--border); /* Borda cinza suave */
    border-radius: 24px;
    padding: 40px 32px;
    text-align: center;
    transition: all 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-5px);
    border-color: #BAE6FD; /* Fica azulzinho no hover */
    box-shadow: 0 10px 30px -5px rgba(25, 136, 254, 0.1);
}

/* O Ícone com fundo azul claro */
.benefit-icon-box {
    width: 64px;
    height: 64px;
    background-color: #F0F9FF; /* Azul bem claro */
    color: var(--blue-brand);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 24px auto; /* Centraliza e dá espaço pro título */
}

.benefit-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.benefit-card p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
}

/* Responsividade */
@media (max-width: 900px) {
    .benefits-grid {
        grid-template-columns: 1fr; /* 1 coluna no celular */
        gap: 20px;
    }
    
    .section-benefits {
        padding-bottom: 60px;
    }
}

/* --- SEÇÃO FINAL CTA (Chamada para Ação) --- */

.section-final-cta {
    padding-top: 20px;
    padding-bottom: 120px; /* Mantém o fundo grande para respirar */
    background-color: #FFFFFF;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* O "Glow" Azul no Fundo */
.section-final-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Tamanho do brilho */
    width: 800px;
    height: 600px;
    
    /* O Segredo: Gradiente radial que vai do azul clarinho para transparente */
    background: radial-gradient(circle, rgba(25, 136, 254, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
    
    pointer-events: none; /* Deixa clicar através dele */
    z-index: 0;
}

.cta-content {
    position: relative;
    z-index: 1; /* Fica acima do brilho */
    max-width: 700px;
    margin: 0 auto;
}

/* Badge "Comece sua jornada" */
.cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #F0F9FF;
    border: 1px solid #BAE6FD;
    color: var(--blue-brand);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 32px;
}

.section-final-cta h2 {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -1px;
}

.section-final-cta p {
    font-size: 1.15rem;
    color: var(--text-gray);
    margin-bottom: 40px;
    line-height: 1.6;
}

/* Texto destacado em azul no título */
.text-blue {
    color: var(--blue-brand);
}

/* Botão CTA Grande */
.btn-cta-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--blue-brand);
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 18px 48px; /* Bem grande */
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(25, 136, 254, 0.4); /* Sombra forte */
    transition: all 0.3s ease;
}

.btn-cta-large:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(25, 136, 254, 0.5);
    filter: brightness(1.1);
}

/* Texto pequeno abaixo do botão */
.cta-disclaimer {
    display: block;
    margin-top: 16px;
    font-size: 0.9rem;
    color: #9CA3AF; /* Cinza claro */
}

/* Responsividade */
@media (max-width: 900px) {
    .section-final-cta {
        /* No celular também reduzimos para colar */
        padding-top: 20px; 
        padding-bottom: 80px;
    }
    /* ... mantenha o resto das regras mobile (h2, btn) aqui ... */
    .section-final-cta h2 { font-size: 2.2rem; }
    .btn-cta-large { width: 100%; padding: 16px; }
}

/* --- RODAPÉ (Footer) --- */

.site-footer {
    padding: 80px 0 40px 0;
    background-color: #FFFFFF;
    border-top: 1px solid var(--border); /* Linha fina no topo para separar */
}

.footer-grid {
    display: grid;
    /* Coluna da marca maior (2fr) e duas colunas de links menores (1fr) */
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

/* Coluna da Marca (Logo + Texto) */
.footer-brand {
    max-width: 350px;
}

.footer-brand p {
    font-size: 1rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-top: 20px;
}

/* Colunas de Links */
.footer-column h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 24px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column li {
    margin-bottom: 12px;
}

.footer-column a {
    color: var(--text-gray);
    font-size: 0.95rem;
    transition: color 0.2s ease;
    text-decoration: none;
}

.footer-column a:hover {
    color: var(--blue-brand); /* Fica azul ao passar o mouse */
}

/* Parte Inferior (Copyright + Redes Sociais) */
.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright {
    font-size: 0.9rem;
    color: var(--text-gray);
}

.social-links {
    display: flex;
    gap: 20px;
}

.social-links a {
    color: var(--text-gray);
    font-size: 1.5rem;
    transition: all 0.2s ease;
}

.social-links a:hover {
    color: var(--blue-brand);
    transform: translateY(-2px); /* Leve pulinho */
}

/* RESPONSIVIDADE (Mobile) */
@media (max-width: 768px) {
    .site-footer {
        padding: 60px 0 30px 0;
    }

    .footer-grid {
        grid-template-columns: 1fr; /* Empilha tudo */
        gap: 40px;
    }

    .footer-bottom {
        flex-direction: column-reverse; /* Redes sociais em cima, copyright embaixo */
        gap: 24px;
        text-align: center;
    }
}

/* --- MENU MOBILE (Estilo Gaveta com Glassmorphism) --- */

/* 1. Botão Hambúrguer (Ícone no header) */
.mobile-menu-btn {
    display: none; /* Escondido no PC */
    font-size: 2rem;
    background: none;
    color: var(--text-dark);
    cursor: pointer;
    padding: 5px;
    z-index: 1100;
}

/* 2. O CONTAINER GERAL (O fundo que aplica o blur) */
.mobile-menu-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1050; /* Fica acima de tudo */
    
    /* Estado inicial: invisível e não clicável */
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    
    /* O EFEITO GLASSMORPHISM (Vidro Embaçado) */
    background: rgba(0, 0, 0, 0.2); /* Um leve escurecimento */
    backdrop-filter: blur(8px); /* O desfoque do fundo */
    -webkit-backdrop-filter: blur(8px); /* Para funcionar no Safari/iPhone */
}

/* Quando ativo, aparece o fundo borrado */
.mobile-menu-container.active {
    opacity: 1;
    pointer-events: all;
}

/* 3. A GAVETA LATERAL (A parte branca com os links) */
.mobile-menu-drawer {
    position: absolute;
    top: 0;
    right: 0; /* Alinhado à direita */
    height: 100%;
    width: 80%; /* Ocupa 80% da tela (deixa um canto pro blur aparecer) */
    max-width: 320px; /* Não fica largo demais em tablets */
    background: #FFFFFF; /* Fundo branco sólido para leitura */
    
    padding: 80px 30px 40px 30px; /* Espaço interno */
    display: flex;
    flex-direction: column;
    gap: 24px; /* Espaço entre os links */
    
    box-shadow: -10px 0 30px rgba(0,0,0,0.15); /* Sombra para destacar do fundo */
    
    /* Animação de deslizar */
    transform: translateX(100%); /* Começa escondido na direita */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Quando o container tá ativo, a gaveta desliza pra dentro */
.mobile-menu-container.active .mobile-menu-drawer {
    transform: translateX(0);
}

/* ESTILOS DOS LINKS DENTRO DA GAVETA */
.mobile-menu-drawer a:not(.btn) {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 1px solid var(--border); /* Linha separadora sutil */
}
.mobile-menu-drawer a:not(.btn):hover {
    color: var(--blue-brand);
}

/* Botão "Começar Agora" dentro do menu */
.mobile-menu-drawer .btn-primary {
    margin-top: auto; /* Empurra para o final da gaveta */
    width: 100%;
    padding: 16px;
    font-size: 1rem;
}

/* Botão de Fechar (X) */
.close-menu-btn {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 1.8rem;
    background: none;
    color: var(--text-gray);
    cursor: pointer;
    padding: 5px;
    color: #ffffff;
}

/* --- AJUSTES DE RESPONSIVIDADE DO HEADER (CORRIGIDO) --- */
@media (max-width: 900px) {
    /* Mostra o hambúrguer */
    .mobile-menu-btn {
        display: block;
    }

    /* 1. Esconde APENAS o botão de Desktop (que tem a classe btn-nav-desktop) */
    .btn-nav-desktop {
        display: none !important;
    }

    /* 2. Garante que o botão DENTRO do menu mobile apareça */
    .mobile-menu-drawer .btn-primary {
        display: flex !important;
    }

    /* Garante que o container do header fique alinhado */
    header .nav-container {
        justify-content: space-between;
        padding-left: 30px !important;
        padding-right: 30px !important; 
    }
}
/* Se não existir, cola isto no fim de tudo */
@media (max-width: 900px) {
    /* Esconde o que é do computador */
    .nav-desktop, .btn-nav-desktop {
        display: none !important;
    }

    /* Mostra o que é do telemóvel */
    .mobile-menu-btn {
        display: block;
    }

    .mobile-menu-container {
        display: block; 
    }
    
    .logo-img {
        height: 32px;
    }
}

/* --- ESTILO DO ÍCONE NO HERO (CORRIGIDO) --- */

.hero-brand-icon {
    display: block;       /* Transforma em bloco para permitir centralização */
    margin: 10px auto 30px auto; /* O 'auto' nas laterais centraliza perfeitamente */
    width: 60px;          /* Tamanho aumentado para ser visível */
    height: auto;
    
    /* Garante que não herde alinhamentos estranhos */
    text-align: center;
}

/* Ajuste para mobile */
@media (max-width: 900px) {
    .hero-brand-icon {
        width: 50px;      /* Um pouco menor no celular */
        margin: 0 auto 20px auto;
    }
}

/* --- BOTÃO COM BORDA DINÂMICA (CORRIGIDO E FINO) --- */

.btn-dynamic-border {
    position: relative;
    background: transparent !important;
    color: #0052cc !important;
    border: none !important;
    z-index: 1;
    overflow: hidden; 
    padding: 16px 32px;
    font-weight: 800;
    border-radius: 12px;
    display: flex !important; 
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: none !important;
    margin-top: 20px;
    width: 100%;
}

/* --- BOTÃO COM PAVIO (TRILHO FIXO VISUAL) --- */

.btn-dynamic-border {
    position: relative;
    background: transparent !important;
    color: #0052cc !important; /* Texto Azul */
    border: none !important;
    z-index: 1;
    overflow: hidden; 
    padding: 16px 32px;
    font-weight: 800;
    border-radius: 12px;
    display: flex !important; 
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: none !important;
    margin-top: 20px;
    width: 100%;
}

/* --- BOTÃO COM PAVIO E TRILHO FIXO (DEFINITIVO) --- */

.btn-dynamic-border {
    position: relative;
    
    /* 1. O TRILHO FIXO: A cor de fundo é o azul claro. 
       Como é a cor do container, ela NUNCA se mexe. */
    background-color: #acd9ff !important; 
    
    color: #0052cc !important; 
    border: none !important;
    z-index: 1;
    overflow: hidden; 
    padding: 16px 32px;
    font-weight: 800;
    border-radius: 12px;
    display: flex !important; 
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: none !important;
    margin-top: 20px;
    width: 100%;
}

/* --- BOTÃO COM PAVIO E TRILHO FIXO (DEFINITIVO) --- */

.btn-dynamic-border {
    position: relative;
    
    /* 1. O TRILHO FIXO: A cor de fundo é o azul claro. 
       Como é a cor do container, ela NUNCA se mexe. */
    background-color: #acd9ff !important; 
    
    color: #0052cc !important; 
    border: none !important;
    z-index: 1;
    overflow: hidden; 
    padding: 16px 32px;
    font-weight: 800;
    border-radius: 12px;
    display: flex !important; 
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: none !important;
    margin-top: 20px;
    width: 100%;
}

/* --- BOTÃO COM PAVIO (ALINHAMENTO CORRIGIDO) --- */

.btn-dynamic-border {
    position: relative;
    
    /* 1. TRILHO FIXO */
    background-color: #acd9ff !important; 
    
    color: #0052cc !important; 
    border: none !important;
    z-index: 1;
    overflow: hidden; 
    padding: 16px 32px;
    font-weight: 800;
    border-radius: 12px;
    display: flex !important; 
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: none !important;
    
    /* Garante que fique perto dos links e não no chão */
    margin-top: 20px !important; 
    width: 100%;
}

/* 2. O PAVIO (Quadrado Gigante Giratório) */
.btn-dynamic-border::before {
    content: '';
    position: absolute;
    
    /* MUDANÇA: Subi de 50% para 40% para corrigir a percepção de "baixo" */
    top: 40%; 
    left: 50%;
    
    width: 600px; 
    height: 600px; 
    
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 260deg, 
        #6ac2ff 300deg,    
        #1988fe 360deg     
    );
    
    animation: rotateBorder 3s linear infinite;
    
    transform: translate(-50%, -50%);
    z-index: -2; 
}

/* 3. A TAMPA (Miolo Branco) */
.btn-dynamic-border::after {
    content: '';
    position: absolute;
    inset: 2px; 
    background: #FFFFFF; 
    border-radius: 10px; 
    z-index: -1;
}

@keyframes rotateBorder {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 1. Redução do espaçamento entre linhas dos Títulos (Igual "Problema") */
.features-header h2,
.testimonials-header h2,
.pricing-header h2,
.benefits-header h2,
.comparison-header h2 {
    line-height: 1.2 !important; /* Deixa compacto e elegante */
}

/* 2. Container para os novos botões de CTA no final das seções */
.section-footer-cta {
    text-align: center;
    margin-top: 50px; /* Espaço para respirar do conteúdo acima */
    width: 100%;
}

/* Ajuste mobile para o botão não ficar colado */
@media (max-width: 900px) {
    .section-footer-cta {
        margin-top: 40px;
        padding: 0 20px;
    }
    .section-footer-cta .btn {
        width: 100%; /* Botão largura total no celular */
    }
}

/* --- LINK DE LOGIN NO RODAPÉ --- */

.footer-login-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    
    /* Estilo visual */
    color: var(--blue-brand); /* Azul da marca para destacar */
    font-weight: 700;
    font-size: 1rem;
    
    /* Espaçamento importante */
    margin-bottom: 24px; /* Empurra o título "Produto" para baixo */
}

.footer-login-link:hover {
    text-decoration: underline; /* Sublinhado clássico de link ao passar o mouse */
    transform: translateX(5px); /* Move levemente para a direita */
}

.footer-login-link i {
    font-size: 1.1rem; /* Tamanho da setinha */
}

/* --- DARK MODE (Camada de Pintura) --- */

/* 1. Definição das Cores Escuras */
[data-theme="dark"] {
    --text-dark: #F3F4F6;     /* Branco Suave */
    --text-gray: #9CA3AF;     /* Cinza Claro */
    --bg-light: #0f172a;      /* Azul Noturno Profundo (Fundo Principal) */
    --bg-soft: #1e293b;       /* Azul Noturno Médio (Fundo Secundário) */
    --border: #334155;        /* Bordas Escuras */
}

/* 2. Aplicação Global */
[data-theme="dark"] body {
    background-color: var(--bg-light);
    color: var(--text-dark);
}

/* 3. Forçar Cards e Seções a ficarem Escuros */
/* Listamos aqui tudo que tinha 'background: #FFFFFF' ou cores claras fixas */
[data-theme="dark"] .hero,
[data-theme="dark"] .section-features,
[data-theme="dark"] .section-how-it-works,
[data-theme="dark"] .section-benefits,
[data-theme="dark"] .section-comparison,
[data-theme="dark"] .section-final-cta,
[data-theme="dark"] .section-for-everyone,
[data-theme="dark"] .site-footer,
[data-theme="dark"] .problem-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .benefit-card,
[data-theme="dark"] .step-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .all-features-card,
[data-theme="dark"] .comparison-card.card-others,
[data-theme="dark"] .mobile-menu-drawer,
[data-theme="dark"] .section-problem {
    background-color: var(--bg-light) !important;
    border-color: var(--border) !important;
    color: var(--text-dark);
}

/* 4. Seções com fundo alternado (ex: Preços, Solução) agora usam o fundo 'Soft' */
[data-theme="dark"] .section-pricing,
[data-theme="dark"] .section-solution,
[data-theme="dark"] .section-app-showcase,
[data-theme="dark"] .feature-card-ai,
[data-theme="dark"] .card-mentoris {
    background-color: var(--bg-soft) !important;
}

/* 5. Ajustes Específicos de Elementos */
[data-theme="dark"] header {
    background: rgba(15, 23, 42, 0.85); /* Vidro Escuro */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .step-number {
    border-color: var(--bg-light); /* Borda do número combina com fundo */
}

[data-theme="dark"] .btn-ghost {
    background: transparent;
    border-color: var(--text-gray);
    color: var(--text-dark);
}
[data-theme="dark"] .btn-ghost:hover {
    background: rgba(255,255,255,0.1);
}

/* Ajuste dos ícones dentro de caixinhas (para não ficarem com fundo branco brilhante) */
[data-theme="dark"] .f-icon-box,
[data-theme="dark"] .step-icon-box,
[data-theme="dark"] .benefit-icon-box,
[data-theme="dark"] .card-icon-box,
[data-theme="dark"] .feature-icon {
    background-color: var(--bg-soft);
}

/* --- ESTILO DO SWITCH (BOTÃO) NO MENU --- */
.dark-mode-switch-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-top: 1px solid var(--border);
    margin-top: 10px;
    width: 100%;
    color: var(--text-dark);
    font-weight: 600;
}

/* O Switch (Toggle) */
.theme-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}
.theme-switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px; width: 18px;
    left: 4px; bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
/* Quando ativado (Dark) */
input:checked + .slider { background-color: var(--blue-brand); }
input:checked + .slider:before { transform: translateX(24px); }

/* --- CORREÇÕES FINAIS DARK MODE (Refinamento) --- */

/* 1. CORREÇÃO: Badges e Marquee (Efeito Glassmorphism Moderno) */
/* Alvo: Todas as caixinhas azuis claras (Solution Badge) e os itens deslizantes */
[data-theme="dark"] .solution-badge,
[data-theme="dark"] .marquee-content li {
    /* Fundo semi-transparente escuro */
    background: rgba(255, 255, 255, 0.05) !important;
    /* O Desfoque (Glassmorphism) */
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    /* Borda fina para definição */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    /* Cor do texto clara */
    color: var(--text-dark) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Sombra suave */
}

/* Ajuste específico para o pequeno badge "Novo" dentro do badge maior */
[data-theme="dark"] .badge-new {
    background: var(--blue-brand) !important; /* Mantém o azul forte */
    color: #ffffff !important;
    border: none !important;
}


/* 2. CORREÇÃO: Seção Depoimentos ("Quem usa, aprova") */
/* Fundo branco estava "estourando". Agora usa o fundo secundário escuro. */
[data-theme="dark"] .section-testimonials {
    background-color: var(--bg-soft) !important;
}
/* Os cards de depoimento usam o fundo principal para criar contraste */
[data-theme="dark"] .testimonial-card {
    background-color: var(--bg-light) !important;
    border-color: var(--border) !important;
}


/* 3. CORREÇÃO: Ícone de Troféu e outros ícones */
/* Garante que os ícones dentro das caixinhas fiquem no azul da marca */
[data-theme="dark"] .step-icon-box i,
[data-theme="dark"] .feature-icon i {
    color: var(--blue-brand) !important;
}


/* 4. CORREÇÃO: Animação na Seção "Conheça o Mentoris" */

/* O Círculo Azul Grande de fundo (estava muito claro) */
[data-theme="dark"] .blue-circle-bg {
    /* Gradiente mais escuro e sutil para não ofuscar */
    background: radial-gradient(circle, rgba(25, 136, 254, 0.3) 0%, rgba(15, 23, 42, 0) 70%) !important;
    opacity: 0.8;
}

/* As Bolhas Flutuantes (estavam ilegíveis) */
/* Aplicamos um Glassmorphism Escuro nelas */
[data-theme="dark"] .floating-card {
    /* Fundo escuro translúcido */
    background: rgba(30, 41, 59, 0.85) !important;
    /* Desfoque */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Borda sutil e texto claro */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--text-dark) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Garante que os ícones e textos dentro das bolhas fiquem legíveis */
[data-theme="dark"] .floating-card i {
    color: var(--blue-brand) !important; /* Ícone azul */
}
[data-theme="dark"] .floating-card span {
    color: var(--text-dark) !important; /* Texto branco */
    font-weight: 600;
}
/* --- CORREÇÕES FINAIS DARK MODE (Badges e Animações) --- */

/* 1. O BADGE "NOVO" (Borda Giratória) */
/* O segredo: a máscara interna (::after) era azul clara, agora vira escura */
[data-theme="dark"] .badge::after {
    background-color: var(--bg-light) !important; /* Cor do fundo do site */
}
/* O texto dentro do badge */
[data-theme="dark"] .badge {
    color: #ffffff !important;
}
/* Ícone de brilho dentro dele */
[data-theme="dark"] .badge i {
    color: var(--blue-brand) !important;
}


/* 2. O BADGE PROVA SOCIAL (+5.000 Aprovados) */
/* Aplicamos Glassmorphism Escuro nele também */
[data-theme="dark"] .hero-social-proof {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-gray) !important;
}
[data-theme="dark"] .hero-social-proof b {
    color: #ffffff !important; /* Número branco para destaque */
}


/* 3. SESSÃO "CONHEÇA O MENTORIS" (Visual Animado) */

/* Os Aros (Target Rings) - Estavam azul claro, agora ficam sutis */
[data-theme="dark"] .target-ring {
    border-color: rgba(25, 136, 254, 0.15) !important;
}
[data-theme="dark"] .ring-1 {
    /* O aro grosso interno precisa ser escuro, não branco/azul claro */
    border-color: rgba(255, 255, 255, 0.03) !important; 
}

/* O Logo Central (Fundo da bolinha) */
[data-theme="dark"] .center-logo-box {
    background-color: var(--bg-soft) !important;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5) !important;
}

/* Os Cards Flutuantes (IA, Simples...) */
[data-theme="dark"] .float-card {
    background: rgba(30, 41, 59, 0.9) !important; /* Fundo escuro sólido/transparente */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}
[data-theme="dark"] .float-card i {
    color: var(--blue-brand) !important;
}
/* Efeito de clique no card flutuante no escuro */
[data-theme="dark"] .float-card:active {
    background-color: var(--blue-brand) !important;
}


/* 4. O TROFÉU "CONQUISTE SUA APROVAÇÃO" */

/* O fundo do ícone (Caixinha) */
[data-theme="dark"] .step-icon-box {
    background-color: var(--bg-soft) !important;
}

/* IMPORTANTE: Correção da Animação do Troféu */
/* O card vencedor tem uma "máscara" (::after) que cria a borda.
   Ela estava fixada em #EFF6FF (claro). Precisamos mudar para escuro. */
[data-theme="dark"] .step-card-winner .step-icon-box::after {
    background-color: var(--bg-light) !important; /* Mesma cor do card */
}

/* O ícone do troféu em si */
[data-theme="dark"] .step-icon-box i {
    color: var(--blue-brand) !important;
}

/* --- CORREÇÃO FINAL: Badges Deslizantes (Marquee) --- */

/* Aplica o efeito de vidro nos itens do carrossel */
[data-theme="dark"] .marquee-item {
    /* Fundo escuro transparente */
    background: rgba(255, 255, 255, 0.05) !important;
    
    /* O efeito de desfoque */
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    
    /* Borda fina e texto branco */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Garante que o ícone dentro do badge fique azul */
[data-theme="dark"] .marquee-item i {
    color: var(--blue-brand) !important;
}

/* Efeito ao passar o mouse (brilho azul sutil) */
[data-theme="dark"] .marquee-item:hover {
    background: rgba(25, 136, 254, 0.15) !important; /* Azul bem transparente */
    border-color: var(--blue-brand) !important;
}
/* --- CORREÇÃO FINAL: Fades Laterais do Marquee (Degradê) --- */

/* Lado Esquerdo (Dark Mode) */
[data-theme="dark"] .marquee-container::before {
    /* Troca o Branco pela cor do fundo escuro (var(--bg-light)) */
    background: linear-gradient(to right, var(--bg-light), transparent) !important;
}

/* Lado Direito (Dark Mode) */
[data-theme="dark"] .marquee-container::after {
    /* Troca o Branco pela cor do fundo escuro (var(--bg-light)) */
    background: linear-gradient(to left, var(--bg-light), transparent) !important;
}
/* --- CORREÇÃO FINAL: Badge CTA ("Comece sua jornada hoje") --- */

[data-theme="dark"] .cta-badge {
    /* Fundo escuro semi-transparente */
    background: rgba(255, 255, 255, 0.05) !important;
    
    /* O efeito de vidro */
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    
    /* Borda fina e texto branco */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
/* --- CORREÇÃO FINAL: Badge "50% OFF" (Dark Mode) --- */
/* Estilo Neon Econômico: Verde para sinalizar preço baixo e oportunidade */

[data-theme="dark"] .discount-badge {
    /* Fundo Verde Esmeralda bem transparente e suave */
    background: rgba(16, 185, 129, 0.15) !important;
    
    /* Texto Verde Neon vibrante (chama atenção no escuro) */
    color: #34D399 !important;
    
    /* Borda fina e elegante */
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    
    /* O "Glow" (Brilho difuso) que faz parecer moderno */
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
    
    /* Ajustes de fonte */
    font-weight: 800;
    letter-spacing: 0.5px;
}
/* --- CORREÇÃO FINAL: Botão "Começar Agora" Menu Mobile (Dark Mode) --- */

/* 1. O Container/Trilho (Fundo base) */
[data-theme="dark"] .btn-dynamic-border {
    /* No lugar do azul claro #acd9ff, usamos um fundo quase transparente */
    /* Isso faz com que o "rastro" do pavio fique sutil */
    background-color: rgba(255, 255, 255, 0.05) !important; 
    
    /* Texto Branco para contrastar com o fundo escuro */
    color: #ffffff !important;
}

/* 2. A Máscara Interna (O miolo do botão) */
[data-theme="dark"] .btn-dynamic-border::after {
    /* O miolo passa a ser da cor do fundo do menu (Azul Noturno) */
    /* Isso cria o efeito de "recorte" perfeito */
    background-color: var(--bg-light) !important; 
}

/* 3. Ajuste opcional para o ícone ou texto brilhar mais */
[data-theme="dark"] .btn-dynamic-border:hover {
    text-shadow: 0 0 10px rgba(25, 136, 254, 0.5);
}