/* Oryx — sistema visual compartilhado entre site público e produto. */

:root {
    color-scheme: light;

    --plano: #f3f0e8;
    --superficie: #fffdf8;
    --tinta: #12211b;
    --tinta-2: #4e5d55;
    /* Escurecido em 31/08/2026 (/impeccable typeset), de #65736b: contraste contra
       --plano medido em 4.37:1, abaixo do piso AA de 4.5:1 pra texto normal — usado
       em rótulo/metadado de 12-13px, que não se qualifica pra exceção de "texto
       grande". Novo valor mede 4.91:1 contra --plano, com folga, mesmo matiz. */
    --tinta-fraca: #5e6b63;
    --grade: #dfe3dc;
    --eixo: #bdc8c0;
    --borda: rgba(16, 42, 34, 0.13);

    --floresta-950: #071712;
    --floresta-900: #0d251d;
    --floresta-800: #12372a;
    --floresta-700: #19533e;
    --floresta-600: #1d6b4d;
    --salvia: #a8b9aa;
    /* Verde-menta mais vivo que --salvia — só pra sobretítulo/marcador de lista sobre
       fundo escuro (extraído em 31/08/2026, era literal em 6 lugares diferentes). */
    --salvia-clara: #8fc3a8;
    --marfim: #f3f0e8;
    /* Creme mais quente que --marfim/--plano — fundo dos painéis "produto-*"
       (extraído em 31/08/2026, era literal em 3 lugares diferentes). */
    --marfim-quente: #f8f6ee;
    --cobre: #b9784b;

    --serie: #1d6b4d;
    --serie-lavagem: #d8ebe2;

    /* Estado — nunca usado como cor de série, sempre acompanhado de rótulo. */
    --critico: #a6453d;
    /* Variante escura de --critico pra texto sobre fundo claro (--critico sozinho não
       tem contraste suficiente pra texto pequeno) — extraído em 31/08/2026, era literal
       em 3 lugares diferentes, sempre no mesmo papel (estado de erro/crítico em texto). */
    --critico-escuro: #81352f;
    --bom: #2d7b57;
    --atencao: #b97832;
    /* Variante escura de --atencao pra texto sobre fundo claro, pelo mesmo motivo
       de --critico-escuro: --atencao mede 3,56:1 sobre --superficie e reprova no
       AA para texto normal (4,5:1). Esta mede 6,02:1 — extraída em 06/10/2026,
       quando o nível de evidência passou a precisar de um tom de ressalva legível. */
    --atencao-escuro: #8a5620;

    --raio: 12px;
    --sombra: 0 24px 70px rgba(7, 23, 18, 0.12);
    --tempo-ui: 160ms;
    --tempo-resposta: 260ms;
    --tempo-entrada: 540ms;
    --tempo-traco: 760ms;
    --ease-ui: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-entrada: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--plano);
    color: var(--tinta);
    /* "Inter" nunca foi carregado (sem @font-face, sem link do Google Fonts em lugar
       nenhum) — a declaração era ficção: todo visitante sempre viu a fonte nativa do
       próprio sistema. Corrigido em 31/08/2026 (/impeccable typeset) pra declarar
       honestamente o que já era renderizado, sem acrescentar requisição de fonte
       externa nova — a UI/corpo de texto usa a fonte nativa de propósito, o papel
       distintivo é do serif de título (ver .manifesto, h1-h3, etc.). */
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Foco visível em todo elemento interativo — não é opcional. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid #62a686;
    outline-offset: 3px;
    border-radius: 3px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(29, 107, 77, 0.28);
    outline-offset: 1px;
    border-color: var(--floresta-600);
}

[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }

    .movimento-pronto [data-motion] {
        opacity: 0;
        transition:
            opacity var(--tempo-entrada) var(--ease-entrada),
            transform var(--tempo-entrada) var(--ease-entrada),
            clip-path 680ms var(--ease-entrada);
        transition-delay: var(--atraso-motion, 0ms);
    }

    .movimento-pronto [data-motion="enter"] {
        transform: translateY(12px);
    }

    .movimento-pronto [data-motion="mask"] {
        clip-path: inset(0);
        transform: translateY(12px);
    }

    .movimento-pronto [data-motion="resolve"] {
        transform: scale(0.985);
    }

    .movimento-pronto .site-header[data-motion="enter"] {
        transform: translateY(-8px);
    }

    .movimento-pronto [data-motion].visivel {
        opacity: 1;
        clip-path: inset(0);
        transform: none;
    }

    /* O recorte usado na entrada não pode confinar o dropdown ao alto do cabeçalho. */
    .movimento-pronto .site-header[data-motion].visivel {
        clip-path: none;
    }

    .movimento-pronto [data-motion="mask"].visivel {
        animation: revelar-por-mascara 680ms var(--ease-entrada) var(--atraso-motion, 0ms) both;
    }

    .movimento-pronto .manifesto-conteudo[data-motion="trace"] svg path {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        transition: stroke-dashoffset var(--tempo-traco) var(--ease-entrada);
        transition-delay: calc(var(--atraso-motion, 0ms) + 120ms);
    }

    .movimento-pronto .manifesto-conteudo[data-motion="trace"].visivel svg path {
        stroke-dashoffset: 0;
    }

    .movimento-pronto .produto-narrativa[data-motion="resolve"] {
        transform: translateY(16px) scale(0.99);
        transition-duration: 720ms;
    }

    .movimento-pronto .produto-narrativa[data-motion="resolve"].visivel {
        transform: none;
    }

    .movimento-pronto .produto-leitura {
        opacity: 0;
        transition:
            opacity var(--tempo-resposta) var(--ease-ui),
            transform var(--tempo-resposta) var(--ease-ui);
    }

    .movimento-pronto .produto-leitura.visivel {
        opacity: 1;
        transform: none;
        /* Depois dos três momentos do ciclo entrarem: a leitura é a conclusão deles. */
        transition-delay: 620ms;
    }

    .movimento-pronto .passos li[data-motion="trace"]::before {
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--tempo-traco) var(--ease-entrada);
        transition-delay: calc(var(--atraso-motion, 0ms) + 100ms);
    }

    .movimento-pronto .passos li[data-motion="trace"].visivel::before {
        transform: scaleX(1);
    }

    .movimento-pronto .confiabilidade-mapa[data-motion="trace"] ol::before {
        transform: scaleY(0);
        transform-origin: top;
        transition: transform var(--tempo-traco) var(--ease-entrada);
        transition-delay: calc(var(--atraso-motion, 0ms) + 100ms);
    }

    .movimento-pronto .confiabilidade-mapa[data-motion="trace"].visivel ol::before {
        transform: scaleY(1);
    }
}

@keyframes resolver-sinal {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(185, 120, 75, 0)); }
    50% { filter: drop-shadow(0 0 7px rgba(185, 120, 75, 0.55)); }
}

