/* 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 da landing "transformar planilha em sistema" (`/pt/transformar-planilha-em-sistema/`
   e as irmãs em inglês e espanhol).

   É a página CLARA do site: o documento sai com `data-theme="light"`, e os tokens da
   ui-kit valem com os valores do tema claro. Tem pacote de CSS próprio — fontes,
   `comum.css` (seletor de idioma, rodapé e modal de contato) e esta folha —, sem o
   `site.css` da página principal: quem chega pela landing não baixa a cena. As classes
   próprias levam o prefixo `ps-` (planilha → sistema). */

/* Cores do protótipo que a ui-kit não nomeia, num lugar só — nunca na marcação. As que
   ela nomeia vêm do token. */
:root {
  /* O verde dos botões e links é o `--green-text`: branco sobre o verde da marca mede
     2,5:1. Este é o do passar o mouse, e o dos textos verdes mais fortes. */
  --ps-verde-escuro: #065f46;
  --ps-verde-fundo: #f1fbf5;
  --ps-verde-borda: #d7ebdf;
  --ps-verde-celula: #d9f2e3;
  --ps-verde-etiqueta: #e3f5e9;
  --ps-verde-etiqueta-tinta: #1f6b3a;
  --ps-verde-suave: #6ee7b7;
  --ps-ambar-fundo: #fff4d6;
  --ps-ambar-suave: #fffaeb;
  --ps-ambar-borda: #f3dc9c;
  --ps-ambar-tinta: #8a5a00;
  --ps-ambar-escuro: #6b4a00;
  --ps-ambar-vivo: #fbbf24;
  --ps-azul-suave: #f3f8ff;
  --ps-azul-borda: #cfe0fb;
  --ps-azul-tinta: #1d4ed8;
  --ps-azul-escuro: #1e40af;
  --ps-roxo-tinta: #6b21a8;
  --ps-vermelho-tinta: #b42318;
  --ps-teal-fundo: #eefaf8;
  --ps-teal-tinta: #0f766e;
  --ps-cinza: #f7f8f7;
  --ps-divisa: #eef1ee;
  --ps-traco: #e1e5e2;
  --ps-moldura: #d9dfda;
  --ps-fio: #9fb3ad;
  --ps-pontos: rgba(19, 38, 63, .10);
  --ps-sombra-no: 0 1px 2px rgba(19, 38, 63, .06);
  --ps-brilho: rgba(16, 185, 129, .35);
  --ps-brilho-fim: rgba(16, 185, 129, 0);
  /* A planilha imita a ferramenta que o produto aposenta, e por isso NÃO usa a paleta
     da marca: é de propósito que ela destoa. */
  --ps-excel: #1f7a45;
  --ps-planilha-cabecalho: #f3f5f3;
  --ps-planilha-titulos: #fafbfa;
  --ps-planilha-tinta: #2b312d;
  /* A seção escura do passo a passo, sobre o navy da marca. */
  --ps-navy-cartao: #1b3353;
  --ps-navy-borda: #2c4668;
  --ps-navy-chip: #24406a;
  --ps-navy-texto: #c9d6e6;
  --ps-navy-fraco: #a9bbd1;
  --ps-navy-linha: #d8e6dd;
  --ps-tinta-sobre-verde: #0b1b23;
}

/* ── Casca ──────────────────────────────────────────────────────────────── */
/* O corte lateral vale no `html` e no corpo juntos: só no corpo, o valor é repassado à
   janela, e o celular alarga a janela de layout até caber o que vaza. O respiro do
   topo é o da barra grudada, para a âncora não parar embaixo dela. */
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

a:hover {
  color: var(--ps-verde-escuro);
}

.ps-pagina {
  background: var(--panel);
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
}

.ps-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ps-icone {
  display: block;
  flex-shrink: 0;
}

/* ── Botões e links ─────────────────────────────────────────────────────── */
/* Todo link com classe declara a própria cor ao passar o mouse: o `a:hover` da casca
   pesa mais que uma classe sozinha. */
.ps-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.ps-botao:active {
  transform: scale(.97);
}

.ps-botao--primario,
.ps-botao--primario:hover {
  color: var(--on-brand);
}

.ps-botao--primario {
  background: var(--green-text);
}

.ps-botao--primario:hover {
  background: var(--ps-verde-escuro);
}

.ps-botao--grande {
  min-height: 52px;
  padding: 0 22px;
  font-size: 16px;
}

.ps-botao--primario.ps-botao--grande {
  box-shadow: var(--sh-brand);
}

.ps-botao--contorno,
.ps-botao--contorno:hover {
  color: var(--green-text);
}

.ps-botao--contorno {
  min-height: 48px;
  padding: 0 20px;
  border-color: var(--green-text);
  background: var(--panel);
  font-size: 15.5px;
}

.ps-botao--contorno:hover {
  background: var(--green-tint);
}

.ps-botao--marca,
.ps-botao--marca:hover {
  color: var(--ps-tinta-sobre-verde);
}

.ps-botao--marca {
  background: var(--brand-green);
  font-weight: 800;
}

.ps-botao--marca:hover {
  background: var(--brand-green-light);
}

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

.ps-link:hover {
  color: var(--ps-verde-escuro);
}

.ps-link-forte {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--green-text);
}

.ps-link-forte:hover {
  color: var(--ps-verde-escuro);
}

/* ── Cabeçalho ──────────────────────────────────────────────────────────── */
.ps-topo {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--panel);
  border-bottom: 1px solid var(--border2);
}

/* A borda só aparece quando a página sai do topo, como no protótipo. Sem linha do tempo
   de rolagem no navegador, ela fica sempre à mostra. */
@supports (animation-timeline: scroll()) {
  .ps-topo {
    animation: psborda linear both;
    animation-timeline: scroll();
    animation-range: 0 8px;
  }
}

.ps-topo__faixa {
  max-width: 1248px;
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.ps-topo .flogo {
  min-height: 44px;
}

.ps-nav {
  display: flex;
  gap: 4px;
  margin-left: 24px;
}

.ps-nav__link,
.ps-topo__entrar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: var(--r-sm);
  color: var(--text2);
  font-size: 14.5px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.ps-nav__link {
  padding: 0 12px;
  font-weight: 500;
}

.ps-topo__entrar {
  padding: 0 14px;
  font-weight: 600;
}

.ps-nav__link:hover,
.ps-topo__entrar:hover {
  background: var(--inset);
  color: var(--text);
}

.ps-topo__acoes {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* O menu do celular: `<details>`, que abre sem script. O painel desce do cabeçalho
   inteiro, e não do botão — quem o posiciona é a barra grudada no topo. */
.ps-menu {
  display: none;
}

.ps-menu__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--text2);
  cursor: pointer;
  list-style: none;
}

