/* --- CONFIGURAÇÕES GLOBAIS E FONTES --- */

@font-face {
    font-family: 'Houstiq';
    src: url('fonts/Houstiq.otf') format('truetype');
    font-family: 'Loft';
    src: url ('fonts/Loft-Regular-iF660a82ad1b77b.otf') format('truetype');
}

:root {
    --bg-color: #0f0f0f;
    --text-color: #e0e0e0;
    --accent-color: #c4aa83;
    --font-primary: 'Loft', sans-serif;
    --font-headline: 'Houstiq', serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-primary);
    line-height: 1.7;
    font-size: 18px;
    padding-top: 60px; /* <<< ADICIONE ESTA LINHA */
}

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

.secao {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.conteudo-secao {
    position: relative;
    z-index: 2;
}

h1, h2, h3, h4 {
    font-family: var(--font-headline);
    line-height: 1.2;
    font-weight: normal;
}

.highlight {
    color: var(--accent-color);
    font-weight: bold;
}

.highlight-strong {
    color: var(--accent-color);
    font-family: var(--font-headline);
    text-transform: uppercase;
}

/* ================================== */
/* --- ESTILOS DO PRE-LOADER (LOGO AMANTEUS) --- */
/* ================================== */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color); /* Usa a cor de fundo do seu site */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

#preloader-logo {
    width: 100px; /* Tamanho do logo na tela */
    height: auto;
}

#preloader-logo .logo-path {
    /* A mágica da animação de "desenho" */
    stroke: var(--text-color);
    stroke-width: 2;
    fill: transparent;
    stroke-dasharray: 4500; 
    stroke-dashoffset: 4500;
    
    /* Animação: 1. Desenha, 2. Preenche */
    animation: 
        draw-logo 1.5s ease-in-out forwards,
        fill-logo 1s ease-in-out 1.5s forwards; /* Atraso de 2.5s para preencher */
}

@keyframes draw-logo {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fill-logo {
    from {
        fill: transparent;
    }
    to {
        fill: var(--accent-color); /* Preenche com a mesma cor de destaque */
    }
}

/* --- ESTILOS DAS SEÇÕES --- */
.section-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 10px;
    text-align: center; 
}
/* ================================== */
/* --- NOVO PRE-HEADER FIXO COM EFEITO GLASS --- */
/* ================================== */
.pre-header {
    /* Lógica de Posicionamento */
    position: fixed; /* <<< ALTERADO: Fixo no topo da janela */
    top: 0;
    left: 0;
    width: 100%; /* Garante que ocupe toda a largura */
    z-index: 1000;

    /* Efeito de Vidro (Glassmorphism) */
    background-color: rgba(15, 15, 15, 0.75); /* Cor de fundo escura com 75% de opacidade */
    backdrop-filter: blur(10px); /* O desfoque mágico do conteúdo que passa por trás */
    -webkit-backdrop-filter: blur(10px); /* <<< Essencial para compatibilidade com o Safari */
    
    /* Detalhes Visuais */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Linha sutil para dar profundidade */
    padding: 8px 0;
    color: var(--accent-color);
}

.pre-header-content {
    display: flex;
    flex-direction: column; /* <<< ALTERADO: Empilha os itens verticalmente */
    align-items: center;    /* Centraliza os itens na coluna */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 8px; /* Reduz o espaçamento vertical entre os blocos */
    font-size: 15px;
    font-weight: bold;
}

.online-now {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vagas-header {
    display: flex;
    flex-direction: column; /* <<< ALTERADO: Empilha o texto e a barra */
    align-items: center;
    gap: 5px; /* Espaço pequeno entre o texto e a barra */
    display: none;
}

.progress-bar-header {
    width: 150px; /* Largura da barra */
    height: 8px;
    background-color: #333;
    border-radius: 5px;
    overflow: hidden; /* Garante que a barra interna não vaze */
}

/* A regra para #progress-bar-inner deve existir, mas confirme */
#progress-bar-inner {
    height: 100%;
    width: 0%; /* Começa em 0% */
    background: var(--accent-color);
    border-radius: 5px;
    transition: width 0.5s ease-out; /* Animação suave */
}

/* Ajuste para mobile */
@media (max-width: 768px) {
    .pre-header-content {
        flex-direction: column;
        gap: 5px;
    }
}

.live-dot {
    width: 10px;
    height: 10px;
    background-color: #ff4d4d;
    border-radius: 50%;
    animation: pulse-live 1.5s infinite;
}

@keyframes pulse-live {
    0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 77, 77, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}
/* A regra #progress-bar-inner que já existe vai funcionar aqui */

/* SEÇÃO 1: IMPACTO INICIAL */
.secao-1-impacto {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: center;
    text-align: center;
    padding: 160px 5% 80px 5%;  
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.main-headline {
    font-size: clamp(2.5rem, 6vw, 5rem);
    color: #fff;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.main-subheadline {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: var(--text-color);
    max-width: 800px;
    margin: 20px auto 0;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}

.scroll-down-arrow {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    z-index: 3;
    animation: bounce 2s infinite;
}

.scroll-down-arrow span {
    display: block;
    width: 100%;
    height: 100%;
    border-bottom: 3px solid var(--accent-color);
    border-right: 3px solid var(--accent-color);
    transform: rotate(45deg);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-15px);
    }
    60% {
        transform: translateX(-50%) translateY(-10px);
    }
}


/* SEÇÃO 2: EPIDEMIA */
.secao-2-epidemia {
    text-align: center;
    background-color: #111;
}

/* Adicione estas DUAS novas regras no lugar da anterior */

/* 1. Define um espaçamento PEQUENO para TODOS os parágrafos da introdução */
.secao-2-epidemia .conteudo-secao > p {
    margin-bottom: 25px; /* Espaçamento padrão de 10px entre parágrafos */
}

/* 2. Define um espaçamento MAIOR especificamente para o ÚLTIMO parágrafo */
.secao-2-epidemia .conteudo-secao > p:last-of-type {
    margin-bottom: 30px; /* Espaçamento de 30px para separar do próximo bloco */
}

.stats-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.stat-card {
    border: 1px solid rgba(196, 170, 131, 0.3);
    padding: 30px;
    flex-basis: 45%;
    min-width: 300px;
}
.stat-card h3 {
    color: var(--accent-color);
    margin-bottom: 15px;
}

/* SEÇÃO 3: INIMIGO */
.secao-3-inimigo {
    text-align: center;
}

.manifesto {
    margin: 40px auto;
    padding: 30px;
    border-left: 3px solid var(--accent-color);
    font-size: 1.5rem;
    font-style: italic;
    max-width: 700px;
}

/* ========================================================== */
/* --- AJUSTES DE ESTILO E ANIMAÇÃO PARA A SEÇÃO 3-INIMIGO --- */
/* ========================================================== */

/* 1. Adiciona espaçamento vertical entre os parágrafos da seção */
.secao-3-inimigo .conteudo-secao > p {
    margin-bottom: 25px;
}

/* 2. Animação de "salto vibrante" para a palavra CHEGA */
@keyframes chega-animation {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(0.9) rotate(-2deg);
    }
    20%, 40%, 60%, 80% {
        transform: scale(1.15) rotate(2deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale(1.15) rotate(-2deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}

/* 3. Aplica a animação ao elemento de forma contínua enquanto ele estiver visível */
.chega-headline.is-visible {
    /* A animação 'chega-animation' dura 1.2s, tem uma curva suave e se repete INFINITAMENTE */
    animation: chega-animation 1.2s ease-in-out infinite;
}

/* SEÇÃO 4: REVELAÇÃO */
.secao-4-revelacao {
    text-align: center;
    background-color: #111;
}

.section-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 10px;
}

.section-subtitle {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    color: #aaa;
    margin-bottom: 50px;
}

.section-subtitle-gold {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--accent-color);
    margin-bottom: 30px;
}

.proof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.proof-card {
    background: #252525;
    padding: 30px;
    border-radius: 5px;
}

.proof-card h4 {
    color: var(--accent-color);
    margin-bottom: 15px;
}

.conclusion-box {
    margin: 60px auto 0 auto;
    padding: 30px;
    border: 2px solid var(--accent-color);
    max-width: 800px;
    font-size: 1.4rem;
}

/* SEÇÃO 5: SOLUÇÃO */
.product-intro {
    display: flex;
    align-items: center;
    gap: 50px;
}
.product-image { flex-basis: 40%; }
.product-image img { width: 100%; }
.product-text { flex-basis: 60%; }

.transformation-preview {
    text-align: center;
    margin-top: 80px;
    font-size: 1.6rem;
}

