/* ==========================================================================
   NOVO HUMANO - MASTER CSS (FINAL v3.0)
   ========================================================================== */

/* --- IMPORTAÇÃO DE FONTES --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
    /* --- PALETA DE CORES --- */
    --bg-dark: #020202;
    
    /* AZUL DA MARCA (MIDNIGHT) */
    --brand-blue: #001f3f; 
    --brand-light: #0077ff;
    
    /* DESTAQUES */
    --neon-cyan: #00f3ff;
    
    /* TEXTO */
    --text-white: #ffffff;
    --text-gray: #b0b0b0;

    /* VIDRO */
    --glass-bg: rgba(10, 20, 30, 0.7);
    --glass-border: 1px solid rgba(0, 243, 255, 0.15);
}

/* --- RESET & BASE --- */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }

body {
    /* Fundo Degradê Profundo */
    background: #020202;
    background-attachment: fixed;
    color: var(--text-white);
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    line-height: 1.5;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; }
ul { list-style: none; }

/* --- CONTAINER GLOBAL --- */
.container {
    width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px;
    position: relative; z-index: 2;
}

/* ==========================================================================
   SESSÃO HERO
   ========================================================================== */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 0;
    overflow: hidden;
}

/* Fundo com Imagem e Vidro */
.hero-bg-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.hero-bg-image {
    width: 100%; height: 100%;
    background: url('https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2069&auto=format&fit=crop') center/cover;
    filter: brightness(0.25) blur(3px);
}
.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(0, 50, 88, 0.5) 0%, rgba(2,2,2,0.95) 100%);
    backdrop-filter: blur(5px);
}

/* Grid Layout */
.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Texto um pouco maior que a imagem */
    gap: 60px;
    align-items: center;
    position: relative; z-index: 2;
}

/* --- COLUNA TEXTO (ESQUERDA) --- */
.hero-content {
    display: flex; flex-direction: column; align-items: flex-start;
}

.eyebrow-tag {
    font-size: 0.75rem; letter-spacing: 4px; color: var(--neon-cyan);
    text-transform: uppercase; margin-bottom: 25px; font-weight: 600;
    border-bottom: 1px solid var(--neon-cyan); padding-bottom: 5px;
}

.hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(3rem, 5vw, 4.5rem); 
    line-height: 1;
    margin-bottom: 25px;
    color: #fff;
    
}

.text-highlight {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800; font-style: normal;
    font-size: 0.7em; 
    color: #fff; display: block; letter-spacing: 1px; margin-top: 10px;
    text-shadow: 0 0 30px rgba(0, 243, 255, 0.25);
}

.hero-description {
    font-size: 1.1rem; color: var(--text-gray); max-width: 500px;
    margin-bottom: 45px; font-weight: 300; line-height: 1.7;
}

/* Wrapper do Botão */
.cta-wrapper { width: 100%; max-width: 350px; }

/* BOTÃO PREMIUM (MIDNIGHT BLUE) */
.btn-midnight-premium {
    position: relative;
    display: flex; justify-content: center; align-items: center;
    padding: 22px 40px;
    border-radius: 100px; /* Formato Pílula */
    
    /* Gradiente Azul da Marca */
    background: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-light) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.9rem;
    overflow: hidden; transition: 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 50, 88, 0.4);
}

/* Efeito Shine (Luz Passando) */
.btn-midnight-premium::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: skewX(-20deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { left: -100%; opacity: 0; }
    20% { opacity: 1; }
    50%, 100% { left: 200%; opacity: 0; }
}

.btn-midnight-premium:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 40px var(--brand-blue);
    border-color: var(--neon-cyan);
}

/* --- COLUNA VISUAL (DIREITA) --- */
.hero-visual {
    position: relative; display: flex; justify-content: center; align-items: flex-end;
}

.image-container { position: relative; width: 100%; max-width: 500px; }

.hero-person-img {
    width: 100%; height: auto; position: relative; 
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    /* filter: contrast(1.1) brightness(1.05); */
}

.hero-glow-effect {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 70%; height: 70%;
    background: radial-gradient(circle, rgba(0, 50, 88, 0.5) 0%, transparent 70%);
    filter: blur(80px); z-index: 1;
}

/* --- CARDS FLUTUANTES (3 CAIXAS) --- */
.floating-notif {
    position: absolute;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: var(--glass-border);
    padding: 10px 16px;
    border-radius: 12px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    z-index: 5;
    animation: float 5s ease-in-out infinite;
    min-width: 160px;
}

/* Posições Desktop */
.notif-pos-1 { top: 15%; right: -20px; animation-delay: 0s; }
.notif-pos-2 { top: 45%; left: -40px; animation-delay: 2s; border-right: 2px solid var(--brand-blue); }
.notif-pos-3 { bottom: 15%; right: -10px; animation-delay: 1s; border-left: 2px solid var(--neon-cyan); }

/* Ícones */
.notif-icon {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; border: 1px solid rgba(255,255,255,0.1);
}
.icon-fire { background: linear-gradient(135deg, #ff4d4d, #ff9000); color: #fff; }
.icon-blue { background: var(--brand-blue); color: #fff; border-color: rgba(0, 243, 255, 0.3); }
.icon-cyan { background: rgba(0, 243, 255, 0.15); color: var(--neon-cyan); border-color: var(--neon-cyan); }

.notif-content { display: flex; flex-direction: column; }
.notif-title { font-size: 0.75rem; font-weight: 700; color: #fff; }
.notif-desc { font-size: 0.65rem; color: #ccc; }

@keyframes float { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-12px); } 
}

/* Seta Scroll */
.scroll-indicator {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    animation: bounce 2s infinite; opacity: 0.4;
}
@keyframes bounce { 0%, 100% {transform: translateX(-50%) translateY(0);} 50% {transform: translateX(-50%) translateY(-10px);} }

/* ==========================================================================
   RESPONSIVIDADE (TABLET & MOBILE)
   ========================================================================== */

/* TABLET (1024px) */
@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
    }
    
    .hero-content { align-items: center; order: 1; }
    .hero-visual { order: 2; margin-top: 20px; }
    
    .eyebrow-tag { border-bottom: 2px solid var(--neon-cyan); }
    .cta-wrapper { align-items: center; margin: 0 auto; }
}

/* MOBILE (600px) */
@media (max-width: 600px) {
    .hero-section { padding: 90px 0 40px; }

    /* LAYOUT: IMAGEM PRIMEIRO, TEXTO DEPOIS */
    .hero-grid {
        display: flex;
        flex-direction: column-reverse; 
        gap: 30px;
    }

    /* Imagem menor para dar margem aos cards */
    .hero-visual { width: 100%; margin-bottom: -10px; position: relative; }
    .hero-person-img { 
        /* max-width: 85%;  */
        margin: 0 auto; 
    }
    
    /* CARDS FLUTUANTES (ROSTO LIVRE) */
    .floating-notif {
        transform: scale(0.75); /* Pequenos */
        padding: 8px 10px;
        min-width: 130px;
        backdrop-filter: blur(8px);
    }

    /* Posições ajustadas para não cobrir o rosto */
    .notif-pos-1 { top: 2%; right: -5px; }   /* Topo Direito */
    .notif-pos-2 { top: 55%; left: -10px; }  /* Ombro Esquerdo */
    .notif-pos-3 { bottom: 5%; right: -5px; } /* Base Direita */

    /* Animação Mobile */
    @keyframes float {
        0%, 100% { transform: translateY(0) scale(0.75); }
        50% { transform: translateY(-6px) scale(0.75); }
    }

    /* Texto */
    .hero-title { font-size: 2.3rem; line-height: 1.2; }
    .hero-description { font-size: 1rem; padding: 0 10px; }
    
    /* Botão Compacto */
    .cta-wrapper { width: 100%; display: flex; justify-content: center; }
    .btn-midnight-premium { 
        width: auto;
        min-width: 220px;
        padding: 16px 30px; /* Mais fino */
        font-size: 0.85rem;
    }
}

/* ANIMAÇÃO DE ENTRADA (JS) */
.animate-on-scroll { opacity: 0; transform: translateY(30px); transition: 0.8s ease-out; }
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; } .delay-4 { transition-delay: 0.4s; }


/* ==========================================================================
   SESSÃO 2: O ESPELHO (REFINADA)
   ========================================================================== */

.mirror-section {
    position: relative; padding: 140px 0; overflow: hidden;
    background-color: var(--bg-dark); 
}

/* Backgrounds */
.mirror-bg-texture {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://images.unsplash.com/photo-1550684848-fac1c5b4e853?q=80&w=2070&auto=format&fit=crop');
    background-size: cover; opacity: 0.08; mix-blend-mode: luminosity; z-index: 0;
}
.mirror-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, rgba(0, 50, 88, 0.15) 0%, #000508 85%); z-index: 1;
}
.ambient-light-orb {
    position: absolute; top: 20%; left: 50%; transform: translateX(-50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(0, 243, 255, 0.05) 0%, transparent 70%);
    filter: blur(100px); z-index: 1; animation: pulseLight 8s infinite alternate;
}
@keyframes pulseLight { 0% { opacity: 0.4; transform: translateX(-50%) scale(1); } 100% { opacity: 0.7; transform: translateX(-50%) scale(1.1); } }

/* Conteúdo */
.mirror-content { position: relative; z-index: 5; max-width: 800px; margin: 0 auto; text-align: center; }

/* Headline e Linha */
.mirror-headline {
    font-family: 'Cormorant Garamond', serif; font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1; color: rgba(255, 255, 255, 0.3); margin-bottom: 40px; font-weight: 400;
}
.shine-text {
    display: inline-block; background: linear-gradient(to right, #555 0%, #fff 50%, #555 100%);
    background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    animation: shineText 6s linear infinite;
}
.delay-text { animation-delay: 3s; }
@keyframes shineText { to { background-position: 200% center; } }

.luminous-line {
    width: 2px; height: 80px; background: linear-gradient(to bottom, transparent, var(--neon-cyan), transparent);
    margin: 0 auto 40px; box-shadow: 0 0 15px var(--neon-cyan); opacity: 0.7;
}

/* --- CARDS COM EFEITO NEON PASSANDO --- */
.mirror-list { display: flex; flex-direction: column; gap: 25px; }

.mirror-item {
    position: relative; /* Necessário para o efeito contido */
    display: flex; align-items: center; justify-content: center; gap: 20px;
    padding: 25px; border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden; /* Impede a luz de sair do card */
    transition: 0.3s;
}

/* O Efeito de Luz Neon (Sweep) */
.neon-sweep-effect {
    position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(0, 243, 255, 0.1), transparent);
    transform: skewX(-25deg);
    animation: neonPass 4s infinite ease-in-out;
    pointer-events: none;
}

/* Stagger (Atraso) na luz de cada card para não passarem juntos */
.mirror-item:nth-child(1) .neon-sweep-effect { animation-delay: 0s; }
.mirror-item:nth-child(2) .neon-sweep-effect { animation-delay: 1.5s; }
.mirror-item:nth-child(3) .neon-sweep-effect { animation-delay: 3s; }

@keyframes neonPass {
    0% { left: -150%; opacity: 0; }
    30% { opacity: 1; }
    60%, 100% { left: 150%; opacity: 0; }
}

.mirror-item:hover {
    background: rgba(0, 50, 88, 0.2);
    border-color: var(--neon-cyan);
    box-shadow: 0 0 20px rgba(0, 50, 88, 0.3);
}

