/* ============================================================
   Microcamp Website — VERSÃO IDENTIDADE TOTAL
   ============================================================ */

:root {
    --purple:       #8b5cf6; /* Roxo vibrante exato do print */
    --yellow:       #FFC200; /* Amarelo ouro exato do print */
    --dark-bg:      #0a0a0a;
    --green-brand:  #00ff88;
    --text-muted:   #999999;
    --white:        #ffffff;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--dark-bg);
    color: var(--white);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ── Navbar (Fiel ao seu print 4) ────────────────────────── */
.navbar { 
    position: fixed; 
    top: 0; 
    width: 1200px; 
    z-index: 1000; 
    background: rgba(10, 10, 10, 0.9); 
    backdrop-filter: blur(12px);
    height: 100px; 
    display: flex; 
    align-items: center;
   
}

.navbar-inner {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    width: 100%; 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 2rem;
    flex-wrap: nowrap; /* Garante que os blocos (logo, menu, cta) não quebrem linha */
}



.navbar-menu a {
    color: #ccc; 
    text-decoration: none; 
    font-size: 13px; 
    font-weight: 600;
    transition: 0.3s;
    white-space: nowrap; /* PROIBIDO quebrar linha no texto do link */
    display: block;
}

/* O "Destaque Amarelo" do botão Início */
.navbar-menu a.active, 
.nav-link-highlight {
    background: rgba(255, 194, 0, 0.15); 
    color: var(--yellow) !important;
    padding: 10px 18px; /* Ajuste fino na largura do destaque */
    border-radius: 10px;
    white-space: nowrap;
}

/* Botão "CURSO GRATUITO" da Direita - Versão Compacta */
.navbar-cta {
    background: var(--purple); 
    color: white !important; 
    padding: 12px 14px; 
    border-radius: 14px; 
    font-weight: 800; 
    font-size: 11px; 
    text-transform: uppercase; 
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center; 
    gap: 6px; 
    box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3);
    white-space: nowrap; /* Bloqueia quebra no botão */
    flex-shrink: 0; /* Impede o botão de "espremer" se a tela encolher */
    transition: 0.3s;
}

.navbar-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px var(--purple), 0 0 30px rgba(139, 92, 246, 0.5);
}

.navbar-logo {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}