/* SEÇÃO 6: ARSENAL */
.secao-6-arsenal { background-color: #111; }
.accordion { max-width: 900px; margin: 50px auto 0 auto; }
.accordion-item { border-bottom: 1px solid #444; }
.accordion-header {
    width: 100%;
    background: none;
    border: none;
    padding: 20px;
    font-family: var(--font-headline);
    font-size: 1.5rem;
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s;
}
.accordion-header::after {
    content: '+';
    position: absolute;
    right: 20px;
    font-size: 2rem;
    color: var(--accent-color);
    transition: transform 0.3s;
}
.accordion-header.active::after { transform: rotate(45deg); }
.accordion-header:hover { background-color: #252525; }
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
    padding: 0 20px;
}
.accordion-content p { margin-bottom: 20px; }

.bonus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.bonus-card { text-align: center; }
.bonus-card img {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 15px;
}
.bonus-card h4 { color: var(--accent-color); }
/* --- AJUSTE PARA LISTAS DE BENEFÍCIOS NO ACORDEÃO --- */

/* Este seletor mira especificamente nas listas (ul) 
  dentro do conteúdo do acordeão da seção "arsenal".
*/
.secao-6-arsenal .accordion-content ul {
    /* Remove o marcador de lista (o pontinho) */
    list-style: none;
    
    /* Remove o preenchimento padrão à esquerda que o navegador adiciona */
    padding: 0;
    margin: 0; /* Garante que não haja margens indesejadas */
}

.secao-6-arsenal .accordion-content li {
    /* Adiciona um espaçamento entre os itens da lista para melhor legibilidade */
    margin-bottom: 12px;
}

.secao-6-arsenal .accordion-content li:last-child {
    /* Remove a margem do último item para um espaçamento perfeito */
    margin-bottom: 0;
}
/* SEÇÃO 7: CHAMADO */
.two-paths {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 50px;
}
.path-card {
    flex-basis: 45%;
    padding: 30px;
    border: 1px solid #444;
    border-radius: 5px;
}
.path-weak { background: #151515; }
.path-strong { border-color: var(--accent-color); }
.path-card h3 { margin-bottom: 15px; color: var(--accent-color); }


/* SEÇÃO 8: OFERTA */
.offer-box {
    background: #111;
    border: 2px solid var(--accent-color);
    border-radius: 10px;
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.offer-summary {
    text-align: left;
    max-width: 500px;
    margin: 30px auto;
}
.offer-summary ul { list-style: none; }
.offer-summary li { margin-bottom: 10px; font-size: 1.1rem; }

.price-section {
    margin: 40px 0;
    text-align: center;
}

.price-old {
    font-size: 1.1rem;
    opacity: 0.7;
}

/* Estilo para o "Por apenas" */
.price-prefix {
    font-size: 1.2rem;
    color: var(--text-color); /* Cor #e0e0e0, como solicitado */
    margin-top: 15px;
}

/* Container principal do preço (12x R$ 10,24) */
.price-main {
    display: flex;
    justify-content: center;
    align-items: baseline; /* Alinha pela base do texto, fica melhor */
    gap: 15px;
    margin: 5px 0;
    color: var(--accent-color); /* Cor de destaque para o conjunto */
}

/* Estilo para o "12x" */
.price-installments {
    font-family: var(--font-primary);
    font-size: 2.5rem;
    font-weight: 700;
}

/* Estilo para o "R$ 10,24" */
.price-value {
    font-family: var(--font-headline);
    font-size: 5rem; /* Destaque máximo para o valor */
    line-height: 1;
}

/* Estilo para o "ou R$ 99,00 à vista" */
.price-descriptor {
    font-size: 1rem;
    color: #aaa;
}

.price-warning {
    font-size: 0.7rem;
    color: #aaa;
}

/* Novo estilo para o container de vagas na caixa de oferta */
.vagas-variaveis-container {
    margin: 40px auto;
    padding: 15px;
    background-color: rgba(196, 170, 131, 0.1);
    border: 1px solid var(--accent-color);
    border-radius: 5px;
    max-width: 500px;
}

.vagas-variaveis-container p {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 10px;
}

.vagas-variaveis-container span {
    font-family: var(--font-headline);
    font-size: 1.4rem;
    color: var(--accent-color);
}
#progress-bar-inner {
    height: 100%;
    width: 34%; /* 17/50 */
    background: var(--accent-color);
    border-radius: 10px;
}

/* Adicione esta nova regra */
.cta-container {
    display: flex;
    flex-direction: column; /* Empilha os itens verticalmente */
    align-items: center;    /* Centraliza os itens horizontalmente */
    margin-top: 40px;       /* Mantém um espaço acima do botão */
}

.cta-button {
    display: inline-block;
    background-color: var(--accent-color);
    color: #111;
    font-family: var(--font-headline);
    font-size: 1.4rem;
    padding: 10px 30px;
    text-decoration: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
    text-shadow: none;
}
.cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(196, 170, 131, 0.5);
}
.secure-checkout-text { margin-top: 20px; font-size: 0.9rem; }

/* --- Seção de Comentários (Ecos da Alcateia) --- */
.secao-ecos-alcateia {
    background: #111;
    padding: 120px 0;
}

/* Estilo elegante para o contador de membros ativos */
#active-members-count {
    color: #f0e6d2; /* Um dourado um pouco mais claro */
    font-weight: 700;
    text-shadow: 0 0 5px rgba(240, 230, 210, 0.2);
}

/* --- ESTILO PARA O BOTÃO DE CTA DESATIVADO --- */
.cta-button.disabled {
    background-color: #333;
    color: #666;
    cursor: not-allowed; /* Mostra um ícone de "proibido" ao passar o mouse */
    box-shadow: none;
    transform: none;
}

/* ========================================================== */
/* --- ESTILOS PARA A SIMULAÇÃO INTERATIVA DO NOTION --- */
/* ========================================================== */
#notion-simulation-container {
    max-width: 700px;
    margin: 40px auto;
    perspective: 1500px;
    margin-top: 20px;
}
.notion-window {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    transform: rotateX(10deg) rotateY(-10deg);
    transition: transform 0.5s ease-out;
}
#notion-simulation-container.is-visible .notion-window {
    transform: rotateX(0) rotateY(0);
}
.notion-header {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #2f2f2f;
    border-bottom: 1px solid #333;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.notion-dots span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    background-color: #444;
}
.notion-title {
    color: #aaa;
    font-size: 0.9rem;
}
.notion-body {
    padding: 25px;
    min-height: 250px;
    position: relative;
}
.notion-screen {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: calc(100% - 50px);
    transition: opacity 0.5s ease-in-out;
}
.notion-screen.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}
.notion-screen h4 {
    font-family: var(--font-headline);
    color: var(--accent-color);
    margin-bottom: 20px;
}
.habit-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s ease-out;
}
.habit-item.visible {
    opacity: 1;
    transform: translateX(0);
}
.checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #555;
    border-radius: 4px;
    margin-right: 15px;
    position: relative;
    transition: background-color 0.3s;
}
.habit-item.checked .checkbox {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}
.habit-item.checked .checkbox::after {
    content: '✔';
    color: #1a1a1a;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
}
.habit-item.checked .habit-text {
    text-decoration: line-through;
    opacity: 0.5;
}
.progress-bar-container { margin-top: 20px; }
.progress-bar-bg { width: 100%; height: 8px; background-color: #333; border-radius: 4px; overflow: hidden; }
.progress-bar-fill { width: 0%; height: 100%; background-color: var(--accent-color); border-radius: 4px; transition: width 1s ease-in-out; }
.journal-entry p { margin-bottom: 10px; }
.typing-cursor {
    animation: blink 0.7s infinite;
    font-weight: bold;
    color: var(--accent-color);
}
@keyframes blink {
    50% { opacity: 0; }
}
.mission-item { display: flex; justify-content: space-between; align-items: center; font-size: 1.2rem; }
.mission-status {
    background-color: #333;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 1rem;
    transition: all 0.5s ease;
}
.mission-status.completed {
    background-color: var(--accent-color);
    color: #111;
    font-weight: bold;
}

/* --- ESTILOS FINAIS PARA O CABEÇALHO DO MURAL E CONTADOR --- */

/* Novo container para alinhar os itens */
.interactive-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Permite quebrar em telas menores */
    gap: 20px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #2a2a2a;
}

/* Estilização do contador de membros */
.live-stats-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha à esquerda */
    line-height: 1.1;
}

.animated-counter {
    font-family: 'Abril Fatface', cursive;
    font-size: 2.5rem;
    color: var(--accent-color);
    font-weight: normal;
}

.live-stats-main span:last-child {
    font-size: 0.9rem;
    color: #888;
    font-weight: bold;
}

