/* --- HEADER E NAVEGAÇÃO (FAIXA INVISÍVEL) --- */
header {
    /* (Mantenha as regras de transparência, z-index, etc.) */
    
    /* AQUI ESTÁ O AJUSTE PRINCIPAL: Diminuir o padding vertical */
    padding: 8px 0; /* REDUZIDO de 15px 0 para 8px 0 */
    
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: top 0.3s ease-in-out; 
    
    background-color: transparent !important; 
    border-bottom: none !important; 
    box-shadow: none !important; 
}

/* --- AJUSTE NOS ELEMENTOS INTERNOS --- */

/* Ajuste o botão CTA para garantir que ele não tenha margem vertical */
.cta-nav {
    /* Mantido o padding horizontal, mas assegure margem zero no vertical */
    margin: 0; 
    
    /* Padding interno do botão pode ser reduzido se ainda parecer muito alto */
    padding: 6px 15px; /* Reduzido de 8px 15px para 6px 15px */
    
    background: var(--gradient-gold);
    color: var(--color-dark-base);
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: opacity 0.3s;
}

/* Certifique-se de que o logo-link não tenha padding que o engrosse */
.logo-link {
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* ================== ESTILO DA FAIXA DE AVISO (CALLOUT STRIP) ================== */

.callout-strip {
    /* 1. Limita a largura ao tamanho do conteúdo e adiciona um padding lateral */
    width: max-content; 
    max-width: 90%; /* Limite de segurança para não ser maior que a tela do mobile */
    background-color: transparent; 
    
    /* 2. Centraliza a faixa inteira na tela (apenas funciona com largura contida) */
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px; 
    margin-bottom: 40px; 

    /* 3. Ajuste de Padding Interno */
    padding: 10px 20px; /* Adiciona padding lateral para ser 'um pouco maior que o texto' */
    
    /* 4. Estilo Visual (Brilho/Aura) */
    border-radius: 8px; /* Arredondamento para visual premium */
    
    /* Opcional: Adiciona um fundo sutilmente transparente para destaque */
    background-color: rgba(0, 0, 0, 0.2); 
}

.callout-strip p {
    /* 1. Garante que o texto esteja centralizado DENTRO da faixa */
    text-align: center; 
    
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-light);
    
    /* Sombra branca sutil para o texto */
    text-shadow: 
        0 0 5px rgba(255, 255, 255, 0.6),
        0 0 10px rgba(255, 255, 255, 0.3);
    
    margin: 0; /* Zera margem para evitar problemas de espaçamento */
}

/* --- VARIAÇÕES DE BRILHO (MANTIDAS) --- */

/* Exemplo de Brilho Neon (Adicione um box-shadow na faixa para um efeito de aura) */
.callout-strip.neon-glow {
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}
.callout-strip.neon-glow p {
    color: var(--color-neon-accent);
    text-shadow: 
        0 0 5px rgba(0, 255, 255, 0.8),
        0 0 10px rgba(0, 255, 255, 0.5);
}

/* Exemplo de Brilho Dourado */
.callout-strip.gold-glow {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}
.callout-strip.gold-glow p {
    color: var(--color-gold-premium);
    text-shadow: 
        0 0 5px rgba(255, 215, 0, 0.8),
        0 0 10px rgba(255, 215, 0, 0.5);
}

#top-message-strip {
    /* 1. Posicionamento e Transparência */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1001; /* Z-index mais alto que o header, se ele for usado */
    background-color: transparent; /* AQUI ESTÁ A TRANSPARÊNCIA */
    
    /* 2. Estilo do Texto (Neon/Dourado) */
    text-align: center;
    padding: 8px 0;
}

#top-message-strip p {
    /* Usa o gradiente neon (ou dourado) no texto */
    font-size: 0.9rem;
    font-weight: 600;
    
    /* Aplica o brilho neon no texto para visibilidade */
    color: var(--color-neon-accent); 
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.4); 
    
    margin: 0; /* Remove margens padrão do parágrafo */
}


/* --- HEADER E NAVEGAÇÃO --- */
header {
    /* REMOVIDO: background-color: var(--color-dark-base); */
    background-color: transparent; /* Torna o fundo transparente */
    
    /* REMOVIDO: border-bottom: 1px solid var(--color-dark-secondary); */
    border-bottom: none; /* Remove a linha de baixo */
    
    padding: 15px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: top 0.3s ease-in-out; 
}
/* O resto do CSS do header permanece igual */