.mirror-icon-box {
    width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(0, 50, 88, 0.3); border: 1px solid rgba(0, 243, 255, 0.2);
    color: var(--neon-cyan); flex-shrink: 0;
}
.mirror-text { font-family: 'Montserrat', sans-serif; font-size: 1.15rem; color: #ccc; text-align: left; font-weight: 300; }
.highlight-blue { color: #fff; font-weight: 600; text-shadow: 0 0 15px rgba(0, 243, 255, 0.3); }

/* Conclusão */
.mirror-conclusion { margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.mirror-conclusion p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.5rem; color: #888; margin-bottom: 10px; }
.alert-text {
    font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 700; text-transform: uppercase;
    color: #fff; letter-spacing: 2px; text-shadow: 0 0 20px rgba(255, 50, 50, 0.6);
}

/* ==========================================================================
   ANIMAÇÃO "FAKE GSAP" (JS PURO + CSS)
   ========================================================================== */

/* Estado Inicial (Invisível) */
.gsap-reveal {
    opacity: 0;
    /* Começa deslocado para baixo e levemente menor */
    transform: translateY(60px) scale(0.95);
    /* Blur para dar o efeito de foco cinematográfico */
    filter: blur(10px);
    /* Transição complexa simulando a física do GSAP (Elastic Out) */
    transition: all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Estado Final (Visível - Adicionado pelo JS) */
.gsap-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* Delays para efeito cascata */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* RESPONSIVIDADE */
@media (max-width: 768px) {
    .mirror-section { padding: 80px 0; }
    .mirror-headline { font-size: 2.2rem; }
    .mirror-item { flex-direction: column; text-align: center; gap: 15px; }
    .mirror-text { text-align: center; font-size: 1rem; }
    .luminous-line { height: 50px; }
    .alert-text { font-size: 1.6rem; }
}

/* ==========================================================================
   SESSÃO 3: BENTO SCRUB GALLERY (CORREÇÃO TOTAL)
   ========================================================================== */

.belief-scrub-section {
    position: relative;
    padding: 160px 0;
    background-color: var(--bg-dark);
    overflow: hidden; /* CRÍTICO: Impede barra de rolagem horizontal */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw; /* Garante largura total */
}

/* --- GALERIA BENTO --- */
.bento-gallery-wrapper {
    position: absolute;
    top: 50%; left: 50%;
    /* Rotação inicial apenas no desktop para estilo */
    transform: translate(-50%, -50%) rotate(-4deg);
    width: 140vw; /* Mais largo que a tela */
    display: flex;
    flex-direction: column;
    gap: 25px;
    opacity: 0.5; /* Sutil atrás do texto */
    z-index: 1;
    pointer-events: none; /* Não interfere no scroll */
    will-change: transform; /* Otimização de performance */
}

.bento-row {
    display: flex;
    gap: 25px;
    width: 150%; /* Garante que haja cards suficientes para o movimento */
    /* Centraliza o início para não haver buracos */
    margin-left: -25%; 
}

/* Cards */
.bento-card {
    width: 260px;
    height: 170px;
    border-radius: 12px;
    background: rgba(20, 30, 45, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.img-card {
    background-size: cover; background-position: center;
    filter: grayscale(100%) contrast(1.1) brightness(0.7);
}

.text-card {
    background: var(--brand-blue);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; text-transform: uppercase; font-size: 1rem;
    text-align: center; line-height: 1.2;
    border: 1px solid var(--neon-cyan);
}
.text-card.dark-bg { background: #050505; border-color: #333; color: var(--text-gray); }

.icon-card { background: #080808; color: var(--text-gray); }
.icon-card.blue-bg { background: var(--brand-light); color: #fff; }

/* Overlay (Vignette) */
.belief-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* Escurece as bordas e o centro para o texto brilhar */
    background: radial-gradient(circle, rgba(0,0,0,0.5) 0%, var(--bg-dark) 90%);
    z-index: 5;
    pointer-events: none;
}

/* --- TEXTO CENTRAL --- */
.belief-container {
    position: relative; z-index: 10; text-align: center;
}

.belief-headline {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.1; color: #fff; margin-bottom: 20px;
}

.text-dim { color: rgba(255,255,255,0.3); }
.text-neon { 
    color: var(--neon-cyan); font-style: italic;
    text-shadow: 0 0 25px rgba(0, 243, 255, 0.3);
}

.belief-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem; color: #ccc; margin-top: 30px;
    background: rgba(0, 30, 50, 0.6);
    padding: 12px 24px; border-radius: 50px;
    display: inline-block;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 243, 255, 0.2);
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 768px) {
    .belief-scrub-section { padding: 100px 0; }
    
    /* Remove inclinação no mobile para não cortar */
    .bento-gallery-wrapper {
        transform: translate(-50%, -50%) rotate(0deg);
        width: 180vw;
        gap: 15px;
    }
    .bento-row { gap: 15px; }
    
    /* Cards menores */
    .bento-card { width: 160px; height: 110px; border-radius: 8px; }
    .text-card { font-size: 0.8rem; }
    
    .belief-headline { font-size: 1.8rem; }
    .belief-sub { font-size: 0.9rem; padding: 10px 15px; width: 90%; }
}

/* ==========================================================================
   SESSÃO 4: SINTOMAS (COM BORDA NEON LIMPA)
   ========================================================================== */

.symptoms-section {
    position: relative;
    margin-top: -80px; /* Desktop overlap */
    padding-top: 160px; 
    padding-bottom: 120px;
    background: #000810; 
    z-index: 20;
}

/* --- 1. A CURVA SVG (TOPO) --- */
.curve-separator {
    position: absolute;
    top: 0; left: 0; width: 100%;
    height: 80px; /* Altura Desktop */
    transform: translateY(-99.5%); /* Ajuste fino para colar */
    z-index: 21;
    overflow: hidden; pointer-events: none;
}
.curve-separator svg { display: block; width: 100%; height: 100%; }
.curve-fill { fill: #000810; }

/* ESTILO DA LINHA NEON NA CURVA */
.curve-stroke {
    stroke: var(--neon-cyan); /* Cor */
    stroke-width: 2px;        /* Espessura */
    fill: none;
    vector-effect: non-scaling-stroke; /* Mantém a espessura constante */
    /* O Brilho Neon */
    filter: drop-shadow(0 0 5px rgba(0, 243, 255, 0.7));
    opacity: 0.9;
}

/* --- 2. AS BORDAS LATERAIS E INFERIOR --- */
.neon-border-sides {
    position: absolute;
    /* Começa exatamente onde a curva termina (80px no desktop) */
    top: 80px; 
    left: 0; 
    width: 100%;
    /* Altura restante */
    height: calc(100% - 80px);
    
    /* Apenas bordas laterais e inferior */
    border-left: 2px solid var(--neon-cyan);
    border-right: 2px solid var(--neon-cyan);
    border-bottom: 2px solid var(--neon-cyan);
    
    border-radius: 0 0 30px 30px; /* Arredonda embaixo */
    pointer-events: none;
    z-index: 21;
    
    /* Brilho Neon nas bordas retas */
    box-shadow: inset 0 0 10px rgba(0, 243, 255, 0.1), /* Brilho interno sutil */
                0 5px 15px rgba(0, 243, 255, 0.2); /* Brilho externo */
}


/* --- LAYOUT INTERNO (MANTIDO O BOM ESPAÇAMENTO) --- */
.symptoms-header { text-align: center; margin-bottom: 60px; max-width: 800px; margin-left: auto; margin-right: auto; }

.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1; color: #fff; margin-top: 15px;
}

.symptoms-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 900px; margin: 0 auto;
}

.symptom-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 16px;
    display: flex; align-items: flex-start; gap: 20px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.symptom-card:hover {
    transform: translateY(-5px);
    border-color: var(--neon-cyan);
    background: rgba(0, 50, 88, 0.2);
}

.check-box {
    flex-shrink: 0; width: 32px; height: 32px;
    background: var(--brand-blue); border: 1px solid var(--neon-cyan);
    border-radius: 50%; color: #fff;
    display: flex; align-items: center; justify-content: center;
}

.symptom-text strong { color: #fff; font-weight: 600; border-bottom: 1px solid var(--neon-cyan); }

.symptoms-footer { 
    display: flex; flex-direction: column; align-items: center; 
    margin-top: 70px; opacity: 0.8; 
}
.footer-note { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.8rem;     text-align: center;
 color: #888; margin-bottom: 15px; }
.arrow-down-glow { font-size: 1.5rem; color: var(--neon-cyan); animation: bounce 2s infinite; }

/* ==========================================================================
   RESPONSIVIDADE (AJUSTE DA BORDA E ESPAÇAMENTO)
   ========================================================================== */
@media (max-width: 768px) {
    .symptoms-section {
        margin-top: -40px; 
        /* Mantendo o bom espaçamento mobile */
        padding-top: 120px; 
        padding-bottom: 80px;
    }

    /* AJUSTE DA CURVA MOBILE */
    .curve-separator { height: 40px; }
    
    /* AJUSTE DA BORDA LATERAL MOBILE PARA CONECTAR NA CURVA DE 40PX */
    .neon-border-sides {
        top: 40px;
        height: calc(100% - 40px);
    }

    .section-title { font-size: 1.8rem; margin-bottom: 10px; }
    .symptoms-grid { grid-template-columns: 1fr; gap: 20px; }
    .symptom-card { padding: 25px 20px; align-items: center; }
}

/* ==========================================================================
   ANIMAÇÃO DE SCROLL (FADE UP)
   ========================================================================== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* ==========================================================================
   SESSÃO 5: PROBLEMA REAL (GLASS + BRAND COLORS)
   ========================================================================== */

.problem-glass-section {
    position: relative;
    padding: 0px 0;
    overflow: hidden;
    background: #000810; /* Base escura */
}

/* --- 1. BACKGROUND IMAGEM --- */
.problem-bg-image {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* Imagem abstrata premium */
    background: url('https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2069&auto=format&fit=crop') center/cover no-repeat;
    opacity: 0.4;
    z-index: 0;
    filter: grayscale(100%) contrast(1.2); /* Deixa P&B para não brigar com as cores */
}

.problem-dark-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* Gradiente Midnight Blue */
    background: linear-gradient(180deg, #000810 0%, rgba(0, 50, 88, 0.6) 50%, #000810 100%);
    z-index: 1;
}

/* --- 2. MARQUEE (TEXTO AO FUNDO) --- */
.marquee-layer {
    position: absolute; top: 50%; left: 0; width: 100%;
    transform: translateY(-50%) rotate(-5deg);
    display: flex; gap: 40px;
    opacity: 0.1; /* Bem sutil */
    z-index: 2;
    pointer-events: none;
}

.marquee-track {
    display: flex; white-space: nowrap;
    animation: scrollInfinite 60s linear infinite;
}

.marquee-track span {
    font-family: 'Montserrat', sans-serif; font-weight: 900;
    font-size: 8rem; color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.5);
    margin-right: 40px;
}

@keyframes scrollInfinite { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }


/* --- 3. GLASS CONTAINER (O CARD PRINCIPAL) --- */
.glass-container {
    position: relative; z-index: 10;
    max-width: 1000px; margin: 0 auto;
    
    /* O EFEITO DE VIDRO AZULADO */
    background: rgba(0, 50, 88, 0.25); /* Azul da marca bem transparente */
    backdrop-filter: blur(16px);       /* O desfoque mágico */
    -webkit-backdrop-filter: blur(16px);
    
    border: 1px solid rgba(0, 243, 255, 0.15); /* Borda Neon Cyan sutil */
    border-radius: 24px;
    padding: 60px 40px;
    text-align: center;
    
    /* Sombra profunda para dar destaque */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    
    /* Ajuste para mobile */
    width: 90%; 
}

/* HEADER */
.problem-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.2; color: #fff;
    margin-bottom: 20px;
}

/* ANIMAÇÃO "CAOS" NA PALAVRA */
.glitch-word {
    display: inline-block;
    color: var(--neon-cyan); font-weight: 700;
    animation: chaos-breath 5s ease-in-out infinite;
}

@keyframes chaos-breath {
    0%, 100% { letter-spacing: normal; filter: blur(0); opacity: 1; text-shadow: 0 0 20px rgba(0, 243, 255, 0.5); }
    50% { letter-spacing: 8px; filter: blur(3px); opacity: 0.7; text-shadow: none; }
}

.problem-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem; color: #ccc; margin-bottom: 50px;
}

/* --- 4. GRID DE ERROS --- */
.mistakes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.mistake-card {
    /* Vidro mais escuro dentro do vidro */
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px 15px;
    border-radius: 12px;
    transition: 0.3s;
    display: flex; flex-direction: column; align-items: center; gap: 15px;
}

.mistake-card:hover {
    background: rgba(0, 50, 88, 0.4);
    border-color: var(--neon-cyan);
    transform: translateY(-5px);
}

.card-icon { font-size: 1.8rem; }
.mistake-card p { font-size: 0.9rem; color: #ddd; line-height: 1.4; }

/* --- 5. RESULTADO --- */
.inevitable-result {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 40px;
}

.result-label {
    display: block; font-size: 0.8rem; letter-spacing: 2px; 
    color: #ff6b6b; /* Um vermelho suave para alerta */
    margin-bottom: 10px; font-weight: 700;
}

.result-text {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 2rem; color: #fff;
}


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

@media (max-width: 768px) {
    .problem-glass-section { padding: 40px 0; }
    
    .glass-container { padding: 40px 20px; width: 95%; }
    
    /* Marquee ajustado */
    .marquee-track span { font-size: 5rem; margin-right: 20px; }
    
    /* Grid Mobile */
    .mistakes-grid { grid-template-columns: 1fr; gap: 15px; }
    
    .mistake-card { 
        flex-direction: row; 
        text-align: left; 
        padding: 20px; 
    }
    
    .result-text { font-size: 1.6rem; }
}

/* --- ANIMAÇÃO DE SCROLL (FADE UP) --- */
.animate-on-scroll {
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.animate-on-scroll.is-visible {
    opacity: 1; transform: translateY(0);
}

/* Delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ==========================================================================
   SESSÃO 6: PARADIGMA (RESPONSIVO & ANIMADO)
   ========================================================================== */

:root {
    --neon-cyan: #00f3ff;       
    --midnight-bg: #000810;     
    --card-bg: rgba(255, 255, 255, 0.03);
}

.paradigm-split-section {
    position: relative;
    padding: 140px 0;
    background: var(--midnight-bg);
    overflow: hidden;
    text-align: center;
}

/* OVERLAY DE LUZ */
.paradigm-cyan-overlay {
    position: absolute;
    top: -20%; left: 50%; transform: translateX(-50%);
    width: 80%; height: 80%;
    background: radial-gradient(circle, rgba(0, 243, 255, 0.12) 0%, transparent 60%);
    pointer-events: none; z-index: 0;
    filter: blur(60px);
}

.container { position: relative; z-index: 10; }


/* --- HEADER --- */
.paradigm-header { margin-bottom: 60px; max-width: 900px; margin-left: auto; margin-right: auto; }

.section-title {
    font-family: 'Cormorant Garamond', serif;
    /* font-size: clamp(2.2rem, 5vw, 4rem); */
    font-size: 2.9rem;
    line-height: 1.2; color: #fff;
    text-align: center;
}

.text-neon-strike {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    color: #777;
}

.text-highlight-cyan {
    color: var(--neon-cyan);
    font-style: italic;
    text-shadow: 0 0 20px rgba(0, 243, 255, 0.25);
}


/* --- GRID SPLIT (LAYOUT INTELIGENTE) --- */
.split-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr; /* Cartão - Expert (maior) - Cartão */
    gap: 30px;
    align-items: center;
    margin-bottom: 60px;
}

/* CARTÕES */
.split-card {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 35px 25px;
    border-radius: 20px;
    text-align: left;
    position: relative;
    backdrop-filter: blur(10px);
    transition: 0.3s ease;
    height: auto;
    display: flex; flex-direction: column; justify-content: flex-start;
}

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

/* Card Esquerdo (O Velho) */
.card-old { border-right: 2px solid #333; opacity: 0.8; }
.card-old:hover { opacity: 1; border-color: #555; }

/* Card Direito (O Novo - SEU MÉTODO) */
.card-new { 
    border-left: 2px solid var(--neon-cyan); 
    background: rgba(0, 50, 88, 0.2); /* Fundo levemente azulado */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.card-new:hover { 
    border-color: #fff; 
    box-shadow: 0 10px 40px rgba(0, 243, 255, 0.1); 
}

/* BADGES */
.card-badge {
    position: absolute; top: -18px; left: 25px;
    padding: 6px 14px; border-radius: 6px;
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.1rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.badge-gray { background: #2a2a2a; color: #888; }
.badge-cyan { background: var(--neon-cyan); color: #000; }

/* TEXTOS */
.card-title-sm {
    font-family: 'Montserrat', sans-serif; font-size: 0.85rem; 
    text-transform: uppercase; letter-spacing: 1px; color: #fff; margin-bottom: 12px; margin-top: 10px;
}
.split-card p {
    font-family: 'Montserrat', sans-serif; font-size: 0.95rem; color: #ccc; line-height: 1.5; margin: 0;
}
.card-new strong { color: var(--neon-cyan); }


/* --- IMAGEM CENTRAL (EXPERT) --- */
.expert-center-visual {
    position: relative;
    height: 500px; /* Altura Desktop */
    display: flex; align-items: flex-end; justify-content: center;
    z-index: 5;
}

.expert-backlight {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -40%);
    width: 60%; height: 60%;
    background: radial-gradient(circle, rgba(0, 243, 255, 0.25) 0%, transparent 70%);
    filter: blur(40px);
    z-index: -1;
    opacity: 0.8;
}

.expert-img-split {
    max-height: 100%; width: auto;
    object-fit: contain;
    /* Máscara suave na base para fundir com o site */
    mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
    transition: transform 0.5s ease;
}
.expert-center-visual:hover .expert-img-split { transform: scale(1.02); }


/* --- FOOTER --- */
.paradigm-footer { margin-top: 50px; }
.footer-highlight { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; color: #ccc; }
.footer-highlight strong { color: #fff; border-bottom: 1px solid var(--neon-cyan); }
.arrow-down-simple { margin-top: 20px; font-size: 1.5rem; color: var(--neon-cyan); animation: bounce 2s infinite; }


/* ==========================================================================
   RESPONSIVIDADE (MOBILE OPTIMIZED)
   ========================================================================== */
@media (max-width: 900px) {
    .paradigm-split-section { padding: 0.2px 0; }

    .split-grid {
        display: flex;
        flex-direction: column; /* Empilha verticalmente */
        gap: 30px;
        max-width: 450px; 
        margin: 0 auto 40px auto;
    }

    /* REORDENAR PARA STORYTELLING MELHOR NO MOBILE */
    /* 1. Imagem do Expert (Autoridade) */
    .expert-center-visual { 
        order: 1; 
        height: 350px; /* Menor no mobile */
        width: 100%;
        margin-bottom: -20px; /* Aproxima do card de baixo */
    }
    
    /* 2. O Novo Humano (A Solução - Destaque) */
    .card-new { 
        order: 2; 
        border-left: 2px solid var(--neon-cyan);
        transform: scale(1.02); /* Leve destaque visual */
    } 

    /* 3. O Mercado Tradicional (O Problema) */
    .card-old { 
        order: 3; 
        opacity: 0.7; /* Fica em segundo plano visualmente */
        transform: scale(0.95);
    } 

    .section-title { font-size: 2.4rem; line-height: 1.3; }
    .footer-highlight { font-size: 6rem; }
}


/* ==========================================================================
   SCROLL ANIMATION (ENTRADA SUAVE)
   ========================================================================== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Cascata de tempo */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* --- FOOTER / CONCLUSÃO (CORREÇÃO DE ALINHAMENTO) --- */
.paradigm-footer {
    margin-top: 50px;
    
    /* FORÇA O CENTRO ABSOLUTO */
    display: flex;
    flex-direction: column;
    align-items: center;  /* Centraliza horizontalmente */
    justify-content: center;
    text-align: center;
    width: 100%; /* Garante que o container ocupe a tela toda */
}

.footer-highlight {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.4rem, 4vw, 1.8rem); /* Responsivo */
    color: #ccc;
    max-width: 600px; /* Limita a largura para não esticar demais */
}

.footer-highlight strong {
    color: #fff;
    border-bottom: 1px solid var(--neon-cyan);
}

.arrow-down-simple {
    margin-top: 20px;
    font-size: 1.5rem;
    color: var(--neon-cyan);
    animation: bounce 2s infinite;
    
    /* Garantia extra de centralização */
    display: flex;
    justify-content: center;
}

/* Animação da seta */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* --- LÓGICA DE ENTRADA (REVELAÇÃO) --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px); /* Começa levemente abaixo */
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), 
                transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

/* Ativado pelo JavaScript */
.animate-on-scroll.is-visible {
    /* margin-bottom: 22px; */
    opacity: 1;
    transform: translateY(0);
}

/* Delays para efeito cascata */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* --- ESTILOS DA SESSÃO --- */
.new-human-definition {
    padding: 0.8px 0;
    background: #000810;
    text-align: center;
    position: relative;
}

.definition-header { margin-bottom: 50px; }

.pillars-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    max-width: 800px;
    margin: 0 auto 50px auto;
}

.pillar-tag {
    background: rgba(0, 243, 255, 0.05);
    border: 1px solid rgba(0, 243, 255, 0.2);
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.pillar-tag:hover {
    background: var(--neon-cyan);
    color: #000;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.4);
    transform: translateY(-3px);
}

.text-white-glow {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 80px;
}

.definition-impact-box {
    padding: 60px 20px;
    background: radial-gradient(circle, rgba(0, 50, 88, 0.25) 0%, transparent 70%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.text-strike { text-decoration: line-through; color: #555; font-style: italic; }
.text-cyan-italic { color: var(--neon-cyan); font-style: italic; font-weight: 600; }

@media (max-width: 768px) {
    .new-human-definition { padding: 0.2px 0; }
    .pillars-grid { gap: 10px; }
}

/* ==========================================================================
   SESSÃO 8: O MÉTODO (ENGENHARIAS)
   ========================================================================== */

.method-section {
    position: relative;
    padding: 40px 0;
    background: #000810; /* Fundo base */
    overflow: hidden;
    text-align: center;
}

/* --- BACKGROUND IMAGEM COM EFEITO --- */
.method-bg-image {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('https://images.unsplash.com/photo-1510511232890-a54877e68656?q=80&w=2070&auto=format&fit=crop') center/cover no-repeat; /* Imagem de engrenagens ou abstração */
    filter: grayscale(100%) brightness(50%) blur(5px); /* P&B, escuro e levemente embaçado */
    opacity: 0.3;
    z-index: 0;
}

.method-overlay-glass {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* Efeito de Vidro / Blur */
    background: rgba(0, 8, 16, 0.7); /* Fundo ainda mais escuro para o vidro */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
}

.container { position: relative; z-index: 5; } /* Conteúdo acima do fundo */

/* HEADER */
.method-header { margin-bottom: 70px; max-width: 800px; margin-left: auto; margin-right: auto; }

.text-highlight-cyan {
    color: var(--neon-cyan);
    font-style: italic;
    text-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
}

/* --- GRID DE ENGRENAGENS --- */
.gears-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colunas */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 80px auto;
}

.gear-card {
    background: rgba(0, 50, 88, 0.2); /* Fundo Midnight Blue transparente */
    border: 1px solid rgba(0, 243, 255, 0.15); /* Borda Cyan sutil */
    border-radius: 16px;
    padding: 35px 25px;
    text-align: left;
    transition: 0.3s ease;
    backdrop-filter: blur(5px);
    display: flex; flex-direction: column; justify-content: flex-start;
    min-height: 200px;
    position: relative;
    overflow: hidden;
}

.gear-card:hover {
    transform: translateY(-8px);
    border-color: var(--neon-cyan);
    box-shadow: 0 15px 40px rgba(0, 243, 255, 0.1);
}

.gear-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--neon-cyan);
    opacity: 0.7;
    margin-bottom: 15px;
    position: absolute;
    top: 20px;
    right: 20px;
}

.gear-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
    position: relative;
    z-index: 2; /* Acima do número */
}

.gear-card p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: #ccc;
    line-height: 1.5;
    position: relative;
    z-index: 2;
}

.gear-card strong { color: #fff; }

/* FRASE DE IMPACTO FINAL */
.method-impact-phrase {
    max-width: 900px;
    margin: 0 auto;
}

.impact-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.3;
    color: #fff;
    margin-bottom: 20px;
}

.text-reveal-cyan {
    color: var(--neon-cyan);
    font-style: italic;
    display: block; /* Garante que fique em nova linha */
    margin-top: 10px;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

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

@media (max-width: 768px) {
    .method-section { padding: 0.7px 0; }
    .method-header { margin-bottom: 50px; }
    
    .gears-grid {
        grid-template-columns: 1fr; /* 1 coluna no mobile */
        gap: 20px;
        max-width: 400px; /* Limita a largura para cards não ficarem gigantes */
    }

    .gear-card { min-height: auto; text-align: left; padding: 30px 20px; }
    .gear-number { top: 15px; right: 15px; font-size: 2rem; }
    .gear-title { font-size: 1.1rem; }
    .gear-card p { font-size: 0.9rem; }
    
    .impact-title { font-size: clamp(1.6rem, 6vw, 2.5rem); }
}

/* ==========================================================================
   SESSÃO 10: PARA QUEM É (FILTRO)
   ========================================================================== */

.filter-section {
    position: relative;
    padding: 140px 0;
    background: #000810;
    overflow: hidden;
}

/* --- DECORAÇÕES DE FUNDO --- */
.filter-bg-decoration {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}

.glow-sphere {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(0, 243, 255, 0.05) 0%, transparent 70%);
    filter: blur(80px);
    animation: floatingGlow 10s infinite alternate;
}

@keyframes floatingGlow {
    0% { transform: translate(-55%, -45%) scale(1); }
    100% { transform: translate(-45%, -55%) scale(1.1); }
}

/* --- HEADER --- */
.filter-header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}

.filter-subtitle {
    font-family: 'Montserrat', sans-serif;
    color: #888;
    margin-top: 20px;
    font-size: 1.1rem;
}

/* --- GRID DE CARDS --- */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
}

.filter-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 24px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
}

.filter-card:hover {
    background: rgba(0, 243, 255, 0.03);
    border-color: var(--neon-cyan);
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.filter-icon-box {
    width: 50px; height: 50px;
    color: var(--neon-cyan);
    margin-bottom: 25px;
    transition: transform 0.4s ease;
}

.filter-card:hover .filter-icon-box {
    transform: rotateY(180deg);
}

.filter-card h3 {
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.filter-card p {
    font-family: 'Montserrat', sans-serif;
    color: #ccc;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* --- FOOTER EXCLUSIVO --- */
.filter-footer {
    margin-top: 60px;
    display: flex;
    justify-content: center;
}

.exclusivity-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pulse-dot {
    width: 8px; height: 8px;
    background: var(--neon-cyan);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--neon-cyan);
    animation: pulseCyan 2s infinite;
}

@keyframes pulseCyan {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 900px) {
    .filter-grid { grid-template-columns: 1fr; gap: 20px; }
    .filter-section { padding: 20px 20px; }
}

/* ==========================================================================
   SESSÃO 12: FORMATO (SPLIT LAYOUT + BLUR)
   ========================================================================== */

.format-split-section {
    position: relative;
    padding: 140px 0;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Background & Glass */
.format-bg-image {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop') center/cover;
    filter: brightness(0.2) saturate(0.4);
    z-index: 0;
}

.format-glass-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 8, 16, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1;
}

.format-flex-container {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dividido ao meio no Desktop */
    gap: 80px;
    align-items: flex-start;
}

/* COLUNA ESQUERDA */
.format-left-col {
    text-align: left;
    position: sticky;
    top: 150px; /* Faz a headline "travar" enquanto os itens rolam */
}

.format-description {
    font-family: 'Montserrat', sans-serif;
    color: #888;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-top: 20px;
}

/* COLUNA DIREITA */
.format-right-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.format-list-item {
    display: flex;
    gap: 20px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 15px;
    transition: 0.4s ease;
    text-align: left;
}

.format-list-item:hover {
    border-color: var(--neon-cyan);
    background: rgba(0, 243, 255, 0.03);
    transform: translateX(10px);
}

.item-icon {
    color: var(--neon-cyan);
    font-size: 1.2rem;
    margin-top: 3px;
}

.item-info h3 {
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.item-info p {
    font-family: 'Montserrat', sans-serif;
    color: #999;
    font-size: 0.95rem;
    line-height: 1.4;
    margin: 0;
}

/* --- ANIMAÇÃO BLUR REVEAL --- */
.animate-blur-reveal {
    opacity: 0;
    filter: blur(15px);
    transform: translateY(20px);
    transition: opacity 1s ease, filter 1s ease, transform 1s ease;
}

.animate-blur-reveal.is-visible {
    margin-top: 12px;
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 992px) {
    .format-flex-container {
        grid-template-columns: 1fr; /* Empilha no Mobile */
        gap: 50px;
    }
    
    .format-left-col {
        text-align: center; /* Centraliza headline no mobile */
        position: static;
    }
}

@media (max-width: 768px) {
    .format-split-section { padding: 80px 0; }
    .format-list-item { padding: 20px; }
}

/* ==========================================================================
   SESSÃO 13: ANTI-OBJEÇÃO (PREMIUM FILTER)
   ========================================================================== */

.objection-section {
    position: relative;
    padding: 140px 0;
    background: #000810;
    overflow: hidden;
    text-align: center;
}

.objection-bg-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% -20%, rgba(0, 243, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* --- ANIMAÇÃO DE ENTRADA (BLUR REVEAL) --- */
.animate-blur-reveal {
    opacity: 0;
    filter: blur(15px);
    transform: translateY(30px);
    transition: opacity 1.2s ease, filter 1.2s ease, transform 1.2s ease;
}

.animate-blur-reveal.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* --- GRID E CARDS --- */
.objection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 60px auto;
    max-width: 1100px;
}

.objection-card {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 50px 30px;
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: default;
}

/* Efeito de Luz Interna (Mouse Hover / Mobile Touch) */
.card-glow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
                rgba(0, 243, 255, 0.1), 
                transparent 40%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

.objection-card:hover .card-glow,
.objection-card:active .card-glow {
    opacity: 1;
}

.objection-card:hover {
    transform: translateY(-10px);
    border-color: rgba(0, 243, 255, 0.3);
    background: rgba(255, 255, 255, 0.04);
}

.warning-icon { font-size: 2rem; display: block; margin-bottom: 20px; }

.objection-card h3 {
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 15px;
    line-height: 1.4;
}

.objection-card p {
    font-family: 'Montserrat', sans-serif;
    color: #888;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* --- FOOTER QUALIFICAÇÃO --- */
.qualification-footer {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.qualify-badge {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 30px;
    background: rgba(0, 243, 255, 0.05);
    border: 1px solid rgba(0, 243, 255, 0.2);
    border-radius: 50px;
    color: var(--neon-cyan);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 992px) {
    .objection-grid { grid-template-columns: 1fr; gap: 0.2px; max-width: 500px; }
    .objection-section { padding: 0.2px 20px; }
}

/* ==========================================================================
   SESSÃO 14: MANIFESTO (REPLICANDO IMAGEM + BOTÃO PADRÃO)
   ========================================================================== */

.manifesto-section {
    position: relative;
    padding: 20px 0;
    background: #000810;
    overflow: hidden;
}

.manifesto-bg-pattern {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 10% 40%, rgba(0, 243, 255, 0.05) 0%, transparent 50%);
    z-index: 1;
}

.manifesto-glass-blur {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2;
}

.manifesto-grid {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Split como na imagem */
    gap: 60px;
    align-items: center;
}

/* --- ESQUERDA --- */
.manifesto-left { text-align: left; }

.text-neon-strike {
    text-decoration: line-through;
    text-decoration-color: rgba(0, 243, 255, 0.4);
    color: #555;
    font-size: 0.8em;
}

.text-highlight-cyan {
    color: var(--neon-cyan);
    font-style: italic;
    text-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
}

.manifesto-footer-text {
    margin: 40px 0 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
}

.closing-p { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; color: #888; margin: 0; }
.closing-p-bold { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; color: #fff; font-weight: 700; margin: 0; }

/* --- BOTÃO PADRÃO DO SITE (AJUSTADO) --- */
.btn-standard {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px; /* Tamanho menor e padrão */
    background: var(--neon-cyan);
    color: #000;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.95rem; /* Menor que o anterior */
    border-radius: 50px;
    transition: 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 243, 255, 0.2);
}

.btn-standard:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 243, 255, 0.4);
    background: #fff;
}

/* --- DIREITA (CARDS) --- */
.align-title {
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 30px;
}

.alignment-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.align-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px 25px;
    border-radius: 12px;
    text-align: left;
    transition: 0.3s;
}

.align-card:hover {
    border-color: var(--neon-cyan);
    background: rgba(0, 243, 255, 0.02);
}

.align-card h4 { color: var(--neon-cyan); margin-bottom: 5px; font-size: 1.1rem; }
.align-card p { color: #888; font-size: 0.9rem; margin: 0; }

/* --- ANIMAÇÃO BLUR REVEAL --- */
.animate-blur-reveal {
    opacity: 0;
    filter: blur(15px);
    transform: translateY(20px);
    transition: opacity 1s ease, filter 1s ease, transform 1s ease;
}

.animate-blur-reveal.is-visible {
    text-align: center;
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 992px) {
    .manifesto-grid { grid-template-columns: 1fr; gap: 50px; }
    .manifesto-left { text-align: center; }
    .manifesto-cta { display: flex; justify-content: center; }
    .alignment-grid { max-width: 450px; margin: 0 auto; }
}

/* ==========================================================================
   SESSÃO 15: CTA FINAL (DECISÃO CONSCIENTE)
   ========================================================================== */

.final-cta-section {
    position: relative;
    padding: 160px 0;
    background: #000810;
    overflow: hidden;
    text-align: center;
}

/* Luz centralizada atrás do conteúdo */
.final-cta-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(0, 243, 255, 0.07) 0%, transparent 70%);
    filter: blur(60px);
    z-index: 1;
}

.final-cta-wrapper {
    position: relative;
    z-index: 10;
    max-width: 900px;
    margin: 0 auto;
}

/* --- HEADLINE --- */
.decision-headline h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.2;
    color: #fff;
    margin-bottom: 10px;
}

.text-dim-gray {
    color: #444;
    font-style: italic;
}

.text-highlight-cyan {
    color: var(--neon-cyan);
    font-style: italic;
    text-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
}

/* --- BOTÃO (MESMO PADRÃO ELEGANTE ANTERIOR) --- */
.decision-action {
    margin-top: 60px;
}

.btn-standard-neon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background: var(--neon-cyan);
    color: #000;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 50px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 5px 20px rgba(0, 243, 255, 0.25);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

.btn-standard-neon:hover {
    transform: translateY(-5px);
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 243, 255, 0.4);
}

.cta-security-note {
    margin-top: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    color: #555;
    letter-spacing: 1px;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 768px) {
    .final-cta-section { padding: 100px 20px; }
    
    .decision-headline h2 {
        font-size: 1.8rem;
        line-height: 1.3;
    }

    .btn-standard-neon {
        width: 100%;
        font-size: 0.85rem;
        padding: 16px 20px;
    }
}

/* ==========================================================================
   FOOTER CENTRALIZADO (BRAND FONTS)
   ========================================================================== */

.main-footer {
    padding: 80px 0 60px 0;
    background: #00050a;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    position: relative;
    z-index: 10;
}

/* Wrapper Centralizador */
.footer-central-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza tudo horizontalmente */
    justify-content: center;
    text-align: center;
    gap: 25px;
}

/* Tipografia da Logo */
.footer-logo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: 4px;
    color: #fff;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.footer-logo .text-cyan {
    color: var(--neon-cyan);
    text-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
}

/* Navegação Legal */
.footer-legal-nav {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-legal-nav a {
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    color: #666;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.footer-legal-nav a:hover {
    color: var(--neon-cyan);
}

.nav-divider {
    color: #222;
    font-size: 0.8rem;
}

/* Copyright */
.footer-copyright p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    color: #444;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}

/* --- AJUSTE RESPONSIVO --- */
@media (max-width: 768px) {
    .main-footer {
        padding: 60px 0 40px 0;
    }
    
    .footer-legal-nav {
        flex-direction: column;
        gap: 10px;
    }
    
    .nav-divider {
        display: none; /* Remove o ponto no mobile empilhado */
    }
}

/* --- BOTÃO FLUTUANTE (CANTO DIREITO) --- */
.btn-floating-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    background: var(--neon-cyan);
    color: #000;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    filter: blur(10px);
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 10px 25px rgba(0, 243, 255, 0.3);
}

.btn-floating-top.show {
    opacity: 1;
    visibility: visible;
    filter: blur(0);
    transform: translateY(0);
}

/* ==========================================================================
   CTA UNIVERSAL (BOTÃO REUTILIZÁVEL)
   ========================================================================== */

/* Container para garantir espaçamento e centralização */
.universal-cta-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 50px; /* Espaço padrão acima do botão */
    margin-bottom: 20px;
    position: relative;
    z-index: 20; /* Garante que fique acima de elementos decorativos */
}