/* Remove a borda e o espaçamento superior do filtro */
.comment-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    
    /* CORREÇÃO: Remove a linha e espaçamentos herdados */
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* Ajuste de responsividade para o novo header */
@media (max-width: 500px) {
    .interactive-header {
        justify-content: center; /* Centraliza em telas pequenas */
    }
}

.community-module {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--bg-color);
    border: 1px solid #333;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    overflow: hidden;
}
.community-header {
    padding: 30px 30px 20px 30px;
    text-align: center;
    border-bottom: 1px solid #333;
}
.community-header .section-title {
    margin-bottom: 10px;
}
.community-subtitle {
    color: #aaa;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 25px auto;
}
.live-stats {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}
.stat-item {
    background-color: #1a1a1a;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-color);
}
.stat-item .stat-icon {
    margin-right: 8px;
}
.comment-filter {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid #2a2a2a;
}
.filter-button {
    background-color: transparent;
    border: 1px solid #444;
    color: #aaa;
    padding: 8px 18px;
    border-radius: 20px;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.filter-button:hover {
    background-color: #252525;
    color: #fff;
}
.filter-button.active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-color);
    box-shadow: 0 0 15px rgba(196, 170, 131, 0.3);
}
.alcateia-mural {
    max-height: 500px;
    overflow-y: auto;
    padding: 0px;
}

.alcateia-mural::-webkit-scrollbar {
    width: 8px;
}
.alcateia-mural::-webkit-scrollbar-track {
    background: #1a1a1a;
}
.alcateia-mural::-webkit-scrollbar-thumb {
    background-color: var(--accent-color);
    border-radius: 10px;
    border: 2px solid #1a1a1a;
}
.mural-post {
    background-color: var(--bg-color);
    border-bottom: 1px solid #2a2a2a;
    padding: 5px 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    opacity: 0;
    transform: translateY(20px);
}
.mural-post:last-child {
    border-bottom: none;
}
.mural-post.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.post-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}
.post-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #333;
    flex-shrink: 0;
}
.post-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.post-user-info {
    display: flex;
    flex-direction: column;
}
.post-username {
    font-weight: 700;
    color: var(--text-color);
}
.post-timestamp {
    font-size: 0.8rem;
    color: #888;
}
.post-body p {
    font-style: normal;
    color: #ccc;
    text-align: left;
    line-height: 1.6;
    margin: 0;
}
.post-actions {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    align-items: center;
}
.post-like-button {
    background: none;
    border: 1px solid #444;
    border-radius: 20px;
    padding: 5px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
    transition: all 0.2s ease;
}
.post-like-button:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
.post-like-button .like-icon {
    font-size: 1rem;
    transition: transform 0.2s ease;
}
.post-like-button.is-liked {
    background-color: rgba(255, 0, 0, 0.1);
    border-color: #ff4d4d;
    color: #ff4d4d;
}
.post-like-button.is-liked .like-icon {
    transform: scale(1.2);
}
.no-comments-message {
    text-align: center;
    padding: 40px;
    color: #666;
    font-style: italic;
}

/* Estilo do cabeçalho do estudo de caso para indicar que é clicável */
.case-study-header {
    cursor: pointer;
    position: relative; /* Necessário para posicionar o ícone */
}

.toggle-icon {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 2rem;
    font-weight: 300;
    color: var(--accent-color);
    transition: transform 0.3s ease;
}

.case-study-card.active .toggle-icon {
    transform: translateY(-50%) rotate(45deg);
}

.case-study-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    padding-top: 0;
    margin-top: -10px; /* Ajuste para compensar o padding */
}

.case-study-card.active .case-study-body {
    max-height: 1000px; /* Um valor alto para garantir que todo o conteúdo caiba */
    padding-top: 20px;
    margin-top: 0;
}

/* ========================================================== */
/* --- ESTILOS PARA OS ESTUDOS DE CASO (ECOS DA ALCATEIA) --- */
/* ========================================================== */
#case-studies-container {
    padding: 5px;
}

.case-study-disclaimer {
    padding: 5px;
    margin-bottom: 30px;
    background-color: rgba(0,0,0,0.2);
    border-left: 3px solid var(--accent-color);
    font-size: 0.9rem;
    color: #aaa;
    text-align: left;
}

.case-studies-grid {
    display: grid;
    grid-template-columns: 1fr; /* Um card por linha para leitura focada */
    gap: 5px;
}

.case-study-card {
    background-color: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 5px;
    text-align: left;
}
.case-study-card h4 {
    font-family: var(--font-headline);
    font-size: 1.4rem;
    color: var(--accent-color);
    margin-bottom: 15px;
}
.case-study-card p {
    color: #ccc;
    line-height: 1.7;
    margin-bottom: 15px;
}
.case-study-card .case-study-quote {
    margin-top: 20px;
    font-style: italic;
    color: var(--text-color);
    font-weight: bold;
    padding-top: 15px;
    border-top: 1px solid #333;
}

/* ========================================================== */
/* --- ESTILOS FINAIS PARA OS BÔNUS "FOCUS REVEAL" --- */
/* ========================================================== */

.bonus-card {
    background-color: #1a1a1a;
    border: 1px solid #2a2a2a;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    overflow: hidden;
    position: relative;
    transition: all 0.4s ease-out;
}

.bonus-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.bonus-icon-wrapper {
    /* Estado inicial: Ícone grande e centralizado */
    height: 80px;
    margin: 10px auto 20px auto;
    opacity: 1;
    transform: scale(1);
    transition: all 0.4s ease-out;
}

.bonus-card:hover .bonus-icon-wrapper {
    /* Estado no hover: Ícone encolhe e sobe */
    height: 40px; /* Reduz a altura para o texto subir */
    opacity: 0.7;
    transform: scale(0.8);
    margin-bottom: 10px;
}

.bonus-icon {
    width: 100%;
    height: 100%;
    stroke: var(--accent-color); /* Usamos stroke para ícones de linha */
    fill: none;
}

.bonus-card h4 {
    color: var(--text-color);
    font-family: var(--font-headline);
    font-size: 1.4rem;
    margin-bottom: 15px;
    transition: color 0.4s ease-out;
}

.bonus-card:hover h4 {
    color: var(--accent-color);
}

.bonus-card p {
    /* Estado inicial: Descrição oculta */
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.6;
    height: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease-out;
    margin: 0;
}

.bonus-card:hover p {
    /* Estado no hover: Descrição aparece */
    height: auto; /* A altura se ajusta ao conteúdo */
    opacity: 1;
    transform: translateY(0);
}

/* ========================================================== */
/* --- ESTILOS PARA A NOVA SEÇÃO "A PREVISÃO" --- */
/* ========================================================== */
.secao-previsao {
    background-color: #111;
}
.future-cards-grid {
    display: flex;
    gap: 30px;
    align-items: stretch;
}
.future-card {
    flex-basis: 50%;
    padding: 30px;
    border-radius: 8px;
}
.future-card h4 {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #444;
}
.future-card p {
    color: #aaa;
    line-height: 1.8;
}

.future-card-neutral {
    border: 1px solid #333;
}
.future-card-neutral h4 {
    color: #888;
}

.future-card-sovereign {
    border: 2px solid var(--accent-color);
    box-shadow: 0 0 30px rgba(196, 170, 131, 0.2);
}
.future-card-sovereign h4 {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}
.future-card-sovereign p {
    color: var(--text-color);
}

/* Responsividade para a seção */
@media (max-width: 768px) {
    .future-cards-grid {
        flex-direction: column;
    }
}
.proof-grid-dossier {
    display: grid; /* Ativa o layout de grade */
    grid-template-columns: repeat(3, 1fr); /* Cria 3 colunas de larguras idênticas */
    gap: 30px; /* Define o espaçamento entre os cards (ajuste o valor se necessário) */
    align-items: stretch; /* Garante que todos os cards na mesma linha estiquem para ter a mesma altura */
}

