/* ============================================================================
   ASA FINANCE · LANDING v6 — COMPONENTES
   Arquivo: static/css/landing.css
   Depende de: static/css/landing.tokens.css (carregar ANTES deste arquivo)
   ----------------------------------------------------------------------------
   ÍNDICE
     0. Fallback de fonte com métrica ajustada (anti-CLS)
     1. Base e reset
     2. Superfícies, ritmo e textura
     3. Primitivos (rótulo, título, botão, selo, chip, link-seta)
     4. Cabeçalho e menu
     5. Hero
     6. Faixa de posicionamento
     7. Perfis
     8. Objetivos (recursos)
     9. Demonstração (conciliação + comparativo)
    10. Como funciona
    11. Planos (seletor, cards, BPO, tabela)
    12. Confiança
    13. FAQ
    14. Suporte (contato + ticket)
    15. CTA final e rodapé
    16. Preferências do sistema (motion, forced-colors, print)

   REGRA DE COR: nenhum hexadecimal neste arquivo. Tudo vem de landing.tokens.css.
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   0. FALLBACK COM MÉTRICA AJUSTADA (anti-CLS)
   ═══════════════════════════════════════════════════════════════════════════
   O h1 é o maior bloco da dobra. Enquanto o webfont não chega, quem desenha é o
   fallback; se ele tiver largura diferente, a quebra de linha muda e o hero
   inteiro pula quando a fonte troca.

   Na v5.1 o desvio era brutal (Georgia × Instrument Serif = 25%). Agora as duas
   famílias são sans, então o desvio é pequeno — mas não é zero: a Sora é ~4%
   mais estreita que a Arial nos mesmos 100px. Os valores abaixo são a correção
   aproximada; se você quiser conferir de novo, o procedimento está em
   IMPLEMENTACAO.md § "Como medir o size-adjust".

   O fallback é fixado em ARIAL de propósito. Cair em `system-ui` faz o desvio
   depender do sistema operacional (mesmo problema da v3) — impossível acertar um
   size-adjust que sirva a todos. */
@font-face {
    font-family: 'Display Fallback';
    src: local('Arial');
    size-adjust: 104%;
    ascent-override: 96%;
    descent-override: 24%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Sans Fallback';
    src: local('Arial');
    size-adjust: 101%;
    ascent-override: 95%;
    descent-override: 24%;
    line-gap-override: 0%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. BASE
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: var(--fs-base);
    line-height: 1.62;
    color: var(--sobre-papel);
    background: var(--papel);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* Menu mobile aberto trava a rolagem do fundo. */
body.menu-aberto { overflow: hidden; }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--display);
    font-weight: 600;
    line-height: var(--lh-titulo);
    letter-spacing: var(--tr-titulo);
}
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, picture { max-width: 100%; }
img { height: auto; }
strong, b { font-weight: 700; }

/* Âncoras não podem cair embaixo do cabeçalho fixo. */
[id] { scroll-margin-top: calc(var(--nav-h) + 18px); }

:focus-visible {
    outline: 2px solid var(--violeta-600);
    outline-offset: 3px;
    border-radius: 4px;
}
/* .bpo e .ticket-cab são blocos escuros DENTRO de seção clara: não herdam
   .escuro, e o violeta escuro sobre eles dá 2,76:1 (abaixo dos 3:1 de 1.4.11). */
.escuro :focus-visible, .escuro-2 :focus-visible,
.bpo :focus-visible, .ticket-cab :focus-visible { outline-color: var(--violeta-300); }

.pular {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--violeta-600); color: var(--papel-puro);
    padding: .8rem 1.3rem; border-radius: 0 0 var(--r-sm) 0;
    font-weight: 600;
}
.pular:focus { left: 0; }

.env { width: min(var(--env-max), 100% - 2.5rem); margin-inline: auto; }
@media (max-width: 560px) { .env { width: calc(100% - 2rem); } }

.ic {
    width: 1em; height: 1em; display: inline-block; vertical-align: -.125em;
    fill: none; stroke: currentColor; stroke-width: 1.75;
    stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}

/* Só para leitor de tela. Não usar em <input> — ver nota em .periodo-op. */
.so-leitor {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Ícone reduzido (chevron do FAQ, seta da dica de rolagem). Substitui os
   style="width:.8em;height:.8em" que estavam soltos no HTML da v5.1. */
.ic-mini { width: .8em; height: .8em; }

/* ═══════════════════════════════════════════════════════════════════════════
   2. SUPERFÍCIES, RITMO E TEXTURA
   ═══════════════════════════════════════════════════════════════════════════ */
.escuro   { background: var(--ink-900); color: var(--sobre-esc); position: relative; }
.escuro-2 { background: var(--ink-950); color: var(--sobre-esc); position: relative; }
.claro    { background: var(--papel);   color: var(--sobre-papel); }
.claro-2  { background: var(--papel-2); color: var(--sobre-papel); }

/* Textura das seções escuras. Na v5.1 era pauta de caderno (linhas horizontais
   de 44px). A v6 troca por uma MALHA TÉCNICA de 34px, quase imperceptível: o
   mesmo papel de "dar superfície" sem a citação de papel de livro-razão.
   A classe mantém o nome para não obrigar a mexer no HTML. */
.pauta::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.pauta > * { position: relative; }

/* Ritmo vertical: cada seção tem o peso do seu papel narrativo. */
.sec       { padding-block: clamp(64px, 8vw, 104px); }
.sec-densa { padding-block: clamp(52px, 6vw, 76px); }
.sec-ampla { padding-block: clamp(80px, 10vw, 132px); }

/* ═══════════════════════════════════════════════════════════════════════════
   3. PRIMITIVOS
   ═══════════════════════════════════════════════════════════════════════════ */
/* Rótulo de seção: quadradinho + micro-label + filete. O quadrado substitui a
   função que o itálico fazia — marca o início do bloco sem desenhar letra. */
.rotulo {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--mono); font-size: var(--fs-micro);
    font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
    color: var(--violeta-600);
    margin-bottom: 1.4rem;
}
.rotulo::before {
    content: ''; width: 6px; height: 6px; border-radius: 2px;
    background: currentColor; flex-shrink: 0;
}
.rotulo::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .28; }
.escuro .rotulo, .escuro-2 .rotulo { color: var(--violeta-400); }
.rotulo.centro { max-width: 640px; margin-inline: auto; }
.rotulo.centro::before {
    width: auto; height: 1px; border-radius: 0;
    flex: 1; opacity: .28;
}