.ps-menu__botao::-webkit-details-marker {
  display: none;
}

.ps-menu[open] .ps-menu__botao {
  background: var(--inset);
}

.ps-menu__painel {
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 18px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border2);
  box-shadow: var(--sh2);
  animation: psmenu var(--t) var(--ease-out);
}

.ps-menu__nav {
  display: flex;
  flex-direction: column;
}

.ps-menu__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--ps-divisa);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}

.ps-menu__link:hover {
  color: var(--green-text);
}

.ps-menu__link--entrar {
  border-bottom: 0;
  color: var(--text3);
}

/* Só no celular, quando a pílula de idioma sai da barra. */
.ps-menu__idiomas {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
  padding-top: 6px;
  border-top: 1px solid var(--ps-divisa);
}

.ps-menu__rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.ps-menu__idioma {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text2);
  font-size: 15px;
  font-weight: 600;
}

.ps-menu__idioma:hover {
  color: var(--text);
}

.ps-menu__idioma[aria-current] {
  color: var(--green-text);
}

/* ── Seções ─────────────────────────────────────────────────────────────── */
.ps-secao {
  max-width: 1248px;
  margin: 0 auto;
  padding: 96px 24px;
}

.ps-secao--estreita {
  max-width: 880px;
}

.ps-banda {
  background: var(--ps-cinza);
  border-top: 1px solid var(--ps-divisa);
  border-bottom: 1px solid var(--ps-divisa);
}

.ps-banda--fim {
  border-bottom: 0;
}

.ps-escura {
  background: var(--brand-navy);
  color: var(--on-brand);
}

.ps-h1 {
  margin: 0;
  font-size: 50px;
  line-height: 1.08;
  font-weight: 800;
  color: var(--brand-navy);
  text-wrap: balance;
}

.ps-h2 {
  margin: 0;
  font-size: 38px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--brand-navy);
  text-wrap: balance;
}

.ps-h2--medio {
  max-width: 760px;
}

.ps-h2--largo {
  max-width: 880px;
}

.ps-h2--claro {
  color: var(--on-brand);
}

.ps-h2--final {
  font-size: 40px;
  line-height: 1.12;
}

.ps-h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--text);
}

.ps-intro {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ps-intro__texto {
  margin: 0;
  color: var(--text3);
  text-wrap: pretty;
}

.ps-grade3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ps-grade2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ── Abertura ───────────────────────────────────────────────────────────── */
.ps-abertura {
  max-width: 1248px;
  margin: 0 auto;
  padding: 64px 24px 72px;
}

.ps-abertura__grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 56px;
  align-items: center;
}

.ps-abertura__texto {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 560px;
}

.ps-abertura__sub {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--text2);
  text-wrap: pretty;
}

.ps-abertura__apoio {
  margin: 0;
  color: var(--text3);
  text-wrap: pretty;
}

.ps-abertura__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-top: 4px;
}

.ps-abertura__nota {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text3);
}

/* A vitrine: a planilha, o selo da análise, o sistema e o histórico, sobrepostos no
   computador e empilhados no celular. */
.ps-vitrine {
  position: relative;
  height: 580px;
}

.ps-vitrine__planilha {
  position: absolute;
  top: 0;
  left: 0;
  width: 74%;
}

.ps-vitrine__selo {
  position: absolute;
  top: 236px;
  left: 34%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: var(--r-pill);
  background: var(--brand-navy);
  color: var(--on-brand);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.ps-vitrine__seta {
  display: flex;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-green);
  align-items: center;
  justify-content: center;
}

.ps-vitrine__sistema {
  position: absolute;
  top: 212px;
  right: 0;
  width: 80%;
  z-index: 2;
}

.ps-vitrine__historico {
  position: absolute;
  bottom: 0;
  left: 2%;
  width: 250px;
  z-index: 4;
  padding: 12px 14px;
  border: 1px solid var(--ps-moldura);
  border-radius: var(--r-sm);
  background: var(--panel);
  box-shadow: var(--sh3);
}

.ps-xls {
  background: var(--panel);
  border: 1px solid var(--ps-moldura);
  border-radius: var(--r-sm);
  box-shadow: var(--sh2);
  overflow: hidden;
}

.ps-xls__topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--ps-cinza);
  border-bottom: 1px solid var(--ps-traco);
}

.ps-xls__marca,
.ps-xls-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--ps-excel);
  color: var(--on-brand);
  font-size: 10px;
  font-weight: 800;
}

.ps-xls__arquivo {
  font-size: 12px;
  font-weight: 600;
  color: var(--ps-planilha-tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-xls__versoes {
  margin-left: auto;
  padding: 1px 6px;
  border: 1px solid var(--ps-ambar-borda);
  border-radius: 4px;
  background: var(--ps-ambar-fundo);
  color: var(--ps-ambar-tinta);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ps-xls__formula {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--ps-traco);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
}

.ps-xls__fx {
  font-style: italic;
  font-weight: 600;
  color: var(--muted);
}

.ps-xls__expressao {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A planilha da vitrine é desenho: a tabela que não cabe é cortada na borda, como numa
   janela de planilha, em vez de ganhar barra de rolagem. */
.ps-xls__rolagem {
  overflow: hidden;
}

.ps-xls__tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  line-height: 1.4;
}

.ps-xls__tabela th,
.ps-xls__tabela td {
  height: 28px;
  padding: 0 8px;
  border-right: 1px solid var(--ps-traco);
  border-bottom: 1px solid var(--ps-traco);
  color: var(--ps-planilha-tinta);
  text-align: left;
  white-space: nowrap;
}

.ps-xls__tabela thead th {
  height: 22px;
  background: var(--ps-planilha-cabecalho);
  color: var(--text3);
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
}

.ps-xls__tabela thead th:first-child,
.ps-xls__tabela .ps-xls__linha {
  width: 26px;
  padding: 0;
  background: var(--ps-planilha-cabecalho);
  color: var(--text3);
  font-size: 10.5px;
  text-align: center;
}

.ps-xls__titulos td {
  background: var(--ps-planilha-titulos);
  font-weight: 700;
}

.ps-xls__tabela .ps-xls__num {
  text-align: right;
}

.ps-xls__tabela .ps-xls__cel--aviso {
  background: var(--ps-ambar-fundo);
  color: var(--ps-ambar-tinta);
}

.ps-xls__tabela .ps-xls__cel--ok {
  background: var(--ps-verde-etiqueta);
  color: var(--ps-verde-etiqueta-tinta);
}

.ps-xls__tabela .ps-xls__cel--erro {
  color: var(--ps-vermelho-tinta);
  font-style: italic;
}

.ps-xls__tabela .ps-xls__cel--fraco {
  color: var(--muted);
}

.ps-xls__tabela .ps-xls__cel--foco {
  outline: 2px solid var(--ps-excel);
  outline-offset: -2px;
}

.ps-xls__abas {
  display: flex;
  gap: 2px;
  padding: 0 8px;
  border-top: 1px solid var(--ps-traco);
  background: var(--ps-cinza);
  font-size: 11px;
}

.ps-xls__aba {
  padding: 5px 10px;
  color: var(--text3);
}

.ps-xls__aba--viva {
  background: var(--panel);
  border-bottom: 2px solid var(--ps-excel);
  color: var(--ps-excel);
  font-weight: 700;
}

/* O sistema que nasce da planilha. */
.ps-app {
  background: var(--panel);
  border: 1px solid var(--ps-moldura);
  border-radius: var(--r-sm);
  box-shadow: var(--sh3);
  overflow: hidden;
}

.ps-app__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ps-divisa);
}

