/* --- CONFIGURAÇÕES GERAIS --- */
:root {
    --azul-fundo: #051024;
    --vermelho: #E63946;
    --verde-zap: #25D366;
    --branco: #ffffff;
    --cinza: #f8f9fa;
}

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

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--cinza);
    color: #333;
}

.container {
    max-width: 1200px; /* Era 1100px, aumentei para caber mais coisa */
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   HEADER PREMIUM (Efeito Vidro + Brilho)
   ========================================= */
header {
    background: rgba(5, 16, 36, 0.6); /* Azul escuro transparente */
    backdrop-filter: blur(12px); /* Efeito vidro jateado */
    padding: 15px 0;
    position: fixed;
    width: 100%;
    top: 0;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Logo Branca */
.logo h2 {
    color: #ffffff;
    margin: 0;
}

/* Destaca o SOMA em vermelho */
.logo h2 span {
    color: var(--vermelho) !important;
}

.nav-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-items {
    display: inline-flex;
    list-style: none;
    gap: 30px;
    margin-right: 30px;
}

/* Links brancos e elegantes */
.menu-items a {
    text-decoration: none;
    color: #e0e0e0; 
    font-weight: 600;
    transition: 0.3s;
}

.menu-items a.active,
.menu-items a:hover {
    color: var(--vermelho);
    text-shadow: 0 0 10px rgba(230, 57, 70, 0.4);
}

/* O BOTÃO COM BRILHO NEON */
#btn-login-header {
    background: var(--vermelho);
    color: white;
    border: 2px solid var(--vermelho);
    box-shadow: 0 0 15px rgba(230, 57, 70, 0.5); /* Luz vermelha em volta */
    transition: all 0.3s ease;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
}

#btn-login-header:hover {
    background: transparent; 
    color: white; 
    box-shadow: 0 0 25px rgba(230, 57, 70, 0.9); /* Brilho mais forte */
    transform: scale(1.05);
}

/* --- HERO (ESTILO GODADDY - BACKGROUND VIDEO FULL SCREEN) --- */
.hero {
    margin-top: 70px;
    min-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* FUNDAMENTAL: Cria a base para o vídeo flutuar */
    overflow: hidden;
}

/* O Vídeo preenchendo o fundo todo - O TRUQUE ESTÁ AQUI */
.video-background {
    position: absolute; /* Sai do fluxo normal e flutua */
    top: 0;
    left: 0;
    width: 100%; /* Preenche 100% da largura */
    height: 100%; /* Preenche 100% da altura */
    z-index: 1; /* Fica no fundo de tudo */
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que o vídeo não amasse, cortando as bordas se necessário */
    filter: brightness(1.1); /* Dá um tiquinho mais de brilho */
}

/* A película escura pra dar leitura no texto */
.overlay-escuro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(2, 11, 26, 0.9) 0%, rgba(5, 16, 36, 0.7) 100%);
    z-index: 1; /* Mesma altura que o vídeo */
}

.hero-container {
    position: relative;
    z-index: 2; /* Fica na frente do vídeo e da película */
    text-align: center;
    width: 100%;
}

.hero-texto-central {
    max-width: 900px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 4rem; /* Fonte imponente */
    font-weight: 900;
    line-height: 1.1;
    margin: 25px 0;
    color: white;
    text-transform: uppercase;
    text-shadow: 0 4px 15px rgba(0,0,0,0.5); /* Sombra para ler bem */
}

/* Subtítulo modernizado com oTypewriter */
.subtitulo-animado {
    font-size: 1.5rem;
    color: #f1f1f1;
    margin-bottom: 40px;
    font-weight: 400;
    min-height: 80px; /* Evita que o layout pule */
}

/* Estilo do texto que digita */
.typewriter-text {
    font-weight: 800;
    color: var(--vermelho); /* Cor Vermelha na palavra animada */
    text-shadow: 0 0 10px rgba(230, 57, 70, 0.3);
}

.cursor {
    display: inline-block;
    width: 3px;
    color: var(--vermelho);
    animation: piscar 1s infinite;
}