.titulo {
    font-family: var(--display); font-weight: 600;
    font-size: var(--fs-2xl); letter-spacing: var(--tr-titulo);
    line-height: var(--lh-titulo);
}
/* ÊNFASE v6.1 — tinta sólida + filete sob a palavra. Era recorte de gradiente:
   saiu porque texto em degradê é o clichê visual do gênero, e porque o recorte
   tira a ênfase do fluxo (não herda cor, quebra em forced-colors, some no
   print). O filete é `box-shadow` e não `border-bottom` para não mexer na
   altura de linha. */
.titulo em, .hero h1 em, .prova-frase em, .cta-final h2 em {
    font-style: normal; font-weight: 600; color: var(--violeta-700);
    box-shadow: inset 0 -.09em 0 rgba(109,40,217,.26);
}
.escuro .titulo em, .escuro-2 .titulo em,
.hero h1 em, .prova-frase em, .cta-final h2 em {
    color: var(--violeta-300);
    box-shadow: inset 0 -.09em 0 rgba(196,181,253,.28);
}

/* Link dentro de frase corrida — NÃO usar .link-seta aqui: inline-flex quebra o
   fluxo do parágrafo. */
.link-texto { color: var(--violeta-600); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.escuro .link-texto, .escuro-2 .link-texto { color: var(--violeta-300); }

.apoio { color: var(--sobre-papel-3); max-width: 58ch; margin-top: .9rem; }
.escuro .apoio, .escuro-2 .apoio { color: var(--sobre-esc-2); }

.cabecalho-centro { max-width: 660px; margin-inline: auto; text-align: center; }
.cabecalho-centro .apoio { margin-inline: auto; }

/* ── Botões ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    font-family: var(--sans); font-size: var(--fs-sm); font-weight: 700;
    letter-spacing: -.005em;
    padding: .78rem 1.4rem; border-radius: var(--r-btn);
    border: 1px solid transparent; cursor: pointer;
    transition: transform var(--tr-rapido), box-shadow var(--tr-rapido),
                background var(--tr-rapido), border-color var(--tr-rapido), color var(--tr-rapido);
    min-height: 46px; text-align: center;
}
.btn-cta { background: var(--grad-cta); color: var(--papel-puro); box-shadow: var(--sombra-cta); }
.btn-cta:hover { background: var(--violeta-700); box-shadow: var(--sombra-cta-h); }
.btn-cta:active { background: var(--violeta-700); }

.btn-fantasma { border-color: var(--linha-esc-2); color: var(--sobre-esc); background: rgba(255,255,255,.03); }
.btn-fantasma:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.32); transform: var(--sobe-ctrl); }

.btn-contorno { border-color: var(--linha-2); color: var(--sobre-papel); background: transparent; }
.btn-contorno:hover { border-color: var(--violeta-600); color: var(--violeta-600); transform: var(--sobe-ctrl); }

.btn-grande { font-size: var(--fs-base); padding: .95rem 1.8rem; min-height: 54px; }
.btn-bloco  { width: 100%; }

/* Link com seta — o "próximo passo" de cada bloco. */
.link-seta {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: var(--fs-sm); font-weight: 700; color: var(--violeta-600);
    min-height: 24px;
}
.escuro .link-seta, .escuro-2 .link-seta { color: var(--violeta-300); }
.link-seta .ic { transition: transform var(--tr-rapido); }
.link-seta:hover .ic { transform: translateX(3px); }

/* ── Selo ───────────────────────────────────────────────────────────────────
   v6.1: era pílula com fundo violeta translúcido e um ponto verde PULSANDO. O
   ponto que pisca não informa nada — é o tique mais reconhecível de landing
   gerada. Virou etiqueta reta, hairline, com um quadrado sólido. */
.selo {
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: var(--mono); font-size: var(--fs-micro);
    letter-spacing: .13em; text-transform: uppercase; font-weight: 500;
    padding: .34rem .7rem; border-radius: var(--r-sm);
    border: 1px solid var(--linha-esc-2); background: transparent;
    color: var(--sobre-esc-2);
}
.selo .pisca { width: 5px; height: 5px; border-radius: 1px; background: var(--entra); flex-shrink: 0; }

/* Rótulo em bloco escuro DENTRO de seção clara (.bpo): não herda o .escuro,
   então o violeta escuro reprovaria contraste. */
.rotulo-claro { color: var(--violeta-300); }

/* ═══════════════════════════════════════════════════════════════════════════
   4. CABEÇALHO
   ═══════════════════════════════════════════════════════════════════════════ */
.topo {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--ink-900) 86%, transparent);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border-bottom: 1px solid var(--linha-esc);
    color: var(--sobre-esc);
}
/* Navegador sem color-mix() cai no chapado — nunca transparente. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .topo { background: var(--ink-900); }
}
.topo-linha { display: flex; align-items: center; gap: 1.5rem; min-height: var(--nav-h); }

/* LOGO — a pomba SEM caixa; pomba e logotipo saem do MESMO --grad-marca.
   O tipo é o SANS em 800: é assim que a marca assina em /precos, /login,
   pagina_legal.html e no sistema autenticado. O peso 800 é contrato de REDE,
   não escolha estética desta página — test_marca_padronizada.py trava isso em
   todas as rotas. A v6 chegou com var(--display)/700 (Sora), o que fazia o
   logotipo da landing divergir do resto do produto; restaurado. */
.marca {
    display: inline-flex; align-items: center; gap: .36em;
    font-family: var(--sans); font-size: 1.35rem; font-weight: 800;
    letter-spacing: -.015em; line-height: 1.1;
    color: var(--violeta-300); flex-shrink: 0;
}
/* 1em, NÃO px: o glifo da pomba pinta a caixa `em` inteira, então em `em` ela
   acompanha o logotipo e fica idêntica à das outras páginas. */