.ps-app__titulos {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.4;
}

.ps-app__area {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text3);
}

.ps-app__titulo {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

.ps-app__novo {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: var(--r-xs);
  background: var(--brand-green);
  color: var(--on-brand);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.ps-app__contadores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 14px 4px;
}

.ps-contador {
  padding: 8px 10px;
  border: 1px solid var(--tom-borda);
  border-radius: var(--r-xs);
  background: var(--tom-fundo);
}

.ps-contador__numero {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--tom-forte);
}

.ps-contador__texto {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tom-tinta);
}

.ps-contador--ambar {
  --tom-borda: var(--ps-ambar-borda);
  --tom-fundo: var(--ps-ambar-suave);
  --tom-forte: var(--ps-ambar-tinta);
  --tom-tinta: var(--ps-ambar-escuro);
}

.ps-contador--azul {
  --tom-borda: var(--ps-azul-borda);
  --tom-fundo: var(--ps-azul-suave);
  --tom-forte: var(--ps-azul-tinta);
  --tom-tinta: var(--ps-azul-escuro);
}

.ps-contador--verde {
  --tom-borda: var(--ps-verde-borda);
  --tom-fundo: var(--ps-verde-fundo);
  --tom-forte: var(--green-text);
  --tom-tinta: var(--ps-verde-escuro);
}

.ps-app__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
}

.ps-filtro {
  padding: 3px 10px;
  border: 1px solid var(--border2);
  border-radius: var(--r-pill);
  color: var(--text2);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
}

.ps-filtro--ativo {
  border-color: var(--brand-navy);
  background: var(--brand-navy);
  color: var(--on-brand);
  font-weight: 700;
}

.ps-app__lista {
  display: flex;
  flex-direction: column;
}

.ps-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-top: 1px solid var(--ps-divisa);
  line-height: 1.4;
}

.ps-item--destaque {
  background: var(--inset-hi);
}

.ps-item__texto {
  min-width: 0;
}

.ps-item__titulo {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-item__detalhe {
  font-size: 11px;
  color: var(--text3);
}

/* Etiqueta de etapa e avatar: um tom por modificador, como no quadro do produto. */
.ps-etiqueta {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--tom-fundo);
  color: var(--tom-tinta);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.ps-etiqueta--ambar {
  --tom-fundo: var(--ps-ambar-fundo);
  --tom-tinta: var(--ps-ambar-tinta);
}

.ps-etiqueta--verde {
  --tom-fundo: var(--ps-verde-etiqueta);
  --tom-tinta: var(--ps-verde-etiqueta-tinta);
}

.ps-etiqueta--azul {
  --tom-fundo: var(--tint-blue);
  --tom-tinta: var(--ps-azul-tinta);
}

.ps-etiqueta--vermelho {
  --tom-fundo: var(--tint-red);
  --tom-tinta: var(--ps-vermelho-tinta);
}

.ps-etiqueta--cinza {
  --tom-fundo: var(--inset);
  --tom-tinta: var(--text2);
}

.ps-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tom-fundo);
  color: var(--tom-tinta);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.ps-avatar--azul {
  --tom-fundo: var(--nb-blue);
  --tom-tinta: var(--ps-azul-escuro);
}

.ps-avatar--roxo {
  --tom-fundo: var(--nb-purple);
  --tom-tinta: var(--ps-roxo-tinta);
}

.ps-avatar--verde {
  --tom-fundo: var(--nb-green);
  --tom-tinta: var(--ps-verde-escuro);
}

.ps-avatar--grande {
  width: 30px;
  height: 30px;
  font-size: 11px;
}

.ps-avatar--borda {
  border: 2px solid var(--ps-navy-cartao);
  font-size: 9.5px;
}

.ps-historico__titulo {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
}

.ps-historico__eventos {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 10px;
}

.ps-evento {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.ps-evento__ponto {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--brand-green);
}

.ps-evento--pendente .ps-evento__ponto {
  box-sizing: border-box;
  border: 2px solid var(--star);
  background: transparent;
}

.ps-evento__texto {
  font-size: 12px;
  line-height: 1.35;
}

.ps-evento__quando {
  color: var(--text3);
  font-size: 11px;
}

/* A entrada da vitrine, em escada: a planilha, o selo (que pulsa uma vez), o sistema
   e o histórico. */
.ps-entra--1 {
  animation: psentra .55s var(--ease-out) .05s both;
}

.ps-entra--2 {
  animation: psentra .5s var(--ease-out) .45s both, psbrilho 1.1s var(--ease-out) .9s 1;
}

.ps-entra--3 {
  animation: psentra .6s var(--ease-out) .75s both;
}

.ps-entra--4 {
  animation: psentra .55s var(--ease-out) 1.15s both;
}

.ps-faixa {
  border-top: 1px solid var(--ps-divisa);
  border-bottom: 1px solid var(--ps-divisa);
  background: var(--ps-cinza);
}

.ps-faixa__texto {
  max-width: 1248px;
  margin: 0 auto;
  padding: 22px 24px;
  color: var(--brand-navy);
  font-weight: 600;
  text-align: center;
  text-wrap: balance;
}

/* ── Demonstração: cada parte da planilha e o que ela vira ──────────────────
   Cada elemento é um rádio. Marcar um mostra o painel dele (`data-demo`) e acende as
   colunas da planilha que ele usa (`data-acende`) — tudo por `:has`, sem script. */
.ps-demo {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 32px;
  margin-top: 40px;
  align-items: start;
}