/* ── Hero Section (O Impacto do Print 1 e 4) ──────────────── */
.hero { 
    padding: 200px 0 100px; text-align: center;
    display: flex; flex-direction: column; align-items: center;
    background-image: 
        radial-gradient(circle at 50% 20%, #1a1a1a 0%, transparent 70%),
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 100%, 45px 45px, 45px 45px;
}



.hero-title { 
    font-size: 6.8rem; /* Tamanho massivo do print */
    font-weight: 900; line-height: 0.9;
    letter-spacing: -5px; /* O segredo das letras juntas */
    margin-bottom: 35px; max-width: 1100px;
}

.hero-title span { color: var(--yellow); }

.hero-subtitle {
    font-size: 1.5rem; color: var(--text-muted);
    max-width: 850px; margin: 0 auto 60px; line-height: 1.4;
}

/* ── Botões do Hero ────────────────────────────────────── */
.btn-group { display: flex; gap: 20px; justify-content: center; }

.btn-hero-primary {
    background: var(--purple); color: #fff; padding: 22px 45px;
    border-radius: 15px; font-weight: 900; font-size: 18px;
    text-transform: uppercase; text-decoration: none;
    display: flex; align-items: center; gap: 12px; transition: 0.3s;
}

.btn-hero-secondary {
    background: transparent; color: var(--yellow); padding: 20px 45px;
    border-radius: 15px; font-weight: 900; font-size: 18px;
    text-transform: uppercase; text-decoration: none;
    border: 2px solid var(--yellow); transition: 0.3s;
    display: flex; align-items: center; gap: 10px;
}

/* ── Estrelas e Stats (O rodapé do Hero) ──────────────── */
/* Container de Prova Social — Ajustado para .hero-social-proof */
.hero-social-proof {
    margin-top: 60px; /* Mantive o respiro que você definiu */
    display: flex; 
    gap: 30px; 
    justify-content: center; 
    align-items: center;
    color: rgba(255, 255, 255, 0.5); /* Cinza clarinho conforme a imagem */
    font-size: 14px;
}

/* Estrelas Douradas — Ajustado para .rating-stars */
.rating-stars {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rating-stars i { 
    color: #FFC200; /* O dourado vibrante que você definiu */
    font-size: 18px; 
}

/* Separador Vertical */
.divider-vertical { 
    width: 1px; 
    height: 20px; 
    background: #333; /* Cor discreta para o fundo dark */
}

/* Badge Superior (O botão neon lá do topo) */
.hero-badge-neon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #00ff88; /* Verde neon da Microcamp */
    
    font-size: 13px; /* Tamanho ajustado para não brigar com o H1 */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    
    padding: 10px 25px; 
    
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 50px;
    margin-bottom: 40px;
    background: rgba(0, 255, 136, 0.05);
}

/* Responsivo — Ajustes para Mobile */
@media (max-width: 768px) {
    .hero-title { 
        font-size: 2.8rem; /* Reduzido para não quebrar em telas pequenas */
        letter-spacing: -1px; 
    }
    
    .hero-social-proof {
        flex-direction: column; /* Empilha as estrelas no celular */
        gap: 15px;
        margin-top: 40px;
    }
    
    .divider-vertical {
        display: none; /* Remove o traço no mobile */
    }
}

/* Crrossel */

    .video-carousel-section { 
        background: #0a0a0a; 
        padding: 80px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .testimonial-header h2 { font-size: 2.5rem; color: #fff; margin-bottom: 10px; }
    .testimonial-header .text-yellow { color: #FFC200; }
    .testimonial-header p { color: #666; margin-bottom: 40px; }

  .nav-wrapper {
    display: flex !important; /* Força ficar lado a lado */
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
}

    .video-card {
        width: 450px;
        height: 780px;
        background: #000;
        border-radius: 40px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    }

    .force-video-obj { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }

    /* Botão de Play Central */
    .play-btn-central {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        background: #8b5cf6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        cursor: pointer;
        transition: 0.3s;
    }

    .btn-nav {
        background: rgba(255,255,255,0.1);
        border: none;
        color: #fff;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 24px;
    }

    .dot { width: 10px; height: 10px; background: #333; border-radius: 50%; display: inline-block; margin: 0 5px; cursor: pointer; }
    .dot.active { background: #8b5cf6; width: 25px; border-radius: 10px; }
    
    
    
    /* pop-up */
    
/* --- OVERLAY --- */
.exit-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); /* Escureci um pouco mais para destacar o neon */
    backdrop-filter: blur(12px);
    z-index: 9999;
    align-items: center; justify-content: center;
}

/* --- CONTEÚDO (AJUSTE DE ALTURA) --- */
.exit-modal-content {
    background: #0d0d0d;
    width: 95%; 
    max-width: 520px;
    padding: 60px 40px; /* Aumentei o padding para tirar o achatado */
    min-height: 580px;  /* Força uma altura imponente */
    border-radius: 28px;
    border: 1px solid #222;
    position: relative;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza tudo na nova altura */
}

/* Linha Neon no topo */
.exit-modal-content::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%; height: 2px;
    background: linear-gradient(90deg, transparent, #ffc200, #00ff88, transparent);
    filter: blur(1px);
}

/* --- TAG ESPERA (NEON BRUTÃO) --- */
.exit-tag {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: rgba(0, 255, 136, 0.08);
    color: #00ff88; 
    padding: 10px 24px;
    border-radius: 50px; 
    font-weight: 900; 
    margin-bottom: 30px; /* Mais espaço para o título */
    border: 1px solid rgba(0, 255, 136, 0.3);
    font-size: 16px !important; /* Tamanho ideal para impacto */
    letter-spacing: 2px; /* Estilo neon moderno */
    text-shadow: 0 0 12px rgba(0, 255, 136, 0.6);
    text-transform: uppercase;
}

/* --- TÍTULO --- */
.exit-title { 
    color: #fff; 
    font-size: 2.4rem !important; /* Maior e mais forte */
    font-weight: 900; 
    line-height: 1; 
    margin-bottom: 20px; 
    letter-spacing: -1px;
}
.exit-title span { color: #ffc200; } /* var(--yellow) */

/* --- SUBTÍTULO --- */
.exit-subtitle { 
    color: #aaa; 
    line-height: 1.5; 
    font-size: 1.1rem; 
    margin-bottom: 35px; 
}

/* --- GRID DE ITENS --- */
.exit-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 12px; 
    margin-bottom: 40px; 
}
.exit-item { 
    background: rgba(255,255,255,0.03); 
    border: 1px solid #1a1a1a; 
    padding: 20px 10px; 
    border-radius: 16px; 
}
.exit-icon { font-size: 24px; display: block; margin-bottom: 10px; }
.exit-item p { 
    color: #888; 
    font-size: 10px; 
    font-weight: 800; 
    margin: 0; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
}

/* --- BOTÃO PRINCIPAL --- */
.exit-btn-main {
    display: block; 
    background: #ffc200; /* var(--yellow) */
    color: #000;
    padding: 22px; 
    border-radius: 16px; 
    font-weight: 900;
    text-decoration: none; 
    font-size: 18px; 
    transition: 0.3s;
    text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(255, 194, 0, 0.2);
}

.exit-btn-main:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255, 194, 0, 0.4);
}

/* --- FECHAR --- */
.exit-btn-link {
    background: none; border: none; color: #555; margin-top: 25px;
    cursor: pointer; font-weight: 700; font-size: 13px;
    text-decoration: underline;
}

.exit-modal-close {
    position: absolute; top: 20px; right: 25px;
    background: none; border: none; color: #666; font-size: 32px; cursor: pointer;
    line-height: 1;
}




/* --- UNIDADES --- */

.secao-unidades {
    background-color: #0a0a0a;
    background-image:  
        radial-gradient(circle at 50% 20%, #1a1a1a 0%, transparent 75%),
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 100%, 45px 45px, 45px 45px;
    padding: 80px 0;
    position: relative;

    /* AQUI ESTÁ O SEGREDO: */
    overflow-x: hidden;   /* Mata a barra horizontal no rodapé */
    overflow-y: visible;  /* Permite que o card suba no eixo vertical */
}

/* --- 2. CONTAINER DO SWIPER --- */
/* 3. Ajuste no Slider */
.unidades-slider {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    /* Mantemos visible aqui para o card não ser cortado ao subir */
    overflow: visible !important; 
    padding: 40px 0 !important; 
}


/* TEXTO DAS UNIDADES */

/* ============================================================
   1. HEADER (SEÇÃO SUPERIOR)
   ============================================================ */
.unidades-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 0 20px;
}

.unidade-tag-topo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 255, 136, 0.1);
    color: #00ff88;
    padding: 6px 18px;
    border-radius: 50px;
    border: 1px solid rgba(0, 255, 136, 0.3);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.unidade-main-title {
    color: #fff;
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -2px;
}

.gradient-text {
    background: linear-gradient(180deg, #fff 30%, #ffc200 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.unidade-subtitle {
    color: #555;
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto;
    font-weight: 500;
}

/* ============================================================
   2. CONTAINER DO SLIDER (TRAVA DE LARGURA)
   ============================================================ */
.container-unidades {
    width: 100%;
    max-width: 1100px; /* Reduzi um pouco para os cards ficarem mais juntos */
    margin: 0 auto;
    padding: 0 20px;
}

/* Força o movimento linear e suave no Swiper */
.unidades-slider .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* ============================================================
   3. ESTILIZAÇÃO DOS CARDS
   ============================================================ */
.unidade-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.unidade-card {
    background: #111;
    border: 1px solid #1a1a1a;
    border-radius: 15px;
    width: 100%;
    /* O SEGREDO: Altura fixa ou flex-grow no swiper */
    height: 100%; 
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
}

.unidade-card-header {
    background: linear-gradient(180deg, #181818 0%, #111 100%);
    padding: 30px 10px; /* Padding para o ícone respirar */
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #1a1a1a;
}

.icon-escola { 
    font-size: 45px; 
}

/* Garante que o corpo do card ocupe o espaço e alinhe o rodapé */
.unidade-card-body {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    flex: 1; /* Faz o corpo esticar para preencher o card */
}

.unidade-tag {
    background: rgba(0, 255, 136, 0.05);
    color: #00ff88;
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 10px;
    border: 1px solid rgba(0, 255, 136, 0.2);
    width: fit-content;
    text-transform: uppercase;
}

.unidade-title {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 6px;
    line-height: 1.2;
    min-height: 2.4em; /* Reserva sempre espaço para 2 linhas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.unidade-address {
    color: #555;
    font-size: 0.8rem;
    line-height: 1.4;
    margin-bottom: 15px;
    min-height: 4.2em; /* Reserva espaço para 3 linhas de endereço */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.unidade-phone {
    color: #ffc200;
    font-weight: 800;
    font-size: 0.85rem;
    margin-top: auto; 
    padding-top: 10px;
}

.unidade-phone span {
    color: #888;
    font-weight: 500;
    margin-left: 4px;
}

/* Hover nos Cards */
.unidade-card:hover {
    transform: translateY(-8px);
    border-color: #333;
    background: #141414;
}

/* ============================================================
   4. BOTÃO DO RODAPÉ
   ============================================================ */
.unidades-footer {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.btn-ver-todas {
    border: 1px solid #ffc200;
    color: #ffc200;
    padding: 15px 45px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    transition: 0.3s;
}

.btn-ver-todas:hover {
    background: rgba(255, 194, 0, 0.1);
    transform: translateY(-3px);
}




/* SELOS ABAIXO DAS UNIDADES */


.stats-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 40px 20px;
    background: #000; /* Fundo preto puro para destacar o neon */
}

.stat-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    min-width: 240px;
    transition: all 0.3s ease;
}

.stat-icon {
    font-size: 24px;
    filter: drop-shadow(0 0 8px currentColor); /* Brilho neon no ícone */
}

.stat-content {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.stat-title {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.stat-desc {
    color: #555;
    font-size: 11px;
    font-weight: 500;
}

/* --- CORES INDIVIDUAIS (IGUAL À IMAGEM) --- */

/* Amarelo */
.badge-yellow { border-color: rgba(255, 194, 0, 0.3); }
.badge-yellow .stat-icon { color: #ffc200; }
.badge-yellow:hover { box-shadow: 0 0 15px rgba(255, 194, 0, 0.1); border-color: #ffc200; }

/* Verde */
.badge-green { border-color: rgba(0, 255, 136, 0.3); }
.badge-green .stat-icon { color: #00ff88; }
.badge-green:hover { box-shadow: 0 0 15px rgba(0, 255, 136, 0.1); border-color: #00ff88; }

/* Roxo */
.badge-purple { border-color: rgba(139, 92, 246, 0.3); }
.badge-purple .stat-icon { color: #8b5cf6; }
.badge-purple:hover { box-shadow: 0 0 15px rgba(139, 92, 246, 0.1); border-color: #8b5cf6; }

/* Azul */
.badge-blue { border-color: rgba(59, 130, 246, 0.3); }
.badge-blue .stat-icon { color: #3b82f6; }
.badge-blue:hover { box-shadow: 0 0 15px rgba(59, 130, 246, 0.1); border-color: #3b82f6; }

/* Vermelho/Laranja */
.badge-red { border-color: rgba(239, 68, 68, 0.3); }
.badge-red .stat-icon { color: #ef4444; }
.badge-red:hover { box-shadow: 0 0 15px rgba(239, 68, 68, 0.1); border-color: #ef4444; }

.stats-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 40px 20px;
    background: #000;

    /* --- ADICIONE ISSO AQUI --- */
    margin-top: 80px; /* Ajuste esse valor para aumentar ou diminuir o espaço */
    /* -------------------------- */
}


/* Nossa História */

.secao-historia {
    background-color: #0a0a0a;
    padding: 100px 20px;
    color: #fff;
    font-family: sans-serif; /* Use Inter ou Montserrat se tiver */
}

.container-historia {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

/* --- LINHA DO TEMPO VERTICAL --- */
.timeline-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

.timeline-line {
    width: 4px;
    height: 400px;
    background: linear-gradient(180deg, #ffc200 0%, #8b5cf6 50%, #000 100%);
    border-radius: 10px;
}

.timeline-logo {
    width: 60px;
    height: 60px;
    background: #0a0a0a;
    border: 2px solid #ffc200;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffc200;
    font-weight: 900;
    font-size: 24px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 20px rgba(255, 194, 0, 0.2);
}

/* --- CONTEÚDO --- */
.historia-tag {
    color: #ffc200;
    background: rgba(255, 194, 0, 0.1);
    border: 1px solid rgba(255, 194, 0, 0.3);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 800;
    display: inline-block;
    margin-bottom: 25px;
}

.historia-title {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

.text-yellow { color: #ffc200; }

.historia-text p {
    color: #888;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 1.05rem;
}

.text-muted { color: #555 !important; }

/* --- BADGES --- */
.historia-badges {
    display: flex;
    gap: 15px;
    margin-top: 40px;
}

.h-badge {
    padding: 12px 20px;
    border-radius: 12px;
    border: 1px solid;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255, 0.02);
}

.b-number { font-weight: 900; font-size: 18px; }
.b-text { font-size: 13px; color: #666; }

.badge-yellow { border-color: rgba(255, 194, 0, 0.2); }
.badge-yellow .b-number { color: #ffc200; }

.badge-green { border-color: rgba(0, 255, 136, 0.2); }
.badge-green .b-number { color: #00ff88; }

.badge-purple { border-color: rgba(139, 92, 246, 0.2); }
.badge-purple .b-number { color: #8b5cf6; }

/* Responsividade */
@media (max-width: 768px) {
    .container-historia { flex-direction: column; gap: 40px; }
    .timeline-container { display: none; } /* Oculta a linha no mobile para focar no texto */
    .historia-title { font-size: 2rem; }
    .historia-badges { flex-direction: column; }
}

/* IMPACTO SOCIAL */


/* --- SEÇÃO IMPACTO SOCIAL --- */
.secao-impacto-social {
    background-color: #000000; /* Fundo preto puro igual à imagem */
    padding: 100px 20px;
    color: #ffffff;
    text-align: center; /* Centraliza a tag e o título principal */
}

.container-impacto {
    max-width: 1100px;
    margin: 0 auto;
}

/* --- TAG DE TOPO (SEGUINDO O ESQUEMA DE 16PX NEON VERDE) --- */
.impacto-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    background: rgba(0, 255, 136, 0.08); /* Verde Neon Fundo */
    color: #00ff88; /* Verde Neon Texto */
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 50px;
    
    font-size: 16px !important; 
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    
    text-shadow: 0 0 12px rgba(0, 255, 136, 0.6);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.1);
    
    padding: 10px 24px;
    margin-bottom: 30px;
}

/* --- TÍTULO PRINCIPAL --- */
.impacto-title {
    font-size: 3.2rem;
    font-weight: 950; /* Super Pesado igual à imagem */
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -2px;
}

/* Efeito Gradiente Amarelo no Texto (FIEL À IMAGEM) */
.text-yellow-gradient {
    background: linear-gradient(180deg, #ffffff 40%, #ffc200 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* --- SUBTÍTULO --- */
.impacto-subtitle {
    color: #555555; /* Cinza Médio igual à imagem */
    line-height: 1.6;
    margin-bottom: 70px; /* Grande espaço antes dos cards */
    font-size: 1.1rem;
    font-weight: 500;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* --- GRID DE CARDS --- */
.impacto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    text-align: left; /* Conteúdo dos cards alinhado à esquerda */
}

/* --- ESTILO GERAL DO CARD (FIEL À IMAGEM) --- */
.impacto-card {
    background-color: #0a0a0a; /* Fundo do Card levemente mais claro */
    border: 1px solid #1a1a1a; /* Borda sutil */
    border-radius: 16px;
    padding: 40px;
    transition: transform 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* --- ÍCONES E NEON INDIVIDUAL --- */
.card-icon-container {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 30px;
    position: relative;
    border: 1px solid transparent;
}

/* Efeito Glow Neon no Ícone */
.icon-glow {
    filter: drop-shadow(0 0 10px currentColor);
}

/* Cores Específicas dos Ícones (FIEL À IMAGEM) */
.card-vagas .card-icon-container { color: #ffc200; border-color: rgba(255, 194, 0, 0.2); }
.card-doacao .card-icon-container { color: #8b5cf6; border-color: rgba(139, 92, 246, 0.2); }
.card-ia .card-icon-container { color: #00ff88; border-color: rgba(0, 255, 136, 0.2); }

/* --- TEXTOS DOS CARDS --- */
.card-title {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 15px;
}

.card-text {
    color: #555555; /* Cinza Médio Texto */
    line-height: 1.6;
    font-size: 0.95rem;
    margin: 0;
}

/* --- EFEITOS HOVER --- */
.impacto-card:hover {
    transform: translateY(-5px);
}

/* Acende a Borda e o Neon no Hover */
.card-vagas:hover { border-color: rgba(255, 194, 0, 0.5); box-shadow: 0 10px 30px rgba(255, 194, 0, 0.05); }
.card-doacao:hover { border-color: rgba(139, 92, 246, 0.5); box-shadow: 0 10px 30px rgba(139, 92, 246, 0.05); }
.card-ia:hover { border-color: rgba(0, 255, 136, 0.5); box-shadow: 0 10px 30px rgba(0, 255, 136, 0.05); }

/* --- RESPONSIVIDADE --- */
@media (max-width: 768px) {
    .impacto-title { font-size: 2.2rem; }
    .impacto-grid { grid-template-columns: 1fr; gap: 20px; }
    .impacto-card { padding: 30px; }
}


/* Nossos Cursos */


/* --- CONTAINER PRINCIPAL --- */
.secao-cursos {
    background-color: #000;
    padding: 100px 20px;
    color: #fff;
    text-align: center;
}

.container-cursos {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- TAG TOPO (VERDE NEON 16PX) --- */
.cursos-tag-topo {
    display: inline-flex;
    padding: 10px 24px;
    background: rgba(0, 255, 136, 0.08);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 50px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 0 0 12px rgba(0, 255, 136, 0.6);
    margin-bottom: 30px;
}

/* --- TÍTULO COM GRADIENTE --- */
.cursos-main-title {
    font-size: 3.5rem;
    font-weight: 950;
    letter-spacing: -2px;
    margin-bottom: 20px;
}

.text-yellow-gradient {
    background: linear-gradient(180deg, #fff 40%, #ffc200 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cursos-subtitle {
    color: #555;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 70px;
}

/* --- GRID E CARDS --- */
.cursos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.curso-card {
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    text-align: left;
    transition: all 0.3s ease;
}

/* --- HOVER PERSONALIZADO POR CARD (ESTILO NEON) --- */

/* Card 1 - Neon Amarelo */
.curso-card:nth-child(1):hover {
    transform: translateY(-10px);
    border-color: rgba(255, 194, 0, 0.6);
    box-shadow: 0 0 25px rgba(255, 194, 0, 0.15), 
                0 0 10px rgba(255, 194, 0, 0.1);
}

/* Card 2 - Neon Roxo */
.curso-card:nth-child(2):hover {
    transform: translateY(-10px);
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.15), 
                0 0 10px rgba(139, 92, 246, 0.1);
}

/* Card 3 - Neon Verde */
.curso-card:nth-child(3):hover {
    transform: translateY(-10px);
    border-color: rgba(0, 255, 136, 0.6);
    box-shadow: 0 0 25px rgba(0, 255, 136, 0.15), 
                0 0 10px rgba(0, 255, 136, 0.1);
}

/* Efeito de zoom na imagem para todos os cards no hover */
.curso-card:hover .card-image-wrapper img {
    opacity: 1;
    transform: scale(1.05);
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: all 0.4s ease;
}

/* --- IMAGEM E BADGES --- */
.card-image-wrapper {
    position: relative;
    height: 220px;
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.badge-pop {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 900;
}

.popular { background: #ffc200; color: #000; }
.free { background: #00ff88; color: #000; }

/* --- CORPO DO CARD --- */
.card-body {
    padding: 30px;
}

.card-body h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.card-body p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* --- BOTÕES SAIBA MAIS (CORES DO PRINT) --- */
.btn-saiba-mais {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
}

.btn-saiba-mais.yellow { color: #ffc200; }
.btn-saiba-mais.purple { color: #8b5cf6; }
.btn-saiba-mais.green { color: #00ff88; }

/* Responsividade */
@media (max-width: 992px) {
    .cursos-grid { grid-template-columns: 1fr; }
    .cursos-main-title { font-size: 2.5rem; }
}


/* DEPOIMENTOS */

.secao-depoimentos-index {
    background-color: #000;
    padding: 100px 20px;
    color: #fff;
    text-align: center;
}

.depo-index-title {
    font-size: 3.2rem;
    font-weight: 950;
    letter-spacing: -2px;
    margin-bottom: 15px;
}

.depo-index-subtitle {
    color: #555;
    font-size: 1.1rem;
    max-width: 650px;
    margin: 0 auto 60px;
}

/* GRID DE CARDS */
.depo-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ESTILO DO CARD (FIEL AO PRINT) */
.depo-card-neon {
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
    border-radius: 16px;
    padding: 35px;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* A BORDA NEON SUPERIOR */
.depo-card-neon::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    box-shadow: 0 0 15px currentColor;
}

/* --- LÓGICA DE ALTERNÂNCIA DE CORES --- */

/* 1. Amarelo */
.depo-card-neon:nth-child(4n+1) { color: #ffc200; }
.depo-card-neon:nth-child(4n+1) .depo-avatar { background: #ffc200; color: #000; }
.depo-card-neon:nth-child(4n+1) .depo-user-info span { color: #ffc200; }

/* 2. Roxo */
.depo-card-neon:nth-child(4n+2) { color: #8b5cf6; }
.depo-card-neon:nth-child(4n+2) .depo-avatar { background: #8b5cf6; color: #fff; }
.depo-card-neon:nth-child(4n+2) .depo-user-info span { color: #8b5cf6; }

/* 3. Verde */
.depo-card-neon:nth-child(4n+3) { color: #00ff88; }
.depo-card-neon:nth-child(4n+3) .depo-avatar { background: #00ff88; color: #000; }
.depo-card-neon:nth-child(4n+3) .depo-user-info span { color: #00ff88; }

/* 4. Rosa/Vermelho */
.depo-card-neon:nth-child(4n+4) { color: #ff4b5c; }
.depo-card-neon:nth-child(4n+4) .depo-avatar { background: #ff4b5c; color: #fff; }
.depo-card-neon:nth-child(4n+4) .depo-user-info span { color: #ff4b5c; }

/* ELEMENTOS INTERNOS */
.depo-stars {
    font-size: 0.9rem;
    margin-bottom: 20px;
}
.depo-stars span {
    color: #fff;
    font-weight: 800;
    margin-left: 5px;
}

.depo-text-content {
    color: #999;
    font-style: italic;
    line-height: 1.6;
    font-size: 1rem;
    min-height: 80px;
    margin-bottom: 25px;
}

.depo-divider {
    height: 1px;
    background: #1a1a1a;
    margin-bottom: 25px;
}

.depo-user-box {
    display: flex;
    align-items: center;
    gap: 15px;
}

.depo-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.2rem;
}

.depo-user-info h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
}

.depo-user-info span {
    font-size: 0.85rem;
    font-weight: 700;
}

/* BOTÃO INFERIOR */
.depo-action { margin-top: 60px; }
.btn-ver-todos {
    border: 1px solid #ffc200;
    color: #ffc200;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 900;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}
.btn-ver-todos:hover {
    background: #ffc200;
    color: #000;
    box-shadow: 0 0 20px rgba(255, 194, 0, 0.3);
}

@media (max-width: 768px) {
    .depo-index-title { font-size: 2.2rem; }
    .depo-index-grid { grid-template-columns: 1fr; }
}



/* Container para centralizar a tag */
.depo-tag-container {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

/* A Tag Neon Roxa */
.tag-neon-purple {
    font-size: 16px;
    font-weight: 800;
    color: #bc13fe; /* Roxo vibrante */
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 8px 25px;
    border: 2px solid #bc13fe;
    border-radius: 50px;
    
    /* Efeito de Brilho Neon (Glow) */
    background: rgba(188, 19, 254, 0.05);
    box-shadow: 
        0 0 10px rgba(188, 19, 254, 0.3),
        inset 0 0 8px rgba(188, 19, 254, 0.2);
    
    /* Efeito de brilho suave no texto */
    text-shadow: 0 0 8px rgba(188, 19, 254, 0.6);
    
    display: inline-block;
    transition: all 0.3s ease;
}

/* Efeito ao passar o mouse (opcional, fica bem premium) */
.tag-neon-purple:hover {
    box-shadow: 0 0 20px rgba(188, 19, 254, 0.6);
    background: rgba(188, 19, 254, 0.1);
    transform: translateY(-2px);
}


/* BLOG */

/* Container e Seção */
.blog-home-section {
    padding: 100px 0;
    background: #0a0a0a;
    width: 100%;
    overflow: hidden;
}

.blog-home-section .container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Header */
.blog-header-premium {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
    flex-wrap: wrap;
    gap: 20px;
}

.blog-main-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: #fff;
    margin: 15px 0 5px;
}

.blog-subtitle { color: #666; font-size: 1.1rem; }

/* Tag Roxa */
.tag-neon-purple {
    display: inline-block;
    padding: 5px 20px;
    border: 1.5px solid #bc13fe;
    color: #bc13fe;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 0 10px rgba(188, 19, 254, 0.2);
    background: rgba(188, 19, 254, 0.05);
    text-transform: uppercase;
}

/* Grid Travado em 3 Colunas */
.blog-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Força 3 colunas */
    gap: 30px;
    width: 100%;
}

/* Card Neon */
.blog-card-neon {
    background: #0d0d0d;
    border-radius: 20px;
    border: 1px solid #1a1a1a;
    overflow: hidden;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0; /* Impede estouro de conteúdo */
}

.card-anchor { text-decoration: none; display: block; height: 100%; }

.blog-card-neon:hover {
    transform: translateY(-10px);
    border-color: #ffc200;
    box-shadow: 0 15px 30px rgba(255, 194, 0, 0.1);
}

/* Imagem 16:9 */
.card-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #111;
    overflow: hidden;
}

.card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.blog-card-neon:hover img { transform: scale(1.1); }

/* Corpo do Card */
.card-body { padding: 25px; }

.card-body h3 {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.1em; /* Alinha os cards */
}

.card-body p {
    color: #888;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.read-link {
    color: #ffc200;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
}

/* Botão Pill Amarelo */
.btn-ver-todos-pill {
    color: #ffc200;
    text-decoration: none;
    border: 1.5px solid #ffc200;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 800;
    transition: 0.3s;
}

.btn-ver-todos-pill:hover {
    background: #ffc200;
    color: #000;
    box-shadow: 0 0 15px rgba(255, 194, 0, 0.3);
}

/* Responsivo */
@media (max-width: 992px) {
    .blog-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .blog-grid-3 { grid-template-columns: 1fr; }
    .blog-header-premium { flex-direction: column; align-items: flex-start; }
}





/* RODAPÉ */

:root {
    --bg-black: #000000;
    --bg-dark-gray: #0a0a0a;
    --purple-main: #9d66ff;
    --yellow-text: #ffcc00;
}

/* Redes Sociais - Textos Maiores */
.social-section {
    background-color: var(--bg-black);
    padding: 80px 20px; /* Aumentei o respiro da seção */
    text-align: center;
}

.social-title {
    color: white;
    font-size: 32px; /* Era 24px */
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.social-subtitle {
    color: #71717a;
    font-size: 16px; /* Era 14px */
    margin-bottom: 40px;
}

/* Botões Sociais - Mais Robustos */
.social-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-social {
    padding: 16px 35px; /* Aumentei o clique */
    border-radius: 10px;
    font-size: 14px; /* Era 12px */
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.btn-insta { color: #ffcc00; background: #131305; border-color: #26260a; }
.btn-insta:hover { box-shadow: 0 0 25px rgba(255, 204, 0, 0.25); border-color: #ffcc00; transform: translateY(-3px); }

.btn-yt { color: #ff4444; background: #130505; border-color: #260a0a; }
.btn-yt:hover { box-shadow: 0 0 25px rgba(255, 0, 0, 0.25); border-color: #ff4444; transform: translateY(-3px); }

.btn-fb { color: #5b89ff; background: #050a13; border-color: #0a1426; }
.btn-fb:hover { box-shadow: 0 0 25px rgba(59, 89, 152, 0.25); border-color: #5b89ff; transform: translateY(-3px); }

/* Barra CTA - Layout de Impacto */
.cta-bar {
    background: #080808;
    padding: 50px 0;
    border-top: 1px solid #1a1a1a;
}

.cta-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
}

.cta-text h2 {
    color: white;
    font-size: 28px; /* Era 22px */
    font-weight: 800;
    line-height: 1.2;
}

.cta-text p {
    color: #a1a1aa;
    font-size: 15px; /* Era 13px */
    margin-top: 8px;
}

/* Botão de Inscrição "Glow" */
.btn-subscribe {
    background-color: var(--purple-main);
    color: white;
    padding: 18px 40px; /* Bem maior */
    border-radius: 12px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(157, 102, 255, 0.4);
    transition: all 0.3s ease;
}

.btn-subscribe:hover {
    box-shadow: 0 0 45px rgba(157, 102, 255, 0.7);
    transform: scale(1.05);
}




/* Footer */

/* Container Geral do Footer */
.main-footer {
    background-color: #000000;
    color: #71717a; /* Cor cinza dos links */
    padding: 80px 0 40px 0;
    border-top: 1px solid #141414;
    font-family: 'Inter', sans-serif;
}

.footer-grid {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr; /* Proporção das colunas */
    gap: 40px;
    padding: 0 40px;
}

/* Títulos das Colunas */
.footer-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
}

/* Estilo da Logo e Ícones Sociais Pequenos */
.footer-brand img {
    height: 35px;
    margin-bottom: 25px;
    display: block;
}

.social-mini-icons {
    display: flex;
    gap: 12px;
}

.social-mini-box {
    width: 38px;
    height: 38px;
    border: 1px solid #1a1a1a;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #71717a;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-mini-box:hover {
    border-color: #3f3f46;
    color: #ffffff;
    background-color: #0a0a0a;
}

/* Links de Navegação e Cursos */
.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.footer-link {
    color: #71717a; /* Cinza sóbrio */
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.footer-link:hover {
    color: #FFC200; 
    padding-left: 3px; /* Pequeno movimento para dar feedback de clique */
}

/* Coluna de Contato e Botão Amarelo */
.contact-info {
    font-size: 14px;
    line-height: 1.6;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.icon-yellow {
    color: #ffcc00;
}

.btn-unidades {
    display: inline-block;
    border: 1px solid #ffcc00;
    color: #ffcc00;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1.5px;
    padding: 12px 20px;
    border-radius: 6px;
    text-decoration: none;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.btn-unidades:hover {
    background-color: #ffcc00;
    color: #000;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.3);
}

/* Bottom Bar (Copyright) */
.footer-bottom {
    max-width: 1300px;
    margin: 60px auto 0 auto;
    padding: 25px 40px 0 40px;
    border-top: 1px solid #141414;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #3f3f46;
}

/* Transforma a logo colorida em branca no rodapé */
.footer-logo-white {
    height: 40px;
    filter: brightness(0) invert(1);
    margin-bottom: 25px;
    display: block;
}

/* Garante que os ícones do Font Awesome apareçam */
.social-mini-box i {
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}


/* Carrosel de Fotos */

/* Container com altura fixa e bordas arredondadas */
.slider-moldura-container {
    width: 100%;
    max-width: 1200px;
    height: 650px; 
    margin: 40px auto;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #0d0d0d; /* Fundo mais escuro para o efeito premium */
    box-shadow: 0 20px 40px rgba(0,0,0,0.5); /* Sombra para dar profundidade */
}

.swiper-premium, .swiper-wrapper, .swiper-slide, .slide-content {
    width: 100%;
    height: 100% !important;
}

.slide-content {
    /* REDIMENSIONAMENTO: 
       Use 'contain' para ver a imagem INTEIRA sem distorcer.
       Use '100% 100%' se quiser que ela force o preenchimento total da moldura. */
    background-size: 100% 100%; 
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

/* Deixa o slide com uma leve pulsação ao passar (estilo premium) */
.swiper-slide-active .slide-content {
    filter: brightness(1.1);
}

/* Setas - Agora com o visual Ghost Verde que você curte */
.swiper-button-next, .swiper-button-prev {
    color: #00ff88 !important;
    background: rgba(0, 0, 0, 0.5);
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 136, 0.3);
    backdrop-filter: blur(5px);
    z-index: 100;
}

/* Deixa o ícone da seta menor e mais centralizado */
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 18px !important;
    font-weight: bold;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    background: #00ff88;
    color: #000 !important;
}

/* Paginação (Pontinhos) */
.swiper-pagination-bullet {
    background: #fff !important;
}

.swiper-pagination-bullet-active {
    background: #00ff88 !important;
    width: 20px;
    border-radius: 10px;
}


/* Efeito de Vidro nas Setas */
.swiper-button-next, .swiper-button-prev {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Overlay para o texto brilhar mais (se você adicionar texto depois) */
.slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
}

/* Animação de entrada da imagem */
.swiper-slide-active .slide-content {
    animation: pan-image 10s linear infinite alternate;
}

@keyframes pan-image {
    from { transform: scale(1) translate(0, 0); }
    to { transform: scale(1.1) translate(-1%, -1%); }
}

/* O "Timer" Circular no canto (Estilo YouTube/Netflix) */
.autoplay-progress {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00ff88;
}

.autoplay-progress svg {
    width: 100%;
    height: 100%;
    stroke-dasharray: 126;
    stroke-dashoffset: 126;
    stroke: #00ff88;
    stroke-width: 4px;
    fill: none;
    transform: rotate(-90deg);
}











/* VIDEO NOVO */

/* ============================================================
   ESTILOS GERAIS - PREMIUM DARK (FINALIZADO COM NEON HOVER)
   ============================================================ */
:root {
    --bg-dark: #050505; 
    --bg-card: #0f0f0f; 
    --text-white: #ffffff;
    --color-amarelo: #ffc200; 
    --color-verde: #00ff88; 
    --color-roxo: #6a1b9a;
}

.section-depoimentos { 
    background: var(--bg-dark); 
    padding: 60px 0; 
    font-family: 'Inter', sans-serif; 
}

.container-depoimentos { 
    display: flex; 
    max-width: 1200px; 
    margin: 0 auto; 
    gap: 30px; 
}

/* --- LISTA DA ESQUERDA --- */
.lista-depoimentos { 
    flex: 0 0 380px; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.item-depoimento {
    background: #0f0f0f;
    border: 1px solid #1a1a1a;
    border-radius: 15px;
    padding: 18px; /* Valor fixo para manter consistência */
    cursor: pointer;
    transition: all 0.3s ease-in-out; /* Transição suave para o glow */
    position: relative;
    overflow: hidden;
}

/* ESTADO ATIVO PADRÃO */
.item-depoimento.ativo { background: #141414; border-color: #333; }

/* --- HOVER COM NEON ESPECÍFICO (SEM ALTERAR O TAMANHO) --- */

/* Neon Amarelo */
.item-depoimento.cor-amarelo:hover {
    border-color: var(--color-amarelo);
    box-shadow: 0 0 15px rgba(255, 194, 0, 0.25);
    transform: translateY(-2px); /* Elevação sutil sem afetar o layout */
}

/* Neon Verde */
.item-depoimento.cor-verde:hover {
    border-color: var(--color-verde);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.25);
    transform: translateY(-2px);
}

/* Neon Roxo */
.item-depoimento.cor-roxo:hover {
    border-color: var(--color-roxo);
    box-shadow: 0 0 15px rgba(106, 27, 154, 0.25);
    transform: translateY(-2px);
}

/* ============================================================
   AJUSTE DA SETINHA DE PLAY NOS CARDS LATERAIS
   ============================================================ */

/* 1. O HEADER DO DEPOIMENTO (Precisa de Posição Relativa) */
.depoimento-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    
    /* ESSA LINHA É CRUCIAL: */
    /* Permite que o ícone absolute se posicione em relação ao card */
    position: relative; 
    
    /* Garante que o texto não "atropele" o ícone na direita */
    padding-right: 40px; 
}

/* 2. O ÍCONE DE PLAY (Ajuste Absoluto à Direita) */
.icon-play-lista {
    /* 1. Posicionamento Dinâmico */
    position: absolute;
    right: 0; /* Cola na borda direita do padding do header */
    top: 50%; /* Centraliza verticalmente no header */
    transform: translateY(-50%); /* Ajuste fino de centralização */
    
    /* 2. Visual Premium (Círculo Neon) */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    
    /* Borda inicial transparente/suave */
    border: 1px solid rgba(255,255,255,0.1); 
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 3. O caractere "▶" (Pequeno e sutil) */
    font-size: 0.75rem; 
    transition: all 0.3s ease;
}

/* 3. CORES DINÂMICAS NEON (Baseadas no Tema do Aluno) */

/* Herança Amarela */
.cor-amarelo .icon-play-lista {
    color: #ffc200; /* Texto do ▶ Amarelo */
    border-color: rgba(255,194,0,0.3); /* Borda Amarela suave */
}

/* Herança Verde */
.cor-verde .icon-play-lista {
    color: #00ff88; /* Texto do ▶ Verde */
    border-color: rgba(0,255,136,0.3); /* Borda Verde suave */
}

/* Herança Roxa */
.cor-roxo .icon-play-lista {
    color: #6a1b9a; /* Texto do ▶ Roxo */
    border-color: rgba(106,27,154,0.3); /* Borda Roxa suave */
}

.avatar { 
    width: 42px; 
    height: 42px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 800; 
    color: #000; 
    flex-shrink: 0; /* Impede que o avatar amasse */
}

.avatar-amarelo { background: var(--color-amarelo); }
.avatar-verde { background: var(--color-verde); }
.avatar-roxo { background: var(--color-roxo); }

.user-name { color: #fff; font-size: 0.9rem; font-weight: 700; display: block; }
.user-curso { font-size: 0.75rem; font-weight: 600; }

/* Cores dinâmicas dos cursos */
.cor-amarelo .user-curso { color: var(--color-amarelo); }
.cor-verde .user-curso { color: var(--color-verde); }
.cor-roxo .user-curso { color: var(--color-roxo); }

.texto-do-depoimento { 
    color: #888; 
    font-size: 0.85rem; 
    line-height: 1.5; 
    margin: 10px 0; 
    text-align: left;
}

.tag-resultado-lista { 
    color: var(--color-verde); 
    font-size: 0.8rem; 
    font-weight: 700; 
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Link Ver Todos Amarelo */
.btn-ver-todos-premium { 
    color: var(--color-amarelo); 
    text-decoration: none; 
    font-weight: 900; 
    font-size: 0.85rem; 
    margin-top: 10px; 
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* --- PLAYER E RODAPÉ DIREITO --- */
.reprodutor-principal { 
    flex: 1; 
    background: var(--bg-card); 
    border-radius: 20px; 
    padding: 25px; 
    border: 1px solid #1a1a1a; 
}

.area-video {
    width: 100%;
    aspect-ratio: 16/9; /* Mantém a estrutura do seu layout premium */
    background: #000; /* Fundo preto para as bordas automáticas */
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#video-player-obj {
    width: 100%;
    height: 100%;
    
    /* ISSO RESOLVE TUDO: */
    /* Faz o vídeo caber inteiro sem esticar e sem cortar nada. 
       Se for vertical, ele cria bordas pretas nos lados. 
       Se for horizontal, preenche tudo. */
    object-fit: contain !important; 
    
    position: absolute;
    top: 0;
    left: 0;
}

#video-player-obj { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   PLAY CENTRAL - POSICIONAMENTO E CORREÇÃO VISUAL
   ============================================================ */

.btn-play-principal {
    /* 1. Posicionamento Absoluto (Fica sobre o vídeo) */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centraliza no meio exato da tela */
    
    /* 2. Tamanho e Forma */
    width: 70px; 
    height: 70px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 10;
    
    /* 3. Centralização do Ícone "▶" */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 4. Transição Suave para Play/Pause */
    transition: all 0.3s ease-in-out;
    opacity: 1; /* Começa visível */
}

/* Ajuste do Triângulo (Compensação visual do print) */
.btn-play-principal::before {
    content: "▶";
    color: #000000;
    font-size: 2rem;
    font-family: 'Inter', sans-serif;
    padding-left: 5px; /* Tira o aspecto "zuado" e centraliza a ponta */
}

/* Cores Dinâmicas (Fiel ao seu tema) */
.btn-amarelo { 
    background: var(--color-amarelo); 
    box-shadow: 0 4px 20px rgba(255, 194, 0, 0.4); 
}

.btn-verde { 
    background: var(--color-verde); 
    box-shadow: 0 4px 20px rgba(0, 255, 136, 0.4); 
}

/* Efeito ao passar o mouse */
.btn-play-principal:hover {
    transform: translate(-50%, -50%) scale(1.1); /* Mantém centralizado ao crescer */
}

.info-video-overlay { 
    position: absolute; 
    bottom: 25px; 
    left: 0; 
    right: 0; 
    text-align: center; 
    z-index: 5; 
}
.info-video-overlay span { 
    /* Cor do Nome do Aluno */
    color: #ffffff; /* Branco puro para destaque */
    
    font-weight: 800; 
    font-size: 1.2rem; 
    display: block;
    /* Sombra para garantir leitura se o vídeo for claro */
    text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.8); 
}

.info-video-overlay small { 
    /* Cor da Unidade/Cidade */
    color: #ffc200; /* Use var(--color-amarelo) se quiser seguir o tema */
    
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8);
}






/* RODAPÉ DO PLAYER */
.footer-content { 
    border-top: 1px solid #1a1a1a; 
    padding-top: 20px; 
}

.footer-header { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    margin-bottom: 12px; 
}

.tag-curso-badge { 
    padding: 4px 12px; 
    border-radius: 20px; 
    font-size: 0.75rem; 
    font-weight: 700; 
    text-transform: uppercase; 
}

/* Badges dinâmicos */
.badge-amarelo { background: rgba(255, 194, 0, 0.1); color: var(--color-amarelo); }
.badge-verde { background: rgba(0, 255, 136, 0.1); color: var(--color-verde); }
.badge-roxo { background: rgba(106, 27, 154, 0.1); color: var(--color-roxo); }

.footer-text { 
    font-size: 0.9rem; 
    color: #999; 
    line-height: 1.6; 
    margin-bottom: 20px; 
    text-align: left;
}

.tag-conquista-premium { 
    background: rgba(0, 255, 136, 0.05); 
    border: 1px solid rgba(0, 255, 136, 0.15); 
    color: var(--color-verde); 
    padding: 15px; 
    border-radius: 10px; 
    font-weight: 700; 
    font-size: 0.9rem;
    display: flex; 
    align-items: center; 
    gap: 10px; 
}









/* Espaçamento principal da seção */
.secao-unidades-index {
    padding-top: 80px;    /* Afasta da div do vídeo acima */
    padding-bottom: 80px; /* Afasta da próxima seção */
    background-color: transparent; /* Mantém o fundo escuro do seu site */
}

/* Centraliza o cabeçalho e dá espaço para o slider */
.unidades-header {
    text-align: center;
    margin-bottom: 50px; /* Espaço entre o título e os cards */
}

/* Ajuste fino para mobile */
@media (max-width: 768px) {
    .secao-unidades-index {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}






/* Container da barra de controles */
.controles-video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8)); /* O FADE PRETO */
    display: flex;
    align-items: center;
    padding: 0 15px;
    opacity: 0; /* Começa invisível */
    transition: opacity 0.3s ease;
    z-index: 10;
}

/* Mostra no hover do container pai */
.area-video:hover .controles-video-overlay {
    opacity: 1;
}

.barra-principal-controles {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.mini-play {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
}

.controle-volume-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Estilizando o slider de volume (O toque Neon) */
#volume-slider {
    width: 80px;
    height: 4px;
    accent-color: #ffc200; /* Use a cor dinâmica aqui se quiser */
    cursor: pointer;
}





.header-transformacao {
    text-align: center;
    padding: 80px 20px 60px; /* Respiro grande no topo e na base da seção */
    background-color: #000;
}

.badge-v-container {
    margin-bottom: 32px; /* Espaço entre o badge verde e o título branco */
}

.badge-v {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #00ff88;
    border-radius: 100px;
    padding: 8px 20px;
}

.badge-text {
    color: #00ff88;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.titulo-v {
    color: #fff;
    font-size: clamp(2.5rem, 5vw, 4rem); /* Fonte que se ajusta ao tamanho da tela */
    font-weight: 800;
    line-height: 1.1; /* Respiro entre as linhas do título */
    margin-bottom: 24px; /* Espaço entre o título e o texto de apoio */
    letter-spacing: -1px;
}

.amarelo-neon {
    color: #ffc200;
    display: inline-block; /* Ajuda na renderização do brilho se colocar shadow */
}

.subtitulo-v {
    color: rgba(255, 255, 255, 0.5); /* Cinza suave para o olho descansar */
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}




/* Container Centralizado */
.depo-action2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 50px;       /* Respiro caprichado entre os cards e o botão */
    padding-bottom: 40px;
}

/* Botão Amarelo Neon Estilo Microcamp */
.btn-ver-todos2 {
    display: inline-block;
    text-decoration: none;
    color: #ffc200;                /* Amarelo base */
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 12px 30px;
    border: 2px solid #ffc200;     /* Borda amarela */
    border-radius: 50px;           /* Formato pílula */
    transition: all 0.3s ease;     /* Transição suave para o efeito */
    background: transparent;
}

/* Efeito de Brilho no Hover */
.btn-ver-todos2:hover {
    background-color: #ffc200;
    color: #000;                   /* Inverte a cor: fundo amarelo, texto preto */
    box-shadow: 0 0 20px rgba(255, 194, 0, 0.6), 
                0 0 40px rgba(255, 194, 0, 0.4); /* O brilho Neon */
    transform: translateY(-3px);   /* Pequeno salto para cima */
}

/* Estilo da setinha ➔ */
.btn-ver-todos2 span {
    margin-left: 8px;
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.btn-ver-todos2:hover span {
    display: inline-block;
    transform: translateX(5px);    /* A setinha dá um empurrãozinho pro lado */
}


/* CURSO GRATUITOS PÁGINA -------------------------------------------------------------------------------------------------------------------------------- */

/* Hero Microcamp — Configurações Gerais */
.hero-microcamp {
    position: relative;
    overflow: hidden;
    background: #0a0a0a; /* Fundo preto sólido como na imagem */
    padding: 8rem 0 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 10;
}

/* Badge Verde (Topo) */
.hero-badge-wrapper {
    margin-bottom: 2.5rem;
}

.hero-badge-neon.neon-green {
    background: rgba(0, 255, 102, 0.05);
    border: 1px solid #00ff66;
    color: #00ff66;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Título Impactante (Branco + Amarelo) */
.hero-title {
    font-size: clamp(2.5rem, 8vw, 5rem); /* Fonte bem grande e pesada */
    font-weight: 900;
    color: #ffffff;
    line-height: 1.05;
    margin-bottom: 2rem;
    text-transform: none; /* Mantém o padrão da imagem */
}

.text-neon-yellow {
    color: #ffc107; /* Amarelo quente da imagem */
    background: linear-gradient(to bottom, #ffeb3b, #ffa000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Subtítulo em Cinza Suave */
.hero-subtitle {
    color: #b0b0b0; /* Cinza da imagem */
    font-size: 1.2rem;
    max-width: 850px;
    margin-bottom: 3rem;
    line-height: 1.6;
}

/* Pílulas de Benefícios */
.benefits-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 4rem;
}

.pill {
    border: 1px solid rgba(255, 193, 7, 0.5);
    color: #ffc107;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Botão CTA Principal */
.btn-neon-cta {
    background: #ffc107;
    color: #000;
    padding: 1.2rem 3rem;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1.2rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

.btn-neon-cta:hover {
    transform: translateY(-3px);
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

/* Efeitos de Fundo (Glows) */
.glow-element {
    position: absolute;
    filter: blur(130px);
    z-index: 1;
    opacity: 0.15;
}

.glow-1 { top: 0; left: 20%; width: 400px; height: 400px; background: #00ff66; }
.glow-2 { bottom: 0; right: 20%; width: 400px; height: 400px; background: #ffc107; }



/* NOSSA RAZÃO ---------------------------------------------------------------------------------------------------------------------------------------------*/
/* Seção Nossa Razão - Padrão Eduardo/Microcamp */
.nossa-razao-section {
    background: #0a0a0a; /* Fundo escuro total */
    padding: 6rem 0;
    color: #ffffff;
    text-align: center;
}

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

/* Badge Roxa */
.razao-badge-wrapper {
    margin-bottom: 2rem;
}

.razao-badge {
    background: rgba(80, 0, 120, 0.2);
    border: 1px solid #6a1b9a;
    color: #a29bfe;
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Título com Degradê */
.razao-title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 3rem;
}

.text-gradient-yellow {
    background: linear-gradient(to bottom, #ffeb3b, #ffa000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Descrição em Cinza Suave */
.razao-description p {
    color: #b0b0b0; /* O cinza suave da imagem */
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    font-weight: 400;
}

/* Card de Objetivo Final */
.razao-objective-card {
    background: #111;
    border: 1px solid rgba(255, 193, 7, 0.2); /* Borda neon amarela sutil */
    border-radius: 16px;
    padding: 1.5rem 2.5rem;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 2rem;
    text-align: left;
    max-width: 800px;
}

.card-icon {
    font-size: 2rem;
    color: #ff4081; /* Cor do ícone de alvo */
}

.card-text {
    display: flex;
    flex-direction: column;
}

.card-text strong {
    color: #ffc107; /* Amarelo destaque */
    font-size: 1rem;
    margin-bottom: 4px;
}

.card-text span {
    color: #ffffff;
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Responsividade */
@media (max-width: 768px) {
    .razao-objective-card {
        flex-direction: column;
        text-align: center;
        padding: 2rem;
    }
}

/* Card de Objetivo - Fiel à imagem image_88c634.png */
.razao-objective-card {
    background: #111;
    border: 1px solid rgba(255, 193, 7, 0.4); /* Borda amarela neon fina */
    border-radius: 18px;
    padding: 1.2rem 2rem;
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 850px;
    margin: 3rem auto;
}

/* Estilização do Ícone 🎯 */
.target-icon {
    font-size: 2.2rem;
    display: block;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(255, 64, 129, 0.3));
}

.card-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* Amarelo Neon no Título do Card */
.card-text strong.text-neon-yellow {
    color: #ffd600;
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 2px;
}

/* Cinza bem clarinho no texto de apoio */
.card-text span.text-light-gray {
    color: #f5f5f5; /* Seu cinza clarinho padrão */
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.95;
}




/* CARD -------------------------------------------------------------------------------------------------------------------------------------------------------*/


/* Seção Diferenciais - Imagem image_886175.png */
.diferenciais-section {
    background: #0a0a0a;
    padding: 6rem 0;
    text-align: center;
}

.diferenciais-title {
    color: #f5f5f5; /* Seu cinza clarinho padrão */
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 4rem;
}

.diferenciais-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Estrutura do Card */
.diff-card {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
    transition: transform 0.3s ease;
}

.diff-card:hover {
    transform: translateY(-5px);
}

/* Ícones com box colorido e neon */
.diff-icon-box {
    width: 55px;
    height: 55px;
    min-width: 55px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.diff-text {
    display: flex;
    flex-direction: column;
}

.diff-title {
    color: #f5f5f5; /* Cinza clarinho */
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.diff-desc {
    color: rgba(245, 245, 245, 0.5); /* Cinza suave para descrição */
    font-size: 0.88rem;
    line-height: 1.4;
}

/* Variações de Cores Neon (Bordas e Ícones) */
/* VERDE */
.border-green { border-color: rgba(0, 255, 102, 0.2); }
.bg-green { 
    background: rgba(0, 255, 102, 0.1); 
    color: #00ff66; 
    border: 1px solid #00ff66;
    box-shadow: 0 0 10px rgba(0, 255, 102, 0.2);
}

/* AMARELO */
.border-yellow { border-color: rgba(255, 193, 7, 0.2); }
.bg-yellow { 
    background: rgba(255, 193, 7, 0.1); 
    color: #ffc107; 
    border: 1px solid #ffc107;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.2);
}

/* ROXO */
.border-purple { border-color: rgba(162, 155, 254, 0.2); }
.bg-purple { 
    background: rgba(162, 155, 254, 0.1); 
    color: #a29bfe; 
    border: 1px solid #a29bfe;
    box-shadow: 0 0 10px rgba(162, 155, 254, 0.2);
}

/* Ajuste na seção para diminuir a distância e aplicar o BG */
.diferenciais-section {
    background: #0f0f0f; /* Um cinza quase preto, mas diferente do #0a0a0a para separar */
    padding: 3rem 0 5rem; /* Diminuído o padding-top de 6rem para 3rem */
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.03); /* Linha quase invisível para marcar o início */
}

/* Ajuste no título para tirar a margem que empurra o bloco de cima */
.diferenciais-title {
    color: #f5f5f5;
    font-size: 2.5rem;
    font-weight: 900;
    margin-top: 0; /* Remove qualquer margem superior */
    margin-bottom: 3rem; /* Espaço até os cards */
    letter-spacing: -1px;
}

/* Opcional: Se o bloco de CIMA tiver muito padding-bottom, 
   adicione isso para "puxar" ele mais perto: */
.nossa-razao-section {
    padding-bottom: 2rem !important; /* Força o bloco anterior a terminar logo */
}

/* Grid de cards mantendo o padrão fiel */
.diferenciais-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.2rem; /* Diminuído levemente o gap para compactar o visual */
    max-width: 1200px;
    margin: 0 auto;
}


/* CURSOS DISPONIVEIS ---------------------------------------------------------------------------------------------------------------------------------*/

/* Seção Cursos Disponíveis */
.cursos-disponiveis {
    background: #0a0a0a; /* Fundo preto padrão */
    padding: 5rem 0;
    text-align: center;
}

.cursos-title {
    color: #f5f5f5; /* Seu cinza clarinho */
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 4rem;
}

.cursos-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
}

/* Estilo do Card */
.curso-card {
    background: #111; /* Fundo do card levemente mais claro */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: left;
    width: 100%;
    max-width: 480px;
    transition: border-color 0.3s ease;
}

.curso-card:hover {
    border-color: rgba(255, 193, 7, 0.3); /* Brilho neon sutil no hover */
}

.curso-name {
    color: #f5f5f5;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

/* Badge Verde da imagem */
.badge-gratuito {
    display: inline-block;
    background: rgba(0, 255, 102, 0.1);
    color: #00ff66;
    border: 1px solid rgba(0, 255, 102, 0.3);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.curso-desc {
    color: rgba(245, 245, 245, 0.6);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    min-height: 80px;
}

/* Footer do Card (Ícones e Info) */
.curso-footer {
    display: flex;
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 1.5rem;
}

.curso-footer span {
    color: rgba(245, 245, 245, 0.5);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.curso-footer i {
    color: #ffc107; /* Amarelo nos ícones conforme padrão Microcamp */
}

/* Responsividade */
@media (max-width: 768px) {
    .cursos-grid {
        padding: 0 20px;
    }
}

/* Container dos Cards */
.cursos-grid-horizontal {
    display: flex;
    flex-direction: row; /* Garante que fiquem lado a lado */
    justify-content: center; /* Centraliza o par de cards na tela */
    align-items: stretch; /* Faz os dois cards terem a mesma altura */
    gap: 2rem; /* Espaçamento entre os dois */
    max-width: 1200px;
    margin: 0 auto;
}

/* Estilo do Card individual */
.curso-card {
    flex: 1; /* Faz com que ambos tentem ocupar o mesmo espaço */
    max-width: 500px; /* Limita a largura para não esticar demais em telas gigantes */
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: left;
}

/* Ajuste para mobile: Se a tela for pequena, eles empilham */
@media (max-width: 992px) {
    .cursos-grid-horizontal {
        flex-direction: column;
        align-items: center;
    }
    
    .curso-card {
        width: 100%;
    }
}

/* Badge e Textos mantendo seu padrão cinza clarinho */
.badge-gratuito {
    background: rgba(0, 255, 102, 0.1);
    color: #00ff66;
    border: 1px solid rgba(0, 255, 102, 0.3);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
}

.curso-desc {
    color: #f5f5f5; /* Seu cinza bem clarinho */
    opacity: 0.7;
    margin-top: 1.5rem;
}

/* DEPOIMENTOS + FAQ-----------------------------------------------------------------------------------------------------------------------------------------*/



/* Seção FAQ - Estilo Escuro e Moderno */
.faq-section {
    background: #0a0a0a;
    padding: 5rem 0;
}

.faq-title {
    color: #f5f5f5; /* Seu cinza bem clarinho */
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 3rem;
    text-align: center;
}

.faq-list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espaçamento entre os itens conforme a imagem */
}

/* Item do FAQ */
.faq-item {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: rgba(255, 193, 7, 0.3);
}

/* Botão da Pergunta */
.faq-question {
    width: 100%;
    padding: 1.2rem 1.5rem;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
}

.question-text {
    color: #f5f5f5;
    font-size: 1rem;
    font-weight: 700;
}

/* Ícone de Raio Amarelo */
.faq-icon-bolt {
    color: #ffc107;
    font-size: 0.9rem;
    opacity: 0.8;
    transition: transform 0.3s ease;
}

/* Efeito de rotação quando aberto */
.faq-item.active .faq-icon-bolt {
    transform: rotate(180deg);
}

/* Resposta */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: rgba(255, 255, 255, 0.02);
}

.answer-inner {
    padding: 0 1.5rem 1.5rem;
}

.faq-answer p {
    color: rgba(245, 245, 245, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Classe utilitária para abrir via JS */
.faq-item.active .faq-answer {
    max-height: 500px; /* Valor alto para permitir expansão */
}


/* FORMULÁRIO -------------------------------------------------------------------------------------------------------------------------------------------*/

/* --- SEÇÃO DE INSCRIÇÃO --- */
.section-inscricao {
    background: #0a0a0a;
    padding: 6rem 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Centralização do Cabeçalho */
.section-header {
    width: 100%;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-main-title {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3rem); /* Responsivo */
    font-weight: 900;
    margin-bottom: 1rem;
}

.form-subtitle {
    color: rgba(255, 255, 255, 0.5);
    max-width: 500px;
    line-height: 1.5;
}

/* --- WRAPPER DO FORMULÁRIO COM BORDA NEON --- */
.form-wrapper {
    max-width: 650px; 
    width: 100%;
    margin: 0 auto;
    background: #111;
    padding: clamp(1.5rem, 5vw, 3rem); /* Padding menor em telas pequenas */
    border-radius: 24px;
    box-sizing: border-box; /* CRÍTICO: Impede que o padding aumente a largura total */
    
    /* Borda Neon Microcamp */
    border: 1px solid rgba(255, 193, 7, 0.4); 
    box-shadow: 0 0 25px rgba(255, 193, 7, 0.15);
    
    transition: all 0.4s ease;
}

.form-wrapper:hover {
    border-color: rgba(255, 193, 7, 0.8);
    box-shadow: 0 0 35px rgba(255, 193, 7, 0.25);
}

/* --- GRID E ORGANIZAÇÃO (Resolve a sobreposição) --- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Força duas colunas iguais */
    gap: 1.5rem; /* Espaço entre os campos */
    margin-bottom: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.form-group label {
    color: #f5f5f5;
    font-weight: 600;
    font-size: 0.9rem;
    padding-left: 5px;
}

/* Estilo Base dos Inputs */
.form-inscricao-modern input, 
.form-inscricao-modern select, 
.form-inscricao-modern textarea {
    background: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px;
    padding: 1rem;
    color: #fff !important;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box; /* CRÍTICO: Mantém o input dentro da coluna */
    outline: none;
    transition: border-color 0.3s;
}

.form-inscricao-modern input:focus {
    border-color: #ffc107 !important;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.1);
}

/* Ocupar linha inteira */
.full-width {
    grid-column: span 2;
}

/* --- BOTÃO AMARELO --- */
.btn-submit-yellow {
    width: 100%;
    background: #ffc107;
    color: #000;
    border: none;
    border-radius: 14px;
    padding: 1.2rem;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    margin-top: 1rem;
    transition: all 0.3s ease;
}

.btn-submit-yellow:hover {
    background: #ffca2c;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
}

/* --- CORREÇÃO AUTOFILL (Navegador) --- */
.form-inscricao-modern input:-webkit-autofill,
.form-inscricao-modern textarea:-webkit-autofill {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0px 1000px #0a0a0a inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* --- ALERTAS --- */
.alert-success-modern {
    background: rgba(0, 255, 102, 0.1);
    border: 1px solid rgba(0, 255, 102, 0.4);
    color: #00ff66;
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
}

/* Responsividade Celular */
@media (max-width: 650px) {
    .form-grid {
        grid-template-columns: 1fr; /* Coluna única no mobile */
    }
    .full-width {
        grid-column: span 1;
    }
    .form-main-title {
        font-size: 2.2rem;
    }
}



/* UNIDADES --------------------------------------------------------------------------------------------------------------------------------*/


/* Grid de Unidades */
/* Container que limita a largura e centraliza o bloco na tela */
.container-unidades {
    max-width: 1200px !important; /* Impede que os cards ocupem a tela toda */
    margin: 0 auto;
    width: 90%;
}

/* Reduz o espaçamento do topo para aproximar do bloco anterior */
.section-unidades-ajuste {
    padding: 4rem 20px 5rem !important; /* Diminuído de 8rem para 4rem */
    background: #0a0a0a;
}

/* Título mais próximo dos cards */
.section-header-ajuste {
    margin-bottom: 2.5rem !important;
}

/* Grid de Unidades */
.units-grid {
    display: grid;
    /* auto-fit faz os cards ficarem centralizados se houver poucos */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
    gap: 20px;
    padding: 10px;
}

/* Card Estilo Premium */
.unit-card {
    background: #111; 
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, border-color 0.3s ease;
    min-height: 280px; /* Mantém um padrão de altura */
}

.unit-card:hover {
    border-color: rgba(255, 193, 7, 0.4);
    transform: translateY(-5px);
}

.unit-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 5px;
    color: #fff;
}

.unit-city-tag {
    color: #ffc107; 
    font-weight: 700;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 15px;
}

.unit-info {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 10px;
}

/* Botões e Links */
.unit-card-footer {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.link-whatsapp {
    color: #25d366;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.btn-card-action {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border: 1px solid #ffc107;
    padding: 8px 15px;
    border-radius: 8px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.btn-card-action:hover {
    background: #ffc107;
    color: #000;
}

/* Responsividade específica para manter 4 colunas apenas em telas largas */
@media (min-width: 1200px) {
    .units-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .units-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .units-grid {
        grid-template-columns: 1fr;
    }
}


/*CERTIFICADO ----------------------------------------------------------------------------------------------------------------------*/
/* ==========================================================================
   SEÇÃO DO CERTIFICADO (CSS COMPLETO)
   ========================================================================== */

.section-certificate {
    background: #0a0a0a;
    padding: 8rem 20px;
    display: flex;
    justify-content: center;
}

.certificate-wrapper {
    max-width: 1200px;
    width: 100%;
    background-color: #111;
    border-radius: 32px;
    padding: 4rem;
    display: grid;
    grid-template-columns: 1fr 400px; /* Trava a largura do certificado à direita */
    gap: 4rem;
    align-items: center;
    position: relative;
    
    /* Borda Neon com Gradiente */
    border: 3px solid transparent;
    background-image: linear-gradient(#111, #111), 
                      linear-gradient(to right, #ffc107, #00f2fe, #ff00ff);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Badge Superior */
.badge-certified {
    background: #1a1a1a;
    border: 1px solid rgba(255,193,7,0.3);
    color: #ffc107;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2rem;
}

/* Textos da Esquerda */
.cert-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #e0e0e0; /* Off-white para conforto visual */
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.text-yellow { color: #ffc107; }

.cert-description {
    color: #888;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 600px;
}

.cert-list {
    list-style: none;
    padding: 0;
}

.cert-list li {
    color: #e0e0e0;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    font-weight: 500;
}

.cert-list i {
    color: #00ffcc; /* Verde neon dos checks */
    font-size: 1.2rem;
}

/* ==========================================================================
   MOCKUP DO CERTIFICADO (DIREITA)
   ========================================================================== */

.cert-card-mockup {
    background: #0a0a0a;
    border: 1.5px solid #ffc107; /* Borda dourada externa */
    border-radius: 20px;
    padding: 12px; /* Espaço para o contorno interno */
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

/* O Contorno Interno Sutil (Igual à imagem_7c2257.png) */
.cert-inner {
    border: 1px solid rgba(255, 255, 255, 0.05); /* Linha fantasma interna */
    border-radius: 12px;
    padding: 30px;
    text-align: center;
}

.cert-icon {
    width: 45px;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.3));
}

.cert-label {
    display: block;
    color: #ffc107;
    font-weight: 800;
    font-size: 0.75rem;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.cert-brand {
    font-size: 1.5rem;
    font-weight: 900;
    color: #e0e0e0;
    margin: 0;
}

.cert-sub {
    font-size: 0.65rem;
    color: #444;
    margin-bottom: 15px;
}

.cert-line {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 15px 0;
}

.cert-text-small {
    font-size: 0.8rem;
    color: #666;
}

.cert-user-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: #e0e0e0;
    margin: 10px 0;
}

.cert-course {
    color: #ffc107;
    font-weight: 850;
    font-size: 1.1rem;
}

.cert-footer-mockup {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: #444;
    margin-top: 25px;
}

.cert-signature {
    margin-top: 20px;
    text-align: center;
}

.cert-signature hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 5px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.cert-signature span {
    color: #444;
    font-size: 0.7rem;
    text-transform: uppercase;
}

/* ==========================================================================
   RESPONSIVIDADE
   ========================================================================== */

@media (max-width: 1100px) {
    .certificate-wrapper {
        grid-template-columns: 1fr;
        padding: 2.5rem;
        text-align: center;
    }

    .cert-description {
        margin-left: auto;
        margin-right: auto;
    }

    .cert-list li {
        justify-content: center;
    }

    .certificate-visual {
        display: flex;
        justify-content: center;
    }
}

/* Estilo do Troféu */
.cert-trophy-container {
    color: #ffc107; /* Dourado Microcamp */
    font-size: 2.5rem;
    margin-bottom: 15px;
    display: block;
    filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.3));
}

/* O Contorno Interno (Igual à imagem_7c2257.png) */
.cert-inner {
    border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Linha sutil interna */
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    background: transparent;
}

/* Ajuste das cores suaves para não cansar a vista */
.cert-brand, .cert-user-name {
    color: #e0e0e0 !important; /* Off-white */
}

.cert-text-small, .cert-sub, .cert-footer-mockup span {
    color: #777 !important; /* Cinza médio */
}



/* RODAPÉ ---------------------------------------------------------------------------------------------------------------------------------*/


/* ==========================================================================
   BANNER DE CHAMADA (ESTILO TOPO)
   ========================================================================== */

.cta-banner-transform {
    background: #0a0a0a; /* Fundo preto base */
    /* Efeito de luz roxa nas extremidades igual ao topo */
    background-image: 
        radial-gradient(circle at 0% 50%, rgba(145, 70, 255, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 100% 50%, rgba(145, 70, 255, 0.15) 0%, transparent 40%);
    padding: 3rem 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cta-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

/* Textos */
.cta-title {
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.5px;
}

.text-yellow {
    color: #ffc107; /* Amarelo Microcamp */
}

.cta-subtitle {
    color: #666; /* Cinza suave igual ao print */
    font-size: 0.95rem;
    margin-top: 5px;
    font-weight: 500;
}

/* Botão Roxo Neon */
.cta-button-purple {
    background: linear-gradient(135deg, #8a2be2 0%, #a020f0 100%);
    color: white !important;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
    transition: all 0.3s ease;
    white-space: nowrap;
    text-transform: uppercase;
}

.cta-button-purple i {
    font-size: 1rem;
}

.cta-button-purple:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.5);
    filter: brightness(1.1);
}

/* Responsividade */
@media (max-width: 992px) {
    .cta-container {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    
    .cta-title {
        font-size: 1.5rem;
    }
}


/* CURSO REGULARES -------------------------------------------------------------------------------------------------------------------------------*/

/* ==========================================================================
   SEÇÃO MERCADO (ESTILO CENTRALIZADO + BG PREMIUM)
   ========================================================================== */

.section-market-ready {
    background: #0a0a0a;
    /* BG com os brilhos roxos laterais igual ao banner anterior */
    background-image: 
        radial-gradient(circle at 0% 50%, rgba(145, 70, 255, 0.12) 0%, transparent 35%),
        radial-gradient(circle at 100% 50%, rgba(145, 70, 255, 0.12) 0%, transparent 35%);
    padding: 6rem 20px;
    text-align: center;
}

/* Adicione isso na classe da primeira seção após o menu */
.section-market-ready, 
.first-content-section {
    padding-top: 120px; /* Altura do menu + respiro extra */
}

.market-container {
    max-width: 850px; /* Mais estreito para centralizar bem o texto */
    margin: 0 auto;
}

/* Badge Superior */
.market-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 193, 7, 0.05);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 2rem;
}



/* Título */
.market-title {
    color: #ffffff;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
}

.text-yellow {
    color: #ffc107;
}

/* Descrição */
.market-description {
    color: #888; /* Cinza suave */
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Botões */
.market-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.btn-outline-green {
    border: 1px solid #00ff88;
    color: #00ff88 !important;
    background: rgba(0, 255, 136, 0.05);
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
    transition: 0.3s;
}

.btn-outline-green:hover {
    background: #00ff88;
    color: #000 !important;
}

.btn-solid-yellow {
    background: #ffc107;
    color: #000 !important;
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
    transition: 0.3s;
}

.btn-solid-yellow:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(255, 193, 7, 0.4);
}

/* Ajuste Mobile */
@media (max-width: 600px) {
    .market-actions {
        flex-direction: column;
    }
    .market-title {
        font-size: 2rem;
    }
}

/* ==========================================================================
   BADGE COM NEON AMARELO ULTRA (CURSOS REGULARES)
   ========================================================================== */

.market-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 193, 7, 0.08); /* Fundo sutilmente mais visível */
    
    /* BORDA COM BRILHO NEON */
    border: 2px solid #ffc107; 
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.4), inset 0 0 10px rgba(255, 193, 7, 0.2);
    
    color: #ffc107;
    padding: 12px 32px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 100; /* Peso máximo para o texto */
    margin-bottom: 3rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    
    /* EFEITO DE TEXTO NEON */
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
    transition: all 0.3s ease;
}

/* Ícone acompanhando o brilho */
.market-badge i {
    font-size: 1.3rem;
    filter: drop-shadow(0 0 5px rgba(255, 193, 7, 0.8));
}

/* Efeito extra ao passar o mouse */
.market-badge:hover {
    box-shadow: 0 0 25px rgba(255, 193, 7, 0.6), inset 0 0 15px rgba(255, 193, 7, 0.3);
    transform: scale(1.02);
}


/* FILTRO ------------------------------------------------------------------------------------------------------------*/

/* Container principal com o fundo escuro do print */
.filter-container {
    width: 100%;
    max-width: 1200px;
    margin: 4rem auto 3rem auto; /* 4rem de respiro para o bloco de cima */
    padding: 2rem 0;             /* Espaço interno entre as linhas e os botões */
    
    /* AS LINHAS QUE VOCÊ PEDIU */
    border-top: 1px solid rgba(255, 255, 255, 0.08);    /* Linha de cima */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Linha de baixo */
    
    display: flex;
    justify-content: center;
}

.filter-wrapper {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

/* BOTÃO DE FILTRO (PADRÃO) */
.filter-btn {
    background: #1a1b1e;
    color: #888;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px 24px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* EFEITO HOVER (PASSAR O MOUSE) */
.filter-btn {
    background: #1a1b1e;
    color: #888;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px 24px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

/* ESTADO ATIVO COM NOSSO ESQUEMA NEON (AMARELO MICROCAMP) */
.filter-btn.active {
    background: #ffc107; /* Amarelo Microcamp */
    color: #000;
    border-color: #ffc107;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.4); /* Brilho Neon */
}

/* RESPONSIVIDADE */
@media (max-width: 768px) {
    .filter-wrapper {
        gap: 10px;
    }
    .filter-btn {
        padding: 8px 16px;
        font-size: 0.8rem;
    }
}





/* CARD --------------------------------------------------------------------------------------------------------------*/

/* Ajuste no Container para forçar horizontalidade */
.courses-grid {
    display: grid !important;
    /* Aqui o segredo: ele cria colunas de no máximo 350px. 
       Se tiver só 1 card, ele não vira um "linhão" de 100% */
    grid-template-columns: repeat(auto-fit, minmax(350px, 350px)) !important;
    gap: 25px !important;
    margin-top: 1rem !important;
    justify-content: center !important; /* Centraliza os cards dentro do grid */
    width: 100% !important;
}

.section-title {
    font-size: 1.6rem;
    font-weight: 900;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Card - Mantido exatamente como o seu */
.course-card {
    background: #0f0f0f;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%; /* Isso garante que todos os cards da linha tenham a mesma altura */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-card:hover {
    transform: translateY(-5px);
}

/* Moldura interna da imagem - Mantido */
.card-image-wrapper {
    padding: 12px;
}

.card-image-wrapper img, .card-placeholder {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 15px;
}

.card-placeholder {
    background: linear-gradient(135deg, #1e1b4b, #111);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
}

/* Corpo e Conteúdo - Mantido */
.course-card-body {
    padding: 0 1.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.category-badge {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 50px;
    width: fit-content;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.course-card-body h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.course-card-body p {
    color: #888;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Ícones e Metadados - Mantido */
.card-meta {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 1.5rem;
    margin-top: auto; /* Fundamental para alinhar os botões na mesma linha horizontal */
}

/* Botão Neon Dinâmico - Mantido */
.btn-solicitar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border-radius: 12px;
    color: #000;
    font-weight: 850;
    text-decoration: none;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-solicitar:hover {
    filter: brightness(1.2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.btn-solicitar i {
    font-size: 0.8rem;
}

/* PORQUE Microcamp -------------------------------------------------------------------------------------------------------------*/


/* CONTAINER PRINCIPAL */
.benefits-section {
    width: 100%;
    padding: 4rem 20px;
    background: #000; /* Fundo Black total para destacar o neon */
}

.benefits-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* TÍTULO COM DESTAQUE AMARELO */
.benefits-title {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 3rem;
    text-transform: uppercase;
}

.benefits-title span {
    color: #ffc107;
}

/* GRID DE BENEFÍCIOS */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 20px;
}

/* CARD ESTILO PREMIUM */
.benefit-card {
    background: #0f0f0f;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 25px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: all 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 193, 7, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ÍCONE NEON AMARELO */
.benefit-card i {
    color: #ffc107;
    font-size: 1.5rem;
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.5); /* Efeito Neon */
    margin-top: 5px;
}

/* CONTEÚDO DO CARD */
.benefit-content h3 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.benefit-content p {
    color: #888;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* RESPONSIVIDADE PARA CELULAR */
@media (max-width: 768px) {
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .benefit-card {
        padding: 20px;
    }
}

/* BLOG ----------------------------------------------------------------------------------------------------------------------*/

/* Container da Seção com espaçamento generoso no topo */
.blog-header-section {
    /* Aumentado para 160px para compensar o menu fixo */
    padding: 160px 0 60px 0; 
    text-align: center;
    background: #000; /* Fundo preto puro para destacar o neon */
}

/* Tag centralizada apenas em Roxo Neon */
.blog-tag-container {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.tag-neon-purple {
    background: rgba(157, 78, 221, 0.1);
    color: #9d4edd; /* Roxo puro */
    border: 1px solid #9d4edd;
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 0 20px rgba(157, 78, 221, 0.3); /* Brilho neon roxo */
}

/* Título com o Amarelo Microcamp */
.blog-main-title {
    font-size: clamp(3rem, 10vw, 4.5rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 15px;
    color: #fff;
    /* Removido o uppercase para respeitar a escrita original */
    letter-spacing: -1px; /* Ajuste leve para manter o visual premium */
}

.gradient-text-yellow {
    background: linear-gradient(135deg, #ffcc00 0%, #ff9900 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Subtítulo */
.blog-subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.1rem;
    max-width: 1000px; /* Aumentado para o texto caber em uma linha só */
    margin: 0 auto;
    white-space: nowrap; /* Garante que não quebre em telas maiores */
}


/* -----------------------------------------------------------------------------------------------------*/

/* SEÇÃO FUNDO TOTAL */
.blog-section-clean {
    padding: 6rem 0 !important;
    background: #0a0a0a !important;
    width: 100% !important;
}

/* CONTAINER QUE CENTRALIZA IGUAL AO SEU ANTIGO MAS SEM QUEBRAR O MENU */
.blog-custom-container {
    width: 100% !important;
    max-width: 1200px !important; /* Limite de largura para ficar no centro */
    margin: 0 auto !important;    /* Centraliza o bloco na página */
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* GRID DE 3 COLUNAS */
.posts-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    width: 100% !important;
}

/* ESTILO DO CARD (IGUAL AO SEU PRINT) */
.post-card {
    background: #111 !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    overflow: hidden !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: transform 0.3s ease !important;
}

.post-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
}

.post-card img, .post-placeholder {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
}

.post-card-body {
    padding: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.post-card-body h3 {
    color: #fff !important;
    font-size: 1.1rem !important;
    font-weight: 850 !important;
    line-height: 1.4 !important;
    margin: 10px 0 !important;
}

.post-card-body p {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.85rem !important;
    margin-bottom: 1.5rem !important;
}

/* INJEÇÃO DO LER ARTIGO AMARELO */
.post-card-body::after {
    content: "Ler artigo >" !important;
    color: #ffc107 !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    margin-top: auto !important;
}

/* ESCONDER DATA SE QUISER VISUAL LIMPO DA FOTO */
.post-meta {
    display: none !important; 
}

/* RESPONSIVIDADE */
@media (max-width: 992px) {
    .posts-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
    .posts-grid { grid-template-columns: 1fr !important; }
}


/* FILTRO --------------------------------------------------------------------------------------------------------------------------------------*/


/* BLOCO DE FILTROS SEPARADO */
.blog-filters-wrapper {
    background: #0d0d0d !important; /* Um tom acima do fundo para dar profundidade */
    padding: 2rem 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-bottom: 4rem !important;
}

.filter-flex-container {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
}

/* BARRA DE BUSCA */
.search-form-blog {
    flex: 1 !important;
    min-width: 300px !important;
}

.search-input-group {
    position: relative !important;
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 15px !important;
    transition: all 0.3s ease !important;
}

.search-input-group:focus-within {
    border-color: #ffc107 !important;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.2) !important;
}

.search-input-group i {
    color: rgba(255, 255, 255, 0.3) !important;
    margin-right: 10px !important;
}

.search-input-group input {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    padding: 12px 0 !important;
    width: 100% !important;
    outline: none !important;
    font-size: 0.95rem !important;
}

/* BOTÕES DE CATEGORIA */
.categories-list-blog {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.filter-btn {
    padding: 10px 22px !important;
    border-radius: 10px !important;
    background: #1a1a1a !important;
    color: #888 !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
}

.filter-btn:hover {
    color: #fff !important;
    background: #252525 !important;
}

/* ESTADO ATIVO (AMARELO MICROCAMP) */
.filter-btn.active {
    background: #ffc107 !important;
    color: #000 !important;
    border-color: #ffc107 !important;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.3) !important;
}

/* AJUSTE RESPONSIVO */
@media (max-width: 768px) {
    .filter-flex-container {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .categories-list-blog {
        justify-content: center !important;
    }
}


/* BLOCO DE FILTROS - Linhas mais fortes e aproximação */
.blog-filters-wrapper {
    background: #0d0d0d !important;
    padding: 1.5rem 0 !important;
    /* Borda mais forte (0.2 de opacidade e 2px) */
    border-top: 2px solid rgba(255, 255, 255, 0.2) !important; 
    border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
    /* Margem reduzida para colar no conteúdo abaixo */
    margin-bottom: 1.5rem !important; 
}

/* BOTÕES MAIORES (VERTICAL) */
.filter-btn {
    /* Aumentei o primeiro valor (16px) para dar altura */
    padding: 16px 28px !important; 
    border-radius: 12px !important;
    background: #1a1a1a !important;
    color: #888 !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* INPUT DE BUSCA - Acompanhando a altura dos botões */
.search-input-group {
    background: #1a1a1a !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    /* Ajuste de altura interna para alinhar com os botões */
    padding: 6px 15px !important; 
}

.search-input-group input {
    padding: 10px 0 !important;
}

/* BOTÃO ATIVO - Mais presença */
.filter-btn.active {
    background: #ffc107 !important;
    color: #000 !important;
    border-color: #ffc107 !important;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.4) !important;
}

/* RESET DE MARGEM DO GRID - Garante que nada empurre para baixo */
.posts-grid {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* PÁGINAÇÃO -------------------------------------------------------------------------------------------------------------------------------------*/


/* CONTAINER E GRID */
.blog-custom-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }

/* FILTROS */
.blog-filters-wrapper { 
    background: #0d0d0d; padding: 1.5rem 0; 
    border-top: 2px solid rgba(255,255,255,0.2); 
    border-bottom: 2px solid rgba(255,255,255,0.2); 
    margin-bottom: 2rem; 
}
.filter-flex-container { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.filter-btn { padding: 16px 28px; border-radius: 12px; background: #1a1a1a; color: #888; text-decoration: none; font-weight: 700; border: 1px solid rgba(255,255,255,0.1); }
.filter-btn.active { background: #ffc107; color: #000; box-shadow: 0 0 20px rgba(255,193,7,0.4); }

/* PAGINAÇÃO ESTILO PRINT */
.pagination-wrapper { margin-top: 4rem; padding-bottom: 5rem; }
.pagination-flex { display: flex; justify-content: center; align-items: center; gap: 2rem; }
.pag-btn { background: #1a1a1a; color: #fff; padding: 12px 25px; border-radius: 12px; text-decoration: none; font-weight: 600; border: 1px solid rgba(255,255,255,0.1); transition: 0.3s; }
.pag-btn:hover:not(.disabled) { border-color: #ffc107; color: #ffc107; }
.pag-btn.disabled { opacity: 0.2; cursor: not-allowed; }
.pag-number { color: rgba(255,255,255,0.5); font-size: 0.9rem; }

/* RESPONSIVO */
@media (max-width: 992px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .posts-grid { grid-template-columns: 1fr; } .filter-flex-container { flex-direction: column; } }


/* BLOG POST ----------------------------------------------------------------------------------------------------------------------------*/

/* ==========================================================================
   BLOG PREMIUM - ESTILO NEON (EDUARDO / MICROCAMP)
   ========================================================================== */
/* Container de largura limitada para leitura, centralizado na tela */
.blog-container-center {
    width: 100%;
    max-width: 800px; /* Largura ideal para não zuar a leitura */
    margin: 0 auto !important; /* Força a centralização horizontal */
    display: block;
    float: none !important; /* Mata qualquer float que esteja jogando pra esquerda */
    clear: both;
}

/* Força a seção a ocupar a tela toda e alinhar o que estiver dentro */
.section-full-width {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centraliza o conteúdo flex */
    justify-content: center !important;
}

/* Garante que o 404 e textos de apoio fiquem no meio */
.text-center-force {
    text-align: center !important;
    width: 100% !important;
}

/* O conteúdo do post deve ser centralizado como bloco, mas o texto interno à esquerda */
.post-content-body {
    text-align: left !important; /* Texto corrido sempre à esquerda por legibilidade */
    width: 100%;
}
/* 1. Botão de Voltar Neon (404 e Topo do Post) */
.btn-neon-back {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 35px;
    background: transparent;
    color: #fff;
    border: 2px solid #7c3aed;
    border-radius: 50px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
    cursor: pointer;
}

.btn-neon-back:hover {
    background: #7c3aed;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 0 35px rgba(124, 58, 237, 0.8);
}

.btn-neon-back i { 
    transition: transform 0.3s ease; 
}

.btn-neon-back:hover i { 
    transform: translateX(-5px); 
}

/* 2. Badge Customizada */
.badge-purple {
    background: rgba(124, 58, 237, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(124, 58, 237, 0.3);
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 3. Conteúdo do Post (Respiro e Legibilidade) */
.post-content { 
    color: rgba(255, 255, 255, 0.9); 
    line-height: 1.8; 
    font-size: 1.30rem; 
}

/* Títulos internos com Glow */
.post-content h2 { 
    font-size: 1.8rem; 
    font-weight: 800; 
    margin: 3.5rem 0 1.2rem; 
    color: #fff;
    text-shadow: 0 0 10px rgba(124, 58, 237, 0.6);
}

.post-content h3 { 
    font-size: 1.4rem; 
    font-weight: 700; 
    margin: 2.5rem 0 1rem; 
    color: #00ff88; /* Verde Neon para subtítulos */
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

.post-content p { 
    margin-bottom: 1.8rem; 
}

/* Elementos de Mídia */
.post-content img { 
    max-width: 100%; 
    border-radius: 15px; 
    margin: 2.5rem 0; 
    border: 1px solid rgba(124, 58, 237, 0.25);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Blockquote Cyberpunk */
.post-content blockquote { 
    border-left: 4px solid #7c3aed; 
    padding: 1.5rem 2rem; 
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.1) 0%, transparent 100%); 
    margin: 3rem 0; 
    font-style: italic;
    border-radius: 0 12px 12px 0;
    color: rgba(255, 255, 255, 0.8);
}

/* 4. Cards de Posts Relacionados */
.post-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.post-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    border-color: rgba(124, 58, 237, 0.4);
}

/* 5. Botões de Compartilhamento */
.btn-whatsapp {
    background: #25d366;
    color: #fff !important;
    border: none;
}

.btn-whatsapp:hover {
    background: #20ba5a;
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.4);
}

.btn-outline {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff !important;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

/* Subtítulo com Barra Lateral Neon (Estilo Microcamp Premium) */
.post-subtitle-highlight {
    border-left: 4px solid #7c3aed; /* A barra roxa neon que você já usa */
    padding-left: 20px;
    margin: 2rem 0 3rem 0;
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.25rem;
    line-height: 1.6;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.05) 0%, transparent 100%);
    display: block;
}

/* Se preferir a barra em dourado/laranja como na imagem */
.post-subtitle-gold {
    border-left: 4px solid #f59e0b; 
    padding-left: 20px;
    margin: 2rem 0 3rem 0;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.25rem;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.05) 0%, transparent 100%);
}

/* Efeito de Hover no Card dos Relacionados */
.post-card:hover h3 {
    color: #f59e0b !important; /* Amarelo/Laranja Neon */
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.5); /* Brilho Neon */
    transition: all 0.3s ease; /* Transição suave */
}

/* Opcional: Leve levantada no card ao passar o mouse */
.post-card {
    transition: transform 0.3s ease;
}

.post-card:hover {
    transform: translateY(-5px);
}


/* GALERIA --------------------------------------------------------------------------------------------------------------------*/

/* ============================================================
   ESTRUTURA DE BASE E TRAVA DE CONTEÚDO
   ============================================================ */
.galeria-content-limit {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* ============================================================
   SEÇÃO 01: FILTROS (FUNDO 100% / CONTEÚDO ALINHADO)
   ============================================================ */
.galeria-filtro-wrapper {
    width: 100%;
    background: #0a0a0a;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    padding: 30px 0;
    margin-bottom: 20px;
}

/* --- CAMPO DE BUSCA (ALINHADO E SLIM) --- */
.galeria-busca-row {
    width: 100%;
    display: flex;
    justify-content: flex-start; /* Garante que comece na esquerda alinhado com as fotos */
}

.galeria-input-group {
    position: relative;
    margin-bottom: 25px;
    /* Ajuste de largura horizontal para não ficar "enorme" */
    width: 100%;
    max-width: 1150px; 
}

.galeria-input-group input {
    background: #111;
    border: 1px solid #333;
    color: #fff;
    width: 100%;
    /* Voltando à altura original confortável */
    padding: 20px 15px 12px 45px; 
    border-radius: 10px;
    outline: none;
    transition: 0.3s;
    font-size: 14px;
}

.galeria-input-group input:focus {
    border-color: #444;
}

/* LUPA CINZA (IGUAL AO BLOG.PHP / image_b7c254.png) */
.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    /* Lupa cinza igual do seu print */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3e%3ccircle cx='11' cy='11' r='8'/%3e%3cpath d='M21 21l-4.35-4.35'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none; /* Deixa clicar no input através da lupa */
}

/* --- LINHA DE AÇÕES (BOTÕES + SELECT) --- */
.galeria-acoes-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.galeria-categorias-lista {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* --- BOTÕES (PILLS) --- */
.galeria-btn-pill {
    background: #151515;
    color: #777;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid #222;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.galeria-btn-pill:hover {
    background: #202020;
    color: #fff;
}

.galeria-btn-pill.active {
    background: #ffca28;
    color: #000;
    border-color: #ffca28;
    box-shadow: 0 4px 20px rgba(255, 202, 40, 0.4);
}

/* --- SELECT DE UNIDADES --- */
.galeria-select-minimal {
    background-color: #111 !important;
    color: #fff !important;
    border: 1px solid #333;
    padding: 11px 40px 11px 15px;
    border-radius: 8px;
    appearance: none;
    outline: none;
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
}

/* ============================================================
   SEÇÃO 02: GRID DE FOTOS
   ============================================================ */
/* Container Geral */
.galeria-fotos-wrapper {
    background: #000;
    padding: 60px 0;
}

/* Grid 4x3 Rigoroso */
.galeria-grid-premium {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colunas */
    gap: 25px;
    max-width: 1250px;
    margin: 0 auto;
}

/* Card com Borda Neon */
.galeria-card-neon {
    position: relative;
    border-radius: 15px;
    background: #111;
    border: 1px solid #222;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s ease;
}

.galeria-card-neon:hover {
    border-color: #00ff88; /* Verde Neon */
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
    transform: translateY(-5px);
}

/* Imagem e Animação */
.galeria-img-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* Mantém a proporção do card */
    overflow: hidden;
}

.img-animada {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.galeria-card-neon:hover .img-animada {
    transform: scale(1.1);
}

/* Lupa no Hover */
.galeria-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 255, 136, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 5;
    transition: 0.3s ease;
}

.galeria-hover-overlay i {
    font-size: 2.5rem;
    color: #fff;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
}

.galeria-card-neon:hover .galeria-hover-overlay {
    opacity: 1;
}

/* TEXTOS: PADRÃO DA IMAGEM */
.galeria-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 20%, transparent 100%);
    z-index: 6;
}

/* Tag Pill (Igual à imagem) */
.tag-categoria-pill {
    display: inline-block;
    background: rgba(20, 20, 25, 0.9);
    border: 1px solid #4a3aff; /* Roxo Neon */
    color: #8c82ff;
    padding: 5px 18px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    box-shadow: 0 0 10px rgba(74, 58, 255, 0.2);
}

/* Título Glow (Igual à imagem) */
.titulo-glow {
    color: #ffca28; /* Amarelo */
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 0 10px rgba(255, 202, 40, 0.5); /* O Glow */
    transition: 0.3s ease;
}

.galeria-card-neon:hover .titulo-glow {
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

/* Play do Vídeo */
.video-overlay-play {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ffca28;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 7;
    box-shadow: 0 0 15px rgba(255, 202, 40, 0.4);
}

.video-overlay-play i {
    color: #000;
    font-size: 0.8rem;
    margin-left: 2px;
}

/* ABRIR IMAGEM --------------------------------------------------------------------------------------------------------------------*/


/* 1. Overlay de Fundo (Cobre a tela toda) */
.lightbox-overlay {
    display: none; 
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    z-index: 999999 !important;
}

/* 2. Container Central (Base para o posicionamento dos botões) */
.lightbox-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 85%; /* Garante espaço para as setas nas laterais */
}

/* 3. Conteúdo (Imagem ou Vídeo) */
#lightbox-content img, 
#lightbox-content video {
    max-width: 100%;
    max-height: 75vh;
    border-radius: 4px;
    border: 2px solid #222;
    box-shadow: 0 0 50px rgba(0, 0, 0, 1), 0 0 20px rgba(0, 255, 136, 0.1);
    display: block;
}

/* 4. Setas de Navegação (Laterais) */
.lightbox-prev, 
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(20, 20, 23, 0.8);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 55px;
    height: 55px;
    cursor: pointer;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    transition: 0.3s ease;
}

/* Distância das setas em relação à borda da imagem */
.lightbox-prev { left: 600px; }
.lightbox-next { right: 600px; }

.lightbox-prev:hover, 
.lightbox-next:hover {
    background: #ffca28; /* Amarelo Microcamp */
    color: #000;
    border-color: #ffca28;
    box-shadow: 0 0 20px rgba(255, 202, 40, 0.6);
}

/* 5. Botão de Fechar (Topo Direito) */
.lightbox-close {
    position: absolute;
    top: 30px;
    right: 700px;
    color: #ff4444;
    font-size: 50px;
    font-weight: 200;
    cursor: pointer;
    z-index: 10002;
    line-height: 1;
    transition: 0.3s;
}

.lightbox-close:hover {
    transform: scale(1.2) rotate(90deg);
    color: #fff;
}

/* 6. Legenda (Tag e Título) */
.lightbox-caption {
    margin-top: 20px;
    text-align: center;
}

/* 7. Responsividade (Mobile) */
@media (max-width: 1024px) {
    .lightbox-container { max-width: 95%; }
    
    .lightbox-prev { left: 10px; width: 45px; height: 45px; }
    .lightbox-next { right: 10px; width: 45px; height: 45px; }
    
    .lightbox-close { 
        top: 10px; 
        right: 15px; 
        font-size: 40px; 
        background: rgba(0,0,0,0.5);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}



/*-------------------------------------------------------------------------------------------------------------------*/

.galeria-controles-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

/* Classe Única para os 3 botões ficarem iguais */
.btn-controle-premium {
    text-decoration: none;
    background: transparent;
    color: #666;
    border: 1px solid #333;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    height: 42px; /* Altura fixa para todos */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    white-space: nowrap;
}

.btn-controle-premium:hover {
    color: #fff;
    border-color: #444;
    background: #111;
}

/* Destaque para quando a aba (Fotos ou Vídeos) estiver ativa */
.btn-controle-premium.active {
    background: #111;
    color: #ffca28; /* Amarelo que você usa no TODOS */
    border-color: #ffca28;
    box-shadow: 0 0 10px rgba(255, 202, 40, 0.2);
}

/* Ajuste do ícone */
.btn-controle-premium i {
    font-size: 14px;
}


/*DEPOIMENTOS--------------------------------------------------------------------------------------------------- ---------------------------------------------------------*/

/* Container de 1200px com Grid 4x4 */
.depoimentos-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* Card Base - Altura Slim 300px */
.card-depoimento-premium {
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 1.25rem;
    height: 300px; /* Sua nova altura fixa */
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Hover Padrão (Amarelo) */
.card-depoimento-premium:hover {
    transform: translateY(-5px);
    border-color: #ffc107;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.2);
}

/* Hover Especial (Roxo Neon para Regular) */
.card-depoimento-premium.is-regular:hover {
    border-color: #7c3aed;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
}

/* Janela que abre no Hover (Apenas para Texto) */
.card-depoimento-premium:not(.tem-video):hover .depoimento-full {
    opacity: 1;
    visibility: visible;
}

.depoimento-full {
    position: absolute;
    inset: 0;
    background: #121212;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10;
    border: 1px solid #ffc107;
    border-radius: 20px;
}

.is-regular .depoimento-full {
    border-color: #7c3aed;
}

/* Texto do Depoimento - Ajustado para 11px */
.depoimento-txt {
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px; /* Seu ajuste fino */
    font-style: italic;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Reduzi para 4 pela altura do card */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1rem;
}

.depoimento-full-txt {
    color: #fff;
    font-size: 11px;
    font-style: italic;
    overflow-y: auto;
    margin-bottom: 0.75rem;
    flex-grow: 1;
}

/* Rodapé e Identidade */
.aluno-info {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 0.75rem;
    margin-top: auto;
}

.avatar-aluno, .avatar-fake {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-fake {
    background: #ffc107;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: 900;
    font-size: 14px;
}

.is-regular .avatar-fake { background: #7c3aed; color: #fff; }

.nome-aluno { font-weight: 700; color: #fff; margin: 0; font-size: 13px; }

/* Status do Aluno (Cor dinâmica via classe) */
.status-aluno { color: #ffc107; font-size: 11px; margin: 0; }
.is-regular .status-aluno { color: #7c3aed !important; }

/* Responsivo */
@media (max-width: 1024px) { .depoimentos-container { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .depoimentos-container { grid-template-columns: 1fr; } }


/* FILTRO --------------------------------------------------------------------------------------------*/

/* Linha que pega o horizontal todo */
.linha-horizontal-full {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.05); /* Cinza muito fraco conforme seu padrão */
    margin: 0;
}

.filtros-wrapper {
    width: 100%;
    background: #0d0d0d; /* Fundo combinando com o card */
    padding: 15px 0;
    display: flex;
    justify-content: center;
}

.filtros-container {
    display: flex;
    align-items: center;
    max-width: 1200px; /* Alinhado com o seu grid */
}

/* Divisor Vertical entre os botões (Ajuste Fino) */
.divisor-v {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 20px;
}

/* Botões de Filtro */
.btn-filtro {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 20px;
    border-radius: 8px;
    transition: 0.3s;
}

.btn-filtro.active {
    background: #ffc107; /* Amarelo Microcamp */
    color: #000;
}

.btn-filtro:hover:not(.active) {
    color: #fff;
}



/* UNIIDADE MAPA LATERAL ----------------------------------------------------------------------------------------------------------------------*/

/* ==========================================================================
   CONTAINER PRINCIPAL - ESTRUTURA PREMIUM
   ========================================================================== */
.unidades-premium-wrapper { 
    padding: 4rem 0; 
    background: #000000; 
}

.unidades-panel {
    display: flex;
    height: 650px; 
    background: #000000; /* Cinza bem escuro para o fundo do painel */
    border-radius: 20px;
    overflow: hidden;
   
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   SIDEBAR LATERAL - FOCO NO CLIQUE
   ========================================================================== */
.unidades-sidebar {
    width: 400px;
    display: flex;
    flex-direction: column;
    background: #0d0d0d; /* Levemente mais claro que o wrapper */
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 10; /* Garante que fique acima do mapa */
}

.sidebar-header { 
    padding: 1.5rem; 
    background: #111;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
}

.unidades-count { 
    color: #ffc107; 
    font-size: 0.7rem; 
    font-weight: 800; 
    letter-spacing: 1.5px; 
    text-transform: uppercase;
}

/* LISTA COM SCROLL */
.unidades-lista-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    position: relative;
    z-index: 11;
    pointer-events: auto !important; /* CRÍTICO: Garante que o clique passe */
}

/* Scrollbar Personalizada */
.unidades-lista-scroll::-webkit-scrollbar { width: 5px; }
.unidades-lista-scroll::-webkit-scrollbar-track { background: #0d0d0d; }
.unidades-lista-scroll::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
.unidades-lista-scroll::-webkit-scrollbar-thumb:hover { background: #ffc107; }

/* ==========================================================================
   CARDS DAS UNIDADES (ESTILIZAÇÃO)
   ========================================================================== */
.unit-item-card {
    display: flex;
    gap: 1.2rem;
    padding: 10px;
    align-items: flex-start; /* Alinha o topo do número com o topo do texto */
    background: #111 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.unit-item-card:hover { 
    background: rgba(255, 255, 255, 0.03); 
}

/* Destaque quando o card está ativo (opcional via JS) */
.unit-item-card.active {
    background: rgba(255, 193, 7, 0.05);
    border-left: 3px solid #ffc107;
}

.unit-number {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    min-width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 193, 7, 0.3);
    
    /* Ajuste fino: Se o texto do H3 parecer mais alto que o quadrado, 
       ajuste esses pixels para baixo */
    margin-top: 2px; 
}

/* Ajuste do Título */
/* Ajuste do Título - Padrão Amarelo Neon Microcamp */
.unit-info h3 {
    font-size: 14px;
    color: #ffc107 !important; /* Nossa cor amarelo neon */
    margin: 0 0 0.4rem 0;     /* Diminuído para 0.4rem para encurtar a altura do card */
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase; /* Deixa o nome da unidade mais imponente */
    letter-spacing: 0.5px;    /* Melhora a legibilidade no tema dark */
    
    /* Efeito de brilho suave no texto (opcional) */
    text-shadow: 0 0 5px rgba(255, 193, 7, 0.2); 
}

.unit-address { 
    font-size: 10px; 
    color: #999; /* Cinza médio para leitura */
    line-height: 1.5; 
    margin-bottom: 0.8rem; 
}

.unit-contact-row { 
    display: flex; 
    flex-wrap: wrap;
    gap: 1rem; 
    font-size: 10px; 
    color: #eee; 
    margin-bottom: 0.5rem; 
}

.text-whatsapp { 
    color: #25d366; 
    text-decoration: none; 
    display: flex;
    align-items: center;
    gap: 4px;
}

.text-whatsapp:hover { text-decoration: underline; }

.unit-email { 
    font-size: 0.75rem; 
    color: #666; 
}

.arrow-unit { 
    position: absolute; 
    right: 1.5rem; 
    top: 50%; 
    transform: translateY(-50%);
    color: #333; 
    font-size: 0.9rem; 
    transition: 0.3s;
}

.unit-item-card:hover .arrow-unit { 
    color: #ffc107; 
    right: 1.2rem;
}

/* ==========================================================================
   MAPA E PINS
   ========================================================================== */
.unidades-map-container { 
    flex: 1; 
    position: relative;
    z-index: 1; /* Abaixo da sidebar */
}

#map {
    height: 100%;
    width: 100%;
    background: #111;
}

/* Pin Amarelo no Mapa */
.custom-leaflet-pin {
    background: #ffc107 !important;
    border: 2px solid #000 !important;
    border-radius: 50% !important;
    color: #000 !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
    font-size: 13px !important;
}

/* Ajustes de Popups Leaflet */
.leaflet-popup-content-wrapper {
    background: #ffffff !important; /* Fundo branco para contraste máximo */
    color: #111111 !important;     /* Texto quase preto para leitura */
    border: 2px solid #ffc107 !important; /* Borda Neon Amarela */
    border-radius: 15px !important;
    /* Efeito de brilho externo (Neon) */
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.6) !important; 
    padding: 8px !important;
    font-family: 'Inter', sans-serif;
}

/* Estilização do conteúdo interno do balão */
.popup-neon-content b {
    color: #000000 !important;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 5px;
    padding-bottom: 3px;
    border-bottom: 2px solid #ffc107; /* Linha de destaque abaixo do nome */
}

.popup-neon-content p {
    margin: 0;
    font-weight: 600;
    color: #333333;
}

.popup-neon-content small {
    display: block;
    margin-top: 5px;
    color: #666666;
    line-height: 1.3;
}

/* Botão de fechar (X) do balão */
.leaflet-popup-close-button {
    color: #999 !important;
    padding: 10px !important;
    
}

/* RODAPÉ 2 ---------------------------------------------------------------------------------------------------------------------------*/

/* ==========================================================================
   SEÇÃO NÃO ENCONTROU CIDADE
   ========================================================================== */
.cidade-not-found {
    background-color: #0a0a0a; /* Fundo preto puro */
    padding: 60px 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.not-found-content {
    max-width: 600px;
    margin: 0 auto;
}

.not-found-icon {
    font-size: 2.5rem;
    color: #ffc107; /* Amarelo padrão Microcamp */
    margin-bottom: 20px;
    display: inline-block;
}

.not-found-content h2 {
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.not-found-content p {
    color: #666666; /* Cinza médio para o texto de apoio */
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Botão com borda fina e efeito hover */
.btn-contato-premium {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;
    background: transparent;
    color: #ffffff;
    border: 1px solid #333333;
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-contato-premium i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.btn-contato-premium:hover {
    background: #111111;
    border-color: #ffc107; /* Borda brilha em amarelo no hover */
    color: #ffc107;
}

.btn-contato-premium:hover i {
    transform: translateX(5px); /* Setinha move pro lado */
}



.not-found-icon {
    margin-bottom: 20px;
    display: inline-block;
    filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.3)); /* Brilho neon no ícone */
}

.not-found-icon svg {
    display: block;
}



/* FORÇANDO O AMARELO NEON NO TÍTULO */
.unidades-sidebar .unidades-lista-scroll .unit-item-card .unit-info h3 {
    color: #ffc107 !important; /* Amarelo Neon Microcamp */
    font-size: 14px !important;
    margin: 0 0 4px 0 !important; /* Colado no topo e com pouco espaço embaixo */
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    /* Brilho neon para garantir que não pareça um amarelo fosco */
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.4); 
}

/* Garante que o hover não mude a cor para branco de novo */
.unit-item-card:hover .unit-info h3 {
    color: #ffc107 !important;
    text-shadow: 0 0 12px rgba(255, 193, 7, 0.6);
}


.leaflet-popup-close-button:hover {
    color: #ffc107 !important;
}

.leaflet-popup-tip {
    background: #ffc107 !important; /* Cor da marca na ponta */
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5) !important;
}

/* RESPONSIVIDADE */
@media (max-width: 992px) {
    .unidades-panel { flex-direction: column; height: auto; }
    .unidades-sidebar { width: 100%; height: 450px; border-right: none; border-bottom: 1px solid #222; }
    .unidades-map-container { height: 400px; }
}


/* Força bordas nos cards para eles aparecerem no fundo preto */
.unit-item-card {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: #111 !important; /* Um cinza um pouco mais claro que o fundo */
    margin-bottom: 2px;
}

.unit-item-card:hover {
    background: #1a1a1a !important;
}

/* Garante que o mapa tenha uma cor de fundo se o TileLayer falhar */
#map {
    background: #111 !important;
    border-left: 2px solid #ffc107; /* Uma linha amarela para separar da lista */
}

/* Ajuste das fontes para não sumirem */
.unit-info h3 { color: #ffffff !important; }
.unit-address { color: #cccccc !important; }


/* ==========================================================================
   BOTÃO DE CURSO GRATUITO - SIDEBAR
   ========================================================================== */
/* Container que dá o respiro final no scroll */
.sidebar-footer-scroll {
    padding: 20px 1.5rem 40px 1.5rem; /* Mais espaço embaixo para não colar no fim */
    background: #0d0d0d;
}

/* Estilo idêntico à sua referência */
.btn-curso-gratuito {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #9d59ff; /* Roxo vibrante */
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 16px 20px;
    border-radius: 50px; /* Formato pílula */
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(157, 89, 255, 0.2);
}

.btn-curso-gratuito:hover {
    background: #8a3ffc;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(157, 89, 255, 0.4);
}

/* Ícone de raio/trovão */
.btn-curso-gratuito i {
    font-size: 0.9rem;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}



/* CONTATO -------------------------------------------------------------------------------------------------------------------*/


/* --- BASE E ESTRUTURA --- */
.form-premium-dark {
    background: #151515;
    padding: 2.5rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
}

/* Força os títulos a começarem no exato mesmo ponto */
.form-premium-dark h2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 1;
    color: #fff;
    margin-bottom: 2rem;
    font-size: 2rem;
}

.grid-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem !important;
    margin-bottom: 1.5rem;
}

.form-group label {
    font-size: 11px;
    letter-spacing: 1px;
    color: #666;
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    background: #111;
    border: 1px solid #222;
    padding: 12px;
    border-radius: 10px;
    color: #fff;
    transition: 0.3s;
    box-sizing: border-box !important;
}

/* --- FIX AUTOFILL (REMOVER FUNDO AZUL) --- */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #111 inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* --- SELETOR DE ASSUNTO --- */
.subject-selector {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.subject-option input { display: none; }
.subject-option span {
    display: block;
    padding: 12px;
    background: #111;
    border: 1px solid #222;
    border-radius: 10px;
    text-align: center;
    color: #666;
    font-size: 13px;
    transition: 0.3s;
}

/* --- TEMAS DINÂMICOS --- */
#contatoForm.theme-amarelo .dynamic-asterisk { color: #ffc107; }
#contatoForm.theme-amarelo .btn-submit-dynamic { background: #ffc107; color: #000; box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3); }
#contatoForm.theme-amarelo .subject-option input:checked + span { border-color: #ffc107; color: #ffc107; background: rgba(255, 193, 7, 0.05); }

#contatoForm.theme-verde .dynamic-asterisk { color: #25d366; }
#contatoForm.theme-verde .btn-submit-dynamic { background: #25d366; color: #000; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); }
#contatoForm.theme-verde .subject-option input:checked + span { border-color: #25d366; color: #25d366; background: rgba(37, 211, 102, 0.05); }

#contatoForm.theme-roxo .dynamic-asterisk { color: #9d59ff; }
#contatoForm.theme-roxo .btn-submit-dynamic { background: #9d59ff; color: #fff; box-shadow: 0 4px 15px rgba(157, 89, 255, 0.3); }
#contatoForm.theme-roxo .subject-option input:checked + span { border-color: #9d59ff; color: #9d59ff; background: rgba(157, 89, 255, 0.05); }

.btn-submit-dynamic {
    width: 100%;
    margin-top: 1rem;
    padding: 18px;
    border-radius: 50px;
    border: none;
    font-weight: 800;
    cursor: pointer;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.form-footer-notice {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    margin-top: 1.5rem;
}

/* --- SIDEBAR E LISTA --- */
.unidades-lista-scroll {
    max-height: 550px; /* Ajustado para caber melhor na altura do form */
    overflow-y: auto;
    padding-right: 10px;
}
.unidades-lista-scroll::-webkit-scrollbar { width: 4px; }
.unidades-lista-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }
.unidades-lista-scroll::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }

/* --- CARD DAS UNIDADES --- */
.unit-item-card {
    background: #111;
    border: 1px solid #222;
    padding: 1.2rem;
    border-radius: 15px;
    margin-bottom: 1rem;
    display: flex;
    gap: 15px;
    transition: 0.3s;
}
.unit-item-card:hover {
    border-color: rgba(255, 193, 7, 0.3);
}
.unit-number {
    background: #1a1a1a;
    color: #ffc107;
    min-width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: bold;
    border: 1px solid #222;
}



/* WHATSAPP TOPO ------------------------------------------------------------------------------------------------------------------------------------*/

.wpp-footer-bar {
    background: #050505;
    /* Contorno Neon em Cima e Embaixo */
    border-top: 1px solid #25d366;
    border-bottom: 1px solid #25d366;
    /* Brilho Neon (Glow) */
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.1), inset 0 0 15px rgba(37, 211, 102, 0.05);
    
    padding: 40px 0;
    width: 100%;
    position: relative;
    z-index: 10;
}

.container-wpp {
    max-width: 1400px; /* Aumentado para acomodar as unidades em menos linhas */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    gap: 30px;
}

.wpp-intro {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.wpp-icon-main {
    width: 55px;
    height: 55px;
    border: 1px solid #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #25d366;
    font-size: 28px;
    background: rgba(37, 211, 102, 0.05);
}

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

.wpp-title {
    color: #fff;
    font-weight: 800;
    font-size: 20px;
}

.wpp-subtitle {
    color: #777;
    font-size: 13px;
}

/* --- GRID DE UNIDADES --- */
.wpp-units-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 950px;
    justify-content: flex-end;
}

.wpp-btn-unit {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(37, 211, 102, 0.3);
    border-radius: 50px;
    color: #25d366;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.wpp-btn-unit:hover {
    background: #25d366;
    color: #000;
    border-color: #25d366;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}

/* Ajuste Mobile */
@media (max-width: 1024px) {
    .container-wpp {
        flex-direction: column;
        text-align: center;
    }
    .wpp-units-grid {
        justify-content: center;
    }
}


/*SOBRE NÓS ------------------------------------------------------------------------------------------------------------------*/

/* ============================================================
   Microcamp Website — VERSÃO IDENTIDADE TOTAL
   ============================================================ */

:root {
    --purple:       #8b5cf6; /* Roxo vibrante exato do print */
    --yellow:       #FFC200; /* Amarelo ouro exato do print */
    --dark-bg:      #0a0a0a;
    --green-brand:  #00ff88;
    --text-muted:   #999999;
    --white:        #ffffff;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--dark-bg);
    color: var(--white);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ── Navbar ────────────────────────────────────────────── */
.navbar { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1000; 
    background: rgba(10, 10, 10, 0.9); 
    backdrop-filter: blur(12px);
    height: 100px;
    display: flex; 
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.navbar-inner {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    width: 100%; 
    max-width: 1400px; 
    margin: 0 auto; 
    padding: 0 2rem;
}

.navbar-menu {
    display: flex; 
    list-style: none; 
    gap: 35px; 
    margin: 0; 
    padding: 0;
    align-items: center;
}

.navbar-menu a {
    color: #ccc; 
    text-decoration: none; 
    font-size: 16px; 
    font-weight: 600;
    transition: 0.3s;
}

.navbar-cta {
    background: var(--purple); 
    color: white !important; 
    padding: 16px 20px; 
    border-radius: 14px; 
    font-weight: 900; 
    font-size: 15px;
    text-transform: uppercase; 
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3);
}

/* ── Hero Section ──────────────────────────────────────── */
.hero { 
    padding: 200px 0 100px; text-align: center;
    display: flex; flex-direction: column; align-items: center;
    background-image: 
        radial-gradient(circle at 50% 20%, #1a1a1a 0%, transparent 70%),
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 100%, 45px 45px, 45px 45px;
}

.hero-title { 
    font-size: 6.8rem; 
    font-weight: 900; line-height: 0.9;
    letter-spacing: -5px; 
    margin-bottom: 35px; max-width: 1100px;
}

.hero-title span { color: var(--yellow); }

/* ── NOVA SEÇÃO DE STATS (FIEL À IMAGEM image_b0c8e5.png) ── */
.stats-section {
    background: #050505;
    padding: 40px 0; /* Altura reduzida conforme solicitado */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
    background: #0d0d0d;
}

.stats-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0 20px;
}

.stat-card {
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.stat-icon-box {
    width: 50px;
    height: 50px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-number {
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}

.stat-label {
    color: #555;
    font-size: 13px;
    font-weight: 500;
}

/* Hovers Neon Individuais */
.stat-card.gold:hover { border-color: #FFC200; box-shadow: 0 0 20px rgba(255, 194, 0, 0.2); transform: translateY(-5px); }
.stat-card.green:hover { border-color: #00ff88; box-shadow: 0 0 20px rgba(0, 255, 136, 0.2); transform: translateY(-5px); }
.stat-card.purple:hover { border-color: #8b5cf6; box-shadow: 0 0 20px rgba(139, 92, 246, 0.2); transform: translateY(-5px); }
.stat-card.blue:hover { border-color: #3b82f6; box-shadow: 0 0 20px rgba(59, 130, 246, 0.2); transform: translateY(-5px); }

/* Cores dos Ícones e Números */
.gold i, .color-gold { color: #FFC200; }
.green i, .color-green { color: #00ff88; }
.purple i, .color-purple { color: #8b5cf6; }
.blue i, .color-blue { color: #3b82f6; }

/* ── (Restante do seu código original preservado abaixo) ── */
.hero-social-proof { margin-top: 60px; display: flex; gap: 30px; justify-content: center; align-items: center; color: rgba(255, 255, 255, 0.5); font-size: 14px; }
.rating-stars { display: flex; align-items: center; gap: 8px; }
.rating-stars i { color: #FFC200; font-size: 18px; }
.divider-vertical { width: 1px; height: 20px; background: #333; }

/* Adicione o restante do seu CSS de depoimentos, unidades e modal aqui... */

/* QUEM SOMOS -------------------------------------------------------------------------------------------*/
.quem-somos-final {
    background-color: #000;
    padding: 100px 0;
    color: #fff;
}

.qs-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 50px;
    padding: 0 20px;
}

.qs-left, .qs-right {
    flex: 1; /* Garante que as duas colunas tenham a mesma largura */
}

/* Estilo do Texto */
.qs-label {
    color: #FFC200;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 20px;
}

.qs-headline {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 30px;
}

.text-yellow { color: #FFC200; }

.qs-desc p {
    color: #999;
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.qs-small {
    color: #444 !important;
    font-size: 15px !important;
}

/* Estilo dos Cards (Onde estava o erro) */
.qs-right {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.qs-feature-card {
    background: #0d0d0d; /* Fundo escuro que faltava */
    border: 1px solid #1a1a1a;
    border-radius: 12px;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
}

.qs-feature-card i {
    color: #00ff88; /* Seu verde neon */
    font-size: 20px;
}

.qs-feature-card p {
    color: #ccc;
    font-size: 15px;
    margin: 0;
    font-weight: 500;
}

/* Hover para efeito premium */
.qs-feature-card:hover {
    border-color: #00ff88;
    background: #111;
    transform: translateX(10px);
}

@media (max-width: 992px) {
    .qs-wrapper { flex-direction: column; }
}

.qs-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Cores e Bordas */
    padding: 8px 24px;
    border: 1px solid rgba(255, 194, 0, 0.3); /* Borda amarela suave */
    border-radius: 50px; /* Deixa bem arredondado */
    background-color: rgba(255, 194, 0, 0.05); /* Fundo levemente amarelado */
    
    /* Tipografia */
    color: #FFC200; /* Amarelo ouro do print */
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase; /* Força o QUEM SOMOS em maiúsculo */
    letter-spacing: 0.5px;
    
    margin-bottom: 25px;
}

/*------------PILARES -------------------------------------------------------------------------*/

/* --- CSS PROFISSIONAL --- */
.pilares-premium {
    background: radial-gradient(circle at top, #0f0f0f 0%, #000 100%);
    padding: 120px 20px;
    text-align: center;
}

/* Badge Roxo do Print image_a641d5.png */
.tag-topo {
    display: inline-block;
    padding: 8px 25px;
    border: 1px solid #a855f7;
    border-radius: 50px;
    color: #a855f7;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 30px;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
}

.titulo-largo {
    font-size: 64px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 80px;
}

.destaque-neon { color: #FFC200; text-shadow: 0 0 20px rgba(255, 194, 0, 0.3); }

/* Grid e Cards Estilo Glass */
.grid-moderno {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.card-pilar {
    background: rgba(13, 13, 13, 0.8);
    backdrop-filter: blur(10px); /* Efeito vidro */
    border: 1px solid #1a1a1a;
    border-radius: 30px;
    padding: 60px 45px;
    text-align: left;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Ícones agora com cores fixas e brilho */
.box-icone {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 40px;
    border: 1px solid;
}

/* Definição de Cores por Pilar */
.pilar-missao .box-icone { color: #FFC200; border-color: #FFC200; box-shadow: inset 0 0 10px rgba(255, 194, 0, 0.1); }
.pilar-visao .box-icone { color: #a855f7; border-color: #a855f7; box-shadow: inset 0 0 10px rgba(168, 85, 247, 0.1); }
.pilar-valores .box-icone { color: #00ff88; border-color: #00ff88; box-shadow: inset 0 0 10px rgba(0, 255, 136, 0.1); }

/* --- O HOVER QUE VOCÊ PEDIU (NEON TOTAL) --- */
.card-pilar:hover {
    transform: translateY(-15px) scale(1.02);
    background: #111;
}

.pilar-missao:hover { border-color: #FFC200; box-shadow: 0 20px 40px rgba(255, 194, 0, 0.15); }
.pilar-visao:hover { border-color: #a855f7; box-shadow: 0 20px 40px rgba(168, 85, 247, 0.15); }
.pilar-valores:hover { border-color: #00ff88; box-shadow: 0 20px 40px rgba(0, 255, 136, 0.15); }

/* Brilho extra no ícone ao hover */
.card-pilar:hover .box-icone {
    filter: drop-shadow(0 0 15px currentColor);
}


/* LINHA DE TEMPO TITULO -----------------------------------------------------------------------------------------------*/


.timeline-header {
    text-align: center;
    background-color: #050505;
    padding: 60px 20px;
    color: #ffffff;
}

/* Badge arredondado conforme imagem image_a64bfd.png */
.badge-timeline {
    display: inline-block;
    padding: 8px 24px;
    border: 1px solid rgba(255, 194, 0, 0.4);
    border-radius: 50px;
    color: #FFC200;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
    background-color: rgba(255, 194, 0, 0.05);
}

/* Título principal */
.title-trajectory {
    font-size: 64px;
    font-weight: 900;
    margin-bottom: 25px;
    letter-spacing: -2px;
    line-height: 1.1;
}

.highlight-yellow {
    color: #FFC200;
}

/* Descrição em cinza para contraste */
.description-trajectory {
    color: #666666;
    max-width: 700px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.6;
}

/* Responsividade rápida */
@media (max-width: 768px) {
    .title-trajectory {
        font-size: 42px;
    }
    .description-trajectory {
        font-size: 16px;
    }
}



/* LINHA DO TEMPO CORPO ------------------------------------------------------------------------------------------------------- */


.timeline-section {
    background-color: #050505;
    padding: 0 !important; /* Remove qualquer espaço no topo da seção */
    text-align: center;
    position: relative;
    overflow: hidden;
}

.timeline-container {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 0 100px; /* Reduzi o topo para 20px */
    z-index: 10;
}

/* LINHA VERTICAL - AGORA USANDO HEIGHT 100% */
.timeline-line {
    position: absolute;
    width: 4px; 
    top: 20px; /* Começa junto com o padding do container */
    bottom: 100px; /* Termina junto com o padding inferior */
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, #FFC200, #a855f7, #00ff88);
    z-index: 1;
    height: auto; /* Deixa o top/bottom controlarem a altura */
}

.timeline-item {
    width: 100%;
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}

/* Força o primeiro card a colar no topo */
.timeline-item:first-child {
    margin-top: 0 !important;
}

/* Estilo dos Cards */
.timeline-content {
    width: 45%;
    background: #0d0d0d;
    border: 1px solid #1a1a1a;
    padding: 30px;
    border-radius: 20px;
    transition: all 0.4s ease;
    position: relative;
    z-index: 5;
}

.left .timeline-content { margin-right: auto; text-align: right; }
.right .timeline-content { margin-left: auto; text-align: left; }

/* PONTO (DOT) */
/* PONTO (DOT) */
.timeline-dot {
    position: absolute;
    left: 50%;
    
    /* AUMENTAR esse valor desce a bolinha | DIMINUIR sobe a bolinha */
    top: 10px; 
    
    width: 12px;
    height: 12px;
    background: #FFC200;
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 10;
    transition: 0.3s;
}

/* Afasta o dot para a ESQUERDA (em relação ao centro) */
.left .timeline-dot {
    left: calc(50% - 20px); /* Aumente o 20px para afastar mais */
    transform: translateX(-50%);
}

/* Afasta o dot para a DIREITA (em relação ao centro) */
.right .timeline-dot {
    left: calc(50% + 20px); /* Aumente o 20px para afastar mais */
    transform: translateX(-50%);
}

/* Ajuste da linha para o primeiro dot */
.timeline-line {
    top: 35px; /* Sincronizado com o primeiro dot */
}

/* Tipografia */
.year { color: #FFC200; font-weight: 900; font-size: 18px; display: block; margin-bottom: 5px; }
.timeline-content h3 { color: #fff; font-size: 20px; margin-bottom: 10px; }
.timeline-content p { color: #777; font-size: 14px; line-height: 1.5; }

/* Responsivo Mobile */
@media (max-width: 768px) {
    .timeline-line { left: 20px; transform: none; }
    .timeline-dot { left: 20px; transform: translateX(-50%); }
    .timeline-content { width: calc(100% - 60px); margin-left: 60px !important; text-align: left !important; }
}


/* --- HOVER NEON (O BRILHO DO PAI) --- */

.timeline-item:hover .timeline-content {
    border-color: #FFC200; /* Borda acende */
    box-shadow: 0 0 20px rgba(255, 194, 0, 0.2); /* Glow suave no card */
    transform: translateY(-5px); /* Dá uma leve subida */
}

.timeline-item:hover .timeline-dot {
    background: #FFC200;
    box-shadow: 0 0 15px #FFC200, 0 0 30px #FFC200; /* Brilho intenso no ponto */
    transform: translateX(-50%) scale(1.3); /* Aumenta um pouco o ponto */
}

.timeline-item:hover .year {
    text-shadow: 0 0 10px rgba(255, 194, 0, 0.8); /* Ano brilha junto */
}


/* MUNDO --------------------------------------------------------------------------------------------------------------*/

/* CONTAINER PRINCIPAL */
.presence-section {
    background-color: #0d0d0d; /* Ajustado para a cor 100% que você enviou */
    padding: 80px 20px;
    display: flex;
    justify-content: center;
}

.presence-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1200px;
    width: 100%;
}

/* ESTILO DO CARD (Sutilmente mais claro para dar profundidade) */
.country-card {
    background: #111111; 
    border: 1px solid #1a1a1a;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: default;
}

.country-code {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 10px;
    transition: 0.4s;
}

.country-name {
    color: #fff;
    font-size: 22px;
    margin-bottom: 15px;
}

.country-desc {
    color: #777; /* Cinza fraco seguindo sua preferência minimalista */
    font-size: 14px;
    line-height: 1.6;
}

/* --- HOVER NEON POR PAÍS --- */

/* Brasil - Verde Neon */
.country-card.br .country-code { color: #00ff88; }
.country-card.br:hover {
    border-color: #00ff88;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.2);
}

/* Portugal - Vermelho Neon */
.country-card.pt .country-code { color: #ff3e3e; }
.country-card.pt:hover {
    border-color: #ff3e3e;
    box-shadow: 0 0 30px rgba(255, 62, 62, 0.2);
}

/* Espanha - Amarelo Ouro Neon */
.country-card.es .country-code { color: #ffc200; }
.country-card.es:hover {
    border-color: #ffc200;
    box-shadow: 0 0 30px rgba(255, 194, 0, 0.2);
}

/* Argentina - Azul Celeste Neon */
.country-card.ar .country-code { color: #00bfff; }
.country-card.ar:hover {
    border-color: #00bfff;
    box-shadow: 0 0 30px rgba(0, 191, 255, 0.2);
}

/* COMPORTAMENTO GERAL AO HOVER */
.country-card:hover {
    transform: translateY(-10px);
    background: #161616;
}

.country-card:hover .country-code {
    text-shadow: 0 0 10px currentColor;
}

/* Responsivo */
@media (max-width: 768px) {
    .presence-container {
        grid-template-columns: 1fr;
    }
}



/* CONFIGURAÇÃO DA SEÇÃO DE CABEÇALHO */
.presence-header-section {
    background-color: #0d0d0d; /* Fundo 100% como solicitado */
    padding: 60px 20px 40px;
    text-align: center;
}

/* TAG ROXA (BADGE) */
.badge-container {
    margin-bottom: 25px;
}

.presence-badge {
    background-color: rgba(168, 85, 247, 0.1); /* Roxo bem suave no fundo */
    color: #a855f7; /* Roxo principal */
    border: 1px solid #a855f7;
    padding: 8px 24px;
    border-radius: 50px; /* Bem arredondado como na imagem */
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* TÍTULO PRINCIPAL */
.main-title {
    color: #ffffff;
    font-size: 64px; /* Tamanho imponente */
    font-weight: 900;
    margin: 0;
    letter-spacing: -2px;
}

/* DESTAQUE AMARELO NO "MUNDO" */
.highlight-yellow {
    color: #ffc200; /* Amarelo padrão Microcamp */
}

/* Responsivo para Celular */
@media (max-width: 768px) {
    .main-title {
        font-size: 38px;
        letter-spacing: -1px;
    }
    
    .presence-badge {
        font-size: 12px;
        padding: 6px 18px;
    }
}



/* FAÇA PARTE DA HISTÓRIA -------------------------------------------------------------------------------*/


/* CONTAINER EXTERNO */
.cta-section {
    
    padding: 100px 20px;
    display: flex;
    justify-content: center;
}

/* O CARD COM BORDA SUAVE */
.cta-card {
    background-color: #0d0d0d;
    border: 1px solid #1a1a1a;
    max-width: 800px;
    width: 100%;
    padding: 60px 40px;
    border-radius: 30px; /* Bem arredondado como na imagem */
    text-align: center;
    transition: transform 0.3s ease;
}

.cta-card:hover {
    transform: scale(1.01);
    border-color: #333;
}

/* ÍCONE DE FORMATURA */
.cta-icon-wrapper {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

/* TÍTULOS E TEXTOS */
.cta-title {
    color: #ffffff;
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.cta-text {
    color: #777; /* Cinza muito fraco */
    font-size: 18px;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto 40px;
}

/* BOTÃO AMARELO (SEU PADRÃO) */
.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #ffc200; /* Amarelo Microcamp */
    color: #000;
    padding: 18px 35px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 16px;
    text-decoration: none;
    border: none; /* Sem borda como você pediu */
    transition: all 0.3s ease;
}

.cta-button:hover {
    background-color: #e5af00;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 194, 0, 0.2);
}

/* Responsivo */
@media (max-width: 768px) {
    .cta-title { font-size: 30px; }
    .cta-text { font-size: 16px; }
    .cta-button { width: 100%; justify-content: center; }
}


/* --- HOVER NEON CTA --- */

/* Brilho na borda do Card */
.cta-card:hover {
    border-color: #a855f7; /* Cor do ícone (Roxo) */
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.15);
    transform: translateY(-5px);
}

/* O ícone de formatura acende no hover */
.cta-card:hover .cta-icon-wrapper svg {
    filter: drop-shadow(0 0 8px #a855f7);
    stroke-width: 2.5;
    transition: 0.3s;
}

/* O botão amarelo ganha um brilho neon mais forte */
.cta-button:hover {
    background-color: #ffc200;
    box-shadow: 0 0 20px rgba(255, 194, 0, 0.4), 0 0 40px rgba(255, 194, 0, 0.2);
    transform: scale(1.05);
}

/* O raio dentro do botão dá uma piscada */
.cta-button:hover svg {
    filter: drop-shadow(0 0 5px #000);
    animation: pulse 1.5s infinite;
}

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