.marca-ic { width: 1em; height: 1em; flex-shrink: 0; fill: url(#g-marca); }
/* Recorte do gradiente atrás de @supports: sem a checagem, um motor que entenda
   -webkit-text-fill-color mas não background-clip:text apagaria o logotipo. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .marca-txt {
        background: var(--grad-marca);
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.menu { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; }
.menu a.item {
    font-size: var(--fs-sm); font-weight: 500; color: var(--sobre-esc-2);
    transition: color var(--tr-rapido); padding: .4rem 0;
}
.menu a.item:hover { color: var(--sobre-esc); }
.menu-acoes { display: flex; align-items: center; gap: .6rem; }
.btn-topo { font-size: var(--fs-xs); padding: .5rem 1.1rem; min-height: 40px; }

.abre-menu {
    display: none; margin-left: auto;
    background: transparent; border: 1px solid var(--linha-esc-2);
    color: var(--sobre-esc); border-radius: var(--r-sm);
    width: 44px; height: 44px; cursor: pointer;
    align-items: center; justify-content: center; font-size: 1.25rem;
    transition: background var(--tr-rapido), border-color var(--tr-rapido);
}
.abre-menu:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); }
.abre-menu .ic-fechar { display: none; }
.topo[data-aberto="1"] .abre-menu { background: rgba(139,92,246,.16); border-color: rgba(139,92,246,.5); }
.topo[data-aberto="1"] .abre-menu .ic-abrir { display: none; }
.topo[data-aberto="1"] .abre-menu .ic-fechar { display: block; }

@media (max-width: 940px) {
    .abre-menu { display: inline-flex; }
    .menu {
        position: fixed; inset: var(--nav-h) 0 auto 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--ink-850);
        border-bottom: 1px solid var(--linha-esc-2);
        box-shadow: 0 26px 50px rgba(0,0,0,.55);
        padding: .35rem 1.25rem 1.6rem;
        margin: 0;
        max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
        display: none;
    }
    .topo[data-aberto="1"] .menu { display: flex; animation: desce-menu .22s ease-out; }
    @keyframes desce-menu {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: none; }
    }
    /* Cada item vira linha de lista com alvo de toque de 52px e seta de destino. */
    .menu a.item {
        display: flex; align-items: center; justify-content: space-between;
        padding: .95rem .25rem; border-bottom: 1px solid var(--linha-esc);
        font-size: var(--fs-base); min-height: 52px; color: var(--sobre-esc);
    }
    .menu a.item::after {
        content: ''; width: 7px; height: 7px; flex-shrink: 0;
        border-right: 1.5px solid var(--sobre-esc-3);
        border-bottom: 1.5px solid var(--sobre-esc-3);
        transform: rotate(-45deg);
    }
    .menu-acoes { flex-direction: column; align-items: stretch; gap: .6rem; margin-top: 1.2rem; }
    .menu-acoes .btn { width: 100%; }
    .btn-topo { font-size: var(--fs-sm); min-height: 50px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. HERO
   ═══════════════════════════════════════════════════════════════════════════
   A dobra é a ÚNICA superfície com fundo gradiente: o visitante bate o olho no
   roxo da marca antes de qualquer texto. As demais seções escuras seguem
   chapadas — gradiente em todas viraria ruído. */
.hero {
    overflow: hidden;
    background: var(--grad-hero);
    padding-block: clamp(56px, 7vw, 92px) clamp(72px, 9vw, 116px);
}
/* Altura em vh, NÃO em % do hero: em % este brilho mudava de tamanho quando o
   webfont trocava e sozinho respondia pela maior parte do CLS medido na v3. */
/* v6.1 — o halo radial duplo saiu: dois brilhos violeta atrás do título é
   "fundo de IA". Ficou UM clarão fraco, alto, que só levanta o canto do título. */
.hero-brilho {
    position: absolute; inset: -170px -10% auto -10%; height: 150vh;
    pointer-events: none;
    background: radial-gradient(ellipse 34% 28% at 18% 18%, rgba(167,139,250,.10), transparent 70%);
}
.hero-grade {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(167,139,250,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(167,139,250,.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 60% at 28% 40%, #000 18%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 28% 40%, #000 18%, transparent 76%);
}
.hero-linha {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
}
.hero h1 {
    font-family: var(--display); font-weight: 600;
    font-size: var(--fs-3xl); letter-spacing: -.032em; line-height: 1.05;
    margin: 1.5rem 0 0;
}
.hero-lead {
    font-size: var(--fs-lg); color: var(--sobre-esc-2);
    max-width: 46ch; margin-top: 1.3rem;
}
.hero-acoes { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }
.hero-obs {
    margin-top: 1rem; font-size: var(--fs-xs); color: var(--sobre-esc-3);
    display: flex; align-items: center; gap: .45rem;
}
.hero-confianca {
    display: flex; flex-wrap: wrap; gap: 1rem 1.8rem;
    margin-top: 2.3rem; padding-top: 1.6rem;
    border-top: 1px solid var(--linha-esc);
    font-size: var(--fs-xs); color: var(--sobre-esc-2);
}
.hero-confianca li { display: inline-flex; align-items: center; gap: .5rem; }
.hero-confianca .ic { color: var(--entra); width: 1.05em; height: 1.05em; }

/* Painel do produto. v6.1 — sem perspectiva 3D e sem "semáforo" de janela
   falsa: o print é a prova, e inclinar a prova é enfeite. v6.2 — saiu a barra
   de contexto (URL + mês/ano): print datado envelhece sozinho. Quadro reto. */
.hero-painel { position: relative; }
.hero-painel-int {
    position: relative;
    border-radius: var(--r-lg);
    border: 1px solid var(--linha-esc-2);
    background: rgba(255,255,255,.03);
    padding: .8rem;
    box-shadow: var(--sombra-alta);
}
.hero-shot { display: block; width: 100%; border-radius: 10px; border: 1px solid var(--linha-esc); }

@media (max-width: 980px) {
    .hero-linha { grid-template-columns: 1fr; gap: 3rem; }
    .hero-lead { max-width: none; }
}
@media (max-width: 560px) { .hero-acoes .btn { width: 100%; } }

/* ═══════════════════════════════════════════════════════════════════════════
   6. FAIXA DE POSICIONAMENTO
   ═══════════════════════════════════════════════════════════════════════════ */
.prova { border-top: 1px solid var(--linha-esc); border-bottom: 1px solid var(--linha-esc); }
/* Largura em `em` (não `ch`): a caixa acompanha o clamp do --fs-2xl, então a
   frase cabe nas DUAS linhas do <br> em qualquer viewport. Sem text-wrap:balance
   de propósito — a quebra é escrita à mão. */
.prova-frase {
    font-family: var(--display); font-weight: 600;
    font-size: var(--fs-2xl); line-height: 1.18; letter-spacing: var(--tr-titulo);
    text-align: center; max-width: 20em; margin-inline: auto;
    color: var(--sobre-esc); text-wrap: initial;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. PERFIS — a bifurcação do funil
   ═══════════════════════════════════════════════════════════════════════════ */
.perfis { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); gap: 1.1rem; margin-top: 3rem; }
.perfil {
    border: 1px solid var(--linha); border-radius: var(--r-lg);
    padding: 1.8rem 1.6rem; background: var(--papel-puro);
    display: flex; flex-direction: column;
    transition: border-color var(--tr-medio), transform var(--tr-medio), box-shadow var(--tr-medio);
}
.perfil:hover { border-color: var(--violeta-400); transform: var(--sobe-card); box-shadow: var(--sombra-papel); }
.perfil-cab { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.perfil-ic {
    width: 42px; height: 42px; border-radius: var(--r-sm); flex-shrink: 0;
    background: rgba(109,40,217,.07); border: 1px solid rgba(109,40,217,.2);
    display: flex; align-items: center; justify-content: center;
    color: var(--violeta-600); font-size: 1.15rem;
}
.perfil-quem {
    font-family: var(--mono); font-size: var(--fs-micro);
    letter-spacing: .14em; text-transform: uppercase; color: var(--sobre-papel-3);
}
.perfil h3 { font-size: var(--fs-lg); font-weight: 600; margin-top: .15rem; }
/* A "dor" era serifada em itálico. Na v6 é um bloco citado: filete violeta à
   esquerda, sans em 500 — some a letra desenhada, fica a voz do cliente. */
.perfil .dor {
    font-size: var(--fs-sm); font-weight: 500; line-height: 1.5;
    color: var(--violeta-700); background: rgba(109,40,217,.05);
    border-left: 2px solid var(--violeta-400);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    padding: .7rem .9rem; margin: 0 0 1.1rem;
}
.perfil-itens { display: grid; gap: .55rem; margin-bottom: 1.4rem; }
.perfil-itens li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--sobre-papel-2); }
.perfil-itens .ic { color: var(--entra-txt); margin-top: .32em; }
.perfil .fim { margin-top: auto; display: grid; gap: .7rem; }
.perfil .fim .obs { font-size: var(--fs-micro); color: var(--sobre-papel-3); text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   8. OBJETIVOS — 6 módulos, 2 âncora
   ═══════════════════════════════════════════════════════════════════════════ */
.grade-obj {
    display: grid; grid-template-columns: 1fr;
    gap: 1px; margin-top: 3rem;
    background: var(--linha-esc); border: 1px solid var(--linha-esc);
    border-radius: var(--r-lg); overflow: hidden;
}
@media (min-width: 720px) {
    .grade-obj { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .obj.ancora { grid-column: span 2; }
}
/* 12 colunas: as duas âncoras dividem a 1ª faixa (6+6) e os quatro módulos
   menores fecham a 2ª (3+3+3+3). Sem célula órfã. */
@media (min-width: 1040px) {
    .grade-obj { grid-template-columns: repeat(12, minmax(0,1fr)); }
    .obj { grid-column: span 3; }
    .obj.ancora { grid-column: span 6; }
}
.obj {
    background: var(--ink-925); padding: 1.7rem 1.45rem;
    display: flex; flex-direction: column;
    transition: background var(--tr-medio);
}
.obj:hover { background: var(--ink-850); }
.obj.ancora { background: var(--ink-850); padding: clamp(1.8rem, 3vw, 2.3rem); }
.obj.ancora:hover { background: var(--ink-800); }
.obj-rotulo {
    display: flex; align-items: center; gap: .55rem;
    font-family: var(--mono); font-size: var(--fs-micro);
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--violeta-300); margin-bottom: .85rem;
}
.obj h3 { font-size: var(--fs-base); font-weight: 600; line-height: 1.3; }
.obj.ancora h3 { font-size: var(--fs-xl); line-height: 1.16; }
.obj p.como { font-size: var(--fs-sm); color: var(--sobre-esc-2); margin-top: .6rem; line-height: 1.6; }
.obj.ancora p.como { font-size: var(--fs-base); max-width: 52ch; }
/* Funcionalidade ≠ benefício: fica num rodapé de chips, não no corpo. */
.obj-func {
    display: flex; flex-wrap: wrap; gap: .35rem;
    margin-top: auto; padding-top: 1.1rem;
}
.obj-func li {
    font-family: var(--mono); font-size: var(--fs-micro);
    color: var(--sobre-esc-3); border: 1px solid var(--linha-esc);
    background: rgba(255,255,255,.02);
    border-radius: var(--r-sm); padding: .18rem .5rem; white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. DEMONSTRAÇÃO
   ═══════════════════════════════════════════════════════════════════════════ */
.destaque { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(2.5rem,5vw,4.5rem); align-items: center; }
.passos-num { margin-top: 2rem; display: grid; gap: 1.1rem; }
.passo { display: flex; gap: 1rem; align-items: flex-start; }
.passo .n {
    font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500;
    color: var(--violeta-600); background: rgba(109,40,217,.07);
    border: 1px solid rgba(109,40,217,.22);
    border-radius: var(--r-sm); width: 30px; height: 30px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.passo h3 { font-size: var(--fs-base); font-weight: 600; margin-bottom: .2rem; }
.passo p { font-size: var(--fs-sm); color: var(--sobre-papel-3); }
.demo-proximo { margin-top: 1.8rem; }

/* O painel de extrato é escuro mesmo em seção clara: é o produto, e o contraste
   com o papel é o que faz a prova saltar. */
.conc {
    border: 1px solid rgba(18,16,31,.24); border-radius: var(--r-lg);
    background: var(--ink-850); overflow: hidden;
    box-shadow: 0 20px 46px rgba(18,16,31,.2);
}
.conc-cab {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .9rem 1.2rem; border-bottom: 1px solid var(--linha-esc);
    font-family: var(--mono); font-size: var(--fs-micro);
    letter-spacing: .1em; text-transform: uppercase; color: var(--sobre-esc-3);
}
.conc-cab b { color: var(--entra); font-weight: 500; }
.conc-item {
    display: grid; grid-template-columns: 62px minmax(0,1fr) auto;
    gap: .9rem; align-items: center;
    padding: .78rem 1.2rem; border-bottom: 1px solid var(--linha-esc);
    font-size: var(--fs-xs);
}
.conc-item:last-child { border-bottom: 0; }
.conc-data { font-family: var(--mono); color: var(--sobre-esc-3); }
.conc-desc { color: var(--sobre-esc-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conc-desc small { display: block; color: var(--violeta-300); font-size: var(--fs-micro); }
.conc-val { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.conc-val.e { color: var(--entra); }
.conc-val.s { color: var(--sai); }
@media (max-width: 900px) { .destaque { grid-template-columns: 1fr; } }

/* Contraste com a planilha — 4 linhas, não uma seção inteira. */
.comp { margin-top: clamp(3.5rem, 6vw, 5rem); }
.comp-titulo { max-width: 22ch; }
.comp-tabela { margin-top: 1.6rem; border-top: 1px solid var(--linha); }
.comp-cab, .comp-linha {
    display: grid; grid-template-columns: 168px minmax(0,1fr) minmax(0,1fr);
    gap: 1.5rem;
}
.comp-cab {
    padding-bottom: .8rem;
    font-family: var(--mono); font-size: var(--fs-micro);
    letter-spacing: .16em; text-transform: uppercase;
}
.comp-cab .a { color: var(--sai-txt); grid-column: 2; }
.comp-cab .b { color: var(--entra-txt); }
.comp-linha { align-items: start; padding: 1.15rem 0; border-bottom: 1px solid var(--linha); }
.comp-topico {
    font-family: var(--mono); font-size: var(--fs-micro);
    letter-spacing: .13em; text-transform: uppercase; color: var(--sobre-papel-3);
    padding-top: .2rem;
}
.comp-antes, .comp-depois { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-sm); }
.comp-antes { color: var(--sobre-papel-3); }
.comp-antes .ic { color: var(--sai-txt); margin-top: .3em; }
.comp-depois { color: var(--sobre-papel); }
.comp-depois .ic { color: var(--entra-txt); margin-top: .3em; }
@media (max-width: 860px) {
    .comp-cab { display: none; }
    .comp-linha { grid-template-columns: 1fr; gap: .65rem; padding: 1.4rem 0; }
    .comp-topico { color: var(--violeta-600); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. COMO FUNCIONA
   ═══════════════════════════════════════════════════════════════════════════ */
.etapas { margin-top: 3rem; border-top: 1px solid var(--linha-esc); }
.etapa {
    display: grid; grid-template-columns: 78px minmax(0,230px) minmax(0,1fr);
    gap: 1.5rem; align-items: baseline;
    padding: 1.45rem 0; border-bottom: 1px solid var(--linha-esc);
    transition: background var(--tr-rapido);
}
.etapa:hover { background: rgba(255,255,255,.022); }
.etapa .n {
    font-family: var(--mono); font-size: 1.5rem; color: var(--violeta-400);
    opacity: .55; line-height: 1;
}
.etapa h3 { font-size: var(--fs-xl); font-weight: 600; }
.etapa p { font-size: var(--fs-sm); color: var(--sobre-esc-2); }
@media (max-width: 760px) {
    .etapa { grid-template-columns: 54px minmax(0,1fr); gap: 1rem .9rem; }
    .etapa p { grid-column: 2; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. PLANOS
   ═══════════════════════════════════════════════════════════════════════════ */
.periodo { display: flex; justify-content: center; margin: 2.5rem 0 .6rem; }
.periodo-cx {
    display: flex; gap: 4px; padding: 5px;
    background: var(--papel-3); border-radius: var(--r-pill);
    border: 1px solid var(--linha);
}
/* Cada par input+label num wrapper relativo. Como filhos DIRETOS do flex
   container os três <input> absolutos colapsavam no mesmo pixel (regra do
   flexbox: filho absoluto é posicionado como se fosse o único item). Assim o
   input cobre 100% da pílula e continua sendo um radio nativo. */
.periodo-op { position: relative; display: flex; }
.periodo-op input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.periodo-op label {
    padding: .5rem 1.15rem; border-radius: var(--r-pill); cursor: pointer;
    font-size: var(--fs-sm); font-weight: 600; color: var(--sobre-papel-3);
    transition: background var(--tr-rapido), color var(--tr-rapido), box-shadow var(--tr-rapido);
    user-select: none; display: inline-flex; align-items: center; gap: .4rem;
    white-space: nowrap; min-height: 40px; width: 100%; justify-content: center;
}
.periodo-op input:checked + label { background: var(--papel-puro); color: var(--violeta-600); box-shadow: var(--sombra-papel); }
.periodo-op input:focus-visible + label { outline: 2px solid var(--violeta-600); outline-offset: 2px; }
/* Verde MAIS escuro que o --entra-txt: aqui o fundo é a pílula cinza com verde
   translúcido por cima, e o #047857 dá 3,87:1 (reprova AA). O --entra-txt2
   (#065F46) dá 5,4:1. */
.eco {
    font-family: var(--mono); font-size: var(--fs-micro);
    background: rgba(16,185,129,.14); color: var(--entra-txt2);
    border-radius: var(--r-pill); padding: .1rem .45rem;
}
.periodo-op input:checked + label .eco { background: rgba(109,40,217,.12); color: var(--violeta-700); }
.periodo-nota { text-align: center; font-size: var(--fs-micro); color: var(--sobre-papel-3); margin-bottom: 1.6rem; }
/* A 460px a pílula de três períodos estourava a viewport (rótulos nowrap e flex
   item não encolhe abaixo do conteúdo): o selo desce para a segunda linha. */
@media (max-width: 460px) {
    .periodo-cx { width: 100%; }
    .periodo-op { flex: 1 1 0; min-width: 0; }
    .periodo-op label { flex-direction: column; gap: .12rem; padding: .45rem .3rem; font-size: var(--fs-xs); line-height: 1.25; }
    .eco { padding: .05rem .35rem; }
}

.grade-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 1.1rem; align-items: stretch; }
.plano {
    border: 1px solid var(--linha); border-radius: var(--r-lg);
    background: var(--papel-puro); padding: 1.7rem 1.5rem;
    display: flex; flex-direction: column; height: 100%;
    transition: border-color var(--tr-medio), transform var(--tr-medio), box-shadow var(--tr-medio);
}
.plano:hover { border-color: var(--linha-2); transform: var(--sobe-card); box-shadow: var(--sombra-papel); }
.plano.destaque-plano {
    border-color: var(--violeta-500);
    box-shadow: 0 0 0 1px var(--violeta-500), var(--sombra-papel);
    position: relative;
}
.plano.destaque-plano::before {
    content: 'Mais escolhido';
    position: absolute; top: -1px; right: -1px;
    background: var(--violeta-600); color: var(--papel-puro);
    font-family: var(--mono); font-size: var(--fs-micro);
    letter-spacing: .12em; text-transform: uppercase;
    padding: .22rem .6rem; border-radius: 0 var(--r-lg) 0 var(--r-sm);
}
.plano-nome { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--sobre-papel-3); }
/* Para quem é + qual o resultado: sem isso o card é lista de itens e o visitante
   compara preço, não adequação. */
.plano-para { font-size: var(--fs-xs); color: var(--violeta-700); font-weight: 700; margin-top: .5rem; min-height: 2.6em; line-height: 1.35; }
.plano-preco {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 2.4rem; font-weight: 500; color: var(--sobre-papel);
    line-height: 1; margin-top: .7rem; display: flex; align-items: baseline; gap: .12rem;
    letter-spacing: -.02em;
}
.plano-preco sup { font-size: .9rem; font-weight: 400; color: var(--sobre-papel-3); align-self: flex-start; margin-top: .35rem; }
.plan-cents { font-size: 1.05rem; align-self: flex-start; margin-top: .3rem; }
.plano-periodo { font-size: var(--fs-xs); color: var(--sobre-papel-3); margin-top: .5rem; }
/* eq + savings com altura reservada: trocar o período não pode empurrar a lista
   para baixo (salto de layout no meio da decisão). */
.plano-eq { font-family: var(--mono); font-size: var(--fs-micro); color: var(--sobre-papel-3); margin-top: .35rem; min-height: 1.2em; }
.plan-savings {
    font-family: var(--mono); font-size: var(--fs-micro);
    color: var(--entra-txt); background: rgba(16,185,129,.12);
    border-radius: var(--r-pill); padding: .1rem .55rem;
    display: inline-block; margin-top: .35rem; min-height: 1.3em;
}
.plano-resultado { font-size: var(--fs-sm); color: var(--sobre-papel-2); margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--linha); }
.plano-itens { margin: 1rem 0; display: grid; gap: .55rem; }
.plano-itens li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--sobre-papel-2); }
.plano-itens .ic { color: var(--entra-txt); margin-top: .32em; }
.plano-dif { margin: 0 0 1.1rem; display: grid; gap: .55rem; }
.plano-dif-rot { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--violeta-600); margin: 1.15rem 0 .55rem; }
.plano-dif li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--sobre-papel); font-weight: 500; }
.plano-dif .ic { color: var(--violeta-600); margin-top: .32em; }
.plano .fim { margin-top: auto; }
.plano-obs { font-size: var(--fs-micro); color: var(--sobre-papel-3); text-align: center; margin-top: .7rem; }

/* ── Contador/BPO: bloco próprio, não um 4º card espremido ──────────────── */
.bpo {
    margin-top: 1.1rem;
    border: 1px solid var(--ink-700); border-radius: var(--r-lg);
    background: var(--ink-900); color: var(--sobre-esc);
    padding: clamp(1.9rem, 3.5vw, 2.6rem);
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr);
    gap: clamp(1.8rem, 4vw, 3rem); align-items: center;
    box-shadow: var(--sombra-papel);
}
.bpo h3 { font-size: var(--fs-xl); font-weight: 600; margin-top: .5rem; }
.bpo .preco { font-family: var(--display); font-weight: 600; font-size: 1.9rem; letter-spacing: var(--tr-titulo); margin-top: .8rem; line-height: 1; }
.bpo .preco small { display: block; font-family: var(--sans); font-weight: 400; font-size: var(--fs-xs); letter-spacing: 0; color: var(--sobre-esc-2); margin-top: .8rem; line-height: 1.6; max-width: 40ch; }
.bpo-itens { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px,1fr)); gap: .9rem 1.5rem; }
.bpo-itens li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--sobre-esc-2); }
.bpo-itens .ic { color: var(--entra); margin-top: .32em; }
.bpo-acoes { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.bpo-obs { font-size: var(--fs-micro); color: var(--sobre-esc-3); margin-top: .9rem; }
@media (max-width: 900px) { .bpo { grid-template-columns: 1fr; } }

/* ── Tabela comparativa ────────────────────────────────────────────────────
   Rolagem horizontal PRÓPRIA: a página nunca rola de lado, a tabela sim.
   `contain: paint` NÃO é enfeite: sem ele a largura intrínseca da tabela vaza
   para documentElement.scrollWidth e o celular aplica shrink-to-fit, encolhendo
   a página INTEIRA e jogando todas as âncoras fora do lugar. */
.comparativo { margin-top: clamp(3rem, 5vw, 4rem); }
.tab-env {
    margin-top: 1.6rem; overflow-x: auto; border: 1px solid var(--linha);
    border-radius: var(--r); background: var(--papel-puro);
    -webkit-overflow-scrolling: touch;
    contain: paint;
}
.tab-env:focus-visible { outline: 2px solid var(--violeta-600); outline-offset: 2px; }
.tab-planos { width: 100%; min-width: 660px; border-collapse: collapse; font-size: var(--fs-sm); }
.tab-planos th, .tab-planos td { padding: .7rem .85rem; text-align: center; border-bottom: 1px solid var(--linha); }
/* Sem position:sticky: o scroll aqui é HORIZONTAL e o container não tem altura
   limitada — sticky vertical nunca grudaria em nada (CSS morto). */
.tab-planos thead th {
    background: var(--papel-2);
    font-family: var(--mono); font-size: var(--fs-micro);
    letter-spacing: .12em; text-transform: uppercase; color: var(--sobre-papel);
    font-weight: 500; border-bottom: 1px solid var(--linha-2);
}
.tab-planos thead th.rec, .tab-planos tbody th { text-align: left; min-width: 250px; }
.tab-planos tbody th { font-family: var(--sans); font-weight: 400; font-size: var(--fs-sm); letter-spacing: 0; color: var(--sobre-papel-2); background: var(--papel-puro); }
.tab-planos tr.grupo th {
    font-family: var(--mono); font-size: var(--fs-micro);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--violeta-600); background: var(--papel-2);
    text-align: left; padding-top: .9rem; padding-bottom: .9rem;
}
.tab-planos tbody tr:hover th, .tab-planos tbody tr:hover td { background: var(--papel-2); }
.tab-planos td.valor { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--sobre-papel); }
.tab-sim { color: var(--entra-txt); }
/* O ✗ é informação, não enfeite: cai no WCAG 1.4.11 (mínimo 3:1). .55 dá 4,13:1
   e continua visivelmente mais apagado que o ✓. */