.ps-demo__opcoes,
.ps-casos__lista {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ps-demo__opcoes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* O rótulo segura o rádio escondido (`position: relative`): sem isso ele se ancora longe,
   e o foco puxa a página até lá. */
.ps-demo__opcao {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 14px;
  box-sizing: border-box;
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  background: var(--panel);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.ps-demo__opcao:hover {
  background: var(--inset-hi);
}

.ps-demo__opcao:has(:checked) {
  border-color: var(--brand-green);
  background: var(--ps-verde-fundo);
}

.ps-demo__opcao:has(:focus-visible),
.ps-caso__escolha:has(:focus-visible) {
  outline: 2px solid var(--green-text);
  outline-offset: 2px;
}

.ps-demo__rotulos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}

.ps-demo__origem {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.ps-demo__destino {
  color: var(--green-text);
  font-size: 13.5px;
  font-weight: 600;
}

.ps-demo__seta {
  color: var(--ph);
  transition: color var(--t-fast) var(--ease);
}

.ps-demo__opcao:has(:checked) .ps-demo__seta {
  color: var(--green-text);
}

.ps-demo__quadro {
  border: 1px solid var(--ps-moldura);
  border-radius: var(--r-sm);
  background: var(--panel);
  overflow: hidden;
}

.ps-demo__faixa {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ps-traco);
  background: var(--ps-cinza);
  color: var(--text3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.ps-demo__faixa--sistema {
  border-top: 1px solid var(--ps-verde-borda);
  border-bottom-color: var(--ps-verde-borda);
  background: var(--ps-verde-fundo);
  color: var(--ps-verde-escuro);
}

.ps-demo__planilha {
  padding: 16px;
}

.ps-demo__fx {
  width: fit-content;
  margin-bottom: 10px;
  padding: 5px 8px;
  border-radius: 4px;
  background: var(--ps-ambar-fundo);
  color: var(--ps-ambar-tinta);
  font-family: var(--mono);
  font-size: 12px;
}

.ps-demo__rolagem {
  overflow-x: auto;
}

.ps-demo__tabela {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  border-top: 1px solid var(--ps-traco);
  border-left: 1px solid var(--ps-traco);
  font-size: 11.5px;
  line-height: 1.4;
}

.ps-demo__tabela th,
.ps-demo__tabela td {
  height: 28px;
  padding: 0 8px;
  border-right: 1px solid var(--ps-traco);
  border-bottom: 1px solid var(--ps-traco);
  background: var(--panel);
  color: var(--ps-planilha-tinta);
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.ps-demo__tabela th {
  font-weight: 700;
}

.ps-demo__sistema {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 212px;
  padding: 20px 16px;
}

.ps-demo__descricao {
  margin: auto 0 0;
  color: var(--text3);
  font-size: 14.5px;
  text-wrap: pretty;
}

.ps-demo [data-demo] {
  display: none;
}

.ps-demo:has([value="colunas"]:checked) [data-demo~="colunas"],
.ps-demo:has([value="status"]:checked) [data-demo~="status"],
.ps-demo:has([value="aprovador"]:checked) [data-demo~="aprovador"],
.ps-demo:has([value="formula"]:checked) [data-demo~="formula"],
.ps-demo:has([value="versoes"]:checked) [data-demo~="versoes"],
.ps-demo:has([value="painel"]:checked) [data-demo~="painel"],
.ps-demo:has([value="relatorio"]:checked) [data-demo~="relatorio"] {
  display: block;
  animation: psaparece var(--t) var(--ease-out);
}

.ps-demo:has([value="colunas"]:checked) span[data-demo~="colunas"],
.ps-demo:has([value="status"]:checked) span[data-demo~="status"],
.ps-demo:has([value="aprovador"]:checked) span[data-demo~="aprovador"],
.ps-demo:has([value="formula"]:checked) span[data-demo~="formula"],
.ps-demo:has([value="versoes"]:checked) span[data-demo~="versoes"],
.ps-demo:has([value="painel"]:checked) span[data-demo~="painel"],
.ps-demo:has([value="relatorio"]:checked) span[data-demo~="relatorio"] {
  display: inline;
}

.ps-demo:has([value="colunas"]:checked) [data-acende~="colunas"],
.ps-demo:has([value="status"]:checked) [data-acende~="status"],
.ps-demo:has([value="aprovador"]:checked) [data-acende~="aprovador"],
.ps-demo:has([value="formula"]:checked) [data-acende~="formula"],
.ps-demo:has([value="painel"]:checked) [data-acende~="painel"],
.ps-demo:has([value="relatorio"]:checked) [data-acende~="relatorio"] {
  background: var(--ps-verde-celula);
  color: var(--ps-verde-escuro);
}

/* Navegador sem `:has` fica no primeiro elemento: a lista marca, mas nada troca. */
@supports not selector(:has(*)) {
  .ps-demo [data-demo~="colunas"] {
    display: block;
  }

  .ps-demo span[data-demo~="colunas"] {
    display: inline;
  }
}

/* Os campos como o editor os mostra: título com o friso verde e um cartão por campo, com
   alça de arrastar, posição, nome e a etiqueta do tipo. */
.ps-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.4;
}

.ps-editor__titulo {
  padding: 10px 14px;
  border: 1px solid var(--ps-traco);
  border-top: 3px solid var(--brand-green);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.ps-editor__campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ps-bloco {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--ps-traco);
  border-radius: var(--r-sm);
  background: var(--panel);
  box-shadow: var(--ps-sombra-no);
}

.ps-bloco__cabeca {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ps-bloco__alca {
  display: flex;
  color: var(--ph);
}

.ps-bloco__n {
  color: var(--text3);
  font-size: 11px;
  font-weight: 600;
}

.ps-bloco__rotulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-bloco__obrigatorio {
  margin-left: 4px;
  color: var(--red-text);
}

.ps-bloco__tipo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--ps-cinza);
  color: var(--text3);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ps-bloco__caixa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--field);
  border-radius: var(--r-xs);
  color: var(--ph);
  font-size: 12px;
}

.ps-bloco__caixa > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-quadro {
  display: grid;
  grid-template-columns: repeat(4, minmax(112px, 1fr));
  gap: 8px;
  overflow-x: auto;
}

.ps-quadro__coluna {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: var(--r-sm);
  background: var(--tom-fundo);
  line-height: 1.4;
}

.ps-quadro__coluna--neutra {
  --tom-fundo: var(--ps-cinza);
  --tom-tinta: var(--text2);
  --tom-borda: var(--ps-moldura);
}

.ps-quadro__coluna--ambar {
  --tom-fundo: var(--ps-ambar-suave);
  --tom-tinta: var(--ps-ambar-tinta);
  --tom-borda: var(--ps-ambar-borda);
}

.ps-quadro__coluna--verde {
  --tom-fundo: var(--ps-verde-fundo);
  --tom-tinta: var(--ps-verde-etiqueta-tinta);
  --tom-borda: var(--ps-verde-borda);
}

.ps-quadro__coluna--azul {
  --tom-fundo: var(--ps-azul-suave);
  --tom-tinta: var(--ps-azul-tinta);
  --tom-borda: var(--ps-azul-borda);
}

.ps-quadro__cabeca {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  color: var(--tom-tinta);
  font-size: 12px;
  font-weight: 700;
}

.ps-quadro__vazio {
  height: 52px;
  border: 1px dashed var(--tom-borda);
  border-radius: var(--r-xs);
}

.ps-cartao {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid var(--tom-borda);
  border-radius: var(--r-xs);
  background: var(--panel);
  font-size: 12px;
}

.ps-cartao__codigo {
  color: var(--text);
  font-weight: 700;
}

.ps-cartao__detalhe {
  color: var(--text3);
}

.ps-pessoas {
  display: flex;
  flex-direction: column;
}

.ps-pessoa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  line-height: 1.45;
}

