/* ==========================================================================
   LU LAGE - BLACK ABSOLUTE (VERSÃO 2.0 - RESPONSIVIDADE TOTAL)
   ========================================================================== */

/* =========================================
   1. BASE E VARIÁVEIS
   ========================================= */
:root {
    --black-base: #0a0a0a;
    --black-deep: #030303;
    --black-light: #171717;
    --gold: #D4AF37;
    --gold-light: #F3E5AB;
    --gold-gradient: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7);
    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Montserrat', sans-serif;
}

html, body {
    margin: 0; padding: 0; box-sizing: border-box;
    background-color: var(--black-deep);
    font-family: var(--font-sans);
    color: #fff;
    overflow-x: hidden; /* Impede rolagem horizontal indesejada */
    scroll-behavior: smooth;
    width: 100%;
}

*, *::before, *::after { box-sizing: inherit; }

/* =========================================
   2. ESTRUTURA GLOBAL E GRADES (O ESQUELETO)
   ========================================= */
.premium-section {
    position: relative;
    width: 100%;
    padding: 100px 0; /* Respiro padrão Desktop */
    display: block; /* Trocado de flex para block para evitar esmagamento de conteúdo */
    background-color: var(--black-deep);
    overflow: hidden; /* Contém os brilhos absolutos */
}

.container { 
    width: 100%; 
    max-width: 1200px; /* Um pouco mais largo para respirar o grid */
    margin: 0 auto; 
    padding: 0 30px; 
    position: relative; 
    z-index: 10; 
}

/* Sistema de Grid Responsivo */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
}

.premium-asymmetric-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr; 
    gap: 40px;
    align-items: center;
}

/* =========================================
   3. FUNDOS, PARALLAX E LUZES
   ========================================= */
.bg-parallax {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax Desktop */
    z-index: 0;
}

.overlay-black {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(3, 3, 3, 0.88) 0%, rgba(10, 10, 10, 0.80) 100%);
    z-index: 2;
}

/* Fades de transição super suaves */
.section-fade-top, .section-fade-bottom {
    position: absolute; left: 0; width: 100%; height: 120px; z-index: 5; pointer-events: none;
}
.section-fade-top { top: -1px; background: linear-gradient(to bottom, var(--black-deep) 0%, transparent 100%); }
.section-fade-bottom { bottom: -1px; background: linear-gradient(to top, var(--black-deep) 0%, transparent 100%); }

.gold-ambient-glow {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 70%);
    z-index: 1; pointer-events: none;
}

/* =========================================
   4. TIPOGRAFIA E UTILITÁRIOS (COM CLAMP PARA SCALING)
   ========================================= */
.text-left { text-align: left; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-800 { max-width: 800px; }
.mt-3 { margin-top: 15px; } .mt-4 { margin-top: 25px; } .mt-5 { margin-top: 50px; }
.mb-3 { margin-bottom: 15px; } .mb-4 { margin-bottom: 25px; } .mb-5 { margin-bottom: 40px; }
.relative-z { position: relative; z-index: 10; }
.inline-block { display: inline-block; }

/* Fontes fluidas que se ajustam sozinhas */
.title-section { font-family: var(--font-serif); font-size: clamp(2.2rem, 4vw, 3.5rem); color: #fff; line-height: 1.15; }
.subtitle { font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.6; color: rgba(255, 255, 255, 0.9); font-weight: 300; }
.text-body { font-size: 1.05rem; line-height: 1.7; color: rgba(255, 255, 255, 0.85); font-weight: 300; }
.text-small { font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.75); }

.gold-text { background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; }
.gold-text-serif { font-family: var(--font-serif); font-weight: 700; font-style: italic; font-size: clamp(1.8rem, 3vw, 2.5rem); background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block; margin-top: 5px; }
.gold-highlight { color: var(--gold); font-weight: 600; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }

/* =========================================
   5. COMPONENTES PREMIUM (CARDS E BOTÕES)
   ========================================= */
/* Obsidian Card Base */
.obsidian-card {
    position: relative;
    background: linear-gradient(145deg, rgba(12, 12, 12, 0.9), rgba(2, 2, 2, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 4px; 
    padding: 45px 35px;
    z-index: 2;
    box-shadow: 0 20px 40px rgba(0,0,0,0.8), inset 0 1px 10px rgba(255,255,255,0.02);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: flex; flex-direction: column; height: 100%;
}
.obsidian-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0,0,0,0.95), inset 0 1px 15px rgba(212, 175, 55, 0.05); }

.obsidian-card.border-red { border-top: 2px solid rgba(255, 77, 77, 0.3); }
.obsidian-card.border-gold { border-top: 2px solid var(--gold); }

.card-icon-header { display: flex; align-items: center; gap: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 20px; }
.card-label-small { font-size: 0.75rem; font-weight: 700; letter-spacing: 3px; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; }

/* Botão Gold Lu */
.btn-gold-lu {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    padding: 20px 45px; background: var(--gold-gradient); color: var(--black-deep);
    font-family: var(--font-sans); font-size: 1.05rem; font-weight: 700; text-decoration: none;
    letter-spacing: 1.5px; border-radius: 4px; overflow: hidden; transition: all 0.4s ease;
}
.btn-gold-lu:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 15px 30px rgba(212, 175, 55, 0.5); }
.btn-glow-inner { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); transform: skewX(-20deg); animation: shine 3s infinite; }

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