/* Adicione também uma regra para o comportamento em telas menores (celulares) */
@media (max-width: 768px) {
    .proof-grid-dossier {
        grid-template-columns: 1fr; /* Faz com que os cards fiquem um abaixo do outro em telas pequenas */
    }
}
/* ========================================================== */
/* --- ESTILOS PARA O DOSSIÊ PRIMORDIAL --- */
/* ========================================================== */
.dossier-header {
    text-align: center;
    margin-bottom: 80px;
    border-bottom: 1px solid #333;
    padding-bottom: 40px;
}
.dossier-act {
    margin-bottom: 100px;
}
.act-title {
    font-family: var(--font-headline);
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 20px;
}
.act-title span {
    color: var(--accent-color);
    display: block;
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.act-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
    color: #aaa;
}
.proof-grid-dossier {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}
.proof-card-dossier {
    background-color: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 30px;
}
.proof-card-dossier h4 {
    color: var(--accent-color);
    font-family: var(--font-headline);
    font-size: 1.4rem;
    margin-bottom: 15px;
}
.proof-data {
    color: #ccc;
    margin-bottom: 20px;
    font-size: 1rem;
}
.proof-source {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.6;
    margin-bottom: 20px;
}
.proof-source img {
    height: 25px;
    filter: grayscale(1) brightness(1.5);
}
.proof-source span {
    font-size: 0.8rem;
    font-style: italic;
}
.proof-consequence {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #333;
    font-size: 0.9rem;
    color: #f0f0f0;
}
.proof-quote {
    font-style: italic;
    color: #aaa;
    border-left: 3px solid var(--accent-color);
    padding-left: 20px;
    margin-top: 20px;
}
.proof-quote cite {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-weight: bold;
    color: #ccc;
}
.proof-visual {
    width: 100%;
    border-radius: 5px;
    margin-top: 20px;
    opacity: 0.8;
}
.headlines-grid {
    margin-top: 50px;
    text-align: center;
}
.headlines-grid h4 {
    color: var(--accent-color);
    font-family: var(--font-headline);
    font-size: 1.4rem;
    margin-bottom: 20px;
}
.headline-item {
    background-color: #f0f0f0;
    color: #111;
    font-weight: bold;
    padding: 10px;
    border: 1px solid #333;
    margin: 10px auto;
    max-width: 400px;
    transform: rotate(-2deg);
}
.case-studies-container {
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}
.case-study-card {
    background-color: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-left: 3px solid var(--accent-color);
    border-radius: 8px;
    padding: 30px;
}
.case-study-card h4 {
    font-family: var(--font-headline);
    font-size: 1.4rem;
    margin-bottom: 15px;
}
.case-study-quote {
    margin-top: 20px;
    font-style: italic;
    color: var(--accent-color);
    font-weight: bold;
}

    /* O principal ajuste: empilha o contador e os filtros */
    .interactive-header {
        flex-direction: column; /* Deixa um item abaixo do outro */
        gap: 30px; /* Aumenta o espaço entre o contador e os filtros */
    }

    /* Garante que o contador de membros fique bem posicionado */
    .live-stats-main {
        margin-bottom: 10px;
    }

    /* Garante que os filtros se centralizem corretamente */
    .comment-filter {
        justify-content: center;
        margin-bottom: 20px;
    }
}

/* ========================================================== */
/* --- OTIMIZAÇÃO MOBILE: PADDING LATERAL DOS ECOs DA ALCATEIA --- */
/* ========================================================== */

@media (max-width: 768px) {

  /* Esta regra mira especificamente no container da seção de comentários */
  .secao-ecos-alcateia .container {
    /* Reduz o padding lateral para dar mais espaço ao conteúdo */
    margin-left: 5px;
    margin-right: 5px;
  }

}
/* ========================================================== */
/* --- AJUSTES FINAIS DE LAYOUT PARA O HEADER DOS COMENTÁRIOS --- */
/* ========================================================== */

/* 1. Corrige o alinhamento vertical do header principal */
.interactive-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* <<< ESTA LINHA CENTRALIZA VERTICALMENTE */
    flex-wrap: wrap;
    gap: 20px;
}

/* 2. Transforma o container de filtros em um flex container */
.comment-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* 3. Estiliza o novo grupo de botões */
.filter-group {
    display: flex;
    border: 1px solid #444;
    border-radius: 20px;
    overflow: hidden; /* Garante que os cantos arredondados funcionem */
}

/* 4. Ajusta os botões dentro do grupo para parecerem um controle único */
.filter-group .filter-button {
    border: none; /* Remove a borda individual */
    border-radius: 0; /* Remove o arredondamento individual */
    border-right: 1px solid #444; /* Adiciona um separador vertical */
}

.filter-group .filter-button:last-child {
    border-right: none; /* Remove o separador do último botão */
}

/* Garante que o botão ativo dentro do grupo tenha o estilo correto */
.filter-group .filter-button.active {
    background-color: var(--accent-color);
    color: var(--bg-color);
}

/* --- NOVA SEÇÃO DE FAQ - PRIMORDIAL --- */
.secao-faq-primordial {
    background-color: var(--bg-color);
}
/* A classe .accordion, .accordion-item, etc., que já existe será reutilizada aqui */

/* --- NOVA SEÇÃO DE FAQ - PRIMORDIAL --- */
.secao-faq-primordial {
    background-color: var(--bg-color);
}

/* SEÇÃO 9: P.S. */
.secao-9-ps { text-align: center; font-size: 0.9rem; color: #888; }
.secao-9-ps a { color: var(--accent-color); text-decoration: none; }


/* --- ANIMAÇÕES ON-SCROLL --- */
.anim-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.anim-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================================== */
/* --- OTIMIZAÇÃO MOBILE PARA O CABEÇALHO DOS COMENTÁRIOS --- */
/* ========================================================== */

@media (max-width: 768px) {

  .community-header {
    /* Reduz o padding horizontal de 30px para 15px em telas pequenas */
    padding-left: 5px;
    padding-right: 5px;
  }

}

/* ========================================================== */
/* --- ESTILOS PARA OS PILARES DE COPY (BÔNUS E MÉTRICAS) --- */
/* ========================================================== */

/* Estilo para o contêiner do Bônus Final */
.final-bonus-container {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}
.final-bonus-container p {
    max-width: 700px;
    margin: 20px auto;
    line-height: 1.8;
}

/* Estilos para as Métricas de Engajamento */
.engagement-metrics {
    margin: 60px auto;
    padding: 5px;
    background-color: rgba(0,0,0,0.2);
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
}
.metrics-title {
    text-align: center;
    font-family: var(--font-primary);
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
}
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    text-align: center;
}
.metric-number {
    font-family: var(--font-headline);
    font-size: 3.5rem;
    color: var(--accent-color);
    display: block;
}
.metric-label {
    font-size: 0.9rem;
    color: #ccc;
}
.metrics-footer {
    text-align: center;
    margin-top: 30px;
    font-style: italic;
    color: #888;
}

/* --- RODAPÉ --- */
.footer {
    background-color: #111; /* Um pouco mais claro que o fundo principal para diferenciar */
    color: #888;
    padding: 60px 0;
    text-align: center;
    font-size: 0.9rem;
    border-top: 1px solid #333; /* Linha sutil de separação */
}

.footer-logo {
    max-width: 150px;
    margin-bottom: 30px;
    opacity: 0.8;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.footer-links a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--accent-color); /* Usa a cor de destaque no hover */
}

.footer-copyright {
    margin-bottom: 30px;
    color: #666;
}

.footer-disclaimer {
    font-size: 0.8rem;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.6;
    line-height: 1.6;
}

/* ================================== */
/* --- ETAPA 2: BACKGROUNDS DINÂMICOS DE SEÇÃO --- */
/* ================================== */

/* --- Seção 2: A Epidemia --- */
/* Um gradiente sutil de cima para baixo para separar do topo. */
.secao-2-epidemia {
    background: linear-gradient(180deg, #0f0f0f 0%, #151515 100%);
}

/* --- Seção 4: A Revelação --- */
/* Um brilho sutil vindo do topo para dar um ar de "revelação". */
.secao-4-revelacao {
    background: radial-gradient(circle at top, #202020 0%, #0f0f0f 100%);
}

/* --- Seção 6: O Arsenal (Módulos) --- */
/* Incorpora a cor verde da marca para dar identidade ao produto. */
.secao-6-arsenal {
    background: linear-gradient(135deg, var(--bg-color) 0%, var(--brand-green) 100%);
}

/* --- Seção 8: A Oferta --- */
/* Um fundo mais escuro para destacar a caixa da oferta. */
.secao-8-oferta {
    background: linear-gradient(to bottom, #111, #000);
}

/* ================================== */
/* --- ETAPA 3: DIVISÓRIAS ESTILIZADAS --- */
/* ================================== */

.divider-glow {
    width: 100%;
    height: 4px; /* Altura sutil da linha */
    margin: 0 auto; /* Garante centralização */
    
    /* O gradiente cria o efeito de brilho central que some nas pontas */
    background: linear-gradient(90deg, 
        transparent, 
        rgba(196, 170, 131, 0.4), /* Cor de destaque com transparência */
        transparent
    );

    /* Aplica a animação de pulso */
    animation: pulseGlow 4s infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.5; /* Começa e termina com menos brilho */
    }
    50% {
        opacity: 1; /* Atinge o brilho máximo no meio da animação */
    }
}

/* ================================== */
/* --- ETAPA 4: REFINAMENTO GERAL E CONSISTÊNCIA --- */
/* ================================== */

/* --- 1. Refinamento dos Cards de Estatísticas (.stat-card) --- */
.stat-card {
    /* Removemos a borda antiga e damos um fundo sólido */
    border: 1px solid #2a2a2a; /* Borda mais sutil e escura */
    background-color: #1a1a1a; /* Cor de fundo padrão para cards */
    
    /* Adicionamos detalhes de design */
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); /* Sombra para dar profundidade */
    
    /* Preparamos para a interatividade */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px); /* Efeito de "flutuar" ao passar o mouse */
    border-color: var(--accent-color); /* Borda fica dourada no hover */
}