.tab-nao { color: rgba(18,16,31,.55); }
.tab-planos .col-destaque { background: rgba(109,40,217,.04); }
.tab-planos thead th.col-destaque { background: rgba(109,40,217,.09); color: var(--violeta-700); }
.tab-dica { font-size: var(--fs-micro); color: var(--sobre-papel-3); margin-top: .7rem; }
/* Em tela estreita só a coluna "Básico" cabe e nada avisa que a tabela rola. */
.tab-rola {
    display: none; align-items: center; gap: .4rem;
    font-family: var(--mono); font-size: var(--fs-micro);
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--violeta-600); margin-top: 1.2rem;
}
@media (max-width: 780px) { .tab-rola { display: flex; } }

.preco-rodape { text-align: center; margin-top: 2.2rem; font-size: var(--fs-sm); color: var(--sobre-papel-3); }
.preco-rodape a { color: var(--violeta-600); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   12. CONFIANÇA
   ═══════════════════════════════════════════════════════════════════════════
   Colunas EXPLÍCITAS, não auto-fit: o fundo da grade é a cor do filete, então
   célula sobrando vira bloco vazio com a textura aparecendo. 4 divide por 4, 2
   e 1 — nenhuma sobra. */
.garantias {
    display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 3rem;
    background: var(--linha-esc); border: 1px solid var(--linha-esc);
    border-radius: var(--r-lg); overflow: hidden;
}
@media (min-width: 620px)  { .garantias { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .garantias { grid-template-columns: repeat(4, 1fr); } }
.garantia { background: var(--ink-925); padding: 1.7rem 1.45rem; }
.garantia .ic { color: var(--entra); font-size: 1.15rem; margin-bottom: .9rem; }
.garantia h3 { font-size: var(--fs-sm); font-weight: 600; margin-bottom: .4rem; }
.garantia p { font-size: var(--fs-xs); color: var(--sobre-esc-2); line-height: 1.6; }
.nota-honesta {
    margin-top: 2rem; padding: 1.2rem 1.4rem;
    border: 1px solid var(--linha-esc-2); border-radius: var(--r);
    background: rgba(255,255,255,.02);
    font-size: var(--fs-sm); color: var(--sobre-esc-2);
    display: flex; gap: .9rem; align-items: flex-start;
}
.nota-honesta .ic { color: var(--violeta-300); margin-top: .25em; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   13. FAQ — <details> nativo (teclado e leitor de tela de graça)
   ═══════════════════════════════════════════════════════════════════════════ */
.faq { max-width: 780px; margin: 3rem auto 0; border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem;
    padding: 1.25rem .25rem; font-weight: 600; font-size: var(--fs-base);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--violeta-600); }
.faq summary .sinal {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--r-sm);
    border: 1px solid var(--linha-2); color: var(--violeta-600);
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--tr-medio), background var(--tr-rapido);
}
.faq details[open] summary .sinal { transform: rotate(180deg); background: var(--papel-2); }
.faq .resp { padding: 0 3rem 1.4rem .25rem; font-size: var(--fs-sm); color: var(--sobre-papel-2); }
.faq .resp a { color: var(--violeta-600); font-weight: 600; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   14. SUPORTE
   ═══════════════════════════════════════════════════════════════════════════ */
.suporte-linha { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(2.5rem,5vw,4rem); align-items: start; }
.contato-lista { margin-top: 1.8rem; }
.contato-item { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid var(--linha); }
.contato-item:last-child { border-bottom: 0; }
.contato-item .ic { color: var(--violeta-600); font-size: 1.1rem; margin-top: .15em; }
.contato-item b { display: block; font-size: var(--fs-sm); }
.contato-item span { font-size: var(--fs-sm); color: var(--sobre-papel-3); }

.ticket { border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--papel-puro); overflow: hidden; box-shadow: var(--sombra-papel); }
.ticket-cab { background: var(--ink-900); color: var(--sobre-esc); padding: 1.4rem 1.7rem; }
.ticket-cab h3 { font-size: var(--fs-xl); font-weight: 600; }
.ticket-cab p { font-size: var(--fs-xs); color: var(--sobre-esc-2); margin-top: .25rem; }
.ticket-corpo { padding: 1.7rem; }
.ticket-type-btns { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.ticket-type-btn {
    font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600;
    padding: .45rem .85rem; border-radius: var(--r-sm); cursor: pointer;
    border: 1px solid var(--linha-2); background: transparent;
    color: var(--sobre-papel-3); transition: all var(--tr-rapido);
    display: inline-flex; align-items: center; gap: .35rem; min-height: 36px;
}
.ticket-type-btn:hover { border-color: var(--violeta-600); color: var(--violeta-600); }
.ticket-type-btn.active { background: rgba(109,40,217,.08); border-color: var(--violeta-600); color: var(--violeta-700); }
.campo { margin-bottom: 1rem; }
.campo label, .campo-rot { display: block; font-size: var(--fs-xs); font-weight: 600; margin-bottom: .35rem; padding: .2rem 0; }
.campo input, .campo textarea {
    width: 100%; font-family: var(--sans); font-size: var(--fs-sm);
    padding: .7rem .9rem; border-radius: var(--r-sm);
    border: 1px solid var(--linha-2); background: var(--papel-2);
    color: var(--sobre-papel);
    transition: border-color var(--tr-rapido), background var(--tr-rapido), box-shadow var(--tr-rapido);
    min-height: 44px;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--sobre-papel-3); opacity: .75; }
