/* ==========================================================================
   FaroMenu - design system do site de vendas
   Único CSS do projeto. Regra do Almir: nada de style="" nem <style> no HTML.
   ========================================================================== */

:root {
    /* Paleta - "faro" de olfato: âmbar de torra + verde de grão cru.
       Provisória: fecha quando houver identidade visual definida. */
    --faro-tinta:        #1c1917;
    --faro-tinta-suave:  #57534e;  /* 7,6:1 no branco */
    /* Era #a8a29e (2,5:1) - reprovava contraste de texto. Este dá 4,5:1,
       o mínimo de texto do WCAG AA. Não clarear sem recalcular. */
    --faro-tinta-fraca:  #7d756e;
    /* Só para linha de grade e traço de eixo - elemento gráfico, não texto. */
    --faro-grade:        #e7e5e4;
    --faro-fundo:        #ffffff;
    --faro-fundo-suave:  #faf9f7;
    --faro-borda:        #e7e5e4;

    --faro-marca:        #b45309;
    --faro-marca-escura: #92400e;
    --faro-marca-fraca:  #fef3c7;
    --faro-apoio:        #15803d;

    --faro-atencao:      #b45309;
    --faro-atencao-fundo:#fffbeb;

    --faro-raio:         12px;
    --faro-raio-g:       20px;
    /* Respiro entre blocos irmãos de uma seção (ver "Ritmo vertical"). */
    --faro-ritmo:        28px;
    --faro-sombra:       0 1px 2px rgba(28, 25, 23, .06), 0 8px 24px rgba(28, 25, 23, .06);
    --faro-largura:      1120px;

    --faro-fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--faro-fonte);
    color: var(--faro-tinta);
    background: var(--faro-fundo);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--faro-marca-escura); }

h1, h2, h3 { line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.25rem); }
h3 { font-size: 1.125rem; }
p  { margin: 0 0 1rem; }

/* --- Layout ------------------------------------------------------------- */
.faro-wrap { width: 100%; max-width: var(--faro-largura); margin: 0 auto; padding: 0 20px; }
.faro-secao { padding: 72px 0; }
.faro-secao--suave { background: var(--faro-fundo-suave); }
.faro-centro { text-align: center; }
.faro-medio { max-width: 720px; margin-left: auto; margin-right: auto; }

/* Ritmo vertical do conteúdo de seção.
   O `gap` só separa itens DENTRO de uma grade; blocos irmãos empilhados na
   seção (bloco de título, KPIs, grade, cartão, nota de rodapé) não tinham nada
   entre si, e cada bloco novo reabria o mesmo bug de "colado no anterior".
   Uma regra só resolve todos - nada de margem avulsa por bloco.
   Escopada em `.faro-secao > .faro-wrap` de propósito: cabeçalho e rodapé
   também usam `.faro-wrap`, e o cabeçalho é flex - margem ali quebra o topo.
   O herói tem espaçamento próprio e fica de fora. */
.faro-secao > .faro-wrap > * + * { margin-top: var(--faro-ritmo); }
/* Exceção: texto depois de texto mantém o ritmo tipográfico do próprio
   elemento (o margin-bottom do h2/p), senão título e lide descolam. */
.faro-secao > .faro-wrap > :where(h2, h3, p, ul, ol) + :where(h2, h3, p, ul, ol) { margin-top: 0; }

.faro-grid { display: grid; gap: 24px; }
@media (min-width: 720px) {
    .faro-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .faro-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .faro-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
    .faro-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Cabeçalho ---------------------------------------------------------- */
.faro-topo {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--faro-borda);
}
.faro-topo__interno { display: flex; align-items: center; gap: 24px; height: 64px; }
.faro-logo { font-weight: 800; font-size: 1.25rem; color: var(--faro-tinta); text-decoration: none; letter-spacing: -.03em; }
.faro-logo span { color: var(--faro-marca); }
.faro-nav { display: none; gap: 24px; margin-left: auto; }
.faro-nav a { color: var(--faro-tinta-suave); text-decoration: none; font-size: .95rem; font-weight: 500; }
.faro-nav a:hover { color: var(--faro-tinta); }
.faro-topo__acoes { margin-left: auto; display: flex; gap: 10px; align-items: center; }
@media (min-width: 880px) {
    .faro-nav { display: flex; }
    .faro-topo__acoes { margin-left: 0; }
}