/* O Botão em si */
.btn-universal-glow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 18px 45px;
    background: var(--neon-cyan); /* Cor da marca */
    color: #000;
    text-decoration: none;
    border-radius: 100px;
    
    /* Tipografia */
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Efeitos de Transição */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 25px rgba(0, 243, 255, 0.4); /* Glow Inicial */
    overflow: hidden;
}

/* Efeito Hover (Ao passar o mouse) */
.btn-universal-glow:hover {
    transform: translateY(-5px) scale(1.02);
    background: #fff; /* Fica branco */
    color: #000;
    box-shadow: 0 0 50px rgba(0, 243, 255, 0.8), /* Glow Forte */
                0 0 15px rgba(255, 255, 255, 0.5); 
}

/* Ícone com animação */
.btn-universal-glow .btn-icon {
    font-size: 1.2rem;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.btn-universal-glow:hover .btn-icon {
    transform: translateX(5px); /* Seta move para a direita */
}

/* Microcopy (Texto pequeno abaixo do botão) */
.cta-microcopy {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    color: #888;
    margin-top: 15px;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

/* ANIMAÇÃO DE PULSO (OPCIONAL - CHAMA MUITA ATENÇÃO) */
@keyframes neonPulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 243, 255, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(0, 243, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 243, 255, 0); }
}

