/* ══════════════════════════════════════════════════════════════════════
   site.css  ·  O QUE TODA PÁGINA DO lider10.com.br COMPARTILHA
   ──────────────────────────────────────────────────────────────────────
   Nasceu na v33k.3163, quando as páginas de funcionalidade começaram.
   Até aqui existia uma página só, e tudo cabia dentro dela.

   ★★★ O QUE MORA AQUI: os tokens, a base, o topo, o rodapé, o convite da
     Lívia e os blocos que as páginas de recurso montam. O que é de UMA
     página (o hero da home, a cena que rola, a tabela de planos) continua
     dentro dela, inline. A régua é simples: se duas páginas usam, vem
     para cá; se uma só usa, fica lá.

   ★★ E A COR CONTINUA CARREGANDO SENTIDO, não enfeite: verde é a marca e
     o que é SEU (lucro, confirmação, avanço); vermelho é o que SAI de
     você (comissão, taxa, imposto, alerta); o resto é grafite.

   ★ A LÍVIA VEM COM `assets/livia-site.js`. Os estilos dela estão aqui e
     o comportamento está lá, e as duas coisas são as mesmas em todas as
     páginas: a conversa é uma só, não uma por página.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   TOKENS
   ──────────────────────────────────────────────────────────────────────
   A regra que reduz a poluição: COR CARREGA SENTIDO, NÃO ENFEITE.
     verde     a marca, e o que é SEU: lucro, confirmação, avanço
     vermelho  o que SAI de você: comissão, taxa, imposto, alerta
     grafite   tudo o mais
   O painel usa verde como cor dominante, então a landing acompanha: a
   pessoa que clica em Testar grátis precisa reconhecer o mesmo produto
   do outro lado do login.
   Essa divisão faz o vermelho significar alguma coisa. No desmonte do
   preço, o que é vermelho é o que o marketplace levou; o que é verde é
   o que sobrou. A cor vira legenda, não decoração.
   As cores dos marketplaces saem da paleta e viram cinza com o nome
   escrito. O logotipo deles já identifica; pintar de laranja e amarelo
   só disputa atenção com o que importa.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#0a0f12;          /* base quase preta da cena */
  --ink-2:#12191d;        /* superfície do painel */
  --ink-3:#1a2429;        /* cartões dentro do painel */
  --linha:#243036;        /* divisórias no escuro */
  --névoa:#8b979e;        /* texto secundário no escuro */
  --branco:#ffffff;
  --papel:#fbfbfc;        /* fundo claro */
  --papel-2:#f2f3f5;
  --borda:#e4e6e9;
  --grafite:#3d474d;
  --grafite-2:#6b767d;

  --vermelho:#e11d1d;
  --vermelho-fundo:#c40d0d;
  --verde:#22b306;
  --verde-claro:#5ee83a;
  --verde-fundo:#136803;

  --curva:cubic-bezier(.16,.84,.36,1);
  --curva-firme:cubic-bezier(.65,0,.35,1);
  --largura:1240px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--papel); color:var(--ink);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--largura);margin:0 auto;padding:0 28px}

/* ── tipografia ──────────────────────────────────────────────────────
   O salto de escala é a metade do impacto. Título gigante com tracking
   negativo forte, corpo pequeno e calmo. Sem tamanhos intermediários
   competindo no meio.                                                  */
.display{
  font-family:'Sora',sans-serif; font-weight:800;
  letter-spacing:-0.042em; line-height:0.96;
}
.mono{
  font-family:'JetBrains Mono',monospace;
  font-variant-numeric:tabular-nums;
}
/* A mono é a voz nativa do assunto: painel operacional fala em código,
   chave de nota e valor. Ela vira o elemento estrutural da página, não
   um detalhe decorativo. */
.etiqueta{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase;
}