@keyframes revelar-por-mascara {
    from {
        opacity: 0;
        clip-path: inset(0 0 100% 0);
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        clip-path: inset(0);
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .movimento-pronto [data-motion],
    .movimento-pronto .produto-leitura {
        opacity: 1 !important;
        clip-path: none !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .movimento-pronto .manifesto-conteudo svg path {
        stroke-dashoffset: 0 !important;
    }
}

/* ── Estrutura ─────────────────────────────────────────────────────────── */

.envoltorio {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px 72px;
}

.topo {
    border-bottom: 1px solid var(--borda);
    margin-bottom: 28px;
    padding: 26px 0 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    align-items: baseline;
}

.marca {
    font-size: 17px;
    font-weight: 620;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.marca .marca-eco {
    color: var(--tinta-fraca);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    margin-left: 12px;
    font-size: 14px;
}

/*
 * O panorama é uma frase, não uma fileira de cartões com número grande e seta.
 * Três cartões de indicador diriam menos e ocupariam a dobra inteira.
 */
.panorama {
    margin-left: auto;
    color: var(--tinta-2);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.panorama strong {
    color: var(--tinta);
    font-weight: 620;
}

.volta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--tinta-2);
    font-size: 13.5px;
    padding: 4px 0;
}

.volta:hover {
    color: var(--tinta);
}

h1 {
    font-size: 24px;
    font-weight: 640;
    letter-spacing: -0.012em;
    margin: 0 0 4px;
}

/*
 * Rótulo pequeno de seção do app (ex.: "Histórico", no detalhe da conta).
 *
 * Escopado em 03/09/2026. Até aqui isto era um seletor de elemento nu (`h2`), e o
 * `text-transform: uppercase` vazava para TODOS os 21 h2 do site — inclusive os títulos
 * de display de 60px da home e os de 42px dos cartões de login. Que era vazamento, e não
 * intenção, tem duas provas no próprio arquivo: os títulos são escritos em caixa normal
 * nos templates ("A confiança caiu antes de o resultado aparecer."), e as regras de
 * display declaram tracking NEGATIVO (-0.045em na home, -0.035em no auth) — valor que só
 * faz sentido em caixa normal; caixa alta pede tracking positivo.
 *
 * Dois componentes já tinham remendado o sintoma localmente (`.carteira-painel h2` e
 * `.panorama h2` declaram `text-transform: none`) sem ninguém corrigir a origem.
 * Aqueles dois `none` viraram redundantes com esta mudança, mas ficam como proteção caso
 * uma regra global volte a aparecer.
 */
.app-main > h2 {
    font-size: 12px;
    font-weight: 620;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
    margin: 0 0 14px;
}

.legenda {
    color: var(--tinta-2);
    font-size: 13.5px;
    margin: 0;
}

/* ── Carteira ──────────────────────────────────────────────────────────── */

.lista {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--borda);
}

.linha {
    display: grid;
    gap: 10px 18px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "conta      abrir"
        "objecoes   objecoes"
        "satisfacao satisfacao";
    align-items: center;
    padding: 14px 10px;
    border-bottom: 1px solid var(--borda);
}

.cabecalho-lista {
    display: none;
    gap: 18px;
    align-items: end;
    padding: 0 10px 8px;
    border-bottom: 1px solid var(--eixo);
    font-size: 11.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
}

.linha {
    transition: background-color 120ms ease;
}

.linha:hover {
    background: var(--superficie);
}

.col-conta {
    grid-area: conta;
    min-width: 0;
}

.conta-id {
    display: block;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.conta-detalhe {
    display: block;
    color: var(--tinta-fraca);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selo-degradado-resumo {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 7px;
    border: 1px dashed var(--tinta-fraca);
    border-radius: 999px;
    color: var(--tinta-fraca);
    font-size: 10.5px;
    line-height: 1.25;
}

.col-traco {
    display: block;
}

/*
 * O que pede trabalho, por estado. Substitui o par "4" + "Voltou" que ocupava duas
 * colunas e não dizia se uma das quatro voltou ou as quatro.
 */
.col-objecoes {
    grid-area: objecoes;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 13px;
    color: var(--tinta-2);
}

.objecao-ficha {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.objecao-ficha b {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    color: var(--tinta);
}

/* Conta sem nada vivo não ganha ponto colorido: não há estado a sinalizar. */
.objecao-nenhuma {
    color: var(--tinta-fraca);
}

/*
 * Pesquisa de satisfação — pano de fundo desde a decisão de 15/09, e agora tratada
 * como tal: uma coluna em vez de três, e sem ponto colorido. Antes, "Caindo" usava o
 * mesmo ponto vermelho que "Voltou" na coluna vizinha, com significados diferentes —
 * a mesma cor servindo a duas escalas.
 */
.col-satisfacao {
    grid-area: satisfacao;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.satisfacao-leitura {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    font-size: 12.5px;
    color: var(--tinta-fraca);
    white-space: nowrap;
}

.satisfacao-leitura b {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    font-size: 13.5px;
    color: var(--tinta-2);
}

@media (min-width: 900px) {
    .linha {
        grid-template-columns: minmax(0, 26rem) minmax(0, 1fr) 13rem;
        grid-template-areas: "conta objecoes satisfacao";
        gap: 18px;
    }

    .cabecalho-lista {
        display: grid;
        grid-template-columns: minmax(0, 26rem) minmax(0, 1fr) 13rem;
    }
}

/* ── Traço de NPS (elemento de assinatura) ─────────────────────────────── */

.traco {
    display: block;
    overflow: visible;
}

.traco .calibracao {
    stroke: var(--eixo);
    stroke-width: 1;
}

.traco .curva {
    fill: none;
    stroke: var(--serie);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Anel na cor da superfície: separa a marca da curva sem desenhar borda. */
.traco .marca {
    fill: var(--critico);
    stroke: var(--superficie);
    stroke-width: 2;
}

.traco .sem-leitura {
    fill: var(--tinta-fraca);
    font-size: 10px;
}

/* ── Estado ────────────────────────────────────────────────────────────── */

.estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.estado .ponto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}

.estado-caindo .ponto { background: var(--critico); }
.estado-estavel .ponto { background: var(--tinta-fraca); }
.estado-subindo .ponto { background: var(--bom); }

.estado-caindo { color: var(--tinta); font-weight: 560; }

.prioridade-CRITICA .ponto { background: var(--critico); }
.prioridade-ALTA .ponto { background: var(--atencao); }
.prioridade-MEDIA .ponto { background: var(--tinta-fraca); }
.prioridade-BAIXA .ponto { background: var(--eixo); }

.sem-friccao {
    color: var(--tinta-fraca);
}

/* ── Tela de conta ─────────────────────────────────────────────────────── */

.identificacao {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    align-items: baseline;
    margin-bottom: 30px;
}

.identificacao .legenda {
    font-variant-numeric: tabular-nums;
}

.painel {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 22px 24px 18px;
    margin-bottom: 34px;
}

.area-grafico {
    position: relative;
    height: 260px;
}

.area-grafico[hidden],
.chave[hidden],
.grafico-status[hidden] {
    display: none;
}

.chave {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--borda);
    font-size: 12.5px;
    color: var(--tinta-2);
}

.chave span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.chave .amostra-linha {
    width: 18px;
    height: 2px;
    background: var(--serie);
    border-radius: 1px;
}

.chave .amostra-marca {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--critico);
}

.chave .amostra-calibracao {
    width: 18px;
    height: 1px;
    background: var(--eixo);
}

/* ── Linha do tempo de reuniões ────────────────────────────────────────── */

.tempo {
    list-style: none;
    margin: 0;
    padding: 0;
}

.reuniao {
    border-top: 1px solid var(--borda);
    padding: 20px 0;
    display: grid;
    gap: 4px 22px;
    grid-template-columns: 88px minmax(0, 1fr);
}

.reuniao .quando {
    font-variant-numeric: tabular-nums;
    color: var(--tinta-2);
    font-size: 13.5px;
    padding-top: 1px;
}

.reuniao .sobre {
    min-width: 0;
}

.cabecalho-reuniao {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    align-items: baseline;
    color: var(--tinta-fraca);
    font-size: 13px;
}

.cabecalho-reuniao .nps-reuniao {
    color: var(--tinta);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .reuniao {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Momento de fricção ────────────────────────────────────────────────── */

.friccao {
    margin-top: 14px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
}

.friccao-topo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--borda);
    font-size: 13px;
    color: var(--tinta-2);
}

.friccao-titulo {
    font-weight: 620;
    color: var(--tinta);
    font-size: 14px;
}

/*
 * O trecho de origem é conteúdo de primeira classe, não nota de rodapé nem
 * tooltip. É a prova de que a conclusão veio da conversa, e é o que faz um
 * vendedor confiar no sistema — então recebe peso tipográfico e a marca da
 * série ao lado, como uma citação.
 */
.trecho {
    margin: 0;
    padding: 18px 20px 18px 18px;
    border-left: 3px solid var(--serie);
    font-size: 16px;
    line-height: 1.55;
    color: var(--tinta);
}

.trecho .fonte {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
}

.friccao-evidencia-compartilhada {
    margin-top: 6px;
    margin-left: 18px;
}

.evidencia-compartilhada {
    margin: 0;
    padding: 13px 18px;
    border-left: 3px solid var(--serie);
    color: var(--tinta-fraca);
    font-size: 12px;
    font-style: italic;
}

/*
 * A ação é o desfecho do cartão — "o que fazer agora". Por isso ela sai do plano
 * da evidência: fundo do plano de fundo e a barra lateral na cor da série marcam
 * a mudança de camada (de "o que aconteceu" para "o que fazer") sem gritar.
 */
.acao {
    padding: 16px 18px 18px 15px;
    border-top: 1px solid var(--borda);
    background: var(--plano);
    border-left: 3px solid var(--serie);
}

.acao-rotulo {
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
    font-weight: 620;
    margin-bottom: 5px;
}

.acao-titulo {
    font-weight: 620;
    margin-bottom: 6px;
}

.acao-texto {
    color: var(--tinta-2);
    font-size: 14px;
    margin: 0;
}

.selo-revisao {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--atencao);
    color: var(--tinta);
    font-size: 11.5px;
}

/*
  Por que o sistema concluiu o que concluiu. Fica visualmente subordinado ao trecho:
  o trecho é evidência, isto é leitura da evidência — e a hierarquia deve dizer qual
  é qual sem o usuário precisar pensar a respeito.
*/
.justificativa {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tinta-fraca, #6b6b6b);
}

/*
  Aviso de modo degradado (CLAUDE.md §5). Discreto de propósito — é uma ressalva
  permanente sobre o alcance da análise, não um alarme sobre a conta. Um selo
  chamativo aqui competiria com a prioridade da fricção, que é o que deve guiar
  a atenção do vendedor.
*/
.selo-degradado {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px dashed var(--tinta-fraca, #9a9a9a);
    color: var(--tinta-fraca, #6b6b6b);
    font-size: 11.5px;
}

/*
 * O selo positivo (modo IA) usa linha cheia e a cor da série: a fricção passou
 * pelo julgamento que o produto vende. Só aparece quando de fato houve inferência —
 * um selo permanente viraria papel de parede e esvaziaria o aviso degradado.
 */
.selo-ia {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--serie);
    color: var(--tinta-2);
    font-size: 11.5px;
}

/* ── Chat por conta ────────────────────────────────────────────────────── */

.chat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.chip {
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--plano);
    color: var(--floresta-900);
    font: inherit;
    font-size: 13px;
    padding: 7px 14px;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.chip:hover {
    border-color: var(--floresta-600);
    background: var(--serie-lavagem);
}

.chat-form {
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
}

.chat-form input {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(16, 42, 34, 0.19);
    border-radius: 8px;
    background: var(--superficie);
    color: var(--tinta);
    font: inherit;
    font-size: 14px;
    padding: 11px 14px;
}

.chat-form input:focus-visible {
    outline: 3px solid #62a686;
    outline-offset: 1px;
}

/* Aviso de carregamento/erro/cota — mesmo princípio dos estados do gráfico: dizer o que
   está acontecendo em vez de deixar o botão parado sem explicação. */
.chat-status {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--tinta-fraca);
}

.chat-status[hidden] {
    display: none;
}

.chat-status.chat-status-erro {
    color: var(--critico);
}

.chat-conversa {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.chat-troca {
    border-top: 1px solid var(--borda);
    padding-top: 14px;
}

.chat-pergunta {
    margin: 0 0 6px;
    font-weight: 620;
    color: var(--tinta);
}

.chat-pergunta::before {
    content: "P: ";
    color: var(--tinta-fraca);
    font-weight: 620;
}

.chat-resposta {
    margin: 0;
    color: var(--tinta-2);
    line-height: 1.55;
}

.chat-quando {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--tinta-fraca);
}

/* A explicação dos selos mora na tela, recolhida: quem precisa abre, sem custo
   de espaço para quem já sabe. <details> é navegável por teclado nativamente. */
.selos-explicacao {
    margin: -8px 0 20px;
    font-size: 13px;
    color: var(--tinta-2);
    max-width: 72ch;
}

.selos-explicacao summary {
    cursor: pointer;
    color: var(--tinta-fraca);
    font-size: 12.5px;
    letter-spacing: 0.02em;
    display: list-item;
    width: fit-content;
}

.selos-explicacao p {
    margin: 8px 0 0;
    line-height: 1.5;
}

/* Fallback do gráfico quando o CDN da biblioteca não responde (ou sem JS). */
.grafico-indisponivel {
    margin: 0;
    padding: 14px 0 4px;
    color: var(--tinta-fraca);
    font-size: 13.5px;
}

/* ── Nível de evidência ────────────────────────────────────────────────── */

/*
 * Substitui o medidor de confiança, removido em 06/10/2026 junto do fragmento
 * `confianca()` e dos seletores `.confianca`/`.medidor`.
 *
 * O medidor era caprichado — rampa de cor por faixa, corrigida em 01/09 porque
 * antes ela era sempre verde — e ainda assim era a coisa errada na tela. A
 * decisão de 15/09 é explícita: o percentual de confiança sai e vira nível de
 * evidência, porque `Insight.confianca` não é probabilidade calibrada. Ela é uma
 * base arbitrária multiplicada por fatores de papel e de falante
 * (`DetectorLexicalDeFriccao`); desenhar uma barra sobre esse número dá a ele
 * precisão que ele não tem, e uma barra com três cores afirma com mais força
 * ainda. Nenhum componente bem feito conserta o fato de medir a coisa errada.
 *
 * O que fica é uma frase: qual instrumento produziu a leitura. Texto em tokens
 * de texto, nunca na cor da série — a cor aqui só aparece na ressalva.
 */
.friccao-evidencia {
    font-size: 12px;
    letter-spacing: 0.01em;
    color: var(--tinta-fraca);
}

/*
 * Fricção sem julgamento de IA. §5: o stub é degradação, não equivalência — e
 * "confiança silenciosamente mais baixa não basta". Por isso a ressalva tem cor
 * de ressalva, enquanto a menção a concorrente (que também sai por regra, mas
 * para a qual a regra é o instrumento certo) fica no tom neutro acima.
 */
.friccao-evidencia-regra {
    color: var(--atencao-escuro);
    font-weight: 500;
}

/* ── Vazios ────────────────────────────────────────────────────────────── */

.vazio {
    padding: 44px 0;
    color: var(--tinta-fraca);
    text-align: center;
}

/* ── Primitivos compartilhados ────────────────────────────────────────── */

.pular-conteudo {
    position: fixed;
    z-index: 100;
    top: 12px;
    left: 12px;
    transform: translateY(-150%);
    padding: 10px 14px;
    border-radius: 6px;
    background: var(--superficie);
    color: var(--floresta-900);
    box-shadow: var(--sombra);
    font-weight: 700;
}

.pular-conteudo:focus {
    transform: translateY(0);
}

.assinatura {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--floresta-900);
    font-size: 18px;
    font-weight: 780;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
}

.assinatura img {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.assinatura-clara {
    color: #f7f5ed;
}

.assinatura-clara img {
    filter: brightness(0) invert(1);
}

/*
 * Opacidade subida de 0.62 pra 0.66 em 31/08/2026 (/impeccable critique):
 * herda color: var(--floresta-900) de .assinatura, e a 0.62 o contraste
 * contra --plano media 4.436:1 -- abaixo do piso AA de 4.5:1 pra texto de
 * 10px, mesmo padrão de falha já corrigido uma vez em --tinta-fraca
 * (oryx.css:10-14). A 0.66 mede 5.0:1, com folga.
 */
.assinatura .marca-mae {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    opacity: 0.66;
}

.sobretitulo {
    margin: 0 0 14px;
    color: var(--floresta-600);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.botao {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 2px;
    padding: 11px 19px;
    font: inherit;
    font-size: 14px;
    font-weight: 720;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.botao:active {
    background-color: var(--floresta-950);
}

.botao-secundario:active {
    background-color: rgba(16, 42, 34, 0.08);
}

.botao-compacto {
    min-height: 40px;
    padding: 8px 15px;
    font-size: 13px;
}

.botao-primario,
.botao-escuro {
    background: var(--floresta-900);
    color: var(--superficie);
}

.botao-primario:hover,
.botao-escuro:hover {
    background: var(--floresta-700);
}

.botao-secundario {
    border-color: rgba(16, 42, 34, 0.24);
    background: transparent;
    color: var(--floresta-900);
}

.botao-secundario:hover {
    border-color: var(--floresta-600);
    background: rgba(29, 107, 77, 0.05);
}

.botao-claro {
    background: var(--superficie);
    color: var(--floresta-900);
}

.botao-contorno-claro {
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--superficie);
}

.botao-largo {
    width: 100%;
}

.link-texto {
    color: var(--floresta-600);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Site público ─────────────────────────────────────────────────────── */

.site-publico {
    background: var(--marfim);
    color: var(--tinta);
}

.site-container {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
}

#produto,
#como-funciona,
#confiabilidade,
#planos {
    scroll-margin-top: 92px;
}

.site-header {
    position: sticky;
    z-index: 30;
    top: 0;
    border-bottom: 1px solid rgba(16, 42, 34, 0.10);
    background: rgba(243, 240, 232, 0.96);
    backdrop-filter: blur(12px);
}

.site-header-conteudo {
    min-height: 74px;
    display: flex;
    align-items: center;
    gap: 34px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: auto;
}

.site-nav a,
.link-entrar {
    position: relative;
    color: var(--tinta-2);
    font-size: 13px;
    font-weight: 620;
}

.site-nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 1px;
    background: var(--floresta-600);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 220ms ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current="location"]::after {
    transform: scaleX(1);
    transform-origin: left;
}

.site-nav a[aria-current="location"]::after {
    background: var(--cobre);
}

.site-nav a:hover,
.link-entrar:hover {
    color: var(--floresta-700);
}

.site-acoes {
    display: flex;
    align-items: center;
    gap: 18px;
}

.site-menu {
    position: relative;
    display: none;
    margin-left: auto;
}

.site-menu summary {
    list-style: none;
    padding: 9px 11px;
    color: var(--floresta-800);
    cursor: pointer;
    font-size: 12px;
    font-weight: 720;
}

.site-menu summary::-webkit-details-marker {
    display: none;
}

.site-menu summary::after {
    content: "+";
    display: inline-block;
    margin-left: 7px;
    transition: transform 180ms ease;
}

.site-menu[open] summary::after {
    transform: rotate(45deg);
}

.site-menu nav {
    position: absolute;
    z-index: 40;
    top: calc(100% + 12px);
    right: 0;
    width: 210px;
    display: grid;
    padding: 9px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--superficie);
    box-shadow: var(--sombra);
}

.site-menu nav a {
    padding: 10px 11px;
    border-radius: 6px;
    color: var(--tinta-2);
    font-size: 13px;
    font-weight: 650;
}

.site-menu nav a:hover {
    background: #edf1eb;
    color: var(--floresta-800);
}

.hero {
    overflow: hidden;
    padding: 92px 0 84px;
}

.hero-grade {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(480px, 1.08fr);
    gap: 76px;
    align-items: center;
}

/*
 * Serif de título/número — "Iowan Old Style" com Baskerville e Georgia de reserva.
 * Consolidado em 31/08/2026 (/impeccable typeset): 6 lugares no arquivo declaravam
 * só "Georgia, Times New Roman" pro mesmo papel (h1/h2/h3/números grandes), sem
 * critério — nenhum era site público vs. produto, nem uma hierarquia deliberada, só
 * deriva. Georgia já é universal (Windows/Mac/Linux), então quem não é Mac via
 * exatamente a mesma coisa nos dois stacks; só usuário de Mac ganhava um serif
 * diferente (e mais distintivo) dependendo de qual elemento acabou de ser escrito.
 * Consolidado no stack mais completo, que já era maioria (8 de 14 ocorrências —
 * corrigido em 31/08 numa revisão do Codex; a contagem original aqui e na
 * mensagem do commit 37f6cd7 dizia "9 de 14"/"5 lugares", errado por um).
 */
.hero-copy h1,
.site-publico .secao h2,
.cta-final h2 {
    font-family: "Iowan Old Style", Baskerville, Georgia, serif;
    font-weight: 500;
    letter-spacing: -0.045em;
}

.hero-copy h1 {
    max-width: 760px;
    margin: 0;
    color: var(--floresta-950);
    font-size: clamp(48px, 5.6vw, 78px);
    line-height: 0.98;
}

.hero-texto {
    max-width: 630px;
    margin: 28px 0 0;
    color: var(--tinta-2);
    font-size: 18px;
    line-height: 1.65;
}

.hero-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.hero-nota {
    margin: 14px 0 0;
    color: var(--tinta-fraca);
    font-size: 12px;
}

.hero-marca-mae {
    margin: 26px 0 0;
    color: var(--tinta-fraca);
    font-size: 13px;
    letter-spacing: 0.04em;
}

.hero-marca-mae strong {
    color: var(--tinta-2);
    font-weight: 650;
}

.produto-moldura {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background: var(--floresta-900);
    color: #f7f5ed;
    box-shadow: 0 34px 90px rgba(7, 23, 18, 0.26);
}

.produto-moldura::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: inherit;
}