/* Descomente a linha abaixo se quiser que o botão pulse sozinho */
/* .btn-universal-glow { animation: neonPulse 2s infinite; } */

/* --- RESPONSIVIDADE --- */
@media (max-width: 768px) {
    .universal-cta-wrapper { margin-top: 40px; }
    
    .btn-universal-glow {
        padding: 16px 30px; /* Levemente menor no mobile */
        font-size: 0.9rem;
        width: 100%; /* Ocupa largura total se quiser, ou remova para manter pílula */
        max-width: 350px;
        justify-content: center;
    }
}

/* --- Ícones Premium para a Sessão Problema --- */

.card-icon {
    /* Define um tamanho fixo para o container do ícone */
    width: 50px;
    height: 50px;
    
    /* Centraliza o SVG dentro do container */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Fundo sutil e bordas arredondadas */
    background: rgba(0, 243, 255, 0.05); /* Um tom muito leve de Cyan */
    border-radius: 12px;
    border: 1px solid rgba(0, 243, 255, 0.1);
    
    /* Cor principal do ícone */
    color: var(--neon-cyan);
    
    /* Espaçamento para o texto abaixo */
    margin-bottom: 15px;
    
    /* Efeito de Brilho Neon no SVG */
    filter: drop-shadow(0 0 8px rgba(0, 243, 255, 0.6));
    
    transition: all 0.3s ease;
}

/* Tamanho do SVG dentro do container */
.card-icon svg {
    width: 28px;
    height: 28px;
}

/* Efeito extra ao passar o mouse no card inteiro */
.mistake-card:hover .card-icon {
    background: rgba(0, 243, 255, 0.15); /* Fundo fica mais forte */
    transform: scale(1.05); /* Ícone cresce levemente */
    filter: drop-shadow(0 0 12px rgba(0, 243, 255, 0.8)); /* Brilho aumenta */
}

/* ==========================================================================
   ÍCONES PREMIUM (REMIX ICON) - ESTILO NEON
   ========================================================================== */

/* Wrapper Geral dos Ícones (Problema & Objeção) */
.card-icon, 
.objection-icon-wrapper {
    width: 60px;
    height: 60px;
    
    /* Centralização */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Estilo "Caixa de Vidro" */
    background: rgba(0, 243, 255, 0.05);
    border: 1px solid rgba(0, 243, 255, 0.15);
    border-radius: 16px;
    
    /* Cor e Brilho do Ícone */
    color: var(--neon-cyan);
    font-size: 1.8rem; /* Tamanho do ícone */
    
    margin-bottom: 20px;
    transition: all 0.4s ease;
    
    /* Efeito de Brilho Neon no Ícone */
    text-shadow: 0 0 15px rgba(0, 243, 255, 0.6);
    box-shadow: 0 0 0 rgba(0, 243, 255, 0); /* Sombra da caixa inicial */
}

/* Efeito Hover (Ao passar o mouse no Card) */
.mistake-card:hover .card-icon,
.objection-card:hover .objection-icon-wrapper {
    background: var(--neon-cyan); /* Fundo preenche */
    color: #000; /* Ícone fica preto para contraste */
    text-shadow: none;
    transform: scale(1.1) rotate(-5deg); /* Leve rotação e aumento */
    box-shadow: 0 0 25px rgba(0, 243, 255, 0.4); /* Glow externo */
    border-color: var(--neon-cyan);
}

/* Ajuste específico para garantir que o ícone fique nítido */
i[class^="ri-"] {
    line-height: 1;
    display: block;
}


/* ==========================================================================
   GLASS BACKGROUND GLOBAL (Efeito de Vidro em Todas as Sessões)
   ========================================================================== */

/* ==========================================================================
   GLASS BACKGROUND AZUL (Midnight Blue Glass)
   ========================================================================== */

.universal-glass-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* COR BASE: Azul Midnight Profundo e Translúcido */
    background: rgba(0, 20, 40, 0.75); 
    
    /* O DESFOQUE (Mais forte para garantir leitura) */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    
    /* BORDAS: Cyan suave no topo e na base para destacar a seção */
    border-top: 1px solid rgba(0, 243, 255, 0.15);
    border-bottom: 1px solid rgba(0, 243, 255, 0.05);
    
    /* EFEITO DE LUZ INTERNA (Vignette Azulada) */
    box-shadow: inset 0 0 100px rgba(0, 50, 100, 0.3);
    
    z-index: 1;
    pointer-events: none;
}

/* Regra de segurança: Garante que o conteúdo (texto/botões) fique acima do vidro */
section .container {
    position: relative;
    z-index: 10 !important;
}

/* Regra de segurança: Garante que elementos de fundo fiquem atrás do vidro */
section > div[class*="-bg"], 
section > div[class*="overlay"],
section > img {
    z-index: 0;
}

/* ==========================================================================
   GLOBAL BACKGROUND IMAGE (Imagens de Fundo Padronizadas)
   ========================================================================== */

.bg-img-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Configurações visuais para manter o aspecto Dark/Premium */
    z-index: 0;          /* Fica atrás do vidro (glass-bg) */
    opacity: 0.80   ;       /* Bem suave para não atrapalhar a leitura */
    filter: grayscale(100%) contrast(1.2); /* Preto e branco para elegância */
    mix-blend-mode: luminosity; /* Mescla com a cor de fundo do site */
}

/* Ajuste de Z-Index para garantir a ordem das camadas */
/* Camada 0: Imagem */
/* Camada 1: Vidro (.universal-glass-bg) */
/* Camada 10: Conteúdo (.container) */

section {
    position: relative; /* Necessário para o absolute funcionar */
    background-color: #00050a; /* Cor de fundo base caso a imagem não carregue */
}

/* ==========================================================================
   CORREÇÃO FINAL: FORÇAR TRANSPARÊNCIA EM TODAS AS SESSÕES
   (Isso remove o fundo preto para mostrar a imagem e o vidro azul)
   ========================================================================== */

/* 1. Lista completa de todas as classes de seção */
/* .hero-section, */
.mirror-section,
.belief-scrub-section,
.symptoms-section,
.problem-glass-section,
.paradigm-split-section,
.new-human-definition,
.method-section,
.filter-section,
.format-split-section,
.objection-section,
.manifesto-section,
.final-cta-section,
.main-footer {
    background-color: transparent !important; /* Remove a cor sólida */
    background-image: none !important; /* Remove gradients antigos no container pai */
}

/* 2. Garante que os overlays internos não sejam opacos demais */
/* .hero-overlay, */
.mirror-overlay,
.belief-overlay,
.problem-dark-overlay,
.method-overlay-glass,
.format-glass-overlay,
.objection-bg-overlay,
.manifesto-glass-blur {
    /* Deixa o overlay interno mais suave para o vidro azul global dominar */
    opacity: 0.6 !important; 
    mix-blend-mode: multiply; /* Mistura melhor com o azul */
}

/* 3. Garante que a imagem de fundo tenha o tamanho certo */
.bg-img-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    opacity: 0.35 !important; /* Ajuste a visibilidade da imagem aqui */
    pointer-events: none;
}

/* 4. Garante que o vidro azul fique acima da imagem */
.universal-glass-bg {
    z-index: 1;
}

/* 5. Garante que o texto fique acima de tudo */
.container {
    position: relative;
    z-index: 10 !important;
}

