/* ===================================================================
   VOLTACRED — folha de estilo única
   Usada por TODAS as páginas, sempre via layouts/base.html. Não existe
   página com <style> próprio: quem precisa de algo novo acrescenta uma
   seção aqui.

   SUMÁRIO
   01. Tokens              08. Cartões e grades      15. Documento legal
   02. Reset e base        09. Figuras               16. Barra fixa (mobile)
   03. Tipografia          10. Tabela                17. Aviso de cookies
   04. Layout              11. Caixas de destaque    18. Rodapé
   05. Barra e cabeçalho   12. Listas                19. Utilitários
   06. Botões              13. FAQ                   20. Movimento
   07. Selos               14. Formulário            21. Impressão
                                                     22. Diagnóstico
                                                     23. Página de erro
                                                     24. Oferta e prova
                                                     30. Tema vermelho
                                                         (funil do Rating Pro+)
                                                     31. Tema azul
                                                         (funil por WhatsApp)
   =================================================================== */


/* 01. TOKENS ------------------------------------------------------- */
:root {
    color-scheme: light;

    /* Superfícies */
    --bg: #FFFFFF;
    --bg2: #F2F4F3;
    --bg3: #EAF3ED;
    --line: #D8DFDA;

    /* Texto — todos acima de 4.5:1 sobre --bg */
    --ink: #101B16;
    --ink2: #2B3A33;
    --soft: #5A6862;

    /* Verde institucional. --cta tem 5.09:1 com branco: é o único que pode
       receber texto branco por cima e continuar legível (WCAG AA). */
    --cta: #0D7F49;
    --cta2: #0A6539;

    /* Alerta */
    --alerta: #C2410C;
    --alerta-bg: #FEF3EC;

    /* Verde de confirmação. Não muda com o tema da página: verde-sucesso é
       convenção de interface, não cor de marca — e é justamente por ser a
       mesma em todo lugar que ela é lida como "deu certo" sem precisar de
       legenda. Tem 6,28:1 sobre o fundo dos cards, acima do 4,5:1 da WCAG AA. */
    --sucesso: #0A6539;

    /* Medidas */
    --w: 1080px;
    --w-prosa: 720px;
    --gut: 20px;
    --raio: 10px;
    --raio-lg: 14px;
    --topo: 62px;

    /* Efeitos */
    --sombra: 0 1px 3px rgba(16, 27, 22, .07);
    --sombra-lg: 0 10px 28px rgba(16, 27, 22, .10);
}


/* 02. RESET E BASE ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; }
img { height: auto; display: block; }

/* Um único anel de foco para tudo que é focável. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--cta);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Âncoras não ficam escondidas atrás do cabeçalho fixo. */
:target,
[id] { scroll-margin-top: calc(var(--topo) + 18px); }

.pular {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--ink);
    color: #fff;
    padding: 12px 18px;
    border-radius: 0 0 var(--raio) 0;
    font-weight: 600;
    text-decoration: none;
}
.pular:focus { left: 0; }


/* 03. TIPOGRAFIA --------------------------------------------------- */
h1, h2, h3, h4 {
    color: var(--ink);
    letter-spacing: -.018em;
    text-wrap: balance;
}

h1 {
    font-size: clamp(30px, 6.2vw, 46px);
    font-weight: 800;
    line-height: 1.08;
    margin: 0 0 14px;
}

h2 {
    font-size: clamp(23px, 4vw, 31px);
    font-weight: 700;
    line-height: 1.16;
    margin: 0 0 14px;
}

h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 6px;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--cta); text-underline-offset: 2px; }
a:hover { color: var(--cta2); }

strong, b { font-weight: 600; color: var(--ink); }

/* A regra acima escurece o negrito de propósito, para ele destacar dentro de
   texto em --soft. Em superfície escura isso pinta quase-preto sobre
   quase-preto e o negrito some: nessas, o negrito herda a cor do container. */
:is(.barra, .pular, .btn, .aviso-cookies) :is(b, strong) { color: inherit; }
small { font-size: 13.5px; }

.olho {
    font-size: clamp(17px, 2.4vw, 19px);
    color: var(--soft);
    max-width: 62ch;
}
.olho b { color: var(--ink); }

.legenda { font-size: 13.5px; color: var(--soft); }


/* 04. LAYOUT ------------------------------------------------------- */
.wrap {
    max-width: var(--w);
    margin-inline: auto;
    padding-inline: var(--gut);
}
.wrap--prosa { max-width: var(--w-prosa); }

section { padding: clamp(38px, 6vw, 62px) 0; }
section + section { border-top: 1px solid var(--line); }

.cabeca-secao { max-width: 62ch; margin-bottom: 26px; }
.cabeca-secao p { color: var(--soft); margin-bottom: 0; }

.rotulo {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cta);
    margin-bottom: 10px;
}


/* 05. BARRA E CABEÇALHO -------------------------------------------- */
.barra {
    background: var(--ink);
    color: #fff;
    font-size: 13.5px;
    line-height: 1.35;
    padding: 8px 0;
    text-align: center;
}
.barra a { color: #fff; }

.topo {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .2s ease;
}
.topo.rolou { box-shadow: 0 4px 14px rgba(16, 27, 22, .08); }

.topo .wrap {
    min-height: var(--topo);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.logo {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--ink);
    text-decoration: none;
}
.logo span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--soft);
}

.nav ul {
    display: flex;
    align-items: center;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* O :not(.btn) é essencial. Sem ele, `.nav a` (0,2,0) vence o `.btn`
   (0,1,0) e pinta o texto do botão de --ink2 sobre o verde; e `.nav a:hover`
   (0,2,1) vence o `.btn:hover`, deixando verde sobre verde no hover — texto
   invisível. O botão do menu é botão, não link de navegação. */
.nav a:not(.btn) {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink2);
    text-decoration: none;
}
.nav a:not(.btn):hover { color: var(--cta); }
.nav .btn { font-size: 14.5px; padding: 9px 16px; }

.menu-btn {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--raio);
    color: var(--ink);
    cursor: pointer;
}

@media (max-width: 940px) {
    .menu-btn { display: inline-flex; }

    .nav {
        position: absolute;
        top: 100%;
        left: var(--gut);
        right: var(--gut);
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: var(--raio-lg);
        box-shadow: var(--sombra-lg);
        padding: 10px;
        display: none;
    }
    .nav[data-aberto="true"] { display: block; }

    .nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
    .nav li { width: 100%; }
    /* O :not(.btn) aqui também. `.nav a` (0,2,0) vence `.btn` (0,1,0): sem
       a exclusão, o display:block sobrescreve o inline-flex do botão e mata
       a centralização; e o :hover pintaria --bg2 sobre o verde, sumindo com
       o texto branco dentro do menu aberto. */
    .nav a:not(.btn) {
        display: block;
        padding: 12px;
        border-radius: 8px;
        font-size: 16px;
    }
    .nav a:not(.btn):hover { background: var(--bg2); }

    /* O botão continua inline-flex, então o justify-content: center do .btn
       centraliza sozinho — não precisa de text-align. */
    .nav .btn { margin-top: 6px; width: 100%; }
}


