/* Subconjunto `latin` apenas: cinco pesos de Plus Jakarta Sans e dois de
   JetBrains Mono, sete arquivos. `latin-ext` exigiria `unicode-range` por face e
   dobraria a conta de peso sem cobrir nenhum dos três idiomas do site.
   Licença e origem em estatico/fontes/LICENSE-OFL.txt. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/estatico/fontes/plus-jakarta-sans-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/estatico/fontes/plus-jakarta-sans-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/estatico/fontes/plus-jakarta-sans-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/estatico/fontes/plus-jakarta-sans-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('/estatico/fontes/plus-jakarta-sans-800.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/estatico/fontes/jetbrains-mono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/estatico/fontes/jetbrains-mono-500.woff2') format('woff2');
}

/* Peças que o site inteiro divide: o seletor de idioma, o rótulo pequeno, o rodapé e o
   modal de "falar com a equipe". Entram nos dois pacotes de CSS — o da página principal
   e das páginas legais (antes de `site.css`) e o da landing de planilha (antes de
   `planilha.css`) —, e por isso não dependem de nada que só um dos dois declara. */

:root {
  --site-fundo-modal: rgba(4, 12, 16, .66);
  /* O fundo do quadro do formulário embutido: ele se desenha sem fundo e
     segue o tema do SISTEMA de quem responde, então quem precisa combinar é o
     anfitrião. Os dois valores são o `--canvas` da ui-kit, claro e escuro. */
  --site-quadro-claro: #eef1ee;
  --site-quadro-escuro: #0b1b23;
}

/* ── Seletor de idioma ───────────────────────────────────────────────────────
   Pílula com globo, sigla e chevron; o menu abre por `details[open]`. Sem
   script não há scrim: fecha clicando de novo na pílula. */
.lp-idioma {
  position: relative;
}

.lp-idioma > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--h-md);
  padding: 0 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.lp-idioma > summary::-webkit-details-marker {
  display: none;
}

.lp-idioma > summary:hover {
  background: var(--inset);
}

.lp-idioma__menu {
  position: absolute;
  top: 46px;
  right: 0;
  z-index: var(--z-popover);
  width: 196px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--sh3);
}

.lp-idioma__rotulo {
  padding: 8px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.lp-idioma__menu > a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: var(--h-md);
  padding: 0 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  transition: background var(--t-fast) var(--ease);
}

.lp-idioma__menu > a > span {
  flex: 1;
}

.lp-idioma__menu > a:hover {
  background: var(--inset);
  color: var(--text2);
}

.lp-idioma__menu > a[aria-current] {
  color: var(--brand-green);
  font-weight: 600;
}

.lp-rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--muted);
}

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
.lp-rodape {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  background: var(--panel);
}

.lp-foot {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 26px 40px;
  display: grid;
  /* As quatro trilhas do protótipo, escritas uma a uma: `repeat(auto-fit, …)`
     não pode dividir a lista com trilha flexível (`1.4fr`), e o navegador
     descarta a declaração inteira — o rodapé caía em coluna única no desktop. */
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
}

.lp-foot__coluna {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-rodape__barra {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 26px 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
}

/* ── O modal de "falar com a equipe" ─────────────────────────────────────────
   `<dialog>` nativo: o navegador cuida da modalidade, do foco e do Esc. Sem
   script — ou em navegador sem `showModal` — ele nunca abre, e o gatilho segue
   sendo o link para o e-mail que está escrito nele. */
.lp-contato {
  /* O `<dialog>` herda `content-box`: sem isto, a soma com padding e borda passa
     da largura da tela no celular e o modal sai pela direita. */
  box-sizing: border-box;
  width: min(560px, calc(100vw - 32px));
  /* `dvh` acompanha as barras do navegador do celular; com `vh`, que conta a
     tela sem elas, o topo do modal — e o botão de fechar — ia para baixo da
     barra de endereço. O `vh` fica para quem não tem `dvh`. */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--sh3);
  color: var(--text);
  /* Quem rola é o corpo, não a caixa: o topo, com o título e o fechar, fica
     parado. Precisa estar escrito — o navegador dá `overflow: auto` a todo
     `<dialog>` modal. */
  overflow: hidden;
}

/* Só aberto: `display` no `<dialog>` fechado vence o `display: none` do
   navegador, e o modal ficaria sempre à mostra. */
.lp-contato[open] {
  display: flex;
  flex-direction: column;
}

.lp-contato::backdrop {
  background: var(--site-fundo-modal);
  backdrop-filter: blur(4px);
}

.lp-contato__topo {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.lp-contato__corpo {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}

.lp-contato__titulo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 6px;
}

.lp-contato__texto {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text3);
  margin: 0;
  text-wrap: pretty;
}

.lp-contato__fechar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.lp-contato__fechar:hover {
  color: var(--text);
  border-color: var(--border2);
}

/* A altura mínima é o que o código de incorporação pede; o `embed.js` do site
   de resposta a substitui pela altura real do formulário. */
.lp-contato__quadro {
  display: block;
  width: 100%;
  min-height: 520px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--site-quadro-claro);
}

/* O formulário dentro do quadro não segue o tema da página em volta — escura no
   site, clara na landing de planilha —, e sim o `prefers-color-scheme` de quem
   responde. Se o fundo aqui não seguir junto, o texto dele fica ilegível numa
   das duas metades. */
@media (prefers-color-scheme: dark) {
  .lp-contato__quadro {
    background: var(--site-quadro-escuro);
  }
}

/* ── Aviso de cookies ─────────────────────────────────────────────────────────
   Fixo embaixo, porque o cabeçalho fixo no topo cobriria uma faixa no fluxo, e com no
   máximo um terço da tela. Nasce `hidden`, e o `display` daqui venceria o do navegador:
   por isso a regra do `[hidden]` está escrita. */
.lp-cookies {
  position: fixed;
  z-index: var(--z-popover);
  left: 20px;
  right: 20px;
  bottom: 20px;
  box-sizing: border-box;
  max-width: 760px;
  max-height: 33vh;
  overflow-y: auto;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--sh3);
  color: var(--text);
  animation: lp-cookies-entra var(--t-fast) var(--ease);
}

.lp-cookies[hidden],
.lp-cookies__gatilho[hidden] {
  display: none;
}

.lp-cookies[data-saindo] {
  animation: lp-cookies-sai var(--t-fast) var(--ease) forwards;
}

@keyframes lp-cookies-entra {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}

@keyframes lp-cookies-sai {
  to {
    opacity: 0;
    transform: translateY(26px);
  }
}

.lp-cookies__texto {
  flex: 1 1 320px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
}