/* --- Botões ------------------------------------------------------------- */
.faro-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: var(--faro-raio);
    font-weight: 600; font-size: .95rem; text-decoration: none;
    border: 1px solid transparent; cursor: pointer;
    transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.faro-btn:active { transform: scale(.97); }
.faro-btn--principal { background: var(--faro-marca); color: #fff; }
.faro-btn--principal:hover { background: var(--faro-marca-escura); }
.faro-btn--fantasma { background: transparent; color: var(--faro-tinta); border-color: var(--faro-borda); }
.faro-btn--fantasma:hover { border-color: var(--faro-tinta-fraca); }
.faro-btn--zap { background: var(--faro-apoio); color: #fff; }
.faro-btn--zap:hover { filter: brightness(.94); }
.faro-btn--pequeno { padding: 8px 16px; font-size: .875rem; }
.faro-btn--largo { width: 100%; }

/* --- Herói -------------------------------------------------------------- */
.faro-heroi { padding: 88px 0 72px; background: linear-gradient(180deg, var(--faro-marca-fraca) 0%, var(--faro-fundo) 100%); }
.faro-heroi p.faro-lide { font-size: 1.2rem; color: var(--faro-tinta-suave); }
.faro-heroi__acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
/* Nota de apoio sob os botões. Antes usava `.faro-doc__data` (classe de página
   jurídica): ficava sem respiro em cima, com 1rem sobrando embaixo somado aos
   72px de padding do herói, e na tinta mais fraca. Aqui: espaço em cima,
   nenhum embaixo, e a tinta suave (7,6:1) porque é frase de venda, não rodapé. */
.faro-heroi__nota { margin: 18px 0 0; font-size: .9rem; color: var(--faro-tinta-suave); }
.faro-selo { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--faro-borda); font-size: .8rem; font-weight: 600; color: var(--faro-marca-escura); margin-bottom: 20px; }

/* Selo de DESTAQUE - só para a oferta dos 30 dias.
   O selo neutro (branco com borda fina) é o elemento mais discreto do herói, e
   estava carregando a oferta mais forte da página. Aqui ele vira sólido, maior e
   com contraste de verdade. Branco sobre #92400e dá 8,1:1, bem acima do mínimo.
   Use SÓ para os 30 dias: se virar estilo de qualquer selo, deixa de destacar. */
.faro-selo--destaque {
    background: var(--faro-marca-escura);
    border-color: var(--faro-marca-escura);
    color: #fff;
    font-size: .95rem;
    padding: 9px 20px;
    box-shadow: 0 6px 18px rgba(146, 64, 14, .25);
}
.faro-selo--destaque strong { font-weight: 800; }
/* O "sem cartão de crédito" vem colado no selo, e não numa linha solta lá
   embaixo: a objeção que ele responde nasce na mesma hora em que se lê "grátis". */
.faro-selo__nota { display: block; font-size: .8rem; font-weight: 500; opacity: .85; margin-top: 2px; }

/* Faixa de oferta - versão em bloco, para dentro da seção de preços, onde o
   selo compete com os cartões de plano e se perde. */
.faro-oferta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px 16px; text-align: center;
    margin: 0 auto var(--faro-ritmo);
    padding: 16px 24px; max-width: 720px;
    border-radius: var(--faro-raio-g);
    background: var(--faro-marca-fraca);
    border: 1px solid var(--faro-marca);
}
.faro-oferta__forte { font-size: 1.15rem; font-weight: 800; color: var(--faro-marca-escura); }
.faro-oferta__resto { font-size: .95rem; color: var(--faro-tinta-suave); }

/* --- Cartões ------------------------------------------------------------ */
.faro-card {
    background: var(--faro-fundo); border: 1px solid var(--faro-borda);
    border-radius: var(--faro-raio-g); padding: 28px;
}
.faro-card__num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: var(--faro-marca-fraca); color: var(--faro-marca-escura); font-weight: 700; margin-bottom: 12px; }
.faro-card p:last-child { margin-bottom: 0; }