/* 06. BOTÕES ------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 13px 22px;
    font: inherit;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: var(--cta);
    border: 1.5px solid var(--cta);
    border-radius: var(--raio);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--cta2); border-color: var(--cta2); color: #fff; }

.btn--sec {
    color: var(--cta);
    background: var(--bg);
    border-color: var(--line);
}
.btn--sec:hover { color: var(--cta2); background: var(--bg3); border-color: var(--cta); }

.btn--bloco { display: flex; width: 100%; }

/* Brilho que atravessa o botão uma vez a cada 8 segundos. A varredura leva
   pouco mais de 1s e o resto do ciclo é espera parada: lê como acabamento,
   não como alerta piscando. Anima transform, não `left`, para o trabalho
   ficar na GPU e não forçar layout a cada quadro. */
.btn--brilho { position: relative; overflow: hidden; }
.btn--brilho::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    background: linear-gradient(100deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, .38) 50%,
                rgba(255, 255, 255, 0) 100%);
    transform: translateX(-260%) skewX(-18deg);
    animation: btn-brilho 8s ease-in-out infinite;
    pointer-events: none;
}

/* Com as opções à vista, o CTA da barra é redundante — um brilho apontando
   para onde o visitante já está olhando é ruído. */
.btn--brilho.quieto::after { animation: none; opacity: 0; }

@keyframes btn-brilho {
    0%, 86% { transform: translateX(-260%) skewX(-18deg); }
    100%    { transform: translateX(320%) skewX(-18deg); }
}

.btn[disabled] {
    background: var(--bg2);
    border-color: var(--line);
    color: #8A9590;
    cursor: not-allowed;
}

.btn i { display: block; font-size: 13px; font-weight: 500; font-style: normal; opacity: .92; }
.btn .ico { flex: 0 0 auto; }

.acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 22px 0 0;
}
.acoes .btn { flex: 1 1 240px; }


/* 07. SELOS -------------------------------------------------------- */
.selos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    color: var(--soft);
}
.selos li {
    background: var(--bg2);
    border-radius: 20px;
    padding: 6px 13px;
}


/* 08. CARTÕES E GRADES --------------------------------------------- */
.grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.cartao {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--raio-lg);
    padding: 22px;
    box-shadow: var(--sombra);
}
.cartao h3 { margin-bottom: 8px; }
.cartao p { font-size: 15.5px; color: var(--soft); }

.cartao--suave { background: var(--bg2); border-color: transparent; box-shadow: none; }

.numero {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--bg3);
    color: var(--cta2);
    font-size: 14px;
    font-weight: 800;
}

.hero {
    padding: clamp(30px, 5vw, 54px) 0 clamp(32px, 5vw, 50px);
}
.hero .selos { margin-top: 20px; }

.duas-colunas {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(24px, 4vw, 46px);
    align-items: center;
}
@media (max-width: 880px) {
    .duas-colunas { grid-template-columns: 1fr; }
}


/* 09. FIGURAS ------------------------------------------------------ */
figure {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--raio-lg);
    overflow: hidden;
    background: var(--bg2);
}
figure img { width: 100%; aspect-ratio: 12 / 7; object-fit: cover; }
figcaption {
    padding: 12px 15px;
    font-size: 13.5px;
    color: var(--soft);
    border-top: 1px solid var(--line);
    background: var(--bg);
}


/* 10. TABELA ------------------------------------------------------- */
.rolagem-x { overflow-x: auto; }

.tab {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    font-size: 15.5px;
}
/* Tabela curta de comparação: sem min-width ela cabe no celular sem rolar.
   A de 420px continua valendo para as tabelas longas das páginas legais. */
.tab--compacta { min-width: 0; }
.tab--compacta :is(th, td):not(:first-child) {
    width: 84px;
    padding-inline: 6px;
    text-align: center;
}
/* O nowrap global do cabeçalho estourava a largura desta variante. */
.tab--compacta thead th { white-space: normal; }

.tab caption {
    caption-side: bottom;
    padding-top: 12px;
    font-size: 13.5px;
    color: var(--soft);
    text-align: left;
}
.tab th, .tab td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.tab thead th {
    font-size: 13px;
    font-weight: 600;
    color: var(--soft);
    white-space: nowrap;
}
.tab tbody th { font-weight: 500; color: var(--ink); }


/* 11. CAIXAS DE DESTAQUE ------------------------------------------- */
.destaque {
    background: var(--bg3);
    border-left: 3px solid var(--cta);
    border-radius: 0 var(--raio) var(--raio) 0;
    padding: 18px 20px;
    margin: 22px 0;
}
.destaque :is(h2, h3) { margin-bottom: 8px; }

.aviso {
    background: var(--alerta-bg);
    border-left: 3px solid var(--alerta);
    border-radius: 0 var(--raio) var(--raio) 0;
    padding: 18px 20px;
    margin: 22px 0;
}
.aviso strong { color: #8A2C08; }


/* 12. LISTAS ------------------------------------------------------- */
.checks, .limites {
    list-style: none;
    margin: 0;
    padding: 0;
}
.checks li, .limites li {
    position: relative;
    padding: 11px 0 11px 28px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
}
.checks li:last-child, .limites li:last-child { border-bottom: 0; }

.checks li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--cta);
    font-weight: 800;
}
.limites li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--soft);
}

.lista-pontos { margin: 0 0 1em; padding-left: 22px; }
.lista-pontos li { margin-bottom: 7px; }
.lista-pontos li:last-child { margin-bottom: 0; }
.lista-pontos::marker { color: var(--cta); }


/* 13. FAQ ---------------------------------------------------------- */
details {
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
}
details:last-of-type { border-bottom: 0; }

summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: var(--soft);
}
details[open] summary::after { content: "–"; }

details > :not(summary) {
    margin-top: 10px;
    font-size: 15.5px;
    color: var(--soft);
    max-width: 68ch;
}


/* 14. FORMULÁRIO --------------------------------------------------- */
.form {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
.form[hidden] { display: none; }

.campo { margin-bottom: 15px; }
.campo label {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 6px;
}
.campo .dica { font-weight: 400; color: var(--soft); }

input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
    width: 100%;
    padding: 13px 14px;
    font: inherit;
    font-size: 16px;
    color: var(--ink);
    background: var(--bg);
    border: 1.5px solid var(--line);
    border-radius: 8px;
}
textarea { resize: vertical; min-height: 96px; }