/* Divisor de Luxo */
.luxury-divider { display: flex; align-items: center; justify-content: center; width: 100%; padding: 30px 0; position: relative; z-index: 20; background-color: var(--black-deep); }
.luxury-divider::before, .luxury-divider::after { content: ''; height: 1px; flex: 1; max-width: 250px; }
.luxury-divider::before { background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.5) 100%); }
.luxury-divider::after { background: linear-gradient(270deg, transparent 0%, rgba(212, 175, 55, 0.5) 100%); }
.divider-symbol { color: var(--gold); font-size: 1.2rem; margin: 0 20px; filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.8)); animation: floatDiamond 4s ease-in-out infinite; }
@keyframes floatDiamond { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* =========================================
   6. ANIMAÇÕES GSAP E MOVIMENTO
   ========================================= */
.gs-blur-reveal {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(30px);
    will-change: opacity, transform;
}

.push-up-desktop { transform: translateY(-30px); }

/* Borda Animada (Confronto) */
.animated-gold-border { position: relative; overflow: hidden; padding: 2px; border: none !important; }
.animated-gold-border::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(transparent, transparent, transparent, var(--gold)); animation: rotateLight 5s linear infinite; z-index: 1; }
.animated-gold-border::after { content: ''; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; background: var(--black-deep); border-radius: 4px; z-index: 2; }
.card-inner-content { position: relative; z-index: 5; padding: 45px 35px; height: 100%; display: flex; flex-direction: column; }
@keyframes rotateLight { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.pulse-icon { animation: pulseGoldIcon 2s infinite alternate; }
@keyframes pulseGoldIcon { 0% { filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.4)); transform: scale(1); } 100% { filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.9)); transform: scale(1.1); } }
.floating-slow { animation: floatSlow 6s ease-in-out infinite; }
@keyframes floatSlow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* =========================================
   7. SEÇÕES ESPECÍFICAS
   ========================================= */
/* Hero V2 */
.hero-section.v2-black { padding-top: 100px; padding-bottom: 80px; min-height: 100vh; display: flex; align-items: center; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 30px; align-items: center; }
.expert-tag { display: flex; align-items: center; gap: 15px; font-size: 0.85rem; color: var(--gold-light); text-transform: uppercase; letter-spacing: 3px; font-weight: 600; margin-bottom: 20px; }
.line-gold { width: 40px; height: 1px; background: var(--gold); }
.hero-content-group .action-btn-container { width: 100%; }