/* ==========================================================================
   CORREÇÃO ESPECÍFICA: SESSÃO FORMATO (#format)
   ========================================================================== */

/* 1. Remove a cor sólida do container principal */
#format, 
.format-split-section {
    background: transparent !important;
    background-color: transparent !important;
}

/* 2. OCULTA as camadas antigas que estavam cobrindo o novo design */
.format-bg-image,
.format-glass-overlay {
    display: none !important; /* Desliga os fundos antigos */
}

/* 3. Garante que os cards internos continuem legíveis */
.format-list-item {
    background: rgba(0, 30, 60, 0.4) !important; /* Vidro azulado */
    border: 1px solid rgba(0, 243, 255, 0.1) !important;
    backdrop-filter: blur(5px);
}

/* ==========================================================================
   AJUSTE FINAL: MAIOR VISIBILIDADE DA IMAGEM DE FUNDO
   (Adicione no final do seu style.css)
   ========================================================================== */

/* 1. Aumenta a força da Imagem de Fundo */
.bg-img-container {
    /* Aumente este valor (vai de 0.0 até 1.0) */
    /* Antes estava perto de 0.25. Agora vamos para 0.55 */
    opacity: 0.55 !important;
    
    /* (OPCIONAL) Se quiser que a imagem tenha um pouco de cor real, 
       diminua o grayscale de 100% para 50% ou 0% */
    filter: grayscale(80%) contrast(1.1) !important; 
}

/* 2. Deixa o Vidro Azul mais transparente e menos embaçado */
.universal-glass-bg {
    /* Diminua o último número (alpha) para deixar o vidro mais fino */
    /* Antes estava 0.75. Vamos baixar para 0.5 */
    background: rgba(0, 20, 40, 0.5) !important; 
    
    /* Diminua o blur para a imagem ficar mais nítida */
    /* Antes estava 16px. Vamos para 8px */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* 3. Garante que os overlays antigos não atrapalhem */
[class*="-overlay"] {
     opacity: 0.4 !important; /* Reduz a força de qualquer outro overlay extra */
}

/* ==========================================================================
   RESTAURAÇÃO DO HERO (Tratamento Especial)
   ========================================================================== */

/* 1. Desativa o "Vidro Azul Global" apenas no Hero */
/* Isso remove o embaçado excessivo e a tinta azulada forte */
#hero .universal-glass-bg {
    display: none !important; 
}

/* 2. Traz a imagem de fundo do Hero para a frente e deixa ela nítida */
#hero .bg-img-container {
    opacity: 1 !important; /* Visibilidade total */
    filter: brightness(0.6) contrast(1.1) !important; /* Remove o efeito P&B, apenas escurece um pouco */
    z-index: 0;
}

/* 3. Restaura o degradê escuro original (para o texto branco ler bem) */
#hero .hero-overlay {
    display: block !important;
    opacity: 1 !important; /* Força a visibilidade */
    
    /* Gradiente original: Azul Escuro no topo -> Preto na base */
    background: linear-gradient(135deg, rgba(0, 30, 60, 0.85) 0%, rgba(2, 2, 2, 0.95) 100%) !important;
    
    /* Garante que fique em cima da imagem, mas embaixo do texto */
    z-index: 1; 
    mix-blend-mode: normal !important; /* Remove misturas estranhas */
}

/* 4. Garante que o conteúdo fique acima de tudo */
#hero .container {
    z-index: 10 !important;
}

/* ==========================================================================
   ÍCONES ANIMADOS (FONTE E SVG) E EFEITOS
   ========================================================================== */

/* --- 1. O Efeito de "Risco" (Corte na Lâmpada) --- */
.cut-icon { position: relative; }
.cut-icon::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 60%; height: 2px;
    background-color: var(--neon-cyan);
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 5px var(--neon-cyan); pointer-events: none;
}

/* --- 2. Animação Global (Float + Glow) --- */
@keyframes iconFloatGlow {
    0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 8px rgba(0, 243, 255, 0.4)); }
    50% { transform: translateY(-6px); filter: drop-shadow(0 0 15px rgba(0, 243, 255, 0.8)); }
}

/* APLICA A ANIMAÇÃO EM ÍCONES DE FONTE (i) E SVGs */
/* Usei drop-shadow no filter para funcionar melhor em ambos */
.premium-icon i,
.premium-icon svg {
    display: inline-block;
    animation: iconFloatGlow 4s ease-in-out infinite;
}

/* Garante o tamanho correto do SVG */
.premium-icon svg {
    width: 32px;
    height: 32px;
    stroke: currentColor; /* Pega a cor Cyan do pai */
}

/* Delays */
.delay-1 .premium-icon i, .delay-1 .premium-icon svg { animation-delay: 0s; }
.delay-2 .premium-icon i, .delay-2 .premium-icon svg { animation-delay: 1s; }
.delay-3 .premium-icon i, .delay-3 .premium-icon svg { animation-delay: 2s; }
.delay-4 .premium-icon i, .delay-4 .premium-icon svg { animation-delay: 3s; }

/* ==========================================================================
   QUEM SOU EU (ABOUT) & FAQ INTERATIVO
   ========================================================================== */

/* ==========================================================================
   QUEM SOU EU (ABOUT) - CORREÇÃO DE ESPAÇAMENTO E RESPONSIVIDADE
   ========================================================================== */

.about-section {
    position: relative;
    /* AUMENTEI O ESPAÇAMENTO AQUI (Topo e Base) */
    padding: 120px 0 100px 0; 
    overflow: hidden; /* Garante que nada vaze da tela */
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas no Desktop */
    gap: 80px; /* Espaço entre Imagem e Texto */
    align-items: center; /* Centraliza verticalmente */
}

/* --- Coluna Visual (Foto) --- */
.about-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.expert-frame {
    position: relative;
    width: 100%;
    max-width: 480px; /* Limite de largura da foto */
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0, 243, 255, 0.2);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); /* Sombra para profundidade */
}

.about-img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(20%) contrast(1.1);
    transition: 0.5s ease;
}

.expert-frame:hover .about-img {
    filter: grayscale(0%);
    transform: scale(1.03);
}

/* --- Stats Flutuantes (Números) --- */
.stats-container {
    display: flex;
    gap: 20px;
    /* No Desktop, sobe um pouco sobre a foto */
    margin-top: -50px; 
    position: relative;
    z-index: 5;
    justify-content: center;
    width: 100%;
}

.stat-card {
    background: rgba(5, 15, 30, 0.9); /* Fundo bem escuro para ler */
    backdrop-filter: blur(12px);
    border: 1px solid var(--neon-cyan);
    padding: 25px 20px;
    border-radius: 16px;
    text-align: center;
    min-width: 150px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 25px rgba(0, 243, 255, 0.25);
}

.stat-number {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    display: block;
}

.stat-suffix {
    font-size: 1.2rem;
    color: var(--neon-cyan);
    font-weight: 700;
}

.stat-label {
    font-size: 0.8rem;
    color: #ccc;
    text-transform: uppercase;
    margin-top: 8px;
    letter-spacing: 1px;
    font-weight: 500;
}

/* --- Coluna de Texto --- */
.about-text {
    padding-right: 20px;
}

.about-bio {
    font-size: 1.15rem;
    color: #e0e0e0;
    line-height: 1.8;
    margin-bottom: 25px;
}

.about-highlight-box {
    display: flex;
    gap: 20px;
    background: rgba(0, 243, 255, 0.08);
    border-left: 4px solid var(--neon-cyan);
    padding: 25px;
    border-radius: 0 12px 12px 0;
    margin-top: 40px;
    align-items: center;
}

.about-highlight-box i {
    font-size: 2.5rem;
    color: var(--neon-cyan);
}

.about-highlight-box p {
    margin: 0;
    font-size: 1rem;
    color: #fff;
    font-weight: 600;
    line-height: 1.5;
}

.signature-line {
    height: 2px;
    width: 120px;
    background: linear-gradient(90deg, var(--neon-cyan), transparent);
    margin-top: 50px;
}

/* ==========================================================================
   RESPONSIVIDADE (MOBILE & TABLET) - A CORREÇÃO PRINCIPAL
   ========================================================================== */

@media (max-width: 1024px) {
    .about-section {
        padding: 80px 0; /* Ajuste para Tablet */
    }
    .about-grid {
        grid-template-columns: 1fr; /* Vira uma coluna só */
        gap: 0px;
        text-align: center; /* Centraliza tudo */
    }
    
    .about-text {
        padding: 20; /* Remove padding lateral */
        display: flex;
        flex-direction: column;
        align-items: center; /* Centraliza itens internos */
    }
    
    .expert-frame {
        max-width: 400px;
        margin: 0 auto; /* Centraliza a foto */
    }
    
    .about-highlight-box {
        text-align: left; /* Mantém o texto do destaque legível */
        width: 100%;
        max-width: 500px;
    }
    
    .signature-line {
        margin: 40px auto 0 auto; /* Centraliza a linha */
        background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
    }
}

@media (max-width: 600px) {
    /* MOBILE (Celular) */
    .about-section {
        padding: 60px 0;
    }
    
    .stats-container {
        flex-direction: row; /* Mantém lado a lado se couber */
        flex-wrap: wrap; /* Se a tela for muito pequena, quebra linha */
        margin-top: 20px; /* REMOVE O MARGIN NEGATIVO! Fica embaixo da foto agora */
        gap: 15px;
    }
    
    .stat-card {
        min-width: 120px; /* Cards menores */
        padding: 15px;
        flex: 1; /* Esticam para preencher espaço */
    }
    
    .stat-number {
        font-size: 1.8rem;
    }
    
    .about-bio {
        font-size: 1rem;
        text-align: left; /* Texto alinhado à esquerda para leitura fácil */
    }
    
    .about-highlight-box {
        flex-direction: column; /* Ícone em cima, texto embaixo */
        text-align: center;
        gap: 10px;
    }
}

/* ==========================================================================
   FAQ (PERGUNTAS FREQUENTES) - ESPAÇAMENTO E RESPONSIVIDADE CORRIGIDOS
   ========================================================================== */

.faq-section {
    position: relative;
    /* AUMENTO DO ESPAÇAMENTO (Topo e Base) - Igual à sessão Quem Sou Eu */
    padding: 120px 0 100px 0;
}

.faq-header {
    text-align: center;
    margin-bottom: 60px;
    padding: 0 20px; /* Garante margem lateral no mobile */
}

.faq-subtitle {
    font-size: 1.1rem;
    color: #888;
    margin-top: 10px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.faq-wrapper {
    max-width: 800px; /* Largura ideal para leitura */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaço entre as caixas */
    padding: 0 20px; /* Protege as laterais no mobile */
}

.faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Estado Ativo (Aberto) */
.faq-item.active {
    background: rgba(0, 50, 88, 0.4); /* Azulado mais forte */
    border-color: var(--neon-cyan);
    box-shadow: 0 5px 25px rgba(0, 243, 255, 0.1);
}

.faq-question {
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center; /* Centraliza ícone e texto verticalmente */
    cursor: pointer;
    gap: 20px; /* Espaço entre o texto e o ícone */
}

.faq-question h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: #fff;
    margin: 0;
    font-weight: 600;
    line-height: 1.4;
    text-align: left; /* Garante alinhamento à esquerda */
}

.faq-icon {
    font-size: 1.5rem;
    color: var(--neon-cyan);
    transition: transform 0.3s ease;
    
    /* Garante que o ícone não encolha se o texto for grande */
    min-width: 24px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gira o ícone quando ativo */
.faq-item.active .faq-icon {
    transform: rotate(45deg); /* Vira um X */
    color: #fff;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 25px;
    opacity: 0;
    transition: all 0.4s ease;
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: left;
}

/* Estado Aberto do Texto */
.faq-item.active .faq-answer {
    max-height: 300px; /* Aumentei para garantir que textos longos caibam */
    padding-bottom: 25px;
    opacity: 1;
}

/* ==========================================================================
   RESPONSIVIDADE (MOBILE) - AJUSTES DE ALINHAMENTO
   ========================================================================== */

@media (max-width: 768px) {
    .faq-section {
        padding: 80px 0; /* Reduz um pouco o topo no celular */
    }

    .faq-header {
        margin-bottom: 40px;
    }

    .faq-question {
        padding: 20px; /* Menos padding interno para ganhar espaço */
        align-items: flex-start; /* Alinha ícone ao TOPO se o texto tiver 2 linhas */
    }

    .faq-question h3 {
        font-size: 1rem; /* Fonte um pouco menor para caber melhor */
    }

    .faq-icon {
        font-size: 1.3rem;
        margin-top: 2px; /* Ajuste fino para alinhar com a primeira linha de texto */
    }

    .faq-answer {
        padding: 0 20px; /* Alinha com o padding do título */
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   SESSÃO DE PROVA SOCIAL (INLINE VIDEO + 4 COLUNAS)
   ========================================================================== */

.video-proof-section {
    position: relative;
    padding: 120px 0 140px 0;
    background: #000810;
    overflow: hidden;
    text-align: center;
}

.video-bg-img {
    background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop');
}

.video-orb {
    top: 30%; width: 700px; height: 700px; opacity: 0.4;
}

.video-highlight-text {
    font-style: normal; font-weight: 700;
}

.video-cta {
    margin-top: 60px;
}

/* --- GRID DE 4 VÍDEOS --- */
.video-grid-minimal {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Colunas no Desktop */
    gap: 25px;
    max-width: 1280px; /* Largura estendida para caber 4 vídeos respirando */
    margin: 60px auto 0 auto;
    padding: 0 20px;
}

/* --- CARD DO VÍDEO --- */
.video-card-min {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
    background: #050a10;
}

.video-card-min:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--neon-cyan);
    box-shadow: 0 20px 50px rgba(0, 243, 255, 0.15);
    z-index: 2;
}

/* --- VÍDEO NATIVO E ÁREA DE CLIQUE --- */
.inline-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    border-radius: 20px;
    outline: none;
}

.video-click-area {
    position: absolute;
    top: 0; left: 0;
    width: 100%; 
    height: calc(100% - 60px); 
    z-index: 2;
    opacity: 0;
    pointer-events: none;
}

.video-card-min.is-playing .video-click-area {
    pointer-events: auto;
}

/* --- OVERLAYS --- */
.video-gradient-overlay, 
.play-btn-min, 
.video-info-overlay {
    z-index: 1;
    transition: opacity 0.4s ease;
}