input:hover, textarea:hover { border-color: #BFC9C3; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--alerta); }

.consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 16px 0 18px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--soft);
    cursor: pointer;
}
.consent input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--cta);
}

.retorno {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--bg3);
    font-size: 14.5px;
    color: var(--ink2);
}
.retorno[hidden] { display: none; }


/* 15. DOCUMENTO LEGAL ---------------------------------------------- */
.doc { padding-bottom: clamp(40px, 6vw, 70px); }

.doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 18px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--raio);
    background: var(--bg2);
    font-size: 14px;
    color: var(--soft);
}
.doc-meta b { color: var(--ink); }

.sumario {
    margin: 30px 0 8px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--raio-lg);
    background: var(--bg);
}
.sumario h2 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--soft);
    margin-bottom: 12px;
}
.sumario ol {
    margin: 0;
    padding-left: 20px;
    columns: 2;
    column-gap: 30px;
    font-size: 15px;
}
.sumario li { margin-bottom: 6px; break-inside: avoid; }
.sumario a { text-decoration: none; color: var(--ink2); }
.sumario a:hover, .sumario a[aria-current="true"] {
    color: var(--cta);
    text-decoration: underline;
}
@media (max-width: 620px) { .sumario ol { columns: 1; } }

.artigo > section {
    padding: 30px 0;
    border-top: 1px solid var(--line);
}
.artigo > section:first-of-type { border-top: 0; }
.artigo h2 { font-size: clamp(20px, 3vw, 25px); }
.artigo h3 { font-size: 17px; margin: 22px 0 8px; }
.artigo p, .artigo li { color: var(--ink2); }
.artigo :is(p, ul, ol, table) { max-width: 68ch; }

.voltar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    font-weight: 600;
    text-decoration: none;
}
.voltar:hover { text-decoration: underline; }


/* 16. BARRA FIXA (MOBILE) ------------------------------------------ */
.fixo {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 25;
    display: none;
    padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(8px);
}
.fixo .btn { width: 100%; }

/* A barra só existe no mobile, mas o diagnóstico a esconde até o
   resultado sair. Sem !important o media query venceria o hidden. */
.fixo[hidden] { display: none !important; }

@media (max-width: 700px) {
    .fixo { display: block; }
    body.tem-fixo { padding-bottom: 82px; }
}


/* 17. AVISO DE COOKIES --------------------------------------------- */
/* Cartão pequeno no canto inferior esquerdo, não uma faixa de largura
   inteira: o aviso é obrigatório, mas não é o conteúdo da página. */
.aviso-cookies {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 40;
    width: min(320px, calc(100vw - 40px));
    padding: 14px 16px;
    background: var(--ink);
    color: #E8EDEA;
    border-radius: var(--raio-lg);
    box-shadow: 0 12px 30px rgba(16, 27, 22, .28);
}
.aviso-cookies[hidden] { display: none; }

.aviso-cookies p {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.45;
}
.aviso-cookies a { color: #fff; text-underline-offset: 2px; }

.aviso-cookies__btns { display: flex; gap: 8px; }

.aviso-cookies button {
    flex: 1;
    min-height: 34px;
    padding: 7px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: #E8EDEA;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 7px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.aviso-cookies button:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
}
.aviso-cookies button[data-consent="aceito"] {
    background: var(--cta);
    border-color: var(--cta);
    color: #fff;
}
.aviso-cookies button[data-consent="aceito"]:hover {
    background: var(--cta2);
    border-color: var(--cta2);
}
.aviso-cookies :where(a, button):focus-visible { outline-color: #fff; }

@media (max-width: 700px) {
    .aviso-cookies { left: 12px; right: 12px; bottom: 12px; width: auto; }
    /* Nas páginas com a barra fixa do WhatsApp, o popup flutua acima dela. */
    body.tem-fixo .aviso-cookies {
        bottom: calc(92px + env(safe-area-inset-bottom));
    }
}


/* 18. RODAPÉ ------------------------------------------------------- */
.rodape {
    border-top: 1px solid var(--line);
    background: var(--bg2);
    padding: 44px 0 30px;
    font-size: 15px;
}
.rodape-grade {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: 30px;
}
@media (max-width: 780px) { .rodape-grade { grid-template-columns: 1fr; gap: 26px; } }

.rodape h2 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--soft);
    margin-bottom: 12px;
}
.rodape p { margin: 0 0 .5em; color: var(--soft); }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 8px; }
.rodape a { color: var(--ink2); text-decoration: none; }
.rodape a:hover { color: var(--cta); text-decoration: underline; }

.contato-lista li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    color: var(--soft);
}
.contato-lista .ico { flex: 0 0 auto; margin-top: 3px; color: var(--cta); }

/* Privacidade e Termos ficam em linha própria: dentro da lista de
   navegação eles somem no meio dos links de seção. */
.rodape-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.rodape-legal a {
    font-weight: 600;
    color: var(--ink2);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.rodape-legal a:hover { color: var(--cta); }

.rodape-base {
    margin-top: 18px;
    font-size: 13.5px;
    color: var(--soft);
}
.rodape-base p { font-size: 13.5px; }


/* 19. UTILITÁRIOS -------------------------------------------------- */
.so-leitor {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ico--cheio { fill: currentColor; stroke: none; }

.sem-margem { margin: 0; }


/* 20. MOVIMENTO ---------------------------------------------------- */
.surge {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .45s ease, transform .45s ease;
}
.surge.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        /* Sem isto, uma animação `infinite` continua repetindo — só que a
           cada .001ms, o que vira tremulação em taxa máxima de quadros.
           Limitar a uma iteração é o que realmente desliga o movimento. */
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .surge { opacity: 1; transform: none; }
}

/* 22. DIAGNÓSTICO -------------------------------------------------- */
/* Micro-funil de 3 perguntas usado nas páginas de captação: quiz →
   análise → resultado parcial → WhatsApp. Tudo com prefixo .diag- para
   não colidir com .checks, .fixo, .voltar e .form, que já existem. */

.diag-card {
    border: 1px solid var(--line);
    border-radius: var(--raio-lg);
    background: var(--bg);
    box-shadow: var(--sombra-lg);
    overflow: hidden;
    max-width: 560px;
}
.hero .diag-card { margin-top: 26px; }

.diag-card__topo {
    padding: 14px 18px;
    background: var(--bg2);
    border-bottom: 1px solid var(--line);
}
.diag-card__etapa {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--soft);
}
.diag-trilho {
    height: 4px;
    margin-top: 10px;
    border-radius: 3px;
    background: var(--line);
    overflow: hidden;
}
.diag-trilho span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: var(--cta);
    transition: width .32s cubic-bezier(.4, 0, .2, 1);
}

.diag-card__corpo { padding: 22px 18px 24px; }

.diag-passo[hidden], .diag-analise[hidden], .diag-resultado[hidden] { display: none; }
.diag-passo, .diag-analise, .diag-resultado { animation: diag-entra .26s ease both; }