.gold-marquee-container { position: absolute; bottom: 0; left: 0; width: 100%; background: var(--gold-gradient); padding: 12px 0; z-index: 20; display: flex; overflow: hidden; }
.marquee-content { display: flex; align-items: center; width: max-content; animation: scrollMarquee 30s linear infinite; }
.marquee-item { color: var(--black-deep); font-weight: 700; font-size: 0.9rem; letter-spacing: 2px; padding: 0 30px; white-space: nowrap; }
@keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Verdades / Transformações */
.transformation-box { background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(212, 175, 55, 0.1); border-radius: 4px; padding: 25px; margin-top: auto; }
.transform-list { list-style: none; padding: 0; margin: 0; }
.transform-list li { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 0.9rem; border-bottom: 1px dashed rgba(255, 255, 255, 0.05); padding-bottom: 10px; }
.transform-list li:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.transform-list .from { color: rgba(255, 255, 255, 0.5); flex: 1; text-align: left; }
.transform-list .to { color: #fff; font-weight: 600; flex: 1; text-align: right; }
.gold-icon { color: var(--gold); margin: 0 10px; font-size: 1.1rem; }

/* Manifesto */
.manifesto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.manifesto-list { list-style: none; padding: 0; margin: 0; }
.manifesto-list li { display: flex; align-items: flex-start; margin-bottom: 15px; font-size: 1.05rem; color: rgba(255,255,255,0.9); line-height: 1.4; }
.gold-icon-list { color: var(--gold); font-size: 1.2rem; margin-right: 12px; }

/* =========================================
   8. CENTRAL DE BACKGROUNDS
   ========================================= */
.bg-img-hero { background-image: url('img/fundo.png'); }
.bg-img-historia { background-image: url('img/fundo2.png'); } 
.bg-img-custo { background-image: url('img/fundo3.png'); }
.bg-img-visto { background-image: url('img/fundo4.png'); }
.bg-img-verdades { background-image: url('img/fundo5.png'); }
.bg-img-movimento { background-image: url('img/fundo6.png'); }


/* ==========================================================================
   BLINDAGEM MOBILE & TABLET (RESPONSIVIDADE GARANTIDA)
   ========================================================================== */
@media (max-width: 960px) {
    /* 1. CORREÇÃO DO PARALLAX (Salva as imagens de sumirem ou travarem o iOS) */
    .bg-parallax {
        background-attachment: scroll !important; /* Desliga o fixo */
        background-position: center top !important;
        /* Força aceleração de hardware */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* 2. ESPAÇAMENTOS E CONTAINERS */
    .premium-section { padding: 60px 0 !important; min-height: auto !important; }
    .hero-section.v2-black { padding-top: 80px; padding-bottom: 60px; min-height: auto; }
    .container { padding: 0 20px; } /* Evita bater na borda da tela */

    /* 3. COLAPSO DAS GRADES (Tudo vira 1 coluna) */
    .grid-2, 
    .premium-asymmetric-grid, 
    .hero-grid,
    .manifesto-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* 4. RESET DE ASSIMETRIA E HOVERS */
    .push-up-desktop { transform: none !important; }
    .obsidian-card:hover { transform: none !important; box-shadow: 0 10px 30px rgba(0,0,0,0.8); }

    /* 5. AJUSTES INTERNOS (Cards e Alinhamentos) */
    .obsidian-card, .card-inner-content { padding: 30px 20px !important; }
    .hero-content-group { align-items: center; text-align: center; }
    .expert-tag, .hero-content-group .action-btn-container { justify-content: center !important; align-items: center !important; }
    
    /* 6. SETAS DA TRANSFORMAÇÃO */
    .transform-list li { flex-direction: column; text-align: center; gap: 8px; }
    .transform-list .from, .transform-list .to { text-align: center !important; }
    .gold-icon { transform: rotate(90deg); margin: 5px 0; }

    /* 7. TEXTOS E BOTÕES */
    .btn-gold-lu { width: 100%; font-size: 1rem; padding: 18px 20px; }
    .marquee-item { font-size: 0.8rem; padding: 0 20px; }
    .gold-ambient-glow { width: 100vw; height: 100vw; opacity: 0.3 !important; }
    
    /* Troca as imagens para mobile caso existam na pasta */
    .bg-img-hero { background-image: url('img/hero-mobile.png'); }
    .bg-img-historia { background-image: url('img/fundo2-mobile.png'); }
    .bg-img-custo { background-image: url('img/fundo3-mobile.png'); }
    .bg-img-visto { background-image: url('img/fundo4-mobile.png'); }
    .bg-img-verdades { background-image: url('img/fundo5-mobile.png'); }
    .bg-img-movimento { background-image: url('img/fundo6-mobile.png'); }
}

/* =========================================
   RESTAURAÇÃO DA SEÇÃO HERO (V2)
   ========================================= */
.hero-bg-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.hero-container { padding-top: 0; padding-bottom: 40px; z-index: 10; width: 100%; }

/* Efeitos Visuais e Marca D'água */
.bg-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-serif); font-size: 16vw; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.03); font-weight: 700; z-index: 2; white-space: nowrap; user-select: none; }
.hero-bottom-shadow-black { position: absolute; bottom: 0; left: 0; width: 100%; height: 200px; background: linear-gradient(to top, var(--black-deep) 0%, transparent 100%); z-index: 15; pointer-events: none; }

