/* ==========================================================================
   A BATALHA PELA PUREZA — Folha de estilo principal
   Extraída dos blocos <style> inline da exportação Google Stitch.
   Regra: identidade visual imutável. Referência: docs/DESIGN.md
   ========================================================================== */

/* --- Ícones de metal ------------------------------------------------------
   Substituem a fonte Material Symbols (1,13 MB para 14 glifos). Cada ícone é
   uma medalha cunhada do mesmo sistema das insígnias de patente, então a
   página inteira passa a falar um material só. */
.icone-metal {
    object-fit: contain;
}

/* --- Textura "gritty" (ruído SVG inline em data-URI) ---------------------- */
/* O SVG original só declarava viewBox, sem width/height. Sem tamanho
   intrínseco e com background-size:auto, o navegador ESTICAVA um ruído de
   200x200 para cobrir o elemento inteiro — numa seção de 1440x1202 isso é
   ampliação de ~7x, e o grão virava bloco. Agora o SVG tem tamanho próprio e
   o fundo ladrilha nele. feTurbulence usa stitchTiles='stitch', então as
   emendas do ladrilho não aparecem. */
.gritty-bg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.055'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    background-repeat: repeat;
}

/* --- Borda de acento (citação / Cláusula da Graça) ------------------------ */
.accent-border-left {
    border-left: 4px solid #f39c12;
}

/* --- Altura mínima do corpo (herdado da exportação) ----------------------- */
body {
    min-height: max(884px, 100dvh);
}

/* ==========================================================================
   IMAGENS DE FUNDO — migradas de style="" inline para classes utilitárias.
   Os arquivos foram baixados do CDN da exportação para assets/img/,
   eliminando a dependência de URLs temporárias do Google Stitch.
   ========================================================================== */
/* .hero-bg-image vivia aqui. É a textura do herói do desafio, e só o desafio
   a usa — nesta página a regra veio de carona na cópia da folha de estilo,
   pedindo um arquivo que nunca foi copiado junto. Removida: CSS morto que
   aponta para 404 é a mesma armadilha que apagou a capa no celular. */


/* ==========================================================================
   CAMADA DE FUNIL — estilos de suporte às Três Portas de Entrada.
   Nenhum destes seletores altera o estado visual padrão da página:
   os blocos das Portas 2 e 3 nascem com o atributo [hidden] e só são
   revelados por assets/js/main.js quando habilitados na configuração.
   ========================================================================== */
[data-porta][hidden],
[data-portas-escalonadas][hidden] {
    display: none !important;
}

/* ==========================================================================
   AS DUAS TRILHAS — patentes, medalha e a passagem entre elas
   --------------------------------------------------------------------------
   Regra que governa este bloco: a medalha é o único elemento circular da
   página. O DESIGN.md reserva o círculo exclusivamente para indicadores de
   status, num sistema de raio 0 — então o círculo carrega significado aqui,
   e não decoração. Tudo que o cerca permanece de canto reto.
   ========================================================================== */

:root {
    /* Ouro da medalha. Amostrado do comp aprovado (.impeccable/mocks/comp-a-escada.jpg).
       Deliberadamente distinto do âmbar #f39c12 dos CTAs: se a medalha usasse
       a cor do botão, ela leria como interface em vez de metal. */
    --abp-ouro: #ddb46a;
    --abp-ambar: #f39c12;
}

/* --- Medalha no herói ----------------------------------------------------- */
.medalha-heroi {
    /* Sem halo: o DESIGN.md faz profundidade por camada tonal e contorno
       sólido. O bisel do próprio metal já separa a medalha do fundo. */
}

/* --- Insígnias de patente ------------------------------------------------- */
.patente-insignia {
    /* idem: sem halo decorativo. */
}

/* --- A escada: fio âmbar costurando as patentes no mobile ----------------- */
.escada {
    list-style: none;
}

.escada::before {
    content: "";
    position: absolute;
    /* Centro real da insígnia: padding 20px + metade da largura dela.
       A insígnia é 64px abaixo de 360 e 80px a partir daí. */
    left: 52px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        transparent 0,
        var(--abp-ambar) 6%,
        var(--abp-ambar) 94%,
        transparent 100%
    );
    opacity: 0.7;
    z-index: 0;
}

@media (min-width: 360px) {
    .escada::before {
        left: 61px;
    }
}

.escada > .patente {
    z-index: 1;
}

@media (min-width: 640px) and (max-width: 1023.98px) {
    /* Entre 640 e 1023 a escada é uma grade de 2 colunas: um fio vertical
       na coluna esquerda não costura nada e lê como sujeira de render. */
    .escada::before {
        display: none;
    }
}