.ps-pessoa + .ps-pessoa {
  border-top: 1px solid var(--ps-divisa);
}

.ps-pessoa__nome {
  font-size: 14px;
  font-weight: 700;
}

.ps-pessoa__texto {
  color: var(--text3);
  font-size: 12.5px;
}

.ps-pessoa__fila {
  color: var(--ps-ambar-tinta);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* O fluxo que a fórmula vira: gatilho, condição e os dois ramos sobre a grade de
   pontos do editor. No celular ele rola para o lado em vez de esmagar os nós. */
.ps-fluxo {
  padding: 16px;
  border: 1px solid var(--ps-traco);
  border-radius: var(--r-md);
  background-color: var(--ps-cinza);
  background-image: radial-gradient(var(--ps-pontos) 1px, transparent 1px);
  background-size: 16px 16px;
  overflow-x: auto;
}

.ps-fluxo__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
  height: 232px;
  min-width: 520px;
}

.ps-fluxo__fio {
  width: 28px;
  height: 232px;
  fill: none;
  stroke: var(--ps-fio);
  stroke-width: 2;
}

.ps-fluxo__ramos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.ps-no {
  position: relative;
  align-self: center;
  display: flex;
  flex-direction: column;
  height: 108px;
  box-sizing: border-box;
  border: 1px solid var(--ps-traco);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--ps-sombra-no);
  line-height: 1.4;
}

.ps-no--gatilho,
.ps-no--acao {
  --tom-fundo: var(--ps-verde-fundo);
  --tom-icone: var(--brand-green);
  --tom-tinta: var(--green-text);
}

.ps-no--condicao {
  --tom-fundo: var(--ps-teal-fundo);
  --tom-icone: var(--brand-green-hover);
  --tom-tinta: var(--ps-teal-tinta);
}

.ps-no__cabeca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ps-traco);
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--tom-fundo);
}

.ps-no__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--tom-icone);
  color: var(--on-brand);
}

.ps-no__textos {
  min-width: 0;
}

.ps-no__tipo,
.ps-no__titulo,
.ps-no__corpo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-no__tipo {
  color: var(--tom-tinta);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ps-no__titulo {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.ps-no__corpo {
  padding: 10px 12px;
  color: var(--text3);
  font-size: 12px;
}

.ps-no__valor {
  color: var(--text);
  font-weight: 600;
}

.ps-no__porta {
  position: absolute;
  top: 50px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-green);
}

.ps-no__porta--entrada {
  left: -4px;
}

.ps-no__porta--saida {
  right: -4px;
}

.ps-arquivos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  color: var(--text2);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.4;
}

.ps-arquivos__ultimo {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--ps-ambar-fundo);
  color: var(--ps-ambar-tinta);
}

/* A ficha da solicitação: os dados do envio numa faixa e o histórico de alterações, cada
   entrada com quem, quando e o valor de antes riscado. */
.ps-resposta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.4;
}

.ps-resposta__dados {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--ps-traco);
  border-radius: var(--r-sm);
}