.produto-moldura-topo,
.produto-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 19px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.produto-moldura-topo {
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.produto-sinal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.produto-sinal i,
.pulso {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7fc7a5;
}

.produto-demo {
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 999px;
}

.produto-resumo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, 0.10);
}

.produto-resumo > div {
    padding: 23px 22px;
    background: var(--floresta-900);
}

.produto-resumo span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.produto-resumo strong {
    font-family: "Iowan Old Style", Baskerville, Georgia, serif;
    font-size: 20px;
    font-weight: 500;
}

.produto-resumo-marca {
    border-left: 2px solid var(--cobre);
}

.produto-lista {
    padding: 10px 16px;
    background: var(--marfim-quente);
    color: var(--tinta);
}

.produto-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px auto;
    gap: 16px;
    align-items: center;
    padding: 15px 7px;
    border-bottom: 1px solid rgba(16, 42, 34, 0.10);
}

.produto-linha:last-child {
    border-bottom: 0;
}

.produto-linha-destaque {
    margin: 0 -7px;
    padding-inline: 14px;
    background: #ecefe8;
}

.produto-conta {
    display: grid;
    grid-template-columns: 34px 1fr;
    min-width: 0;
    column-gap: 10px;
}

.produto-conta > i {
    grid-row: span 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--borda);
    border-radius: 50%;
    background: var(--superficie);
    color: var(--floresta-600);
    font-style: normal;
    font-weight: 800;
}

.produto-conta b {
    align-self: end;
    font-size: 12px;
}

.produto-conta small {
    color: var(--tinta-fraca);
    font-size: 10px;
}

.mini-traco {
    position: relative;
    height: 25px;
    border-bottom: 1px solid var(--eixo);
}

.mini-traco i {
    position: absolute;
    inset: 7px 1px auto;
    height: 2px;
    background: var(--critico);
    transform: rotate(-7deg);
    transform-origin: center;
}

.mini-traco-estavel i {
    background: var(--tinta-fraca);
    transform: rotate(1deg);
}

.mini-traco-alta i {
    background: var(--bom);
    transform: rotate(6deg);
}