.lp-cookies__texto a,
.lp-cookies__politica {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Os três botões dividem a linha por igual: recusar não pode parecer menor que
   aceitar. */
.lp-cookies__acoes {
  display: flex;
  flex: 1 1 280px;
  flex-wrap: wrap;
  gap: 8px;
}

.lp-cookies__acao {
  flex: 1 1 0;
}

/* O painel é o modal de contato com as duas categorias no corpo. */
.lp-cookies__categoria {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.lp-cookies__caixa {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand-green);
}

.lp-cookies__nome {
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.lp-cookies__caixa:disabled + .lp-cookies__nome {
  cursor: default;
}

.lp-cookies__descricao {
  grid-column: 2;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text3);
}

.lp-cookies__fim {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.lp-cookies__politica {
  font-size: 13px;
}

/* No rodapé, o gatilho é um botão com cara dos links vizinhos. */
.lp-cookies__gatilho {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .lp-cookies,
  .lp-cookies[data-saindo] {
    animation: none;
  }
}

@media (max-width: 600px) {
  .lp-cookies {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px 16px;
  }
}

@media (max-width: 900px) {
  .lp-foot { grid-template-columns: 1fr; }
  .lp-rodape > .lp-pad { padding-left: 20px; padding-right: 20px; }
}

/* Estilo do site institucional.

   Tokens, marca e botões vêm do Design System, carregado à parte (`ds.css`).
   Aqui ficam só a casca da página, as animações, os pontos de quebra e as duas
   peças que o Design System não tem: a variante pequena de botão e o seletor de
   idioma. */

/* Cores da tela escura e dos acentos ilustrativos dos painéis de exemplo, com
   nome e num lugar só — nunca espalhadas na marcação. As que o Design System já
   nomeia apontam para o token: copiar o valor deixaria o site com a cor velha
   quando o DS mudar. Só as quatro de baixo não existem lá. */
:root {
  --site-fundo: var(--canvas);
  --site-fundo-2: var(--tint-blue);
  --site-brilho-verde: var(--brand-green);
  --site-brilho-teal: var(--c-teal);
  --site-acento-azul: var(--c-blue);
  --site-acento-roxo: var(--c-purple);
  --site-acento-rosa: var(--c-red);

  --site-borda-viva: #1f4a46;
  --site-borda-lilas: #2f2a58;
  --site-borda-ambar: #4a3a16;
  --site-verde-suave: #6ee7b7;
  --site-acento-ambar: #fbbf24;
  --site-acento-lilas: #c4b5fd;
  --site-acento-azul-claro: #93c5fd;
  --site-foco-verde: rgba(16, 185, 129, .12);
  --site-vidro-verde: rgba(16, 185, 129, .06);
  --site-vidro-lilas: rgba(24, 22, 44, .45);
  --site-vidro-ambar: rgba(46, 36, 16, .45);
  --site-vidro-escuro: rgba(15, 32, 40, .86);
  --site-varredura: rgba(52, 211, 153, .18);
  --site-varredura-clara: rgba(167, 243, 208, .08);
  --site-sombra-barra: 0 8px 20px rgba(16, 185, 129, .18);
  --site-sombra-folha: 0 26px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .1);
  --site-verde-palido: #a7f3d0;
  --site-pontos: rgba(167, 243, 208, .06);
  --site-brilho-bolha: rgba(52, 211, 153, .75);
  --site-brilho-bolha-clara: rgba(167, 243, 208, .6);
  --site-brilho-bolha-escura: rgba(16, 185, 129, .75);

  /* A planilha do "como era antes" imita a ferramenta que o produto aposenta,
     e por isso NÃO usa a paleta da marca: é de propósito que ela destoa. */
  --site-planilha-papel: #ffffff;
  --site-planilha-barra: #1e6e42;
  --site-planilha-moldura: #c9d1da;
  --site-planilha-borda: #d9dee5;
  --site-planilha-tinta: #1f2933;
  --site-planilha-fraco: #5b6470;
  --site-planilha-cabecalho: #f1f3f5;
  --site-planilha-tira: #fafbfc;
  --site-planilha-erro: #b42318;
  --site-planilha-aviso: #fff3cd;
  --site-planilha-aviso-tinta: #8a5a00;
}

/* O corte lateral do corpo (`.lp-site`) só vale com o `html` cortando também:
   sozinho, o valor do corpo é repassado à janela, e o celular alarga a janela de
   layout até caber os brilhos do fundo — a página balança de lado e o cabeçalho
   fixo alarga junto, levando o idioma e a chamada para fora da tela. */
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--text);
  background: var(--site-fundo);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand-green-light);
  text-decoration: none;
}

a:hover {
  color: var(--site-verde-suave);
}

/* ── Cabeçalho claro dentro do documento escuro ──────────────────────────────
   O Design System tem UM tema por documento: `:root[data-theme]`, e o documento
   inteiro é escuro. Por isso o bloco claro é redeclarado aqui, com os mesmos
   valores do `:root` da ui-kit (conferidos por teste), e as duas regras de
   `brand.css` que escolhem a variante do logo são vencidas por seletores de
   mesma especificidade, ancorados no tema. */
.lp-header {
  --panel: #ffffff;
  --inset: #f1f4f1;
  --inset-hi: #f7fcf9;
  --border: #e6eae6;
  --border2: #e3e6e3;
  --text: #1a201c;
  --text2: #363b37;
  --text3: #5c635d;
  --muted: #8a918b;
  --green-tint: #ecfdf5;
  --sh1: 0 1px 2px rgba(20, 30, 24, .05);
  --sh2: 0 8px 20px -12px rgba(16, 30, 20, .18);
}

:root[data-theme="dark"] .lp-header .flogo__mark > .flogo__img--light {
  display: block;
}

:root[data-theme="dark"] .lp-header .flogo__mark > .flogo__img--dark {
  display: none;
}

:root[data-theme="dark"] .lp-header .flogo__word > .flogo__leaf {
  color: var(--brand-green-deep);
}

:root[data-theme="dark"] .lp-header .flogo__word > .flogo__proton {
  color: var(--brand-navy);
}

/* O relatório em PDF da cena é uma folha de papel branca dentro do documento
   escuro: mesma tática do cabeçalho, mesmos valores do tema claro da ui-kit. */
.lp-folha {
  --panel: #ffffff;
  --border: #e6eae6;
  --text: #1a201c;
  --muted: #8a918b;
  --amber-text: #b45309;
}

:root[data-theme="dark"] .lp-folha .flogo__mark > .flogo__img--light {
  display: block;
}

:root[data-theme="dark"] .lp-folha .flogo__mark > .flogo__img--dark {
  display: none;
}

:root[data-theme="dark"] .lp-folha .flogo__word > .flogo__leaf {
  color: var(--brand-green-deep);
}

:root[data-theme="dark"] .lp-folha .flogo__word > .flogo__proton {
  color: var(--brand-navy);
}

/* ── Peças da página ────────────────────────────────────────────────────── */
.lp-h2 {
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 800;
  margin: 0 0 14px;
  white-space: nowrap;
}

.lp-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh1);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
    transform var(--t) var(--ease);
}

.lp-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.lp-feats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.lp-planos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.lp-link {
  color: var(--text3);
  text-decoration: none;
}

.lp-link:hover {
  color: var(--text);
  background: var(--inset);
}

.lp-card:hover {
  border-color: var(--site-borda-viva);
  box-shadow: var(--sh2);
  transform: translateY(-3px);
}

/* A ui-kit tem altura única de botão (--h-md); o cabeçalho pede uma menor. */
.lp-btn-sm {
  min-height: var(--h-sm);
  font-size: 12px;
  padding: 0 11px;
}

.lp-press:active {
  transform: scale(.97);
}

/* ── Cabeçalho: barra fixa e navegação ──────────────────────────────────── */
.lp-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-popover);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.lp-header > .lp-pad {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 26px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 26px;
}

.lp-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
}

.lp-nav > a {
  padding: 8px 11px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.lp-acoes {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Variante transparente de botão: o protótipo usa uma que a ui-kit não tem — a
   `.lp-btn-ghost` de lá pinta painel e borda. */
.lp-entrar {
  font-size: 13px;
  background: transparent;
  border: none;
  color: var(--text2);
}

.lp-entrar:hover {
  background: var(--inset);
  color: var(--text);
}

/* ── Animações do protótipo ─────────────────────────────────────────────── */
@keyframes lpfloat {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-7px) }
}

@keyframes lpflow {
  0% { transform: scaleY(0); opacity: 0 }
  18% { opacity: 1 }
  70% { transform: scaleY(1); opacity: 1 }
  100% { transform: scaleY(1); opacity: 0 }
}

@keyframes lpbar {
  0%, 100% { transform: scaleY(.55) }
  50% { transform: scaleY(1) }
}

@keyframes lpsweep {
  0% { transform: translateX(-100%) }
  100% { transform: translateX(220%) }
}

@keyframes lpbreathe {
  0%, 100% { opacity: .35 }
  50% { opacity: .8 }
}

@keyframes lpdrift {
  0%, 100% { transform: translate(0, 0) }
  50% { transform: translate(6px, -8px) }
}

@keyframes lpflowx {
  0% { transform: scaleX(0); opacity: 0 }
  18% { opacity: 1 }
  70% { transform: scaleX(1); opacity: 1 }
  100% { transform: scaleX(1); opacity: 0 }
}

@keyframes lpdot {
  0% { opacity: 0; transform: scale(.3) }
  45% { opacity: 1; transform: scale(1) }
  100% { opacity: 0; transform: scale(.5) }
}

/* As duas voltas do cartão da abertura, e as duas opacidades que trocam a face
   no meio do giro — `backface-visibility` sozinho não basta porque as duas
   faces ocupam a mesma célula da grade. */
@keyframes lpvira {
  0%, 32% { transform: rotateY(0) }
  42%, 92% { transform: rotateY(180deg) }
  100% { transform: rotateY(360deg) }
}

@keyframes lpfrente {
  0%, 36.9% { opacity: 1 }
  37%, 95.9% { opacity: 0 }
  96%, 100% { opacity: 1 }
}