/* ── botões ─────────────────────────────────────────────────────────── */
.btn{
  font-family:'Inter',sans-serif; font-weight:600; font-size:15px;
  padding:14px 26px; border-radius:10px; cursor:pointer;
  border:1px solid transparent; display:inline-flex; align-items:center;
  justify-content:center; gap:10px; white-space:nowrap;
  transition:transform .3s var(--curva), background .25s, border-color .25s, box-shadow .3s;
}
.btn svg{width:16px;height:16px;flex:none;transition:transform .3s var(--curva)}
.btn:hover svg{transform:translateX(3px)}
.btn-acao{background:var(--verde);color:#fff}
.btn-acao:hover{background:var(--verde-fundo);transform:translateY(-2px);box-shadow:0 14px 30px rgba(34,179,6,.32)}
.btn-linha{border-color:var(--borda);background:transparent;color:var(--ink)}
.btn-linha:hover{border-color:var(--grafite-2);transform:translateY(-2px)}
.btn-claro{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.btn-claro:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px}

/* ── topo ────────────────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════
   ★★★★★ v33k.3180: O FUNDO FOSCO VIROU O PADRAO, E A HOME E A EXCECAO
   ──────────────────────────────────────────────────────────────────────
   ★★★★★ ELE RELATOU EM 30/10: "na pagina principal esta com um Blur na
     barra, nas paginas novas de recursos nao estao". Medido no navegador,
     nas 14 paginas de recurso: fundo `rgba(0,0,0,0)` e `backdrop-filter`
     NENHUM, **no topo e depois de rolar**. O menu ficava por cima do
     titulo da pagina, ilegivel.

   ★★★★ A CAUSA NAO ERA O CSS, ERA QUEM LIGA A CLASSE. O fundo morava so
     em `header.solto`, e `solto` e posto por JAVASCRIPT no scroll. A home
     tem esse script inline; a calculadora tem o dela; o blog tem o dele.
     **As 14 paginas de recurso carregam so `livia-site.js` e
     `figuras-site.js`, e nenhum dos dois mexe no cabecalho.** Elas nunca
     recebiam a classe, entao nunca tinham fundo.

   ★★★ POR QUE INVERTER EM VEZ DE LIGAR A CLASSE NAS 14. Porque o
     `lider.css` (a calculadora e o blog) ja faz assim: fundo fosco no
     `header` base, e `solto` so acrescenta a borda no scroll. Das 17
     paginas do site, 16 querem fundo sempre; a home e a UNICA que o quer
     transparente, para o cabecalho flutuar sobre o hero. Regra e o que
     vale para a maioria; o resto e excecao, e excecao mora na pagina.
     Ligar a classe nas 14 tambem deixaria o topo delas sem fundo ate a
     pessoa rolar, que e metade do defeito.

   ★★ E ISSO APROXIMA AS DUAS FOLHAS. O site tem duas cascas (esta e o
     `lider.css`), e elas discordavam tambem aqui. Continua pendente
     unifica-las, mas agora o cabecalho se comporta igual nas duas.

   ★ `header.escuro` CONTINUA VENCENDO: ele declara o proprio fundo e vem
     depois, entao a cena escura da home inverte como sempre.
   ══════════════════════════════════════════════════════════════════════ */
header{
  position:fixed; top:0; left:0; right:0; z-index:90; height:74px;
  display:flex; align-items:center;
  background:rgba(251,251,252,.82); backdrop-filter:saturate(180%) blur(16px);
  transition:background .4s var(--curva), border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
header.solto{background:rgba(251,251,252,.82);backdrop-filter:saturate(180%) blur(16px);border-bottom-color:var(--borda)}
/* Dentro da cena escura o cabeçalho inverte, em vez de flutuar branco
   por cima do preto. É o tipo de detalhe que separa caro de barato. */
header.escuro{background:rgba(10,15,18,.72);backdrop-filter:saturate(180%) blur(16px);border-bottom-color:rgba(255,255,255,.08)}
header.escuro .nav a{color:rgba(255,255,255,.72)}
header.escuro .nav a:hover{color:#fff}
header.escuro .marca{filter:brightness(0) invert(1)}
header.escuro .btn-linha{border-color:rgba(255,255,255,.22);color:#fff}
.barra-topo{display:flex;align-items:center;justify-content:space-between;width:100%}
.marca{height:34px;width:auto;transition:filter .4s var(--curva)}
.nav{display:flex;gap:34px}
.nav a{font-size:14px;font-weight:500;color:var(--grafite);transition:color .25s}
.nav a:hover{color:var(--ink)}
.topo-acoes{display:flex;gap:12px;align-items:center}

/* ══════════════════════════════════════════════════════════════════════
   ★★★★★ O MENU NO CELULAR  (v33k.3175)
   ──────────────────────────────────────────────────────────────────────
   ★★★★★ O QUE ESTAVA ERRADO, E ERA O BASTANTE PARA A PÁGINA DE RECURSOS
     NÃO EXISTIR NO CELULAR: o `index.html` tinha `.nav{display:none}`
     dentro de `@media (max-width:1040px)` e NÃO tinha nada no lugar.
     Então, em qualquer aparelho de até 1040px, o menu inteiro
     desaparecia: Recursos, Integrações, Planos, Calculadora e Blog. E
     como "Recursos" é o ÚNICO caminho da home para `/recursos/`, a
     pasta de 14 páginas que a 3163 criou ficou inalcançável no celular.
     As páginas estavam no ar e certas; não havia porta.

   ★★★★ E AS 15 PÁGINAS DISCORDAVAM ENTRE SI, que é o defeito que o
     comentário do próprio topo avisa: a home escondia o menu no
     celular, e as 14 páginas de recurso (que só leem este arquivo, onde
     `.nav` era `display:flex` e ponto) mostravam os cinco links
     espremendo a barra de 74px num aparelho de 390px. Um menu, dois
     comportamentos, nenhum deles bom.

   ★★★ POR QUE A CORREÇÃO MORA AQUI, E NÃO NA PÁGINA: este arquivo é o
     único que as 15 páginas compartilham. O botão entra no `topo()` do
     `gerar-paginas-site.js` e no `index.html`, o resto é daqui, e por
     isso não existe a versão "da home" e a versão "das outras".

   ★★ E O PAINEL SE ABRE NO LUGAR DO MENU, não em cima da página: ele
     desce logo abaixo da barra, com os mesmos 74px de altura de
     cabeçalho como referência, e empurra nada. Página que pula quando o
     menu abre faz a pessoa perder onde estava lendo.

   ★ O "ENTRAR" VAI PARA DENTRO DO PAINEL. Abaixo de 680px ele sai da
     barra (`.topo-acoes .btn-linha{display:none}`, que continua valendo
     e é certo: dois botões não cabem ali). Sem isto, quem está no
     celular não teria nenhum caminho para o login.
   ══════════════════════════════════════════════════════════════════════ */

/* O botão. Três traços que viram X, e nada de imagem: é menos byte que
   o alt do ícone e acompanha a cor do cabeçalho de graça. */
.menu-btn{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; margin-left:4px;
  border:1px solid var(--borda); border-radius:12px;
  background:var(--branco); cursor:pointer;
  transition:border-color .25s, background .25s;
}
.menu-btn:hover{border-color:var(--grafite-2)}
.menu-btn i{
  display:block; position:relative;
  width:18px; height:1.8px; border-radius:2px;
  background:var(--ink); transition:transform .32s var(--curva), opacity .2s;
}
.menu-btn i::before,.menu-btn i::after{
  content:''; position:absolute; left:0;
  width:18px; height:1.8px; border-radius:2px; background:var(--ink);
  transition:transform .32s var(--curva);
}
.menu-btn i::before{top:-6px}
.menu-btn i::after{top:6px}
/* Aberto: o traço do meio sai e os outros dois cruzam no lugar dele. */
header.menu-aberto .menu-btn i{background:transparent}
header.menu-aberto .menu-btn i::before{transform:translateY(6px) rotate(45deg)}
header.menu-aberto .menu-btn i::after{transform:translateY(-6px) rotate(-45deg)}

/* Dentro da cena escura o botão inverte junto com o resto da barra. */
header.escuro .menu-btn{background:transparent;border-color:rgba(255,255,255,.22)}
header.escuro .menu-btn i,
header.escuro .menu-btn i::before,
header.escuro .menu-btn i::after{background:#fff}
header.escuro.menu-aberto .menu-btn i{background:transparent}

/* O que só existe no painel: fica fora da barra no desktop. */
.nav .nav-so-menu{display:none}

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

  /* ★ `visibility` junto com a opacidade, e não `display:none`: o painel
     precisa ser focável só quando está aberto, e display não transita. */
  .nav{
    position:absolute; top:74px; left:0; right:0;
    flex-direction:column; gap:0;
    padding:10px 20px 16px;
    /* ★ SÓLIDO, e não translúcido como a barra. A barra flutua sobre a
       página de propósito; o painel do menu, não: a 0,97 de opacidade o
       texto da cena escura aparecia POR TRÁS dos itens, e menu com
       fantasma atrás é o tipo de coisa que faz a pessoa achar que
       clicou errado. De quebra sai um `backdrop-filter` do caminho, que
       no celular é o filtro mais caro de desenhar. */
    background:var(--papel);
    border-bottom:1px solid var(--borda);
    box-shadow:0 20px 40px rgba(10,15,18,.1);
    opacity:0; visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .26s var(--curva), transform .26s var(--curva), visibility .26s;
  }
  header.menu-aberto .nav{opacity:1;visibility:visible;transform:none}

  /* Alvo de dedo de verdade: 48px de altura, linha divisória discreta e
     a largura inteira clicável, não só o texto. */
  .nav a{
    display:block; width:100%;
    padding:14px 2px; font-size:16px; font-weight:500;
    color:var(--grafite); border-bottom:1px solid var(--borda);
  }
  .nav a:last-child{border-bottom:none}
  .nav a:active{color:var(--verde)}

  /* ★ O painel é SEMPRE claro, mesmo com o cabeçalho invertido na cena
     escura: ele é uma folha que desce por cima da página, e folha branca
     sobre fundo preto é o que a pessoa espera de um menu aberto. Sem
     isto, `header.escuro .nav a` pintava os links de branco sobre o
     fundo claro do painel e o menu ficava ilegível. */
  header.escuro .nav{
    background:var(--papel);
    border-bottom-color:var(--borda);
  }
  header.escuro .nav a{color:var(--grafite)}

  .nav .nav-so-menu{display:block}
}

@media (max-width:680px){
  .nav{padding:8px 16px 14px}
}

@media (prefers-reduced-motion:reduce){
  .nav{transition:none}
  .menu-btn i,.menu-btn i::before,.menu-btn i::after{transition:none}
}
/* ══════════════════════════════════════════════════════════════════════
   RODAPÉ
   ══════════════════════════════════════════════════════════════════════ */
footer{ background:var(--ink); color:var(--névoa); padding:70px 0 30px }
.rp-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.09);
}
.rp-marca{ display:flex; align-items:center; gap:11px; margin-bottom:14px }
.rp-marca img{ height:30px; width:auto }
.rp-marca span{ font-family:'Sora',sans-serif; font-weight:800; font-size:20px; color:#fff; letter-spacing:-.03em }
.rp-marca span i{ font-style:normal; color:var(--verde-claro) }
.rp-sobre{ font-size:14px; line-height:1.68; max-width:38ch }
.rp-col h4{
  color:#fff; font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px; font-weight:600;
}
.rp-col a{ display:block; font-size:14px; padding:6px 0; transition:color .22s }
.rp-col a:hover{ color:#fff }
.rp-pe{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between;
  padding-top:26px; font-size:12.8px; color:rgba(255,255,255,.42);
}
.rp-legal{ display:flex; gap:20px }
.rp-legal a:hover{ color:#fff }

/* ★ SO O RODAPE AQUI. Estas media querys vinham com regras de `.planos-grid`
   e `.dv-grid` junto, porque moravam na mesma vizinhanca no arquivo unico.
   Trazidas para ca, elas passariam a ser lidas ANTES do <style> da pagina e
   o navegador obedeceria a regra de base, nao a do celular: a tabela de
   planos voltava a tres colunas num aparelho de 390px e a pagina ganhava
   rolagem lateral. Regra de PAGINA fica na pagina, mesmo quando o vizinho
   dela e compartilhado. */
@media (max-width:1040px){
  .rp-grid{ grid-template-columns:1fr 1fr; gap:30px }
}
@media (max-width:680px){
  .rp-grid{ grid-template-columns:1fr }
}
/* ══════════════════════════════════════════════════════════════════════
   O CAMPO DE PERGUNTA, E A LÍVIA ATRÁS DELE  (v33k.3161)
   ──────────────────────────────────────────────────────────────────────
   Pedido dele em 29/10: o topo da home ganha um campo onde a pessoa
   pergunta e uma IA vendedora responde.

   ★ POR QUE ELE MORA DENTRO DO HERO, e não numa faixa própria em cima.
     Faixa própria empurraria o h1 para baixo da dobra, e o h1 é o que
     explica o produto para quem não vai digitar nada. A maioria não
     digita. O campo entra DEPOIS da tese e ANTES dos botões, no lugar
     onde a pessoa já estava decidindo o que fazer.

   ★ E A CONVERSA ABRE NUMA FOLHA, não dentro do hero. Crescer a coluna
     do hero empurraria a página inteira a cada resposta, com a pessoa
     lendo e o chão se mexendo. A folha é a mesma no computador e no
     celular: um componente, um comportamento.
   ══════════════════════════════════════════════════════════════════════ */
/* Rotulo que so o leitor de tela ve. O campo precisa de um, e um rotulo
   desenhado roubaria a linha do placeholder, que e onde mora a pergunta. */
.sr-so{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── a secao do convite ──────────────────────────────────────────────── */
.duvida{
  padding:140px 0 84px; text-align:center; position:relative; overflow:hidden;
  background:
    radial-gradient(62% 74% at 50% 40%, rgba(94,232,58,.22), transparent 70%),
    linear-gradient(180deg,#f7fcf5 0%,#e9f7e4 44%,var(--papel) 100%);
}
.duvida-tit{
  font-family:'Sora',sans-serif; font-weight:500;
  font-size:clamp(29px,4.4vw,54px); line-height:1.16; letter-spacing:-.034em;
  color:var(--verde-fundo); max-width:21ch; margin:0 auto;
}
.perg{max-width:700px;margin:42px auto 0}
.perg-campo{
  display:flex; align-items:center; gap:14px;
  background:var(--branco); border:1px solid transparent; border-radius:999px;
  padding:8px 8px 8px 26px;
  box-shadow:0 20px 50px rgba(19,104,3,.14), 0 2px 6px rgba(19,104,3,.06);
  transition:box-shadow .3s var(--curva), transform .3s var(--curva);
}
.perg-campo:focus-within{
  box-shadow:0 24px 60px rgba(19,104,3,.2), 0 0 0 2px var(--verde);
  transform:translateY(-1px);
}
.perg-campo > svg{width:22px;height:22px;color:var(--grafite-2);flex:none}
.perg-campo input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-family:'Inter',sans-serif; font-size:17.5px; color:var(--ink);
  padding:19px 0;
}
.perg-campo input::placeholder{color:var(--grafite-2)}
/* O botao so fica solido quando ha o que enviar. Verde cheio numa caixa
   vazia pede um clique que nao leva a lugar nenhum. */
.perg-enviar{
  flex:none; width:48px; height:48px; border:0; border-radius:50%;
  background:var(--papel-2); color:var(--grafite-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s var(--curva), color .25s var(--curva);
}
.perg-enviar svg{width:18px;height:18px}
.perg-enviar.pronto{background:var(--verde);color:#fff}
.perg-enviar.pronto:hover{background:var(--verde-fundo)}
.perg-nota{
  margin-top:16px; font-size:13px; color:var(--grafite-2);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.perg-nota i{
  display:block; width:7px; height:7px; border-radius:50%;
  background:var(--verde); flex:none;
}
.perg-linha{
  margin-top:22px; display:flex; justify-content:center; align-items:center;
  gap:10px; flex-wrap:wrap; font-size:13.5px; color:var(--borda);
}
.perg-sug{
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:500;
  color:var(--grafite); background:none; border:0; padding:0; cursor:pointer;
  border-bottom:1px solid transparent; transition:color .2s var(--curva), border-color .2s var(--curva);
}
.perg-sug:hover{color:var(--verde-fundo);border-bottom-color:var(--verde)}
@media (max-width:680px){
  .duvida{padding:118px 0 62px}
  .perg-campo{padding:7px 7px 7px 20px;gap:11px}
  .perg-campo input{font-size:16px;padding:16px 0}
  .perg-campo > svg{width:19px;height:19px}
  .perg-enviar{width:44px;height:44px}
  .perg-linha{gap:8px;font-size:13px}
}

/* ── a folha da conversa ─────────────────────────────────────────────── */
.lcc-veu{
  position:fixed; inset:0; z-index:9000; display:none;
  background:rgba(10,15,18,.52); backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  align-items:center; justify-content:center; padding:24px;
}
.lcc-veu.aberta{display:flex}
.lcc{
  width:100%; max-width:680px; height:min(82vh,760px);
  background:var(--branco); border-radius:22px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 40px 90px rgba(10,15,18,.34);
}
.lcc-topo{
  display:flex; align-items:center; gap:13px;
  padding:17px 20px; border-bottom:1px solid var(--borda); flex:none;
}
.lcc-ava{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:var(--verde-fundo); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:700; font-size:15px;
}
.lcc-quem{flex:1;min-width:0}
.lcc-nome{font-family:'Sora',sans-serif;font-weight:700;font-size:15px;color:var(--ink)}
.lcc-sub{font-size:12px;color:var(--grafite-2);margin-top:1px}
.lcc-fechar{
  flex:none; width:34px; height:34px; border:0; border-radius:10px;
  background:var(--papel-2); color:var(--grafite); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lcc-fechar:hover{background:var(--borda)}
.lcc-fechar svg{width:16px;height:16px}
.lcc-fio{flex:1;overflow-y:auto;padding:22px 20px;display:flex;flex-direction:column;gap:16px}
.lcc-msg{max-width:84%;font-size:14.5px;line-height:1.62}
.lcc-msg.de-quem{
  align-self:flex-end; background:var(--verde-fundo); color:#fff;
  padding:11px 15px; border-radius:16px 16px 4px 16px;
}
.lcc-msg.dela{align-self:flex-start;color:var(--ink)}
.lcc-msg.dela b{font-weight:700}
.lcc-msg.dela ul{margin:8px 0 8px 18px;display:block}
.lcc-msg.dela li{margin:3px 0}
.lcc-msg.dela p{margin:0 0 9px}
.lcc-msg.dela p:last-child{margin-bottom:0}
.lcc-msg.dela a{color:var(--verde-fundo);font-weight:600}
.lcc-pensando{align-self:flex-start;display:flex;gap:5px;padding:6px 0}
.lcc-pensando i{
  display:block; width:7px; height:7px; border-radius:50%;
  background:var(--grafite-2); opacity:.4; animation:lccp 1.1s infinite;
}
.lcc-pensando i:nth-child(2){animation-delay:.16s}
.lcc-pensando i:nth-child(3){animation-delay:.32s}
@keyframes lccp{0%,70%,100%{opacity:.25;transform:translateY(0)}35%{opacity:.9;transform:translateY(-3px)}}
.lcc-pe{padding:14px 20px 18px;border-top:1px solid var(--borda);flex:none}
.lcc-caixa{
  display:flex; align-items:center; gap:10px;
  background:var(--papel); border:1px solid var(--borda); border-radius:14px;
  padding:5px 5px 5px 15px;
}
.lcc-caixa:focus-within{border-color:var(--verde)}
.lcc-caixa input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink); padding:11px 0;
}
.lcc-caixa button{
  flex:none; width:38px; height:38px; border:0; border-radius:11px;
  background:var(--verde); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lcc-caixa button:hover{background:var(--verde-fundo)}
.lcc-caixa button svg{width:16px;height:16px}
.lcc-rodape{
  margin-top:11px; font-size:11.5px; color:var(--grafite-2);
  text-align:center; line-height:1.5;
}
.lcc-rodape a{color:var(--verde-fundo);font-weight:600}
@media (max-width:680px){
  .lcc-veu{padding:0}
  .lcc{max-width:none;height:100%;border-radius:0}
}
/* ══════════════════════════════════════════════════════════════════════
   AS PÁGINAS DE RECURSO  (v33k.3163)
   ──────────────────────────────────────────────────────────────────────
   Uma página por funcionalidade, para quem procura aquilo no Google ou
   pergunta a uma IA. Cada uma responde UMA pergunta, inteira, com o que
   o sistema faz de verdade.

   ★ POR QUE ELAS SÃO SÓBRIAS E NÃO SÃO UMA SEGUNDA HOME. Quem chega aqui
     já sabe o que quer: procurou "nota fiscal automática marketplace".
     Cena que rola, número que anima e parágrafo de efeito atrapalham
     essa pessoa. O que ela quer é o conteúdo, e ele é longo.
   ══════════════════════════════════════════════════════════════════════ */
.pg{padding:126px 0 0}
.pg-cab{max-width:760px}
.pg-trilha{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:12.5px; color:var(--grafite-2); margin-bottom:22px;
}
.pg-trilha a{color:var(--grafite-2)}
.pg-trilha a:hover{color:var(--verde-fundo)}
.pg h1{
  font-family:'Sora',sans-serif; font-weight:700;
  font-size:clamp(34px,5vw,58px); line-height:1.08; letter-spacing:-.04em;
  color:var(--ink); margin:14px 0 22px;
}
.pg-tese{font-size:19px;color:var(--grafite);line-height:1.62;max-width:60ch}
.pg-acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* ── o corpo longo ───────────────────────────────────────────────────── */
.pg-corpo{padding:72px 0 0;max-width:740px}
.pg-corpo h2{
  font-family:'Sora',sans-serif; font-weight:700;
  font-size:clamp(23px,3vw,31px); line-height:1.2; letter-spacing:-.03em;
  color:var(--ink); margin:56px 0 16px;
}
.pg-corpo h2:first-child{margin-top:0}
.pg-corpo h3{
  font-family:'Sora',sans-serif; font-weight:700; font-size:17px;
  color:var(--ink); margin:30px 0 9px; letter-spacing:-.02em;
}
.pg-corpo p{font-size:16.5px;line-height:1.72;color:var(--grafite);margin:0 0 15px}
.pg-corpo p b{color:var(--ink);font-weight:600}
.pg-corpo ul{margin:0 0 15px;padding-left:0;list-style:none}
.pg-corpo ul li{
  position:relative; padding-left:24px; margin:0 0 9px;
  font-size:16.5px; line-height:1.68; color:var(--grafite);
}
.pg-corpo ul li::before{
  content:""; position:absolute; left:4px; top:11px;
  width:7px; height:7px; border-radius:50%; background:var(--verde);
}
.pg-corpo ul li b{color:var(--ink);font-weight:600}
.pg-corpo a{color:var(--verde-fundo);font-weight:600;border-bottom:1px solid rgba(19,104,3,.28)}
.pg-corpo a:hover{border-bottom-color:var(--verde)}

/* ── a imagem lateral, e o movimento dela ────────────────────────────
   ★★★ ELA E ENFEITE, E ENFEITE NAO SEGURA A PAGINA. Fica fora do fluxo
     (`position:absolute`), nao recebe clique (`pointer-events:none`) e
     some abaixo de 1280px, onde nao ha margem para ela existir sem
     empurrar o texto. Espaco lateral vazio nao aparece: o
     `figuras-site.js` so acende os que tem imagem.
   ★★ O PNG VEM SEM FUNDO, 600x1000. A largura aqui e menor de proposito:
     a imagem chega grande e e desenhada pequena, e nao o contrario, que
     e o que deixa borda serrilhada.
   ★ TODO MOVIMENTO E SO `transform`, nunca `top`/`left`: transform corre
     na GPU e nao refaz o layout. Animar posicao numa pagina longa e o
     caminho mais curto para rolagem travada no celular. */
.lat{
  /* Ancorada ONDE FOI DECLARADA e sem ocupar altura: `height:0` faz o
     elemento marcar o ponto do texto sem empurrar nada para baixo, e a
     imagem sai dali para o lado, absoluta. Sem isto ela entraria no
     fluxo e abriria um buraco no meio da leitura. */
  position:relative; height:0; z-index:1;
}
.lat img{
  position:absolute; top:-70px;
  /* ★★ A LARGURA E ESCOLHIDA NO PAINEL, imagem a imagem (pedido dele em
     29/10: "as vezes posso deixar um pouco maior ou menor"). Ela chega
     como `--lat-w`, e o `min()` continua sendo quem manda: por mais que
     ele aumente, a imagem nunca passa de 24% da tela, que e o que impede
     dela encostar na coluna de texto num monitor mais estreito.
     ★ E A PROPORCAO E LIVRE: `height:auto` aceita qualquer retrato ou
     quadrado. O `max-height` existe so para a foto muito alta nao
     atravessar a secao inteira; quando ele entra, a largura encolhe
     junto e a imagem nao deforma. */
  width:min(var(--lat-w, 310px), 24vw); height:auto; max-height:78vh;
  opacity:0; transition:opacity .7s var(--curva);
  pointer-events:none; user-select:none;
}
.lat.acesa img{opacity:1}
/* Fora da coluna de texto, dos dois lados. Nunca por cima do texto:
   PNG recortado atras da linha deixa a leitura impossivel, e ai o
   enfeite custa justamente o que a pagina veio fazer. */
.lat-esquerda img{right:calc(100% + 22px)}
.lat-direita  img{left:calc(100% + 22px)}
/* Abaixo disto nao sobra margem ao lado da coluna, e enfeite nao pode
   apertar o texto. */
@media (max-width:1340px){ .lat{display:none} }

/* Os movimentos. Deslocamento pequeno de proposito: imagem que anda
   muito disputa com o texto em vez de acompanhar. */
@keyframes lat-flutuar{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-12px,0)}}
@keyframes lat-vertical{0%,100%{transform:translate3d(0,-16px,0)}50%{transform:translate3d(0,16px,0)}}
@keyframes lat-horizontal{0%,100%{transform:translate3d(-13px,0,0)}50%{transform:translate3d(13px,0,0)}}
@keyframes lat-circular{
  0%{transform:translate3d(0,-14px,0)}
  25%{transform:translate3d(14px,0,0)}
  50%{transform:translate3d(0,14px,0)}
  75%{transform:translate3d(-14px,0,0)}
  100%{transform:translate3d(0,-14px,0)}
}
/* O aleatorio nao e sorteado: e uma volta longa e irregular, que nao
   repete o desenho tao cedo aos olhos de quem esta lendo. */
@keyframes lat-aleatorio{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  17%{transform:translate3d(11px,-9px,0) rotate(.5deg)}
  33%{transform:translate3d(-7px,-15px,0) rotate(-.4deg)}
  51%{transform:translate3d(-14px,6px,0) rotate(.3deg)}
  68%{transform:translate3d(6px,13px,0) rotate(-.5deg)}
  84%{transform:translate3d(13px,3px,0) rotate(.2deg)}
  100%{transform:translate3d(0,0,0) rotate(0deg)}
}
.lat-mov-flutuar    img{animation-name:lat-flutuar}
.lat-mov-vertical   img{animation-name:lat-vertical}
.lat-mov-horizontal img{animation-name:lat-horizontal}
.lat-mov-circular   img{animation-name:lat-circular}
.lat-mov-aleatorio  img{animation-name:lat-aleatorio}
.lat[class*="lat-mov-"] img{
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-duration:9s;
  will-change:transform;
}
.lat-vel-lenta  img{animation-duration:15s}
.lat-vel-media  img{animation-duration:9s}
.lat-vel-rapida img{animation-duration:5s}
.lat-mov-nenhum img{animation:none}

/* A coluna de texto precisa ser a referencia da imagem lateral, e ela
   precisa ficar ACIMA: PNG recortado que passa por cima da linha deixa
   o texto ilegivel, e ai o enfeite custa a leitura. */
.pg-corpo{position:relative}
/* ★ O TEXTO FICA ACIMA DO ENFEITE, sempre. E `.lat` MANTEM o proprio
   `position` e `z-index`: a regra generica abaixo chegaria depois e
   venceria a dela por ordem, com a mesma forca, e a imagem voltaria
   para dentro do fluxo. Foi o que aconteceu na primeira montagem. */
.pg-corpo > *:not(.lat){position:relative;z-index:2}

/* ── a tira de etapas, que várias páginas usam ───────────────────────── */
.etapas{
  display:grid; gap:1px; background:var(--borda);
  border:1px solid var(--borda); border-radius:14px; overflow:hidden;
  margin:22px 0 26px;
}
.etapa-l{background:var(--branco);padding:16px 18px;display:flex;gap:15px;align-items:flex-start}
.etapa-n{
  flex:none; width:26px; height:26px; border-radius:8px;
  background:var(--papel-2); color:var(--grafite);
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.etapa-t{font-weight:600;color:var(--ink);font-size:15.5px}
.etapa-d{font-size:14.5px;color:var(--grafite-2);line-height:1.6;margin-top:3px}

/* ── a figura, e o espaco dela ───────────────────────────────────────
   ★★ O ESPACO E RESERVADO MESMO SEM A IMAGEM. Enquanto o print nao
     chega, o quadro fica no lugar com o pedido escrito dentro, na
     proporcao final. Assim a pagina ja nasce com o ritmo que vai ter, e
     ninguem descobre no dia da imagem que o texto nao cabia mais.
   ★ A proporcao e segurada por `aspect-ratio`, e nao por altura fixa:
     altura fixa com imagem de outro tamanho corta ou estica. */
.fig{margin:30px 0 32px}
/* ★ ESPACO AINDA SEM IMAGEM: existe no HTML, para a imagem subida pelo
   painel ter onde entrar sem gerar a pagina de novo, mas nao aparece.
   Quadro de pedido e coisa de quem PODE resolver, e quem visita o site
   nao pode: para essa pessoa ele so diz que a pagina esta pela metade. */
.fig-sem{display:none}
.fig-quadro{
  border:1px solid var(--borda); border-radius:14px; overflow:hidden;
  background:var(--papel-2); aspect-ratio:16/10;
}
.fig-quadro img{display:block;width:100%;height:100%;object-fit:cover}
.fig-vazia{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; padding:24px; text-align:center;
  border:1px dashed var(--borda); border-radius:14px; background:var(--papel-2);
  aspect-ratio:16/10;
}
.fig-vazia svg{width:26px;height:26px;color:var(--grafite-2);opacity:.6}
.fig-vazia b{font-family:'Sora',sans-serif;font-size:14px;color:var(--grafite);font-weight:600}
.fig-vazia span{font-size:12.5px;color:var(--grafite-2);max-width:46ch;line-height:1.55}
.fig-legenda{
  margin:11px 2px 0; font-size:13.5px; color:var(--grafite-2); line-height:1.6;
}
.fig-celular .fig-quadro,.fig-celular .fig-vazia{aspect-ratio:9/16;max-width:300px;margin:0 auto}

/* ── o quadro de destaque ────────────────────────────────────────────── */
.nota-lado{
  background:var(--papel-2); border-left:3px solid var(--verde);
  border-radius:0 12px 12px 0; padding:18px 20px; margin:24px 0;
}
.nota-lado p{margin:0;font-size:15.5px;line-height:1.66}
.nota-lado p + p{margin-top:10px}

/* ── as perguntas do fim ─────────────────────────────────────────────── */
.faq{margin-top:56px}
.faq-i{border-top:1px solid var(--borda);padding:20px 0}
.faq-i:last-child{border-bottom:1px solid var(--borda)}
.faq-p{
  font-family:'Sora',sans-serif; font-weight:700; font-size:16.5px;
  color:var(--ink); margin:0 0 8px; letter-spacing:-.02em;
}
.faq-r{font-size:16px;line-height:1.7;color:var(--grafite);margin:0}

/* ── a faixa de "veja também" ────────────────────────────────────────── */
.vizinhas{padding:60px 0 0}
.vizinhas h2{
  font-family:'Sora',sans-serif; font-weight:700; font-size:20px;
  color:var(--ink); margin:0 0 20px; letter-spacing:-.02em;
}
.viz-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.viz{
  display:block; background:var(--branco); border:1px solid var(--borda);
  border-radius:14px; padding:20px; transition:border-color .25s var(--curva), transform .25s var(--curva);
}
.viz:hover{border-color:var(--verde);transform:translateY(-2px)}
.viz-t{font-family:'Sora',sans-serif;font-weight:700;font-size:15.5px;color:var(--ink);letter-spacing:-.02em}
.viz-d{font-size:13.5px;color:var(--grafite-2);line-height:1.58;margin-top:6px}

/* ── o convite do fim de página ──────────────────────────────────────── */
.duvida.fecho{padding:72px 0 78px;margin-top:70px}
.duvida.fecho .duvida-tit{font-size:clamp(25px,3.2vw,36px);max-width:24ch}

/* ── a lista de recursos (a página-índice) ───────────────────────────── */
.rec-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.rec-grupo{margin-top:56px}
.rec-grupo h2{
  font-family:'Sora',sans-serif; font-weight:700; font-size:21px;
  color:var(--ink); margin:0; letter-spacing:-.025em;
}
.rec-grupo p{font-size:15px;color:var(--grafite-2);margin:7px 0 0;max-width:62ch;line-height:1.6}

@media (max-width:980px){
  .viz-grade,.rec-grade{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .pg{padding:104px 0 0}
  .pg-corpo{padding:52px 0 0}
  .viz-grade,.rec-grade{grid-template-columns:1fr}
  .duvida.fecho{padding:56px 0 60px;margin-top:52px}
}

/* ── sem movimento ───────────────────────────────────────────────────────
   ★ QUEM PEDE QUE A TELA NAO SE MEXA ESTA PEDINDO POR UM MOTIVO: enjoo,
     vertigem, enxaqueca. A imagem lateral e enfeite, entao ela para por
     inteiro, e nao "mais devagar". O navegador diz isso sozinho, e nao
     custa nada obedecer. */
@media (prefers-reduced-motion:reduce){
  .lat img{animation:none!important}
  .lat{transition:none!important}
}