/* Textos da Hero */
.content-col { z-index: 20; }
.hero-content-group { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.headline-main { font-family: var(--font-serif); font-size: clamp(2.5rem, 4.5vw, 4.2rem); line-height: 1.1; margin-bottom: 20px; font-weight: 600; color: #fff; }
.hero-subhead { font-size: 1.15rem; line-height: 1.7; color: rgba(255, 255, 255, 0.85); max-width: 600px; margin-bottom: 30px; font-weight: 300; }

/* Botão e Indicador de Confiança */
.hero-content-group .action-btn-container { align-items: flex-start; justify-content: flex-start; width: 100%; }
.trust-indicator { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: rgba(212, 175, 55, 0.9); font-weight: 500; margin-top: 15px; }

/* Foto da Especialista */
.image-col { position: relative; display: flex; justify-content: flex-end; z-index: 10; }
.image-wrapper { position: relative; width: 100%; max-width: 500px; }
.expert-photo { width: 100%; height: auto; mask-image: linear-gradient(to bottom, black 70%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%); filter: drop-shadow(-10px 10px 30px rgba(0,0,0,0.6)); }

/* =========================================
   RESPONSIVIDADE ESPECÍFICA DA HERO (MOBILE)
   ========================================= */
@media (max-width: 960px) {
    /* Ordenação: Foto em cima, Texto embaixo */
    .mobile-order-1 { order: 1; justify-content: center; margin-bottom: -40px; }
    .mobile-order-2 { order: 2; z-index: 20; }
    
    .image-wrapper { max-width: 320px; margin: 0 auto; }
    
    /* Centraliza os textos e botão no celular */
    .headline-main { font-size: 2.2rem; }
    .hero-subhead { font-size: 1.05rem; margin: 0 auto 25px; padding: 0 10px; }
    .hero-content-group .action-btn-container { justify-content: center !important; }
    .trust-indicator { justify-content: center !important; }
}

/* =========================================
   CORREÇÃO DA FAIXA DOURADA NO RODAPÉ DA HERO
   ========================================= */

/* Garante que a Hero segure a faixa e tenha espaço para ela */
.hero-section.v2-black {
    position: relative !important; 
    overflow: hidden;
    padding-bottom: 90px !important; /* Reserva o espaço exato da faixa no PC */
}

/* Crava a faixa no fundo absoluto da seção */
.gold-marquee-container {
    position: absolute !important;
    bottom: 0 !important; 
    left: 0 !important; 
    width: 100% !important;
    z-index: 30 !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.8); /* Sombra elegante separando do botão */
}

/* No celular, o conteúdo empilha, então damos um respiro maior */
@media (max-width: 960px) {
    .hero-section.v2-black {
        padding-bottom: 120px !important; /* Espaço de segurança extra no mobile */
    }
    
    .gold-marquee-container {
        padding: 12px 0 !important; /* Deixa a faixa um pouco mais fina no celular */
    }
}
/* ==========================================================================
   SEÇÃO 8: OS 5 PILARES (ALTA PERFORMANCE E ALINHAMENTO PERFEITO)
   ========================================================================== */

.bg-img-pilares { background-image: url('img/fundo7.png'); }

/* Container Flexível: 3 em cima, 2 centralizados embaixo */
.pillars-grid-v2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch; /* Garante mesma altura pros cards da mesma linha */
    gap: 30px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

/* Card Otimizado (Sem transparências pesadas) */
.obsidian-pillar-card {
    position: relative;
    width: calc(33.333% - 20px); 
    background: linear-gradient(145deg, #121212, #050505); /* Cores hex sólidas = zero lag */
    border: 1px solid #1a1a1a; 
    border-top: 3px solid var(--gold); 
    border-radius: 6px;
    padding: 35px 25px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    /* Aceleração de Hardware para rolagem lisa */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.obsidian-pillar-card:hover {
    transform: translateY(-5px);
    border-top-color: #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.95);
}

/* Número Gigante (Marca D'água) */
.pillar-watermark {
    position: absolute;
    right: 15px;
    bottom: -15px;
    font-family: var(--font-serif);
    font-size: 8rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.04); /* Sutil, mas visível sobre o fundo escuro */
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

/* Organização Interna */
.pillar-content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pillar-title-v2 {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 5px;
}

.pillar-main-name {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.pillar-body-v2 {
    flex-grow: 1; /* O segredo do alinhamento: empurra a caixa pro fundo */
    display: flex;
    flex-direction: column;
}

.pillar-body-v2 p {
    line-height: 1.6;
}

.text-red { color: #ff6b6b; font-weight: 700; margin-right: 5px; }

/* Caixa de Resultado no Rodapé */
.pillar-result-mini {
    background: #1a1508; /* Hex sólido para não pesar */
    border-left: 2px solid var(--gold);
    padding: 15px;
    margin-top: auto; /* Cola no chão do card */
    border-radius: 0 4px 4px 0;
}

.pillar-result-mini .card-label-small {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 5px;
    color: var(--gold);
}

/* ==========================================================================
   RESPONSIVIDADE DOS PILARES
   ========================================================================== */
@media (max-width: 960px) {
    .bg-img-pilares { background-image: url('img/fundo7-mobile.png'); }
    
    /* Tablet: 2 cards por linha */
    .obsidian-pillar-card {
        width: calc(50% - 15px); 
    }
}

@media (max-width: 650px) {
    /* Celular: 1 card por linha, perfeitamente centralizado */
    .pillars-grid-v2 {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }
    
    .obsidian-pillar-card {
        width: 100%; 
        max-width: 400px;
        padding: 30px 20px;
    }
    
    .pillar-watermark {
        font-size: 7rem;
    }
}

/* ==========================================================================
   IMAGEM DE FUNDO E GARANTIA CTA (SECÇÃO PILARES)
   ========================================================================== */

/* Fundo da Secção Desktop */
.bg-img-pilares { 
    background-image: url('img/fundo7.png'); 
    background-size: cover;
    background-position: center;
}

@media (max-width: 960px) {
    /* Fundo da Secção Mobile (Telemóvel) */
    .bg-img-pilares { 
        background-image: url('img/fundo7-mobile.png'); 
        background-attachment: scroll !important; /* Evita que a imagem desapareça no iOS */
    }
    
    /* Garantia absoluta de visibilidade do Botão CTA no Telemóvel */
    #os-pilares .action-btn-container {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        display: flex !important;
        justify-content: center !important;
        width: 100%;
        margin-top: 40px !important;
        padding-bottom: 30px !important;
    }
}

/* ==========================================================================
   SEÇÃO 9: PARA QUEM É (CHECKLIST DE LUXO)
   ========================================================================== */

/* Fundo da Seção Desktop */
.bg-img-paravoce { 
    background-image: url('img/fundo8.png'); 
    background-size: cover;
    background-position: center;
}

/* A Grade do Checklist (2 colunas alinhadas) */
.checklist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 40px; /* 30px vertical, 40px horizontal */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* O Item da Lista */
.checklist-grid li {
    display: flex;
    align-items: flex-start;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Efeito de leitura (Ao passar o mouse, o item acende) */
.checklist-grid li:hover {
    transform: translateX(8px);
    color: #fff;
}

/* O Ícone de Verificação (Selo Dourado) */
/* O Ícone de Verificação (Selo Dourado Joalheria) */
.gold-icon-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; /* Tamanho fixo perfeito para não distorcer */
    height: 28px; /* Altura exata */
    color: var(--black-deep);
    background: var(--gold-gradient);
    border-radius: 50%;
    font-size: 1.15rem; /* Um pouco maior e mais legível */
    font-weight: bold; /* Deixa o traço do check mais firme */
    margin-right: 15px;
    margin-top: -2px; /* Alinhamento ótico perfeito com o texto */
    /* Sombra externa + Brilho interno (Efeito 3D de Joia) */
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
    
    /* Força o navegador a desenhar o ícone em Altíssima Resolução */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateZ(0); /* Aceleração de hardware */
}

/* ==========================================================================
   RESPONSIVIDADE DA SEÇÃO 9 (MOBILE)
   ========================================================================== */
@media (max-width: 960px) {
    /* Troca a imagem para a versão Mobile e trava o Parallax no iOS */
    .bg-img-paravoce { 
        background-image: url('img/fundo8-mobile.png'); 
        background-attachment: scroll !important; 
    }
    
    /* Transforma a grade de 2 colunas em 1 coluna perfeitamente empilhada */
    .checklist-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Ajuste fino da fonte no celular */
    .checklist-grid li {
        font-size: 0.95rem;
    }
    
    /* Reduz as bordas internas do Painel de Obsidiana no celular */
    #para-quem-e .obsidian-card {
        padding: 40px 25px !important;
    }
    
    /* Desativa o movimento lateral no toque do dedo */
    .checklist-grid li:hover {
        transform: none;
    }
}


/* ==========================================================================
   SEÇÃO 10: QUEM É LU LAGE (DESIGN EDITORIAL BIOGRÁFICO)
   ========================================================================== */

/* Fundo da Seção */
.bg-img-sobre { background-image: url('img/fundo.png'); background-size: cover; background-position: center; }

/* Grid Biográfico (Imagem na esquerda, Texto na direita) */
.bio-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr; /* A imagem ocupa um pouco menos que o texto */
    gap: 60px;
    align-items: center;
}

/* --- COLUNA DA FOTO --- */
.bio-image-col {
    position: relative;
    display: flex;
    justify-content: center;
}

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

.bio-photo {
    width: 100%;
    height: auto;
    object-fit: contain;
    /* Máscara que apaga a foto suavemente na parte de baixo, fundindo com o preto */
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    filter: drop-shadow(-10px 10px 30px rgba(0,0,0,0.8));
}

/* Selo Flutuante sobre a foto */
.floating-badge {
    position: absolute;
    bottom: 40px;
    right: -20px;
    background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.9);
    z-index: 10;
}

.badge-number { font-family: var(--font-serif); font-size: 2.5rem; color: var(--gold); font-weight: 700; line-height: 1; }
.badge-text { font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; color: #fff; text-transform: uppercase; line-height: 1.3; }

/* --- COLUNA DO TEXTO --- */
.bio-content-col {
    text-align: left;
}

/* Linha de Métricas (Os números gigantes) */
.metrics-row {
    display: flex;
    align-items: center;
    gap: 30px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 25px;
}

.metric-item { flex: 1; }

.metric-number { font-size: 3rem !important; margin-top: 0 !important; margin-bottom: 5px; line-height: 1; }
.metric-label { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); line-height: 1.4; font-weight: 500; }

.metric-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.5), transparent);
}