@keyframes diag-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.diag-pergunta {
    font-size: clamp(19px, 4.4vw, 22px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.012em;
    margin: 0 0 5px;
}
.diag-dica { font-size: 14px; color: var(--soft); margin: 0 0 16px; }

.diag-opcoes { display: grid; gap: 9px; }

.diag-opcao {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px;
    font: inherit;
    font-size: 16.5px;
    font-weight: 500;
    text-align: left;
    color: var(--ink);
    background: var(--bg);
    border: 1.5px solid var(--line);
    border-radius: var(--raio);
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease, transform .08s ease;
}
.diag-opcao:hover { border-color: var(--cta); background: var(--bg3); }
.diag-opcao:active { transform: scale(.985); }

.diag-opcao::before {
    content: "";
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    border: 1.5px solid var(--line);
    border-radius: 50%;
    transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.diag-opcao:hover::before { border-color: var(--cta); }
.diag-opcao[aria-pressed="true"] { border-color: var(--cta); background: var(--bg3); }
.diag-opcao[aria-pressed="true"]::before {
    background: var(--cta);
    border-color: var(--cta);
    box-shadow: inset 0 0 0 3.5px var(--bg);
}

.diag-voltar {
    margin-top: 15px;
    padding: 6px 0;
    font: inherit;
    font-size: 14px;
    color: var(--soft);
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}
.diag-voltar:hover { color: var(--ink); }

/* --- análise --- */
.diag-analise__titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 18px;
}
.diag-girando {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    border: 2.5px solid var(--line);
    border-top-color: var(--cta);
    border-radius: 50%;
    animation: diag-gira .7s linear infinite;
}
@keyframes diag-gira { to { transform: rotate(360deg); } }

.diag-etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.diag-etapas li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15.5px;
    color: var(--soft);
    opacity: .3;
    transition: opacity .3s ease, color .3s ease;
}
.diag-etapas li::before {
    content: "✓";
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--line);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    transition: background-color .3s ease;
}
.diag-etapas li[data-feito] { opacity: 1; color: var(--ink); }
.diag-etapas li[data-feito]::before { background: var(--cta); }