.campo input:focus, .campo textarea:focus {
    outline: none; border-color: var(--violeta-600); background: var(--papel-puro);
    box-shadow: 0 0 0 3px rgba(109,40,217,.14);
}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--sai); }
.campo textarea { resize: vertical; min-height: 118px; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
#ticket-alert { display: none; border-radius: var(--r-sm); padding: .8rem 1rem; font-size: var(--fs-sm); margin-bottom: 1rem; border: 1px solid transparent; }
#ticket-alert.ok  { background: rgba(16,185,129,.1);  border-color: rgba(16,185,129,.35); color: var(--entra-txt2); }
#ticket-alert.err { background: rgba(244,63,94,.09);  border-color: rgba(244,63,94,.35);  color: var(--c-rose-800); }
#ticket-alert.av  { background: rgba(245,158,11,.1);  border-color: rgba(245,158,11,.4);  color: var(--c-amber-800); }
.lgpd-aviso { font-size: var(--fs-micro); color: var(--sobre-papel-3); margin-top: .9rem; line-height: 1.6; }
.lgpd-aviso a { color: var(--violeta-600); font-weight: 700; text-decoration: underline; }
@media (max-width: 860px) {
    .suporte-linha { grid-template-columns: 1fr; }
    .dupla { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. CTA FINAL E RODAPÉ
   ═══════════════════════════════════════════════════════════════════════════ */
.cta-final { text-align: center; }
.cta-final h2 { font-size: var(--fs-2xl); font-weight: 600; line-height: 1.1; margin-top: 1.4rem; }
.cta-final .apoio { margin: 1.1rem auto 0; text-align: center; }
.cta-final .acoes { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }

.rodape { background: var(--ink-950); color: var(--sobre-esc-2); padding: clamp(48px,6vw,68px) 0 26px; }
.rodape-grade { display: grid; grid-template-columns: minmax(0,1.6fr) repeat(3, minmax(0,1fr)); gap: 2.5rem; }
.rodape h3 { font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sobre-esc); margin-bottom: 1rem; }
.rodape li { margin-bottom: .25rem; }
/* Alvo de toque: links empilhados mediam 16px — abaixo dos 24px do WCAG 2.5.8,
   e sem a exceção de "link dentro de frase". */
.rodape a { font-size: var(--fs-sm); color: var(--sobre-esc-2); transition: color var(--tr-rapido); display: inline-flex; align-items: center; min-height: 28px; }
.rodape a:hover { color: var(--violeta-300); }
.marca-rodape { font-size: 1.25rem; }
.rodape-desc { font-size: var(--fs-sm); color: var(--sobre-esc-2); margin-top: .9rem; max-width: 34ch; }
.rodape-empresa { font-size: var(--fs-xs); color: var(--sobre-esc-3); margin-top: 1.2rem; line-height: 1.8; }
.rodape-fim {
    margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--linha-esc);
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--sobre-esc-3);
}
.rodape-fim nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.rodape-fim nav a { font-size: var(--fs-xs); }
@media (max-width: 800px) { .rodape-grade { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 480px) { .rodape-grade { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   16. PREFERÊNCIAS DO SISTEMA
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
@media (forced-colors: active) {
    .btn-cta, .selo, .plano.destaque-plano::before { forced-color-adjust: none; }
    .perfil-ic, .obj-func li { border: 1px solid CanvasText; }
    .tab-sim, .tab-nao { forced-color-adjust: none; }
    /* O filete da ênfase é box-shadow: não sobrevive a forced-colors. */
    .titulo em, .hero h1 em, .prova-frase em, .cta-final h2 em { box-shadow: none; }
}
/* Impressão: as seções escuras sairiam brancas com texto claro. */
@media print {
    .topo, .hero-brilho, .hero-grade, .ticket, .cta-final { display: none; }
    .escuro, .escuro-2, .rodape, .bpo, .obj, .garantia, .conc, .ticket-cab, .hero {
        background: #fff !important; color: #000 !important;
    }
    .escuro *, .escuro-2 *, .rodape *, .bpo *, .obj *, .garantia * { color: #000 !important; text-shadow: none !important; }
    .titulo em, .hero h1 em, .prova-frase em, .marca-txt {
        -webkit-text-fill-color: #000 !important; background: none !important;
        color: #000 !important; box-shadow: none !important;
    }
    .hero-shot, .conc { border-color: #999 !important; }
    a[href^="/"]::after { content: " (asafinance.online" attr(href) ")"; font-size: .8em; }
}