/* --- 2. Destaque da Caixa de Oferta (.offer-box) --- */
.offer-box {
    /* Adicionamos um brilho sutil com a cor da marca */
    box-shadow: 0 0 40px rgba(196, 170, 131, 0.2);
    
    /* Damos uma textura de fundo muito sutil para mais profundidade */
    background: radial-gradient(circle, #151515 0%, #111 100%);
}


/* --- 3. Profundidade para o Bloco 'Manifesto' --- */
.manifesto {
    background-color: rgba(26, 26, 26, 0.5); /* Fundo semitransparente para destacar */
    border-radius: 8px; /* Cantos arredondados */
}


/* --- ESTILOS DA PÁGINA DE UPSELL - A PRIMEIRA CAÇADA --- */

.protocolo-body {
    background-color: #151515;
    padding-top: 50px; /* Adiciona espaço para o pre-header não sobrepor o conteúdo */
}

/* Novo Pre-Header Fixo */
.upsell-pre-header {
    position: fixed; /* Fica fixo no topo */
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--accent-color); /* Cor de destaque */
    color: #111;
    text-align: center;
    padding: 10px;
    font-size: 0.8rem;
    font-family: var(--font-primary);
    font-weight: 400;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

#alert-overlay {
    /* ... a regra do alert-overlay continua a mesma ... */
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(208, 0, 0, 0.95);
    z-index: 9999; display: flex; justify-content: center; align-items: center;
    text-align: center; padding: 20px; cursor: pointer;
    opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease;
}
#alert-overlay.visible { opacity: 1; visibility: visible; }
#alert-overlay .alert-content h1 {
    font-family: var(--font-headline);
    font-size: clamp(4rem, 10vw, 8rem);
    color: #fff;
    animation: pulse-alert 1.5s infinite; /* <<< RESGATE ESTA LINHA */
}
#alert-overlay .alert-content p { font-size: 1.2rem; color: #fff; max-width: 600px; }

/* Verifique se este bloco ainda está no seu CSS */
@keyframes pulse-alert {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.protocolo-page {
    opacity: 1; /* A página já começa visível, o overlay cobre ela */
}

.protocolo-subtitle { margin-bottom: 40px; color: #aaa; }
.protocolo-page p { max-width: 800px; margin-left: auto; margin-right: auto; text-align: center; line-height: 1.8; }
.protocolo-page .manifesto { border-left-color: rgba(196, 170, 131, 0.5); }

.missoes-container { margin-top: 60px; }
.missoes-title { text-align: center; color: var(--accent-color); margin-bottom: 30px; font-size: 1.8rem; }
.missoes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    align-items: stretch;
}
.missao-card {
    border: 2px solid #444;
    padding: 30px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    background: #1f1f1f;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.missao-header {
    position: absolute;
    top: 15px;
    right: -50px;
    transform: rotate(45deg);
    background-color: var(--accent-color);
    color: #111;
    padding: 5px 50px;
    font-family: var(--font-headline);
    font-size: 1rem;
}
.missao-card:hover {
    transform: translateY(-10px);
}
.missao-card.selected {
    border-color: var(--accent-color);
    box-shadow: 0 0 30px rgba(196, 170, 131, 0.4);
    transform: translateY(-10px) scale(1.03);
}
.missao-card h3 { font-family: var(--font-headline); font-size: 1.8rem; color: var(--text-color); margin-top: 20px; margin-bottom: 15px; }
.missao-card p { font-size: 1rem; text-align: left; max-width: 100%; }

.protocolo-offer-box { margin-top: 80px; }
.price-value-upsell { font-family: var(--font-headline); font-size: 4rem; color: var(--accent-color); line-height: 1; }

.escolha-missao-texto {
    font-family: var(--font-headline);
    color: #888;
    font-size: 1.2rem;
    padding: 20px 0;
    border: 2px dashed #444;
    border-radius: 5px;
    width: 100%;
    max-width: 500px; /* Adapte se necessário */
}
.cta-button.cta-disabled:hover { transform: none; box-shadow: none; }

.hidden-cta { display: none; }

.decline-link {
    display: block; margin-top: 30px; font-size: 0.9rem;
    color: #aaa; text-decoration: none; font-style: italic;
    opacity: 0.8; transition: all 0.3s ease;
}
.decline-link:hover { color: var(--accent-color); opacity: 1; text-decoration: underline; }

/* ========================================================== */
/* --- ESTILOS PARA O NOVO EFEITO "PARALISIA" (UPSELL) --- */
/* ========================================================== */

.content-hidden {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.content-visible {
    opacity: 1;
}

/* Espaçamento entre parágrafos na página de upsell */
.protocolo-page .conteudo-secao > div > p {
    margin-bottom: 25px;
}

#paralysis-effect-container {
    position: relative;
    height: 120px;
    margin: 40px auto;
    overflow: hidden;
}

.glitch-word {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-headline);
    font-size: 2rem;
    color: var(--accent-color);
    opacity: 0;
    animation: glitch-animation 4s ease-in-out forwards;
}

@keyframes glitch-animation {
    0%, 100% { opacity: 0; transform: translate(-50%, -50%) skew(0deg); }
    5%, 95% { opacity: 1; }
    10% { transform: translate(-48%, -52%) skew(5deg); }
    20% { transform: translate(-52%, -48%) skew(-5deg); }
    30% { transform: translate(-50%, -50%) skew(3deg); }
    40% { transform: translate(-51%, -51%) skew(-3deg); }
    50%, 70% { opacity: 1; transform: translate(-49%, -49%) skew(0deg); }
    60%, 80% { opacity: 0.5; }
}

/* Notificação do Ticker (garantindo que fique no topo) */
#mission-ticker-notification {
    top: 80px; /* Abaixo do pre-header */
    left: auto;
    right: 20px;
    bottom: auto;
    transform: translateX(150%);
    border-color: #333;
}
#mission-ticker-notification.show {
    transform: translateX(0);
}

/* Tooltip do Arquiteto */
.architect-tooltip {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-color);
    color: var(--bg-color);
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
    z-index: 100;
}
.architect-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--accent-color) transparent transparent transparent;
}
.architect-tooltip.visible {
    opacity: 1;
    visibility: visible;
    top: -45px;
}

/* Destaque e Desfoque das Missões */
.missao-card.is-highlighted {
    box-shadow: 0 0 30px var(--accent-color);
    border-color: var(--accent-color);
}
.missao-card.de-emphasized {
    filter: blur(2px);
    opacity: 0.6;
    transform: scale(0.98);
}

/* Cronômetro */
#countdown-timer-container {
    margin: 30px auto;
    padding: 15px;
    border: 1px solid #444;
    border-radius: 8px;
    max-width: 300px;
}
#countdown-timer-container p {
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: #aaa;
}
#countdown-timer {
    font-family: 'Abril Fatface', cursive;
    font-size: 3rem;
    color: var(--accent-color);
    transition: color 0.5s;
}
#countdown-timer.final-minute {
    color: #ff4d4d;
    animation: pulse-alert 1.5s infinite;
}

/* Efeito Typewriter */
.manifesto-line {
    display: block; /* Garante que cada linha animada fique em sua própria linha */
}

/* --- AJUSTES FINAIS DE LAYOUT E POSICIONAMENTO (UPSELL) --- */

/* Garante que todos os cards na mesma linha tenham a mesma altura */
.missoes-grid {
    align-items: stretch; /* Faz os wrappers se esticarem */
}
.mission-wrapper {
    position: relative;
    display: flex; /* Permite que o card interno se estique */
}
.missao-card {
    width: 100%; /* Garante que o card ocupe todo o espaço do wrapper */
}

/* Garante que o tooltip fique acima de todos os outros elementos */
.architect-tooltip {
    z-index: 100; 
}