@keyframes lpverso {
  0%, 36.9% { opacity: 0 }
  37%, 95.9% { opacity: 1 }
  96%, 100% { opacity: 0 }
}

/* As bolhas que sobem no fundo: duas trajetórias, para que quinze bolhas não
   andem em fila. A subida é em `vh` porque elas atravessam a tela, não a caixa. */
@keyframes lpsubir1 {
  0% { transform: translate(0, 0) scale(.7); opacity: 0 }
  9% { opacity: .6 }
  50% { transform: translate(20px, -56vh) scale(1) }
  88% { opacity: .5 }
  100% { transform: translate(-12px, -110vh) scale(.75); opacity: 0 }
}

@keyframes lpsubir2 {
  0% { transform: translate(0, 0) scale(.6); opacity: 0 }
  9% { opacity: .5 }
  50% { transform: translate(-24px, -54vh) scale(1) }
  88% { opacity: .45 }
  100% { transform: translate(14px, -112vh) scale(.8); opacity: 0 }
}

/* Revelação ao rolar: a página nasce inteira visível e só some quando o script
   assume (`data-anim="1"` na raiz). Sem script, nada fica escondido. */
[data-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}

[data-anim="1"] [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}

[data-anim="1"] [data-reveal][data-in="1"] {
  opacity: 1;
  transform: none;
}

/* ── Cena: uma rolagem, seis atos ────────────────────────────────────────────
   A seção é um trilho alto com um palco grudado no topo. Quem manda no ato é o
   `data-act` do palco — o script o escreve conforme a página rola, e daí para
   baixo é tudo CSS: a cópia que aparece, o objeto que se transforma, a trilha
   que preenche. Sem script (ou para quem pede menos movimento) a raiz não ganha
   `data-cena="1"` e a cena vira uma seção comum, com os seis atos empilhados. */
.lp-cena {
  position: relative;
  height: 640vh;
}

/* A âncora que o menu e o rodapé apontam vira um marco invisível na altura do
   ato correspondente: rolar até `#fluxos` é rolar até o ato do fluxo. */
.lp-cena__marco {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
}

.lp-cena__palco {
  --lp: 0;
  position: sticky;
  top: 68px;
  height: calc(100vh - 68px);
  overflow: clip;
}

/* Os respiros de cima e de baixo são o lugar das duas dicas, que flutuam sobre a
   grade, e contam dentro da altura do palco (`border-box`): por fora, a grade
   vazava por baixo e o conteúdo descia. Os 1232px são 1180 de conteúdo mais os
   respiros laterais. */
.lp-cena__grade {
  box-sizing: border-box;
  max-width: 1232px;
  height: 100%;
  margin: 0 auto;
  padding: 72px 26px;
  display: grid;
  grid-template-columns: 346px 1fr;
  gap: 40px;
  align-items: center;
}

.lp-cena__lado {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.lp-cena__copias {
  position: relative;
  min-height: 296px;
}

.lp-copia {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}

/* O par ato↔cópia é escrito um a um porque CSS não compara dois atributos.
   Ato novo no conteúdo pede uma linha nova aqui — e os estados do objeto, logo
   abaixo, também são por ato. */
.lp-cena__palco[data-act="0"] .lp-copia[data-i="0"],
.lp-cena__palco[data-act="1"] .lp-copia[data-i="1"],
.lp-cena__palco[data-act="2"] .lp-copia[data-i="2"],
.lp-cena__palco[data-act="3"] .lp-copia[data-i="3"],
.lp-cena__palco[data-act="4"] .lp-copia[data-i="4"],
.lp-cena__palco[data-act="5"] .lp-copia[data-i="5"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.lp-copia__sobretitulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--brand-green-light);
  margin-bottom: 12px;
}

.lp-copia__titulo {
  font-size: 33px;
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 800;
  margin: 0 0 14px;
  text-wrap: balance;
}

.lp-copia__texto {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text3);
  margin: 0;
  text-wrap: pretty;
}

/* ── Trilha dos atos ────────────────────────────────────────────────────── */
.lp-trilha {
  display: grid;
  grid-auto-flow: column;
  /* O piso é o rótulo: num sexto da coluna, "Formulário" e "Dashboard" não
     cabem e encostavam no passo seguinte. */
  grid-auto-columns: minmax(max-content, 1fr);
  gap: 10px;
}

/* No protótipo é uma `div` com listener; aqui é botão, para alcançar o ato pelo
   teclado como se alcança rolando. */