/* --- resultado --- */
.diag-selo {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 12px;
    border-radius: 20px;
    background: var(--alerta-bg);
    color: var(--alerta);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.diag-resultado h2 { font-size: clamp(21px, 4.6vw, 25px); margin-bottom: 10px; }
.diag-resultado__texto { font-size: 16.5px; color: var(--soft); margin: 0 0 18px; }

.diag-medidor { text-align: center; margin-bottom: 6px; }
.diag-medidor svg { width: 100%; max-width: 300px; margin-inline: auto; }
.diag-ponteiro {
    transform: rotate(-90deg);
    transform-origin: 150px 140px;
    transition: transform 1.5s cubic-bezier(.34, 1.2, .4, 1);
}
.diag-faixa {
    font-size: clamp(24px, 6vw, 29px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 2px 0;
}
.diag-faixa-num { font-size: 14.5px; color: var(--soft); margin: 0 0 4px; }
.diag-faixa-aviso { font-size: 12.5px; color: var(--soft); margin: 0 0 18px; }

.diag-itens {
    border: 1px solid var(--line);
    border-radius: var(--raio);
    overflow: hidden;
    margin: 0 0 16px;
}
.diag-itens__cab {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    background: var(--bg2);
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.diag-itens__cab b { font-weight: 700; }
.diag-itens__cab span { color: var(--soft); font-size: 12.5px; }

.diag-item {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 13px 14px;
    border-bottom: 1px solid var(--line);
}
.diag-item:last-of-type { border-bottom: 0; }
.diag-item h3 { font-size: 16px; margin: 0; }
.diag-item p { font-size: 13px; color: var(--soft); margin: 2px 0 0; }

.diag-marca {
    flex: 0 0 auto;
    margin-top: 1px;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .02em;
}
.diag-marca--neg { background: var(--alerta-bg); color: var(--alerta); }
.diag-marca--ok  { background: var(--bg3); color: var(--cta2); }

.diag-oculto, .borrado { filter: blur(5px); user-select: none; pointer-events: none; }

.diag-itens__pe {
    padding: 12px 14px;
    background: var(--bg2);
    font-size: 13.5px;
    color: var(--soft);
    text-align: center;
}

.diag-nota { font-size: 13px; color: var(--soft); text-align: center; margin: 10px 0 0; }

.diag-leitura {
    border-left: 3px solid var(--line);
    padding-left: 14px;
    margin: 0 0 20px;
}
.diag-leitura h2 { font-size: clamp(19px, 4.2vw, 22px); margin-bottom: 9px; }
.diag-leitura p { font-size: 16.5px; color: var(--soft); margin: 0; }

/* Escala de faixas, listada abaixo do quiz na página de rating. */
.diag-escala { display: grid; gap: 9px; }
.diag-nivel {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--raio);
}
.diag-nivel::before {
    content: "";
    flex: 0 0 5px;
    border-radius: 3px;
    background: var(--cor, var(--line));
}
.diag-nivel--muito-baixo { --cor: #DC2626; }
.diag-nivel--baixo       { --cor: #EA580C; }
.diag-nivel--regular     { --cor: #CA8A04; }
.diag-nivel--bom         { --cor: var(--cta); }

.diag-nivel h3 { margin: 0; font-size: 16.5px; }
.diag-nivel p { margin: 2px 0 0; font-size: 13.5px; color: var(--soft); }

/* Lembrete de trocar depoimentos de exemplo. Some ao imprimir. */
.diag-pendente {
    margin: 11px 0 0;
    padding: 15px;
    border: 1.5px dashed var(--line);
    border-radius: var(--raio);
    font-size: 13.5px;
    color: var(--soft);
    text-align: center;
}


/* 23. PÁGINA DE ERRO ----------------------------------------------- */
.erro { text-align: center; max-width: 60ch; margin-inline: auto; }
.erro .olho { margin-inline: auto; }

.erro__codigo {
    font-size: clamp(64px, 18vw, 110px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--line);
    margin: 0 0 6px;
}
.erro .acoes { justify-content: center; }
.erro .acoes .btn { flex: 0 1 auto; }

.erro__atalhos {
    margin: 34px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    text-align: left;
}

/* 24. OFERTA E PROVA ----------------------------------------------- */
/* Peças das páginas de venda: capa em vídeo, preço, caixa de oferta,
   depoimento e bio da autora. */

.capa-video {
    position: relative;
    border-radius: var(--raio-lg);
    overflow: hidden;
    background: var(--ink);
    aspect-ratio: 16 / 9;
    box-shadow: var(--sombra-lg);
}
.capa-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Enquanto toca com som, o vídeo inteiro é a área de pausa. */
.capa-video--tocando { cursor: pointer; }
/* Botão de play: centralizado sobre o vídeo, com pulso leve para chamar
   atenção sem virar distração. O contêiner é transparente — o que pulsa é
   só o círculo, senão o rótulo tremeria junto e ficaria difícil de ler. */
.capa-video__som {
    position: absolute;
    inset: 0;
    margin: auto;
    width: max-content;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    padding: 0;
    font: inherit;
    color: #fff;
    background: none;
    border: 0;
    cursor: pointer;
}
.capa-video__som[hidden] { display: none; }

.capa-video__play {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: var(--ink);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .34);
    transition: background-color .15s ease, transform .15s ease;
    animation: pulsa-play 2.4s ease-in-out infinite;
}
/* O triângulo tem o peso visual à esquerda; 3px o centram oticamente. */
.capa-video__play .ico { width: 27px; height: 27px; margin-left: 3px; }

.capa-video__som:hover .capa-video__play { background: #fff; transform: scale(1.06); }

.capa-video__som-txt {
    padding: 5px 13px;
    border-radius: 20px;
    background: rgba(16, 27, 22, .58);
    font-size: 13.5px;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

@keyframes pulsa-play {
    0%, 100% { box-shadow: 0 6px 22px rgba(0, 0, 0, .34), 0 0 0 0 rgba(255, 255, 255, .5); }
    55%      { box-shadow: 0 6px 22px rgba(0, 0, 0, .34), 0 0 0 15px rgba(255, 255, 255, 0); }
}

/* Selo de confiança: centralizado no topo do vídeo, pílula branca com
   texto cinza e o selo de verificado em verde. O ícone precisa da classe
   .ico--cheio: sem ela o .ico zera o fill e o selo some. */
.capa-video__selo {
    position: absolute;
    inset: 14px 0 auto 0;
    margin-inline: auto;
    width: max-content;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 11px;
    border-radius: 20px;
    background: #fff;
    color: var(--soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}
.capa-video__selo .ico {
    width: 16px;
    height: 16px;
    color: var(--cta);
}

/* Hero em VSL: o vídeo é vertical (9:16), gravado para o celular. No mobile
   ele vem primeiro e sangra de borda a borda, ocupando quase a tela toda —
   os 76vh deixam uma faixa do título aparecendo, que é o que convida a rolar.
   No desktop uma coluna 9:16 de borda a borda ficaria absurda, então ele vai
   para a direita com largura limitada. */
.hero--vsl {
    display: grid;
    gap: 22px;
    padding-bottom: clamp(32px, 5vw, 50px);
}
.hero--vsl .hero__video {
    order: -1;
    margin-inline: calc(var(--gut) * -1);
}

* Névoa que funde o vídeo com a página.

   Duas coisas desenhavam a linha divisória que sobrava aqui:

   1) O .capa-video tem box-shadow: 0 10px 28px. Num cartão com cantos
      arredondados isso é elegante; num vídeo que sangra de ponta a ponta
      vira uma faixa escura de largura inteira logo abaixo dele — a própria
      linha. No modo vertical a sombra sai.

   2) A névoa era um ::after por cima, pintando branco. Isso obriga a cor do
      degradê a bater exatamente com o fundo da página e ainda deixa a fresta
      de subpixel entre o fim do vídeo e o fim do contêiner.

   A máscara resolve os dois: em vez de pintar branco por cima, ela apaga os
   próprios pixels do vídeo, revelando o fundo real da página. Não existe cor
   para acertar nem borda para aparecer — o vídeo simplesmente deixa de
   existir de forma gradual. */
.capa-video--vertical {
    background: transparent;
    box-shadow: none;
}

.capa-video--vertical video {
    -webkit-mask-image: linear-gradient(to bottom,
                #000 0%, #000 52%,
                rgba(0, 0, 0, .94) 64%,
                rgba(0, 0, 0, .80) 73%,
                rgba(0, 0, 0, .58) 81%,
                rgba(0, 0, 0, .34) 88%,
                rgba(0, 0, 0, .14) 94%,
                transparent 100%);
            mask-image: linear-gradient(to bottom,
                #000 0%, #000 52%,
                rgba(0, 0, 0, .94) 64%,
                rgba(0, 0, 0, .80) 73%,
                rgba(0, 0, 0, .58) 81%,
                rgba(0, 0, 0, .34) 88%,
                rgba(0, 0, 0, .14) 94%,
                transparent 100%);
}

.capa-video--vertical {
    /* Altura fixa em vez de aspect-ratio + max-height: com os dois juntos o
       navegador encolhe a LARGURA para manter a proporção e sobra faixa
       branca na lateral. Aqui a largura é sempre 100% e o object-fit: cover
       do vídeo corta a altura. O teto de 176vw é a própria proporção 9:16,
       para não esticar em tela estreita e alta. */
    aspect-ratio: auto;
    width: 100%;
    height: min(76vh, 176vw);
    border-radius: 0;
}

@media (min-width: 880px) {
    .hero--vsl {
        padding-top: clamp(30px, 5vw, 54px);
        grid-template-columns: 1.05fr .95fr;
        gap: clamp(24px, 4vw, 46px);
        align-items: center;
    }
    .hero--vsl .hero__video { order: 1; margin-inline: 0; }

    /* No desktop o vídeo volta a ser um cartão: máscara e sombra de novo. */
    .capa-video--vertical video { -webkit-mask-image: none; mask-image: none; }

    .capa-video--vertical {
        background: var(--ink);
        box-shadow: var(--sombra-lg);
        aspect-ratio: 9 / 16;
        width: min(100%, 340px);
        height: auto;
        margin-inline: auto;
        border-radius: var(--raio-lg);
    }
}

/* --- preço --- */
.preco {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 11px;
}
.preco__num {
    font-size: clamp(38px, 9vw, 52px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
}
.preco__uni { font-size: 15px; color: var(--soft); }
/* Preço de referência riscado. Só use quando o valor foi mesmo praticado:
   "de/por" sobre preço que nunca existiu é CDC art. 37 §1º. */
.preco__antes {
    font-size: 17px;
    color: var(--soft);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}
.preco__nota { font-size: 14px; color: var(--soft); margin: 9px 0 0; }
.hero .preco { margin-top: 22px; }
.checks + .legenda { margin-top: 18px; }

/* --- caixa de oferta --- */
.oferta {
    border: 2px solid var(--ink);
    border-radius: var(--raio-lg);
    padding: clamp(20px, 4vw, 28px);
}
.oferta .preco { margin-bottom: 4px; }
.oferta .checks { margin: 18px 0 20px; }
.oferta .preco__nota { text-align: center; }

.garantia {
    background: var(--bg3);
    border-radius: var(--raio);
    padding: 16px 18px;
    margin: 0 0 20px;
    font-size: 15px;
}
.garantia h3 { margin-bottom: 5px; }

/* --- depoimento --- */
.depo__topo {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 11px;
}
.depo__avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg3);
    color: var(--cta2);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: .02em;
}
.depo__quem { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.depo__onde { display: block; font-size: 13px; color: var(--soft); }
.depo p { font-size: 15.5px; color: var(--ink2); margin: 0; }

.estrelas { display: flex; gap: 2px; margin-bottom: 9px; color: #D97706; }
.estrelas .ico { width: 15px; height: 15px; }

/* --- bio da autora --- */
.autor {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: clamp(18px, 3vw, 28px);
    align-items: start;
    padding: clamp(20px, 4vw, 28px);
    background: var(--bg2);
    border-radius: var(--raio-lg);
}
.autor__foto {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bg);
    box-shadow: var(--sombra);
}
.autor__papel { font-size: 15px; color: var(--soft); margin: 0 0 12px; }
@media (max-width: 560px) {
    .autor { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .autor .selos { justify-content: center; }
}

/* --- barra fixa com preço --- */
.fixo--oferta .wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-inline: 0;
}
.fixo--oferta .fixo__preco {
    flex: 0 0 auto;
    font-size: 12.5px;
    line-height: 1.2;
    color: var(--soft);
}
.fixo--oferta .fixo__preco b {
    display: block;
    font-size: 19px;
    font-weight: 800;
    color: var(--ink);
}
/*  O botão divide a barra com o preço e agora carrega um ícone dentro. Como
    ele é flex:1, a largura vem da barra e não do padding — encolher o respiro
    lateral não tira nada dele e devolve espaço ao rótulo, que numa tela de
    360px passou a disputar lugar com o ícone. O min-width:0 é o que permite
    esse encolhimento: item de flex nasce com min-width:auto e se recusa a
    ficar menor que o próprio conteúdo. */
.fixo--oferta .btn {
    flex: 1;
    width: auto;
    min-width: 0;
    padding-inline: 14px;
}

/* --- amostra de relatório --- */
/* Mostrar o produto converte mais que descrevê-lo: é a peça mais
   persuasiva da página de venda. Os campos sensíveis vão borrados. */
.relatorio {
    border: 1px solid var(--line);
    border-radius: var(--raio-lg);
    background: var(--bg);
    box-shadow: var(--sombra);
    overflow: hidden;
}
.relatorio__cab {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 13px 16px;
    background: var(--bg2);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    color: var(--soft);
}
.relatorio__cab b { display: block; color: var(--ink); font-size: 15.5px; }
.relatorio__cab div:last-child { text-align: right; white-space: nowrap; }

.relatorio__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
}
.relatorio__item:last-of-type { border-bottom: 0; }
.relatorio__pino {
    flex: 0 0 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--alerta);
}
.relatorio__pino--ok { background: var(--cta); }
.relatorio__txt { flex: 1; min-width: 0; }
.relatorio__txt h3 { font-size: 16px; margin: 0; }
.relatorio__txt p { font-size: 13px; color: var(--soft); margin: 2px 0 0; }
.relatorio__vlr { font-weight: 700; white-space: nowrap; }
.relatorio__pe {
    padding: 13px 16px;
    background: var(--bg2);
    font-size: 13.5px;
    color: var(--soft);
    margin: 0;
}

/* --- qualificação em um toque --- */
/* Substitui o formulário de nome + telefone. A pergunta filtra e viaja na
   mensagem do WhatsApp; o telefone o próprio WhatsApp entrega. */
.oferta + .qualifica { margin-top: 16px; }
.limites + .legenda { margin-top: 18px; }

.qualifica {
    border: 2px solid var(--ink);
    border-radius: var(--raio-lg);
    padding: clamp(20px, 4vw, 26px);
    transition: border-color .45s ease;
}

/* Realce ao chegar pela âncora. Quando o visitante já está vendo o bloco, o
   link #comecar não rola nada e o botão parece quebrado — o anel curto diz
   "é aqui", e o deslocamento das opções diz "escolha uma destas". */
.qualifica--atencao {
    border-color: var(--cta);
    animation: qualifica-anel 1s ease-out;
}
.qualifica--atencao .qualifica__opt {
    animation: qualifica-chama .42s ease-in-out both;
}
.qualifica--atencao .qualifica__opt:nth-child(2) { animation-delay: .07s; }
.qualifica--atencao .qualifica__opt:nth-child(3) { animation-delay: .14s; }

@keyframes qualifica-anel {
    0%   { box-shadow: 0 0 0 0 rgba(13, 127, 73, .34); }
    70%  { box-shadow: 0 0 0 13px rgba(13, 127, 73, 0); }
    100% { box-shadow: 0 0 0 0 rgba(13, 127, 73, 0); }
}
@keyframes qualifica-chama {
    0%, 100% { transform: none; }
    45%      { transform: translateX(5px); }
}
.qualifica__pergunta {
    font-size: clamp(18px, 4vw, 21px);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 5px;
}
.qualifica__dica { font-size: 14px; color: var(--soft); margin: 0 0 18px; }
.qualifica__opcoes { display: grid; gap: 10px; }

.qualifica__opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border: 1.5px solid var(--line);
    border-radius: var(--raio);
    background: var(--bg);
    color: var(--ink);
    font-size: 16.5px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .14s ease, background-color .14s ease, transform .08s ease;
}
.qualifica__opt:hover { border-color: var(--cta); background: var(--bg3); color: var(--ink); }
.qualifica__opt:active { transform: scale(.99); }
.qualifica__opt .ico { flex: 0 0 auto; margin-left: auto; color: var(--cta); }
.qualifica__pe { font-size: 13px; color: var(--soft); margin: 16px 0 0; line-height: 1.5; }


/* 21. IMPRESSÃO ---------------------------------------------------- */
@media print {
    .barra, .topo, .fixo, .pular, .acoes, .sumario, .voltar { display: none !important; }
    body { font-size: 12pt; }
    .artigo > section { page-break-inside: avoid; border-top: 1px solid #ccc; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}


/* 21. ESTADO DE ERRO NO CAMPO --------------------------------------
   O formulário de contato valida no navegador e só libera o botão. Já o
   formulário de dados da consulta é validado no servidor (CPF por dígito
   verificador, DDD, celular) e volta com erro por campo — precisa de estilo
   para isso. */
.campo--erro input[type="text"],
.campo--erro input[type="tel"],
.campo--erro input[type="email"] {
    border-color: var(--alerta);
    background: var(--alerta-bg);
}

.campo--erro input:focus {
    outline-color: var(--alerta);
}

.campo__erro {
    display: block;
    margin-top: 6px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--alerta);
}


/* 22. ETAPAS JÁ CONCLUÍDAS -----------------------------------------
   Lista de passos que o SERVIDOR já executou, revelada em sequência só como
   acabamento. O estado padrão é "tudo concluído": sem JavaScript a lista
   aparece completa, que é a verdade. A classe .etapas--animando só é posta
   pelo voltacred.js, e é ela que apaga os itens para então acendê-los. */
.etapas--animando li {
    opacity: .45;
    transition: opacity .3s ease;
}

.etapas--animando li.is-feito {
    opacity: 1;
}

.etapas--animando li::before {
    opacity: .35;
    transition: opacity .3s ease;
}

.etapas--animando li.is-feito::before {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .etapas--animando li,
    .etapas--animando li::before {
        opacity: 1;
        transition: none;
    }
}


/* 23. PROTOCOLO ----------------------------------------------------- */
.protocolo {
    text-align: center;
    padding: 18px 16px;
    margin-bottom: 20px;
    border: 1px solid var(--line);
    border-radius: var(--raio-lg);
    background: var(--bg3);
}

/* Confirma que a solicitação entrou. Verde e não a cor do tema: é uma
   confirmação, não uma chamada de venda — em vermelho seria lida como alerta,
   e em verde é lida como "deu certo", que é o que a frase diz. Vale para os
   dois funis, por isso mora aqui e não no bloco de tema. */
.protocolo__rotulo {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sucesso);
}

/* O número em si. Monoespaçado porque ele é lido em voz alta e digitado no
   atendimento: em fonte proporcional, 0/O e 1/l se confundem — o alfabeto do
   protocolo já evita essas letras, e a fonte fecha a outra metade do problema.

   É flex para o botão de copiar caber ao lado do número sem quebrar a linha. */
.protocolo__num {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex-wrap: wrap;
    margin: 2px 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: clamp(20px, 5.5vw, 26px);
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--ink);
}

.protocolo__pe {
    margin: 6px 0 0;
    font-size: 13.5px;
    color: var(--soft);
}


/* 24. BOTÃO TRAVADO ATÉ AS ETAPAS TERMINAREM -----------------------
   O CTA fica visível desde o primeiro instante — a pessoa vê para onde vai
   antes de a animação acabar — mas só clica quando a lista de etapas fecha.

   O estado padrão do botão é LIBERADO: quem está sem JavaScript vê a lista
   inteira concluída (o <noscript> do template) e precisa de um botão que
   funcione. É o voltacred.js que trava e depois destrava. */
.btn.is-travado {
    cursor: progress;
    opacity: .62;
    filter: saturate(.72);
    pointer-events: none;
}

.btn__spin {
    display: none;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 2.5px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: diag-gira .7s linear infinite;
}

.btn.is-travado .btn__spin { display: inline-block; }

/* Enquanto trava, mostra "Liberando..."; ao soltar, volta o texto real. */
.btn.is-travado .btn__rotulo { display: none; }
.btn .btn__aguarde { display: none; }
.btn.is-travado .btn__aguarde { display: inline; }

@media (prefers-reduced-motion: reduce) {
    .btn__spin { animation: none; }
}

/* Chamada curta acima do CTA, com o preço à vista. */
.cta-previa {
    margin: 0 0 10px;
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink2);
}