.produto-estado {
    padding: 5px 8px;
    border-radius: 999px;
    background: #f2dedb;
    color: var(--critico-escuro);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.produto-estado-neutro {
    background: #e7e8e1;
    color: #53615a;
}

.produto-estado-bom {
    background: #dcece3;
    color: #276448;
}

.produto-rodape {
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.produto-rodape span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.faixa-principios {
    border-block: 1px solid rgba(16, 42, 34, 0.12);
}

.principios-grade {
    min-height: 76px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}

.principios-grade span {
    padding: 0 22px;
    border-right: 1px solid rgba(16, 42, 34, 0.12);
    color: var(--tinta-2);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.principios-grade span:first-child {
    border-left: 1px solid rgba(16, 42, 34, 0.12);
}

.secao {
    padding: 112px 0;
}

.secao h2,
.cta-final h2 {
    margin: 0;
    color: var(--floresta-950);
    font-size: clamp(38px, 4.4vw, 60px);
    line-height: 1.02;
}

.problema-grade {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 92px;
}

.problema-copy {
    display: grid;
    gap: 26px;
    align-content: start;
    padding-top: 30px;
}

.problema-copy p {
    margin: 0;
    color: var(--tinta-2);
    font-size: 18px;
    line-height: 1.72;
}

.problema-copy strong {
    color: var(--floresta-800);
}

.secao-floresta {
    background: var(--floresta-900);
    color: rgba(255, 255, 255, 0.74);
}

.secao-floresta .sobretitulo {
    color: var(--salvia-clara);
}

.secao-floresta h2 {
    color: var(--superficie);
}

.secao-cabecalho {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
    gap: 70px;
    align-items: end;
    margin-bottom: 58px;
}

.secao-cabecalho > p {
    margin: 0 0 4px;
    color: var(--tinta-2);
    font-size: 15px;
    line-height: 1.65;
}

.secao-cabecalho-claro > p {
    color: rgba(255, 255, 255, 0.64);
}

/* Quatro passos desde 06/10/2026, não três. Os três anteriores terminavam em "priorizar a
   resposta" — ou seja, a home descrevia um produto que acaba onde o concorrente acaba. O
   quarto (conferir se a objeção voltou) é o diferencial decidido em 15/09, e ele não estava
   em lugar nenhum desta seção. */
.passos {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.passos li {
    position: relative;
    min-height: 260px;
    padding: 30px 34px 24px 0;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.passos li::before {
    content: "";
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--salvia-clara);
}

.passos li:last-child::before {
    background: var(--cobre);
}

.passos li + li {
    padding-left: 34px;
}

.passos li:last-child {
    border-right: 0;
}

.passos span,
.capacidade-indice {
    color: var(--salvia-clara);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: 0.1em;
}

.passos h3 {
    margin: 78px 0 12px;
    color: var(--superficie);
    font-family: "Iowan Old Style", Baskerville, Georgia, serif;
    font-size: 25px;
    font-weight: 500;
}

.passo-desfecho h3 {
    color: var(--salvia-clara);
}

.passos p {
    max-width: 28ch;
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
}

.capacidades {
    background: #faf8f2;
}

.capacidades-grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.capacidade {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: var(--superficie);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.capacidade-grande {
    grid-row: span 2;
    min-height: 536px;
    justify-content: space-between;
    background: #e5ebe4;
}

.capacidade-larga {
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
    gap: 34px;
}

.capacidade h3 {
    margin: auto 0 10px;
    color: var(--floresta-900);
    font-family: "Iowan Old Style", Baskerville, Georgia, serif;
    font-size: 30px;
    font-weight: 500;
}

.capacidade p {
    max-width: 44ch;
    margin: 0;
    color: var(--tinta-2);
    font-size: 14px;
    line-height: 1.65;
}

.capacidade-visual {
    margin-top: 60px;
}

.barras {
    display: grid;
    gap: 15px;
}

.barras i {
    width: var(--largura);
    height: 34px;
    display: block;
    border-left: 3px solid var(--cobre);
    background: rgba(16, 42, 34, 0.11);
}

.acao-exemplo {
    flex: none;
    padding: 13px 15px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    color: var(--floresta-800);
    font-size: 12px;
    font-weight: 700;
}

.acao-exemplo b {
    margin-left: 16px;
}

.publico-alvo {
    padding-top: 70px;
}

.publico-grade {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 100px;
}

.publico-intro > p:last-child {
    max-width: 45ch;
    margin-top: 24px;
    color: var(--tinta-2);
    line-height: 1.65;
}

.publico-lista {
    border-top: 1px solid var(--borda);
}

.publico-lista article {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 28px;
    padding: 28px 0;
    border-bottom: 1px solid var(--borda);
}

.publico-lista span {
    color: var(--floresta-900);
    font-weight: 760;
}

.publico-lista p {
    margin: 0;
    color: var(--tinta-2);
}

.confiabilidade {
    background: #dfe8df;
}

.confiabilidade-grade {
    display: grid;
    /* A coluna da demonstração ganhou peso quando ela deixou de ser uma lista estática
       (03/09/2026): a transcrição precisa de medida de leitura, não de uma faixa estreita. */
    grid-template-columns: 1.05fr 0.95fr;
    gap: 72px;
    align-items: center;
}

/* --- Demonstração de leitura (a cadeia 01-04 acontecendo, não descrita) ------------------
   Mostra o mecanismo real do produto: o trecho literal que a regra ancorou, o sinal
   identificado, a prioridade com confiança, e a ação vinda do catálogo. O conteúdo é
   ilustrativo e está rotulado como tal — mesma obrigação de honestidade do selo de modo de
   análise (CLAUDE.md §5). As duas ações citadas são títulos reais do catálogo global.        */
.leitura-demo {
    padding: 28px;
    border: 1px solid rgba(16, 42, 34, 0.14);
    border-radius: 14px;
    background: rgba(255, 253, 248, 0.72);
}

.leitura-demo-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.leitura-demo-rotulo {
    margin: 0;
    color: var(--floresta-700);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.leitura-demo-selo {
    padding: 4px 10px;
    border: 1px dashed rgba(16, 42, 34, 0.3);
    border-radius: 999px;
    color: var(--tinta-fraca);
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.leitura-demo-transcricao {
    margin: 0;
    padding: 0 0 0 16px;
    border-left: 2px solid rgba(16, 42, 34, 0.16);
}

.leitura-demo-transcricao p {
    margin: 0 0 12px;
    color: var(--tinta);
    font-size: 15.5px;
    line-height: 1.72;
}

.leitura-demo-transcricao p:last-child {
    margin-bottom: 0;
}

.leitura-demo-locutor {
    display: inline-block;
    margin-right: 7px;
    color: var(--tinta-fraca);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* O trecho destacado é um <button> de propósito: precisa ser alcançável por teclado e
   anunciado como controle, não como texto decorado. */
.leitura-marca {
    padding: 1px 3px;
    border: 0;
    border-bottom: 2px solid var(--cobre);
    border-radius: 3px;
    background: rgba(185, 120, 75, 0.13);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--tempo-ui) var(--ease-ui),
                border-color var(--tempo-ui) var(--ease-ui);
}

.leitura-marca:hover {
    background: rgba(185, 120, 75, 0.22);
}

.leitura-marca[aria-pressed="true"] {
    background: rgba(29, 107, 77, 0.16);
    border-bottom-color: var(--floresta-600);
}

.leitura-marca:focus-visible {
    outline: 2px solid var(--floresta-600);
    outline-offset: 2px;
}

.leitura-demo-ajuda {
    margin: 16px 0 20px;
    color: var(--tinta-fraca);
    font-size: 13px;
}

.leitura-demo-ajuda kbd {
    padding: 1px 5px;
    border: 1px solid var(--borda);
    border-radius: 4px;
    background: var(--superficie);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
}

.leitura-demo-saida {
    padding-top: 18px;
    border-top: 1px solid rgba(16, 42, 34, 0.12);
}

.leitura-cadeia {
    list-style: none;
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
}

.leitura-cadeia li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 3px 12px;
    align-items: baseline;
}

.leitura-cadeia-n {
    grid-row: span 3;
    color: var(--floresta-600);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.leitura-cadeia strong {
    color: var(--floresta-950);
    font-size: 13.5px;
    font-weight: 680;
}

.leitura-cadeia small {
    color: var(--tinta-2);
    font-size: 13px;
    line-height: 1.55;
}

.leitura-acao {
    font-weight: 620;
    color: var(--floresta-800) !important;
}

.leitura-origem {
    color: var(--tinta-fraca);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Nível de evidência no lugar do medidor de confiança — mesma razão do .produto-evidencia:
   a decisão de 15/09 tira o percentual da tela porque ele não é probabilidade calibrada.
   Estes dois cartões exibiam 88% e 95% escritos à mão no HTML. */
.leitura-evidencia {
    display: block;
    margin-top: 5px;
    color: var(--tinta-fraca);
    font-size: 12px;
    letter-spacing: 0.01em;
}

/* Troca de cartão: cross-fade curto, e nenhum movimento para quem pediu menos movimento. */
.leitura-cartao {
    animation: leitura-entra var(--tempo-resposta) var(--ease-ui) both;
}

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

@media (prefers-reduced-motion: reduce) {
    .leitura-cartao { animation: none; }
    .leitura-marca { transition: none; }
}

@media (max-width: 900px) {
    .leitura-demo { padding: 22px; }
    .leitura-demo-topo { flex-wrap: wrap; }
}

.confiabilidade-selo {
    min-height: 390px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(16, 42, 34, 0.14);
    background: rgba(255, 253, 248, 0.48);
}

.confiabilidade-selo img {
    width: min(230px, 62%);
    height: auto;
}

.confiabilidade-grade > div:last-child > p:not(.sobretitulo) {
    max-width: 62ch;
    margin: 28px 0;
    color: var(--tinta-2);
    font-size: 16px;
    line-height: 1.7;
}

.lista-verificada {
    list-style: none;
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
}

.lista-verificada li {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--floresta-900);
    font-weight: 650;
}

.lista-verificada li::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--floresta-600);
}

.planos {
    background: #faf8f2;
}

.planos-grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: stretch;
}

.plano {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: var(--superficie);
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

@media (hover: hover) {
    .capacidade:hover {
        border-color: rgba(29, 107, 77, 0.34);
        box-shadow: 0 16px 44px rgba(16, 42, 34, 0.07);
    }

    /* O card sob o mouse assume o destaque: sobe e ganha borda/sombra fortes,
       para a ênfase seguir o cursor em vez de ficar cravada no "Recomendado". */
    .plano:hover {
        border-color: var(--floresta-700);
        box-shadow: 0 24px 60px rgba(16, 42, 34, 0.14);
        transform: translateY(-6px);
    }

    /* Ao focar um card, os irmãos recuam um pouco para o hover ressaltar. */
    .planos-grade:hover .plano:not(:hover) {
        opacity: 0.72;
    }

    .planos-grade .plano {
        transition: border-color 200ms ease, box-shadow 200ms ease,
                    transform 200ms ease, opacity 200ms ease;
    }
}

.plano-destaque {
    border-color: var(--floresta-700);
    box-shadow: 0 18px 50px rgba(16, 42, 34, 0.10);
}

.plano-recomendado {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #dcebe2;
    color: var(--floresta-700);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.plano-tipo {
    margin: 0 0 40px;
    color: var(--floresta-600);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.plano h3 {
    margin: 0 0 12px;
    color: var(--floresta-900);
    font-family: "Iowan Old Style", Baskerville, Georgia, serif;
    font-size: 30px;
    font-weight: 500;
}

.plano-descricao {
    min-height: 68px;
    margin: 0;
    color: var(--tinta-2);
    font-size: 14px;
    line-height: 1.6;
}

.plano ul {
    list-style: none;
    display: grid;
    gap: 12px;
    margin: 28px 0 34px;
    padding: 23px 0 0;
    border-top: 1px solid var(--borda);
    color: var(--tinta-2);
    font-size: 13px;
}

.plano li::before {
    content: "✓";
    margin-right: 9px;
    color: var(--floresta-600);
    font-weight: 800;
}

.plano .botao {
    width: 100%;
    margin-top: auto;
}

.faq-grade {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: 90px;
}

.faq-lista {
    border-top: 1px solid var(--borda);
}

.faq-lista details {
    border-bottom: 1px solid var(--borda);
    padding: 22px 0;
}

.faq-lista summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    list-style: none;
    cursor: pointer;
    color: var(--floresta-900);
    font-size: 16px;
    font-weight: 700;
}

.faq-lista summary::-webkit-details-marker {
    display: none;
}

.faq-lista summary::after {
    content: "+";
    flex: none;
    color: var(--floresta-600);
    font-size: 22px;
    font-weight: 400;
    transition: transform 180ms ease;
}

.faq-lista details[open] summary::after {
    transform: rotate(45deg);
}

.faq-lista p {
    max-width: 64ch;
    margin: 14px 0 0;
    color: var(--tinta-2);
    line-height: 1.7;
}

.cta-final {
    padding: 72px 0;
    background: var(--floresta-900);
}

.cta-final-conteudo {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 48px;
}

.cta-final .sobretitulo {
    color: var(--salvia-clara);
}

.cta-final h2 {
    color: var(--superficie);
}

.cta-final-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ── Assinatura Oryx: trajetória, evidência e resolução ──────────────── */

.hero-abertura {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr);
    gap: 22px 76px;
    align-items: end;
}

.hero-abertura > .sobretitulo {
    grid-column: 1 / -1;
}

.hero-abertura h1 {
    max-width: 970px;
    margin: 0;
    color: var(--floresta-950);
    font-family: "Iowan Old Style", Baskerville, Georgia, serif;
    font-size: clamp(58px, 7.4vw, 102px);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 0.92;
}

.hero-apoio {
    padding-bottom: 6px;
}

.hero-apoio .hero-texto {
    margin-top: 0;
    font-size: 16px;
    line-height: 1.7;
}

.hero-apoio .hero-acoes {
    margin-top: 27px;
}

.produto-narrativa {
    position: relative;
    overflow: hidden;
    margin-top: 72px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    background: var(--floresta-950);
    color: var(--superficie);
    box-shadow: 0 24px 64px rgba(7, 23, 18, 0.20);
}

.produto-narrativa::before,
.produto-narrativa::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: -6%;
    width: 48%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(168, 185, 170, 0.42), transparent);
    transform: rotate(-13deg);
    transform-origin: right;
}

.produto-narrativa::before { top: 34%; }
.produto-narrativa::after { top: 42%; right: -8%; }

.produto-narrativa-topo,
.produto-narrativa-rodape {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.produto-narrativa-topo {
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.produto-investigacao {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.72fr);
    min-height: 430px;
}

/* A linha do tempo da objeção, no lugar do gráfico de NPS que estava aqui até 06/10/2026.
   O gráfico mostrava NPS 8 -> 7 -> 5 como leitura da conta, exatamente o que a decisão de
   15/09 tirou do produto: NOTA_NPS vem com DT_ULTIMA_PESQUISA no schema da TOTVS, é pesquisa
   de relacionamento, não nota da reunião. A home continuava vendendo isso na primeira dobra. */
.produto-ciclo {
    position: relative;
    margin: 0;
    padding: 30px 34px 27px;
    list-style: none;
    background: var(--marfim-quente);
    color: var(--tinta);
    display: grid;
    align-content: center;
    gap: 22px;
}

.produto-ciclo li {
    position: relative;
    padding-left: 26px;
}

/* O fio que liga os três momentos é o que diz "isto é a mesma objeção". Ele não desce depois
   do último ponto de propósito: ali a objeção não terminou, ela voltou. */
.produto-ciclo li::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 16px;
    bottom: -22px;
    width: 1px;
    background: var(--eixo);
}

.produto-ciclo li:last-child::before {
    display: none;
}

.produto-ciclo li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--salvia);
    background: var(--superficie);
}

.produto-ciclo li:last-child::after {
    border-color: var(--cobre);
    background: var(--cobre);
}

.produto-ciclo-quando {
    display: block;
    color: var(--tinta-fraca);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.produto-ciclo-estado {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--borda);
    font-size: 11px;
    font-weight: 640;
}

/* Estado é rótulo escrito, nunca só cor — quem não distingue as cores e a impressão em preto
   e branco leem a mesma coisa. A cor só reforça o que a palavra já diz. */
.produto-ciclo-estado[data-estado="aberta"] {
    color: var(--floresta-700);
    background: var(--serie-lavagem);
    border-color: transparent;
}

.produto-ciclo-estado[data-estado="acao"] {
    color: var(--tinta-2);
    background: transparent;
    border-color: var(--eixo);
}

.produto-ciclo-estado[data-estado="reincidente"] {
    color: #7a4a26;
    background: rgba(185, 120, 75, 0.16);
    border-color: transparent;
}

.produto-ciclo-fala,
.produto-ciclo-acao {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

.produto-ciclo-fala {
    color: var(--tinta-2);
    font-style: italic;
}

.produto-ciclo-acao {
    color: var(--tinta);
    font-weight: 600;
}

.produto-ciclo-acao small {
    display: block;
    margin-top: 3px;
    color: var(--tinta-fraca);
    font-size: 11px;
    font-weight: 520;
    font-style: normal;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.produto-leitura {
    display: flex;
    flex-direction: column;
    padding: 40px 34px 34px;
    border-left: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(18, 55, 42, 0.86);
}

.produto-leitura-rotulo {
    width: fit-content;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--cobre);
    color: #b7cbbb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.produto-leitura h2 {
    margin: 25px 0 22px;
    color: var(--superficie);
    font-family: "Iowan Old Style", Baskerville, Georgia, serif;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.04;
}

.produto-leitura-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.produto-narrativa-nota {
    max-width: 62ch;
    margin: 18px auto 0;
    color: var(--tinta-2);
    font-size: 14.5px;
    line-height: 1.55;
    text-align: center;
}

.produto-leitura-tipo {
    color: #91c4aa;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/*
 * Nível de evidência, não percentual de confiança — a home exibia "90% de confiança", um
 * número inventado com cara de probabilidade calibrada. A decisão de 15/09/2026 é explícita:
 * "o percentual de confiança sai da tela e vira nível de evidência (trecho literal verificado
 * · julgado pela IA · só regra), porque exibir um número não calibrado como se fosse
 * probabilidade é exatamente o tipo de excesso que a banca chamou de viés". A home seguiu
 * exibindo até 06/10. O mesmo ainda falta em cliente.html, onde o número é real mas continua
 * sendo um percentual.
 */
.produto-evidencia {
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    letter-spacing: 0.01em;
}


/*
 * Mesma convenção de citação de .trecho (blockquote real, borda de 3px como
 * marca de série — ver oryx.css:718): aqui é a fala literal do exemplo
 * ilustrativo, não parafraseada, com peso tipográfico maior que o resto do
 * card por ser a evidência. Retintada pro painel escuro do hero.
 */
.produto-trecho {
    margin: 0 0 16px;
    padding: 4px 0 4px 16px;
    border-left: 3px solid #91c4aa;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    line-height: 1.6;
}

.produto-trecho-fonte {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.produto-proxima-acao {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 18px;
    margin-top: auto;
    padding: 17px 44px 17px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.produto-proxima-acao span {
    grid-column: 1 / -1;
    color: #c68a61;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.produto-proxima-acao strong {
    color: var(--superficie);
    font-size: 13px;
    font-weight: 650;
}

.produto-proxima-acao b {
    position: absolute;
    right: 3px;
    bottom: 17px;
    color: #c68a61;
    font-size: 20px;
}

.produto-narrativa-rodape {
    justify-content: flex-end;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.produto-narrativa-rodape i {
    width: 22px;
    height: 1px;
    background: rgba(255, 255, 255, 0.22);
}

.produto-narrativa-rodape strong {
    color: #d69b72;
}

.manifesto {
    border-block: 1px solid rgba(16, 42, 34, 0.12);
}

.manifesto-conteudo {
    min-height: 128px;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 54px;
    align-items: center;
}

.manifesto-conteudo svg {
    width: 100%;
    height: 72px;
}

.manifesto-conteudo path {
    fill: none;
    stroke: var(--floresta-600);
    stroke-width: 1.4;
}

.manifesto-conteudo path:last-child {
    stroke: var(--cobre);
    stroke-width: 1;
}

.manifesto p {
    max-width: 890px;
    margin: 0;
    color: var(--floresta-950);
    font-family: "Iowan Old Style", Baskerville, Georgia, serif;
    font-size: clamp(24px, 3vw, 39px);
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.manifesto em {
    color: var(--floresta-600);
    font-style: normal;
}

.decisao-grade {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(260px, 0.58fr);
    gap: 18px;
}

.decisao-mapa {
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
}

.decisao-mapa header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--borda);
}

.decisao-mapa header span {
    color: var(--floresta-900);
    font-weight: 760;
}

.decisao-mapa header small {
    color: var(--tinta-fraca);
}

.decisao-mapa ol {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 0;
}

.decisao-mapa li {
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 20px;
    border-right: 1px solid var(--borda);
}

.decisao-mapa li:last-child { border-right: 0; }

.decisao-mapa li > span {
    color: var(--floresta-600);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.decisao-mapa li small,
.decisao-mapa li strong {
    display: block;
}

.decisao-mapa li small {
    margin-bottom: 8px;
    color: var(--tinta-fraca);
    font-size: 9px;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.decisao-mapa li strong {
    color: var(--floresta-900);
    font-family: "Iowan Old Style", Baskerville, Georgia, serif;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.12;
}

.decisao-mapa .decisao-ponto {
    box-shadow: inset 0 3px var(--cobre);
    background: #f7f1e8;
}

.decisao-mapa .decisao-resposta {
    background: var(--floresta-900);
}

.decisao-mapa .decisao-resposta > span { color: #d69b72; }
.decisao-mapa .decisao-resposta small { color: #92b8a4; }
.decisao-mapa .decisao-resposta strong { color: var(--superficie); }

.decisao-notas {
    display: grid;
    border-top: 1px solid var(--borda);
}

.decisao-notas article {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 18px;
    align-items: start;
    padding: 24px 4px;
    border-bottom: 1px solid var(--borda);
}

.decisao-notas span {
    color: var(--floresta-600);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.decisao-notas p {
    margin: 0;
    color: var(--tinta-2);
    line-height: 1.65;
}

.confiabilidade-mapa {
    padding: 28px;
    border: 1px solid rgba(16, 42, 34, 0.14);
    background: rgba(255, 253, 248, 0.48);
}

.confiabilidade-mapa ol {
    position: relative;
    list-style: none;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
}

.confiabilidade-mapa ol::before {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 19px;
    width: 1px;
    background: var(--floresta-600);
    transform-origin: top;
}

.confiabilidade-mapa li {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 16px;
    padding: 17px 0;
}

.confiabilidade-mapa li > span {
    z-index: 1;
    width: 40px;
    height: 40px;
    display: grid;
    grid-row: span 2;
    place-items: center;
    border: 1px solid rgba(16, 42, 34, 0.16);
    border-radius: 50%;
    background: #e4ebe3;
    color: var(--floresta-700);
    font-size: 9px;
    font-weight: 800;
}

.confiabilidade-mapa li:last-child > span {
    border-color: var(--cobre);
    background: #f3e8dc;
    color: #8a512f;
}

.confiabilidade-mapa strong {
    align-self: end;
    color: var(--floresta-900);
    font-size: 13px;
}

.confiabilidade-mapa small {
    color: var(--tinta-fraca);
    font-size: 11px;
}

.site-footer {
    padding: 42px 0;
    background: var(--floresta-950);
    color: rgba(255, 255, 255, 0.62);
}

.footer-grade {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 26px 54px;
    align-items: center;
}

.footer-grade p,
.footer-grade small {
    margin: 0;
}

.footer-grade nav {
    display: flex;
    gap: 24px;
    font-size: 12px;
}

.footer-grade nav a:hover {
    color: var(--superficie);
}

.footer-grade small {
    grid-column: 1 / -1;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
    font-size: 10px;
    letter-spacing: 0.04em;
}

/* ── Conta, entrada e demonstração ────────────────────────────────────── */

.pagina-auth {
    min-height: 100vh;
    background: #f7f5ee;
}

.auth-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(360px, 0.82fr) minmax(520px, 1.18fr);
}

.auth-marca {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px clamp(38px, 6vw, 92px);
    background: var(--floresta-900);
    color: rgba(255, 255, 255, 0.70);
}

.auth-marca > div {
    max-width: 540px;
}

.auth-marca .sobretitulo {
    color: var(--salvia-clara);
}

.auth-marca h1 {
    margin: 0;
    color: var(--superficie);
    font-family: "Iowan Old Style", Baskerville, Georgia, serif;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.auth-marca > div > p:not(.sobretitulo) {
    max-width: 48ch;
    margin: 24px 0 0;
    font-size: 15px;
    line-height: 1.7;
}

.auth-marca small {
    font-size: 10px;
    letter-spacing: 0.04em;
}

.auth-beneficios {
    list-style: none;
    display: grid;
    gap: 13px;
    margin: 28px 0 0;
    padding: 0;
}

.auth-beneficios li::before {
    content: "";
    width: 7px;
    height: 7px;
    display: inline-block;
    margin-right: 11px;
    border-radius: 50%;
    background: var(--salvia-clara);
}

.auth-conteudo {
    display: grid;
    place-items: center;
    padding: 48px;
}

.auth-card {
    width: min(100%, 470px);
}

.auth-card-largo {
    width: min(100%, 620px);
}

.auth-voltar {
    display: inline-block;
    margin-bottom: 54px;
    color: var(--tinta-fraca);
    font-size: 12px;
    font-weight: 650;
}

.auth-card h2 {
    margin: 0;
    color: var(--floresta-950);
    font-family: "Iowan Old Style", Baskerville, Georgia, serif;
    font-size: 42px;
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.auth-apoio {
    margin: 13px 0 28px;
    color: var(--tinta-2);
    font-size: 14px;
}

.auth-form {
    display: grid;
    gap: 9px;
}

.auth-form-duplo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.auth-form-duplo > div {
    display: grid;
    gap: 7px;
}

.campo-inteiro {
    grid-column: 1 / -1;
}

.auth-form label,
.campo-linha {
    color: var(--floresta-900);
    font-size: 12px;
    font-weight: 720;
}

.campo-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 10px;
}

.campo-linha a {
    color: var(--floresta-600);
    font-size: 11px;
}

.equipe-form .campo-linha {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.equipe-form .campo-inteiro {
    display: grid;
    grid-column: auto;
    gap: 7px;
    min-width: 0;
}

.equipe-lista li {
    min-width: 0;
    flex-wrap: wrap;
}

.equipe-lista li > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
    width: 100%;
    border: 1px solid rgba(16, 42, 34, 0.19);
    border-radius: 8px;
    background: var(--superficie);
    color: var(--tinta);
    font: inherit;
    font-size: 14px;
}

.campo-senha {
    position: relative;
}

.campo-senha input {
    padding-right: 64px;
}

.alternar-senha {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0 14px;
    border: none;
    background: none;
    color: var(--floresta-600);
    font-size: 11px;
    font-weight: 720;
    cursor: pointer;
}

.alternar-senha:hover {
    color: var(--floresta-700);
}

.auth-form input,
.auth-form select {
    min-height: 50px;
    padding: 0 14px;
}

.auth-form textarea {
    resize: vertical;
    padding: 13px 14px;
}

.auth-form input::placeholder,
.auth-form textarea::placeholder {
    color: #89938d;
}

.auth-form .botao {
    margin-top: 14px;
}

.campo-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    color: var(--tinta-2) !important;
    font-weight: 500 !important;
    line-height: 1.5;
}

.campo-check input {
    width: 16px;
    min-height: 16px;
    margin: 3px 0 0;
}

.form-status {
    margin: 8px 0 0;
    padding: 11px 13px;
    border-left: 3px solid var(--floresta-600);
    background: #e2eee7;
    color: var(--floresta-800);
    font-size: 12px;
    line-height: 1.5;
}

.form-erro {
    border-left-color: var(--critico-escuro);
    background: #f2dedb;
    color: var(--critico-escuro);
}

.auth-divisor {
    position: relative;
    margin: 27px 0;
    border-top: 1px solid var(--borda);
    text-align: center;
}

.auth-divisor span {
    position: relative;
    top: -11px;
    padding: 0 12px;
    background: #f7f5ee;
    color: var(--tinta-fraca);
    font-size: 11px;
}

.auth-rodape {
    margin: 25px 0 0;
    color: var(--tinta-2);
    font-size: 13px;
    text-align: center;
}

.auth-rodape a {
    color: var(--floresta-600);
    font-weight: 760;
}

/* ── Produto logado ───────────────────────────────────────────────────── */

.produto-app {
    min-width: 320px;
    background: #edf0eb;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
}

.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 24px 16px 18px;
    background: var(--floresta-950);
    color: rgba(255, 255, 255, 0.68);
}

.app-assinatura {
    margin: 0 10px 44px;
}

.app-assinatura img {
    width: 34px;
    height: 34px;
}

.app-nav {
    display: grid;
    gap: 5px;
}

.app-nav a {
    min-height: 43px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    font-weight: 650;
}

.app-nav a:hover,
.app-nav a.ativo {
    background: rgba(255, 255, 255, 0.09);
    color: var(--superficie);
}

.app-nav svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.app-sidebar-base {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 15px 10px 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.avatar {
    width: 32px;
    height: 32px;
    display: grid;
    flex: none;
    place-items: center;
    border-radius: 50%;
    background: #dcebe2;
    color: var(--floresta-900);
    font-size: 10px;
    font-weight: 800;
}

.app-sidebar-base > span {
    flex: 1;
    min-width: 0;
}

.app-sidebar-base b,
.app-sidebar-base small {
    display: block;
}

.app-sidebar-base b {
    overflow: hidden;
    color: var(--superficie);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-sidebar-base small {
    margin-top: 2px;
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-sair {
    flex: none;
}

.app-sair button {
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    background: none;
    color: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    font-weight: 720;
    cursor: pointer;
}

/*
 * Achado da mesma auditoria de 31/08 que motivou o bloco ≤900px acima, mas por
 * capacidade de entrada, não largura: um iPad em paisagem (1024-1194px conforme o
 * modelo) é mais largo que qualquer um dos breakpoints deste arquivo, então nunca
 * entra no modo linha — mas continua sem mouse. Medido nessa faixa: o layout em si
 * fica correto (cai no fallback de flexbox, sem overflow), só o botão Sair mede
 * 37×21px, abaixo do alvo de toque. `hover: none` pega exatamente essa combinação —
 * sem mouse, qualquer largura — sem mexer no botão pequeno e intencional que quem
 * usa mouse continua vendo.
 */
@media (hover: none) {
    .app-sair button {
        min-width: 44px;
        min-height: 44px;
        padding-inline: 10px;
    }
}

.app-sair button:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--superficie);
}

.app-area {
    min-width: 0;
}

.app-topbar {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 32px;
    border-bottom: 1px solid var(--borda);
    background: rgba(255, 253, 248, 0.82);
    color: var(--tinta-fraca);
    font-size: 11px;
}

.app-topbar div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.app-topbar strong {
    color: var(--floresta-900);
}

.app-topbar > a {
    color: var(--floresta-600);
    font-weight: 700;
}

.app-main {
    width: min(100%, 1380px);
    margin: 0 auto;
    padding: 42px clamp(20px, 3.4vw, 52px) 72px;
}

.app-main-detalhe {
    width: min(100%, 1200px);
}

.app-titulo {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 30px;
}

.app-titulo .sobretitulo {
    margin-bottom: 8px;
}

.app-titulo h1 {
    margin: 0 0 7px;
    color: var(--floresta-950);
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 660;
    letter-spacing: -0.035em;
    line-height: 1.1;
}

/* A definição do termo que a tela mede, ao lado do título. Não é legenda de rodapé: quando a
   palavra-chave da tela ("voltou") só aparece explicada dentro de um <details> fechado, quem
   abre a página pela primeira vez lê o número sem saber do que ele é — foi o que aconteceu em
   05/10/2026. Largura limitada porque é prosa, não rótulo. */
.app-titulo-definicao {
    margin: 0;
    max-width: 62ch;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--tinta-2);
}

.app-titulo-definicao strong {
    color: var(--tinta);
    font-weight: 620;
}

.app-titulo-definicao em {
    font-style: normal;
    font-weight: 620;
    color: var(--tinta);
}

.app-atualizacao {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.66);
    color: var(--tinta-fraca);
    font-size: 10px;
    font-weight: 650;
}

.app-atualizacao i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bom);
}

.carteira-painel {
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--superficie);
}

.carteira-painel-cabecalho {
    min-height: 85px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--borda);
}

.carteira-ferramentas {
    display: flex;
    flex: none;
    align-items: center;
    gap: 15px;
}

.busca-contas {
    min-width: 210px;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--superficie);
}

.busca-contas:focus-within {
    border-color: var(--floresta-600);
    box-shadow: 0 0 0 3px rgba(29, 107, 77, 0.12);
}

.busca-contas svg {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: var(--tinta-fraca);
    stroke-linecap: round;
    stroke-width: 1.7;
}

.busca-contas input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--tinta);
    font: inherit;
    font-size: 12px;
}