.ps-resposta__dados dt {
  color: var(--text3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ps-resposta__dados dd {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-alteracoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--ps-traco);
  border-radius: var(--r-sm);
}

.ps-alteracoes__titulo {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.ps-alteracoes__lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-alteracao {
  padding-left: 10px;
  border-left: 2px solid var(--ps-verde-borda);
  font-size: 12.5px;
}

.ps-alteracao__quem {
  color: var(--text);
  font-weight: 600;
}

.ps-alteracao__quando {
  color: var(--text3);
  font-size: 12px;
}

.ps-alteracao__mudanca {
  color: var(--text2);
  overflow-wrap: anywhere;
}

.ps-alteracao__campo {
  font-weight: 600;
}

.ps-alteracao__antes {
  color: var(--text3);
  text-decoration: line-through;
}

.ps-alteracao__depois {
  color: var(--green-text);
  font-weight: 700;
}

/* O painel que a aba de resumo vira: os contadores da abertura e uma barra por centro
   de custo, com o comprimento proporcional ao valor. */
.ps-painel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ps-painel__indicadores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ps-painel__grafico {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--ps-traco);
  border-radius: var(--r-sm);
  line-height: 1.4;
}

.ps-painel__titulo {
  color: var(--text3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ps-barra {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.ps-barra__rotulo {
  overflow: hidden;
  color: var(--text2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-barra__trilho {
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--ps-cinza);
  overflow: hidden;
}

.ps-barra__preenche {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-green);
}

.ps-barra__valor {
  color: var(--text);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

/* O relatório é uma página do PDF sobre o cinza do leitor. */
.ps-relatorio {
  padding: 16px;
  border-radius: var(--r-sm);
  background: var(--ps-cinza);
  overflow-x: auto;
}

.ps-folha {
  max-width: 460px;
  min-width: 380px;
  margin: 0 auto;
  padding: 16px 18px 12px;
  border: 1px solid var(--ps-traco);
  border-radius: var(--r-xs);
  background: var(--panel);
  box-shadow: var(--ps-sombra-no);
  line-height: 1.4;
}

.ps-folha__topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand-green);
}

.ps-folha__titulo {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.ps-folha__subtitulo {
  color: var(--text3);
  font-size: 11.5px;
}

.ps-folha__formato {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--tint-red);
  color: var(--ps-vermelho-tinta);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
}

.ps-folha__tabela {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 11.5px;
}

.ps-folha__tabela th,
.ps-folha__tabela td {
  padding: 5px 4px;
  border-bottom: 1px solid var(--ps-divisa);
  color: var(--text2);
  text-align: left;
  white-space: nowrap;
}

.ps-folha__tabela th {
  color: var(--text3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ps-folha__rodape {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  color: var(--ph);
  font-family: var(--mono);
  font-size: 10.5px;
}

/* ── Dores e benefícios ─────────────────────────────────────────────────── */
.ps-dores {
  gap: 36px 40px;
  margin-top: 48px;
}

.ps-dor,
.ps-beneficio {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ps-dor__icone,
.ps-beneficio__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
}

.ps-dor__icone {
  box-sizing: border-box;
  border: 1px solid var(--border2);
  background: var(--panel);
  color: var(--amber-text);
}

.ps-dor__texto,
.ps-beneficio__texto {
  margin: 0;
  color: var(--text3);
  font-size: 16px;
}

.ps-fecho {
  max-width: 720px;
  margin: 56px 0 0;
  color: var(--brand-navy);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.55;
  text-wrap: pretty;
}

.ps-beneficios {
  margin-top: 48px;
  border-top: 1px solid var(--border2);
}

.ps-beneficio {
  padding: 28px 28px 28px 0;
  border-bottom: 1px solid var(--border2);
}

.ps-beneficio__icone {
  background: var(--green-tint);
  color: var(--green-text);
}

.ps-beneficios__cta {
  margin-top: 36px;
}

/* ── Como funciona: quatro passos na faixa escura ───────────────────────── */
.ps-passos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
}

.ps-passos::before {
  content: '';
  position: absolute;
  top: 19px;
  left: 20px;
  right: 12%;
  height: 2px;
  background: var(--ps-navy-borda);
}

.ps-passo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ps-passo__numero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-green);
  color: var(--on-brand);
  font-size: 16px;
  font-weight: 800;
}

.ps-passo__titulo {
  margin-top: 4px;
  color: var(--on-brand);
}

.ps-passo__texto {
  margin: 0;
  color: var(--ps-navy-texto);
  font-size: 15.5px;
}

.ps-passo__exemplo {
  margin-top: 6px;
  padding: 12px;
  border: 1px solid var(--ps-navy-borda);
  border-radius: var(--r-sm);
  background: var(--ps-navy-cartao);
  font-size: 12.5px;
  line-height: 1.45;
}

.ps-passo__exemplo--arquivo,
.ps-passo__exemplo--equipe {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ps-passo__exemplo--arquivo .ps-xls-marca {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  font-size: 12px;
}

.ps-passo__arquivo {
  min-width: 0;
}

.ps-passo__arquivo b {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-passo__arquivo span {
  color: var(--ps-navy-fraco);
}

.ps-passo__exemplo--campos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}

.ps-passo__campo {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--ps-navy-chip);
}

.ps-passo__exemplo--proposta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ps-passo__proposta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ps-verde-suave);
}

.ps-passo__proposta--revisar {
  color: var(--ps-ambar-vivo);
}

.ps-passo__proposta > span {
  color: var(--on-brand);
}

.ps-passo__rostos {
  display: flex;
}

.ps-passo__rostos > .ps-avatar + .ps-avatar {
  margin-left: -7px;
}

.ps-passos__cta {
  margin-top: 44px;
}

/* ── Casos de uso ───────────────────────────────────────────────────────────
   Um rádio por caso: no computador ele escolhe a prévia da direita; no celular a
   prévia some e o caso escolhido abre embaixo do próprio nome. */
.ps-casos {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px;
  margin-top: 44px;
  align-items: start;
}

.ps-casos__lista {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border2);
}

.ps-caso {
  border-bottom: 1px solid var(--border2);
}

.ps-caso__escolha {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 12px 14px;
  box-sizing: border-box;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.ps-caso__escolha:hover {
  background: var(--inset-hi);
}

.ps-caso__escolha:has(:checked) {
  border-left-color: var(--brand-green);
  background: var(--inset-hi);
}

.ps-caso__rotulos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}

.ps-caso__nome {
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}

.ps-caso__resultado {
  color: var(--text3);
  font-size: 13.5px;
}

.ps-caso__seta {
  color: var(--text3);
  transition: transform var(--t) var(--ease);
}

.ps-caso__escolha:has(:checked) .ps-caso__seta {
  transform: rotate(180deg);
}

.ps-caso__detalhe {
  display: none;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t) var(--ease);
}

.ps-caso:has(:checked) .ps-caso__detalhe {
  grid-template-rows: 1fr;
}

.ps-caso__dobra {
  overflow: hidden;
}

.ps-caso__conteudo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 14px 18px;
  font-size: 15px;
}

.ps-caso__conteudo p {
  margin: 0;
  color: var(--text3);
}

.ps-caso__conteudo b {
  color: var(--text);
}

.ps-caso__recursos,
.ps-previa__recursos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ps-recurso {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--green-tint);
  color: var(--ps-verde-escuro);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.ps-casos__previas {
  position: sticky;
  top: 96px;
  border: 1px solid var(--ps-moldura);
  border-radius: var(--r-sm);
  background: var(--panel);
  box-shadow: var(--sh2);
  overflow: hidden;
}

.ps-previa {
  display: none;
}

.ps-casos:has([value="0"]:checked) [data-caso="0"],
.ps-casos:has([value="1"]:checked) [data-caso="1"],
.ps-casos:has([value="2"]:checked) [data-caso="2"],
.ps-casos:has([value="3"]:checked) [data-caso="3"],
.ps-casos:has([value="4"]:checked) [data-caso="4"],
.ps-casos:has([value="5"]:checked) [data-caso="5"] {
  display: block;
  animation: psaparece var(--t) var(--ease-out);
}

@supports not selector(:has(*)) {
  .ps-previa[data-caso="0"] {
    display: block;
  }
}

.ps-previa__topo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--ps-divisa);
  line-height: 1.45;
}

.ps-previa__planilha {
  color: var(--text3);
  font-size: 12.5px;
}

.ps-previa__planilha b {
  color: var(--text2);
}

.ps-previa__linha {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ps-previa__sistema {
  color: var(--text);
  font-size: 17px;
  font-weight: 800;
}

.ps-previa__tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.4;
}