.video-gradient-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,10,20,0.3) 50%, rgba(0,5,15,0.95) 100%);
}

.video-card-min:hover .video-gradient-overlay { opacity: 0.8; }

.play-btn-min {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70px; height: 70px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #fff;
    font-size: 2.2rem;
    display: flex; align-items: center; justify-content: center;
    padding-left: 4px;
}

.video-card-min:hover .play-btn-min {
    background: var(--neon-cyan);
    border-color: var(--neon-cyan);
    color: #000;
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 40px rgba(0, 243, 255, 0.6);
}

.video-info-overlay {
    position: absolute;
    bottom: 30px; left: 25px; right: 25px;
    text-align: left;
    pointer-events: none;
}

.video-info-overlay h4 {
    font-family: 'Montserrat', sans-serif;
    color: #fff; font-size: 1.25rem; font-weight: 700;
    margin-bottom: 5px; text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}

.video-info-overlay p {
    font-family: 'Montserrat', sans-serif;
    color: var(--neon-cyan); font-size: 0.85rem; font-weight: 600;
    margin: 0; text-shadow: 0 2px 10px rgba(0,0,0,0.9);
    text-transform: uppercase; letter-spacing: 0.5px;
}

/* --- ESTADOS DO PLAYER --- */
.video-card-min.is-playing .video-gradient-overlay,
.video-card-min.is-playing .play-btn-min,
.video-card-min.is-playing .video-info-overlay {
    opacity: 0;
    pointer-events: none;
}

.video-card-min.is-playing {
    transform: none;
    box-shadow: 0 10px 30px rgba(0, 243, 255, 0.2);
    border-color: var(--neon-cyan);
}

/* ==========================================================================
   RESPONSIVIDADE (O SEGREDO DA DUPLA MOBILE)
   ========================================================================== */

/* Tablet e Notebooks pequenos */
@media (max-width: 1024px) {
    .video-grid-minimal { 
        grid-template-columns: repeat(2, 1fr); /* 2x2 no Tablet */
        max-width: 700px; 
    }
}

/* Celulares */
@media (max-width: 768px) {
    .video-proof-section { padding: 80px 0; }
    
    .video-grid-minimal { 
        grid-template-columns: repeat(2, 1fr); /* MANTÉM 2 COLUNAS NO MOBILE */
        gap: 15px; /* Reduz o espaço entre os vídeos para caberem bem */
        padding: 0 15px; /* Margem lateral menor */
    }

    /* Como a tela está dividida, precisamos diminuir as fontes e os botões */
    .video-info-overlay {
        bottom: 15px; left: 15px; right: 15px; /* Aproxima do canto */
    }
    
    .video-info-overlay h4 { 
        font-size: 0.85rem; /* Nome menor */
        margin-bottom: 2px;
    }
    
    .video-info-overlay p { 
        font-size: 0.65rem; /* Resumo menor */
        line-height: 1.2;
    }
    
    .play-btn-min { 
        width: 45px; height: 45px; /* Botão de play reduzido */
        font-size: 1.4rem; 
    }
}

/* ==========================================================================
   DIGITALIZE 2.0 EXTRAS - MIGRATED
   ========================================================================== */

/* Neon Accents from Digitalize */
.text-neon {
    color: #00f3ff;
    text-shadow: 0 0 10px rgba(0,243,255,0.4);
}

.text-cyan-italic {
    color: #00f3ff;
    font-style: italic;
    font-weight: 600;
}

/* Base Neon Section Divider */
.section-neon-divider {
    border-top: 1px solid rgba(0, 153, 255, 0.2);
    border-bottom: 1px solid rgba(0, 153, 255, 0.2);
    position: relative;
}

.glow-orb-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85vw;
    height: 85vw;
    background: radial-gradient(circle, rgba(0,153,255,0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* FAQ Specific Styles */
.faq-section {
    background-color: #010814;
}

details.faq-item {
    background: rgba(0, 153, 255, 0.03);
    border: 1px solid rgba(0, 153, 255, 0.15);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

details.faq-item[open] {
    border-color: rgba(0, 153, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 153, 255, 0.1);
    background: rgba(0, 153, 255, 0.05);
}

summary.faq-question {
    padding: 1.5rem;
    cursor: pointer;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}

summary.faq-question::-webkit-details-marker {
    display: none;
}

.faq-answer p {
    padding: 0 1.5rem 1.5rem 1.5rem;
    color: #a3a3a3;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Modules Grid Extra */
.modules-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media(min-width: 768px) {
    .modules-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media(min-width: 1024px) {
    .modules-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.module-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.module-card:hover {
    border-color: rgba(0, 153, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 153, 255, 0.1);
    transform: translateY(-5px);
}

.module-card h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 1rem;
}

.module-card p {
    color: #a3a3a3;
    font-size: 1rem;
    line-height: 1.5;
}

/* Video Grid Extra */
.video-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
}
@media(min-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media(min-width: 1024px) {
    .video-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
.video-card iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 12px;
}

/* Notebook Container */
.laptop-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.laptop-container img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.8);
}

/* TRANSFORM GRID FIX */
.transform-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media(min-width: 1024px) {
    .transform-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* BONUS GRID FIX FOR MOBILE (Smaller cards) */
.bonus-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns on mobile so it's smaller and faster to scroll */
    gap: 1rem;
}
@media(min-width: 768px) {
    .bonus-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.5rem;
    }
}
@media(min-width: 1024px) {
    .bonus-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        gap: 2rem;
    }
}

.bonus-grid .module-card {
    padding: 0;
    border: none;
    aspect-ratio: 1/1;
}

/* Ensure video thumbnail works with the iframe */
#video-container img {
    position: absolute;
    inset: 0;
    z-index: 5;
}
#video-container > div {
    position: absolute;
    inset: 0;
    z-index: 10;
}

/* FIX: BONUS GRID CARDS BIGGER ON DESKTOP */
@media(min-width: 1024px) {
    .bonus-grid {
        /* Change from 5 to 4 columns to make cards bigger */
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
        gap: 2rem;
    }
}

/* FIX: METHOD HEADER ALIGNMENT (Bonus and Modulos titles left on desktop, center on mobile) */
.method-header {
    text-align: center;
}
@media(min-width: 1024px) {
    .method-header {
        text-align: left !important;
    }
}

/* FIX: MENTOR CTA ALIGNMENT (Flex start on desktop so button aligns left with text) */
@media(min-width: 1024px) {
    .about-text {
        align-items: flex-start !important;
        text-align: left !important;
    }
}


/* ==========================================================================
   PAIN SECTION (IDENTIFICAÇÃO DE DOR)
   ========================================================================== */
.pain-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background: #010814;
    border-top: 1px solid rgba(0, 153, 255, 0.15);
    border-bottom: 1px solid rgba(0, 153, 255, 0.15);
}

.pain-content {
    position: relative;
    z-index: 10;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    background: rgba(0, 20, 40, 0.4);
    border: 1px solid rgba(0, 153, 255, 0.2);
    border-radius: 24px;
    padding: 4rem 3rem;
    box-shadow: 0 0 50px rgba(0, 153, 255, 0.05);
    backdrop-filter: blur(10px);
}

.pain-headline {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.6rem;
    line-height: 1.3;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2rem;
}

.pain-divider {
    width: 60px;
    height: 3px;
    background: #00f3ff;
    margin: 0 auto 2rem auto;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0,243,255,0.6);
}

.pain-paragraph {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    line-height: 1.7;
    color: #d1d5db;
    margin-bottom: 1.5rem;
}

.pain-paragraph.secondary {
    font-size: 1.1rem;
    color: #9ca3af;
    font-weight: 500;
    margin-bottom: 2.5rem;
}

/* Responsive adjustments */
@media(max-width: 768px) {
    .pain-section {
        padding: 60px 0;
    }
    .pain-content {
        padding: 2.5rem 1.5rem;
    }
    .pain-headline {
        font-size: 2rem;
    }
    .pain-paragraph {
        font-size: 1.1rem;
    }
    .pain-paragraph.secondary {
        font-size: 1rem;
    }
}

/* ==========================================================================
   PREMIUM PAIN SECTION OVERRIDES
   ========================================================================== */
.pain-content {
    background: linear-gradient(145deg, rgba(2, 10, 22, 0.8) 0%, rgba(1, 5, 12, 0.95) 100%) !important;
    border: 1px solid rgba(0, 153, 255, 0.3) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), inset 0 1px 20px rgba(0, 153, 255, 0.1) !important;
    backdrop-filter: blur(24px) !important;
    position: relative;
    padding-top: 5rem !important; /* Make room for the badge */
}

/* Premium Icon Badge */
.premium-badge-icon {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    background: #010814;
    border: 1px solid rgba(0, 153, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(0, 153, 255, 0.2), inset 0 0 15px rgba(0, 153, 255, 0.1);
}

.pain-headline {
    background: linear-gradient(180deg, #ffffff 0%, #a3a3a3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
    letter-spacing: -0.5px;
}

.pain-paragraph {
    color: #e2e8f0 !important;
    font-weight: 300;
    letter-spacing: 0.3px;
}

.pain-paragraph.secondary {
    color: #94a3b8 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.5px;
}

.pain-content .cta-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 3rem;
}

/* Hover glow for the premium pain button */
.pain-content .btn-midnight-premium {
    position: relative;
    overflow: hidden;
}
.pain-content .btn-midnight-premium::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: rotate(45deg) translateY(-100%);
    transition: transform 0.6s ease;
}
.pain-content .btn-midnight-premium:hover::after {
    transform: rotate(45deg) translateY(100%);
}

/* FORCE CENTER FOR CTA IN PAIN SECTION */
.pain-content .cta-wrapper {
    margin: 3rem auto 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    max-width: none !important; /* Overrides global max-width: 350px if any */
}

/* Ensure the pain section background is visible but blurred */
.pain-section .custom-bg-layer {
    opacity: 0.15 !important;
    filter: blur(5px);
}

/* ==========================================================================
   PREMIUM FEATURES SECTION (MÉTODO DIGITALIZE)
   ========================================================================== */
.method-features-section {
    position: relative;
    padding: 100px 0;
    background: #010814;
    overflow: hidden;
}

.premium-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
    justify-content: center;
}

/* Fix: Show exactly 5 cards side by side on Desktop */
@media(min-width: 1024px) {
    .premium-features-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 20px;
    }
}

.feature-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.4) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, #00f3ff, transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
    border-color: rgba(0, 153, 255, 0.4);
    box-shadow: 0 20px 40px rgba(0,0,0,0.8), 0 0 30px rgba(0,153,255,0.15);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-icon-wrapper {
    width: 70px;
    height: 70px;
    margin: 0 auto 25px auto;
    background: rgba(0, 20, 40, 0.6);
    border: 1px solid rgba(0, 153, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 20px rgba(0, 153, 255, 0.1);
    transition: transform 0.4s ease, background 0.4s ease;
}

.feature-card:hover .feature-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    background: rgba(0, 153, 255, 0.1);
}

.feature-title {
    color: #fff;
    font-size: 1.4rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.feature-text {
    color: #a3a3a3;
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
}


/* ==========================================================================
   GLOBAL SECTION GLOWING DIVIDERS (Efeito de Luz Passando)
   ========================================================================== */
section {
    position: relative;
    border-bottom: 1px solid rgba(0, 153, 255, 0.1);
}

section::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: -200px;
    width: 250px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00f3ff, #fff, #00f3ff, transparent);
    box-shadow: 0 0 15px #00f3ff, 0 0 30px #00f3ff;
    animation: glowing-divider 8s ease-in-out infinite;
    z-index: 50;
    pointer-events: none;
}

/* Stagger animations so they don't all fire at the exact same pixel/time */
section:nth-child(even)::after {
    animation-delay: 2s;
    animation-duration: 10s;
}
section:nth-child(3n)::after {
    animation-delay: 4s;
    animation-duration: 7s;
}

@keyframes glowing-divider {
    0% { left: -300px; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Reduz o padding dos cartões no desktop para caberem 5 na mesma linha tranquilamente */
@media(min-width: 1024px) {
    .feature-card {
        padding: 30px 15px !important;
    }
    .feature-title {
        font-size: 1.15rem !important;
    }
    .feature-text {
        font-size: 0.9rem !important;
    }
}

/* ==========================================================================
   POR QUE ESCOLHER O DIGITALIZE (WHY CHOOSE)
   ========================================================================== */
.why-choose-section {
    position: relative;
    padding: 100px 0;
    background: #010814;
    overflow: hidden;
}

.why-choose-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

@media(min-width: 1024px) {
    .why-choose-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
}

.why-card {
    background: linear-gradient(180deg, rgba(0, 30, 60, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
    border: 1px solid rgba(0, 153, 255, 0.2);
    border-radius: 24px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
}

.why-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at top, rgba(0, 153, 255, 0.1), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.why-card:hover {
    transform: translateY(-10px);
    border-color: rgba(0, 153, 255, 0.5);
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 40px rgba(0,153,255,0.15);
}

.why-card:hover::after {
    opacity: 1;
}

.why-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(0, 20, 40, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    box-shadow: 0 0 20px rgba(0, 153, 255, 0.1), inset 0 0 15px rgba(0, 153, 255, 0.2);
    position: relative;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.why-card:hover .why-icon {
    transform: scale(1.15) translateY(-5px);
    background: rgba(0, 153, 255, 0.1);
}

.why-content {
    position: relative;
    z-index: 2;
}

.why-title {
    color: #fff;
    font-size: 1.6rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.why-text {
    color: #a3a3a3;
    font-size: 1.05rem;
    line-height: 1.6;
    font-weight: 400;
}

/* ==========================================================================
   TRANSFORMAÇÃO PREMIUM CARDS (ANTES E DEPOIS)
   ========================================================================== */

/* Base Premium Card Style */
.card-antes-premium, .card-depois-premium {
    position: relative;
    padding: 40px;
    border-radius: 24px;
    text-align: left;
    backdrop-filter: blur(12px);
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.card-antes-premium::before, .card-depois-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}

/* Specific Antes (Red) */
.card-antes-premium {
    background: linear-gradient(145deg, rgba(30, 0, 0, 0.8) 0%, rgba(10, 0, 0, 0.95) 100%);
    border: 1px solid rgba(255, 0, 0, 0.2);
    box-shadow: 0 10px 30px rgba(255, 0, 0, 0.05), inset 0 0 20px rgba(255, 0, 0, 0.05);
}
.card-antes-premium::before {
    background: radial-gradient(circle at top right, rgba(255, 50, 50, 0.15), transparent 60%);
}
.card-antes-premium:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(255, 0, 0, 0.15), inset 0 0 30px rgba(255, 0, 0, 0.1);
    border-color: rgba(255, 0, 0, 0.5);
}
.card-antes-premium:hover::before {
    opacity: 1;
}

/* Specific Depois (Cyan) */
.card-depois-premium {
    background: linear-gradient(145deg, rgba(0, 20, 40, 0.8) 0%, rgba(1, 8, 20, 0.95) 100%);
    border: 1px solid rgba(0, 153, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 153, 255, 0.05), inset 0 0 20px rgba(0, 153, 255, 0.05);
}
.card-depois-premium::before {
    background: radial-gradient(circle at top right, rgba(0, 153, 255, 0.15), transparent 60%);
}
.card-depois-premium:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 153, 255, 0.15), inset 0 0 30px rgba(0, 153, 255, 0.1);
    border-color: rgba(0, 153, 255, 0.5);
}
.card-depois-premium:hover::before {
    opacity: 1;
}

/* Titles and content inside cards */
.title-antes {
    color: #ff4d4d;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    position: relative;
    z-index: 2;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 77, 77, 0.3);
}

.title-depois {
    color: #00f3ff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    position: relative;
    z-index: 2;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(0, 243, 255, 0.3);
}

.card-antes-premium ul, .card-depois-premium ul {
    position: relative;
    z-index: 2;
}

.card-antes-premium li, .card-depois-premium li {
    font-size: 1.05rem;
    line-height: 1.6;
}


/* ==========================================================================
   DEPOIMENTOS (TESTIMONIALS YOUTUBE)
   ========================================================================== */
.testimonials-section {
    position: relative;
    padding: 100px 0;
    background: #010814;
    overflow: hidden;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 50px auto;
}

@media(min-width: 768px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 COLUMNS (GRIDS) AS REQUESTED */
        gap: 40px;
    }
}

.video-testimonial-card {
    background: linear-gradient(145deg, rgba(0, 20, 40, 0.6) 0%, rgba(0, 5, 15, 0.95) 100%);
    border: 1px solid rgba(0, 153, 255, 0.2);
    border-radius: 20px;
    padding: 15px; /* Creates a frame around the video */
    backdrop-filter: blur(12px);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 153, 255, 0.05);
    position: relative;
}