.busca-contas input::placeholder {
    color: var(--tinta-fraca);
}

.carteira-painel h2 {
    margin: 0 0 5px;
    color: var(--floresta-900);
    font-size: 14px;
    font-weight: 730;
    letter-spacing: 0;
    text-transform: none;
}

.carteira-painel-cabecalho p {
    margin: 0;
    color: var(--tinta-fraca);
    font-size: 11px;
}

.carteira-contagem {
    color: var(--tinta-fraca);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.carteira-painel .cabecalho-lista {
    margin: 0;
    padding: 12px 22px 10px;
    border-bottom: 1px solid var(--borda);
    background: #f7f5ef;
}

.carteira-painel .lista {
    border-top: 0;
}

.carteira-painel .linha {
    padding: 17px 22px;
}

.carteira-painel .linha:hover {
    background: #f1f4ef;
    box-shadow: inset 3px 0 var(--floresta-600);
}

.carteira-painel .linha:focus-visible {
    background: #f1f4ef;
    box-shadow: inset 3px 0 var(--floresta-600);
}

.vazio-busca {
    margin: 0;
    padding: 34px 22px;
    text-align: center;
}

.selo-degradado-resumo {
    border-color: #a78962;
    color: #725738;
    font-size: 10px;
}

.app-main .painel {
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(16, 42, 34, 0.04);
}

.app-main > h2 {
    margin-top: 44px;
    color: var(--floresta-800);
}

.app-main .volta {
    margin-bottom: 23px;
}

.app-titulo-cliente {
    align-items: center;
}

.estado-destaque {
    padding: 9px 12px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--floresta-900);
    font-size: 12px;
    font-weight: 720;
}

.friccao {
    box-shadow: 0 8px 26px rgba(16, 42, 34, 0.04);
}

.acao {
    background: #eef2ed;
}

/* ── Erro ─────────────────────────────────────────────────────────────── */

.pagina-erro {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--marfim);
}

.erro-envoltorio {
    width: min(720px, calc(100% - 40px));
    padding: 32px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: var(--superficie);
}

.erro-topo {
    margin-bottom: 70px;
}

.erro-envoltorio h1 {
    margin-bottom: 14px;
    color: var(--floresta-950);
    font-family: "Iowan Old Style", Baskerville, Georgia, serif;
    font-size: 42px;
    font-weight: 500;
}

.erro-envoltorio main .botao {
    margin-top: 28px;
}

/* ── Responsividade ───────────────────────────────────────────────────── */

@media (max-width: 1040px) {
    .site-nav {
        gap: 18px;
    }

    .hero-grade {
        grid-template-columns: 1fr;
        gap: 54px;
    }

    .hero-copy {
        max-width: 790px;
    }

    .produto-moldura {
        width: min(720px, 100%);
    }

    .publico-grade,
    .confiabilidade-grade {
        gap: 54px;
    }

    .auth-layout {
        grid-template-columns: minmax(310px, 0.72fr) minmax(460px, 1.28fr);
    }

    .app-shell {
        grid-template-columns: 200px minmax(0, 1fr);
    }
}