/* --- AJUSTE OPACIDADE DOS ELEMENTOS --- */
/* Se os elementos ficarem difíceis de ver, podemos dar um fundo discreto ao contêiner. */
/* Exemplo de fundo discreto nos elementos: */
.logo-link {
    background-color: rgba(0, 0, 0, 0.4); /* Fundo preto sutilmente transparente */
    padding: 5px 10px;
    border-radius: 4px;
}
.cta-nav {
    /* O CTA já tem o gradiente, o que o torna visível, mas pode precisar de mais contraste */
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6); /* Reforça o brilho do botão */
}

:root {
    /* Paleta Premium */
    --color-dark-base: #121212;          /* Fundo: Preto Autoridade */
    --color-dark-secondary: #1a1a1a;    /* Fundo Secundário */
    --color-gold-premium: #FFD700;       /* Dourado (Ancoragem de Valor) */
    --color-neon-accent: #00FFFF;        /* Ciano Neon (Tecnologia/Destaque) */
    --color-text-light: #F0F0F0;         /* Texto Principal Claro */
    --color-text-dimmed: #ccc;           /* Texto Secundário Claro */
    
    /* Gradientes */
    --gradient-gold: linear-gradient(90deg, #FFD700 0%, #FFB026 100%);
    --gradient-neon: linear-gradient(90deg, #00FFFF 0%, #00FF88 100%);
    
    /* Cores de Ação (Venda) */
    --color-cta-action: #CF2E2E; 
}

/* Base e Tema Dark */
.dark-theme {
    background-color: var(--color-dark-base);
    color: var(--color-text-light);
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding-top: 60px;
}

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

/* Tipografia */
h1, h2, h3 {
    font-weight: 700;
    color: var(--color-text-light);
}
h1 { font-size: 2.5rem; line-height: 1.2; }
h1 span { color: var(--color-neon-accent); }
.gold-text { color: var(--color-gold-premium) !important; }
.neon-text { color: var(--color-neon-accent) !important; }

/* ================== HEADER E NAVEGAÇÃO ================== */

/* --- Header Inteligente --- */
header {
    background-color: var(--color-dark-base);
    border-bottom: 1px solid var(--color-dark-secondary);
    padding: 15px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: top 0.3s ease-in-out; /* Controlado pelo JS */
}
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Estilo do Logo (Tamanho ajustado para 60px de altura, sem sombra) */
.header-logo {
    height: 60px; /* Altura ajustada */
    width: auto;
    max-width: none !important; 
    transition: filter 0.3s ease;
}

/* Estilo do Botão de Navegação */
.cta-nav {
    background: var(--gradient-gold);
    color: var(--color-dark-base);
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: opacity 0.3s;
}
.cta-nav:hover { opacity: 0.85; }

/* ================== IMAGENS E LAYOUT GERAL ================== */

/* Regra Geral de Responsividade, Tamanho e Centralização para Imagens de Conteúdo */
.hero-section .hero-image img,
.feature-section .image img {
    /* Encaixe e Proporção */
    max-width: 60%; /* TAMANHO DA IMAGEM: 60% do espaço da coluna */
    height: auto;  
    
    /* Centralização */
    margin-left: auto;
    margin-right: auto;
    display: block; 
    
    /* Estilos Adicionais (Brilho Difuso nas Imagens) */
    box-shadow: 
        0 0 25px rgba(0, 255, 255, 0.2), /* Brilho neon leve e espalhado */
        0 0 40px rgba(255, 215, 0, 0.15); /* Brilho dourado sutil */
    border-radius: 8px; 
    transition: box-shadow 0.3s ease; 
}

/* Efeito ao passar o mouse para as imagens */
.hero-section .hero-image img:hover,
.feature-section .image img:hover {
    box-shadow: 
        0 0 35px rgba(0, 255, 255, 0.4),  /* Aumenta brilho neon */
        0 0 60px rgba(255, 215, 0, 0.3); /* Aumenta brilho dourado */
}

/* --- SEÇÕES PADRÃO --- */
section {
    padding: 80px 0;
}

/* --- HERO SECTION --- */
.hero-section { background-color: var(--color-dark-base); }
.hero-section .container {
    display: flex; align-items: center; gap: 40px; min-height: 70vh;
}
.hero-content, .hero-image { flex: 1; }
.hero-content p { color: var(--color-text-dimmed); }
.small-text-authority { font-size: 0.85rem; color: var(--color-gold-premium); margin-top: 10px; }


/* --- BOTÕES CTA (Estilos mantidos) --- */
.main-cta {
    display: inline-block; background-color: var(--color-cta-action); color: white;
    padding: 15px 30px; text-decoration: none; font-size: 1.1rem; font-weight: bold;
    border-radius: 8px; margin-top: 20px; transition: transform 0.3s, opacity 0.3s;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
}
.main-cta:hover { transform: scale(1.05); opacity: 0.9; }
.gold-cta { background: var(--gradient-gold); color: var(--color-dark-base); box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); }
.neon-cta { background: var(--gradient-neon); color: var(--color-dark-base); box-shadow: 0 0 15px rgba(0, 255, 255, 0.6); }
.secondary-cta {

    color: var(--color-neon-accent); border: 1px solid var(--color-neon-accent);
    padding: 10px 20px; text-decoration: none; font-weight: bold; border-radius: 4px;
    margin-top: 15px; transition: background-color 0.3s, color 0.3s;
}
.secondary-cta:hover { background-color: var(--color-neon-accent); color: var(--color-dark-base); }


/* --- 2. A FRUSTRAÇÃO --- */
.feature-section { background-color: var(--color-dark-secondary); }
.section-reverse .container {
    display: flex; flex-direction: row-reverse; align-items: center; gap: 40px;
}
.section-reverse .content h2 { color: var(--color-gold-premium); }
.section-reverse .content p { color: var(--color-text-dimmed); }

/* --- 3. O MECANISMO TALISYNC (PILARES) --- */
.pillars-section { background-color: var(--color-dark-base); text-align: center; }
.pillars-section p { color: var(--color-text-dimmed); margin-bottom: 40px; }
.pillars-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;
}
/* Brilho Difuso nos Pilares */
.pillar {
    background-color: var(--color-dark-secondary); padding: 30px 20px;
    border-radius: 8px; border: 1px solid var(--color-neon-accent);
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.2), /* Brilho neon espalhado */
        0 0 30px rgba(255, 215, 0, 0.1);  /* Brilho dourado sutil e espalhado */
    transition: box-shadow 0.3s ease;
}
/* Efeito ao passar o mouse para o pilar */
.pillar:hover {
    box-shadow: 
        0 0 25px rgba(0, 255, 255, 0.4), /* Aumenta o brilho neon no hover */
        0 0 40px rgba(255, 215, 0, 0.2);  /* Aumenta o brilho dourado no hover */
}
.pillar p { color: var(--color-text-dimmed); }