.lp-trilha__passo {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.lp-trilha__barra {
  display: block;
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: var(--border2);
  overflow: hidden;
  margin-bottom: 9px;
}

.lp-trilha__preenche {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-green-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 560ms var(--ease-out);
}

.lp-trilha__passo[data-on="1"] .lp-trilha__preenche {
  transform: scaleX(1);
}

.lp-trilha__n {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  transition: color var(--t) var(--ease);
}

.lp-trilha__t {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 2px;
  transition: color var(--t) var(--ease);
}

.lp-trilha__passo[data-cur="1"] .lp-trilha__n {
  color: var(--brand-green-light);
}

.lp-trilha__passo[data-cur="1"] .lp-trilha__t,
.lp-trilha__passo:hover .lp-trilha__n,
.lp-trilha__passo:hover .lp-trilha__t {
  color: var(--text);
}

/* ── O objeto que se transforma ─────────────────────────────────────────────
   Palco de 700×470 em pixels fixos, encolhido por `--sc` nas telas menores: é o
   que permite ao fluxo virar barra de painel com uma transição de posição. */
.lp-palco {
  --sc: 1;
  --oh: 470px;
  height: var(--oh);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-objeto {
  position: relative;
  width: 700px;
  height: 470px;
  flex: 0 0 auto;
  transform: scale(var(--sc));
  transform-origin: center;
}

.lp-objeto__anel {
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  bottom: 22px;
  border: 1.5px dashed var(--dashed);
  border-radius: var(--r-lg);
  background-image: radial-gradient(var(--dots) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0;
  transform: scale(.94);
  transition: opacity 560ms var(--ease-out), transform 620ms var(--ease-out);
}

.lp-cena__palco[data-act="3"] .lp-objeto__anel {
  opacity: 1;
  transform: none;
}

.lp-fio-cena {
  position: absolute;
  z-index: 0;
  opacity: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-green-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 380ms var(--ease-out), transform 560ms var(--ease-out);
}

.lp-fio-cena--v {
  background: linear-gradient(180deg, var(--brand-green), var(--brand-green-light));
  transform: scaleY(0);
  transform-origin: top;
}

.lp-cena__palco[data-act="3"] .lp-fio-cena {
  opacity: 1;
  transform: scaleX(1);
}

.lp-cena__palco[data-act="3"] .lp-fio-cena--v {
  transform: scaleY(1);
}

.lp-no {
  position: absolute;
  z-index: 2;
  left: var(--fx);
  top: var(--fy);
  width: 156px;
  height: 70px;
  border-radius: var(--r-md);
  border: 1px solid var(--lp-no-borda);
  background: var(--lp-no-fundo);
  box-shadow: var(--sh1);
  overflow: hidden;
  opacity: 0;
  transition: opacity 460ms var(--ease-out), left 760ms var(--ease-out),
    top 760ms var(--ease-out), width 760ms var(--ease-out), height 760ms var(--ease-out),
    border-radius 760ms var(--ease-out), background 700ms var(--ease),
    border-color 700ms var(--ease), box-shadow 700ms var(--ease);
}

.lp-no--gatilho {
  --lp-no-borda: var(--site-borda-lilas);
  --lp-no-fundo: linear-gradient(158deg, var(--tint-purple), var(--site-vidro-lilas));
  --lp-no-cor: var(--site-acento-roxo);
  --lp-no-rotulo: var(--site-acento-lilas);
}

.lp-no--condicao {
  --lp-no-borda: var(--site-borda-ambar);
  --lp-no-fundo: linear-gradient(158deg, var(--tint-amber), var(--site-vidro-ambar));
  --lp-no-cor: var(--c-amber);
  --lp-no-rotulo: var(--site-acento-ambar);
}

.lp-no--acao {
  --lp-no-borda: var(--site-borda-viva);
  --lp-no-fundo: linear-gradient(158deg, var(--green-tint), var(--site-vidro-verde));
  --lp-no-cor: var(--brand-green);
  --lp-no-rotulo: var(--brand-green-light);
}

.lp-cena__palco[data-act="3"] .lp-no,
.lp-cena__palco[data-act="4"] .lp-no {
  opacity: 1;
}

/* O nó do fluxo vira a barra do painel: mesma caixa, outra geometria. */
.lp-cena__palco[data-act="4"] .lp-no,
.lp-cena__palco[data-act="5"] .lp-no {
  left: var(--bx);
  top: calc(351px - var(--bh));
  width: 26px;
  height: var(--bh);
  border-radius: 5px;
  border-color: transparent;
  background: linear-gradient(180deg, var(--brand-green), var(--brand-green-light));
  box-shadow: var(--site-sombra-barra);
}

.lp-no__corpo {
  padding: 11px;
  transition: opacity 260ms var(--ease);
}

.lp-cena__palco[data-act="4"] .lp-no__corpo,
.lp-cena__palco[data-act="5"] .lp-no__corpo {
  opacity: 0;
}

.lp-no__topo {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}

.lp-no__selo {
  width: 19px;
  height: 19px;
  border-radius: 5px;
  background: var(--lp-no-cor);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp-no__rotulo {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .09em;
  color: var(--lp-no-rotulo);
}

.lp-no__texto {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

/* As duas barras do painel que não vêm de nenhum nó do fluxo. */
.lp-barra-extra {
  position: absolute;
  z-index: 2;
  width: 26px;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--brand-green), var(--brand-green-light));
  opacity: 0;
  transition: opacity 520ms var(--ease-out) 140ms;
}

.lp-cena__palco[data-act="4"] .lp-barra-extra {
  opacity: 1;
}

/* ── A folha do relatório ───────────────────────────────────────────────── */
.lp-folha {
  position: absolute;
  left: 214px;
  top: 30px;
  width: 272px;
  height: 386px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 20px 18px;
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  font-size: 9px;
  box-shadow: var(--site-sombra-folha);
  opacity: 0;
  transform: translateY(44px) scale(.95) rotate(0deg);
  transition: opacity 620ms var(--ease-out), transform 760ms var(--ease-out);
}

.lp-cena__palco[data-act="5"] .lp-folha {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(-1.2deg);
}

.lp-folha__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}

.lp-folha__periodo {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .06em;
  color: var(--muted);
}

.lp-folha__titulo {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.lp-folha__subtitulo {
  font-size: 8px;
  color: var(--muted);
  margin-top: 4px;
}

.lp-folha__metricas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.lp-folha__metrica {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 7px 8px;
}

.lp-folha__rotulo {
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--muted);
}

.lp-folha__numero {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
}

.lp-folha__numero--verde {
  color: var(--brand-green-hover);
}

.lp-folha__grafico {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 50px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
}

.lp-folha__barra {
  flex: 1;
  border-radius: 2px;
  background: var(--brand-green);
}

.lp-folha__barra--alta {
  background: var(--brand-green-hover);
}

.lp-folha__linha {
  display: grid;
  grid-template-columns: 1fr 52px 54px;
  gap: 6px;
  align-items: center;
  font-size: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}

.lp-folha__linha--titulo {
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted);
  padding: 0 0 5px;
}

.lp-folha__linha:last-child {
  border-bottom: none;
}

.lp-folha__mono {
  font-family: var(--mono);
}

.lp-folha__situacao {
  font-weight: 700;
  color: var(--brand-green-hover);
}

.lp-folha__situacao--espera {
  color: var(--amber-text);
}

.lp-folha__rodape {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 6.5px;
  color: var(--muted);
}

/* ── A ficha do formulário, que atravessa os seis atos ──────────────────── */
.lp-ficha {
  position: absolute;
  left: 130px;
  top: 75px;
  width: 440px;
  height: 320px;
  z-index: 1;
  padding: 18px;
  box-shadow: var(--sh3);
  transition: transform 780ms var(--ease-out), box-shadow 600ms var(--ease),
    opacity 480ms var(--ease-out);
}

.lp-cena__palco[data-act="3"] .lp-ficha {
  transform: scale(.58);
}

.lp-cena__palco[data-act="5"] .lp-ficha {
  transform: scale(.9) translateY(-10px);
  opacity: .3;
}

.lp-ficha__topo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-ficha__selo {
  width: 30px;
  height: 30px;
  border-radius: var(--r-xs);
  background: var(--green-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp-ficha__identidade {
  flex: 1;
  min-width: 0;
}

.lp-ficha__titulo {
  font-size: 13px;
  font-weight: 700;
}

.lp-ficha__legenda {
  font-size: 11px;
  color: var(--muted);
}

.lp-ficha__situacao {
  position: relative;
  width: 84px;
  height: 21px;
  flex-shrink: 0;
}

.lp-pilula {
  position: absolute;
  right: 0;
  top: 0;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--inset);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: opacity 380ms var(--ease);
}

.lp-pilula--viva {
  background: var(--green-tint);
  color: var(--brand-green-light);
}

.lp-pilula[data-i="1"] {
  opacity: 0;
}

.lp-cena__palco[data-act="3"] .lp-pilula[data-i="0"],
.lp-cena__palco[data-act="4"] .lp-pilula[data-i="0"],
.lp-cena__palco[data-act="5"] .lp-pilula[data-i="0"] {
  opacity: 0;
}

.lp-cena__palco[data-act="3"] .lp-pilula[data-i="1"],
.lp-cena__palco[data-act="4"] .lp-pilula[data-i="1"],
.lp-cena__palco[data-act="5"] .lp-pilula[data-i="1"] {
  opacity: 1;
}

.lp-ficha__corpo {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 64px;
  bottom: 18px;
}

/* ── O pedido escrito, que encolhe em uma linha assim que o ato vira ────── */
.lp-pedido {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* A folha não tem reset de caixa, e a cena posiciona os campos e o esqueleto
     a partir desta altura: sem medir por fora, a borda e os 12px de recheio
     esticam o pedido em 26px e ele cobre o primeiro campo. */
  box-sizing: border-box;
  height: 152px;
  overflow: hidden;
  border-radius: var(--r-sm);
  border: 1px solid var(--brand-green);
  box-shadow: 0 0 0 2.5px var(--site-foco-verde);
  padding: 12px 13px;
  transition: height 640ms var(--ease-out), opacity 420ms var(--ease-out),
    border-color 420ms var(--ease), box-shadow 420ms var(--ease);
}

.lp-cena__palco:not([data-act="0"]) .lp-pedido {
  height: 42px;
}

.lp-cena__palco[data-act="4"] .lp-pedido,
.lp-cena__palco[data-act="5"] .lp-pedido {
  opacity: 0;
}

.lp-pedido__rotulo {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 14px;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--brand-green-light);
  overflow: hidden;
  transition: opacity 280ms var(--ease), height 540ms var(--ease-out),
    margin-bottom 540ms var(--ease-out);
}

.lp-cena__palco:not([data-act="0"]) .lp-pedido__rotulo {
  opacity: 0;
  height: 0;
  margin-bottom: 0;
}

.lp-pedido__linha {
  white-space: nowrap;
}

.lp-pedido__status {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--text3);
  transition: opacity 320ms var(--ease);
}

.lp-cena__palco:not([data-act="0"]) .lp-pedido__status {
  opacity: 0;
}

.lp-pulso {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-green);
  flex-shrink: 0;
  animation: lpbreathe 1.6s ease-in-out infinite;
}

.lp-datilo {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text2);
  transition: font-size 520ms var(--ease-out), color 520ms var(--ease);
}

.lp-cena__palco:not([data-act="0"]) .lp-datilo {
  font-size: 12px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-cursor {
  display: inline-block;
  width: 2px;
  height: 15px;
  background: var(--brand-green);
  vertical-align: -2px;
  margin-left: 2px;
  opacity: 0;
  animation: lpbreathe 1.1s steps(1, end) infinite;
}

.lp-cena__palco[data-act="0"] .lp-cursor--1,
.lp-cena__palco[data-act="1"] .lp-cursor--2 {
  opacity: 1;
}

.lp-esqueleto {
  position: absolute;
  left: 0;
  right: 0;
  top: 166px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transition: opacity 380ms var(--ease-out);
}

.lp-cena__palco[data-act="0"] .lp-esqueleto {
  opacity: 1;
}

.lp-esqueleto__faixa {
  position: relative;
  overflow: hidden;
  height: 30px;
  border-radius: var(--r-sm);
  border: 1.5px dashed var(--dashed);
  background: var(--site-vidro-verde);
}

.lp-esqueleto__brilho {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--site-varredura-clara), transparent);
  animation: lpsweep 1.6s linear infinite;
}