/*
 * Faixa própria pra sidebar/topbar do produto — não é a mesma faixa do restante do
 * ≤820px abaixo. Achado da auditoria de 30/08, corrigido em 31/08 (/impeccable adapt):
 * este Chrome headless reporta `hover:none` fielmente pra qualquer dispositivo sem
 * mouse (não é limitação do método — `oryx.css` só usa `@media (hover: hover)`, nunca
 * `pointer`), e medir com essa emulação em larguras reais de tablet mostrou 821-846px
 * quebrado de verdade: a barra .app-sidebar não estava nem no modo linha (que só
 * cobria ≤820px) nem no modo coluna de verdade (que exige `hover: hover`, e um
 * iPad Pro 11" em retrato — 834px — não tem). Resultado: overflow de até 26px e o
 * botão Sair a 37×21px, fora da viewport. 860px em diante já media limpo antes desta
 * correção (o modo coluna estreito de 200px, ver bloco ≤1040px acima, dava conta).
 * 900px fecha a faixa quebrada com folga e alinha com o único outro breakpoint de
 * largura que o arquivo já usa pro shell do produto (ver .linha /
 * .cabecalho-lista em @media (min-width: 900px), mais abaixo).
 */
@media (max-width: 900px) {
    .app-shell {
        display: block;
    }

    .app-sidebar {
        position: static;
        height: auto;
        min-height: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 18px;
        row-gap: 6px;
        padding: 11px 18px;
    }

    .app-assinatura {
        margin: 0;
    }

    .app-nav {
        display: flex;
        margin-left: auto;
    }

    .app-nav a {
        min-height: 38px;
    }

    /*
     * `a:last-child` escondia o último item da navegação — achado pela revisão do
     * Opus após o commit 8d2fd10: em telas com só 1 link (seguranca-confirmar-totp,
     * seguranca-codigos-recuperacao), esse link também é o :last-child, então o
     * <nav> inteiro sumia — o oposto do que o commit pretendia corrigir. Removido.
     */
    .app-topbar {
        display: none;
    }

    /*
     * Achado E do Opus: escondendo .app-sidebar-base inteiro, não existia jeito
     * de deslogar pelo celular. `display: contents` faz a caixa de
     * .app-sidebar-base desaparecer do layout sem levar os filhos junto — eles
     * passam a participar do flex row de .app-sidebar diretamente. Avatar e
     * nome/tenant continuam escondidos (mesma economia de espaço do resto do
     * header mobile); só o formulário de logout escapa, na mesma altura dos
     * ícones de navegação, com alvo de toque de 44px.
     */
    .app-sidebar-base {
        display: contents;
    }

    .app-sidebar-base .avatar,
    .app-sidebar-base > span {
        display: none;
    }

    /*
     * Verificado em Chrome headless (320px e 375px, carteira.html autenticada):
     * o formulário de logout, ao escapar de .app-sidebar-base pro flex row do
     * Achado E, virou só mais um item disputando espaço com logo + nav — a
     * 320px a soma passava de 400px de largura mínima, e sem flex-wrap o botão
     * "Sair" saía cortado da viewport (mesmo problema do Achado E, disfarçado:
     * antes era display:none, agora era overflow sem scroll nem indício
     * visual). flex-wrap no container (acima) + flex-basis:100% aqui força o
     * botão SEMPRE pra própria linha própria — não só quando não cabe, é
     * incondicional — em vez de disputar por espaço ou ficar invisível fora
     * da tela. Troca uma faixa vazia em telas largas (721-800px, onde ele
     * caberia na mesma linha) por nunca depender de quanto espaço sobra;
     * achado e revisto pela auditoria de 30/08, decisão mantida.
     */
    .app-sair {
        display: flex;
        flex-basis: 100%;
        justify-content: flex-end;
    }

    .app-sair button {
        min-width: 44px;
        min-height: 44px;
        padding-inline: 10px;
    }

    .app-main {
        padding-top: 32px;
    }
}

@media (max-width: 820px) {
    .site-header-conteudo {
        min-height: 68px;
    }

    .site-nav {
        display: none;
    }

    .site-menu {
        display: block;
    }

    .site-menu summary,
    .site-menu nav a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .site-acoes {
        margin-left: 0;
    }

    .hero {
        padding-top: 70px;
    }

    .principios-grade {
        grid-template-columns: repeat(2, 1fr);
    }

    .principios-grade span {
        min-height: 58px;
        display: grid;
        place-items: center;
        border-bottom: 1px solid var(--borda);
    }

    .problema-grade,
    .secao-cabecalho,
    .publico-grade,
    .confiabilidade-grade,
    .faq-grade {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .problema-copy {
        padding-top: 0;
    }

    .passos {
        grid-template-columns: 1fr;
    }

    .passos li,
    .passos li + li {
        min-height: auto;
        padding: 25px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .passos h3 {
        margin-top: 32px;
    }

    .capacidades-grade,
    .planos-grade {
        grid-template-columns: 1fr;
    }

    .capacidade-grande {
        grid-row: auto;
        min-height: 420px;
    }

    .confiabilidade-selo {
        min-height: 290px;
    }

    .cta-final-conteudo {
        align-items: start;
        flex-direction: column;
    }

    .footer-grade {
        grid-template-columns: 1fr auto;
    }

    .footer-grade p {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .auth-layout {
        grid-template-columns: 1fr;
    }

    .auth-marca {
        min-height: 430px;
        padding: 34px 30px;
    }

    .auth-conteudo {
        min-height: 650px;
    }
}

@media (max-width: 640px) {
    .site-container {
        width: min(calc(100% - 30px), 1180px);
    }

    .site-header .assinatura,
    .site-header .botao-compacto,
    .auth-marca .assinatura,
    .site-footer .assinatura,
    .erro-topo .assinatura {
        min-height: 44px;
    }

    .faq-lista summary {
        min-height: 44px;
    }

    .footer-grade nav a,
    .auth-voltar,
    .campo-linha a,
    .form-status a,
    .auth-rodape a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .site-header .assinatura span:not(.marca-mae),
    .link-entrar {
        display: none;
    }

    .site-header-conteudo {
        gap: 12px;
    }

    .site-acoes {
        gap: 8px;
    }

    .hero {
        padding: 56px 0 58px;
    }

    .hero-copy h1 {
        font-size: 46px;
    }

    .hero-texto {
        font-size: 16px;
    }

    .hero-acoes,
    .hero-acoes .botao,
    .cta-final-acoes,
    .cta-final-acoes .botao {
        width: 100%;
    }

    .produto-moldura-topo,
    .produto-rodape {
        align-items: flex-start;
        flex-direction: column;
    }

    .produto-resumo {
        grid-template-columns: 1fr;
    }

    .produto-resumo-marca {
        border-top: 1px solid rgba(255, 255, 255, 0.10);
        border-left: 0;
    }

    .produto-linha {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .mini-traco {
        display: none;
    }

    .principios-grade {
        grid-template-columns: 1fr;
    }

    .principios-grade span {
        border-right: 0;
        border-left: 0 !important;
    }

    .secao {
        padding: 80px 0;
    }

    .secao h2,
    .cta-final h2 {
        font-size: 39px;
    }

    .secao-cabecalho {
        margin-bottom: 38px;
    }

    .capacidade-larga {
        align-items: start;
        flex-direction: column;
    }

    .publico-lista article {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .plano {
        padding: 25px;
    }

    .cta-final {
        padding: 58px 0;
    }

    .footer-grade {
        grid-template-columns: 1fr;
    }

    .footer-grade nav {
        flex-wrap: wrap;
    }

    .auth-marca {
        min-height: 400px;
    }

    .auth-marca h1 {
        font-size: 40px;
    }

    .auth-conteudo {
        min-height: auto;
        padding: 46px 20px 70px;
    }

    .auth-voltar {
        margin-bottom: 38px;
    }

    .auth-card h2 {
        font-size: 36px;
    }

    .auth-form-duplo {
        grid-template-columns: 1fr;
    }

    .campo-inteiro {
        grid-column: auto;
    }

    .app-sidebar {
        justify-content: space-between;
    }

    .app-assinatura span {
        display: none;
    }

    .app-nav {
        margin-left: 0;
    }

    .app-main {
        padding-inline: 15px;
    }

    .app-titulo {
        align-items: start;
        flex-direction: column;
    }

    .app-atualizacao {
        align-self: start;
    }

    .carteira-painel-cabecalho {
        align-items: start;
        flex-direction: column;
    }

    .carteira-ferramentas {
        width: 100%;
        flex-wrap: wrap;
    }

    .busca-contas {
        min-width: min(100%, 220px);
        flex: 1;
    }

    .carteira-painel .linha {
        padding-inline: 15px;
    }

    .app-main .painel {
        padding: 18px 15px;
    }

    .erro-envoltorio {
        padding: 24px;
    }
}

/* ── Produto v2: shell compacto e carteira orientada à decisão ───────── */

.produto-app .app-shell {
    display: block;
}

.produto-app .app-sidebar {
    position: sticky;
    z-index: 40;
    top: 0;
    width: 100%;
    height: auto;
    min-height: 70px;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 11px clamp(20px, 3.4vw, 52px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.produto-app .app-assinatura {
    margin: 0 18px 0 0;
}

.produto-app .app-nav {
    display: flex;
    gap: 5px;
}

.produto-app .app-nav a {
    min-height: 40px;
    padding-inline: 13px;
}

.produto-app .app-sidebar-base {
    margin: 0 0 0 auto;
    padding: 0 0 0 20px;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.produto-app .app-topbar {
    min-height: 50px;
    padding-inline: clamp(20px, 3.4vw, 52px);
    background: rgba(255, 253, 248, 0.92);
}

.carteira-app .app-topbar {
    display: none;
}

.produto-app .app-main {
    width: min(100%, 1320px);
    padding-top: 46px;
}

.produto-app .app-main-detalhe {
    width: min(100%, 1200px);
}

.carteira-app .app-titulo {
    margin-bottom: 27px;
}

.panorama {
    margin: 0 0 20px;
    padding: 18px 22px 20px;
    border: 1px solid var(--borda);
    border-radius: 9px;
    background: rgba(255, 253, 248, 0.68);
}

.panorama-cabecalho {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.panorama h2 {
    margin: 0;
    color: var(--floresta-950);
    font-size: 16px;
    letter-spacing: -0.015em;
    text-transform: none;
}

.panorama-ajuda {
    color: var(--tinta-fraca);
    font-size: 10px;
}

.panorama-grade {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.panorama-rodape {
    margin: 12px 0 0;
    padding-top: 11px;
    border-top: 1px solid var(--borda);
    color: var(--tinta-fraca);
    font-size: 10px;
}

.panorama-estado {
    min-width: 0;
    padding: 13px 14px 12px;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--superficie);
}

.panorama-estado span,
.panorama-estado small {
    display: block;
    color: var(--tinta-fraca);
    font-size: 10px;
}

.panorama-estado span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 760;
}

.panorama-estado span i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--floresta-600);
}

.panorama-estado strong {
    display: block;
    margin: 13px 0 3px;
    color: var(--floresta-950);
    font-family: "Iowan Old Style", Baskerville, Georgia, serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
}

/*
 * O estado mais caro que a carteira de fato tem abre o painel. É o que sobrou do
 * cartão escuro que vivia em `.metricas-resumo` — o bloco inteiro saiu em 06/10 por
 * repetir os números deste painel, mas a ênfase adaptativa que ele carregava era boa e
 * continua: numa base recém-carregada ninguém registrou ação, então nada pode ter
 * voltado, e pintar esse zero de urgente seria inútil. Ver DashboardController.
 */
.panorama-em-destaque {
    border-color: transparent;
    background: var(--floresta-900);
}

.panorama-em-destaque span {
    color: #96baa7;
}

.panorama-em-destaque strong {
    color: var(--superficie);
}

.panorama-em-destaque small {
    color: rgba(255, 255, 255, 0.67);
}

/*
 * As cores de estado das fichas da lista. Mesmos tokens de `.estado.objecao-*`, que
 * governa o selo da tela da conta — um estado não pode ter duas cores conforme a tela.
 */
.objecao-ficha .ponto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}

.objecao-reincidente .ponto { background: var(--critico); }
.objecao-aberta .ponto { background: var(--cobre); }
.objecao-acao_registrada .ponto { background: var(--tinta-fraca); }

.objecao-ficha.objecao-reincidente b,
.objecao-ficha.objecao-reincidente {
    color: var(--critico-escuro);
}


.carteira-app .carteira-painel {
    overflow: clip;
    border-radius: 9px;
    box-shadow: 0 18px 44px rgba(16, 42, 34, 0.055);
}

.carteira-app .carteira-painel .linha {
    min-height: 76px;
}

.carteira-app .conta-id {
    color: var(--floresta-950);
    font-size: 13px;
    letter-spacing: 0.01em;
}

.carteira-app .conta-detalhe {
    margin-top: 4px;
    font-size: 11px;
}

.carteira-app .col-objecoes {
    align-items: center;
}

.carteira-app .carteira-painel-cabecalho {
    min-height: 104px;
    padding: 21px 24px 18px;
}

.carteira-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--floresta-600);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

/*
 * Rolagem horizontal fazia sentido com três entradas curtas; com uma frase só ela
 * virou truncagem silenciosa — a barra está escondida (`scrollbar-width: none`), então
 * em 390px o texto simplesmente terminava no meio de uma palavra, sem nada indicando
 * que havia mais. Agora quebra linha.
 */
.carteira-guia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    padding: 11px 24px;
    border-bottom: 1px solid var(--borda);
    background: #f8f6f0;
    color: var(--tinta-fraca);
    font-size: 10px;
    scrollbar-width: none;
}

.carteira-guia::-webkit-scrollbar {
    display: none;
}

.carteira-guia span {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    /* `nowrap` + `flex: none` existia para a rolagem horizontal; sem ela, impediria a
       frase de quebrar e devolveria o estouro que a mudança acima acabou de tirar. */
    min-width: 0;
}

.carteira-guia b {
    color: var(--floresta-900);
    font-weight: 780;
}

.carteira-guia i {
    display: inline-block;
    flex: none;
}

.guia-traco {
    width: 18px;
    height: 8px;
    border-top: 2px solid var(--floresta-600);
    border-radius: 50%;
    transform: rotate(-8deg);
}

.guia-sinal {
    width: 8px;
    height: 8px;
    border: 2px solid var(--cobre);
    border-radius: 50%;
}

.guia-prioridade {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--floresta-700);
}

.carteira-app .carteira-painel h2 {
    margin-bottom: 6px;
    color: var(--floresta-950);
    font-size: 19px;
    letter-spacing: -0.02em;
}

.carteira-ordem-note {
    display: block;
    margin-top: 10px;
    color: var(--tinta-fraca);
    font-size: 10px;
}

.carteira-ordem-note b {
    color: var(--cobre);
    font-weight: 800;
}

.carteira-filtros {
    display: flex;
    gap: 7px;
    align-items: center;
    overflow-x: auto;
    padding: 11px 24px;
    border-bottom: 1px solid var(--borda);
    background: #f8f6f0;
    scrollbar-width: none;
}

.carteira-filtros::-webkit-scrollbar {
    display: none;
}

.carteira-filtros button,
.vazio-busca button,
.carteira-progresso button {
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--tinta-2);
    cursor: pointer;
    font: inherit;
    font-size: 10px;
    font-weight: 720;
    white-space: nowrap;
    transition:
        border-color var(--tempo-ui) var(--ease-ui),
        background-color var(--tempo-ui) var(--ease-ui),
        color var(--tempo-ui) var(--ease-ui);
}

.carteira-filtros button:hover,
.carteira-filtros button:focus-visible,
.carteira-filtros button[aria-pressed="true"] {
    border-color: var(--floresta-700);
    background: var(--floresta-900);
    color: var(--superficie);
}

.carteira-filtros .filtro-limpar {
    margin-left: auto;
    border-color: transparent;
    background: transparent;
    color: var(--floresta-600);
}

.conta-rank {
    grid-area: rank;
    color: var(--tinta-fraca);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 760;
}

.linha-abrir {
    grid-area: abrir;
    color: var(--tinta-fraca);
    font-size: 16px;
    transform: translateX(0);
    transition: transform var(--tempo-ui) var(--ease-ui), color var(--tempo-ui) var(--ease-ui);
}

.carteira-app .lista > li:nth-child(-n + 5) .conta-rank {
    color: var(--cobre);
}

.carteira-app .lista > li:nth-child(-n + 5) .linha {
    background: rgba(243, 240, 232, 0.42);
}

.carteira-app .linha:hover .linha-abrir,
.carteira-app .linha:focus-visible .linha-abrir {
    color: var(--floresta-700);
    transform: translateX(3px);
}

.vazio-busca {
    display: grid;
    justify-items: center;
    gap: 5px;
}

.vazio-busca strong {
    color: var(--floresta-900);
    font-size: 14px;
}

.vazio-busca span {
    color: var(--tinta-fraca);
    font-size: 11px;
}

.vazio-busca button,
.carteira-progresso button {
    margin-top: 10px;
    border-color: var(--floresta-700);
    color: var(--floresta-700);
}

.carteira-progresso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 20px 24px;
    border-top: 1px solid var(--borda);
    color: var(--tinta-fraca);
    font-size: 11px;
}