.ps-previa__tabela th {
  padding: 8px 5px;
  background: var(--ps-cinza);
  color: var(--text3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-align: left;
  text-transform: uppercase;
}

.ps-previa__tabela td {
  padding: 11px 5px;
  border-top: 1px solid var(--ps-divisa);
  color: var(--text2);
}

.ps-previa__tabela th:first-child,
.ps-previa__tabela td:first-child {
  width: 34%;
  padding-left: 18px;
}

.ps-previa__tabela th:last-child,
.ps-previa__tabela td:last-child {
  width: 1%;
  padding-right: 18px;
  white-space: nowrap;
}

.ps-previa__tabela .ps-previa__chave {
  color: var(--text);
  font-weight: 700;
}

.ps-previa .ps-etiqueta {
  padding: 2px 9px;
  font-size: 11.5px;
}

.ps-previa__recursos {
  gap: 8px;
  padding: 16px 18px;
  border-top: 1px solid var(--ps-divisa);
}

.ps-previa__recursos .ps-recurso {
  padding: 4px 10px;
}

.ps-casos__fecho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 44px;
}

.ps-casos__pergunta {
  margin: 0;
  color: var(--brand-navy);
  font-weight: 600;
}

/* ── Comparar ───────────────────────────────────────────────────────────── */
.ps-comparar__dica {
  display: none;
  margin: 20px 0 0;
  color: var(--text3);
  font-size: 14px;
}

.ps-comparar__rolagem {
  margin-top: 40px;
  border: 1px solid var(--ps-moldura);
  border-radius: var(--r-sm);
  background: var(--panel);
  overflow-x: auto;
}

.ps-comparar__rolagem:focus-visible {
  outline: 2px solid var(--green-text);
  outline-offset: 2px;
}

/* `separate`, e não `collapse`: com bordas fundidas a primeira coluna gruda na borda
   mas a linha dela fica para trás. */
.ps-comparar {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15.5px;
  line-height: 1.5;
}

.ps-comparar th,
.ps-comparar td {
  padding: 14px 18px;
  border-top: 1px solid var(--ps-divisa);
  text-align: left;
  vertical-align: top;
}

.ps-comparar thead th {
  padding: 16px 18px;
  border-top: 0;
  border-bottom: 1px solid var(--border2);
  color: var(--text3);
  font-size: 13px;
  font-weight: 700;
}

.ps-comparar tbody tr:first-child > * {
  border-top: 0;
}

.ps-comparar th:first-child {
  position: sticky;
  left: 0;
  width: 28%;
  background: var(--panel);
}

.ps-comparar tbody th {
  color: var(--text);
  font-weight: 700;
}

.ps-comparar td {
  color: var(--text3);
}

.ps-comparar .ps-comparar__nosso {
  background: var(--ps-verde-fundo);
  color: var(--text);
  font-weight: 600;
}

.ps-comparar thead .ps-comparar__nosso {
  color: var(--green-text);
  font-weight: 800;
}

.ps-comparar__fecho {
  max-width: 720px;
  margin: 28px 0 0;
  color: var(--text3);
  font-size: 16px;
  text-wrap: pretty;
}

/* ── Controle ───────────────────────────────────────────────────────────── */
.ps-controle {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
}

.ps-controle__lado {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ps-controle__bloco {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--border2);
}

.ps-controle__texto {
  margin: 0;
  color: var(--text3);
  font-size: 16px;
}

.ps-controle__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 6px;
  font-size: 15px;
}

.ps-controle__links > .ps-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.ps-controle__itens {
  gap: 0 36px;
}

.ps-controle__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border2);
}

.ps-controle__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  background: var(--tint-blue);
  color: var(--ps-azul-tinta);
}

.ps-controle__item .ps-h3 {
  margin-bottom: 4px;
  font-size: 17px;
}

.ps-controle__item .ps-controle__texto {
  font-size: 15.5px;
}

/* ── Perguntas frequentes ───────────────────────────────────────────────── */
.ps-faq {
  margin-top: 36px;
  border-top: 1px solid var(--ps-traco);
}

.ps-faq__item {
  border-bottom: 1px solid var(--ps-traco);
  interpolate-size: allow-keywords;
}

.ps-faq__pergunta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 14px 0;
  box-sizing: border-box;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast) var(--ease);
}

.ps-faq__pergunta::-webkit-details-marker {
  display: none;
}

.ps-faq__pergunta:hover {
  color: var(--green-text);
}

.ps-faq__titulo {
  margin: 0;
  color: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

.ps-faq__icone {
  color: var(--green-text);
  transition: transform var(--t) var(--ease);
}

.ps-faq__item[open] .ps-faq__icone {
  transform: rotate(45deg);
}

.ps-faq__resposta {
  margin: 0;
  padding: 0 40px 22px 0;
  color: var(--text3);
  font-size: 16px;
  text-wrap: pretty;
}

/* Onde o navegador deixa, a resposta desliza em vez de pular. */
.ps-faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--t) var(--ease), content-visibility var(--t) allow-discrete;
}

.ps-faq__item[open]::details-content {
  block-size: auto;
}

/* ── Chamada final ──────────────────────────────────────────────────────── */
.ps-chamada {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
}

.ps-chamada__texto {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 620px;
}

.ps-chamada__apoio {
  margin: 0;
  color: var(--text3);
  font-size: 18px;
  text-wrap: pretty;
}

.ps-chamada__acao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
}

.ps-chamada__nota {
  color: var(--text3);
  font-size: 14px;
}

.ps-chamada__desenho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr);
  align-items: center;
  gap: 14px;
}

.ps-chamada__planilha {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ps-moldura);
  border-radius: var(--r-xs);
  background: var(--panel);
  overflow: hidden;
}

.ps-chamada__planilha > span {
  height: 22px;
  border-right: 1px solid var(--ps-traco);
  border-bottom: 1px solid var(--ps-traco);
}

.ps-chamada__planilha > span:nth-child(3n) {
  border-right: 0;
}

.ps-chamada__planilha > span:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.ps-chamada__planilha > .ps-chamada__cel--cabeca {
  background: var(--ps-planilha-cabecalho);
}

.ps-chamada__planilha > .ps-chamada__cel--ambar,
.ps-chamada__etiqueta--ambar {
  background: var(--ps-ambar-fundo);
}

.ps-chamada__planilha > .ps-chamada__cel--verde,
.ps-chamada__etiqueta--verde {
  background: var(--ps-verde-etiqueta);
}

.ps-chamada__seta {
  color: var(--green-text);
}

.ps-chamada__sistema {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--ps-moldura);
  border-radius: var(--r-xs);
  background: var(--panel);
  box-shadow: var(--sh2);
}

.ps-chamada__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ps-chamada__titulo {
  width: 44%;
  height: 8px;
  border-radius: 4px;
  background: var(--brand-navy);
}

.ps-chamada__botao {
  width: 26%;
  height: 16px;
  border-radius: 4px;
  background: var(--brand-green);
}

.ps-chamada__traco {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: var(--border2);
}