/* --- Lista de recursos dentro do card ----------------------------------- */
.faro-lista { list-style: none; padding: 0; margin: 12px 0 0; }
.faro-lista li {
    position: relative; padding: 6px 0 6px 20px;
    font-size: .93rem; color: var(--faro-tinta-suave);
}
.faro-lista li::before {
    content: ""; position: absolute; left: 2px; top: 14px;
    width: 6px; height: 6px; border-radius: 999px; background: var(--faro-tinta-fraca);
}

/* Palavras em destaque. As duas cores alternam entre os cards para o bloco
   não virar uma parede monocromática - a alternância é escolhida no HTML. */
.faro-realce { font-weight: 700; }
.faro-realce--marca { color: var(--faro-marca-escura); }
.faro-realce--apoio { color: var(--faro-apoio); }

/* Etiqueta de "adicional opcional" no canto do card */
.faro-card__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.faro-card__topo h3 { margin-bottom: 0; }
.faro-etiqueta {
    flex-shrink: 0; font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; padding: 4px 9px; border-radius: 999px;
    background: var(--faro-marca-fraca); color: var(--faro-marca-escura);
}

/* --- Planos ------------------------------------------------------------- */
.faro-plano { position: relative; display: flex; flex-direction: column; }
.faro-plano--destaque { border-color: var(--faro-marca); box-shadow: var(--faro-sombra); }
.faro-plano__fita { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--faro-marca); color: #fff; font-size: .75rem; font-weight: 700; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.faro-plano__nome { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.faro-plano__faixa { color: var(--faro-tinta-suave); font-size: .9rem; margin-bottom: 18px; }
.faro-plano__preco { font-size: 2.25rem; font-weight: 800; letter-spacing: -.03em; }
/* Respiro antes do CTA. Não depende da lista interna: os recursos saíram dos
   cartões (são iguais nos três planos) e o `flex: 1` do <ul> era o que
   empurrava o botão para o rodapé. Sem lista, quem empurra é o margin-top auto
   abaixo - e este margin-bottom garante o mínimo no cartão mais alto, onde não
   sobra espaço para o auto ocupar. */
.faro-plano__periodo { color: var(--faro-tinta-fraca); font-size: .9rem; margin-bottom: 22px; }
.faro-plano ul { list-style: none; padding: 0; margin: 20px 0; flex: 1; }
/* Cartões lado a lado têm a mesma altura: o auto joga a sobra para cima do
   botão e todos os CTAs ficam alinhados na mesma linha. */
.faro-plano > .faro-btn { margin-top: auto; }
.faro-plano li { padding: 7px 0 7px 26px; position: relative; font-size: .95rem; color: var(--faro-tinta-suave); }
.faro-plano li::before { content: "✓"; position: absolute; left: 0; color: var(--faro-apoio); font-weight: 700; }

/* .faro-enterprise (faixa de volume alto) não precisa mais de margem própria:
   o respiro vem da regra de ritmo vertical lá em cima, que vale para qualquer
   bloco irmão da seção. A classe segue no HTML como marcador semântico. */

/* --- Tabela comparativa ------------------------------------------------- */
.faro-tabela-rolagem { overflow-x: auto; border-radius: var(--faro-raio); border: 1px solid var(--faro-borda); }
.faro-tabela { width: 100%; border-collapse: collapse; min-width: 520px; }
.faro-tabela th, .faro-tabela td { padding: 14px 18px; text-align: left; font-size: .95rem; }

/* Cabeçalho como faixa, não como linha de texto em negrito: sem isso a tabela
   fica sendo quatro colunas soltas dentro de um card, que é o "feia" que o dono
   apontou. A faixa dá borda ao dado e separa rótulo de valor. */
.faro-tabela thead th {
    background: var(--faro-fundo-suave);
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--faro-tinta-suave);
    border-bottom: 1px solid var(--faro-borda);
}
.faro-tabela tbody td { border-bottom: 1px solid var(--faro-borda); }
/* Última linha sem risco embaixo: a borda do container já fecha a tabela. */
.faro-tabela tbody tr:last-child td { border-bottom: 0; }