/* ========================================================== */
/* --- ESTILOS FINAIS PARA A PÁGINA DE DOWNSELL (TEMA ESCURO) --- */
/* ========================================================== */
.downsell-container {
    max-width: 700px;
    margin: 40px auto;
    text-align: center;
    padding: 20px;
}
.downsell-title {
    font-family: var(--font-headline);
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    color: var(--text-color);
}
.downsell-subtitle {
    font-size: 1.2rem;
    color: #aaa;
    margin-top: 10px;
}
.downsell-divider {
    border: none;
    border-top: 1px solid #444;
    margin: 40px auto;
    width: 100px;
}
.copy-block p {
    margin-bottom: 25px;
    font-size: 1.1rem;
    line-height: 1.8;
}
.highlight-dark {
    color: var(--accent-color);
}
.section-subtitle-gold-dark {
    font-family: var(--font-headline);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    color: var(--text-color);
    margin-bottom: 30px;
}
.price-prefix-dark {
    color: #aaa;
}

/* --- ESTILOS DO DOSSIÊ INTERATIVO --- */
.dossier-scene {
    perspective: 1000px;
    margin: 50px auto;
    width: 300px;
    height: 420px;
}
.dossier-card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}
.dossier-card.is-flipped {
    transform: rotateY(180deg);
}
.dossier-front, .dossier-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
}
.dossier-front {
    background: #1a1a1a;
}
.dossier-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dossier-cta-prompt {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: var(--accent-color);
    font-weight: bold;
    text-align: center;
    font-size: 0.9rem;
}
.dossier-back {
    background: #222;
    transform: rotateY(180deg);
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.dossier-back h3 {
    font-family: var(--font-headline);
    color: var(--accent-color);
    margin-bottom: 15px;
}
.benefits-list {
    list-style: none; padding: 0; margin: 0; text-align: left;
}
.benefits-list li {
    font-size: 1rem; margin-bottom: 10px;
}

.mentor-signature { margin: 40px 0; max-width: 180px; }
.mentor-signature img { width: 100%; filter: invert(0.8); }

/* --- ESTILOS PARA OS BOTÕES KIWIFY --- */
.kiwify-cta-wrapper {
    margin-top: 40px;
}
.cta-button-downsell {
    display: inline-block;
    background-color: var(--accent-color);
    color: #111;
    font-family: var(--font-headline);
    font-size: 1.4rem;
    padding: 15px 40px;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
    text-shadow: none;
    cursor: pointer;
    width: 100%;
    max-width: 500px;
}
.cta-button-downsell:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(196, 170, 131, 0.5);
}
.decline-link-downsell {
    display: block;
    margin-top: 20px;
    cursor: pointer;
    text-decoration: underline;
    color: #888;
    transition: color 0.3s;
}
.decline-link-downsell:hover {
    color: var(--text-color);
}
/* ========================================================== */
/* --- ESTILOS FINAIS E COMPLETOS PARA A PÁGINA DE DOWNSELL --- */
/* ========================================================== */

/* --- Layout Geral e Tipografia --- */
.downsell-container {
    max-width: 750px;
    margin: 40px auto;
    text-align: center;
    padding: 20px;
}
.downsell-title {
    font-family: var(--font-headline);
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    color: var(--text-color);
}
.downsell-subtitle {
    font-size: 1.2rem;
    color: #aaa;
    margin-top: 10px;
}
.downsell-divider {
    border: none;
    border-top: 1px solid #444;
    margin: 40px auto;
    width: 100px;
}
.copy-block {
    text-align: left;
    margin-bottom: 40px;
}
.copy-block p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    line-height: 1.8;
}
.highlight-dark {
    color: var(--accent-color);
}
.section-subtitle-gold-dark {
    font-family: var(--font-headline);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    color: var(--text-color);
    margin-bottom: 30px;
    text-align: center;
}
.price-prefix-dark {
    color: #aaa;
}

/* --- ESTILOS PARA O PREÇO PARCELADO DO DOWNSELL --- */

.price-installments-downsell {
    font-family: var(--font-primary);
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-right: 10px;
}

.price-value-downsell {
    font-family: var(--font-headline);
    font-size: 4rem; 
    color: var(--accent-color);
    line-height: 1;
}

/* --- Painel de Simulação Interativa --- */
#live-demo-section {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 30px;
    margin: 50px 0;
    text-align: center;
}
.interactive-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}
.menu-button {
    background-color: #252525;
    border: 1px solid #444;
    color: var(--text-color);
    padding: 12px 20px;
    border-radius: 5px;
    font-family: var(--font-primary);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}
.menu-button:hover {
    background-color: var(--accent-color);
    color: var(--bg-color);
    border-color: var(--accent-color);
    transform: translateY(-3px);
}

/* --- Assinatura Animada --- */
.mentor-signature {
    margin: 40px auto 20px auto;
    max-width: 300px;
}
#signature-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2.5s ease-in-out;
}
#signature-container.is-visible #signature-path {
    stroke-dashoffset: 0;
}

/* ========================================================== */
/* --- ESTILO CUSTOMIZADO PARA A BARRA DE ROLAGEM DO CHAT --- */
/* ========================================================== */

/* A mágica acontece aqui, mirando o container de mensagens */
.chat-messages::-webkit-scrollbar {
  width: 8px; /* Define uma espessura elegante para a barra */
}

/* Estiliza a "pista" por onde a barra corre */
.chat-messages::-webkit-scrollbar-track {
  background: #1c2327; /* Um tom ligeiramente mais escuro que o fundo do chat */
  border-radius: 10px;
}

/* Estiliza o "polegar" (a parte que você arrasta) */
.chat-messages::-webkit-scrollbar-thumb {
  background-color: var(--accent-color); /* Usa nossa cor de destaque */
  border-radius: 10px;
  border: 2px solid #1c2327; /* Cria um contorno sutil com a cor da pista */
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background-color: #e0c49a; /* Um tom ligeiramente mais claro da nossa cor de destaque no hover */
}

/* --- Modal/Popup do Chat --- */
.chat-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}
.chat-modal-container.visible {
    opacity: 1;
    visibility: visible;
}
.chat-modal-backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.chat-window {
    position: relative;
    width: 90%;
    max-width: 400px;
    height: 80%;
    max-height: 600px;
    background-color: #E5DDD5;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.chat-modal-container.visible .chat-window {
    transform: scale(1);
}
.chat-header {
    background-color: #075E54;
    color: #fff;
    padding: 15px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.close-chat-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}