.carteira-progresso button {
    margin: 0;
}

@media (min-width: 900px) {
    .carteira-app .carteira-painel .linha {
        grid-template-columns: 32px minmax(0, 26rem) minmax(0, 1fr) 13rem 28px;
        grid-template-areas: "rank conta objecoes satisfacao abrir";
        gap: 14px;
        padding: 14px 24px;
    }

    .carteira-app .carteira-painel .cabecalho-lista {
        position: sticky;
        z-index: 2;
        top: 70px;
        grid-template-columns: 32px minmax(0, 26rem) minmax(0, 1fr) 13rem 28px;
        gap: 14px;
        padding-inline: 24px;
    }

    .carteira-app .cabecalho-lista span:nth-child(1) { grid-column: 1 / 3; }
    .carteira-app .cabecalho-lista span:nth-child(2) { grid-column: 3; }
    .carteira-app .cabecalho-lista span:nth-child(3) { grid-column: 4; }
    .carteira-app .cabecalho-lista span:nth-child(4) { grid-column: 5; }
}

@media (min-width: 641px) and (max-width: 899px) {
    .carteira-app .carteira-painel .linha {
        grid-template-columns: 32px minmax(0, 1fr) 28px;
        grid-template-areas:
            "rank conta      abrir"
            ".    objecoes   ."
            ".    satisfacao .";
        gap: 10px 14px;
        padding: 15px 22px;
    }

    .carteira-app .carteira-painel .col-objecoes {
        padding-top: 9px;
        border-top: 1px solid var(--borda);
    }
}

@media (max-width: 1040px) {
    .hero-abertura {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .hero-abertura > .sobretitulo {
        grid-column: auto;
    }

    .hero-apoio {
        max-width: 670px;
    }

    .produto-investigacao {
        grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    }

    .decisao-grade {
        grid-template-columns: 1fr;
    }

    .decisao-notas {
        grid-template-columns: repeat(3, 1fr);
    }

    .decisao-notas article {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 20px;
        border-right: 1px solid var(--borda);
    }

    }

/* Mesma faixa própria da regra genérica acima — ver os comentários lá. */
@media (max-width: 900px) {
    .produto-app .app-sidebar {
        min-height: 64px;
        padding-block: 9px;
    }

    .produto-app .app-nav {
        margin-left: auto;
    }

    /* Mesma correção da regra genérica acima — ver os comentários lá. */
    .produto-app .app-topbar {
        display: none;
    }

    .produto-app .app-sidebar-base {
        display: contents;
    }

    .produto-app .app-sidebar-base .avatar,
    .produto-app .app-sidebar-base > span {
        display: none;
    }

    .produto-app .app-sair button {
        min-width: 44px;
        min-height: 44px;
        padding-inline: 10px;
    }
}

@media (max-width: 820px) {
    .produto-investigacao {
        grid-template-columns: 1fr;
    }

    .produto-leitura {
        min-height: 340px;
        border-top: 1px solid rgba(255, 255, 255, 0.11);
        border-left: 0;
    }

    .manifesto-conteudo {
        grid-template-columns: 150px 1fr;
        gap: 32px;
    }

    .decisao-mapa ol {
        grid-template-columns: repeat(2, 1fr);
    }

    .decisao-mapa li:nth-child(2) { border-right: 0; }
    .decisao-mapa li:nth-child(-n + 2) { border-bottom: 1px solid var(--borda); }

    .panorama-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .hero-abertura h1 {
        font-size: clamp(48px, 14.8vw, 66px);
        line-height: 0.95;
    }

    .produto-narrativa {
        margin-top: 50px;
        border-radius: 13px;
    }

    .produto-narrativa-topo,
    .produto-narrativa-rodape {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .produto-ciclo {
        padding: 24px 18px 20px;
        gap: 18px;
    }

    .produto-leitura {
        min-height: 360px;
        padding: 32px 24px 26px;
    }

    .produto-narrativa-rodape {
        justify-content: flex-start;
    }

    .produto-narrativa-rodape i {
        width: 12px;
    }

    .manifesto-conteudo {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 10px;
        padding-block: 34px;
    }

    .manifesto-conteudo svg {
        width: 150px;
        height: 50px;
    }

    .decisao-mapa ol,
    .decisao-notas {
        grid-template-columns: 1fr;
    }

    .decisao-mapa li {
        min-height: 150px;
        border-right: 0;
        border-bottom: 1px solid var(--borda);
    }

    .decisao-notas article {
        border-right: 0;
    }

    .produto-app .app-sidebar {
        justify-content: flex-start;
        gap: 8px;
        /* 11px, não 15px — a 320px, com o nav de seguranca.html liberado do
           bug do a:last-child acima, o documento estourava em exatos 7px
           (achado do Opus); 4px de folga por lado cobre isso com margem. */
        padding-inline: 11px;
    }

    .produto-app .app-assinatura {
        min-width: 44px;
        min-height: 44px;
        margin-right: auto;
        justify-content: center;
    }

    .produto-app .app-nav {
        margin-left: 0;
    }

    .produto-app .app-nav a {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
        padding: 9px;
    }

    .produto-app .app-nav a:not(.ativo) span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .produto-app .app-main {
        padding-top: 28px;
    }

    .produto-app .volta,
    .chip {
        min-height: 44px;
    }

    .selos-explicacao summary {
        min-height: 44px;
        padding-block: 12px;
    }

    .equipe-form .campo-linha {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 0;
    }

    .carteira-app .app-titulo {
        gap: 15px;
        margin-bottom: 22px;
    }

    .carteira-app .app-titulo h1 {
        font-size: 31px;
    }

    .panorama {
        padding: 16px 15px;
    }

    .panorama-cabecalho {
        align-items: start;
        flex-direction: column;
        gap: 7px;
    }

    .panorama-grade {
        gap: 8px;
    }

    .panorama-estado {
        padding: 12px;
    }

    .carteira-app .carteira-painel-cabecalho {
        padding: 18px 15px;
    }

    .carteira-guia {
        gap: 16px;
        padding-inline: 15px;
    }

    .carteira-filtros {
        position: sticky;
        z-index: 3;
        top: 64px;
        margin-right: 0;
        padding-inline: 15px;
    }

    .carteira-app .carteira-painel .linha {
        grid-template-columns: 30px minmax(0, 1fr) auto;
        grid-template-areas:
            "rank       conta      abrir"
            "objecoes   objecoes   objecoes"
            "satisfacao satisfacao satisfacao";
        gap: 11px 10px;
        padding: 18px 15px;
    }

    .carteira-app .conta-detalhe {
        display: -webkit-box;
        overflow: hidden;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .carteira-app .col-traco {
        flex: 1;
        min-width: 0;
        padding: 4px 0;
    }

    .carteira-app .col-objecoes {
        padding-top: 12px;
        border-top: 1px solid var(--borda);
    }

    .carteira-progresso {
        align-items: stretch;
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   Ciclo de vida da fricção — a objeção acompanhada de reunião em reunião.
   Linha vertical com um marcador por evento: ocorrência em sálvia, ação em
   cobre, encerramento em verde, retirada apagada. A cor nunca é a única
   diferença — cada evento também diz em texto o que é.
   ========================================================================== */

.ciclo-item {
    border-top: 1px solid var(--grade);
    padding: 20px 0 6px;
}

.ciclo-item:first-of-type {
    border-top: 0;
}

.ciclo-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 14px;
    margin-bottom: 14px;
}

.ciclo-tipo {
    font-family: var(--fonte-titulo, inherit);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ciclo-meta {
    font-size: 13px;
    color: var(--tinta-fraca);
}

.ciclo-tempo {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: grid;
    gap: 18px;
}

.ciclo-tempo::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 12px;
    width: 2px;
    background: var(--grade);
}

.ciclo-tempo > li {
    position: relative;
    padding-left: 26px;
}

.ciclo-tempo > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--superficie);
    border: 2px solid var(--salvia);
}

.ciclo-tempo > li:has(.ciclo-acao)::before { border-color: var(--cobre); background: var(--cobre); }
.ciclo-tempo > li:has(.ciclo-fim)::before { border-color: var(--bom); background: var(--bom); }
.ciclo-tempo > li:has(.ciclo-contestacao)::before { border-color: var(--atencao); }
.ciclo-tempo > li.ciclo-retirado::before { border-color: var(--eixo); background: var(--superficie); }

.ciclo-quando {
    display: block;
    font-size: 12.5px;
    color: var(--tinta-fraca);
    letter-spacing: 0.01em;
}

.ciclo-cabeca {
    margin: 2px 0 0;
    font-weight: 600;
    font-size: 15px;
}

.ciclo-trecho {
    margin: 4px 0 0;
    padding: 0 0 0 12px;
    border-left: 2px solid var(--salvia);
    font-size: 15px;
    line-height: 1.55;
}

.ciclo-nota {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--tinta-fraca);
}

.ciclo-retirado .ciclo-trecho {
    color: var(--tinta-fraca);
    text-decoration: line-through;
    text-decoration-color: var(--eixo);
}

.ciclo-retirada {
    color: var(--atencao);
}

.estado.estado-reincidente { color: var(--critico-escuro); }
.estado.estado-reincidente .ponto { background: var(--critico); }
.estado.estado-aberta .ponto { background: var(--atencao); }
.estado.estado-acao_registrada .ponto { background: var(--cobre); }
.estado.estado-resolvida .ponto { background: var(--bom); }

@media (max-width: 620px) {
    .ciclo-topo { gap: 6px 10px; }
    .ciclo-tipo { font-size: 17px; }
}


/* ==========================================================================
   Campos de formulário com rótulo flutuante (telas de acesso).
   O campo tem o mesmo fundo do cartão: quem delimita é a borda, não o preenchimento.
   ========================================================================== */

.campo-flutuante {
    position: relative;
    display: block;
}

.campo-flutuante input,
.campo-flutuante select {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(16, 42, 34, 0.22);
    border-radius: 2px;
    min-height: 54px;
    padding: 18px 14px 6px;
    font: inherit;
    font-size: 15px;
    color: var(--tinta);
}

.campo-flutuante label {
    position: absolute;
    left: 14px;
    top: 17px;
    color: #6c7a72;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    pointer-events: none;
    transition: top 140ms ease, font-size 140ms ease, color 140ms ease;
}

.campo-flutuante input:focus,
.campo-flutuante select:focus {
    border-color: var(--floresta-700);
    outline: none;
}

.campo-flutuante input:focus + label,
.campo-flutuante input:not(:placeholder-shown) + label,
.campo-flutuante select:focus + label,
.campo-flutuante select:valid + label {
    top: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--floresta-700);
}