/* O valor antigo riscado e o novo em destaque, como no bloco .preco — só que
   em linha corrida. white-space:nowrap impede que "R$ 247,90" quebre no meio
   ao virar duas linhas no celular. */
.cta-previa__antes {
    color: var(--soft);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    white-space: nowrap;
}

.cta-previa__agora {
    color: var(--ink);
    font-weight: 700;
    white-space: nowrap;
}


/* 25. AMOSTRA DO LAUDO ---------------------------------------------
   Usado no hero da /consulta_b e na amostra de relatório. */

/* Nome de credor em exemplo: some sob desfoque, mas mantém o formato da
   palavra — a pessoa entende que ali vai um nome real sem conseguir ler.
   Já era usada na /consulta-online sem existir no CSS: os nomes de exemplo
   apareciam legíveis, parecendo dado real de cliente. */
.borrado {
    filter: blur(4px);
    user-select: none;
}

.entrega {
    margin: 18px 0 16px;
    padding: 16px 16px 6px;
    border: 1px solid var(--line);
    border-radius: var(--raio-lg);
    background: var(--bg2);
}

.entrega__cab {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink);
}

.entrega__cab .ico {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    color: var(--cta);
}

.entrega .checks li {
    padding: 8px 0 8px 26px;
    font-size: 14.5px;
}