.video-testimonial-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 153, 255, 0.6);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 153, 255, 0.2);
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Perfect 16:9 Aspect Ratio */
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   CROSSROADS SECTION (DUAS ESCOLHAS)
   ========================================================================== */
.crossroads-section {
    position: relative;
    padding: 100px 0;
    background: #000; /* Pure black for maximum contrast */
    overflow: hidden;
    border-top: 1px solid rgba(0, 153, 255, 0.1);
}

.crossroads-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    max-width: 1050px;
    margin: 0 auto;
    position: relative;
}

@media(min-width: 1024px) {
    .crossroads-grid {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 0;
    }
    
    .crossroad-divider {
        margin: 0 -30px; /* Overlaps the cards */
    }
}

.crossroad-card {
    flex: 1;
    border-radius: 24px;
    padding: 60px 40px 40px 40px;
    position: relative;
    backdrop-filter: blur(12px);
    overflow: hidden;
    transition: transform 0.4s ease;
    width: 100%;
}

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

.crossroad-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    color: #fff;
    padding: 10px 30px;
    border-radius: 0 0 16px 16px;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.9rem;
    z-index: 5;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.crossroad-negative {
    background: linear-gradient(145deg, rgba(30, 0, 0, 0.6) 0%, rgba(10, 0, 0, 0.9) 100%);
    border: 1px solid rgba(255, 50, 50, 0.2);
}
.crossroad-negative .crossroad-badge {
    border: 1px solid rgba(255, 50, 50, 0.3);
    border-top: none;
    color: #ff4d4d;
}

.crossroad-positive {
    background: linear-gradient(145deg, rgba(0, 30, 60, 0.6) 0%, rgba(0, 10, 25, 0.95) 100%);
    border: 1px solid rgba(0, 153, 255, 0.3);
    box-shadow: 0 0 40px rgba(0, 153, 255, 0.1), inset 0 0 20px rgba(0, 153, 255, 0.05);
}
.crossroad-positive .crossroad-badge {
    border: 1px solid rgba(0, 153, 255, 0.4);
    border-top: none;
    color: #00f3ff;
}

.crossroad-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 10px;
}

.crossroad-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    color: #e2e8f0;
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 300;
}

.crossroad-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.divider-text {
    width: 65px;
    height: 65px;
    background: #010814;
    border: 2px solid rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    box-shadow: 0 0 30px rgba(0,0,0,0.9);
}

.crossroad-footer {
    text-align: center;
    margin-top: 80px;
}

.conclusion-text {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.5;
    max-width: 800px;
    margin: 0 auto;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 5px 20px rgba(0,0,0,0.8);
    background: linear-gradient(90deg, #fff, #00f3ff, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   OFFER SECTION (CONDIÇÃO ESPECIAL - PREÇO)
   ========================================================================== */
.offer-section {
    position: relative;
    padding: 80px 0;
    background: #000;
    overflow: hidden;
    border-top: 1px solid rgba(0, 153, 255, 0.1);
}

.offer-card {
    max-width: 500px;
    margin: 0 auto;
    background: linear-gradient(145deg, rgba(0, 20, 40, 0.8) 0%, rgba(1, 8, 20, 0.95) 100%);
    border: 1px solid rgba(0, 153, 255, 0.3);
    border-radius: 30px;
    box-shadow: 0 10px 40px rgba(0, 153, 255, 0.15), inset 0 0 20px rgba(0, 153, 255, 0.05);
    transform: scale(1);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.offer-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 153, 255, 0.6);
    box-shadow: 0 20px 50px rgba(0, 153, 255, 0.25), inset 0 0 30px rgba(0, 153, 255, 0.1);
}

.offer-card-inner {
    padding: 50px 30px;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Mobile adjustments */
@media(max-width: 768px) {
    .offer-card-inner {
        padding: 40px 20px;
    }
    .price-value {
        font-size: 3.5rem !important; /* Smaller text on mobile */
    }
    .offer-benefits li {
        font-size: 1.05rem !important;
    }
    .offer-btn {
        padding: 12px 20px !important; /* Muito mais fino no mobile */
        font-size: 1rem !important; /* Fonte levemente menor para não estufar o botão */
        border-radius: 50px !important;
    }
}

.offer-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at top right, rgba(0, 153, 255, 0.15), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}
.offer-card:hover::before {
    opacity: 1;
}

.price-old {
    color: #ff4d4d;
    font-size: 1.6rem;
    text-decoration: line-through;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}

.price-new {
    color: #fff;
    font-size: 1.2rem;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.price-value {
    display: block;
    font-size: 5rem;
    font-weight: 900;
    color: #00f3ff;
    line-height: 1.1;
    text-shadow: 0 0 30px rgba(0, 153, 255, 0.5);
    margin-top: 5px;
    letter-spacing: -2px;
}

.offer-benefits {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 50px;
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
}

.offer-benefits li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.2rem;
    color: #e2e8f0;
    font-weight: 400;
}

.offer-benefits i {
    color: #00f3ff;
    font-size: 1.8rem;
    filter: drop-shadow(0 0 10px rgba(0,243,255,0.4));
}

.offer-btn {
    background: linear-gradient(90deg, #00f3ff, #0099ff);
    color: #000 !important;
    font-size: 1.15rem;
    padding: 22px 30px;
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    font-weight: 800;
    box-shadow: 0 10px 30px rgba(0, 153, 255, 0.4);
    display: block;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.offer-btn:hover {
    box-shadow: 0 15px 40px rgba(0, 153, 255, 0.6);
    transform: translateY(-3px) scale(1.02);
}

.trust-badge {
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #a3a3a3;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.trust-badge i {
    color: #00f3ff;
    font-size: 1.3rem;
}

/* ==========================================================================
   FOOTER MINIMALISTA
   ========================================================================== */
.premium-footer {
    background: #000;
    padding: 60px 0 40px 0;
    border-top: 1px solid rgba(0, 153, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.premium-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00f3ff, transparent);
    box-shadow: 0 0 20px #00f3ff;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
}

.footer-copy {
    color: #666;
    font-size: 0.9rem;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ==========================================================================
   BACK TO TOP BUTTON
   ========================================================================== */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 20, 40, 0.6);
    border: 1px solid rgba(0, 153, 255, 0.3);
    color: #00f3ff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 20px rgba(0, 153, 255, 0.1);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: rgba(0, 153, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 153, 255, 0.4);
    transform: translateY(-5px);
    border-color: #00f3ff;
}

/* ==========================================================================
   STATIC NEON DIVIDERS (LINHA NEON PARADA)
   ========================================================================== */
section {
    position: relative;
    border-bottom: none !important;
}

section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 10%, rgba(0, 243, 255, 0.4) 50%, transparent 90%);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.6), 0 0 20px rgba(0, 243, 255, 0.2);
    z-index: 50;
    pointer-events: none;
    animation: none !important;
}

/* ==========================================================================
   MINIMALIST PREMIUM CTA BUTTONS (SLIM + NEON SWEEP)
   ========================================================================== */
.btn-midnight-premium {
    background: rgba(0, 24, 48, 0.4) !important;
    border: 1px solid rgba(0, 243, 255, 0.5) !important;
    color: #00f3ff !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    padding: 14px 35px !important; /* SLIMMER PADDING */
    border-radius: 50px !important; /* Pill shaped rounded buttons */
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.1), inset 0 0 10px rgba(0, 243, 255, 0.05) !important;
    backdrop-filter: blur(8px);
    transition: all 0.4s ease !important;
    text-shadow: none !important;
    position: relative;
    overflow: hidden;
}

.btn-midnight-premium::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.6), transparent);
    transform: skewX(-20deg);
    animation: neon-sweep 3.5s infinite ease-in-out;
    pointer-events: none;
}

@keyframes neon-sweep {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

.btn-midnight-premium:hover {
    background: #00f3ff !important;
    color: #000 !important;
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.5) !important;
    border-color: #00f3ff !important;
    transform: translateY(-3px) scale(1.02) !important;
}

.btn-midnight-premium:hover::before {
    display: none; /* Hide sweep on hover since it fills solid */
}

/* Specific styling for the Offer Checkout Button */
.offer-btn {
    background: transparent !important;
    border: 2px solid #00f3ff !important;
    color: #00f3ff !important;
    padding: 16px 40px !important; /* Also slimmed down from 22px */
}
.offer-btn:hover {
    background: #00f3ff !important;
    color: #000 !important;
}


/* ==========================================================================
   GARANTIA PREMIUM MINIMALISTA (AZUL)
   ========================================================================== */
.guarantee-section {
    position: relative;
    padding: 60px 0; /* Menor padding */
    background: #000;
}

.guarantee-card {
    max-width: 600px; /* Mais fino/minimalista */
    margin: 0 auto;
    background: rgba(0, 20, 40, 0.4); /* Fundo mais sutil e escuro */
    border: 1px solid rgba(0, 153, 255, 0.2);
    border-radius: 16px;
    padding: 40px 30px; /* Menos preenchimento interno */
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 153, 255, 0.05);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.guarantee-card::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle at center, rgba(0, 153, 255, 0.05), transparent 60%);
    animation: rotateGlow 25s linear infinite;
    pointer-events: none;
}

.guarantee-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 153, 255, 0.4);
    box-shadow: 0 10px 40px rgba(0, 153, 255, 0.1);
}

.guarantee-icon-wrapper {
    margin-bottom: 20px;
    display: inline-block;
    position: relative;
    z-index: 2;
}

.guarantee-icon-wrapper i {
    font-size: 50px; /* Ícone menor */
    color: #00f3ff; /* Azul Ciano Neon */
    filter: drop-shadow(0 0 15px rgba(0, 243, 255, 0.4));
}

.guarantee-title {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem; /* Fonte menor */
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
}