/* --- 4. PROVA PESSOAL e 5. FECHAMENTO (Estilos mantidos) --- */
.cta-personal-story {
    background: var(--color-dark-secondary); text-align: center; padding: 60px 20px;
    border-top: 5px solid var(--color-gold-premium);
}
.cta-personal-story p {
    font-size: 1.1rem; font-style: italic; color: var(--color-gold-premium);
    max-width: 800px; margin: 0 auto 30px;
}
.pricing-section { background-color: var(--color-dark-base); text-align: center; padding-top: 100px; }
.pricing-box {
    margin: 40px auto; border: 3px solid var(--color-gold-premium); padding: 30px;
    border-radius: 10px; max-width: 500px; background-color: var(--color-dark-secondary);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}
.anchor-value { color: var(--color-text-dimmed); }
.old-price { text-decoration: line-through; font-size: 1.5rem; }
.final-price {
    font-size: 3rem; font-weight: bold; background: var(--gradient-neon);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; color: transparent; 
    margin: 10px 0 30px;
}
footer {
    background-color: var(--color-dark-secondary); color: #666;
    padding: 20px 0; text-align: center; font-size: 0.8rem; border-top: 1px solid #333;
}


/* ================== RESPONSIVIDADE ================== */
@media (max-width: 768px) {
    /* Colunas se empilham */
    .hero-section .container,
    .section-reverse .container {
        flex-direction: column;
    }
    .hero-content { order: 2; text-align: center; }
    .hero-image { order: 1; }
    .pillars-grid {
        grid-template-columns: 1fr;
    }
    
    /* Ajuste para Imagens (CORREÇÃO MOBILE) */
    .hero-section .hero-image img,
    .feature-section .image img {
        max-width: 95%; /* Imagens maiores no celular (95% do espaço da tela) */
        margin-top: 20px; 
    }
    
    /* Ajustes de Padding */
    .hero-section .container { min-height: auto; padding-top: 40px; padding-bottom: 40px; }
    h1 { font-size: 2rem; }
}