.entrega .checks li:last-child { border-bottom: 0; }


/* 26. TRILHA DE ETAPAS ---------------------------------------------
   Mostra onde a pessoa está e quanto falta: bolas numeradas ligadas por uma
   linha que fica verde à medida que ela avança.

   A linha é desenhada por ::before de cada nó a partir do segundo, indo do
   centro do nó anterior até o próprio centro (left:-50% / right:50%). Assim
   ela nunca sobra nas pontas, que é o que acontece quando se desenha uma
   linha única de fundo atrás de tudo. */
.trilha {
    display: flex;
    list-style: none;
    /*  O respiro do topo é do próprio componente: a trilha sempre abre uma tela
        de etapa, que não tem cabeçalho nem barra acima e fica dentro de um
        .wrap — e .wrap só tem padding horizontal. Sem esta margem ela encosta
        na borda de cima da janela. A escala acompanha a de `section`. */
    margin: clamp(30px, 7vw, 52px) 0 26px;
    padding: 0;
}

.trilha__no {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--soft);
    text-align: center;
}

.trilha__no + .trilha__no::before {
    content: "";
    position: absolute;
    top: 13px;              /* metade da altura da bola */
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--line);
    transition: background .3s ease;
}

.trilha__no.is-feito::before,
.trilha__no.is-atual::before { background: var(--cta); }

.trilha__bola {
    position: relative;     /* fica acima da linha */
    z-index: 1;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bg);
    border: 2px solid var(--line);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--soft);
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}

.trilha__no.is-feito { color: var(--ink); }
.trilha__no.is-feito .trilha__bola {
    background: var(--cta);
    border-color: var(--cta);
    color: #fff;
}

.trilha__no.is-atual { color: var(--ink); }
.trilha__no.is-atual .trilha__bola {
    border-color: var(--cta);
    color: var(--cta);
    box-shadow: 0 0 0 3px var(--bg3);
}

@media (prefers-reduced-motion: reduce) {
    .trilha__no::before,
    .trilha__bola { transition: none; }
}


/* 27. FORMULÁRIO EM PASSOS -----------------------------------------
   Pedir quatro campos de uma vez assusta; dois de cada vez não.

   O estado padrão do HTML é o formulário INTEIRO visível, com um único botão
   de envio — é o que quem está sem JavaScript recebe, e funciona. O
   voltacred.js é que esconde o segundo bloco e revela o botão "Prosseguir". */