@keyframes piscar {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/* Botões Modernizados */
.hero-btns-center {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-outline-clean {
    border: 1px solid rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(5px);
    color: white;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.btn-outline-clean:hover {
    background: white;
    color: var(--azul-fundo);
    transform: translateY(-2px);
}

.tag {
    background: rgba(255, 255, 255, 0.15); /* Fundo um pouco mais forte */
    color: #ffffff; /* Texto BRANCO puro para ler bem */
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Borda fina para destacar */
    display: inline-block; /* Garante que o tamanho fique correto */
}

.btn-destaque {
    background: var(--vermelho);
    color: white;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
}

/* HEADER DAS OUTRAS PÁGINAS (Menorzinha) */
.page-header {
    margin-top: 70px;
    background: var(--azul-fundo);
    color: white;
    padding: 60px 0;
    text-align: center;
}

/* INSTRUTORES (HOME) */
.instrutores {
    padding: 80px 0;
    text-align: center;
}

.instrutores-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.instrutor-card {
    width: 200px;
}

.foto-redonda {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    /* Faz ficar redondo */
    background-size: cover;
    background-position: center;
    margin: 0 auto 15px;
    border: 4px solid var(--vermelho);
}

/* --- CABEÇALHO DAS PÁGINAS (Reto e Imponente) --- */
.page-header {
    margin-top: 70px;
    /* O mesmo gradiente animado para manter a identidade */
    background: linear-gradient(-45deg, #051024, #1a3a6d, #051024, #d32f2f);
    background-size: 400% 400%;
    animation: gradientMovimento 15s ease infinite;
    
    color: white;
    padding: 100px 0 140px; /* Bastante espaço embaixo para os cards subirem */
    text-align: center;
    
    /* SEM ARREDONDAMENTO - Linha reta profissional */
    border-radius: 0; 
    
    /* Uma sombra leve para separar do fundo */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    position: relative;
    z-index: 10;
}

.page-header h1 {
    font-size: 3.5rem;
    font-weight: 900; /* Letra mais grossa */
    text-transform: uppercase; /* Caixa alta para impor respeito */
    margin-bottom: 10px;
    letter-spacing: 2px; /* Espaço entre letras */
}

/* =========================================
   PÁGINA DE CURSOS (REFACTOR PREMIUM V2 - ISOLAMENTO E 4 CARDS)
   Corrigindo espaçamento, 4 cards em linha e overlap do footer.
   ========================================= */

/* --- 1. CABEÇALHO PÁGINA CURSOS (ÁGUIA CENTRADA) --- */
.courses-header {
    background: radial-gradient(circle at center, #0c2045 0%, #051024 70%);
    /* ⚠️ ✅ ✅ AJUSTE DE ESPAÇO: Diminuímos o padding-bottom ✅ ✅ ⚠️ */
    padding: 160px 0 80px 0; 
    text-align: center;
    color: white;
    position: relative;
    z-index: 1;
}

.courses-header-content {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* ÁGUIA CENTRAL (O Brasão Dinâmico) */
.courses-header-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 5px;
}

.courses-header-logo::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    background: var(--vermelho);
    border-radius: 50%;
    z-index: 0;
    filter: blur(40px);
    animation: pulsarNeon 1.5s ease-in-out infinite alternate;
    opacity: 0.6;
}

.courses-header-logo .logo-aguia-video {
    width: 100%;
    max-width: 250px;
    position: relative;
    z-index: 1;
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(circle, black 50%, transparent 80%);
    mask-image: radial-gradient(circle, black 50%, transparent 80%);
}

/* TEXTOS CENTRAIS (Elegantes e Sóbrios) */
.courses-header-textos {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.courses-header-textos h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.courses-header-textos p {
    font-size: 1.1rem;
    color: #b0b8c4;
    max-width: 550px;
    margin-bottom: 10px;
    line-height: 1.6;
}

/* --- 2. A VITRINE DE CURSOS (SOLDAGEM CONTRA OVERLAP) --- */
.cursos-vitrine {
    background: #020b1a; /* Pure Dark - O breu total elegante */
    padding-bottom: 120px;
    
    /* ⚠️ ⚠️ ⚠️ ✅ ✅ SOLDAGEM MÁGICA: ZERAMOS A MARGEM NEGATIVA ✅ ✅ ⚠️ ⚠️ ⚠️ */
    /* Isso impede que os cards atropelem a seção de baixo ou o topo */
    margin-top: 0 !important; 
    
    /* ✅ Adicionamos padding-top para criar o espaço que a linha viva precisa ✅ */
    padding-top: 80px; 
    
    position: relative;
    z-index: 10;
}

/* 🛑 ✅ ✅ ✅ GRID DE 4 CARDS EM LINHA ✅ ✅ ✅ 🛑 */
.cards-grid {
    display: grid;
    /* ✅ ✅ ✅ O SEGREDO: 4 COLUNAS IGUAIS (Desktop) ✅ ✅ ✅ */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px; /* ✅ ✅ Diminuímos o gap ligeiramente para os 4 caberem ✅ ✅ */
    justify-content: center;
    position: relative;
    z-index: 20; 
}

/* --- 3. REFATORAÇÃO DOS CARDS (MENORES, MAIS CHIQUES E REATIVOS) --- */
.card-curso-full {
    background: rgba(255, 255, 255, 0.03); /* Glassmorphism Premium */
    
    /* 🛑 ✅ ✅ ✅ MENOR LARGURA (Pra caber 4 em linha) ✅ ✅ ✅ 🛑 */
    width: 260px; /* ✅ Diminuímos de 290px para 260px ✅ */
    
    min-height: 520px; /* Equilibrado */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease;
    border: 1px solid rgba(255,255,255,0.05); /* Borda cinza super fininha */
    display: flex;
    flex-direction: column;
}

/* Efeito Neon Reativo ao passar o mouse */
.card-curso-full:hover {
    transform: translateY(-12px) scale(1.02); 
    border-color: var(--vermelho); /* Borda acende em vermelho */
    box-shadow: 0 15px 40px rgba(230, 57, 70, 0.25); /* Luz vermelha de fundo glow */
    background: rgba(255, 255, 255, 0.05);
}

/* Container da Foto (O segredo do object-fit) */
.img-curso {
    height: 180px; /* Foto menorzinha pra equilibrar o card */
    position: relative;
    overflow: hidden;
    background-color: rgba(0,0,0,0.5); 
}

/* ✅ O TRUQUE DO OBJECT-FIT: Imagens mais bonitas e sem deformar ✅ */
.img-curso img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ✅ ✅ ✅ O Segredo está aqui ✅ ✅ ✅ */
    transition: 0.5s ease;
}

.card-curso-full:hover .img-curso img {
    transform: scale(1.1); /* Zoom sutil na imagem no hover */
}

/* Tag de Preço: Flutuante, vermelha e acesa */
.img-curso .tag-preco {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: var(--vermelho);
    color: white;
    padding: 7px 18px;
    font-size: 1.1rem;
    font-weight: 900;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(230, 57, 70, 0.6); /* Sombrinha vermelha glow */
    letter-spacing: 1px;
    z-index: 10;
}

/* Corpo de Texto do Card (Refinamento Tipográfico) */
.body-curso {
    padding: 22px; 
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ✅ ✅ ✅ Títulos mais atraentes e fortes ✅ ✅ ✅ */
.body-curso h3 {
    font-size: 1.3rem; /* Tamanho sóbrio */
    color: #ffffff; /* Título BRANCO imponente no fundo escuro */
    margin-bottom: 12px;
    font-weight: 800; /* Letra mais grossa */
    line-height: 1.2;
    min-height: 40px;
}

/* ✅ ✅ ✅ Descrições mais chiques e legíveis ✅ ✅ ✅ */
.body-curso p {
    font-size: 0.9rem; /* ✅ Diminuímos pra dar respiro ✅ */
    color: #8a95a5; /* Texto cinza azulado suave */
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Lista de Benefícios (Fundo Pure Dark) */
.lista-beneficios {
    margin: 0 0 20px; 
    padding: 12px;
    background: rgba(0, 0, 0, 0.2); /* Fundo super escuro pra dar profundidade */
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
}

.lista-beneficios li {
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: #b0b8c4;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Botão de Comprar (Glow Neon Style) */
.btn-compra-sm {
    margin-top: auto;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 50px; /* Arredondado estilo pílula */
    background: transparent;
    border: 2px solid var(--azul-fundo); /* Azul na borda inicialmente */
    color: white;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.4s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

/* A setinha que empurra pro lado */
.btn-compra-sm::after {
    content: '→';
    font-size: 1.2rem;
    transition: 0.3s;
}

.btn-compra-sm:hover {
    background: var(--vermelho); /* Fundo vira vermelho */
    border-color: var(--vermelho);
    box-shadow: 0 8px 25px rgba(230, 57, 70, 0.6); /* Acende a luz vermelha glow */
    transform: translateY(-2px);
}

.btn-compra-sm:hover::after {
    transform: translateX(8px); /* Setinha empurra mais pro lado */
}

/* Selo Especial de "Mais Vendido" (Caso tenha) */
.selo-destaque {
    position: absolute;
    top: 15px; 
    left: 15px; 
    background: #ffcc00; /* Amarelo ouro chama atenção no escuro */
    color: #000000;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 50px; 
    box-shadow: 0 5px 15px rgba(255, 204, 0, 0.3); 
    z-index: 10;
    letter-spacing: 1px;
}

/* --- 4. SEÇÃO DE AJUDA (DÚVIDA COMPRA - SOLDAGEM DO OVERLAP) --- */
.duvida-compra {
    /* 🛑 ✅ ✅ AJUSTE FINAL: Treamos a margem negativa daqui também! ✅ ✅ 🛑 */
    margin-top: 120px !important; 
    text-align: center;
    padding: 80px 20px; /* ✅ Mais padding pra dar um respiro luxuoso ✅ */
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.duvida-compra h3 {
    color: #ffffff;
    font-size: 2.2rem; /* ✅ Título mais imponente ✅ */
    margin-bottom: 15px;
    font-weight: 800;
}

.duvida-compra p {
    color: #8a95a5;
    margin-bottom: 30px;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* O Botão do WhatsApp (Verde Neon) */
.btn-zap-outline {
    display: inline-block;
    background: rgba(37, 211, 102, 0.1);
    border: 2px solid var(--verde-zap);
    color: var(--verde-zap);
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    transition: 0.3s;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn-zap-outline:hover {
    background: var(--verde-zap);
    color: white;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
    transform: translateY(-3px);
}

/* --- ✅ ✅ ✅ ✅ RESPONSIVIDADE (CELULAR) - Fundamental ✅ ✅ ✅ ✅ --- */
@media (max-width: 1200px) {
    /* Diminuímos o gap ligeiramente em telas um pouco menores pra garantir os 4 */
    .cards-grid { gap: 20px; }
}

@media (max-width: 1100px) {
    /* ✅ No Tablet: Vira 2 por linha ✅ */
    .cards-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .card-curso-full { max-width: 350px; } /* Devolve um tamanho maior pros cards no tablet */
}

@media (max-width: 768px) {
    /* ✅ No Celular: Vira 1 por linha ✅ */
    .cards-grid { grid-template-columns: 1fr; gap: 30px; }
    .card-curso-full { width: 100%; max-width: 350px; } /* Centraliza e estica até 350px */
    
    .courses-header-textos h1 { font-size: 2.5rem; } /* Diminui título no celular */
    .duvida-compra h3 { font-size: 1.8rem; }
}


/* --- PÁGINA DE LOGIN ESTILIZADA --- */
.login-container {
    display: flex;
    height: 100vh;
    width: 100%;
    background: #fff;
}

/* --- ATUALIZAÇÃO PARA DAR VIDA AO LOGIN --- */

.login-bg {
    flex: 1.2;
    /* Gradiente com as cores da marca que se mexe */
    background: linear-gradient(-45deg, #051024, #1a3a6d, #051024, #2c0b0e);
    background-size: 400% 400%;
    animation: gradientMovimento 15s ease infinite; /* A Mágica acontece aqui */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Efeito de vidro por cima do fundo animado */
.overlay-login {
    background: rgba(255, 255, 255, 0.1); /* Bem transparente */
    backdrop-filter: blur(10px); /* Desfoque moderno */
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 50px;
    border-radius: 20px;
    text-align: center;
    color: white;
    max-width: 80%;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    animation: flutuarTexto 6s ease-in-out infinite;
}

/* Botão Principal com Pulsação (Chamada para ação) */
.full-width {
    width: 100%;
    border: none;
    cursor: pointer;
    padding: 15px;
    font-size: 1rem;
    box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.7);
    animation: pulsar 2s infinite; /* Faz o botão bater como um coração */
}

/* --- ANIMAÇÕES NOVAS (Copie isso no final do arquivo se não tiver) --- */

@keyframes gradientMovimento {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes flutuarTexto {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes pulsar {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.7); }
    70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(230, 57, 70, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); }
}
.overlay-login h1 { font-size: 3rem; margin-bottom: 10px; }
.overlay-login p { font-size: 1.2rem; opacity: 0.8; margin-bottom: 30px; }

.btn-voltar {
    color: white; text-decoration: none; border: 1px solid rgba(255,255,255,0.3);
    padding: 10px 25px; border-radius: 30px; transition: 0.3s;
}
.btn-voltar:hover { background: white; color: var(--azul-fundo); }

/* Área do Formulário */
.login-form-area {
    flex: 1; display: flex;
    justify-content: center; align-items: center;
    padding: 40px; background: #fff;
}

.form-wrapper { width: 100%; max-width: 420px; text-align: center; }

.logo-area { margin-bottom: 30px; }
.subtitulo { color: #666; font-size: 0.9rem; margin-top: 5px; }

/* Botões de Troca */
.toggle-btns {
    display: flex; margin-bottom: 30px;
    background: #f1f1f1; border-radius: 50px; padding: 5px;
}
.toggle-btns button {
    flex: 1; background: none; border: none; padding: 12px;
    font-weight: 600; cursor: pointer; border-radius: 50px;
    color: #666; transition: 0.3s;
}
.toggle-btns button.active {
    background: white; color: var(--azul-fundo);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Botão do Google Bonitão */
.btn-google {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 12px; background: white; border: 1px solid #ddd; border-radius: 8px;
    font-weight: 600; font-family: 'Poppins', sans-serif; color: #555; cursor: pointer;
    transition: 0.3s; margin-bottom: 20px;
}
.btn-google:hover { background: #f8f9fa; border-color: #ccc; }

.divisor {
    display: flex; align-items: center; text-align: center;
    margin: 20px 0; color: #aaa; font-size: 0.85rem;
}
.divisor::before, .divisor::after {
    content: ''; flex: 1; border-bottom: 1px solid #eee;
}
.divisor span { padding: 0 10px; }


.modal-fundo {
    display: none; /* COMEÇA ESCONDIDO (O segredo está aqui!) */
    position: fixed; /* Fixa na tela, não sai quando rola */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fundo preto transparente */
    z-index: 9999; /* Fica em cima de TUDO */
    justify-content: center; /* Centraliza Horizontalmente */
    align-items: center; /* Centraliza Verticalmente */
}

/* A Caixa Branca (Onde estão os botões) */
.modal-box {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    width: 90%;
    max-width: 450px; /* Largura máxima para não ficar gigante */
    position: relative;
    text-align: center;
    box-shadow: 0 5px 30px rgba(0,0,0,0.5); /* Sombra bonita */
    animation: descerSuave 0.3s ease; /* Efeitinho de entrada */
}

/* Animação para a janela descer suave */
@keyframes descerSuave {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Botão de Fechar (X) */
.fechar {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 25px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    transition: 0.3s;
}
.fechar:hover { color: var(--vermelho); }

/* Botões de Escolha (Cartão/Pix) */
.btn-modal {
    width: 100%;
    padding: 15px;
    margin-top: 15px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.btn-modal:hover { transform: scale(1.02); }

.cartao { background: #333; color: white; }
.pix { background: #00bfa5; color: white; }

/* Input do Formulário de Cartão */
#fase-cartao input {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    transition: 0.3s;
}
#fase-cartao input:focus {
    border-color: var(--azul-fundo);
    outline: none;
}
/* --- RODAPÉ (FOOTER) --- */
footer {
    background-color: #051024; /* Azul bem escuro */
    color: white;
    padding-top: 60px;
    margin-top: 50px;
    border-top: 5px solid var(--vermelho); /* Detalhe vermelho no topo */
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    padding-bottom: 40px;
}

.footer-col {
    flex: 1;
    min-width: 250px;
}

.footer-col h3 {
    margin-bottom: 20px;
    font-size: 1.4rem;
    position: relative;
}

/* Tracinho vermelho embaixo do título */
.footer-col h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 50px;
    height: 3px;
    background-color: var(--vermelho);
}

.footer-col p {
    color: #ccc;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: #ccc;
    text-decoration: none;
    transition: 0.3s;
}

.footer-col ul li a:hover {
    color: var(--vermelho);
    padding-left: 5px; /* Efeito de mover para o lado */
}

.footer-bottom {
    background-color: #020b1a; /* Ainda mais escuro */
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-bottom p {
    font-size: 0.8rem;
    color: #777;
}
/* =========================================
   CABEÇALHO CONTATO (PREMIUM RELOADED)
   ========================================= */

.contato-header-clean {
    /* Fundo com uma luz sutil no centro */
    background: radial-gradient(circle at center, #0c2045 0%, #020b1a 70%); 
    padding: 160px 0 80px 0; 
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* O reflexo vermelho neon no chão do cabeçalho */
.contato-header-clean::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 100px;
    background: var(--vermelho);
    filter: blur(80px);
    opacity: 0.25; /* Bem suave, só pra dar um clima */
    z-index: 0;
}

.contato-header-clean .container {
    position: relative;
    z-index: 1;
}

/* A Etiqueta flutuante chique */
.contato-header-clean .badge-alerta {
    display: inline-block;
    background: rgba(230, 57, 70, 0.1);
    border: 1px solid rgba(230, 57, 70, 0.3);
    color: var(--vermelho);
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 25px;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(230, 57, 70, 0.1);
}

/* O Título Gigante */
.contato-header-clean h1 {
    color: #ffffff;
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 15px;
    letter-spacing: -1.5px;
}

/* A palavra "Conosco" brilhando */
.contato-header-clean h1 span {
    color: var(--vermelho);
    text-shadow: 0 0 25px rgba(230, 57, 70, 0.5);
}

/* O Subtítulo elegante */
.contato-header-clean p {
    color: #b0b8c4; /* Tiramos o vermelho e botamos o cinza azulado */
    font-size: 1.15rem;
    font-weight: 400;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Responsividade pro Celular */
@media (max-width: 768px) {
    .contato-header-clean h1 { font-size: 2.8rem; }
    .contato-header-clean p { font-size: 1rem; padding: 0 15px; }
}
/* O Segredo do Lado a Lado (Forçando o Flexbox) */
.flex-contato {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    align-items: flex-start;
}

/* Tamanho das Colunas */
.contato-esquerda {
    width: 45%;
}

.contato-direita {
    width: 50%;
}

/* Textos da Esquerda */
.contato-esquerda h2 {
    color: #ffffff;
    font-size: 2rem;
    margin-bottom: 10px;
}

.contato-esquerda .subtitulo {
    color: #b0b8c4;
    margin-bottom: 30px;
}

/* Cards de Informação */
.info-cards {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 12px;
    text-decoration: none;
    transition: 0.3s;
}

.info-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(230, 57, 70, 0.3);
    transform: translateX(5px);
}

.icon-box {
    font-size: 1.8rem;
}

.info-textos h4 {
    color: #ffffff;
    margin: 0 0 5px 0;
    font-size: 1.1rem;
}

.info-textos p {
    color: #b0b8c4;
    margin: 0;
}

/* Mapa */
.mapa-container {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Formulário da Direita */
.form-box-dark {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 16px;
}

.form-box-dark h3 {
    color: #ffffff;
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.input-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.input-group label {
    color: #b0b8c4;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.input-group input, 
.input-group textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    color: #ffffff;
    font-family: inherit;
    transition: 0.3s;
}

.input-group input:focus, 
.input-group textarea:focus {
    outline: none;
    border-color: var(--vermelho);
    background: rgba(0, 0, 0, 0.4);
}

.btn-destaque.full-width {
    width: 100%;
    padding: 18px;
    border-radius: 8px;
    font-size: 1.1rem;
    background: var(--vermelho);
    border: none;
    color: white;
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
}

.btn-destaque.full-width:hover {
    background: #c92a39; /* Vermelho mais escuro */
}

/* Responsividade para Celular */
@media (max-width: 992px) {
    .flex-contato {
        flex-direction: column; /* No celular, um cai pra baixo do outro */
    }
    .contato-esquerda, .contato-direita {
        width: 100%;
    }
}



/* --- MELHORIAS DA PÁGINA DE CURSOS --- */

.lista-beneficios {
    margin: 0 0 15px; /* Tirei margens desnecessárias */
    padding: 10px;
    background: #f9f9f9;
    border-radius: 8px;
}
.lista-beneficios li {
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #444;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* O Destaque (do meio) continua especial, mas agora os outros não ficam mortos */
.destaque-card {
    border: 2px solid var(--azul-fundo);
    /* Removemos transform fixo para ele não ficar travado */
    box-shadow: 0 20px 40px rgba(5, 16, 36, 0.15);
}
.destaque-card:hover {
    transform: scale(1.08) translateY(-10px);
}

/* --- CORREÇÃO: SELO DESTAQUE --- */
.selo-destaque {
    position: absolute;
    top: 10px; /* Fica flutuando um pouco abaixo do topo */
    left: 50%;
    transform: translateX(-50%); /* Centraliza perfeitamente */
    
    background: var(--vermelho); /* Vermelho Chama Atenção */
    color: white;
    
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 5px 15px;
    border-radius: 20px; /* Arredondado igual pílula */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Sombra para dar destaque */
    z-index: 10;
    letter-spacing: 1px;
}

/* Faixa de "Ajuda" (Múltiplas formas de contato) */
.duvida-compra {
    margin-top: 80px;
    text-align: center;
    padding: 0 20px;
}

.duvida-compra h3 {
    color: var(--azul-fundo);
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.duvida-compra p {
    color: #666;
    margin-bottom: 25px;
}

.btn-zap-outline {
    display: inline-block;
    border: 2px solid #25D366;
    color: #25D366;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.btn-zap-outline:hover {
    background: #25D366;
    color: white;
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
}
/* --- MELHORIAS DA HOME (CORRIGIDO) --- */

/* Barra de Estatísticas */
.stats-bar {
    /* CORREÇÃO 1: Margem no topo para não grudar na capa e não cortar o texto */
    margin-top: 30px;
    
    background: linear-gradient(to right, #051024, #1a3a6d); /* Azul Profundo */
    padding: 50px 0; /* Aumentei um pouco o espaçamento interno também */
    color: white;
    border-bottom: 4px solid var(--vermelho);
    position: relative;
    z-index: 5;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border-radius: 10px; /* Um leve arredondamento nos cantos fica mais moderno */
    margin-bottom: 50px; /* Espaço para a próxima seção */
}

.stats-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.stat-item {
    text-align: center;
    /* Um pequeno efeito ao passar o mouse para ficar interativo */
    transition: transform 0.3s;
}
.stat-item:hover { transform: translateY(-5px); }

.numero {
    display: block;
    font-size: 2.8rem; /* Aumentei um pouquinho a fonte */
    font-weight: 900;
    color: var(--vermelho);
}

.legenda {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    font-weight: 600;
}

/* =========================================
   SEÇÃO DIFERENCIAIS (REFACTOR PREMIUM)
   Isso transforma os cartões em Dark Mode e adiciona a luz reativa.
   ========================================= */
.diferenciais {
    padding: 120px 0 80px 0;
    background-color: #0c1b33; /* Fundo azul-chumbo super escuro, como o Specialists */
    position: relative;
    z-index: 1;
}

.titulo-central {
    text-align: left; /* 🛑 ALINHAMENTO À ESQUERDA IGUAL À REFERÊNCIA 🛑 */
    margin-bottom: 70px;
}

.titulo-central h2 { 
    font-size: 2.8rem; 
    color: #ffffff; /* Texto branco */
    margin-bottom: 15px; 
    font-weight: 800; 
}

/* O truque do Itálico na palavra chave igual a referência */
.titulo-central h2 span {
    font-style: italic;
    color: var(--vermelho) !important;
}

.titulo-central p { 
    color: #8a95a5; 
    font-size: 1.1rem; 
    max-width: 600px; /* Reduzimos um pouco pra dar leitura à esquerda */
    margin: 0; /* Garante que grude na esquerda */
}

.grid-diferenciais {
    display: flex;
    gap: 30px;
    justify-content: flex-start; /* ✅ Gruda tudo na esquerda ✅ */
    flex-wrap: wrap;
}

/* Os Cartões Estilo "Vidro Escuro" e Alinhados à Esquerda */
.box-diferencial {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    background: rgba(255, 255, 255, 0.03); /* Quase transparente, estilo vidro */
    padding: 40px 30px;
    border-radius: 16px;
    text-align: left; /* ✅ ✅ ✅ TUDO ALINHADO À ESQUERDA ✅ ✅ ✅ */
    transition: all 0.4s ease; /* Transição suave pra tudo */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Borda cinza super fina */
}

/* ========================================= */
/* ✅ THE HOVER MÁGICA: "LUZ VERMELHA" + SUBIR ✅ */
/* ========================================= */
.box-diferencial:hover {
    /* 1. Efeito de subir (O card sobe e cresce um tiquinho) */
    transform: translateY(-10px) scale(1.02);
    
    /* 2. Efeito de Luz Vermelha (O Glow Neon reativo) */
    border-color: var(--vermelho); /* A borda acende em vermelho */
    box-shadow: 0 10px 40px rgba(230, 57, 70, 0.3); /* A "Luz Vermelha" que você pediu irradiando */
    
    background: rgba(255, 255, 255, 0.05); /* Sutilmente clareia o card */
}

/* Ícone reativo */
.icone-dif {
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: inline-block;
    background: rgba(230, 57, 70, 0.1); /* Fundo vermelho bem fraquinho pro ícone */
    padding: 15px;
    border-radius: 12px;
}

/* Ícone acende junto com o card */
.box-diferencial:hover .icone-dif {
    filter: drop-shadow(0 0 10px var(--vermelho));
}

.box-diferencial h3 {
    margin-bottom: 15px;
    color: #ffffff; /* Título branco */
    font-weight: 700;
    font-size: 1.3rem;
}

.box-diferencial p {
    color: #8a95a5; /* Texto de apoio cinza azulado suave */
    font-size: 0.95rem;
    line-height: 1.7;
}
/* Adiciona uma setinha (→) automaticamente depois do texto */
.btn-compra-sm::after {
    content: '→';
    font-size: 1.2rem;
    transition: 0.3s;
}
/* Faz a setinha andar para o lado */
.btn-compra-sm:hover::after {
    transform: translateX(5px);
}
/* --- CORREÇÃO DO CABEÇALHO NO CELULAR (VERSÃO DEFINITIVA) --- */
@media (max-width: 768px) {
    
    /* 1. Destrava a altura do cabeçalho */
    header {
        height: auto; 
        padding: 20px 20px;
    }

    /* 2. Organiza o container principal: Logo em cima, Resto embaixo */
    .nav-flex {
        flex-direction: column;
        align-items: center; /* Centraliza o Logo */
        gap: 20px;
    }

    /* 3. A CORREÇÃO MÁGICA: Arruma a caixa que segura o Menu e o Botão */
    nav {
        display: flex;
        flex-direction: column; /* Coloca o Menu em cima e o Botão embaixo */
        align-items: center;
        gap: 20px; /* Espaço para o botão não grudar nos links */
        width: 100%;
    }

    /* 4. Ajusta os Links (Início, Cursos...) */
    .menu-items {
        display: flex;
        justify-content: center;
        flex-wrap: wrap; /* Se a tela for muito pequena, os links descem */
        gap: 20px;
        margin-right: 0; /* Remove margem antiga */
        width: 100%;
    }

    /* 5. O Botão Cadastre-se fica largão e bonito */
    .btn-destaque {
        width: 100%; 
        text-align: center;
        display: block;
        padding: 15px;
    }

    /* 6. Empurra o site para baixo para não ficar escondido atrás do cabeçalho */
    /* Como o menu ficou maior (mais alto), precisamos empurrar mais */
    .hero, 
    .page-header {
        margin-top: 300px; /* Espaço generoso para garantir */
    }
}
/* --- AJUSTES DA PÁGINA DE CURSOS NO CELULAR --- */
@media (max-width: 768px) {
    
    /* 1. O Cabeçalho precisa de espaço para o texto não ficar espremido */
    .page-header {
        padding: 80px 20px 120px; /* Mais espaço interno */
    }
    
    .page-header h1 {
        font-size: 2.5rem; /* Diminui a letra pra não quebrar feio */
    }

    /* 2. Diminui a "invasão" dos cards sobre o azul */
    .cursos-vitrine {
        margin-top: -50px; /* No PC é -80px, no celular -50px tá bom */
        padding-bottom: 50px;
    }

    /* 3. Cards Responsivos */
    .card-curso-full {
        width: 100%; /* Ocupa a largura disponível */
        max-width: 350px; /* Mas não passa de 350px */
        height: auto; /* Altura automática para não cortar conteúdo */
        min-height: 520px; /* Altura mínima garantida */
    }
    
    /* 4. Ajuste da foto no celular */
    .img-curso {
        height: 200px; /* Garante que a foto tenha destaque */
    }

    /* 5. Tira o hover (efeito de subir) no celular pois não tem mouse */
    .card-curso-full:hover {
        transform: none; /* Desliga o pulo */
    }
}
/* --- AJUSTES DA PÁGINA DE CONTATO NO CELULAR --- */
@media (max-width: 768px) {
    
    /* 1. Menos invasão no topo (para não tapar o título "Fale Conosco") */
    .contato-principal {
        margin-top: -40px; /* Sobe menos que no PC */
        padding-bottom: 50px;
    }

    /* 2. Empilha: Infos em cima, Formulário embaixo */
    .contato-wrapper {
        flex-direction: column; /* Um embaixo do outro */
        gap: 30px; /* Espaço entre a caixa de info e o formulário */
    }

    /* 3. Garante que as caixas ocupem a largura toda do celular */
    .contato-info, 
    .contato-form {
        min-width: 100%; /* Força largura total */
        padding: 25px; /* Um pouco menos de padding para ganhar espaço */
    }

    /* 4. Tira a margem lateral negativa se houver, para não vazar a tela */
    .container {
        padding: 0 20px;
    }

    /* 5. Mapa num tamanho bom para dedo */
    .mapa-container iframe {
        height: 250px; /* Altura fixa */
    }
}/* --- CORREÇÃO FINAL: TRAZER O CONTATO PARA FRENTE --- */
/* Isso arruma o PC e o Celular ao mesmo tempo */
.contato-principal {
    position: relative;
    z-index: 20 !important; /* O "!important" é tipo uma ordem suprema para garantir */
}
/* --- CORREÇÃO DA PÁGINA DE LOGIN NO CELULAR --- */
@media (max-width: 768px) {
    
    /* 1. Muda a direção para não tentar ficar lado a lado */
    .login-container {
        flex-direction: column; /* Mudaria para 'um em cima do outro' */
        height: auto; /* Altura automática */
        min-height: 100vh;
    }

    /* 2. ESCONDE a parte azul decorativa no celular */
    /* No celular, o espaço é ouro! O banner só atrapalha e deixa tudo apertado. */
    .login-bg {
        display: none; 
    }

    /* 3. O Formulário reina absoluto */
    .login-form-area {
        flex: 1; /* Ocupa todo o espaço disponível */
        padding: 30px 20px; /* Um pouco de respiro */
        width: 100%;
        align-items: flex-start; /* Alinha no topo se precisar */
    }
    
    /* 4. Garante que o formulário não fique pequeno */
    .form-wrapper {
        width: 100%;
        max-width: 100%;
    }
}
/* --- BOTÃO VOLTAR (MOBILE E PC) --- */
.area-voltar {
    margin-top: 25px;
    text-align: center;
    border-top: 1px solid #eee; /* Uma linhazinha para separar */
    padding-top: 20px;
}

.link-voltar-mobile {
    color: #888;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: 0.3s;
}

.link-voltar-mobile:hover {
    color: var(--azul-fundo);
    transform: translateX(-5px); /* Move um pouquinho para a esquerda ao passar o mouse */
    display: inline-block;
}
/* =========================================
   SEÇÃO ESPECIALISTAS (AGORA DE LADO/GRID)
   ========================================= */
.especialistas {
    padding: 100px 0; /* Mais espaço pra dar um ar premium */
    text-align: center;
    background-color: #0c1b33; /* Azul-chumbo super escuro */
    color: #ffffff;
    position: relative;
    z-index: 1;
}

.especialistas h2 {
    margin-bottom: 60px;
    color: #ffffff !important;
    font-size: 3rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -1px;
}

/* ✅ O TRUQUE DO GRID AQUI ✅ */
.grid-especialistas {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colunas iguais, lado a lado */
    gap: 40px; /* Espaço entre as colunas */
    justify-content: center;
}

/* Ajustes nos cards para ficarem lado a lado */
.card-especialista {
    background: rgba(255, 255, 255, 0.03);
    padding: 40px 30px;
    border-radius: 20px;
    transition: 0.4s;
    border: 1px solid rgba(255,255,255,0.05);
}

.card-especialista:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-8px);
    border-color: rgba(255,255,255,0.1);
}

.foto-especialista {
    height: 160px; width: 160px;
    background-size: cover; background-position: center;
    border-radius: 50%;
    margin: 0 auto 20px;
    border: 4px solid var(--vermelho);
    box-shadow: 0 0 15px rgba(230, 57, 70, 0.3);
}

.card-especialista h3 { color: #ffffff; font-size: 1.4rem; font-weight: 700; }
.card-especialista p { color: #8a95a5; font-size: 1rem; margin-top: 5px; }

/* =========================================
   SEÇÃO RODAPÉ (AGORA DE LADO/GRID)
   ========================================= */
.main-footer {
    background-color: #030d1a; /* O fundo ultra escuro */
    color: #e0e0e0;
    padding: 100px 0 40px 0;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ✅ O TRUQUE DO GRID AQUI ✅ */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr; /* 4 colunas organizedíssimas lado a lado */
    gap: 50px;
}

.footer-col h4 {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 18px; }
.footer-links a { text-decoration: none; color: #8a95a5; font-weight: 400; font-size: 1rem; transition: 0.3s; }
.footer-links a:hover { color: var(--vermelho); text-shadow: 0 0 10px rgba(230, 57, 70, 0.4); }

.social-icons { display: flex; gap: 20px; margin-top: 25px; }
.social-icons a { text-decoration: none; color: #ffffff; font-size: 1.5rem; opacity: 0.6; transition: 0.3s; }
.social-icons a:hover { opacity: 1; color: var(--vermelho); }

/* BOTÃO GLOW NO RODAPÉ */
.glow-button-container { display: flex; flex-direction: column; align-items: flex-start; }

.btn-glow {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1rem;
    color: #ffffff;
    background-color: var(--vermelho);
    border: none;
    text-decoration: none;
    box-shadow: 0 0 15px rgba(230, 57, 70, 0.5); /* A luz vermelha neon em volta (O Truque da Referência) */
    transition: all 0.3s ease;
}

.btn-glow:hover {
    box-shadow: 0 0 25px rgba(230, 57, 70, 0.9); /* O brilho fica mais forte */
    transform: scale(1.05);
}

.footer-bottom { text-align: center; margin-top: 80px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.footer-bottom p { color: #666; font-size: 0.9rem; }

/* RESPONSIVIDADE (CELULAR) - Fundamental pra não quebrar */
@media (max-width: 992px) {
    .grid-especialistas { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (max-width: 768px) {
    .grid-especialistas { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .social-icons { justify-content: center; }
    .glow-button-container { align-items: center; }
}
/* =========================================
   CAPA INICIAL (ÁGUIA CENTRALIZADA + TEXTO ABAIXO)
   ========================================= */
.hero-inicial {
    background: radial-gradient(circle at center, #0c2045 0%, #051024 70%);
    padding: 180px 0 140px 0;
    color: white;
    position: relative;
    z-index: 1;
}

.hero-inicial-wrapper {
    display: flex;
    flex-direction: column; /* Coloca um embaixo do outro */
    align-items: center;    /* Centraliza tudo horizontalmente */
    justify-content: center;
    gap: 15px; /* Espaço entre a águia e o texto */
}

/* --- LOGO ÁGUIA (BRASÃO CENTRAL) --- */
.hero-inicial-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 10px; /* Distância da águia para a etiqueta vermelha */
}

.hero-inicial-logo::before {
    content: '';
    position: absolute;
    width: 180px;  /* Luz um pouco menor pra combinar com o novo tamanho */
    height: 180px;
    background: var(--vermelho);
    border-radius: 50%;
    z-index: 0;
    filter: blur(40px);
    animation: pulsarNeon 1.5s ease-in-out infinite alternate;
    opacity: 0.6;
}

.logo-aguia-video {
    width: 100%;
    max-width: 280px; /* Águia um pouco menor pra não roubar tanto a atenção do título */
    position: relative;
    z-index: 1;
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(circle, black 50%, transparent 80%);
    mask-image: radial-gradient(circle, black 50%, transparent 80%);
}

/* --- TEXTOS (DE VOLTA PRO CENTRO) --- */
.hero-inicial-textos {
    text-align: center; /* Texto volta pro meio */
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza o botão e a badge */
}

.hero-inicial-textos .badge-alerta {
    display: inline-block;
    background: rgba(230, 57, 70, 0.1);
    border: 1px solid var(--vermelho);
    color: var(--vermelho);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.hero-inicial h1 {
    font-size: 4.2rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.txt-destaque {
    color: var(--vermelho);
    font-style: italic;
    font-weight: 900;
}

.hero-inicial p {
    font-size: 1.1rem;
    color: #b0b8c4;
    margin-bottom: 40px;
    line-height: 1.6;
}
/* --- RESPONSIVIDADE (CELULAR) --- */
@media (max-width: 992px) {
    .hero-inicial-wrapper {
        flex-direction: column;
        text-align: center;
    }
    
    .hero-inicial-textos {
        text-align: center;
        order: 2; 
    }
    
    .hero-inicial-logo {
        order: 1; 
        margin-bottom: 40px;
    }
    
    .logo-aguia-video {
        max-width: 280px; 
    }
}

/* --- O TRUQUE MÁGICO DE SOBREPOSIÇÃO --- */
.stats-bar {
    margin-top: -70px !important; /* Isso puxa a barra para CIMA, invadindo a parte azul */
    position: relative;
    z-index: 10; /* Garante que ela fique na frente de tudo */
    background: linear-gradient(to right, #0a1a3a, #051024) !important; /* Deixa ela mais escura pra destacar */
    box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important; /* Sombra pesada pra dar efeito 3D */
}

/* Responsividade para Celular */
@media (max-width: 768px) {
    .hero-inicial { padding: 140px 20px 100px 20px; }
    .hero-inicial h1 { font-size: 2.5rem; }
    .stats-bar { margin-top: -40px !important; }
}
/* =========================================
   NOVO RODAPÉ PREMIUM (ESTILO GABRIEL DO SITE)
   ========================================= */
.main-footer {
    background-color: #030d1a; /* O fundo ultra escuro igual ao da referência */
    color: #e0e0e0; /* Texto em branco suave */
    padding: 80px 0 30px 0;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Linhazinha fina de separação */
}

/* O Container do Rodapé */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr; /* Colunas organizadas (2 grandes nas pontas, 2 médias no meio) */
    gap: 40px;
}

.footer-col h4 {
    color: #ffffff; /* Títulos das colunas em branco puro */
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Listas de Links */
.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 15px;
}

.footer-links a {
    text-decoration: none;
    color: #8a95a5; /* Cor suave para os links */
    font-weight: 400;
    font-size: 0.95rem;
    transition: 0.3s;
}

.footer-links a:hover {
    color: var(--vermelho); /* Links ficam vermelhos no hover */
}

/* Ícones de Redes Sociais */
.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-icons a {
    text-decoration: none;
    color: #ffffff;
    font-size: 1.3rem;
    opacity: 0.6;
    transition: 0.3s;
}

.social-icons a:hover {
    opacity: 1;
    color: var(--vermelho);
}

/* Ação Premium com Brilho Glow (Neon) */
.glow-button-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.main-footer .btn-destaque {
    box-shadow: 0 0 15px rgba(230, 57, 70, 0.5); /* A luz vermelha neon em volta (O Truque da Referência) */
    transition: all 0.3s ease;
}

.main-footer .btn-destaque:hover {
    box-shadow: 0 0 25px rgba(230, 57, 70, 0.9); /* O brilho fica mais forte */
}

/* Linha Final de Copyright */
.footer-bottom {
    text-align: center;
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom p {
    color: #666;
    font-size: 0.85rem;
}

/* Responsividade (Celular) */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Coloca tudo em uma coluna só no celular */
        text-align: center;
    }
    .social-icons { justify-content: center; }
    .glow-button-container { align-items: center; }
}
/* =========================================
   CORREÇÃO MÁGICA: REMOVENDO AS LACUNAS (FIOS BRANCOS)
   Isso força todas as caixas grandes a grudarem uma na outra.
   ========================================= */

/* 1. Garante que as seções principais perto do topo não tenham margens */
.hero-inicial,
.stats-bar,
.diferenciais,
.hero {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: none !important; /* Só pra garantir que não tenha bordas divisórias */
}

/* 2. Ajuste fino específico para a Barra de Estatísticas */
.stats-bar {
    position: relative;
    z-index: 10;
    /* Isso garante que ela grude perfeitamente na seção de cima e de baixo */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important; /* Opcional: Uma sombra sutil pra dar profundidade */
}

/* 3. Se houver algum 'respiro' de títulos (h1, h2) grudados nas bordas das seções, removemos */
.hero-inicial h1,
.titulo-central h2,
.hero h1 {
    margin-top: 0 !important;
    /* margin-bottom continua para o espaço interno dos textos */
}
/* =========================================
   SOLDAGEM FINAL: TIRANDO CURVAS E BURACOS
   ========================================= */

/* 1. Tira qualquer arredondado das caixas grandes para não vazar fundo branco nas pontas */
.hero-inicial,
.stats-bar,
.diferenciais,
.especialistas,
.main-footer {
    border-radius: 0 !important; /* Deixa tudo 100% quadrado nas bordas externas */
    width: 100% !important;      /* Garante que estique de ponta a ponta na tela */
    max-width: 100% !important;
}

/* 2. Cola a seção de Especialistas no Rodapé na força do ódio kkkk */
.especialistas {
    margin-bottom: 0 !important;
}

.main-footer {
    margin-top: 0 !important;
    padding-top: 80px !important; /* Devolve o espaço de respiro interno pro texto não grudar */
}

/* 3. Garante que o fundo do site inteiro (body) seja escuro caso algo puxe a tela */
body {
    background-color: #051024 !important;
}
/* =========================================
   A LINHA VERMELHA "VIVA" (NEON PULSANTE)
   ========================================= */
.linha-viva {
    width: 100%;
    height: 3px; /* A grossura da linha (pode alterar se quiser mais grossa) */
    background: var(--vermelho);
    position: relative;
    z-index: 20; /* Fica por cima de tudo */
    /* A mágica chamando a animação infinita */
    animation: pulsarNeon 1.5s ease-in-out infinite alternate;
}

/* O "Coração" batendo: muda a cor e a força da luz */
@keyframes pulsarNeon {
    0% {
        background-color: #b32431; /* Vermelho mais escuro/fechado */
        box-shadow: 0 0 5px #b32431, 0 0 10px #b32431;
    }
    100% {
        background-color: #ff1a33; /* Vermelho super aceso/vivo */
        box-shadow: 0 0 15px #ff1a33, 0 0 30px #ff1a33, 0 0 45px rgba(230, 57, 70, 0.8);
    }
}
/* =========================================
   KIT DE CORREÇÃO: FORÇANDO DARK MODE NOS DETALHES
   (Isso anula qualquer CSS velho que esteja atrapalhando)
   ========================================= */

/* 1. CAIXINHA DE BENEFÍCIOS (Tirando o Branco e pondo Vidro Escuro) */
.lista-beneficios {
    background: rgba(255, 255, 255, 0.05) !important; /* Vidro escuro transparente */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Borda bem fina e clara */
    border-radius: 10px !important;
}

.lista-beneficios li {
    color: #e0e0e0 !important; /* Letra clara pra dar leitura */
    font-weight: 500 !important;
}

/* 2. BOTÃO GARANTIR VAGA (Mais visível antes de passar o mouse) */
.btn-compra-sm {
    background: rgba(255, 255, 255, 0.08) !important; /* Fundo levemente visível */
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Borda branca suave */
    color: #ffffff !important; /* Letra super branca */
}

/* Mantendo o brilho vermelho no Hover do botão */
.btn-compra-sm:hover {
    background: var(--vermelho) !important; 
    border-color: var(--vermelho) !important;
    box-shadow: 0 0 20px rgba(230, 57, 70, 0.6) !important;
}

/* 3. TÍTULOS DOS CARDS E DESTAQUE (Correção do Card do meio) */
.destaque-card {
    border: 2px solid var(--vermelho) !important; /* Deixa o mais vendido com borda vermelha direto */
}

/* 4. SEÇÃO WHATSAPP (Clareando o título escuro) */
.duvida-compra h3 {
    color: #ffffff !important; /* Força o branco puro no título do Zap */
    text-shadow: 0 5px 15px rgba(0,0,0,0.8) !important; /* Sombra pra destacar bem */
}

.duvida-compra p {
    color: #b0b8c4 !important; /* Texto de apoio mais claro */
}
/* =========================================
   ALERTA TÁTICO V3 (TIPOGRAFIA E LUZ REATIVA)
   ========================================= */

.duvida-compra-alerta {
    padding: 100px 20px;
    background-color: #051024;
    display: flex;
    justify-content: center;
}

.alerta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.02) !important; /* Vidro bem escuro */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(230, 57, 70, 0.3) !important;
    border-radius: 24px;
    padding: 50px;
    max-width: 1100px;
    width: 100%;
    gap: 40px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Transição suave */
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* 🔴 O EFEITO DE LUZ QUE SURGE DE BAIXO NO HOVER 🔴 */
.alerta-box:hover {
    transform: translateY(-5px); /* Dá uma leve subidinha */
    border-color: var(--vermelho) !important;
    /* A luz vermelha surgindo de baixo e em volta */
    box-shadow: 0 20px 50px rgba(230, 57, 70, 0.3), inset 0 -10px 20px rgba(230, 57, 70, 0.1);
}

/* MELHORIA NA LETRA (TÍTULO) */
.alerta-textos h3 {
    color: #ffffff !important;
    font-size: 2.2rem !important; /* Letra maior e imponente */
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin-bottom: 15px;
    letter-spacing: -1px; /* Deixa a fonte mais moderna */
}

/* MELHORIA NA LETRA (DESCRIÇÃO) */
.alerta-textos p {
    color: #a0aab8 !important; /* Cinza azulado elegante */
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    font-weight: 400;
    max-width: 600px;
}

/* BOTÃO WHATSAPP REFINADO */
.btn-alerta-zap {
    background: #25D366 !important;
    color: white !important;
    padding: 20px 35px !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.2);
    transition: 0.3s ease;
}

.btn-alerta-zap:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(37, 211, 102, 0.4);
}

/* Efeito de brilho no ícone de chat */
.pulse-icon {
    font-size: 1.4rem;
}
/* =========================================
   ESTILOS PREMIUM DO RODAPÉ (HOVERS E BOTÃO)
   ========================================= */

/* Limpando os pontinhos da lista */
.footer-links {
    list-style: none; 
    padding: 0;
    margin: 0;
}

/* O estilo inicial dos links (cinza azulado) */
.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #b0b8c4;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-block; /* Necessário pro transform funcionar bem */
}

/* 🔴 A MÁGICA DO HOVER NOS LINKS: Fica vermelho e empurra pro lado 🔴 */
.footer-links a:hover {
    color: var(--vermelho);
    transform: translateX(5px);
    text-shadow: 0 0 8px rgba(230, 57, 70, 0.4);
}

/* 🔴 O BOTÃO PREMIUM DO RODAPÉ 🔴 */
.btn-rodape-premium {
    display: block; 
    text-align: center; 
    width: 100%; 
    padding: 16px; 
    border-radius: 50px;
    background: transparent;
    border: 2px solid var(--vermelho);
    color: var(--vermelho);
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease;
    box-shadow: 0 5px 15px rgba(230, 57, 70, 0.1); /* Brilho leve inicial */
}

/* O hover que acende a fogueira no botão */
.btn-rodape-premium:hover {
    background: var(--vermelho);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(230, 57, 70, 0.5); /* Brilho forte */
}
/* =========================================
   CABEÇALHO CONTATO PREMIUM (Correção do Esmagamento)
   ========================================= */

.contato-header-premium {
    background-color: #051024; 
    padding: 180px 0 60px 0; 
    position: relative;
    /* ✅ APAGUEI o "display: flex" daqui que tava esmagando tudo! ✅ */
}

/* O Quadradão (Estilo Panorâmico) */
.banner-imagem-fundo {
    background-image: url('foto contato.png'); 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat;
    border-radius: 24px; 
    min-height: 280px; 
    
    /* ✅ Isso força o banner a esticar até os limites da tela/container ✅ */
    width: 100%; 
    
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); 
    border: 1px solid rgba(255, 255, 255, 0.05); 
}

/* 🔴 O FILTRO CLARINHO (Tirando o Azulão) 🔴 */
.banner-imagem-fundo::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    /* ✅ APENAS PRETO COM TRANSPARÊNCIA, SEM AZUL ✅ */
    /* Isso deixa a foto original aparecer nítida e bonita */
    background-color: rgba(0, 0, 0, 0.5) !important; 
    
    z-index: 0; 
}

/* O Texto Centralizado (Subindo o tamanho pra compensar o banner menor) */
.banner-conteudo {
    position: relative;
    z-index: 1; /* Na frente do filtro escuro */
    text-align: center;
}

.banner-conteudo h1 {
    color: #ffffff;
    
    /* ✅ Título um pouco menor pra equilibrar o banner baixinho ✅ */
    font-size: 3.5rem !important; 
    
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -2px; /* Super moderno e coladinho */
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Sombra no texto pra leitura */
}

/* Breadcrumbs (Home • Contato) */
.breadcrumbs {
    font-size: 0.85rem !important; /* Texto um pouco menor */
    font-weight: 700;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-transform: uppercase;
    color: #b0b8c4;
}

.breadcrumbs a {
    color: #b0b8c4;
    text-decoration: none;
    transition: 0.3s;
}

.breadcrumbs a:hover {
    color: #ffffff;
}

/* O pontinho (Vermelho Neon) */
.breadcrumbs .ponto-neon {
    color: var(--vermelho); 
    text-shadow: 0 0 10px var(--vermelho);
    font-size: 1.3rem;
    line-height: 0;
}

.breadcrumbs .pagina-atual {
    color: var(--vermelho);
}
/* =========================================
   ATUALIZAÇÃO VISUAL: DEIXANDO O CONTATO LUXUOSO
   ========================================= */

/* 1. Cards de Informação estilo Vidro Fumê */
.info-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px); /* Efeito de vidro embassado */
    border-radius: 16px;
    padding: 25px; /* Mais respiro */
}

/* O Efeito Hover Magnético */
.info-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--vermelho); /* Borda acende */
    box-shadow: 0 10px 30px rgba(230, 57, 70, 0.15); /* Glow sutil */
    transform: translateX(8px);
}

/* 2. Ícones com Glow Vermelho (Adeus Emojis) */
.icon-box {
    width: 60px;
    height: 60px;
    background: rgba(230, 57, 70, 0.1); /* Fundo vermelhinho */
    color: var(--vermelho); /* Ícone vermelho vivo */
    border: 1px solid rgba(230, 57, 70, 0.3);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: inset 0 0 10px rgba(230, 57, 70, 0.2);
    transition: all 0.4s ease;
}

/* O ícone inverte a cor no hover pra chamar muita atenção */
.info-item:hover .icon-box {
    background: var(--vermelho);
    color: #fff;
    box-shadow: 0 0 20px rgba(230, 57, 70, 0.5);
    transform: scale(1.1);
}

/* 3. Formulário de Luxo (Caixa e Inputs) */
.form-box-dark {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 4px solid var(--vermelho); /* Detalhe premium no topo */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
}

.input-group input, 
.input-group textarea {
    background: rgba(0, 0, 0, 0.3); /* Fundo mais escuro e imersivo */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 16px 20px;
}

/* Foco nos Inputs: Borda acende e ganha um glow interno */
.input-group input:focus, 
.input-group textarea:focus {
    background: rgba(0, 0, 0, 0.5);
    border-color: var(--vermelho);
    box-shadow: 0 0 15px rgba(230, 57, 70, 0.15);
}

/* 4. O Mapa Elegante */
.mapa-container {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    transition: 0.3s;
}

.mapa-container:hover {
    border-color: rgba(255, 255, 255, 0.2);
}
/* =========================================
   DESAPERTANDO O MEIO: MAIS RESPIRO E LUXO
   ========================================= */

/* 1. Mais espaço geral na seção (afasta das linhas vivas) */
.contato-principal-dark {
    padding: 120px 0 !important; 
}

/* 2. Mais espaço entre a coluna da esquerda e o formulário */
.flex-contato {
    gap: 80px !important; /* Aumenta a distância entre o zap e o form */
}

/* 3. Rebalanceando as larguras (O form pede mais espaço) */
.contato-esquerda {
    width: 40% !important; /* Diminui um tiquinho o lado dos botões */
}

.contato-direita {
    width: 60% !important; /* Dá mais espaço de tela pro formulário respirar */
}

/* 4. Formulário mais gordinho e espaçoso por dentro */
.form-box-dark {
    padding: 50px !important; /* Mais espaço interno pras letras não grudarem na borda */
}

/* 5. Espaçamento confortável entre os campos de digitar */
.input-group {
    margin-bottom: 28px !important; /* Afasta o "Seu Nome" do "Seu E-mail" */
}

.input-group input, 
.input-group textarea {
    padding: 18px 20px !important; /* Deixa a caixa de digitar mais alta e confortável */
    font-size: 1.05rem !important; /* Aumenta um tiquinho a letra de dentro */
}

/* 6. Afastar os cards da esquerda um pouquinho mais também */
.info-item {
    padding: 22px 25px !important;
    margin-bottom: 8px !important;
}
/* =========================================
   LOGIN PREMIUM DARK MODE (A Batalha Final)
   ========================================= */

/* 1. O Fundo da Direita (Onde fica o formulário) */
.login-form-area {
    background-color: #020b1a !important; /* Azul ultra escuro, quase preto */
}

/* 2. Textos do Topo (Logo e Subtítulo) */
.logo-area h2 {
    color: #ffffff !important;
}
.logo-area .subtitulo {
    color: #8a95a5 !important; /* Cinza azulado elegante */
}

/* 3. A Chave de "Entrar / Criar Conta" */
.toggle-btns {
    background: rgba(255, 255, 255, 0.05) !important; /* Fundo de vidro */
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.toggle-btns button {
    color: #8a95a5 !important;
}
/* O botão que está selecionado brilha em vermelho */
.toggle-btns button.active {
    background: var(--vermelho) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4) !important;
}

/* 4. O Botão do Google (Dark Glass) */
.btn-google {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}
.btn-google:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--vermelho) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* 5. A Linha Divisória ("ou use seu e-mail") */
.divisor {
    color: #8a95a5 !important;
}
.divisor::before, .divisor::after {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 6. Os Inputs (Onde digita e-mail e senha) */
.input-group input {
    background: rgba(0, 0, 0, 0.3) !important; /* Fundo imersivo */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Quando clica no input (Foco) */
.input-group input:focus {
    background: rgba(0, 0, 0, 0.5) !important;
    border-color: var(--vermelho) !important;
    box-shadow: 0 0 15px rgba(230, 57, 70, 0.2) !important;
}

/* 7. O Textinho Flutuante (Label) */
.input-group label {
    color: #8a95a5 !important;
}

/* Quando o texto sobe, ele precisa de um fundo pra tapar a linha do input */
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
    background-color: #020b1a !important; /* Mesma cor do fundo da página */
    color: var(--vermelho) !important; /* Fica vermelhinho */
}

/* 8. Link "Esqueceu a senha?" */
.esqueci {
    display: block;
    text-align: right;
    color: #8a95a5;
    font-size: 0.85rem;
    margin-bottom: 20px;
    text-decoration: none;
    transition: 0.3s;
}
.esqueci:hover {
    color: var(--vermelho);
}
/* --- BOTÃO VOLTAR (MOBILE E PC) --- */
.area-voltar {
    margin-top: 25px;
    text-align: center;
    /* Troquei a linha branca sólida por uma linha de vidro mais elegante */
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
    padding-top: 20px;
}

.link-voltar-mobile {
    color: #8a95a5; /* Cinza azulado padrão do nosso Dark Mode */
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: 0.3s;
    display: inline-block;
}

.link-voltar-mobile:hover {
    /* 🔴 A MÁGICA AQUI: Agora ele acende em vermelho! 🔴 */
    color: var(--vermelho); 
    transform: translateX(-5px); /* Move um pouquinho pra esquerda no hover */
}
/* =========================================
   ALINHAMENTO FINO: ESTICANDO O MAPA
   ========================================= */
.mapa-container iframe {
    height: 280px !important; /* Estica o mapa pra cravar com o formulário */
}
 /* =========================================
   PROVA SOCIAL: MURAL DE ELITE (CURSOS)
   ========================================= */

/* =========================================
   SOLDAGEM DE FRESTAS E OVERLAPS 
   ========================================= */

/* 1. Garante que a seção acima da linha encoste 100% no fundo */
.prova-social-dark {
    margin-bottom: 0 !important;
}

/* 2. Força a linha viva a colar embaixo, sem nenhuma margem */
.linha-viva {
    margin: 0 !important;
    display: block !important;
}

/* 3. Evita que o footer empurre a linha pra cima */
.main-footer {
    margin-top: 0 !important;
}

/* 4. PRECAUÇÃO MÁXIMA: Se a fresta azul vazar por causa do "body", nós escurecemos ele todo */
body {
    background-color: #020b1a !important; /* Muda de --cinza pra azul escurão */
}
.galeria-grid {
    display: flex;
    gap: 30px;
    align-items: stretch;
}

/* O Vídeo na Esquerda */
.video-destaque {
    flex: 1.2; /* Ocupa um pouco mais de espaço que as fotos */
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    min-height: 400px;
}

.video-destaque video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0; left: 0;
}

/* Uma película por cima do vídeo com um ícone de play */
.overlay-video {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(2, 11, 26, 0.9), transparent);
    padding: 30px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 15px;
}

.overlay-video h3 {
    color: white;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

.pulse-play {
    color: var(--vermelho);
    font-size: 2.5rem;
    animation: pulsarNeon 1.5s infinite alternate;
}

/* O Grid de 4 Fotos na Direita */
.fotos-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colunas */
    gap: 20px;
}

.foto-item {
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.05);
    background-size: cover;
    background-position: center;
    min-height: 190px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* O Efeito Premium ao passar o mouse nas fotos */
.foto-item:hover {
    transform: scale(1.05) translateY(-5px);
    border-color: var(--vermelho);
    box-shadow: 0 15px 30px rgba(230, 57, 70, 0.4);
    z-index: 5;
}

/* AQUI VOCÊ COLOCA O CAMINHO DAS SUAS FOTOS REAIS */
.foto1 { background-image: url('turma\ 1.jpeg'); } 
.foto2 { background-image: url('turma\ 2.jpeg'); } /* A foto da galera do APH */
.foto3 { background-image: url('aprovados\ 3.png'); } /* Troque pelo nome da 3ª foto */
.foto4 { background-image: url('turma\ 4.jpeg'); } /* Troque pelo nome da 4ª foto */

/* Responsividade Celular */
@media (max-width: 992px) {
    .galeria-grid { flex-direction: column; }
    .video-destaque { min-height: 300px; }
}
/* =========================================
   NOVO RODAPÉ PREMIUM (CLEAN E ESCURO)
   ========================================= */
.main-footer {
    background-color: #030d1a; /* O fundo ultra escuro limpo e liso */
    color: #e0e0e0; 
    padding: 80px 0 30px 0;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Linhazinha fina de separação super chique */
}

/* =========================================
   BANNER PRÉ-RODAPÉ (CONTATO)
   ========================================= */
.banner-pre-rodape {
    width: 100%;
    /* 🔴 A MÁGICA TÁ AQUI: Aumentei de 250px para 400px */
    height: 400px; 
    background-image: url('banner.jfif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    box-shadow: inset 0px 15px 30px #020b1a, inset 0px -15px 30px #020b1a;
    margin-top: 40px; 
}

/* Responsividade: Diminui a altura no celular, mas deixa maior que antes */
@media (max-width: 768px) {
    .banner-pre-rodape {
        height: 200px; /* Aumentei aqui também */
    }
}
/* =========================================
   FAIXA DE IMPACTO (SUBSTITUI OS NÚMEROS)
   ========================================= */
.faixa-impacto {
    /* Fundo escuro com um leve degradê pra dar profundidade */
    background: linear-gradient(to right, #020b1a, #051024, #020b1a);
    padding: 70px 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.texto-impacto {
    font-size: 2.8rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* O vermelho lindo e brilhante que você pediu */
.destaque-glow {
    color: var(--vermelho);
    text-shadow: 0 0 25px rgba(230, 57, 70, 0.6); /* Brilho neon espalhado */
}

/* Deixando responsivo pro celular */
@media (max-width: 768px) {
    .faixa-impacto {
        padding: 50px 20px;
    }
    .texto-impacto {
        font-size: 1.8rem;
    }
}
/* =========================================
   DIFERENCIAIS PREMIUM (SUBSTITUI OS EMOJIS)
   ========================================= */
.diferenciais {
    padding: 100px 0;
    background-color: #020b1a; /* Mantendo o fundo Dark */
}

.grid-diferenciais {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.box-diferencial {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 40px 30px !important;
    border-radius: 20px !important;
    text-align: left !important;
    transition: all 0.4s ease !important;
    box-shadow: inset 0 0 0 transparent !important;
}

.box-diferencial:hover {
    transform: translateY(-10px) !important;
    border-color: var(--vermelho) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 15px 35px rgba(230, 57, 70, 0.15) !important;
}

.icone-dif {
    font-size: 2.2rem !important;
    color: var(--vermelho) !important;
    margin-bottom: 25px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 70px !important;
    height: 70px !important;
    background: rgba(230, 57, 70, 0.1) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(230, 57, 70, 0.3) !important;
    box-shadow: 0 0 15px rgba(230, 57, 70, 0.2) !important;
}

.box-diferencial h3 {
    color: white !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
}

.box-diferencial p {
    color: #8a95a5 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

/* Responsividade pro Celular */
@media (max-width: 992px) {
    .grid-diferenciais {
        grid-template-columns: 1fr; /* Fica um embaixo do outro no cel */
    }
}
/* =========================================
   COMANDO DE ELITE (SUBSTITUI OS ESPECIALISTAS)
   ========================================= */
.especialistas-premium {
    padding: 100px 0;
    background-color: #020b1a; /* Mantendo o fundo Dark */
}

/* =========================================
   COMANDO DE ELITE (AGORA COM 4 COLUNAS)
   ========================================= */

.grid-comando {
    display: grid;
    /* 🔴 A MÁGICA TÁ AQUI: Mudei de repeat(3, 1fr) para repeat(4, 1fr) */
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px; /* Diminui tiquinho o espaço pra caber tudo suave */
    justify-content: center;
}

.card-comando {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    text-align: center !important;
    transition: all 0.4s ease !important;
    box-shadow: inset 0 0 0 transparent !important;
}

.card-comando:hover {
    transform: translateY(-8px) !important;
    border-color: var(--vermelho) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 15px 35px rgba(230, 57, 70, 0.15) !important;
}

.foto-wrap {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 25px !important;
}

.foto-operacional {
    height: 140px !important;
    width: 140px !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 50% !important;
    border: 2px solid var(--vermelho) !important;
    box-shadow: 0 0 15px rgba(230, 57, 70, 0.3) !important;
    transition: all 0.4s ease !important;
}

.card-comando:hover .foto-operacional {
    box-shadow: 0 0 25px rgba(230, 57, 70, 0.5) !important;
}

.info-operacional h3 {
    color: white !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    margin-bottom: 5px !important;
}

.role-operacional {
    color: var(--vermelho) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.desc-operacional {
    color: #8a95a5 !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    max-width: 280px !important;
    margin: 0 auto !important;
}

/* Responsividade pro Celular */
@media (max-width: 992px) {
    .grid-comando {
        grid-template-columns: 1fr; /* Fica um embaixo do outro no cel */
    }
}
/* =========================================
   CURSOS PREMIUM (VISUAL TÁTICO FUMÊ)
   ========================================= */
.cursos-premium {
    padding: 100px 0;
    background-color: #020b1a; /* Mantendo o fundo Dark */
}

/* =========================================
   AJUSTE DE ESPAÇAMENTO E FUNDO DO CARD
   ========================================= */

.grid-cursos-premium {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 50px; /* ISSO AQUI DESCOLA O CARD DA LINHA VERMELHA LÁ DE CIMA */
}

/* O Visual do Card (Agora com fundo destacado) */
.card-curso-premium {
    /* Novo fundo: um degradê super chique que dá corpo pro card */
    background: linear-gradient(145deg, #0a1b35, #030d1e) !important; 
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Borda um tiquinho mais visível */
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    padding: 25px !important;
    transition: all 0.4s ease !important;
    
    /* Uma sombra leve debaixo do card pra ele parecer que tá flutuando */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; 
}

.card-curso-premium:hover {
    transform: translateX(5px) !important;
    border-color: var(--vermelho) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 15px 35px rgba(230, 57, 70, 0.1) !important;
}

.foto-curso-premium {
    flex: 0 0 250px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-right: 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.foto-curso-premium img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: all 0.5s ease !important;
}

.card-curso-premium:hover .foto-curso-premium img {
    transform: scale(1.05) !important;
}

/* TEXTO 100% ALINHADO À ESQUERDA */
.info-curso-premium {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; 
    justify-content: center !important;
}

.info-curso-premium h3 {
    color: white !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-top: 0 !important; /* CORRIGIDO */
    margin-bottom: 5px !important; /* CORRIGIDO */
}

.info-curso-premium .desc-operacional {
    color: #8a95a5 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin: 5px 0 20px 0 !important; /* CORRIGIDO */
    text-align: left !important; /* CORRIGIDO */
    max-width: 90% !important; /* CORRIGIDO */
}

/* A Lista Tática (Ícones profisisonais Menores e Elegantes) */
.info-lista-premium {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important; /* CORRIGIDO O ESPAÇO */
}

.info-lista-premium li {
    display: flex !important;
    align-items: center !important;
    color: #e0e0e0 !important;
    font-size: 0.85rem !important; /* CORRIGIDO O TAMANHO DA FONTE */
    font-weight: 600 !important;
}

.info-lista-premium li i {
    color: var(--vermelho) !important;
    font-size: 1rem !important; /* CORRIGIDO */
    margin-right: 8px !important; /* CORRIGIDO */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 35px !important; /* CORRIGIDO */
    height: 35px !important; /* CORRIGIDO */
    background: rgba(230, 57, 70, 0.1) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(230, 57, 70, 0.3) !important;
    box-shadow: 0 0 10px rgba(230, 57, 70, 0.2) !important;
}

/* A Coluna de Compra */
.compra-curso-premium {
    flex: 0 0 200px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-end !important;
    padding-left: 30px !important;
}

.preco-premium {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: white !important;
    margin-bottom: 20px !important;
}

.btn-comprar-premium {
    background: transparent !important;
    color: var(--vermelho) !important;
    border: 2px solid var(--vermelho) !important;
    padding: 12px 25px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    letter-spacing: 1px !important;
    transition: 0.3s !important;
    text-align: center !important;
    box-shadow: 0 0 15px rgba(230, 57, 70, 0.3) !important;
}

.btn-comprar-premium:hover {
    background: var(--vermelho) !important;
    color: white !important;
    box-shadow: 0 0 25px rgba(230, 57, 70, 0.5) !important;
    transform: scale(1.05) !important;
}

.btn-comprar-premium i {
    margin-right: 8px !important;
}

/* Responsividade pro Celular (Pra não quebrar o layout) */
@media (max-width: 992px) {
    .card-curso-premium {
        flex-direction: column !important; /* Bota as coisas em pé no celular */
        text-align: center !important;
    }
    
    .foto-curso-premium {
        margin-right: 0 !important;
        margin-bottom: 20px !important;
        width: 100% !important;
        flex: auto !important;
    }

    .info-curso-premium {
        align-items: center !important; /* Centraliza no celular */
        text-align: center !important;
    }

    .info-curso-premium .desc-operacional {
        text-align: center !important;
        max-width: 100% !important;
    }

    .info-lista-premium {
        justify-content: center !important;
    }

    .compra-curso-premium {
        margin-top: 25px !important;
        padding-left: 0 !important;
        align-items: center !important;
    }
}
/* =========================================
   PÁGINA DE PARCERIAS (DESIGN MODERNO E CLEAN)
   ========================================= */

.secao-parceiros-moderna {
    padding: 80px 0 120px 0;
    background-color: #020b1a;
}

.titulo-sessao-secundaria {
    color: rgb(255, 255, 255);
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 10px;
}

/* =========================================
   BLOCO DE CHANCELAS (ALTAR DE TROFÉUS)
   ========================================= */

.bloco-chancelas-premium {
    /* Degradê suave de cima pra baixo e borda de vidro */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(2, 11, 26, 0) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* 🔴 A MÁGICA 1: Linha tática vermelha grossa no topo */
    border-top: 3px solid var(--vermelho); 
    border-radius: 24px;
    padding: 60px 40px;
    margin: 60px 0;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    overflow: hidden;
}

/* 🔴 A MÁGICA 2: Um refletor vermelho muito fraco iluminando as logos por trás */
.bloco-chancelas-premium::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 100%;
    background: radial-gradient(ellipse at top, rgba(230, 57, 70, 0.08) 0%, transparent 70%);
    pointer-events: none; /* Pra não bugar o mouse nas logos */
    z-index: 0;
}

.logo-wall-gringo {
    position: relative;
    z-index: 1; /* Mantém as logos acima da luz de fundo */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 60px; /* Espaço de sobra entre elas */
    margin-top: 50px;
}

/* 🔴 A MÁGICA 3: O Pulinho no Hover */
.chancela-img {
    height: 75px; 
    width: auto;
    filter: grayscale(100%) opacity(40%); /* Bem cinza e apagada */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Transição super suave */
    cursor: pointer;
}

.chancela-img:hover {
    filter: grayscale(0%) opacity(100%) drop-shadow(0 10px 20px rgba(255, 255, 255, 0.15));
    transform: scale(1.15) translateY(-8px); /* A logo cresce e dá um "pulinho" pra cima! */
}

/* Responsividade Celular */
@media (max-width: 768px) {
    .bloco-chancelas-premium {
        padding: 40px 20px;
    }
    .logo-wall-gringo {
        gap: 30px;
    }
    .chancela-img {
        height: 55px;
    }
}

/* =========================================
   BLOCO 2: EMPRESAS (Cards de Fotos Premium)
   ========================================= */

.bloco-empresas {
    margin-top: 60px;
}








.tag-treinamento {
    background: rgba(230, 57, 70, 0.2);
    color: #e63946;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid rgba(230, 57, 70, 0.3);
}

/* No celular, fica uma embaixo da outra */
@media (max-width: 992px) {
    .grid-empresas-fotos {
        grid-template-columns: 1fr; 
    }
}
/* =========================================
   NOVO TOPO DE PARCERIAS (MALHA TÁTICA SEM IMAGEM)
   ========================================= */

.hero-parcerias-premium {
    /* FUNDO 100% CÓDIGO - Sem imagens! Malha tática e brilho suave */
    background-color: #020b1a;
    background-image: 
        radial-gradient(circle at top, rgba(230, 57, 70, 0.08) 0%, transparent 60%),
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    background-position: center top;
    
    padding: 160px 0 100px 0; 
    border-bottom: 2px solid var(--vermelho);
    box-shadow: 0 4px 20px rgba(230, 57, 70, 0.3);
    position: relative;
    z-index: 10;
}

.badge-alerta-parcerias {
    display: inline-block;
    background: rgba(230, 57, 70, 0.1);
    color: var(--vermelho);
    border: 1px solid var(--vermelho);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 30px; 
    text-transform: uppercase;
}

.titulo-parcerias {
    font-size: 4.5rem; 
    font-weight: 800;
    color: white;
    margin: 0 0 20px 0; 
    letter-spacing: 1px;
    text-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.txt-vermelho-brilho {
    color: var(--vermelho);
    text-shadow: 0 0 20px rgba(230, 57, 70, 0.5);
}

/* --- AJUSTE DE VISIBILIDADE DOS SUBTEXTOS --- */

.desc-chancelas {
    /* Cor antiga era muito escura, essa nova dá leitura total */
    color: #a4b1cd !important; 
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 40px;
    /* Um leve brilho interno pra ajudar na nitidez */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.subtitulo-parcerias {
    /* Mesmo ajuste para o texto lá do topo (Hero) */
    color: #a4b1cd !important;
    font-size: 1.25rem;
    line-height: 1.6;
    max-width: 750px; 
    margin: 0 auto; 
    font-weight: 400;
}

/* Se você usou a classe .desc-operacional lá nos Cursos, 
   vale dar um tapa nela também pra ficar tudo padrão: */
.desc-operacional {
    color: #a4b1cd !important;
}
/* Responsividade pro Celular */
@media (max-width: 768px) {
    .hero-parcerias-premium { padding: 120px 0 80px 0; }
    .titulo-parcerias { font-size: 3.2rem; }
    .subtitulo-parcerias { font-size: 1.1rem; padding: 0 20px; }
}
/* =========================================
   NOVO TOPO DE PARCERIAS (FOTO INTEGRADA)
   ========================================= */

.hero-parcerias-premium {
    /* 🔴 A MÁGICA: A foto vira o fundo, centralizada e cobrindo tudo */
    background: url('UNIAO.jpeg') center/cover no-repeat;
    
    /* Espaçamento imponente */
    padding: 180px 0 120px 0; 
    border-bottom: 2px solid var(--vermelho);
    box-shadow: 0 4px 20px rgba(230, 57, 70, 0.3);
    position: relative; /* Necessário pro overlay funcionar */
    z-index: 10;
}

/* 🔴 A MÁSCARA TÁTICA: Escurece a foto pra sumir o fundo cinza e dar leitura */
.overlay-tatico {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente que começa bem escuro no topo/fundo e clareia um pouco no meio */
    background: linear-gradient(to bottom, #020b1a 0%, rgba(2, 11, 26, 0.8) 50%, #020b1a 100%);
    z-index: 1;
}

/* Garante que o texto fique por cima da máscara */
.hero-conteudo-centralizado {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* --- ESTILOS DOS TEXTOS (Mantidos e Refinados) --- */
.badge-alerta-parcerias {
    display: inline-block;
    background: rgba(230, 57, 70, 0.2); /* Um pouco mais opaco pra destacar na foto */
    color: var(--vermelho);
    border: 1px solid var(--vermelho);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 25px; 
    text-transform: uppercase;
}

.titulo-parcerias {
    font-size: 4.5rem; 
    font-weight: 800;
    color: white;
    margin: 0 0 20px 0; 
    letter-spacing: 1px;
    /* Sombra mais pesada pra destacar da foto de fundo */
    text-shadow: 0 5px 20px rgba(0,0,0,0.8);
}

.txt-vermelho-brilho {
    color: var(--vermelho);
    text-shadow: 0 0 20px rgba(230, 57, 70, 0.6);
}

.subtitulo-parcerias {
    color: white; /* Mudei pra branco puro pra garantir leitura total sobre a foto */
    font-size: 1.3rem;
    line-height: 1.6;
    max-width: 750px; 
    margin: 0 auto; 
    font-weight: 400;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

/* --- RESPONSIVIDADE CELULAR --- */
@media (max-width: 768px) {
    .hero-parcerias-premium { padding: 140px 0 90px 0; }
    .titulo-parcerias { font-size: 3.2rem; }
    .subtitulo-parcerias { font-size: 1.1rem; }
}
.hero-cursos-premium {
    /* 📸 Aqui você escolhe a foto do treinamento (ex: SÃO JOSÉ.jpeg) */
    background: url('curso\ ideia\ 2.jpeg') center/cover no-repeat;
    padding: 180px 0 120px 0; 
    border-bottom: 2px solid var(--vermelho);
    box-shadow: 0 4px 20px rgba(230, 57, 70, 0.3);
    position: relative;
    z-index: 10;
}
/* Efeito de destaque para a área de logos */
.bloco-chancelas {
    background: rgba(255, 255, 255, 0.03); /* Fundo sutil */
    padding: 60px 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 50px;
    backdrop-filter: blur(10px); /* Efeito de vidro */
}


/* =========================================
   SEÇÃO SEJA UM PARCEIRO (ESTILO PREMIUM)
   ========================================= */

.seja-parceiro-cta {
    padding: 80px 0;
    background-color: #020b1a;
}

.box-parceria-premium {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(230, 57, 70, 0.05) 100%);
    border: 1px solid rgba(230, 57, 70, 0.3);
    border-radius: 20px;
    padding: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

/* Efeito de brilho sutil no fundo da caixa */
.box-parceria-premium::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(230, 57, 70, 0.05) 0%, transparent 70%);
    z-index: 0;
}

.cta-texto {
    position: relative;
    z-index: 1;
    flex: 2;
}

.cta-texto h2 {
    color: white;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.2;
}

.cta-texto p {
    color: #8a95a5;
    font-size: 1.1rem;
    margin: 0;
}

.cta-botao {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.btn-whatsapp-corporativo {
    background-color: var(--vermelho);
    color: white;
    padding: 18px 35px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s ease;
    box-shadow: 0 10px 20px rgba(230, 57, 70, 0.3);
    white-space: nowrap;
}

.btn-whatsapp-corporativo i {
    font-size: 1.4rem;
}

.btn-whatsapp-corporativo:hover {
    transform: translateY(-5px);
    background-color: #f14654;
    box-shadow: 0 15px 30px rgba(230, 57, 70, 0.5);
    color: white;
}

/* Responsividade para Celular */
@media (max-width: 992px) {
    .box-parceria-premium {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
    }
    
    .cta-botao {
        justify-content: center;
        width: 100%;
    }
    
    .cta-texto h2 {
        font-size: 1.8rem;
    }
}
/* =========================================
   GALERIA DE CERTIFICADOS (VISUAL PREMIUM)
   ========================================= */

.secao-exposicao-certificados {
    padding: 100px 0;
    background-color: #020b1a;
}

/* =========================================
   GALERIA DE CERTIFICADOS (FORCE 3x2 DESKTOP)
   ========================================= */

/* Esta regra substitui a anterior quando as duas classes estão juntas */
.grid-certificados-galeria.grid-force-3x2 {
    display: grid;
    /* 🔴 A MÁGICA TÁ AQUI: Travamos exatamente 3 colunas iguais no PC */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; /* Mantém o espaçamento elegante */
    margin-top: 40px;
}

/* --- REGRAS DE RESPONSIVIDADE (Pra não amassar tudo no celular) --- */

@media (max-width: 1024px) {
    /* No Tablet (telas médias), ele faz 2 colunas */
    .grid-certificados-galeria.grid-force-3x2 {
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 768px) {
    /* No Celular (telas pequenas), ele empilha 1 por linha pra ficar grande */
    .grid-certificados-galeria.grid-force-3x2 {
        grid-template-columns: 1fr; 
    }
}

.card-certificado-galeria {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.card-certificado-galeria:hover {
    transform: translateY(-10px);
    border-color: var(--vermelho);
    background: rgba(230, 57, 70, 0.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* Moldura do Certificado - AGORA BRANCA PARA SUMIR COM BORDAS */
.moldura-imagem-certificado {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; 
    background: #ffffff; /* 🔴 O segredo está aqui: fundo branco */
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.1);
}

.moldura-imagem-certificado img {
    max-width: 92%; /* Dá um respiro nas bordas pra parecer um quadro */
    max-height: 92%;
    object-fit: contain;
    /* Adiciona uma sombra suave no "papel" do certificado */
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2)); 
    transition: 0.5s ease;
}

.card-certificado-galeria:hover .moldura-imagem-certificado img {
    transform: scale(1.08);
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.3)) brightness(1.05);
}

/* EFEITO DE SCANNER NEON */
.scanner-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--vermelho), transparent);
    box-shadow: 0 0 20px var(--vermelho), 0 0 40px var(--vermelho);
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

.card-certificado-galeria:hover .scanner-line {
    opacity: 1;
    animation: scanAnimation 2.5s ease-in-out infinite;
}

@keyframes scanAnimation {
    0% { top: -5%; }
    50% { top: 100%; }
    100% { top: -5%; }
}

/* Ícone de Lupa mais elegante */
.lupa-zoom {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: var(--vermelho);
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    opacity: 0;
    transform: scale(0.5);
    transition: 0.4s ease;
    z-index: 6;
}

.card-certificado-galeria:hover .lupa-zoom {
    opacity: 1;
    transform: scale(1);
}

/* Textos */
.info-certificado-galeria h4 {
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.info-certificado-galeria p {
    color: var(--vermelho);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Ajuste Especial para Telas Pequenas */
@media (max-width: 768px) {
    .grid-certificados-galeria { grid-template-columns: 1fr; }
    .moldura-imagem-certificado { aspect-ratio: 1 / 1; }
}
/* =========================================
   ESTILO DOS PREÇOS (DESTAQUE TÁTICO)
   ========================================= */

.preco-premium {
    font-size: 2.2rem;
    font-weight: 900;
    color: #ffffff;
    /* O famoso brilho neon tático no preço */
    text-shadow: 0 0 15px rgba(230, 57, 70, 0.7);
    display: block;
    margin-bottom: 15px;
    line-height: 1;
}

.txt-a-partir {
    font-size: 0.9rem;
    color: var(--vermelho); /* 🔴 A MÁGICA AQUI: Puxando o vermelho oficial */
    font-weight: 800; /* Deixei a fonte um pouco mais forte pra destacar */
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(230, 57, 70, 0.4); /* Um brilho vermelho bem suave pra combinar */
    display: block;
    margin-bottom: 5px;
}
/* Etiqueta da Data Presencial */
        .badge-data-turma {
            display: inline-block;
            background: rgba(230, 57, 70, 0.1); /* Fundo vermelho bem transparente */
            color: #ff6b76; /* Vermelho claro para dar leitura */
            border: 1px solid rgba(230, 57, 70, 0.3);
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
            margin-top: 5px;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .badge-data-turma i { margin-right: 5px; }
      /* =========================================
   AJUSTE FINO: DESAPERTANDO A GALERIA
   ========================================= */

/* 1. Dá muito mais espaço embaixo das fotos, empurrando a linha vermelha pra longe */
.prova-social-dark {
    padding: 120px 0 150px 0 !important; /* 120px no topo, 150px embaixo (respiro) */
}

/* 2. Deixa o Vídeo Principal MAIOR e mais imponente */
.video-destaque {
    min-height: 500px !important; /* Era 400px, agora cresceu bastante */
}

/* 3. Estica as 4 fotos da direita para acompanharem o vídeo gigante */
.foto-item {
    min-height: 240px !important; /* Era 190px, agora ficaram altas */
}  
/* =========================================
   EXPANDINDO A GALERIA (SOMENTE NO PC) - V5
   ========================================= */
@media (min-width: 993px) {
    /* 1. Mantém a tela largona */
    .prova-social-dark .container {
        max-width: 1500px !important; 
    }

    /* 2. O VÍDEO VOLTA A SER O REI DA TELA */
    .video-destaque {
        min-height: 500px !important; /* Altura calculada para bater com as fotos menores */
        flex: 1.5 !important; /* Roubou a largura máxima de volta! */
    }

    /* 3. A GRADE DE FOTOS ENCOLHE */
    .fotos-grid {
        flex: 1 !important; /* Perdeu o peso extra, voltando pro tamanho normal */
    }

    /* 4. ACHATAMOS AS FOTOS PARA NÃO CORTAR AS LATERAIS */
    .foto-item {
        /* Se elas ficaram mais estreitas, têm que ficar mais baixinhas pra não cortar */
        min-height: 240px !important; /* 240px + 240px + 20px de espaço = 500px (Alinhamento cravado com o vídeo!) */
    }
}
/* =========================================
   AJUSTE DE ENQUADRAMENTO (FOTO DA AMBULÂNCIA)
   ========================================= */
.foto3 {
    /* 15% afasta um pouco da esquerda, e o 'top' garante que não corte em cima */
    background-position: 31% top !important; 
}
/* =========================================
   AJUSTE DE ENQUADRAMENTO - PREMAG
   ========================================= */
.foto-premag {
    /* O primeiro valor (25%) mexe na horizontal (esquerda/direita)
       O segundo valor (center) mantém o meio da foto na vertical
    */
    object-position: 70% center !important; 
}
/* =========================================
   ESPAÇAMENTO: SEPARANDO PARCERIAS E CREDENCIAMENTOS
   ========================================= */
.bloco-chancelas-premium {
    margin-top: 185px !important; /* Esse é o "empurrãozinho" para baixo */
}
/* =========================================
   ESPAÇAMENTO: PUXANDO O CTA PARA CIMA
   ========================================= */
.seja-parceiro-cta {
    /* Um valor negativo funciona como um ímã puxando pra cima */
    margin-top: -130px !important; 
}
/* =========================================
   SEÇÃO DESTAQUE (VIDA) - ELEGÂNCIA FULL-WIDTH
   ========================================= */
.secao-hall-fama-vip {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 100px !important; 
    margin-bottom: 80px !important; 
    padding: 120px 0; 

    background-image: url('vida 1.jpeg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;

   
    border: none !important; 
    
   
    box-shadow: 0 -4px 25px rgba(230, 57, 70, 0.4), 0 4px 25px rgba(230, 57, 70, 0.4) !important;

    overflow: hidden;
}

/* OVERLAY ESCURO (Película Tática) */
.overlay-tatico-vip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 11, 26, 0.9) !important; /* Escuro premium igual ao ref */
    z-index: 1;
}

/* CONTEÚDO (Mantendo o respiro do container do site) */
.conteudo-hall-vip {
    position: relative;
    z-index: 5;
    text-align: center; /* Centralizado igual ao ref */
    max-width: 1000px !important; /* Texto não espalha muito, mantendo o respiro */
    margin: 0 auto !important; /* Centraliza o bloco de texto */
}

/* TÍTULO (Ajuste de cor e peso) */
.titulo-vip {
    font-size: 3.5rem; 
    font-weight: 800;
    color: #ffffff !important; /* Branco absoluto */
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 1.1;
}

.sub-vip {
    font-weight: 400;
    font-size: 2.2rem;
    color: #a1aab3 !important; /* Tom cinza metálico chique */
    text-transform: none;
    letter-spacing: 0;
}

/* Ajustes pra não quebrar no celular */
@media (max-width: 992px) {
    .secao-hall-fama-vip {
        padding: 80px 0;
        margin-top: 60px !important;
        background-attachment: scroll !important; /* Tira o parallax no celular */
    }
    .titulo-vip {
        font-size: 2.2rem;
    }
    .sub-vip {
        font-size: 1.5rem;
    }
}
.texto-citacao-vip {
    color: #e2e8f0; /* Um branco levemente prateado, muito chique */
    text-align: center;
    max-width: 800px;
    margin: 0 auto 30px auto;
    
    /* A MÁGICA DA ELEGÂNCIA TÁ AQUI */
    font-size: 1.25rem; /* Um pouco maior pra dar presença */
    font-style: italic; /* Letra deitada (dá o tom de citação chique) */
    font-weight: 300; /* Letra mais fininha, super moderna */
    line-height: 1.7; /* Espaço entre as linhas pra respirar */
    letter-spacing: 0.5px; /* Afasta um tiquinho as letras */
}



/* 🔴 A MÁGICA DA ANIMAÇÃO (FADE SEM PISCAR) */
@keyframes crossfade-np {
    0% { opacity: 0; }
    5% { opacity: 1; }  /* Foto aparece e fica */
    45% { opacity: 1; }
    50% { opacity: 0; } /* Começa a sumir */
    100% { opacity: 0; } /* Fica sumida até o fim do ciclo */
}

.grid-empresas-fotos {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
    margin-top: 40px !important;
}

@media (max-width: 992px) {
    .grid-empresas-fotos { grid-template-columns: 1fr !important; }
}

/* A CAIXA DO CARD (A Jaula) */
.card-empresa-foto {
    position: relative !important;
    
    
    height: 460px !important; 
    
    border-radius: 20px !important;
    overflow: hidden !important; 
    background: #020b1a !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.4s ease !important;
    display: block !important;
}

.card-empresa-foto:hover {
    transform: translateY(-8px) !important;
    border-color: var(--vermelho) !important;
    box-shadow: 0 15px 35px rgba(230, 57, 70, 0.3) !important;
}

/* 2. FORÇANDO AS FOTOS A FICAREM DENTRO DA CAIXA */
.card-empresa-foto img {
    position: absolute !important; 
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; /* 100% do card, não do site */
    height: 100% !important;
    object-fit: cover !important; 
    object-position: center 20% !important; 
    display: block !important;
    transition: transform 0.6s ease, opacity 0.8s ease !important;
}

.card-empresa-foto:hover img { 
    transform: scale(1.08) !important; 
}

/* 3. O TEXTO SOBRE A FOTO (Overlay de Vidro) */
.overlay-empresa {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 40px 20px 20px 20px !important;
    background: linear-gradient(to top, rgba(2, 11, 26, 1) 0%, rgba(2, 11, 26, 0.7) 50%, transparent 100%) !important;
    text-align: left !important;
    z-index: 20 !important;
    pointer-events: none !important; 
}

.overlay-empresa h4 { color: #ffffff !important; font-size: 1.5rem !important; margin-top: 8px !important; font-weight: 700 !important; text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important; }
.tag-treinamento { background: rgba(230, 57, 70, 0.2) !important; color: #e63946 !important; padding: 4px 10px !important; border-radius: 50px !important; font-size: 0.7rem !important; font-weight: 600 !important; text-transform: uppercase !important; border: 1px solid rgba(230, 57, 70, 0.3) !important; }

/* =========================================
   4. MOTORES DE ANIMAÇÃO (FIM DA TELA PRETA)
   ========================================= */

/* Foto 1 SEMPRE fixada no fundo pra nunca ficar preto */
.mosaico-np-automatico img:nth-child(1),
.carrossel-jctm img:nth-child(1) {
    opacity: 1 !important; z-index: 1 !important;
}

/* Motor 2 Fotos (São José, New Power, Premag) */
.mosaico-np-automatico img:nth-child(2) {
    z-index: 2 !important; animation: pisca-2 8s infinite !important;
}
@keyframes pisca-2 { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* Motor 3 Fotos (JCTM) */
.carrossel-jctm img:nth-child(2) { z-index: 2 !important; animation: fade-jctm-2 12s infinite !important; }
.carrossel-jctm img:nth-child(3) { z-index: 3 !important; animation: fade-jctm-3 12s infinite !important; }

@keyframes fade-jctm-2 { 0%, 25% { opacity: 0; } 33%, 66% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes fade-jctm-3 { 0%, 58% { opacity: 0; } 66%, 95% { opacity: 1; } 100% { opacity: 0; } }

/* ===================================================
   MÁGICA DO CELULAR (MENU FIXO FININHO E CARDS CORRIGIDOS)
   =================================================== */
@media (max-width: 768px) {
    
    .btn-menu-mobile, .btn-menu-fechar {
        display: none !important;
    }

    /* 1. HEADER PRESO NO TOPO DESCENDO JUNTO COM A TELA (SUPER FINO) */
    header {
        position: fixed !important; /* Voltou a ficar preso e desce com você! */
        top: 0;
        left: 0;
        width: 100% !important;
        z-index: 9999 !important;
        background: rgba(5, 16, 36, 0.85) !important; 
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    
    /* Empurra o site pra baixo pra não ficar escondido atrás do menu de vidro */
    body {
        padding-top: 60px !important; 
    }
    
    header nav {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        background: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important; 
    }
    
    .nav-flex {
        flex-direction: column !important;
        gap: 2px !important; /* Espaço esmagado no limite */
        padding: 4px 5px !important; /* O mínimo possível de altura */
        text-align: center;
    }
    
    .logo h2 {
        font-size: 1rem !important; /* Fonte bem menor */
        margin: 0 !important;
        line-height: 1 !important;
    }
    
    .menu-items {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 2px 8px !important; 
        margin-bottom: 2px !important;
        padding: 0 !important;
    }
    
    .menu-items li a {
        font-size: 0.7rem !important; /* Fonte micro para os links */
    }
    
    #btn-login-header {
        width: auto !important; 
        display: inline-block !important;
        padding: 2px 12px !important; /* Botão super fininho */
        font-size: 0.65rem !important;
        margin: 0 !important;
    }

    /* 2. CORREÇÃO DOS CARDS VAZANDO (O SEGREDO TÁ AQUI) */
    /* Deixa apenas o "Ativo e Operante" em linha reta */
    .status-conta {
        white-space: nowrap !important;
        display: inline-block !important;
    }
    
    /* Devolve a quebra de linha normal para os selos vermelhos e amarelos dos cursos */
    .badge-alerta, [class*="status"]:not(.status-conta), [class*="badge"] {
        white-space: normal !important; 
        word-wrap: break-word !important;
        height: auto !important;
        text-align: center !important;
        padding: 8px !important;
    }
    
    div:has(> .status-conta), 
    p:has(> .status-conta) {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
        text-align: center !important;
    }

    /* 3. CONTROLAR OS TEXTOS GIGANTES (HERO) */
    h1, .hero-texto-central h1, .hero-inicial-textos h1 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word;
    }
    .subtitulo-animado, .hero-inicial-textos p {
        font-size: 1rem !important;
        line-height: 1.5;
    }

    /* 4. DESESMAGAR OS CONTAINERS DO SITE */
    .hero-inicial-wrapper, 
    .flex-contato, 
    .grid-diferenciais, 
    .grid-comando,
    .info-cards {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .contato-esquerda, 
    .contato-direita, 
    .box-diferencial, 
    .card-comando,
    .info-item,
    .form-box-dark {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* 5. ARRUMAR OS INPUTS DO FORMULÁRIO */
    .input-group input, 
    .input-group textarea {
        width: 100% !important;
        display: block;
        box-sizing: border-box;
        padding: 12px !important;
    }

    /* 6. AJUSTAR O CAPTCHA E BOTÃO DE ENVIAR */
    .h-captcha {
        width: 100% !important;
        display: flex;
        justify-content: center;
        transform: scale(0.9);
        transform-origin: center;
        margin: 15px 0;
    }
    .form-box-dark button[type="submit"] {
        width: 100% !important;
        padding: 12px !important;
    }

    /* 7. VÍDEO DO LOGO DA ÁGUIA */
    .hero-inicial-logo {
        width: 120px !important;
        height: 120px !important;
        margin-bottom: 15px;
    }
}