@media (min-width: 1024px) {
    /* No desktop a escada vira grade de 4 colunas: o fio deita e passa a
       costurar as insígnias horizontalmente, na altura do centro delas
       (padding 24px + metade de 96px). */
    .escada::before {
        left: 0;
        right: 0;
        top: 72px;
        bottom: auto;
        width: auto;
        height: 2px;
        background: linear-gradient(
            to right,
            transparent 0,
            var(--abp-ambar) 8%,
            var(--abp-ambar) 92%,
            transparent 100%
        );
    }
}

/* --- A passagem entre as duas trilhas ------------------------------------- */
.passagem {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.passagem::before,
.passagem::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.25;
}


/* --- Bloco Graça + Medalha ------------------------------------------------ */
.graca-medalha {
    background-image: linear-gradient(
        to right,
        rgba(221, 180, 106, 0.05),
        transparent 60%
    );
}

/* ==========================================================================
   SISTEMA DE CARDS — vidro fosco e canto arredondado
   --------------------------------------------------------------------------
   Mudança de sistema aprovada pelo cliente em 2026-08-28, registrada em
   docs/DESIGN.md. Ela substitui a estratégia "Sharp (0)" original.

   Motivo além do gosto: a página tinha TRÊS tratamentos de card diferentes
   (bg-surface + rounded, bg-surface-container-lowest sem raio, bg-surface
   sem raio) em três dobras seguidas. Era essa mistura que lia como quebra
   visual entre "O Vício Invisível" e as seções abaixo. Um sistema só resolve.
   ========================================================================== */

:root {
    --abp-raio-card: 16px;
    --abp-raio-controle: 10px;
}

.card-glass {
    position: relative;
    border-radius: var(--abp-raio-card);
    border: 1px solid rgba(255, 255, 255, 0.10);
    background-image: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.055) 0%,
        rgba(255, 255, 255, 0.018) 55%,
        rgba(255, 255, 255, 0.008) 100%
    );
    background-color: rgba(20, 20, 20, 0.55);
    /* O desfoque pega o grão e o fundo do herói por trás, então o vidro
       tem o que refratar em vez de virar um retângulo cinza chapado. */
    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    /* Realce interno de 1px no topo: é o que faz a superfície parecer vidro
       e não uma caixa translúcida. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075);
    transition: border-color 200ms ease, background-color 200ms ease;
}

.card-glass:hover {
    border-color: rgba(243, 156, 18, 0.45);
    background-color: rgba(24, 22, 20, 0.6);
}

/* Variante de ouro: patentes, segunda trilha e Cláusula da Graça — tudo que
   pertence ao eixo da medalha em vez do eixo do desafio. */
.card-glass-ouro {
    border-color: rgba(221, 180, 106, 0.32);
}

.card-glass-ouro:hover {
    border-color: rgba(221, 180, 106, 0.6);
}

/* Campo de formulário no mesmo material dos cards. */
.campo-glass {
    border-radius: var(--abp-raio-controle);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Marca das espadas na abertura. */
.marca-heroi {
    display: block;
}

/* Navegadores sem backdrop-filter recebem um fundo sólido equivalente, para
   o card nunca ficar transparente demais e comer o contraste do texto. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .card-glass {
        background-color: rgba(28, 27, 27, 0.96);
    }
    .campo-glass {
        background-color: rgba(10, 10, 10, 0.96);
    }
}

/* ==========================================================================
   FUNDO DA DOBRA DAS TRILHAS
   --------------------------------------------------------------------------
   A seção mede 1440x1202 no desktop. Antes era um #131313 chapado com o grão
   esticado por cima (ver a nota em .gritty-bg). Além do grão errado, faltava
   profundidade: uma superfície plana desse tamanho achata os cards de vidro,
   que precisam de algo atrás para refratar.
   ========================================================================== */
#trilhas {
    background-image:
        /* brasa âmbar entrando pelo alto, do mesmo lado que a luz do herói */
        radial-gradient(
            120% 70% at 18% -10%,
            rgba(243, 156, 18, 0.10) 0%,
            rgba(243, 156, 18, 0.035) 35%,
            transparent 70%
        ),
        /* queda tonal vertical: a seção escurece conforme desce */
        linear-gradient(
            180deg,
            #171614 0%,
            #121110 45%,
            #0d0d0c 100%
        );
}

/* Grão por cima do gradiente, ladrilhado no tamanho certo. */
#trilhas::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)' opacity='0.05'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    background-repeat: repeat;
}

/* O conteúdo precisa ficar acima do véu de grão. */
#trilhas > * {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   BARRA DE CTA FIXA — mobile
   --------------------------------------------------------------------------
   A revisão mediu o botão do herói em 752→840 num viewport de 360px e em
   781→869 num de 320px: abaixo da dobra nos dois. E entre o herói e o
   fechamento existem milhares de pixels sem nenhum CTA à vista.
   Uma barra fixa no rodapé resolve os dois de uma vez, e coloca o botão na
   zona do polegar em vez do canto superior direito.
   ========================================================================== */