.passo[hidden] { display: none; }

.passo {
    border: 0;
    margin: 0;
    padding: 0;
    animation: diag-entra .26s ease both;
}

.passo legend {
    padding: 0;
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--soft);
}


/* 28. COPIAR PARA A ÁREA DE TRANSFERÊNCIA --------------------------
   Botão discreto ao lado de um valor que a pessoa vai precisar guardar —
   hoje, o número de protocolo. Nasce oculto no HTML: sem JavaScript ele não
   copiaria nada, e botão que não funciona é pior que botão nenhum. */
.copiar {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--soft);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.copiar:hover { color: var(--cta); border-color: var(--cta); }
.copiar .ico { width: 16px; height: 16px; }
.copiar[hidden] { display: none; }

/* Estado "copiado": vira um check verde por um instante. */
.copiar.is-copiado {
    color: #fff;
    background: var(--cta);
    border-color: var(--cta);
}

.copiar__aviso {
    display: block;
    min-height: 18px;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cta);
}

/* O número e o botão na mesma linha, centralizados juntos. */
.protocolo__num {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}


/* 29. AJUSTES DO CARD DE PROTOCOLO ----------------------------------
   O card chegou a ser um "card de condição", com âncora de preço no topo e o
   protocolo discreto no rodapé. Voltou a ser só o protocolo: preço no card de
   confirmação virava anúncio no lugar de confirmação. Sobraram daquela versão
   os ajustes de centralização, que continuam valendo. */
.protocolo__rotulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
}

.protocolo__rotulo .ico { width: 17px; height: 17px; flex: 0 0 auto; }

.protocolo__pe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Versão reduzida do botão de copiar, para acompanhar texto corrido. */
.copiar--mini { width: 26px; height: 26px; border-radius: 7px; }
.copiar--mini .ico { width: 13px; height: 13px; }


/* 30. TEMA VERMELHO — FUNIL DO RATING PRO+ --------------------------
   As páginas do funil do rating (/ratingpro, /rating_dados, /rating_check)
   usam a MESMA folha e os MESMOS componentes do funil da análise de CPF. O
   que muda é a paleta, e ela muda redefinindo os tokens da seção 01 no
   <body class="tema-rating"> — nenhum componente precisa de regra própria.

   Por que no body e não num segundo arquivo CSS: uma folha a mais é uma
   requisição a mais na primeira tela de uma página de tráfego pago, e abre
   espaço para as duas divergirem. Aqui, qualquer ajuste feito em um
   componente vale para os dois funis no mesmo instante.

   Sobre o vermelho: --cta #C8102E tem 5,88:1 de contraste com o branco, acima
   do 4,5:1 que a WCAG AA exige. É o único vermelho da paleta que pode receber
   texto branco por cima — os tons mais claros ficam para fundo, nunca para
   texto. */
.tema-rating {
    /* Superfícies — o cinza sai do lado verde e vai para o lado quente, senão
       o fundo puxa para o verde embaixo de um CTA vermelho. */
    --bg: #FFFFFF;
    --bg2: #F7F3F4;
    --bg3: #FDECEE;
    --line: #E4DADC;

    /* Texto — todos acima de 4,5:1 sobre --bg. */
    --ink: #17100F;
    --ink2: #382A29;
    --soft: #6A5A59;

    /* Vermelho institucional do Rating Pro+. */
    --cta: #C8102E;
    --cta2: #9E0C24;

    /* Alerta em âmbar: com o CTA vermelho, um alerta vermelho deixaria de ser
       alerta — vira só mais um elemento da paleta. */
    --alerta: #B45309;
    --alerta-bg: #FEF5E7;

    --sombra: 0 1px 3px rgba(23, 16, 15, .07);
    --sombra-lg: 0 10px 28px rgba(23, 16, 15, .10);
}

/* O verde continua existindo onde significa "resolvido": pino de item já
   vencido no laudo e conclusão de etapa. Pintar isso de vermelho no tema
   vermelho apagaria a única diferença visual entre o que pesa contra a pessoa
   e o que já está a favor dela. */
.tema-rating .relatorio__pino--ok { background: #0D7F49; }

/* A estrela do depoimento fica no âmbar de sempre: estrela vermelha some
   contra o CTA e deixa de ser lida como avaliação. */
.tema-rating .estrelas { color: #D97706; }


/* 31. TEMA AZUL — FUNIL DO RATING POR WHATSAPP ----------------------
   As páginas do funil de conversa (/rating_wpp e a tela de dados dela) usam a
   MESMA folha e os MESMOS componentes dos outros funis. Muda só a paleta, e
   ela muda redefinindo os tokens da seção 01 no <body class="tema-wpp"> —
   mesma mecânica da seção 30, nenhum componente precisa de regra própria.

   Por que azul e não o vermelho do /ratingpro, se o produto é o mesmo: este
   funil termina numa conversa, não num checkout, e o anúncio que traz essa
   gente vem do Facebook. A página continuar na cor da rede de origem reduz o
   estranhamento do primeiro segundo, que é onde se perde visitante de tráfego
   pago.

   Sobre o azul: --cta #0866FF é o azul de marca atual do Facebook e tem 4,82:1
   de contraste com o branco, acima do 4,5:1 da WCAG AA. O azul clássico
   (#1877F2) ficaria em 4,23:1 e reprovaria com texto branco por cima — é a
   diferença entre dois tons quase indistinguíveis a olho nu, então não há o
   que perder em usar o que passa. */
.tema-wpp {
    /* Superfícies — o cinza vai para o lado frio, para não puxar verde ou
       rosa embaixo de um CTA azul. */
    --bg: #FFFFFF;
    --bg2: #F2F4F8;
    --bg3: #E8F0FE;
    --line: #D8DFE8;

    /* Texto — todos acima de 4,5:1 sobre --bg. */
    --ink: #0F1419;
    --ink2: #2A333D;
    --soft: #5A6672;

    /* Azul do Facebook. */
    --cta: #0866FF;
    --cta2: #0A58CA;

    /* Alerta em laranja, como no tema padrão: com o CTA azul não há risco de
       confundir os dois. */
    --alerta: #C2410C;
    --alerta-bg: #FEF3EC;

    --sombra: 0 1px 3px rgba(15, 20, 25, .07);
    --sombra-lg: 0 10px 28px rgba(15, 20, 25, .10);
}

/* Mesma razão da seção 30: o verde continua marcando o que já está resolvido.
   Em azul, o pino de item vencido se confundiria com o CTA e a amostra do
   laudo perderia a única distinção entre o que pesa contra a pessoa e o que
   já está a favor dela. */
.tema-wpp .relatorio__pino--ok { background: #0D7F49; }

/* Estrela de avaliação segue em âmbar, como nos outros temas. */
.tema-wpp .estrelas { color: #D97706; }