/* ── Os campos que a IA monta ───────────────────────────────────────────── */
.lp-campos {
  position: absolute;
  left: 0;
  right: 0;
  top: 58px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: opacity 480ms var(--ease-out);
}

.lp-cena__palco[data-act="4"] .lp-campos,
.lp-cena__palco[data-act="5"] .lp-campos {
  opacity: 0;
}

.lp-campo {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 10px;
  align-items: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}

.lp-cena__palco:not([data-act="0"]) .lp-campo {
  opacity: 1;
  transform: none;
}

.lp-campo__rotulo {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text3);
}

.lp-campo__caixa {
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--field);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
  font-size: 12.5px;
  color: var(--text2);
}

.lp-campo__caixa--fraca {
  color: var(--muted);
}

.lp-campo__caixa--foco {
  justify-content: flex-start;
  white-space: nowrap;
  border-color: var(--brand-green);
  box-shadow: 0 0 0 2.5px var(--site-foco-verde);
}

/* O valor é digitado pela própria rolagem: `--lp` é o quanto o ato 02 andou. */
.lp-datilo2 {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text2);
  clip-path: inset(0 100% 0 0);
}

.lp-cena__palco[data-act="1"] .lp-datilo2 {
  clip-path: inset(0 calc((1 - var(--lp)) * 100%) 0 0);
}

.lp-cena__palco[data-act="2"] .lp-datilo2,
.lp-cena__palco[data-act="3"] .lp-datilo2,
.lp-cena__palco[data-act="4"] .lp-datilo2 {
  clip-path: inset(0 0 0 0);
}

.lp-regra {
  position: absolute;
  left: 0;
  right: 0;
  top: 190px;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  background: var(--tint-amber);
  border: 1px solid var(--site-borda-ambar);
  opacity: 0;
  transform: translateY(-28px) scale(.97);
  transition: opacity 380ms var(--ease-out), transform 520ms var(--ease-out);
}

.lp-cena__palco[data-act="2"] .lp-regra,
.lp-cena__palco[data-act="3"] .lp-regra {
  opacity: 1;
  transform: none;
}

.lp-cena__palco[data-act="4"] .lp-regra,
.lp-cena__palco[data-act="5"] .lp-regra {
  opacity: 0;
  transform: translateY(10px);
}

.lp-regra > svg {
  flex-shrink: 0;
}

.lp-regra__texto {
  font-size: 12px;
  font-weight: 600;
  color: var(--site-acento-ambar);
}

.lp-regra__selo {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--site-acento-ambar);
}

/* ── O painel, no lugar em que o formulário estava ──────────────────────── */
.lp-painel-cena {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 560ms var(--ease-out);
}

.lp-cena__palco[data-act="4"] .lp-painel-cena {
  opacity: 1;
}

.lp-cena__palco[data-act="5"] .lp-painel-cena {
  opacity: .5;
}

.lp-painel-cena__numero {
  position: absolute;
  left: 0;
  top: 8px;
  width: 172px;
}

.lp-painel-cena__valor {
  font-family: var(--mono);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--text);
}

.lp-painel-cena__apoio {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-green-light);
}

.lp-painel-cena__nota {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text3);
}

.lp-painel-cena__exportar {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border2);
  background: var(--inset);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text2);
  white-space: nowrap;
}

.lp-painel-cena__exportar > svg {
  flex-shrink: 0;
}

.lp-painel-cena__grafico {
  position: absolute;
  left: 190px;
  right: 0;
  top: 72px;
}

.lp-painel-cena__eixo {
  position: absolute;
  left: 190px;
  right: 0;
  top: 96px;
  bottom: 24px;
  border-bottom: 1px solid var(--border);
}

/* ── O convite a rolar, que some quando a pessoa já entendeu ────────────── */
.lp-dica {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  pointer-events: none;
  transition: opacity 420ms var(--ease);
}

.lp-cena__palco[data-act="2"] .lp-dica,
.lp-cena__palco[data-act="3"] .lp-dica,
.lp-cena__palco[data-act="4"] .lp-dica,
.lp-cena__palco[data-act="5"] .lp-dica {
  opacity: 0;
}

.lp-dica__pilula {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px 9px 11px;
  border-radius: var(--r-pill);
  background: var(--site-vidro-escuro);
  border: 1px solid var(--site-borda-viva);
  box-shadow: var(--sh2);
  backdrop-filter: blur(6px);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.lp-dica__seta {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green-tint);
  border: 1px solid var(--site-borda-viva);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: lpfloat 1.9s ease-in-out infinite;
}