/* ==========================================================================
   RESPONSIVIDADE (MOBILE & TABLET)
   ========================================================================== */
@media (max-width: 960px) {
    .bg-img-sobre { 
        background-image: url('img/fundo9-mobile.png'); 
        background-attachment: scroll !important; 
    }
    
    /* Empilha a foto em cima e o texto embaixo */
    .bio-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* Ajustes da Imagem Mobile */
    .bio-image-col { order: 1; margin-bottom: 20px; }
    .bio-content-col { order: 2; text-align: center; } /* Centraliza o texto no celular */
    
    .bio-image-wrapper { max-width: 350px; }
    
    /* Ajuste do Selo para não vazar da tela */
    .floating-badge {
        right: 10px;
        bottom: 20px;
        padding: 10px 15px;
    }
    .badge-number { font-size: 2rem; }
    
    /* Ajuste da Linha de Métricas */
    .metrics-row {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        text-align: center;
    }
    
    .metric-line {
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.5), transparent);
    }
    
    /* Centraliza o conteúdo especial (Card e Citações) */
    .obsidian-card { text-align: left; } /* Mantém o card interno alinhado à esquerda para leitura */
    
    /* Ajuste da citação dourada */
    .bio-content-col .text-small.gold-light {
        text-align: left;
        display: inline-block;
    }
}