/* O placeholder só entra em cena depois que o rótulo sobe. */
.campo-flutuante input::placeholder {
    color: transparent;
    transition: color 140ms ease;
}

.campo-flutuante input:focus::placeholder {
    color: #8d978f;
}

/* Centraliza sem colapsar o alvo. A versão anterior usava top:50% com bottom:auto, e
   isso tirava o esticamento que vinha de .alternar-senha: o botão caía para a altura do
   próprio texto — medido em 68x12 na tela de entrar, em qualquer largura, inclusive no
   celular. Doze pixels é alvo de mira, não de dedo, e está na primeira tela que qualquer
   pessoa usa. Alinhar por flex mantém o texto no meio e devolve os 54px do campo. */
.campo-flutuante .alternar-senha {
    top: 0;
    bottom: 0;
    transform: none;
    display: flex;
    align-items: center;
}

.campo-flutuante input[type="password"],
.campo-flutuante input[data-alternavel] {
    padding-right: 72px;
}

/* ==========================================================================
   Uma entrada só: a página aparece por opacidade, uma vez, ao carregar.
   Nada de cascata de seções subindo conforme a rolagem — isso é efeito de
   template, e o deck já tem o movimento que vale a pena.
   ========================================================================== */

@keyframes entrada-da-pagina {
    from { opacity: 0; }
    to { opacity: 1; }
}

body {
    animation: entrada-da-pagina 420ms ease-out both;
}

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

/* O "enter" deixa de deslocar e desaparecer: o conteúdo nasce visível. */
.movimento-pronto [data-motion="enter"],
.movimento-pronto [data-motion="enter"].visivel {
    opacity: 1;
    transform: none;
}

.campo-apoio {
    margin: 2px 0 0;
    font-size: 13px;
    text-align: right;
}

/* O preenchimento automático do Chrome pinta o campo de azul e apaga o desenho da tela.
   A sombra interna é o único jeito de recuperar o fundo: background não vence o autofill. */
.campo-flutuante input:-webkit-autofill,
.campo-flutuante input:-webkit-autofill:hover,
.campo-flutuante input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--superficie) inset;
    box-shadow: 0 0 0 1000px var(--superficie) inset;
    -webkit-text-fill-color: var(--tinta);
    caret-color: var(--tinta);
}

/* Decisões sobre a objeção: ficam fechadas por padrão, porque a linha do tempo é para ler
   e o formulário é para quando a pessoa já decidiu agir. */
.ciclo-acoes-pessoa {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 14px;
}

.ciclo-form summary {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--floresta-700);
}

.ciclo-form[open] summary {
    margin-bottom: 8px;
}

.ciclo-form form {
    display: grid;
    gap: 6px;
    max-width: 440px;
    padding: 12px 0 4px;
}

.ciclo-form label {
    font-size: 12px;
    font-weight: 600;
    color: var(--tinta-2);
}

.ciclo-form select,
.ciclo-form input,
.ciclo-form textarea {
    width: 100%;
    border: 1px solid rgba(16, 42, 34, 0.22);
    border-radius: 2px;
    padding: 9px 10px;
    font: inherit;
    font-size: 14px;
    background: var(--superficie);
    color: var(--tinta);
}

.ciclo-form .botao {
    justify-self: start;
    margin-top: 4px;
}

.ciclo-tempo .ciclo-form {
    margin-top: 6px;
}

/* Leitura de eficácia: tabela de dado denso, lida de perto. Linhas, não cartões. */
.rolagem-tabela {
    overflow-x: auto;
}

.tabela-eficacia {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 14.5px;
}

.tabela-eficacia th,
.tabela-eficacia td {
    text-align: left;
    padding: 11px 14px 11px 0;
    border-bottom: 1px solid var(--grade);
    vertical-align: top;
}

.tabela-eficacia thead th {
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
    font-weight: 600;
}

.tabela-eficacia tbody th {
    font-weight: 600;
    max-width: 30ch;
}

.tabela-eficacia .amostra {
    font-size: 13px;
    color: var(--tinta-fraca);
}

/* ------------------------------------------------------------------ eficácia
 *
 * A tela é leitura comparativa dentro de um tipo de objeção, e a decisão de forma
 * veio de uma reprovação medida: o par vermelho/verde que um empilhado pediria mede
 * ΔE 4,3 em deuteranopia (validador da skill dataviz, piso 8). Em vez de recorrer a
 * textura para salvar o par, a tela mudou de forma — uma série só, a parcela que
 * voltou, com os outros números em texto ao lado. Barra única não tem par adjacente,
 * então não há o que confundir, e menos é melhor em toda a coluna.
 */
.resumo-eficacia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1px;
    background: var(--grade);
    border: 1px solid var(--borda);
    margin-bottom: 26px;
}

.resumo-eficacia > div {
    background: var(--superficie);
    padding: 18px 20px 16px;
}

.resumo-eficacia strong {
    display: block;
    font-family: "Iowan Old Style", Baskerville, Georgia, serif;
    font-size: 34px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}

.resumo-eficacia span {
    display: block;
    margin-top: 7px;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--tinta-fraca);
    max-width: 22ch;
}

.eficacia-cabecalho {
    margin-bottom: 18px;
}

.eficacia-cabecalho .legenda {
    margin-top: 4px;
}

.eficacia-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.eficacia-acao {
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tinta);
}

.eficacia-medida {
    display: grid;
    grid-template-columns: 210px 1fr;
    align-items: center;
    gap: 16px;
}

/* Trilha recessiva com marcas de quarto: sem elas, 7% e 15% viram o mesmo tracinho.
   Não é série — fica fora da paleta categórica de propósito. */
.eficacia-barra {
    height: 10px;
    /* Um gradiente de largura cheia, com paradas duras. Três camadas posicionadas em
       25%/50%/75% cairiam em 18,75%, 25% e 18,75%: porcentagem de background-position
       resolve contra (largura da trilha menos a do ladrilho), não contra a trilha. Marca
       no lugar errado engana mais do que marca nenhuma. */
    background-image: linear-gradient(to right,
        transparent calc(25% - 1px), var(--eixo) calc(25% - 1px), var(--eixo) 25%,
        transparent 25%,
        transparent calc(50% - 1px), var(--eixo) calc(50% - 1px), var(--eixo) 50%,
        transparent 50%,
        transparent calc(75% - 1px), var(--eixo) calc(75% - 1px), var(--eixo) 75%,
        transparent 75%);
    background-color: var(--grade);
    border-radius: 2px;
    position: relative;
}

/* O preenchimento é MAGNITUDE, não status — e isto já deu errado uma vez: a barra saía em
   --critico (vermelho de alarme) em qualquer valor, então 7% e 50% tinham a mesma cor. A tela
   dizia "menos é melhor" com a legenda e "isto é um problema" com a cor, e quem leu não
   entendeu — reclamação do Aaron em 05/10/2026. Cor de status num número que a própria tela
   declara descritivo ("descreve, não prova") é um veredito que ela não tem direito de dar.
   --cobre é o acento da marca: carrega quantidade, não bom nem ruim. */
.eficacia-barra i {
    display: block;
    height: 100%;
    min-width: 3px;
    background: var(--cobre);
    border-radius: 0 4px 4px 0;
}

/* Colunas fixas: o olho desce a coluna comparando ações do mesmo tipo. Sem isso o flex
   realinha a cada linha e a comparação exige ler palavra por palavra. */
.eficacia-numeros {
    margin: 0;
    font-size: 13px;
    color: var(--tinta-fraca);
    display: grid;
    /* A primeira coluna tem 9.5rem porque "voltou em 10 de 14" não cabe em 7.5rem e quebra
       em duas linhas — medido em 05/10/2026, com dois dígitos. Hoje a base de demonstração
       só tem valores de um dígito, então o defeito não aparece nela; apareceria no primeiro
       inquilino com volume. */
    grid-template-columns: 9.5rem 7.5rem 7.5rem 1fr;
    gap: 4px 10px;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
}

/* Texto usa tinta de texto, nunca a cor da série: o número ao lado de uma barra colorida
   herda a identidade da barra, não precisa vesti-la. Mesmo motivo do bloco acima. */
.eficacia-numeros strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--tinta);
}

.eficacia-sem-amostra {
    margin: 0;
    font-size: 13px;
    color: var(--tinta-fraca);
    border-left: 2px solid var(--grade);
    padding: 1px 0 1px 10px;
}

@media (max-width: 860px) {
    .eficacia-medida {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .eficacia-numeros {
        grid-template-columns: auto auto;
    }
}

/* A tela de eficácia é leitura comparativa: respiro de painel de leitura corrida deixa
   cada tipo longe demais do seguinte para comparar. Aperta só aqui. */
.app-main .painel:has(.eficacia-lista) {
    padding-top: 22px;
    padding-bottom: 22px;
    margin-bottom: 16px;
}

.eficacia-cabecalho {
    margin-bottom: 14px;
}

.app-main .painel:has(.eficacia-lista) + .selos-explicacao {
    margin-top: 20px;
}

/* O aviso de ambiente fabricado. Fica acima de tudo na área de conteúdo e nunca é
   dispensável: uma proporção inventada lida como resultado medido é o viés que a banca
   apontou em 15/09, e esconder o aviso num rodapé seria a mesma coisa que não tê-lo. */
.aviso-demonstracao {
    border: 1px solid var(--borda);
    border-left: 1px solid var(--cobre);
    background: var(--marfim-quente);
    padding: 13px 16px;
    margin-bottom: 22px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--tinta-2);
    max-width: 78ch;
}

.aviso-demonstracao strong {
    color: var(--tinta);
}

/* ------------------------------------------------- estados do ciclo de vida na carteira
 *
 * Quatro estados, e só um deles é alarme. "Voltou" usa a cor de estado crítico porque é o
 * único que já custou uma tentativa; "sem ação" usa cobre porque pede trabalho, não susto;
 * "aguardando" e "encerradas" ficam no neutro e no verde da série. Nenhum deles é cor de
 * série — todos vêm acompanhados do rótulo, como manda a regra de estado do projeto.
 */
.estado.objecao-reincidente .ponto { background: var(--critico); }
.estado.objecao-aberta .ponto { background: var(--cobre); }
.estado.objecao-acao_registrada .ponto { background: var(--tinta-fraca); }
.estado.objecao-resolvida .ponto { background: var(--serie); }

.estado.objecao-reincidente { color: var(--critico-escuro); font-weight: 600; }
.estado.objecao-aberta { color: var(--tinta); }

.panorama-reincidente span i { background: var(--critico); }
.panorama-sem-acao span i { background: var(--cobre); }
.panorama-aguardando span i { background: var(--tinta-fraca); }
.panorama-encerrada span i { background: var(--serie); }

.carteira-guia .guia-reincidente {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--critico);
    display: inline-block;
}

/* Objeções já encerradas: presentes, porque o histórico é o produto, mas dobradas — não é
   o que pede decisão hoje, e aberto empurra a reincidente para fora da primeira tela. */
.ciclo-encerradas {
    margin-top: 26px;
    border-top: 1px solid var(--grade);
    padding-top: 16px;
}

.ciclo-encerradas > summary {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tinta-2);
    padding: 4px 0;
}

.ciclo-encerradas > summary:hover { color: var(--tinta); }

.ciclo-encerradas > .legenda { margin: 8px 0 16px; }

.ciclo-item-encerrado {
    opacity: 0.86;
    padding-top: 10px;
}

.ciclo-item-encerrado .ciclo-texto {
    margin: 0;
    font-size: 13.5px;
    color: var(--tinta-2);
}

/* ------------------------------------------------- alvos de toque do ciclo de vida
 *
 * Medido em 04/10/2026, de 320 a 1280px: os <summary> de "Contestar esta leitura",
 * "Registrar ação" e "Encerrar objeção" mediam 20px de altura em toda largura — são os
 * três controles que a pessoa de fato aperta no produto, e os que a demonstração usa ao
 * vivo. Em dispositivo com mouse 20px é mira suficiente e manter denso é melhor para uma
 * lista longa; sem mouse, não é.
 *
 * Mesma solução de 31/08 para o botão Sair: a correção depende do dispositivo de entrada,
 * não da largura da tela — um tablet em paisagem tem 1024px e nenhum ponteiro fino.
 */
@media (hover: none) {
    /* Só padding: display:flex num <summary> apaga o marcador de abrir/fechar em parte
       dos navegadores, e a seta é o que diz que o bloco expande. 20px de linha + 12px em
       cima e embaixo fecham os 44px sem tocar na caixa. */
    .ciclo-form > summary,
    .ciclo-encerradas > summary {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .ciclo-nota a {
        display: inline-block;
        padding: 10px 0;
    }
}