.chat-messages {
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.message {
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    max-width: 80%;
    line-height: 1.4;
    opacity: 0;
    animation: fade-in-up 0.5s ease-out forwards;
}
.message.sent {
    background-color: #DCF8C6;
    color: #333;
    align-self: flex-end;
    border-top-right-radius: 0;
}
.message.received {
    background-color: #fff;
    color: #333;
    align-self: flex-start;
    border-top-left-radius: 0;
}
.message-time {
    display: block;
    font-size: 0.7rem;
    color: #999;
    text-align: right;
    margin-top: 4px;
}
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.typing-indicator {
    display: flex;
    align-items: center;
    padding: 8px 12px;
}
.typing-indicator span {
    height: 8px;
    width: 8px;
    background: #999;
    border-radius: 50%;
    margin: 0 2px;
    animation: typing-blink 1.4s infinite both;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-blink {
    0% { opacity: 0.2; }
    20% { opacity: 1; }
    100% { opacity: 0.2; }
}

.chat-modal-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; display: none; justify-content: center; align-items: center;
}
.chat-modal-container.visible { display: flex; }
.chat-modal-backdrop { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.chat-window {
    position: relative; width: 90%; max-width: 400px; height: 80%; max-height: 700px; background-color: #0d1418; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: flex; flex-direction: column; overflow: hidden; transform: scale(0.95); transition: transform 0.3s ease;
}
.chat-modal-container.visible .chat-window { transform: scale(1); }

/* Novo Cabeçalho do Chat */
.chat-header {
    background-color: #2a2f32; color: #fff; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; border-bottom: 1px solid #3a3f42;
}
.chat-header-left { display: flex; align-items: center; gap: 15px; }
.chat-avatar { width: 40px; height: 40px; border-radius: 50%; }
.chat-user-info { display: flex; flex-direction: column; }
.chat-username { font-weight: bold; }
.chat-status { font-size: 0.8rem; color: #8a99a4; transition: all 0.3s; }
.chat-status.typing { color: #00af9c; font-style: italic; }
.chat-header-right { display: flex; gap: 20px; color: #b1b5b7; }
.chat-header-right svg { cursor: pointer; }
.close-chat-btn { background: none; border: none; color: #b1b5b7; font-size: 2rem; cursor: pointer; line-height: 1; padding: 0 0 0 10px; }

/* --- ESTILO FINAL PARA OS ÍCONES DO CABEÇALHO DO CHAT --- */

.chat-header-right {
    display: flex;
    gap: 24px; /* Aumentando um pouco o espaçamento */
    color: #b1b5b7;
    align-items: center;
}

.chat-header-right i {
    font-size: 1.2rem; /* Tamanho dos ícones */
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}

.chat-header-right i:hover {
    color: #fff; /* Cor ao passar o mouse */
    transform: scale(1.1); /* Efeito de leve crescimento */
}

/* --- ESTILO PARA OS ÍCONES DO RODAPÉ DO CHAT --- */

.chat-footer svg, /* Mantém o estilo para SVGs caso use em outro lugar */
.chat-footer i {
    font-size: 1.5rem; /* Tamanho dos ícones */
    color: #8a99a4;
    cursor: pointer;
    transition: color 0.3s ease;
}

.chat-footer i:hover {
    color: #fff;
}

/* Corpo das Mensagens com Wallpaper */
.chat-messages {
    flex-grow: 1; padding: 10px; overflow-y: auto; display: flex; flex-direction: column;
    background-image: url('img/padrao_amanteus.png');
    background-color: #0d1418;
    background-blend-mode: overlay;
    background-size: 410px;
    opacity: 0.8;
}

/* Bolhas de Mensagem Tema Escuro */
.message { padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; max-width: 80%; line-height: 1.4; animation: fade-in-up 0.5s ease-out forwards; opacity: 0; }
.message.sent { background-color: #005C4B; color: #e9edef; align-self: flex-end; border-top-right-radius: 0; }
.message.received { background-color: #2a2f32; color: #e9edef; align-self: flex-start; border-top-left-radius: 0; }
.message-time { display: block; font-size: 0.7rem; color: #8a99a4; text-align: right; margin-top: 4px; }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Indicador "Digitando..." */
.typing-indicator { display: flex; align-items: center; padding: 8px 12px; }
.typing-indicator span { height: 8px; width: 8px; background: #8a99a4; border-radius: 50%; margin: 0 2px; animation: typing-blink 1.4s infinite both; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-blink { 0% { opacity: 0.2; } 20% { opacity: 1; } 100% { opacity: 0.2; } }

/* Novo Rodapé do Chat */
.chat-footer {
    background-color: #2a2f32; flex-shrink: 0; padding: 8px 12px; display: flex; align-items: center; gap: 15px;
}
.chat-footer svg { color: #8a99a4; }
.fake-input {
    flex-grow: 1;
    background-color: #3e4448;
    border-radius: 20px;
    padding: 10px 15px;
    color: #8a99a4;
    font-size: 0.9rem;
}

/* Estilo do botão Kiwify */
.cta-button-downsell {
    display: inline-block; background-color: var(--accent-color); color: #111; font-family: var(--font-headline); font-size: 1.4rem; padding: 15px 40px; text-decoration: none; border: none; border-radius: 5px; transition: transform 0.2s, box-shadow 0.2s; text-shadow: none; cursor: pointer; width: 100%; max-width: 500px;
}
.cta-button-downsell:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(196, 170, 131, 0.5); }
.decline-link-downsell { display: block; margin-top: 20px; cursor: pointer; text-decoration: underline; color: #888; transition: color 0.3s; }
.decline-link-downsell:hover { color: var(--text-color); }

/* ========================================================== */
/* --- OTIMIZAÇÃO MOBILE PARA BOTÕES DE UPSELL E DOWNSELL --- */
/* ========================================================== */

@media (max-width: 768px) {
  
  /* Alvo: Botões na página de Upsell */
  .upsell-cta-button {
    font-size: 1rem; /* Reduz o tamanho da fonte */
    padding: 10px 18px; /* Ajusta o preenchimento para um botão menos largo */
  }

  /* Alvo: Botão na página de Downsell */
  .cta-button-downsell {
    font-size: 1rem; /* Reduz o tamanho da fonte */
    padding: 10px 20px; /* Ajusta o preenchimento */
  }

}

/* --- ESTILOS DA PÁGINA DE AFILIADOS --- */

.afiliados-body {
    background-color: #111; /* Um fundo um pouco diferente */
}

.afiliados-page .container {
    padding: 0 20px;
}

.afiliados-header {
    text-align: center;
    padding: 100px 0;
    background-color: var(--bg-color);
}

.afiliados-header p {
    max-width: 700px;
    margin: 30px auto 0 auto;
    color: #aaa;
}

.afiliados-section-title {
    font-family: var(--font-headline);
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 40px;
    color: var(--text-color);
}

/* ========================================================== */
/* --- ESTILOS PARA A NOVA SEÇÃO "O COMANDO" (SCROLL HORIZONTAL) --- */
/* ========================================================== */

/* Define a altura da seção, que determinará a "duração" do scroll horizontal */
.secao-comando {
    height: 300vh; /* 300vh = 3x a altura da tela */
    padding: 0;
}

.comando-wrapper {
    height: 100vh; /* Ocupa a altura total da tela */
    width: 100%;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    overflow: hidden; /* Esconde o conteúdo que está fora da tela */
}

.comando-track {
    display: flex;
    width: 300%; /* 300% porque temos 3 cards */
    height: 100%;
    padding: 0 5vw; /* Adiciona um respiro nas laterais */
}

.dossier-card {
    width: 100%; /* Cada card ocupa 1/3 da largura do track */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5vw; /* Espaçamento entre os cards */
    position: relative;
}

.dossier-number {
    position: absolute;
    top: 10%;
    left: 5vw;
    font-family: var(--font-headline);
    font-size: 8rem;
    color: rgba(255, 255, 255, 0.05);
    z-index: 1;
}

.dossier-card h4 {
    font-family: var(--font-headline);
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.dossier-card p {
    max-width: 500px;
    color: #aaa;
    position: relative;
    z-index: 2;
    line-height: 1.8;
}

.dossier-card ul {
    list-style: none;
    padding-left: 0;
    margin: 20px 0;
    position: relative;
    z-index: 2;
    max-width: 500px;
}
.dossier-card li {
    margin-bottom: 10px;
}

.dossier-result {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #333;
    font-weight: bold;
    position: relative;
    z-index: 2;
    max-width: 500px;
}

/* Responsividade: desativa o scroll horizontal e empilha os cards */
@media (max-width: 768px) {
    .secao-comando {
        height: auto; /* Altura automática */
    }
    .comando-wrapper {
        height: auto;
        position: static; /* Desativa o sticky */
        display: block;
    }
    .comando-track {
        width: 100%;
        flex-direction: column; /* Empilha os cards */
        gap: 60px;
        padding: 0;
    }
    .dossier-card {
        padding: 0; /* Remove padding extra no mobile */
    }
}

/* --- ESTILOS PARA A SEÇÃO "AS REGRAS DO JOGO" --- */
.regras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.regras-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 30px;
    border-radius: 8px;
}
.regras-card h4 {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    margin-bottom: 20px;
}
.regras-card ul {
    list-style: none;
    padding: 0;
}
.regras-card li {
    margin-bottom: 15px;
    padding-left: 35px;
    position: relative;
    line-height: 1.6;
}
.regras-card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    font-size: 1.5rem;
}
/* Estilo para "O que nós oferecemos" */
.regras-card-nos {
    border-left: 3px solid var(--accent-color);
}
.regras-card-nos h4 {
    color: var(--accent-color);
}
.regras-card-nos li::before {
    content: '';
}
/* Estilo para "O que esperamos" */
.regras-card-voce li::before {
    content: '';
}

/* --- ESTILOS PARA A NOVA "TRILHA DA RECOMPENSA" --- */
.trilha-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.trilha-item {
    display: flex;
    align-items: center;
    gap: 30px;
    width: 100%;
    max-width: 600px;
}
.trilha-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background-color: var(--border-color);
    border: 2px solid #444;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-headline);
    font-size: 1.8rem;
    color: var(--text-muted);
}
.trilha-content {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    flex-grow: 1;
}
.trilha-connector {
    width: 2px;
    height: 50px;
    background-color: #333;
}
.trilha-level {
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
}
.trilha-value {
    font-family: var(--font-headline);
    font-size: 2rem;
    line-height: 1.2;
    color: var(--text-color);
    margin: 8px 0;
}
.trilha-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
}
/* Destaques para os níveis mais altos */
.trilha-content.card-elite {
    border-color: #666;
}
.trilha-content.card-soberano {
    border-color: var(--accent-color);
    box-shadow: 0 0 20px rgba(196, 170, 131, 0.1);
}
.trilha-content.card-soberano .trilha-level,
.trilha-content.card-soberano .trilha-value {
    color: var(--accent-color);
}
.trilha-condicao {
    text-align: center;
    margin-top: 40px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .trilha-item {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    .trilha-icon {
        margin-bottom: 10px;
    }
    .trilha-connector {
        height: 40px;
    }
}
/* Estilos para os tiers mais altos */
.card-elite {
    border-color: #555;
}
.card-soberano {
    border-color: var(--accent-color);
    background: radial-gradient(circle, #1a1a1a 0%, #111 100%);
    box-shadow: 0 0 25px rgba(196, 170, 131, 0.15);
}
.card-soberano .recompensa-level,
.card-soberano .recompensa-value {
    color: var(--accent-color);
}

.secao-pilares {
    background-color: var(--bg-color);
}

.pilares-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
}

.pilar-card {
    border: 1px solid #333;
    padding: 30px;
    border-radius: 8px;
    background-color: #1a1a1a;
    position: relative;
    overflow: hidden;
}

.pilar-number {
    position: absolute;
    top: -20px;
    right: 10px;
    font-family: var(--font-headline);
    font-size: 5rem;
    color: rgba(255, 255, 255, 0.05);
    z-index: 1;
}

.pilar-card h4 {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.pilar-card ul {
    list-style: none;
    padding-left: 0;
    margin: 20px 0;
    position: relative;
    z-index: 2;
}
.pilar-card li { margin-bottom: 10px; }

.highlight-data {
    color: var(--accent-color);
    font-weight: 700;
}

.pilar-result {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #333;
    font-weight: bold;
    position: relative;
    z-index: 2;
}

.seletividade-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.seletividade-box {
    padding: 30px;
    border-radius: 8px;
}

.seletividade-box h4 {
    font-family: var(--font-headline);
    font-size: 1.3rem;
    margin-bottom: 20px;
}

.seletividade-box ul {
    list-style: none;
    padding-left: 0;
}
.seletividade-box li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 10px;
}

.seletividade-box li::before {
    position: absolute;
    left: 0;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
}

.seletividade-nao { background-color: rgba(208, 0, 0, 0.1); }
.seletividade-nao li::before { content: '❌'; }

.seletividade-sim { background-color: rgba(196, 170, 131, 0.1); }
.seletividade-sim li::before { content: '✅'; }

.secao-afiliados-cta {
    background-color: var(--bg-color);
}
.afiliados-cta {
    font-size: 1.3rem; /* Um pouco menor para ser mais sóbrio */
}

@media (max-width: 768px) {
    .seletividade-container {
        grid-template-columns: 1fr;
    }
}

/* ========================================================== */
/* --- AJUSTES FINAIS DE LAYOUT E RESPONSIVIDADE (AFILIADOS) --- */
/* ========================================================== */

/* Garante que a lista dentro dos cards dos pilares tenha o marcador correto */
.pilar-card ul {
    list-style-type: none; /* Remove marcadores padrão */
    padding-left: 0;
}

.pilar-card li {
    padding-left: 30px;
    position: relative;
}

.pilar-card li::before {
    content: '✅'; /* Adiciona o marcador de check */
    position: absolute;
    left: 0;
    font-family: sans-serif;
}

/* --- CORREÇÕES PARA DISPOSITIVOS MÓVEIS (MOBILE) --- */
@media (max-width: 768px) {
    /* Adiciona a margem lateral de segurança para toda a página */
    .afiliados-body .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Garante que a grade de pilares vire uma única coluna e se centralize */
    .pilares-grid {
        grid-template-columns: 1fr;
    }

    /* Garante que as caixas de seletividade se empilhem verticalmente */
    .seletividade-container {
        grid-template-columns: 1fr;
    }

    /* Centraliza o texto dentro da caixa de seletividade para melhor harmonia */
    .seletividade-box {
        text-align: center;
    }

    /* Faz a lista dentro da caixa de seletividade se alinhar corretamente */
    .seletividade-box ul {
        display: inline-block;
        text-align: left;
        margin-top: 20px;
    }
}

/* --- ESTILOS DA PÁGINA DE OBRIGADO --- */

.obrigado-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 40px 20px;
}

.obrigado-container {
    width: 100%;
    max-width: 800px;
    text-align: center;
}

.obrigado-header {
    margin-bottom: 60px;
}

.obrigado-logo {
    max-width: 120px;
    margin-bottom: 30px;
    opacity: 0.8;
}

.obrigado-title {
    font-family: var(--font-headline);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--accent-color);
    line-height: 1.2;
}

.obrigado-subtitle {
    font-size: 1.2rem;
    color: var(--text-color);
    margin-top: 15px;
    opacity: 0.9;
}

.instrucoes-box {
    background-color: #111;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 60px;
}

.instrucoes-box h2 {
    font-family: var(--font-headline);
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.instrucoes-lista {
    display: flex;
    flex-direction: column;
    gap: 25px;
    text-align: left;
}

.instrucao-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.instrucao-numero {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: var(--accent-color);
    color: var(--bg-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: bold;
}

.instrucao-texto h3 {
    font-family: var(--font-headline);
    font-size: 1.2rem;
    color: var(--text-color);
    margin-bottom: 5px;
}

.instrucao-texto p {
    font-size: 0.95rem;
    color: #aaa;
    line-height: 1.5;
}

.chamada-irmandade h2 {
    font-family: var(--font-headline);
    color: var(--accent-color);
    font-size: 1.5rem;
}

.chamada-irmandade p {
    max-width: 600px;
    margin: 15px auto;
}

.botao-irmandade {
    display: inline-block;
    background-color: #25D366; /* Cor do WhatsApp */
    color: #fff;
    font-family: var(--font-headline);
    font-size: 1.5rem;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
    font-weight: bold;
}

.botao-irmandade:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.4);
}

.aviso-link {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: 15px;
}

/* ========================================================== */
/* --- ESTILOS PARA A SEÇÃO DE FEEDBACK (PÁGINA DE OBRIGADO) --- */
/* ========================================================== */

.feedback-section {
    background-color: #111;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 40px;
    margin-top: 40px;
    text-align: center;
}

.feedback-section h2 {
    font-family: var(--font-headline);
    color: var(--accent-color);
    margin-bottom: 15px;
}

.feedback-section p {
    color: #aaa;
    margin-bottom: 30px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

#feedback-form .form-group {
    margin-bottom: 20px;
    text-align: left;
}

#feedback-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #ccc;
    font-weight: bold;
}

#feedback-form textarea,
#feedback-form input[type="text"] {
    width: 100%;
    background-color: #1d1d1d;
    border: 1px solid #444;
    border-radius: 5px;
    padding: 12px;
    font-family: var(--font-primary);
    color: var(--text-color);
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

#feedback-form textarea:focus,
#feedback-form input[type="text"]:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(196, 170, 131, 0.3);
}

#feedback-form .cta-button {
    width: 100%;
    padding: 15px;
}

#form-success-message {
    padding: 40px 20px;
}

#form-success-message h2 {
    font-size: 2.5rem;
}

/* --- ESTILOS DA NOTIFICAÇÃO DE PROVA SOCIAL --- */
/* ESTILOS DA NOTIFICAÇÃO DE PROVA SOCIAL */
.notification {
    position: fixed; 
    bottom: 20px;
    right: 20px; /* <<< ALTERADO AQUI: Posição no canto direito */
    left: auto;   /* <<< ADICIONADO PARA GARANTIA: Remove a posição da esquerda */
    background-color: #252525;
    color: var(--text-color);
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid var(--accent-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 2000; /* Garante que fique acima de tudo */

    /* Estado inicial (escondido) */
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
    transition: opacity 0.5s, transform 0.5s, visibility 0.5s;
}

/* Classe que torna a notificação visível */
.notification.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.notification p {
    margin: 0;
    font-size: 0.9rem;
}

.notification-name {
    font-weight: bold;
    color: var(--accent-color);
}

/* Delay para animações sequenciais */
.anim-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.anim-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.anim-on-scroll:nth-child(4) { transition-delay: 0.3s; }
.anim-on-scroll:nth-child(5) { transition-delay: 0.4s; }


/* --- RESPONSIVIDADE --- */
@media (max-width: 768px) {
    body { font-size: 16px; }
    .secao { padding: 60px 0; }
    .product-intro, .two-paths { flex-direction: column; }
    .product-text { text-align: center; }
    .notification {
    top: 15px;          /* Posiciona a 15px do topo */
    bottom: auto;       /* Remove o posicionamento inferior que vem do desktop */
    left: 15px;         /* Mantém um espaçamento lateral */
    right: 15px;        /* Mantém um espaçamento lateral */
    width: auto;          /* Permite que a largura se ajuste ao espaço */
    transform: translateY(-150%); }
    .secao-1-impacto {
    justify-content: flex-start; /* Alinha o conteúdo no topo */
    padding-top: 100px; }
    .price-main {
    gap: 10px; /* Reduz o espaço entre "12x" e o valor */
    flex-wrap: wrap; /* Permite que quebre a linha se necessário */
    justify-content: center;} 
    .price-installments {
    font-size: 2rem;}
    .price-value {
    font-size: 4rem;}
    .price-prefix, .price-descriptor {
    font-size: 1rem;}