/* ==========================================================================
   SEÇÃO 11: INFORMAÇÕES DO EVENTO E FAQ
   ========================================================================== */

/* Imagens de Fundo */
.bg-img-info { background-image: url('img/fundo10.png'); background-size: cover; background-position: center; }

/* Grid Principal (Metade Ticket/Entregáveis, Metade FAQ) */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr; /* FAQ fica um pouco mais largo */
    gap: 40px;
    align-items: stretch;
}

/* --- O TICKET VIP --- */
.vip-ticket-card {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.95), rgba(5, 5, 5, 0.98));
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.8), 0 0 15px rgba(212, 175, 55, 0.1);
}

.ticket-header {
    background: rgba(212, 175, 55, 0.1);
    border-bottom: 1px dashed rgba(212, 175, 55, 0.3);
    padding: 15px;
}

.ticket-details {
    list-style: none;
    padding: 30px;
    margin: 0;
}

.ticket-details li {
    display: flex;
    align-items: center;
    font-size: 1.05rem;
    color: #fff;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ticket-details li:last-child {
    margin-bottom: 0; padding-bottom: 0; border-bottom: none;
}

.ticket-details .label { color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; margin-right: 5px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px;}
.ticket-details .gold-icon { font-size: 1.5rem; margin-right: 15px; color: var(--gold); }