.lp-dica__contador {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

/* A mesma dica, repetida no topo do palco: no desktop a de baixo some sob o
   objeto, e é a de cima que convida a rolar. Ela só entra com a cena já
   ocupando a tela — quem escreve `data-in` é o script. */
.lp-dica--topo {
  top: 22px;
  bottom: auto;
  justify-content: center;
  z-index: 2;
}

.lp-cena__palco:not([data-in="1"]) .lp-dica--topo {
  opacity: 0;
}

/* Sem script — ou para quem pede menos movimento — a cena não sequestra a
   rolagem: vira uma seção comum, com os seis atos empilhados e o objeto no
   primeiro quadro. */
:root:not([data-cena="1"]) .lp-cena {
  height: auto;
}

:root:not([data-cena="1"]) .lp-cena__palco {
  position: static;
  height: auto;
}

:root:not([data-cena="1"]) .lp-cena__grade {
  height: auto;
  align-items: start;
  padding-top: 40px;
  padding-bottom: 60px;
}

:root:not([data-cena="1"]) .lp-cena__copias {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

:root:not([data-cena="1"]) .lp-copia {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

:root:not([data-cena="1"]) .lp-trilha,
:root:not([data-cena="1"]) .lp-dica {
  display: none;
}

/* ── Pontos de quebra ────────────────────────────────────────────────────────
   O `!important` vem do protótipo e continua necessário: a marcação carrega
   estilo embutido (a grade de cada seção), que vence a folha sem ele. */
@media (max-width: 1000px) {
  .lp-h2 { white-space: normal !important; font-size: 30px !important; }

  /* Na vertical a cena vira uma coluna: a cópia em cima, o objeto logo abaixo, e
     o trilho encurta porque cada ato precisa de menos rolagem. O conjunto fica
     no meio da tela — com o objeto preso ao pé, o celular alto abria um vão
     entre a cópia e o desenho. */
  .lp-cena { height: 600vh; }
  /* `minmax(0, 1fr)` e não `1fr`: a trilha tem mínimo de conteúdo, e o objeto de
     700px do palco — que encolhe por `transform`, e portanto não encolhe no
     cálculo da grade — esticaria a coluna, levando a cópia e a trilha para fora
     da tela. O palco continua com os 700px, agora cortados pelo `overflow` do
     próprio palco. O respiro de baixo é o lugar da dica, e conta dentro da
     altura do palco (`border-box`): por fora, o objeto descia até a dica. */
  .lp-cena__grade {
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: stretch;
    align-content: center;
    gap: 22px;
    padding-bottom: 80px;
  }
  .lp-palco { min-width: 0; }
  .lp-cena__lado { gap: 14px; }
  /* As seis cópias dividem a mesma célula: a caixa fica com a altura da maior, e
     a trilha e o objeto não mudam de lugar quando o ato troca. */
  .lp-cena__copias { display: grid; min-height: 0; }
  .lp-copia { position: static; grid-area: 1 / 1; }
  .lp-copia__titulo { font-size: 26px; }
  .lp-copia__texto { font-size: 14.5px; }
  .lp-palco { --sc: .46; --oh: 222px; }
  .lp-dica { bottom: 8px; }
  .lp-dica__pilula { padding: 7px 14px 7px 8px; }
  .lp-dica__pilula > span:last-child { display: none; }
  /* Na vertical a tela é curta demais para duas dicas: fica a de baixo, e o
     respiro que a de cima pedia volta para a cópia. */
  .lp-dica--topo { display: none; }
  .lp-cena__grade { padding-top: 0; }
}

@media (max-width: 620px) {
  .lp-palco { --sc: .4; --oh: 194px; }
  .lp-copia__sobretitulo { margin-bottom: 8px; }
  .lp-copia__titulo { font-size: 23px; margin-bottom: 10px; }
  .lp-copia__texto { font-size: 14px; line-height: 1.5; }
  .lp-dica__pilula { font-size: 12.5px; }
  /* No celular a trilha vira só os seis números: o nome do ato não cabe sem
     quebrar em duas linhas e empurrar o objeto para fora da tela. */
  .lp-trilha__t { display: none; }
  .lp-trilha__n { font-size: 11px; }
}

@media (max-height: 620px) {
  .lp-palco { --sc: .44; --oh: 212px; }
  .lp-copia__titulo { font-size: 24px; }
}

/* Celular baixo: a dica sai e a cópia aperta, e cada linha que sobra vai para o
   objeto — que de outro modo virava um selo. */
@media (max-width: 1000px) and (max-height: 600px) {
  .lp-dica { display: none; }
  .lp-cena__grade { gap: 16px; padding-top: 8px; padding-bottom: 12px; }
  .lp-cena__lado { gap: 10px; }
  .lp-copia__titulo { font-size: 21px; margin-bottom: 8px; }
  .lp-copia__texto { font-size: 13.5px; line-height: 1.45; }
}

/* A barra do navegador no celular entra e sai da conta de `100vh`, e o palco
   pula a cada rolagem. `svh` é a altura menor — a que vale com a barra à
   mostra —, e só entra onde existe. */
@supports (height: 100svh) {
  .lp-cena__palco { height: calc(100svh - 68px); }
}

/* Com a cena grudada no topo, o objeto do celular fica com o que sobra da tela:
   a linha dele vai até a altura que a largura da coluna dá ao desenho e encolhe
   quando a cópia precisa do espaço. A escala que cabe nela quem escreve é o
   script (`--sc` no próprio objeto): a razão feita em CSS com
   `tan(atan2(100cqw, 700px))` sai errada no Safari — com unidade de contêiner ele
   devolve até escala negativa, e o desenho vira de ponta-cabeça por cima da cena.
   Sem contêiner no navegador, valem as escalas fixas acima. */
@supports (container-type: size) {
  @media (max-width: 1000px) {
    :root[data-cena="1"] .lp-cena__palco { container-type: size; }
    :root[data-cena="1"] .lp-cena__grade {
      grid-template-rows: auto minmax(0, min(476px, (100cqw - 40px) * 470 / 700 + 6px));
    }
    :root[data-cena="1"] .lp-palco { container-type: size; height: auto; }
  }
}

/* Deitado, o celular tem largura de sobra e altura de menos: a cena volta às
   duas colunas do computador. Em coluna, a cópia sozinha tomava a tela. */
@media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
  :root[data-cena="1"] .lp-cena__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  :root[data-cena="1"] .lp-palco { align-self: stretch; }
  .lp-trilha__t { display: none; }
  .lp-copia__titulo { font-size: 22px; }
  .lp-copia__texto { font-size: 13.5px; line-height: 1.5; }
}

@media (max-width: 1080px) {
  .lp-feats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Só o computador estreito: sem o piso, esta regra — que vem depois das do
   celular — vencia também no telefone, e o objeto saía da tela pelos dois lados. */
@media (min-width: 1001px) and (max-width: 1240px) {
  .lp-palco { --sc: .82; --oh: 392px; }
}

@media (max-width: 1120px) {
  .lp-nav { display: none !important; }
  .lp-hero { grid-template-columns: 1fr !important; gap: 44px !important; }
  .lp-h1 { font-size: 44px !important; }
}

@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr !important; gap: 40px !important; }
  .lp-feats, .lp-2col, .lp-planos { grid-template-columns: 1fr !important; }
  /* As três etapas do fluxo da abertura empilham, como no protótipo: lado a
     lado, o rótulo e o texto da etapa não cabiam e saíam cortados. */
  .lp-fluxo-nos { grid-template-columns: 1fr !important; gap: 10px; }
  .lp-fluxo-nos > .lp-fio { display: none; }
  .lp-h1 { font-size: 38px !important; }
  .lp-pad { padding-left: 20px !important; padding-right: 20px !important; }
}

@media (max-width: 520px) {
  .lp-entrar { display: none !important; }
}

/* Abaixo de 420px logo, idioma e a chamada principal não cabem com os respiros de
   sempre: a chamada saía cortada pela borda da tela. */
@media (max-width: 420px) {
  .lp-header > .lp-pad { gap: 10px; padding-left: 14px !important; padding-right: 14px !important; }
  .lp-header .lp-btn-primary { padding-left: 12px; padding-right: 12px; }
}

/* Em 360px ainda faltavam 21px para a chamada em português: a pílula do idioma
   perde a seta e, mais estreito, a sigla. O menu abre rente à borda da tela, e
   não à pílula, que já não tem largura para segurá-lo. */
@media (max-width: 400px) {
  .lp-idioma { position: static; }
  .lp-idioma > summary { gap: 6px; padding: 0 9px; }
  .lp-idioma__seta { display: none; }
  .lp-idioma__menu { top: 62px; right: 14px; }
  .lp-header .lp-btn-primary { padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 359px) {
  .lp-header > .lp-pad { gap: 8px; padding-left: 10px !important; padding-right: 10px !important; }
  .lp-idioma__sigla { display: none; }
  .lp-idioma__menu { right: 10px; }
  .lp-header .lp-btn-primary { font-size: 13px; }
}

/* Uma volta só: animação infinita com .01ms cai num ponto qualquer do ciclo a cada
   quadro, e o que tem keyframe de opacidade pisca em vez de parar. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  /* O cartão da abertura não gira: as faces trocam por esmaecimento, no mesmo
     ritmo do giro. */
  .lp-vira {
    animation: none !important;
  }

  .lp-vira .lp-vira__face--verso {
    transform: none;
  }

  .lp-vira .lp-vira__face--frente,
  .lp-vira__selos .lp-vira__selo--frente {
    animation: lpfrentesuave 12s linear infinite !important;
  }

  .lp-vira .lp-vira__face--verso,
  .lp-vira__selos .lp-vira__selo--verso {
    animation: lpversosuave 12s linear infinite !important;
  }
}

@keyframes lpfrentesuave {
  0%, 33% { opacity: 1 }
  40%, 93% { opacity: 0 }
  100% { opacity: 1 }
}

@keyframes lpversosuave {
  0%, 33% { opacity: 0 }
  40%, 93% { opacity: 1 }
  100% { opacity: 0 }
}

/* ── Casca da página e brilhos de fundo ─────────────────────────────────── */
/* `clip` e não `hidden`: `overflow: hidden` transforma o corpo em contêiner de
   rolagem e o palco da cena para de grudar no topo. O corte vertical segura o
   brilho de baixo, que passa do rodapé e deixava uma faixa vazia no fim da página. */
.lp-site {
  position: relative;
  overflow-x: clip;
  overflow-y: clip;
  min-height: 100vh;
  padding-top: 68px;
  font-size: 15px;
}

.lp-brilho {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}

.lp-brilho--um {
  top: -220px;
  left: 8%;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, var(--site-brilho-verde) 0%, transparent 70%);
  opacity: .28;
  animation: lpdrift 16s ease-in-out infinite;
}

.lp-brilho--dois {
  top: 620px;
  right: -160px;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, var(--site-brilho-teal) 0%, transparent 70%);
  opacity: .22;
  animation: lpdrift 20s ease-in-out infinite reverse;
}

.lp-brilho--tres {
  bottom: -180px;
  left: 30%;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, var(--site-brilho-verde) 0%, transparent 70%);
  opacity: .16;
}

/* A grade de pontos e as bolhas são `fixed`: acompanham a tela em vez de rolar
   com a página, e por isso valem para o documento inteiro com um elemento só. */
.lp-pontos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--site-pontos) 1px, transparent 1px);
  background-size: 34px 34px;
  /* Numa máscara só o alfa conta: `black` aqui é "opaco", e não uma cor da
     paleta — por isso não sai do `:root` como as outras. */
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 80%);
}

.lp-bolhas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* A marcação escreve só o que muda de bolha para bolha: a posição (`left`), o
   diâmetro (`--d`), a duração e o atraso — o halo sai do diâmetro, para que
   bolha maior brilhe mais, e a trajetória sai da classe. */