.ps-chamada__etiqueta {
  width: 44px;
  height: 12px;
  border-radius: var(--r-pill);
}

/* ── O rodapé do site, escuro dentro da página clara ────────────────────────
   O rodapé é o mesmo da página principal, que é escura. Aqui ele continua escuro: os
   tokens que ele usa são redeclarados com os valores do tema escuro da ui-kit
   (conferidos por teste), e as regras de brand.css que escolhem a variante do logo são
   vencidas com mais especificidade. Corpo e entrelinha são os da página principal. */
.ps-pagina .lp-rodape {
  --panel: #0f2028;
  --inset: #122530;
  --border: #1b3038;
  --border2: #1d3a40;
  --text: #eaf3ef;
  --text2: #cfe3dc;
  --text3: #8fada4;
  --muted: #6b8a82;
  color: var(--text);
  font-size: 15px;
  line-height: normal;
}

.ps-pagina .lp-rodape .flogo__mark > .flogo__img--light {
  display: none;
}

.ps-pagina .lp-rodape .flogo__mark > .flogo__img--dark {
  display: block;
}

.ps-pagina .lp-rodape .flogo__leaf {
  color: var(--brand-green-light);
}

.ps-pagina .lp-rodape .flogo__proton {
  color: var(--on-brand);
}

/* ── Animações ──────────────────────────────────────────────────────────── */
@keyframes psentra {
  from { opacity: 0; transform: translateY(14px) }
  to { opacity: 1; transform: none }
}

@keyframes psbrilho {
  0% { box-shadow: 0 0 0 0 var(--ps-brilho) }
  100% { box-shadow: 0 0 0 12px var(--ps-brilho-fim) }
}

@keyframes psaparece {
  from { opacity: 0; transform: translateY(6px) }
  to { opacity: 1; transform: none }
}

@keyframes psmenu {
  from { opacity: 0; transform: translateY(-6px) }
  to { opacity: 1; transform: none }
}

@keyframes psborda {
  from { border-bottom-color: transparent }
  to { border-bottom-color: var(--border2) }
}

/* ── Pontos de quebra ───────────────────────────────────────────────────── */
@media (max-width: 1060px) {
  .ps-nav { display: none; }
  .ps-menu { display: block; }
}

@media (max-width: 960px) {
  .ps-topo__entrar { display: none; }
  .ps-abertura__grade { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* A vitrine empilha: cada peça volta ao fluxo, o selo no meio, e o histórico sai. */
  .ps-vitrine { height: auto; display: flex; flex-direction: column; gap: 12px; }
  .ps-vitrine > * { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; }
  .ps-vitrine__selo { align-self: center; }
  .ps-vitrine__historico { display: none; }
  .ps-grade3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-demo,
  .ps-casos,
  .ps-controle,
  .ps-chamada { grid-template-columns: minmax(0, 1fr); }
  /* A demonstração vira acordeão: o quadro entra logo abaixo do elemento marcado, senão
     quem toca num item lá embaixo não vê nada mudar. */
  .ps-demo { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
  .ps-demo__opcoes { display: contents; }
  .ps-demo__opcao:nth-of-type(1) { order: 2; }
  .ps-demo__opcao:nth-of-type(2) { order: 4; }
  .ps-demo__opcao:nth-of-type(3) { order: 6; }
  .ps-demo__opcao:nth-of-type(4) { order: 8; }
  .ps-demo__opcao:nth-of-type(5) { order: 10; }
  .ps-demo__opcao:nth-of-type(6) { order: 12; }
  .ps-demo__opcao:nth-of-type(7) { order: 14; }
  .ps-demo__quadro { order: 3; margin: 2px 0 10px; }
  .ps-demo:has([value="status"]:checked) .ps-demo__quadro { order: 5; }
  .ps-demo:has([value="aprovador"]:checked) .ps-demo__quadro { order: 7; }
  .ps-demo:has([value="formula"]:checked) .ps-demo__quadro { order: 9; }
  .ps-demo:has([value="versoes"]:checked) .ps-demo__quadro { order: 11; }
  .ps-demo:has([value="painel"]:checked) .ps-demo__quadro { order: 13; }
  .ps-demo:has([value="relatorio"]:checked) .ps-demo__quadro { order: 15; }
  .ps-demo__seta { transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
  .ps-demo__opcao:has(:checked) .ps-demo__seta { transform: rotate(90deg); }
  .ps-casos__previas { display: none; }
  .ps-caso__detalhe { display: grid; }
  .ps-comparar__dica { display: block; }
  /* Os passos viram uma linha do tempo vertical, com o número sobre a linha. */
  .ps-passos { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 22px; border-left: 2px solid var(--ps-navy-linha); }
  .ps-passos::before { display: none; }
  .ps-passo { padding: 0 0 28px 18px; }
  .ps-passo__numero { position: absolute; left: -40px; }
}

@media (max-width: 640px) {
  .ps-topo__faixa,
  .ps-abertura,
  .ps-secao,
  .ps-faixa__texto { padding-left: 18px; padding-right: 18px; }
  .ps-secao { padding-top: 56px; padding-bottom: 56px; }
  .ps-h1 { font-size: 36px; }
  .ps-h2,
  .ps-h2--final { font-size: 28px; }
  .ps-grade3,
  .ps-grade2,
  .ps-editor__campos { grid-template-columns: minmax(0, 1fr); }
  .ps-resposta__dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Três indicadores lado a lado só cabem com o número menor ("27,5 mil €" quebrava). */
  .ps-painel__indicadores .ps-contador__numero { font-size: 16px; }
  .ps-barra { grid-template-columns: 96px minmax(0, 1fr) auto; }
  /* A pílula de idioma sai da barra para caber a chamada; os idiomas vão para o menu. */
  .ps-topo .lp-idioma { display: none; }
  .ps-menu__idiomas { display: flex; }
  .ps-topo__cta { padding: 0 12px; font-size: 12.5px; }
  /* O botão grande quebra a linha em vez de passar da borda da tela. */
  .ps-botao--grande { white-space: normal; text-align: center; }
}

@media (max-width: 480px) {
  .ps-topo .flogo__word { display: none; }
}

@media (max-width: 360px) {
  .ps-topo__faixa { gap: 10px; padding-left: 12px; padding-right: 12px; }
  .ps-topo__acoes { gap: 6px; }
  .ps-topo__cta { padding: 0 10px; font-size: 12px; }
}

/* Quem pede menos movimento não recebe animação nenhuma — e a vitrine nem espera o
   atraso da entrada para aparecer. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }

  html { scroll-behavior: auto; }

  .ps-entra { animation: none !important; }
}