/* Linha de Investimento em Destaque */
.investment-line {
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
    margin: 10px -30px -30px -30px !important;
    padding: 25px 30px !important;
    border-top: 1px solid rgba(212, 175, 55, 0.3) !important;
}
.investment-line .label { color: var(--gold) !important; }
.investment-line div { font-size: 1.3rem; font-weight: 700; }

/* Lista de Entregáveis */
.deliverables-list { list-style: none; padding: 0; margin: 0; }
.deliverables-list li {
    display: flex; align-items: flex-start;
    font-size: 0.95rem; color: rgba(255, 255, 255, 0.85);
    margin-bottom: 15px; line-height: 1.4;
}
.deliverables-list li:last-child { margin-bottom: 0; }
.deliverables-list .gold-icon-check { transform: scale(0.8); margin-top: -3px; }

/* --- FAQ (DÚVIDAS FREQUENTES) --- */
.faq-accordion { display: flex; flex-direction: column; gap: 15px; }

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

.faq-item:hover { background: rgba(255, 255, 255, 0.04); }

/* Esconde a seta padrão chata do navegador */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary { list-style: none; }

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}

.faq-icon {
    font-size: 1.5rem;
    color: var(--gold);
    transition: transform 0.3s ease;
}

/* Gira a seta quando o acordeão abre */
.faq-item[open] .faq-icon { transform: rotate(180deg); }

.faq-answer {
    padding: 0 20px 20px 20px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    border-top: 1px dashed rgba(255, 255, 255, 0.05);
    margin-top: 5px;
    padding-top: 15px;
}

/* Destaque para a Pergunta da Garantia */
.faq-garantia { border-color: rgba(212, 175, 55, 0.4); background: rgba(212, 175, 55, 0.05); }