.lp-bolha {
  position: absolute;
  bottom: -14px;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--lp-bolha-cor);
  box-shadow: 0 0 calc(var(--d) * 2.4) var(--lp-bolha-brilho);
}

.lp-bolha--volta1 {
  animation: lpsubir1 var(--duracao) linear infinite var(--atraso);
}

.lp-bolha--volta2 {
  animation: lpsubir2 var(--duracao) linear infinite var(--atraso);
}

.lp-bolha--media {
  --lp-bolha-cor: var(--brand-green-light);
  --lp-bolha-brilho: var(--site-brilho-bolha);
}

.lp-bolha--clara {
  --lp-bolha-cor: var(--site-verde-palido);
  --lp-bolha-brilho: var(--site-brilho-bolha-clara);
}

.lp-bolha--escura {
  --lp-bolha-cor: var(--brand-green);
  --lp-bolha-brilho: var(--site-brilho-bolha-escura);
}

.lp-lista-limpa {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13.5px;
  color: var(--text3);
  line-height: 1.45;
}

/* ── Abertura ───────────────────────────────────────────────────────────── */
.lp-secao {
  max-width: 1180px;
  margin: 0 auto;
}

.lp-hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}

.lp-selo,
.lp-vira__selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  border-radius: var(--r-pill);
  background: var(--green-tint);
  border: 1px solid var(--site-borda-viva);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-green-light);
}

.lp-selo {
  margin-bottom: 22px;
}

.lp-selo__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-green);
  flex-shrink: 0;
}

/* ── O cartão que vira: a planilha de antes e o produto de agora ─────────────
   As duas faces ocupam a MESMA célula da grade, e o giro do pai troca qual
   delas está de frente. A face de trás nasce virada 180°, e as opacidades
   acertam o instante da troca — sem elas a face que sai continua legível
   durante meio quadro em navegadores sem `backface-visibility` no eixo Y. */
.lp-vira__caixa {
  perspective: 1600px;
  animation: lpfloat 9s ease-in-out infinite;
}

.lp-vira__selos {
  display: grid;
  justify-items: start;
  margin-bottom: 14px;
}

.lp-vira__selo {
  grid-area: 1/1;
}

.lp-vira__selo--frente {
  animation: lpfrente 12s linear infinite;
}

.lp-vira__selo--verso {
  animation: lpverso 12s linear infinite;
}

.lp-vira {
  display: grid;
  /* `minmax(0, 1fr)` e não `1fr`: a trilha da grade tem mínimo de conteúdo, e a
     planilha — toda de texto sem quebra — a esticaria para fora da tela. */
  grid-template-columns: minmax(0, 1fr);
  transform-style: preserve-3d;
  animation: lpvira 12s cubic-bezier(.65, 0, .25, 1) infinite;
}

.lp-vira__face {
  grid-area: 1/1;
  min-width: 0;
  backface-visibility: hidden;
}

.lp-vira__face--frente {
  animation: lpfrente 12s linear infinite;
}

.lp-vira__face--verso {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transform: rotateY(180deg);
  animation: lpverso 12s linear infinite;
}

/* ── A planilha compartilhada, que o produto aposenta ────────────────────────
   Folha clara dentro do documento escuro, como o relatório da cena: as cores
   são declaradas aqui e não herdam o tema da página. */
.lp-planilha {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--site-planilha-papel);
  border: 1px solid var(--site-planilha-moldura);
  box-shadow: var(--sh3);
  color: var(--site-planilha-tinta);
}

.lp-planilha__topo {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  padding: 9px 12px;
  background: var(--site-planilha-barra);
  color: var(--on-brand);
}

.lp-planilha__icone {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--site-planilha-papel);
  color: var(--site-planilha-barra);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp-planilha__arquivo {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-planilha__compartilhado {
  margin-left: auto;
  font-size: 11px;
  opacity: .85;
  white-space: nowrap;
}

.lp-planilha__formula {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--site-planilha-borda);
  background: var(--site-planilha-tira);
}

.lp-planilha__celula {
  width: 52px;
  height: 20px;
  border: 1px solid var(--site-planilha-borda);
  border-radius: 3px;
  background: var(--site-planilha-papel);
  font-size: 11px;
  color: var(--site-planilha-fraco);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp-planilha__fx {
  font-size: 11px;
  color: var(--site-planilha-fraco);
  font-style: italic;
}

.lp-planilha__expressao {
  flex: 1;
  min-width: 0;
  height: 20px;
  border: 1px solid var(--site-planilha-borda);
  border-radius: 3px;
  background: var(--site-planilha-papel);
  font-family: var(--mono);
  font-size: 11px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
}

.lp-planilha__tabela {
  flex: 1;
  border-collapse: collapse;
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.lp-planilha__tabela td,
.lp-planilha__tabela th {
  border-right: 1px solid var(--site-planilha-borda);
  border-bottom: 1px solid var(--site-planilha-borda);
  padding: 0 8px;
  height: 26px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.lp-planilha__tabela th {
  background: var(--site-planilha-cabecalho);
  color: var(--site-planilha-fraco);
  font-weight: 600;
  text-align: center;
}

.lp-planilha__tabela th:first-child {
  width: 30px;
}

/* A primeira coluna é a régua de linhas da planilha, não um dado. */
.lp-planilha__tabela td:first-child {
  background: var(--site-planilha-cabecalho);
  color: var(--site-planilha-fraco);
  text-align: center;
  width: 30px;
}

.lp-planilha__titulos > td {
  font-weight: 700;
}

.lp-planilha__cel--ok {
  color: var(--site-planilha-barra);
}

.lp-planilha__cel--erro {
  color: var(--site-planilha-erro);
}

.lp-planilha__cel--erro-forte {
  color: var(--site-planilha-erro);
  font-weight: 600;
}

.lp-planilha__cel--erro-mono {
  color: var(--site-planilha-erro);
  font-family: var(--mono);
}

/* A célula que está com o cursor em cima, escrita à mão em vez de calculada. */
.lp-planilha__cel--erro-foco {
  color: var(--site-planilha-erro);
  outline: 2px solid var(--site-planilha-barra);
  outline-offset: -2px;
}

.lp-planilha__cel--aviso {
  background: var(--site-planilha-aviso);
  color: var(--site-planilha-aviso-tinta);
}

.lp-planilha__cel--fraco {
  color: var(--site-planilha-fraco);
}

.lp-planilha__abas {
  display: flex;
  gap: 2px;
  padding: 6px 10px;
  border-top: 1px solid var(--site-planilha-borda);
  background: var(--site-planilha-tira);
  font-size: 11px;
  overflow: hidden;
}

.lp-planilha__aba {
  padding: 3px 12px;
  color: var(--site-planilha-fraco);
  white-space: nowrap;
}

.lp-planilha__aba--viva {
  background: var(--site-planilha-papel);
  border: 1px solid var(--site-planilha-borda);
  border-bottom: 2px solid var(--site-planilha-barra);
  border-radius: 3px 3px 0 0;
  font-weight: 600;
  color: var(--site-planilha-tinta);
}

/* ── O fluxo parado da abertura ──────────────────────────────────────────────
   As três etapas são as mesmas da cena — `lp-no--gatilho`, `--condicao` e
   `--acao` só declaram cor, e servem aos dois. O que muda é a geometria: aqui
   elas ficam numa grade, lá o palco as arrasta. */
.lp-fluxo-cartao {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--panel);
  background-image: radial-gradient(var(--dots) 1px, transparent 1px);
  background-size: 16px 16px;
  box-shadow: var(--sh2);
  padding: 14px;
}

.lp-fluxo-cartao__topo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
}

.lp-fluxo-cartao__rotulo {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .09em;
  color: var(--muted);
}

.lp-fluxo-cartao__situacao {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--green-tint);
  color: var(--brand-green-light);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
}

.lp-fluxo-nos {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr;
  align-items: center;
}

.lp-etapa {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--lp-no-borda);
  background: var(--lp-no-fundo);
  box-shadow: var(--sh1);
  padding: 11px;
}

.lp-etapa__varredura {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--site-varredura), transparent);
  animation: lpsweep 3.2s linear infinite;
  pointer-events: none;
}

.lp-fio {
  position: relative;
  height: 2px;
  background: var(--border2);
}

.lp-fio__pulso {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-green-light));
  transform-origin: left;
  animation: lpflowx 3.2s var(--ease) infinite;
}