/* Primeira coluna é rótulo; as demais são dinheiro - alinhadas e tabulares,
   para os valores baterem coluna a coluna na vertical. */
.faro-tabela tbody td:first-child { font-weight: 600; color: var(--faro-tinta); }
.faro-tabela td:not(:first-child), .faro-tabela th:not(:first-child) { text-align: center; }
.faro-tabela tbody td:not(:first-child) {
    font-variant-numeric: tabular-nums; color: var(--faro-tinta-suave);
}
.faro-tabela tbody tr:hover { background: var(--faro-fundo-suave); }

/* --- Aviso / placeholder ------------------------------------------------ */
.faro-aviso {
    background: var(--faro-atencao-fundo); border: 1px dashed var(--faro-atencao);
    color: var(--faro-marca-escura); border-radius: var(--faro-raio);
    padding: 14px 18px; font-size: .9rem; margin: 24px 0;
}
.faro-aviso strong { font-weight: 700; }
/* Placeholder de decisão pendente - precisa DOER de tão visível, para não
   escapar para produção. */
.faro-def { background: #fee2e2; color: #991b1b; font-weight: 700; padding: 1px 7px; border-radius: 5px; font-size: .85em; white-space: nowrap; }

/* --- FAQ ---------------------------------------------------------------- */
.faro-faq { border-top: 1px solid var(--faro-borda); }
.faro-faq details { border-bottom: 1px solid var(--faro-borda); }
.faro-faq summary { padding: 18px 0; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faro-faq summary::-webkit-details-marker { display: none; }
.faro-faq summary::after { content: "+"; color: var(--faro-marca); font-weight: 700; font-size: 1.25rem; line-height: 1; }
.faro-faq details[open] summary::after { content: "−"; }
.faro-faq details > p { color: var(--faro-tinta-suave); padding-bottom: 18px; margin: 0; }

/* --- Rodapé ------------------------------------------------------------- */
.faro-rodape { background: var(--faro-tinta); color: #d6d3d1; padding: 56px 0 28px; }
.faro-rodape a { color: #d6d3d1; text-decoration: none; }
.faro-rodape a:hover { color: #fff; }
.faro-rodape__grid { display: grid; gap: 32px; grid-template-columns: 1fr; margin-bottom: 32px; }
@media (min-width: 720px) { .faro-rodape__grid { grid-template-columns: 2fr 1fr 1fr; } }
.faro-rodape h4 { color: #fff; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 14px; }
.faro-rodape ul { list-style: none; padding: 0; margin: 0; }
.faro-rodape li { padding: 5px 0; font-size: .95rem; }
.faro-rodape__base { border-top: 1px solid #44403c; padding-top: 22px; font-size: .85rem; color: var(--faro-tinta-fraca); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }

/* --- WhatsApp flutuante -------------------------------------------------- */
.faro-zap {
    position: fixed; right: 20px; bottom: 20px; z-index: 60;
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--faro-apoio); color: #fff; text-decoration: none;
    padding: 14px 20px; border-radius: 999px; font-weight: 600; font-size: .95rem;
    box-shadow: 0 8px 24px rgba(21, 128, 61, .35);
}
.faro-zap:hover { filter: brightness(.94); }

/* ==========================================================================
   Movimento
   Quem liga isto é o assets/js/faro.js. Os dois fallbacks estão no fim do
   arquivo e valem como lei: com prefers-reduced-motion - ou sem JS nenhum,
   via @media (scripting: none) - a página aparece inteira, estática, sem
   perder conteúdo. Movimento é enfeite.
   ========================================================================== */

/* --- Revelar ao entrar na tela ------------------------------------------ */
.faro-revelar { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.faro-revelar.faro-visivel { opacity: 1; transform: none; }
/* Escalonamento em cascata dentro de uma grade */
.faro-revelar[data-atraso="1"] { transition-delay: .06s; }
.faro-revelar[data-atraso="2"] { transition-delay: .12s; }
.faro-revelar[data-atraso="3"] { transition-delay: .18s; }
.faro-revelar[data-atraso="4"] { transition-delay: .24s; }
.faro-revelar[data-atraso="5"] { transition-delay: .30s; }

/* --- Palco fixo: a "troca de tela" ao rolar ------------------------------
   O container alto dá o curso da rolagem; o palco gruda no topo e as cenas
   trocam dentro dele. A altura é múltipla de 100vh - uma tela de rolagem por
   cena, mais uma de folga para a última cena ser lida antes de o palco soltar.
   O 400vh aqui vale para 3 cenas; o faro.js reescreve --faro-trilho conforme o
   número real de cenas do HTML (n + 1 telas). Sem JS, fica no padrão. */
.faro-palco { position: relative; background: var(--faro-tinta); color: #fff; }
.faro-palco__trilho { height: var(--faro-trilho, 400vh); }
.faro-palco__fixo {
    position: sticky; top: 0; height: 100vh;
    display: flex; align-items: center; overflow: hidden;
}
.faro-palco__interno { width: 100%; max-width: var(--faro-largura); margin: 0 auto; padding: 0 20px; }

/* visibility com duração transiciona no meio do caminho (é propriedade
   discreta): a cena entrava só na metade do fade. Entra na hora (0s) e sai
   depois do fade (delay .5s), que é o comportamento pretendido. */
.faro-cena { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 20px;
    opacity: 0; visibility: hidden; transform: translateY(28px);
    transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s; }
.faro-cena.faro-cena--ativa { opacity: 1; visibility: visible; transform: none;
    transition: opacity .5s ease, transform .5s ease, visibility 0s linear 0s; }
.faro-cena__grade { width: 100%; max-width: var(--faro-largura); margin: 0 auto; display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .faro-cena__grade { grid-template-columns: 0.85fr 1.15fr; } }
/* A cor clara vale só na COLUNA DE TEXTO, nunca na cena inteira.
   `.faro-cena p` (0,1,1) vencia `.faro-kpi__val` (0,1,0) por especificidade e
   pintava de cinza claro o texto dentro dos painéis BRANCOS - KPIs e medidor
   ficavam ilegíveis. Escopar aqui mata a classe inteira do bug: qualquer card
   claro que entre numa cena no futuro continua com a tinta dele. */
.faro-cena__texto h2 { color: #fff; }
.faro-cena__texto p { color: #d6d3d1; }
.faro-cena__passo { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faro-marca-fraca); }

/* Indicador de progresso das cenas */
.faro-palco__pontos { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.faro-palco__ponto { width: 28px; height: 3px; border-radius: 999px; background: #44403c; transition: background-color .3s ease; }
.faro-palco__ponto.faro-visivel { background: var(--faro-marca); }

/* ==========================================================================
   Gráficos simulados do sistema
   Cada gráfico tem UMA série - todas as marcas usam o mesmo hue e o nome vem do
   rótulo, não da cor. Sem paleta categórica, sem legenda, sem risco de leitura
   por daltonismo. Cores de dado: --faro-marca e --faro-apoio, ambas 5:1 no
   branco do painel. Segunda série ou paleta categórica só depois de validar
   contraste - a regra desta base é uma série por gráfico.
   ========================================================================== */
/* .faro-painel é o invólucro do PALCO ESCURO: fundo branco recortado com sombra
   forte. Em seção clara ele não tem contra o que recortar - ali o invólucro é
   .faro-card, e só as peças internas (__cab, __titulo, __nota) são reaproveitadas.
   Elas usam tinta de texto, então funcionam nas duas superfícies. */
.faro-painel { background: #fff; border-radius: var(--faro-raio-g); padding: 22px; box-shadow: 0 20px 50px rgba(0,0,0,.28); }
.faro-painel__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.faro-painel__titulo { font-size: .95rem; font-weight: 700; color: var(--faro-tinta); }
.faro-painel__nota { font-size: .8rem; color: var(--faro-tinta-suave); }
.faro-painel + .faro-painel { margin-top: 16px; }

/* Números de destaque (a forma certa quando o dado é um só) */
.faro-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.faro-kpi { background: #fff; border-radius: var(--faro-raio); padding: 14px 16px; box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.faro-kpi__rot { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faro-tinta-suave); }
.faro-kpi__val { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--faro-tinta); }
.faro-kpi__delta { font-size: .78rem; font-weight: 700; color: var(--faro-apoio); }

/* O valor de cada marca vem do HTML em atributo (data-h / data-w / data-off) e
   é o faro.js que o copia para a custom property lida aqui - style="" no HTML é
   proibido no projeto. Todo var() de dado tem fallback de gráfico VAZIO: se o
   JS não rodar, a marca não pode inventar um número (sem fallback, width:
   var(--w) cai para auto = 100%, ou seja, uma barra cheia mentindo). */

/* Barras verticais - extremidade arredondada de 4px ancorada na linha de base,
   2px de respiro entre marcas. */
.faro-barras { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 8px; border-bottom: 1px solid var(--faro-grade); }
.faro-barra { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.faro-barra__marca {
    width: 100%; background: var(--faro-marca); border-radius: 4px 4px 0 0;
    height: 0; transition: height .9s cubic-bezier(.22,1,.36,1);
}
.faro-visivel .faro-barra__marca { height: var(--h, 0%); }
.faro-barra__marca--forte { background: var(--faro-marca-escura); }
.faro-eixo { display: flex; gap: 6px; margin-top: 8px; }
.faro-eixo span { flex: 1; text-align: center; font-size: .72rem; color: var(--faro-tinta-suave); }

/* Barras horizontais com rótulo direto - identidade vem do texto, não da cor */
.faro-barrasH { margin-top: 12px; }
.faro-barraH { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; padding: 5px 0; }
.faro-barraH__rot { font-size: .82rem; color: var(--faro-tinta-suave); }
/* Trilho na cor de grade, não na de fundo: o painel é branco e o cinza de
   fundo (#faf9f7) sumia dentro dele - sem o trilho visível não dá para ler
   quanto FALTA para o topo da escala. */
.faro-barraH__trilho { background: var(--faro-grade); border-radius: 4px; height: 14px; overflow: hidden; }
.faro-barraH__marca { display: block; height: 100%; width: 0; background: var(--faro-marca); border-radius: 4px; transition: width .9s cubic-bezier(.22,1,.36,1); }
.faro-visivel .faro-barraH__marca { width: var(--w, 0%); }
.faro-barraH__val { font-size: .82rem; font-weight: 700; color: var(--faro-tinta); font-variant-numeric: tabular-nums; }

/* Área + linha: a linha é desenhada com stroke-dasharray ao entrar na tela.
   --traco é o comprimento real do path, medido pelo faro.js (getTotalLength).
   O fallback 1000 é generoso de propósito: traço curto demais cortaria o fim da
   linha em repouso; longo demais só faz o desenho terminar antes do tempo. */
.faro-area { width: 100%; height: 160px; display: block; }
.faro-area__linha { fill: none; stroke: var(--faro-apoio); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: var(--traco, 1000); stroke-dashoffset: var(--traco, 1000); transition: stroke-dashoffset 1.4s ease; }
.faro-visivel .faro-area__linha { stroke-dashoffset: 0; }
.faro-area__preench { fill: var(--faro-apoio); opacity: 0; transition: opacity .8s ease .5s; }
.faro-visivel .faro-area__preench { opacity: .12; }
.faro-area__ponto { fill: var(--faro-apoio); stroke: #fff; stroke-width: 2; opacity: 0; transition: opacity .4s ease 1.2s; }
.faro-visivel .faro-area__ponto { opacity: 1; }
.faro-area__grade { stroke: var(--faro-grade); stroke-width: 1; }

/* Medidor de CMV - arco simples, um dado só */
.faro-medidor { display: flex; align-items: center; gap: 18px; }
.faro-medidor svg { width: 132px; height: 132px; flex-shrink: 0; }
/* Mesmo motivo do trilho da barra: o anel vazio precisa ser visível para o
   arco cheio significar alguma coisa. */
.faro-medidor__trilho { fill: none; stroke: var(--faro-grade); stroke-width: 12; }
/* 314 = circunferência de r=50 (2πr). O HTML manda o offset já calculado:
   offset = 314 × (1 − fração). Fallback = 314 = arco vazio. */
.faro-medidor__arco { fill: none; stroke: var(--faro-marca); stroke-width: 12; stroke-linecap: round;
    stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1); }
.faro-visivel .faro-medidor__arco { stroke-dashoffset: var(--off, 314); }
.faro-medidor__num { font-size: 2rem; font-weight: 800; color: var(--faro-tinta); letter-spacing: -.02em; }

/* --- Palco desligado: cenas viram blocos empilhados ----------------------
   O faro.js marca .faro-palco--estatico em TRÊS casos: o visitante pediu menos
   movimento, a tela é pequena/baixa demais para o painel grudado de 100vh (a
   cena seria cortada pelo overflow), ou o navegador é antigo demais. Em todos
   eles o conteúdo continua inteiro na página - só perde o efeito. */
.faro-palco--estatico .faro-palco__trilho { height: auto; }
.faro-palco--estatico .faro-palco__fixo { position: static; height: auto; display: block; padding: 56px 0; }
.faro-palco--estatico .faro-cena { position: static; opacity: 1; visibility: visible; transform: none; padding: 32px 20px; transition: none; }
.faro-palco--estatico .faro-palco__pontos { display: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* Nada de transição/animação - e nenhum estado inicial escondido. */
    .faro-revelar { opacity: 1; transform: none; transition: none; }
    .faro-barra__marca { height: var(--h, 0%); transition: none; }
    .faro-barraH__marca { width: var(--w, 0%); transition: none; }
    .faro-area__linha { stroke-dashoffset: 0; transition: none; }
    .faro-area__preench { opacity: .12; transition: none; }
    .faro-area__ponto { opacity: 1; transition: none; }
    .faro-medidor__arco { stroke-dashoffset: var(--off, 314); transition: none; }
    .faro-cena { transition: none; }
    .faro-btn { transition: none; }
}

/* --- Sem JavaScript ------------------------------------------------------
   O estado inicial de .faro-revelar é invisível e quem devolve a visibilidade é
   o faro.js. Se ele não rodar (bloqueado, extensão, erro de rede), a página não
   pode ficar em branco: `scripting: none` é a única forma de detectar isso em
   CSS puro, e navegador que não conhece a media feature ignora o bloco inteiro
   - nesse caso o JS quase certamente está ligado. */
@media (scripting: none) {
    .faro-revelar { opacity: 1; transform: none; }
    /* Palco empilhado, igual ao fallback acima (aqui não há classe para herdar). */
    .faro-palco__trilho { height: auto; }
    .faro-palco__fixo { position: static; height: auto; display: block; padding: 56px 0; }
    .faro-cena { position: static; opacity: 1; visibility: visible; transform: none; padding: 32px 20px; transition: none; }
    .faro-palco__pontos { display: none; }
    /* O gráfico de área é 100% CSS e sobrevive. Barras e medidor dependem do
       valor que o JS injeta: sem ele some a geometria (que seria zerada e
       pareceria "loja sem venda") e ficam os números, que são texto. */
    .faro-area__linha { stroke-dashoffset: 0; }
    .faro-area__preench { opacity: .12; }
    .faro-area__ponto { opacity: 1; }
    .faro-barras, .faro-eixo, .faro-barraH__trilho, .faro-medidor svg { display: none; }
    /* O painel de barras ficaria só com o cabeçalho: some inteiro. Os outros
       mantêm rótulo + porcentagem, que já contam a história. */
    .faro-painel:has(.faro-barras) { display: none; }
}

/* --- Documentos legais --------------------------------------------------- */
.faro-doc { max-width: 780px; margin: 0 auto; padding: 56px 20px 80px; }
.faro-doc h2 { margin-top: 40px; font-size: 1.35rem; }
.faro-doc h3 { margin-top: 26px; }
.faro-doc li { margin-bottom: 8px; color: var(--faro-tinta-suave); }
.faro-doc__data { color: var(--faro-tinta-fraca); font-size: .9rem; }