/* ==========================================================================
   RESPONSIVIDADE (MOBILE)
   ========================================================================== */
@media (max-width: 960px) {
    .bg-img-info { 
        background-image: url('img/fundo10-mobile.png'); 
        background-attachment: scroll !important; 
    }
    
    .info-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .ticket-details { padding: 20px; }
    .investment-line { margin: 10px -20px -20px -20px !important; padding: 20px !important; }
    
    .faq-question { padding: 15px; font-size: 0.95rem; }
    .faq-answer { padding: 0 15px 15px 15px; }
    
    /* Garante a exibição do botão CTA */
    #informacoes .action-btn-container {
        display: flex !important;
        justify-content: center !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ==========================================================================
   SEÇÃO 12: MANIFESTO FINAL E CTA (FUNDO E RESPONSIVIDADE)
   ========================================================================== */

/* Fundo Desktop */
.bg-img-finalcta { 
    background-image: url('img/fundo11.png'); 
    background-size: cover;
    background-position: center;
}

@media (max-width: 960px) {
    /* Fundo Mobile */
    .bg-img-finalcta { 
        background-image: url('img/fundo11-mobile.png'); 
        background-attachment: scroll !important; /* Salva do bug do iOS */
    }
    
    /* Ajustes do Card de Encerramento no Celular */
    #inscricao .obsidian-card {
        padding: 40px 20px !important;
        border: none;
        border-top: 3px solid var(--gold);
        border-radius: 0;
        box-shadow: 0 10px 30px rgba(0,0,0,0.9) !important;
    }
    
    #inscricao .urgency-block {
        padding: 15px !important;
        border: none !important;
        border-left: 2px solid var(--gold) !important;
    }
    
    /* Garante visibilidade absoluta do Botão de Compra Final */
    #inscricao .action-btn-container {
        display: flex !important;
        justify-content: center !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    
    #inscricao .btn-gold-lu {
        width: 100%;
        padding: 20px 15px !important;
        font-size: 1.05rem !important;
        white-space: normal; /* Permite que o texto do botão quebre linha se a tela for muito fina */
    }
}

/* ==========================================================================
   RODAPÉ (FOOTER)
   ========================================================================== */
.premium-footer {
    position: relative;
    background-color: #020202; /* O preto mais profundo e sólido do site */
    border-top: 1px solid rgba(212, 175, 55, 0.15); /* Linha dourada bem sutil separando a última seção */
    padding: 60px 0 40px 0;
    z-index: 20;
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--gold);
}

.gold-separator {
    color: var(--gold);
    font-size: 0.8rem;
    opacity: 0.5;
}

.copyright-box {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
    margin-top: 20px;
}

.copyright-box p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    line-height: 1.6;
}

/* ==========================================================================
   GARANTIA DO BOTÃO FLUTUANTE E ANIMAÇÕES
   ========================================================================== */
.btn-floating-top {
    position: fixed; 
    bottom: 30px; 
    right: 30px; 
    width: 55px; 
    height: 55px; 
    border-radius: 50%;
    background: var(--gold-gradient); 
    color: var(--black-deep); 
    text-decoration: none;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.8rem; 
    z-index: 999;
    
    /* Estado Inicial: Escondido lá embaixo */
    opacity: 0; 
    visibility: hidden; 
    transform: translateY(20px); 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); 
    overflow: hidden;
}

/* A classe que o JavaScript vai adicionar para o botão aparecer */
.btn-floating-top.show { 
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0); 
    animation: pulseGold 2.5s infinite; 
}

.btn-floating-top:hover { 
    transform: translateY(-5px) scale(1.05); 
    animation: none; /* Para de pulsar quando passa o mouse */
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.6); 
}

/* Responsividade do Footer e Botão */
@media (max-width: 960px) {
    .btn-floating-top { 
        bottom: 20px; 
        right: 20px; 
        width: 45px; 
        height: 45px; 
        font-size: 1.5rem; 
    }
    .footer-links {
        flex-direction: column;
        gap: 10px;
    }
    .gold-separator { display: none; }
}