/* ==========================================================================
   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 {
    /* Textura abstrata 2048x1152, sem texto embutido e sem cena.
       Substitui o export do Stitch, que trazia "Setembro Santo" e
       "Landing Page" queimados no arquivo e só tinha 768px de altura. */
    background-image: url('../img/hero-bg-textura.jpg');
}


/* ==========================================================================
   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));
    }
}