/* ==========================================================================
   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: #003258; 
    --brand-light: #004e8a;
    
    /* 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: linear-gradient(180deg, #000508 0%, var(--brand-blue) 45%, #000508 100%);
    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; z-index: 2;
    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%; /* Deixa espaço lateral */
        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-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;
    }
}