.guarantee-text {
    color: #a3a3a3; /* Cinza mais elegante */
    font-size: 1rem; /* Fonte menor */
    line-height: 1.6;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   GLOBAL HEADER ALIGNMENT (CENTERED EVERYWHERE EXCEPT HERO)
   ========================================================================== */
section:not(#hero) .method-header,
section:not(#hero) .section-title,
section:not(#hero) .eyebrow-tag,
section:not(#hero) .conclusion-text,
section:not(#hero) .belief-headline,
section:not(#hero) .symptoms-headline,
section:not(#hero) .problem-title,
section:not(#hero) .paradigm-headline,
section:not(#hero) .format-title,
section:not(#hero) .objection-title,
section:not(#hero) .manifesto-headline {
    text-align: center !important;
    justify-content: center !important; /* For flex elements like eyebrow-tag */
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex;
    flex-direction: column;
}

/* Fix display block for normal text elements */
section:not(#hero) .section-title,
section:not(#hero) .conclusion-text,
section:not(#hero) h2.section-title {
    display: block !important;
}

section:not(#hero) .method-header p,
section:not(#hero) .header-subtitle {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   PADRONIZAÇÃO GLOBAL DE FONTES NO MOBILE (HEADLINES E SUBHEADLINES)
   ========================================================================== */
@media (max-width: 768px) {
    /* HEADLINES PADRÃO NO MOBILE */
    section:not(#hero) .method-header .section-title,
    section:not(#hero) h2.section-title,
    section:not(#hero) .belief-headline,
    section:not(#hero) .symptoms-headline,
    section:not(#hero) .problem-title,
    section:not(#hero) .paradigm-headline,
    section:not(#hero) .format-title,
    section:not(#hero) .objection-title,
    section:not(#hero) .manifesto-headline,
    section:not(#hero) .guarantee-title,
    section:not(#hero) h2 {
        font-size: 2.2rem !important;
        line-height: 1.25 !important;
        margin-bottom: 15px !important;
    }

    /* SUBHEADLINES PADRÃO NO MOBILE */
    section:not(#hero) .method-header p,
    section:not(#hero) .belief-header p,
    section:not(#hero) .symptoms-header p,
    section:not(#hero) .header-subtitle,
    section:not(#hero) .guarantee-text {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}


/* ==========================================================================
   AJUSTE DE ALINHAMENTO HERO (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    
}




/* ==========================================================================
   AJUSTE DE ALINHAMENTO HERO INDEPENDENTE (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    .hero-section { margin-top: -20px !important; }
    /* Desce a imagem do expert */
    .hero-visual {
        margin-top: 30px !important;
    }
    
    /* Sobe os textos (Logo, Headline, CTA) para mais perto da imagem */
    .hero-content {
        margin-top: -140px !important;
        position: relative;
        z-index: 10; /* Garante que o texto fique por cima se houver sobreposição */
    }
}




/* ==========================================================================
   AJUSTE DE ALINHAMENTO HERO (DESKTOP)
   ========================================================================== */
@media (min-width: 769px) {
    .hero-section {
        margin-top: -20px !important;
    }
}

/* ==========================================================================
   DESTAQUE "MESMO SEM EXPERIÊNCIA" (HERO)
   ========================================================================== */
.hero-badge-highlight {
    display: inline-block;
    background: linear-gradient(90deg, rgba(0, 243, 255, 0.15) 0%, rgba(0, 153, 255, 0.05) 100%);
    border: 1px solid rgba(0, 243, 255, 0.5);
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 700;
    color: #fff;
    font-style: normal; /* Tira o itálico do texto pai */
    font-size: 1.15rem;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.3), inset 0 0 10px rgba(0, 243, 255, 0.2);
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
    letter-spacing: 0.5px;
    margin-top: 5px;
    transition: all 0.3s ease;
}

.hero-badge-highlight:hover {
    background: rgba(0, 243, 255, 0.25);
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.5);
    transform: scale(1.05);
}

/* ==========================================================================
   AJUSTE DE ALINHAMENTO ESPECÍFICO - QUEM SOU (MENTOR)
   ========================================================================== */
#quem-sou .about-text,
#quem-sou .section-title,
#quem-sou .eyebrow-tag,
#quem-sou .about-bio,
#quem-sou .about-list li {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
}

/* O CTA precisa ficar centralizado */
#quem-sou .universal-cta-wrapper {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 40px !important;
}

/* Para celular, vamos manter o alinhamento centralizado ou forçar a esquerda?
   Normalmente, no mobile, centralizado fica melhor, mas o usuário pediu "na área conhece seu mentor o cta centralize no meio e o textos e titulo a esquera".
   Vou aplicar a esquerda para todos, pois ele especificou. */
@media (max-width: 768px) {
    #quem-sou .about-text,
    #quem-sou .section-title,
    #quem-sou .eyebrow-tag,
    #quem-sou .about-bio {
        text-align: left !important;
        align-items: flex-start !important;
    }
}

/* ==========================================================================
   CORREÇÃO DEFINITIVA DE ALINHAMENTO - QUEM SOU (MENTOR)
   ========================================================================== */
#quem-sou .about-text {
    text-align: left !important;
}

#quem-sou .section-title,
#quem-sou h2.section-title {
    text-align: left !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
}

#quem-sou .eyebrow-tag {
    display: inline-block !important;
    text-align: left !important;
    margin-left: 0 !important;
}

#quem-sou .about-bio,
#quem-sou p {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

@media (max-width: 768px) {
    #quem-sou .section-title,
    #quem-sou .eyebrow-tag,
    #quem-sou .about-bio,
    #quem-sou p {
        text-align: left !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   EFEITO PREMIUM LUZ PASSANDO (MÓDULOS)
   ========================================================================== */
.module-card {
    position: relative;
    overflow: hidden;
    /* Adding a subtle border and background since inline styles made it transparent */
    background: linear-gradient(145deg, rgba(0, 20, 40, 0.4) 0%, rgba(0, 5, 10, 0.8) 100%) !important;
    border: 1px solid rgba(0, 243, 255, 0.15) !important;
    border-radius: 20px !important;
}

/* O feixe de luz passando */
.module-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(0, 243, 255, 0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    animation: sweepLight 6s infinite;
    z-index: 10;
    pointer-events: none;
}

/* Atrasos diferentes para o feixe não passar em todos ao mesmo tempo */
.delay-1::before { animation-delay: 0s; }
.delay-2::before { animation-delay: 1s; }
.delay-3::before { animation-delay: 2s; }
.delay-4::before { animation-delay: 0.5s; }
.delay-5::before { animation-delay: 1.5s; }
.delay-6::before { animation-delay: 2.5s; }

@keyframes sweepLight {
    0% { left: -150%; }
    20% { left: 200%; }
    100% { left: 200%; } /* Fica invisível o resto do tempo */
}

/* Efeito Hover Premium */
.module-card:hover {
    border-color: rgba(0, 243, 255, 0.6) !important;
    box-shadow: 0 10px 40px rgba(0, 243, 255, 0.2), inset 0 0 20px rgba(0, 243, 255, 0.1) !important;
    transform: translateY(-5px) !important;
}

/* ==========================================================================
   SESSÃO BÔNUS 19 (MINIMALISTA E PREMIUM)
   ========================================================================== */
.bonus-minimalist-section {
    position: relative;
    padding: 100px 0;
    background: #020202; /* Fundo hiper escuro */
    border-top: 1px solid rgba(0, 243, 255, 0.05);
}

.bonus-minimal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 50px;
    background: linear-gradient(145deg, rgba(0, 20, 40, 0.3) 0%, rgba(0, 0, 0, 0.8) 100%);
    border: 1px solid rgba(0, 243, 255, 0.15);
    border-radius: 24px;
    padding: 40px;
    align-items: center;
    backdrop-filter: blur(10px);
}

@media(min-width: 1024px) {
    .bonus-minimal-grid {
        grid-template-columns: 0.8fr 1.2fr;
        gap: 60px;
        padding: 50px;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Imagem Visual */
.bonus-visual {
    display: flex;
    justify-content: center;
}

.bonus-img-wrapper {
    position: relative;
    width: 100%;
    max-width: 350px;
    border-radius: 16px;
}

.bonus-cover-img {
    width: 100%;
    border-radius: 12px;
    position: relative;
    z-index: 5;
    box-shadow: 0 20px 40px rgba(0,0,0,0.8);
    transition: transform 0.5s ease;
}

.bonus-minimal-grid:hover .bonus-cover-img {
    transform: translateY(-10px) scale(1.02);
}

.bonus-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(0, 243, 255, 0.3) 0%, transparent 70%);
    filter: blur(40px);
    z-index: 1;
}

/* Conteúdo Textual */
.bonus-content {
    text-align: left;
}

.bonus-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 243, 255, 0.1);
    border: 1px solid rgba(0, 243, 255, 0.3);
    padding: 6px 14px;
    border-radius: 50px;
    color: #00f3ff;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.bonus-headline {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 15px;
    line-height: 1.2;
}

.bonus-desc {
    color: #a3a3a3;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.bonus-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.bonus-checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 1rem;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.02);
    padding: 10px 15px;
    border-radius: 8px;
    border-left: 2px solid rgba(0, 243, 255, 0.3);
}

.bonus-checklist li i {
    color: #00f3ff;
    font-size: 1.2rem;
}

.bonus-price-tag {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

.bonus-price-label {
    color: #888;
    font-size: 0.9rem;
}

.bonus-price-strike {
    color: #ff4d4d;
    text-decoration: line-through;
    font-size: 1.1rem;
    font-weight: 600;
}

.bonus-price-free {
    color: #00f3ff;
    font-size: 1.3rem;
    font-weight: 800;
    text-shadow: 0 0 15px rgba(0, 243, 255, 0.4);
}

@media(max-width: 768px) {
    .bonus-minimal-grid {
        padding: 30px 20px;
    }
    .bonus-headline {
        font-size: 1.6rem;
    }
    .bonus-checklist li {
        font-size: 0.9rem;
        padding: 8px 12px;
    }
    .bonus-price-tag {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   CARROSSEL PREMIUM (BÔNUS 14)
   ========================================================================== */
.bonus-carousel-section {
    position: relative;
    padding: 100px 0;
    background: radial-gradient(circle at center, rgba(0, 153, 255, 0.15) 0%, #020202 70%);
    border-top: 1px solid rgba(0, 243, 255, 0.05);
    overflow: hidden;
}

.carousel-container {
    width: 100%;
    overflow: hidden;
    margin-top: 60px;
    position: relative;
    padding: 40px 0;
}

/* Degradê nas laterais para não cortar a imagem do nada (Efeito luxo) */
.carousel-container::before,
.carousel-container::after {
    content: '';
    position: absolute;
    top: 0;
    width: 20%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.carousel-container::before {
    left: 0;
    background: linear-gradient(to right, #020202 0%, transparent 100%);
}

.carousel-container::after {
    right: 0;
    background: linear-gradient(to left, #020202 0%, transparent 100%);
}

.carousel-track {
    display: flex;
    gap: 40px;
    width: max-content;
    animation: scrollCarousel 45s linear infinite;
}

/* O usuário pode pausar a animação apenas passando o mouse */
.carousel-track:hover {
    animation-play-state: paused;
}

.carousel-cover {
    width: 320px;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.8), 0 0 0 1px rgba(0, 243, 255, 0.1);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    cursor: grab;
}

.carousel-cover:hover {
    transform: translateY(-20px) scale(1.05);
    box-shadow: 0 30px 60px rgba(0, 243, 255, 0.25), 0 0 0 2px rgba(0, 243, 255, 0.5);
    z-index: 10;
}

.carousel-cover:active {
    cursor: grabbing;
}

/* Metade exata, já que são 28 itens no total (14 originais + 14 clones) com 40px de gap */
@keyframes scrollCarousel {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 20px)); } 
}

@media(max-width: 768px) {
    .carousel-cover { width: 240px; border-radius: 16px; }
    .carousel-container::before, .carousel-container::after { width: 15%; }
    .carousel-track { gap: 20px; animation-duration: 30s; }
    @keyframes scrollCarousel {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-50% - 10px)); } 
    }
}


/* ==========================================================================
   MÓDULOS PREMIUM (DESIGN LUXO)
   ========================================================================== */
.premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.premium-module {
    position: relative;
    background: linear-gradient(180deg, rgba(0, 20, 40, 0.4) 0%, rgba(0, 5, 10, 0.9) 100%) !important;
    border: 1px solid rgba(0, 243, 255, 0.2) !important;
    border-radius: 20px !important;
    padding: 30px 20px 20px 20px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5), inset 0 2px 20px rgba(0, 243, 255, 0.05);
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    overflow: hidden;
}

.premium-module:hover {
    transform: translateY(-10px) !important;
    border-color: rgba(0, 243, 255, 0.6) !important;
    box-shadow: 0 20px 40px rgba(0, 243, 255, 0.2), inset 0 2px 30px rgba(0, 243, 255, 0.1);
}

.module-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(0, 153, 255, 0.8) 0%, rgba(0, 243, 255, 0.8) 100%);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 5px 20px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 5px 15px rgba(0, 243, 255, 0.4);
    z-index: 5;
}

.module-img-container {
    width: 100%;
    margin-top: 15px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 20px rgba(0,0,0,0.6);
}

.module-cover {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    transition: transform 0.5s ease;
}

.premium-module:hover .module-cover {
    transform: scale(1.05);
}

/* O feixe de luz que criei antes agora vai brilhar perfeitamente sobre a caixa escura */

/* ==========================================================================
   CORREÇÃO FAQ MOBILE (TEXTO CORTANDO)
   ========================================================================== */
/* Garante que a resposta cresça o quanto for necessário sem cortar (max-height) */
details.faq-item .faq-answer,
details.faq-item[open] .faq-answer {
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    padding-bottom: 25px !important;
}

/* Garante que a pergunta do FAQ possa quebrar de linha no mobile sem cortar a tela */
summary.faq-question {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important; /* Ajuda a não centralizar bizarro se o texto for muito longo */
    gap: 15px !important;
    word-break: break-word !important; /* Quebra palavras muito longas se necessário */
    white-space: normal !important; /* Permite múltiplas linhas */
}

/* O '+' não pode ser esmagado pelo texto */
summary.faq-question span {
    flex-shrink: 0 !important;
    margin-top: 2px; /* Alinha o + com a primeira linha */
}

@media (max-width: 768px) {
    summary.faq-question {
        font-size: 1.15rem !important; /* Reduz a fonte levemente no mobile para caber melhor */
        padding: 20px 15px !important;
    }
    .faq-answer p {
        font-size: 1rem !important;
        padding: 0 15px 15px 15px !important;
    }
}

/* ==========================================================================
   FAIXA EM MOVIMENTO (MARQUEE DIGITALIZE)
   ========================================================================== */
.digitalize-marquee-wrapper {
    width: 100%;
    background: linear-gradient(90deg, #020202 0%, rgba(0, 153, 255, 0.1) 50%, #020202 100%);
    border-top: 1px solid rgba(0, 243, 255, 0.1);
    border-bottom: 1px solid rgba(0, 243, 255, 0.1);
    padding: 15px 0;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.digitalize-marquee {
    display: flex;
    gap: 40px;
    animation: marqueeScroll 25s linear infinite;
    will-change: transform;
}

.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #a3a3a3;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.marquee-item i {
    color: #00f3ff;
    font-size: 1.5rem;
    filter: drop-shadow(0 0 8px rgba(0, 243, 255, 0.6));
}

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 20px)); } /* 50% é exatamente um grupo completo. 20px compensa metade do gap */
}

@media(max-width: 768px) {
    .digitalize-marquee-wrapper {
        padding: 10px 0;
    }
    .marquee-item {
        font-size: 0.9rem;
    }
    .marquee-item i {
        font-size: 1.2rem;
    }
}

/* Ajuste específico para a faixa no topo absoluto */
.digitalize-marquee-wrapper.top-marquee {
    margin-top: 0 !important;
    padding: 8px 0;
    border-top: none;
    background: #010814;
    border-bottom: 1px solid rgba(0, 243, 255, 0.2);
    position: relative;
    z-index: 999;
}


/* ==========================================================================
   CORREÇÃO DEFINITIVA FAIXA FIXA E MARGEM HERO MOBILE
   ========================================================================== */
.digitalize-marquee-wrapper.top-marquee {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
}

body {
    padding-top: 40px !important;
}

@media (max-width: 768px) {
    body {
        padding-top: 35px !important;
    }
    
    /* Sobe toda a sessão inicial no mobile mais 20px */
    .hero-grid {
        margin-top: -50px !important; 
    }
}