.barra-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(10, 10, 10, 0.97) 60%, rgba(10, 10, 10, 0));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 767.98px) {
    /* Impede que a barra cubra o fim do conteudo (rodape e ultimo CTA).
       Medido a 390px: 12 + 65 + 12 = 89px de barra, mais folga e a area
       segura do aparelho. O botao tem duas linhas (titulo + "e gratis"). */
    body {
        padding-bottom: calc(97px + env(safe-area-inset-bottom, 0px));
    }
}


/* ==========================================================================
   DISCIPULADO BÍBLICO — estilos próprios da página da segunda trilha
   --------------------------------------------------------------------------
   Esta é a "Trilha dos Discípulos": o eixo da medalha, não o eixo do desafio.
   Por isso o acento primário aqui é o OURO (#ddb46a), reservado no DESIGN.md
   para tudo que pertence à medalha; o âmbar (#f39c12) fica só no botão de
   conversão. Estética "The Chosen": luz quente, hora dourada, convite.
   ========================================================================== */

/* --- Herói cinematográfico ------------------------------------------------ */
.hero-disc {
    /* imagem de hora dourada com os três caminhando; o scrim garante que o
       texto branco por cima seja legível sem apagar a luz. */
    background-image:
        linear-gradient(to bottom, rgba(10,9,8,0.55) 0%, rgba(10,9,8,0.15) 35%, rgba(10,9,8,0.65) 78%, rgba(10,9,8,0.96) 100%),
        url('../img/hero-discipulado.jpg');
    background-size: cover;
    background-position: center 42%;
}
@media (max-width: 767.98px) {
    .hero-disc {
        background-image:
            linear-gradient(to bottom, rgba(10,9,8,0.5) 0%, rgba(10,9,8,0.2) 30%, rgba(10,9,8,0.72) 72%, rgba(10,9,8,0.97) 100%),
            url('../img/hero-discipulado-mobile.jpg');
    }
}

/* Fio de luz sob o título do herói: um brilho dourado sutil, não um bloco. */
.brilho-ouro {
    text-shadow: 0 2px 40px rgba(221, 180, 106, 0.25), 0 1px 3px rgba(0,0,0,0.6);
}

/* --- Selo/etiqueta de olho (JetBrains Mono) ------------------------------- */
.olho-ouro {
    color: var(--abp-ouro);
    letter-spacing: 0.28em;
}

/* --- Lista dos 8 estudos: numeração cunhada ------------------------------- */
.estudo-num {
    font-family: "JetBrains Mono", monospace;
    color: var(--abp-ouro);
    font-weight: 700;
    /* tabular para os números ficarem alinhados em coluna */
    font-variant-numeric: tabular-nums;
}

/* --- O arco estudos -> arrependimento -> batismo -------------------------- */
.arco-passo {
    position: relative;
}
/* conector vertical no mobile, horizontal no desktop */
.arco-passo:not(:last-child)::after {
    content: "";
    position: absolute;
    background: linear-gradient(var(--dir, to bottom), var(--abp-ouro), rgba(221,180,106,0.15));
    opacity: 0.55;
}
@media (max-width: 767.98px) {
    .arco-passo:not(:last-child)::after {
        left: 27px; top: 56px; width: 2px; height: calc(100% - 40px);
    }
}
@media (min-width: 768px) {
    .arco-passo:not(:last-child)::after {
        top: 27px; left: 56px; height: 2px; width: calc(100% - 40px);
        --dir: to right;
    }
}

/* --- Agendador: chips de dia e período ------------------------------------ */
.chip {
    border: 1px solid rgba(221, 180, 106, 0.35);
    border-radius: var(--abp-raio-controle);
    background: rgba(20, 20, 20, 0.5);
    color: #e5e2e1;
    padding: 0.7rem 0.5rem;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 160ms ease;
    -webkit-tap-highlight-color: transparent;
}
.chip:hover {
    border-color: rgba(221, 180, 106, 0.7);
}
.chip[aria-pressed="true"] {
    background: var(--abp-ouro);
    color: #1a1206;
    border-color: var(--abp-ouro);
    font-weight: 700;
}

/* --- FAQ: acordeão com <details>/<summary> -------------------------------- */
.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.25rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-weight: 700;
    color: #fff;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    font-family: "JetBrains Mono", monospace;
    color: var(--abp-ouro);
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 200ms ease;
    flex-shrink: 0;
}
.faq-item[open] summary::after {
    transform: rotate(45deg);
}
.faq-item .faq-corpo {
    padding-bottom: 1.25rem;
    color: #d8c3ad;
    line-height: 1.6;
}

/* --- Barra CTA fixa no mobile (reaproveita a lógica do desafio) ----------- */
.barra-cta-disc {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(10,10,10,0.97) 60%, rgba(10,10,10,0));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 767.98px) {
    body.tem-barra-cta {
        padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
    }
}