.lp-fio__ponta {
  position: absolute;
  right: -2px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-green-light);
  box-shadow: 0 0 10px var(--site-brilho-bolha);
  animation: lpdot 3.2s var(--ease) infinite;
}

/* O segundo fio sai meio segundo depois, para o olho seguir a ordem. */
.lp-fio--atrasado > .lp-fio__pulso,
.lp-fio--atrasado > .lp-fio__ponta {
  animation-delay: .55s;
}

.lp-h1 {
  font-size: 54px;
  line-height: 1.04;
  letter-spacing: -.03em;
  font-weight: 800;
  margin: 0 0 20px;
  text-wrap: balance;
}

.lp-cartao {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.lp-liga {
  height: 34px;
  display: flex;
  justify-content: center;
  position: relative;
}

.lp-liga > .lp-liga__trilho {
  width: 2px;
  height: 100%;
  background: var(--border);
}

.lp-liga > .lp-liga__pulso {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(var(--brand-green), var(--brand-green-light));
  transform-origin: top;
  animation: lpflow 3.2s var(--ease) infinite;
}

.lp-barra {
  width: 12px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--brand-green), var(--brand-green-light));
  transform-origin: bottom;
  animation: lpbar 4s var(--ease) infinite;
}

/* ── Comparativo e integrações ──────────────────────────────────────────── */
.lp-comparativo__linha {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  border-top: 1px solid var(--border);
  transition: background var(--t-fast) var(--ease);
}

.lp-comparativo__linha:hover {
  background: var(--rowhover);
}

/* Estreita demais para as três colunas, a tabela rolava de lado dentro do cartão
   e a coluna do produto — a que interessa — ficava de fora da tela. Vira duas
   colunas, antes e depois, com a etapa por cima de cada linha. */
@media (max-width: 700px) {
  .lp-comparativo__tabela { min-width: 0 !important; }
  .lp-comparativo__linha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-comparativo__etapa { grid-column: 1 / -1; padding: 14px 16px 0 !important; }
  .lp-comparativo__antes,
  .lp-comparativo__depois { padding: 8px 16px 14px !important; }
  .lp-rotulo.lp-comparativo__etapa { display: none; }
  .lp-rotulo.lp-comparativo__antes,
  .lp-rotulo.lp-comparativo__depois { padding: 12px 16px !important; }
}

.lp-etiqueta {
  display: inline-flex;
  align-items: center;
  height: var(--h-sm);
  padding: 0 13px;
  border-radius: var(--r-pill);
  background: var(--panel);
  border: 1px solid var(--border2);
  font-size: 12px;
  font-weight: 600;
  color: var(--text3);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.lp-etiqueta:hover {
  border-color: var(--brand-green);
  color: var(--text);
}

/* ── A receita de três passos das integrações ───────────────────────────── */
.lp-receita {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh2);
  padding: 22px;
}

.lp-receita__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}

.lp-receita__selo {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-green-light);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--green-tint);
  white-space: nowrap;
}

.lp-passo {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
}

.lp-passo__trilho {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lp-passo__n {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-tint);
  border: 1px solid var(--site-borda-viva);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-green-light);
  flex-shrink: 0;
}

.lp-passo__fio {
  flex: 1;
  width: 1px;
  background: var(--border2);
  margin: 6px 0;
}

.lp-passo--ultimo .lp-passo__fio {
  display: none;
}

.lp-passo__corpo {
  padding-bottom: 18px;
  min-width: 0;
}

.lp-passo--ultimo .lp-passo__corpo {
  padding-bottom: 0;
}

.lp-passo__titulo {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin: 5px 0 10px;
}

.lp-passo__opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lp-sistema {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border2);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.lp-sistema--escolhido {
  background: var(--green-tint);
  border-color: var(--brand-green);
  color: var(--text);
}

.lp-endereco {
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border2);
  background: var(--inset);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  min-width: 0;
}

.lp-endereco__url {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.lp-endereco__situacao {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-green-light);
  flex-shrink: 0;
}

.lp-passo__rotulo {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 6px;
}

.lp-lista {
  border-radius: var(--r-sm);
  border: 1px solid var(--brand-green);
  box-shadow: 0 0 0 2.5px var(--site-foco-verde);
  overflow: hidden;
}

.lp-lista__escolha {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 11px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}

.lp-lista__escolha > span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-lista__opcoes {
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--inset);
}

.lp-opcao {
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text3);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.lp-opcao--escolhida {
  background: var(--green-tint);
  font-weight: 600;
  color: var(--text);
}

.lp-opcao__texto {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-opcao__codigo {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}

.lp-opcao--escolhida .lp-opcao__codigo {
  color: var(--brand-green-light);
}

.lp-detalhes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.lp-detalhe {
  padding: 7px 9px;
  border-radius: 6px;
  background: var(--inset);
  border: 1px solid var(--border);
  min-width: 0;
}

.lp-detalhe__rotulo {
  font-size: 10px;
  letter-spacing: .06em;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-detalhe__valor {
  font-size: 12px;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-detalhe__valor--viva {
  color: var(--brand-green-light);
  font-weight: 600;
}

.lp-passo__nota {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text3);
}

/* ── Chamada final ──────────────────────────────────────────────────────── */
.lp-chamada {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--site-borda-viva);
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, var(--card1), var(--panel));
  padding: 56px 48px;
  text-align: center;
  box-shadow: var(--sh3);
}

.lp-chamada__brilho {
  position: absolute;
  top: -140px;
  left: 50%;
  width: 420px;
  height: 420px;
  margin-left: -210px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--site-brilho-verde) 0%, transparent 70%);
  opacity: .22;
  filter: blur(40px);
  pointer-events: none;
}

/* ── Página legal: texto corrido ────────────────────────────────────────────
   Termos, Política e fornecedores: uma coluna de leitura. A tabela rola dentro
   dela no celular em vez de alargar a página. */
.lp-legal {
  box-sizing: border-box;
  max-width: 812px;
  margin: 0 auto;
  padding: 56px 26px 96px;
  color: var(--text2);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.lp-legal h1 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.lp-legal h1 + p {
  margin-bottom: 32px;
  color: var(--muted);
  font-size: 14px;
}

.lp-legal h2,
.lp-legal h3 {
  color: var(--text);
  line-height: 1.3;
}

.lp-legal h2 { margin: 44px 0 12px; font-size: 21px; }
.lp-legal h3 { margin: 28px 0 8px; font-size: 16px; }
.lp-legal strong { color: var(--text); }
.lp-legal ul,
.lp-legal ol { padding-left: 22px; }
.lp-legal li { margin: 6px 0; }

.lp-legal hr {
  margin: 36px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.lp-legal blockquote {
  margin: 20px 0;
  padding: 2px 18px;
  border-left: 3px solid var(--brand-green);
  border-radius: var(--r-sm);
  background: var(--panel);
}

.lp-legal code {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--panel);
  font-family: var(--mono);
  font-size: .86em;
}

.lp-legal table {
  display: block;
  overflow-x: auto;
  margin: 20px 0;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: normal;
}

.lp-legal th,
.lp-legal td {
  min-width: 120px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.lp-legal th { background: var(--panel); color: var(--text); }

@media (max-width: 620px) {
  .lp-legal { padding: 36px 18px 64px; }
  .lp-legal h1 { font-size: 27px; }
}

/* ── Página 404: o código no alto e um bloco por idioma ─────────────────────
   A borda devolve a mesma página para qualquer endereço que o site não publica,
   então os três idiomas aparecem juntos: lado a lado quando cabem. */
.lp-404 {
  box-sizing: border-box;
  max-width: 1080px;
  margin: 0 auto;
  padding: 72px 26px 96px;
}

.lp-404__codigo {
  margin: 0 0 32px;
  color: var(--brand-green);
  font-size: 54px;
  line-height: 1.04;
  letter-spacing: -.03em;
  font-weight: 800;
}

.lp-404__idiomas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.lp-404__idioma {
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.lp-404__idioma h2 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 21px;
  line-height: 1.3;
}

.lp-404__idioma p {
  flex: 1;
  margin: 0 0 22px;
  color: var(--text2);
  line-height: 1.6;
}

.lp-404__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 620px) {
  .lp-404 { padding: 44px 18px 64px; }
  .lp-404__codigo { font-size: 44px; }
}