/* ============================================================================
   ZappyDue — sistema visual.

   A IMAGEM VEM DO PRÓPRIO ÍCONE: fichas empilhadas. Um aparelho, várias
   identidades, uma sobre a outra, separadas e visíveis.

   As três regras que sustentam o desenho, e que não se quebram:

     PAPEL   um branco frio, quase impresso, com respiro largo
     TINTA   petróleo profundo, quente, nunca preto puro
     COR     vem SÓ das contas — em mais nenhum lugar

   A terceira é a que faz a página parecer cara: a cor não decora, ela
   IDENTIFICA. Onde há cor, há uma conta. Onde não há conta, é papel e tinta.
   Botão, link, ícone e título são tinta — sempre.

   O QUE MUDOU NESTA VERSÃO: a página falava do produto e quase não o mostrava.
   Agora ela mostra — com capturas reais do aplicativo dentro de aparelhos
   desenhados em CSS. Isso trouxe a única exceção à disciplina de sombra: o
   aparelho tem sombra funda, porque é o objeto que precisa sair do papel.
   Todo o resto continua sendo fio de 1px.
   ========================================================================= */

:root {
  --papel: #f3f5f4;
  --papel-alto: #ffffff;
  --papel-fundo: #eaeeec;
  --tinta: #071a1f;
  --tinta-media: #3d5257;
  /*
    O cinza de apoio foi ESCURECIDO de #7a8c8f para cá.

    O valor anterior dava 3,2:1 contra o papel — abaixo dos 4,5:1 que a WCAG
    pede para texto normal, e ele é justamente o tom das etiquetas em
    versalete, das notas de preço e do sumário das páginas legais: tudo texto
    pequeno. Este dá 4,7:1 no papel e 5,1:1 no branco dos cartões.
  */
  --tinta-fraca: #5f7175;
  --linha: #dfe5e3;
  --linha-forte: #c9d3d1;
  /* O algarismo grande dos passos. Em --linha-forte ele dava 1,4:1 e sumia;
     aqui dá 3,2:1, o mínimo para texto grande, e continua sendo um fantasma. */
  --numeral: #7c8c88;

  /*
    As seis contas — os MESMOS valores de `src/tema.ts` no aplicativo.

    Antes o site tinha uma paleta própria, parecida mas não igual. Com as
    capturas reais na página, a bolinha rosa da conta "Pessoal" ficava ao lado
    de um rosa do site que não era aquele. Agora é um valor só, nos dois lados.
  */
  --c1: #00a884; /* verde-água — a cor da marca */
  --c2: #2563eb; /* azul */
  --c3: #7c3aed; /* roxo */
  --c4: #ea580c; /* laranja */
  --c5: #db2777; /* rosa */
  --c6: #0891b2; /* ciano */

  /*
    A COR DA CONTA COMO TEXTO É OUTRA COR — e é derivada, não escolhida.

    As seis acima foram calibradas no aplicativo para carregar BRANCO por cima
    (a bolinha, a raia). Usadas como texto sobre papel, quatro das seis ficam
    abaixo de 4,5:1 — o verde da marca é a pior, com 2,8:1.

    `--mistura-texto` é a receita: 70% da cor da conta, 30% de tinta. É a menor
    quantidade de tinta que faz as SEIS passarem (a pior fica em 4,7:1), então
    a cor continua reconhecível como aquela conta. Onde a cor é só mancha —
    raia, bolinha, borda — ela segue pura.
  */
  --mistura-texto: 70%;

  /*
    Sombras. Dois degraus e nada mais — a lista curta é o que impede o site de
    virar um painel de administração cheio de caixas flutuando. A funda é
    exclusiva do aparelho.
  */
  --sombra-media: 0 2px 6px rgba(7, 26, 31, 0.05), 0 14px 34px -16px rgba(7, 26, 31, 0.18);
  --sombra-aparelho: 0 4px 12px rgba(7, 26, 31, 0.1),
                     0 44px 90px -34px rgba(7, 26, 31, 0.45);

  --largura: 1180px;
  --gutter: 28px;
  --topo-altura: 72px;
}

/* ---------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Âncoras não podem parar embaixo do cabeçalho fixo. */
  scroll-padding-top: calc(var(--topo-altura) + 16px);
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
svg { display: block; }

:focus-visible { outline: 2px solid var(--c2); outline-offset: 4px; border-radius: 4px; }

.envolve { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }

/* Só para leitor de tela: usado nos rótulos que o desenho já diz sozinho. */
.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

/* --------------------------------------------------------------- marca --- */

/*
  A LETRA DO NOME É A MESMA DO APLICATIVO.

  O app escreve "ZappyDue" em Bricolage Grotesque ExtraBold; o site escrevia em
  serifa itálica. Enquanto o site não mostrava o produto dava para não notar —
  mas agora a captura real fica a centímetros do cabeçalho, e duas marcas
  diferentes na mesma tela leem como dois produtos.

  O arquivo é servido daqui, e não do Google Fonts, e traz só os glifos de
  "ZappyDue": 1,3 KB, sem uma segunda conexão para a primeira coisa que a
  pessoa vê. Licença OFL em `OFL-marca.txt`.
*/
@font-face {
  font-family: "Marca ZappyDue";
  src: url("marca.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

.marca {
  font-family: "Marca ZappyDue", "Instrument Sans", sans-serif;
  font-weight: 800;
  font-size: 1.42rem;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/*
  O ESPAÇO ANTES DO NOME MORA NO SÍMBOLO, E NÃO NO CONTÊINER.

  Aqui havia `gap: 0.4em`. Como `.marca` é um flex, o `gap` separa TODOS os
  itens — e o nome gera DOIS: o texto "Zappy", que vira um item anônimo, e o
  `<em>`/`<span>` do "Due". O mesmo espaço que afasta o símbolo do nome entrava
  no meio do nome, e o site publicado escrevia "Zappy Due".

  Medido no ar antes da correção: símbolo→"Z" 11 px e "Zappy"→"Due" 10 px no
  cabeçalho; 15 px e 14 px no rodapé, contra 1 a 2 px entre letras.

  Com a margem no símbolo o espaço volta a ter um vizinho só. O valor segue em
  `em` e herda o mesmo corpo que o `gap` usava, então a distância símbolo→nome
  não muda em nenhum dos dois tamanhos.

  Não se resolve pelo markup: o nome aparece 10 vezes, em duas formas
  diferentes (`<em>` na home, `<span>` nas páginas legais). Uma linha aqui
  cobre as dez.
*/

/*
  O SINAL DO APLICATIVO ANDA JUNTO COM O NOME, E MEDE EM `em`.

  O site inteiro escrevia a marca so por extenso; quem chegava pela loja nao
  reconhecia a pagina. Agora o mesmo desenho do icone abre o topo e o rodape.

  A medida e `em`, e nao pixel, porque a marca ja aparece em dois corpos
  (1,42rem no topo, 1,5rem no rodape) -- em pixel seria preciso corrigir os
  dois na mao toda vez que um deles mudasse. 1,16em poe o sinal um pouco
  acima da altura de caixa alta, que e como um logotipo se assenta ao lado do
  nome sem parecer que escorregou.

  O arquivo e `marca-app.svg`, com o vao entre os quadrados RECORTADO. Nao
  trocar pelo `favicon.png`: ele tem fundo solido e vira um selo cinza no
  escuro do rodape.
*/
.marca__sinal {
  width: 1.16em;
  height: 1.16em;
  flex: none;
  display: block;
  margin-right: 0.4em;
}
/*
  O "Due" vai no verde-água FECHADO, e não no verde da conta.

  É a mesma decisão que `src/tema.ts` já tinha tomado no aplicativo, com a
  mesma justificativa escrita lá: o verde do ícone não sobrevive à leitura
  sobre branco. Em #00a884 o nome dava 2,8:1; aqui dá 3,5:1, acima do mínimo
  de 3:1 para texto grande — e é o tom que aparece nas capturas desta página.

  As páginas legais escrevem a segunda metade com <span>; a home, com <em>.
  As duas formas precisam pintar igual, senão o "Due" fica sem cor fora da capa.
*/
.marca em, .marca span { font-style: normal; color: #00907f; }

/* --------------------------------------------------------- tipografia --- */

/*
  O CONTRASTE SERIFA / SEM-SERIFA É O QUE DÁ O TOM.

  A serifa aparece SÓ nos títulos grandes, em corpo alto e com entrelinha
  apertada — é o que uma capa de revista faz. Todo o resto é sem-serifa,
  disciplinado. Serifa em texto corrido acabaria com o efeito na primeira
  linha.
*/
.display, h1, h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
}

/*
  O teto foi medido contra a COLUNA, e não contra a tela.

  A medição original foi feita com o título antigo ("Todas as suas contas,
  vivas ao mesmo tempo", trocado em 05/09/2026): com 5,4rem a primeira
  linha não cabia na metade esquerda do hero num monitor largo e quebrava
  em duas — o `<br>` do HTML virava o terceiro corte, e o título saía em
  quatro linhas.

  O TETO CONTINUA VALENDO, e por margem menor: a primeira linha de hoje
  ("Vários WhatsApp abertos") tem dois caracteres a mais que a antiga.
  Subir daqui volta a quebrar.
*/
.display { font-size: clamp(2.5rem, 4.5vw, 4.1rem); }
/*
  OS <br> DO TITULO SAO PARA MONITOR, E SOMEM NO CELULAR.

  Eles existem para a clausula em italico nao se partir em duas linhas.
  Numa coluna de 390px eles NAO estouram a largura -- isto foi medido, e o
  documento fica em 375px com ou sem a regra. O problema e outro: a linha
  fixa ja nao cabe, quebra sozinha, e o <br> ACRESCENTA mais um corte em
  cima. O titulo sai em quatro ou cinco linhas irregulares. Escondendo os
  <br>, sobra so a quebra natural com `text-wrap: balance`.
*/
@media (max-width: 620px) { .display br { display: none; } }
h2 { font-size: clamp(2.05rem, 4vw, 3.3rem); }

/* A palavra que carrega o sentido vai em itálico. Uma por título. */
.grifo { font-style: italic; }

h3 {
  font-family: "Instrument Sans", sans-serif;
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0;
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.guia {
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  line-height: 1.55;
  color: var(--tinta-media);
  max-width: 46ch;
}

.etiqueta {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
}

/*
  A MARCA DE SEÇÃO: três traços empilhados, como as fichas do ícone.
  É o baralho reduzido ao menor tamanho em que ainda se reconhece.
*/
.etiqueta::before {
  content: "";
  width: 22px;
  height: 12px;
  flex: 0 0 auto;
  background:
    linear-gradient(var(--cor, var(--tinta)), var(--cor, var(--tinta))) 0 0 / 22px 2px no-repeat,
    linear-gradient(var(--cor, var(--tinta)), var(--cor, var(--tinta))) 3px 5px / 19px 2px no-repeat,
    linear-gradient(var(--cor, var(--tinta)), var(--cor, var(--tinta))) 6px 10px / 16px 2px no-repeat;
  opacity: 0.85;
}

/* ---------------------------------------------------------- aparecendo --- */

.revela {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.revela.dentro { opacity: 1; transform: none; }

/* ------------------------------------------------------------ cabeçalho -- */

.topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(243, 245, 244, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}
/* O fio só aparece depois que a página rola: parado no topo, o cabeçalho é
   parte do papel; rolando, ele precisa se separar do que passa por baixo. */
.topo.rolou {
  border-bottom-color: var(--linha);
  background: rgba(243, 245, 244, 0.86);
}

.topo__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--topo-altura);
}

.topo__links { display: flex; align-items: center; gap: 30px; }
.topo__links a {
  color: var(--tinta-media);
  text-decoration: none;
  font-size: 0.93rem;
  transition: color 0.2s;
}
.topo__links a:hover { color: var(--tinta); }
.topo__links a.botao { color: var(--papel-alto); }
.topo__links a.botao--vazado, .topo__links a.botao--vidro { color: var(--tinta); }

/* ------------------------------------------------------ seletor de idioma -- */
/*
  10/10/2026: o site passou a ter /en e /es. O seletor é LINK SIMPLES para a
  página equivalente, sem JavaScript e sem redirecionamento automático — a raiz
  continua pt-BR para todo mundo. Quem escreve os links é
  `ferramentas/gerar-idiomas.mjs`, a partir de `idiomas/paginas.json`.

  No cabeçalho são as siglas (cabe no celular, ao lado do menu); no rodapé, os
  nomes por extenso. O idioma atual não é link: `aria-current` sem `href`.
*/
.idiomas {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: "DM Mono", monospace;
}
.topo__links .idiomas a {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  padding: 6px 7px;
  border-radius: 8px;
  color: var(--tinta-fraca);
}
.topo__links .idiomas a:hover { color: var(--tinta); }
.topo__links .idiomas a[aria-current] { color: var(--tinta); background: rgba(7, 26, 31, 0.07); }
@media (max-width: 380px) { .topo__links .idiomas a { padding: 6px 4px; } }

.idiomas-rodape {
  grid-column: 1 / -1;
  order: 3;
  margin: 0;
  font-size: 0.84rem;
  color: rgba(243, 245, 244, 0.62);
}
.idiomas-rodape a[aria-current] { color: var(--papel-alto); font-weight: 600; }

/* ------------------------------------------------------- menu do celular -- */

/*
  O menu do celular é uma FOLHA, não uma gaveta lateral.

  Gaveta pede animação de deslize, sombra e um véu por cima do conteúdo — três
  coisas para acertar. A folha cobre a tela inteira, os quatro links ficam em
  corpo grande e o dedo acerta sem mirar. É também o que some mais rápido.
*/
.menu-botao {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--linha-forte);
  border-radius: 4px;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
/* A barra tem classe própria de propósito: por `span`, a regra pegava também
   o rótulo de leitor de tela e desenhava um quarto traço ao lado do ícone. */
.menu-botao .barra {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  position: relative;
  transition: transform 0.24s ease, background 0.12s ease;
}
.menu-botao .barra::before,
.menu-botao .barra::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.24s ease;
}
.menu-botao .barra::before { top: -6px; }
.menu-botao .barra::after { top: 6px; }

/* Aberto, os três traços viram um X — sem trocar de ícone. */
.menu-botao[aria-expanded="true"] .barra { background: transparent; }
.menu-botao[aria-expanded="true"] .barra::before { transform: translateY(6px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .barra::after { transform: translateY(-6px) rotate(-45deg); }

.folha {
  position: fixed;
  inset: var(--topo-altura) 0 0;
  z-index: 55;
  background: var(--papel);
  padding: 12px var(--gutter) 40px;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.folha[data-aberto="sim"] { display: flex; }

.folha a:not(.botao) {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 2rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--tinta);
  padding: 22px 0;
  border-bottom: 1px solid var(--linha);
}
.folha .botao { margin-top: 32px; }
.folha__fim {
  margin-top: auto;
  padding-top: 32px;
  font-family: "DM Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--tinta-fraca);
}

/* Com a folha aberta a página de trás não pode rolar junto. */
body.travada { overflow: hidden; }

@media (max-width: 860px) {
  .topo__links a.esconde-no-celular { display: none; }
  .menu-botao { display: inline-flex; }
  .topo__links { gap: 12px; }
  .topo__links .botao { padding: 11px 18px; font-size: 0.88rem; }
}
@media (min-width: 861px) {
  /* Passando para o desktop com a folha aberta, ela precisa sumir sozinha. */
  .folha { display: none !important; }
}

/* --------------------------------------------------------------- botões -- */

/*
  Cantos quase retos (4px), e não pílula.

  A pílula é o botão padrão de todo site de aplicativo, e é o que faz o
  conjunto parecer um modelo pronto. O canto reto pertence à página impressa,
  que é de onde este desenho vem.
*/
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 4px;
  background: var(--tinta);
  color: var(--papel-alto);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid var(--tinta);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.botao:hover { background: #0d2c33; }

.botao--vazado,
.botao--vidro {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linha-forte);
}
.botao--vazado:hover,
.botao--vidro:hover { background: var(--papel-alto); border-color: var(--linha-forte); }

.botao--pequeno { padding: 11px 22px; font-size: 0.92rem; }
.botao--grande { padding: 20px 40px; font-size: 1.08rem; }
.botao--largo { width: 100%; }

.acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.nota {
  font-family: "DM Mono", monospace;
  font-size: 0.76rem;
  color: var(--tinta-fraca);
  margin-top: 22px;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------- seções --- */

.secao { padding: clamp(72px, 9vw, 140px) 0; border-top: 1px solid var(--linha); }
.secao--limpa { border-top: 0; }
.secao--fundo { background: var(--papel-fundo); }

/*
  A largura da cabeça é em PIXEL, e não em `ch`.

  `ch` mede o "0" da fonte do PRÓPRIO elemento — aqui, a sem-serifa de 17px.
  Vinte e seis deles dão uns 220px, e era nessa coluna que o título de 3,3rem
  estava sendo espremido: "Quatro conversas abertas" saía em quatro linhas de
  uma palavra. A medida que importa é a do título, então ela é declarada
  direto.
*/
.cabeca { max-width: 640px; margin-bottom: clamp(44px, 5vw, 68px); }
.cabeca .guia { margin-top: 24px; max-width: 48ch; }
.cabeca--centro { max-width: 700px; margin-left: auto; margin-right: auto; text-align: center; }
.cabeca--centro .etiqueta { justify-content: center; }
.cabeca--centro .guia { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------ aparelho --- */

/*
  O APARELHO É DESENHADO AQUI, e só a TELA vem de imagem.

  Capturar o celular inteiro num PNG traria a moldura preta junto, e ela
  envelhece: muda de formato a cada geração de aparelho, e não acompanha o
  papel do site. Desenhando a moldura em CSS, a captura é só a interface — e
  ela é a interface de verdade, saída da build do aplicativo.

  O raio acompanha a largura em `cqw` para a curva ficar proporcional em
  qualquer tamanho. Onde não houver suporte a container query, o valor em px
  declarado antes continua valendo.
*/
.aparelho-caixa {
  container-type: inline-size;
  width: 100%;
  max-width: 320px;
}
.aparelho-caixa--largo { max-width: 356px; }

.aparelho {
  position: relative;
  background: #0b1416;
  padding: 2.05%;
  border-radius: 34px;
  border-radius: 11.3cqw;
  box-shadow: var(--sombra-aparelho);
}
.aparelho img {
  width: 100%;
  border-radius: 27px;
  border-radius: 9.2cqw;
  background: #eef1f5;
}

/* O brilho da borda de cima: um fio claro que dá volume ao corpo escuro. */
.aparelho::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.aparelho__legenda {
  font-family: "DM Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  text-align: center;
  margin: 22px 0 0;
}

/* ---------------------------------------------------------------- hero -- */

.hero { padding: clamp(48px, 6vw, 92px) 0 clamp(60px, 8vw, 110px); }

.hero__grade {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(30px, 4vw, 56px);
  align-items: center;
}

.hero__palco { display: flex; justify-content: center; isolation: isolate; }

/*
  O conjunto tem a largura do APARELHO, e não do palco.

  As fichas se posicionam contra ele, então `-38%` é sempre 38% do celular —
  elas saem para fora por um valor previsível e encostam na moldura por uns
  poucos pixels. Ancoradas no palco, que é bem mais largo, a ficha de cima
  caía em cima do título "Suas contas" e escondia a captura que ela deveria
  estar emoldurando.
*/
.hero__conjunto { position: relative; width: 100%; max-width: 356px; }

/*
  AS FICHAS QUE FLUTUAM AO LADO DO APARELHO.

  São as outras contas — as que não cabem na tela mostrada. Elas existem para
  dizer, sem legenda, que a lista da captura não é o limite: continua fora da
  moldura.

  Entram uma a uma na carga e param. O movimento acontece uma vez e não se
  repete: o gesto a mostrar é o de abrir o baralho, não uma animação girando
  para sempre no canto do olho de quem está lendo.
*/
.ficha {
  position: absolute;
  z-index: 2;
  width: 172px;
  padding: 14px 16px;
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: 12px;
  box-shadow: var(--sombra-media);
  animation: flutuar 0.8s cubic-bezier(0.2, 1.1, 0.3, 1) backwards;
}
.ficha::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 12px 12px 0 0;
  background: var(--cor);
}
.ficha__nome {
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 4px 0 2px;
}
.ficha__estado {
  font-family: "DM Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor);
  color: color-mix(in srgb, var(--cor) var(--mistura-texto), var(--tinta));
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}
.ficha__estado::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--cor);
}

.ficha--a { top: 14%; left: -42%; animation-delay: 0.5s; }
.ficha--b { bottom: 12%; right: -42%; animation-delay: 0.68s; }

@keyframes flutuar {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
}

@media (max-width: 960px) {
  .hero__grade { grid-template-columns: 1fr; }
  .hero .guia { max-width: none; }
  .hero__palco { margin-top: 24px; }
  /* Empilhado, o palco é a largura da página, mas o conjunto continua com
     356px: os 42% de deslocamento passam a sair da folha por volta dos 650px
     de tela. Aqui as fichas voltam para dentro. */
  .ficha--a { left: -22%; }
  .ficha--b { right: -22%; }
}
@media (max-width: 560px) {
  /*
    NO CELULAR AS FICHAS SAEM DE CENA.

    Não há para onde deslocá-las: a folha inteira tem a largura de pouco mais
    de um aparelho, então qualquer posição as põe em cima da lista de contas —
    justamente a parte da captura que precisa ser lida. E elas não fazem falta,
    porque o que elas dizem ("há mais contas") a própria captura já mostra, com
    três, e a seção seguinte repete com quatro.
  */
  .ficha { display: none; }
  .hero__conjunto, .aparelho-caixa { max-width: 268px; }
}

/* ---------------------------------------------------------- as sessões --- */

/*
  A PEÇA QUE MOSTRA O QUE NENHUMA CAPTURA MOSTRA.

  A captura de tela prova que a lista de contas existe. Ela não prova o que o
  produto de fato faz: quatro sessões do WhatsApp Web VIVAS ao mesmo tempo, uma
  do lado da outra, sem se enxergarem.

  Por isso este bloco é desenhado, e não fotografado — é um corte do aparelho
  por dentro. A parede tracejada entre as colunas é o isolamento; cada coluna
  tem a cor da sua conta e uma conversa própria andando.
*/
.sessoes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sombra-media);
}
@media (max-width: 820px) { .sessoes { grid-template-columns: repeat(2, 1fr); } }
/* Duas colunas descem até 380px: empilhadas em uma só, as quatro sessões viram
   uma fila de blocos quase iguais, e o que a figura tem para dizer — que elas
   estão LADO A LADO — é exatamente o que se perde. */
@media (max-width: 380px) { .sessoes { grid-template-columns: 1fr; } }

.sessao { padding: 26px 22px 30px; border-left: 1px dashed var(--linha-forte); }
.sessao:first-child { border-left: 0; }
@media (max-width: 820px) {
  .sessao:nth-child(odd) { border-left: 0; }
  .sessao:nth-child(n + 3) { border-top: 1px dashed var(--linha-forte); }
}
@media (max-width: 460px) {
  .sessao { border-left: 0; }
  .sessao + .sessao { border-top: 1px dashed var(--linha-forte); }
}

.sessao__raia { height: 4px; border-radius: 2px; background: var(--cor); margin-bottom: 16px; }
.sessao__nome { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 3px; }
.sessao__estado {
  font-family: "DM Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor);
  color: color-mix(in srgb, var(--cor) var(--mistura-texto), var(--tinta));
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}
.sessao__estado::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--cor);
}

.sessao__conversa { display: flex; flex-direction: column; gap: 7px; margin-top: 22px; }
.sessao__conversa i { display: block; height: 10px; border-radius: 5px; background: var(--papel-fundo); }
/* A bolha "minha" puxa a cor da conta, bem diluída: é o que faz a coluna
   parecer uma conversa e não quatro barras de carregamento. */
.sessao__conversa i.eu {
  margin-left: auto;
  background: rgba(0, 168, 132, 0.16);
  background: color-mix(in srgb, var(--cor) 16%, var(--papel-alto));
}
.sessao__conversa i:nth-child(1) { width: 78%; }
.sessao__conversa i:nth-child(2) { width: 56%; }
.sessao__conversa i:nth-child(3) { width: 88%; }
.sessao__conversa i:nth-child(4) { width: 44%; }

.sessoes__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
  font-family: "DM Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--tinta-fraca);
}

/* --------------------------------------------------------- comparação --- */

.duas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); }
@media (max-width: 780px) { .duas { grid-template-columns: 1fr; } }

.lado__topo {
  font-family: "DM Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  padding-bottom: 16px;
  border-bottom: 2px solid var(--tinta);
  margin-bottom: 6px;
}
.lado--antes .lado__topo { border-bottom-color: var(--linha-forte); }
.lado ul { list-style: none; margin: 0; padding: 0; }
.lado li {
  padding: 20px 0 20px 30px;
  border-bottom: 1px solid var(--linha);
  color: var(--tinta-media);
  line-height: 1.45;
  position: relative;
}
.lado--depois li { color: var(--tinta); }

/* O sinal antes de cada linha: cruz apagada no "antes", traço verde no
   "depois". É o que deixa a leitura funcionar sem cor de fundo. */
.lado--antes li::before,
.lado--depois li::before {
  position: absolute;
  left: 0;
  top: 20px;
  font-family: "DM Mono", monospace;
  font-size: 0.9rem;
  line-height: 1.45;
}
.lado--antes li::before { content: "\00d7"; color: var(--numeral); }
.lado--depois li::before {
  content: "\2014";
  color: var(--c1);
  color: color-mix(in srgb, var(--c1) var(--mistura-texto), var(--tinta));
}

/* --------------------------------------------------------------- passos -- */

/*
  Numeração grande, à esquerda, em serifa. É um dos poucos lugares em que a
  ordem é real — primeiro nomear, depois parear, depois usar —, então o número
  informa em vez de decorar.
*/
.passos-grade {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 900px) {
  .passos-grade { grid-template-columns: 1fr; }
  .passos-grade .aparelho-caixa { margin: 0 auto; }
}

.passos { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.passos li {
  counter-increment: p;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 20px;
  padding: 32px 0;
  border-top: 1px solid var(--linha);
  align-items: start;
}
.passos li:first-child { border-top: 0; padding-top: 0; }
.passos li::before {
  content: counter(p, decimal-leading-zero);
  font-family: "Instrument Serif", serif;
  font-size: 3.2rem;
  line-height: 0.8;
  color: var(--numeral);
}
.passos p { color: var(--tinta-media); margin-top: 8px; font-size: 0.98rem; }

@media (max-width: 620px) {
  .passos li { grid-template-columns: 1fr; gap: 6px; }
  .passos li::before { font-size: 2.3rem; }
}

/* ------------------------------------------------------------ recursos -- */

/*
  Fios de 1px em vez de cartões soltos.

  O fio contínuo é o que uma página impressa faz, e é ele que dá a sensação de
  grade construída em vez de blocos jogados. Cartão com sombra deixaria o
  conjunto com cara de painel de administração.

  As células têm larguras diferentes porque os assuntos têm pesos diferentes —
  e não para "parecer um bento". A regra é simples: quem tem demonstração para
  mostrar ganha espaço; quem se resolve em três linhas ocupa um terço.
*/
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
}
.celula {
  background: var(--papel);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  grid-column: span 2;
}
/* O bento tem 6 colunas, então: meia = 3, terço = 2, cheia = 6. O terço nasceu
   em 22/09/2026, quando a Agenda virou célula inteira em `#organizacao` e
   sobraram TRÊS células na fileira seguinte — três meias dariam 9 e deixariam
   uma órfã com buraco à direita. */
.celula--meia  { grid-column: span 3; }
.celula--terco { grid-column: span 2; }
.celula--cheia { grid-column: span 6; }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .celula, .celula--meia, .celula--terco { grid-column: span 1; }
  /* Com DUAS colunas, três terços dão 2 + 1 órfã e um buraco à direita.
     A última ocupa a fileira inteira. Medido em 820px, 22/09/2026. */
  .celula--terco:last-child { grid-column: span 2; }
  .celula--cheia { grid-column: span 2; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .celula, .celula--meia, .celula--terco, .celula--cheia { grid-column: span 1; }
  /* 10/10/2026: a regra de 900px acima (`:last-child`, span 2) pesa MAIS que
     a linha anterior e vazava para ca: numa grade de UMA coluna, a ultima
     celula de um terco abria uma segunda coluna implicita e empurrava o
     conteudo para fora da tela (medido: 483px de largura num celular de
     390). Estava publicado assim desde 22/09; achado pelo teste do site. */
  .celula--terco:last-child { grid-column: span 1; }
}

.celula__marca { width: 20px; height: 3px; background: var(--cor); margin-bottom: 22px; }
.celula h3 { margin-bottom: 10px; }
.celula p { color: var(--tinta-media); font-size: 0.96rem; margin: 0; }

/* A demonstração fica no PÉ da célula, empurrada por `auto`: assim todas as
   células da mesma linha alinham a figura, mesmo com textos de tamanhos
   diferentes. */
.demo { margin-top: auto; padding-top: 30px; }

/* -- demonstração: sessões isoladas -------------------------------------- */

.demo-sessoes { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.demo-sessoes__painel {
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 12px;
}
.demo-sessoes__raia { height: 4px; border-radius: 2px; background: var(--cor); margin-bottom: 10px; }
.demo-sessoes__linha { height: 7px; border-radius: 4px; background: var(--papel-fundo); margin-bottom: 6px; }
.demo-sessoes__linha:nth-child(3) { width: 74%; }
.demo-sessoes__linha:last-child { width: 52%; margin-bottom: 0; }
.demo-sessoes__parede {
  width: 1px;
  background: repeating-linear-gradient(var(--linha-forte) 0 5px, transparent 5px 10px);
}

/* -- demonstração: cor por conta ----------------------------------------- */

.demo-contas { display: flex; flex-direction: column; gap: 8px; }
.demo-contas__item {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--cor);
  border-radius: 8px;
  padding: 9px 12px;
}
.demo-contas__bola {
  width: 26px; height: 26px;
  flex: 0 0 auto;
  border-radius: 999px;
  /* Mesma mistura das cores de texto: as iniciais são brancas e, na cor pura,
     "TR" sobre o verde dava 3:1. O tom continua sendo o da conta. */
  background: var(--cor);
  background: color-mix(in srgb, var(--cor) var(--mistura-texto), var(--tinta));
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-contas__nome { font-size: 0.86rem; font-weight: 600; }

/* -- demonstração: abas do rodapé ---------------------------------------- */

.demo-abas {
  display: flex;
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 8px;
  gap: 4px;
}
.demo-abas span {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 7px 0;
  border-radius: 6px;
  font-family: "DM Mono", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.demo-abas span[data-ativa] { background: var(--papel-fundo); color: var(--tinta); }
.demo-abas i { display: block; width: 15px; height: 15px; border-radius: 4px; background: currentColor; opacity: 0.5; }
.demo-abas span[data-ativa] i { opacity: 1; background: var(--c1); }

/* -- demonstração: anexos ------------------------------------------------ */

.demo-anexos { display: flex; gap: 10px; }
.demo-anexos span {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  color: var(--tinta-media);
}
.demo-anexos svg { width: 19px; height: 19px; }

/* As regras de .demo-tamanho sairam em 06/09/2026, junto com a celula
   "Tamanho ajustavel" -- o recurso nao existe mais no aplicativo. */

/* -- célula larga com aparelho ------------------------------------------- */

.celula--comtela {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(34px, 4vw, 52px) clamp(30px, 4vw, 48px);
}
.celula--comtela .demo { margin: 0; padding: 0; }
/*
  LARGURA DEFINIDA, E NÃO `max-width` — isto era um defeito silencioso.

  Descoberto em 22/09/2026: as três células com tela renderizavam o aparelho
  com 0x0, e a coluna do grid media "978px 0px". As figuras de `ajustes.webp`
  e `arquivadas.webp` nunca apareceram no site publicado.

  A causa: `.aparelho-caixa` tem `width: 100%`, e aqui ela vive numa coluna
  `auto` do `.celula--comtela`. Coluna `auto` se dimensiona pelo conteúdo, e o
  conteúdo pedia 100% da coluna — a referência circular resolve em zero. Só
  `max-width` não quebra o ciclo, porque não dá largura nenhuma.

  Com largura definida a coluna tem de onde partir; o `max-width: 100%` fica
  como rede para telas estreitas.
*/
.celula--comtela .aparelho-caixa { width: 246px; max-width: 100%; }
@media (max-width: 720px) {
  .celula--comtela { grid-template-columns: 1fr; }
  .celula--comtela .aparelho-caixa { margin: 0 auto; }
}

/* ---------------------------------------------------------- privacidade -- */

/*
  A PRIMEIRA DAS DUAS SUPERFÍCIES ESCURAS.

  A regra antiga dizia "uma só, no fim". Ela cresceu para duas porque a
  privacidade é o argumento que o produto tem e o concorrente não, e um item
  numa grade de seis não carrega isso. As duas ficam longe uma da outra — com
  quatro seções claras no meio —, então continuam sendo pausa, e não padrão.
*/
.escuro {
  background: var(--tinta);
  color: rgba(243, 245, 244, 0.74);
  padding: clamp(80px, 10vw, 150px) 0;
}
.escuro h2 { color: var(--papel-alto); }
.escuro .guia { color: rgba(243, 245, 244, 0.72); }
.escuro .etiqueta { color: rgba(243, 245, 244, 0.62); }
.escuro .nota { color: rgba(243, 245, 244, 0.62); }
.escuro a { color: var(--papel-alto); }

.privacidade__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
@media (max-width: 900px) { .privacidade__grade { grid-template-columns: 1fr; } }

/*
  O DESENHO DO CAMINHO DOS DADOS.

  É a peça que mais trabalha da página: a frase "não passa pelos nossos
  servidores" é fácil de escrever e difícil de acreditar. O desenho mostra a
  linha indo direto do aparelho ao WhatsApp e a nossa caixa fora dela, vazia e
  desligada — o argumento fica visível antes de ser lido.
*/
.caminho { width: 100%; height: auto; }
.caminho text {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.privacidade__lista { list-style: none; margin: 34px 0 0; padding: 0; }
.privacidade__lista li {
  padding: 18px 0 18px 30px;
  border-top: 1px solid rgba(243, 245, 244, 0.14);
  position: relative;
  color: rgba(243, 245, 244, 0.8);
  font-size: 0.99rem;
  line-height: 1.5;
}
.privacidade__lista li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  top: 18px;
  color: var(--c1);
  font-family: "DM Mono", monospace;
  line-height: 1.5;
}
.privacidade__lista strong { color: var(--papel-alto); font-weight: 600; }

/*
  A ressalva e o link saem da coluna e viram uma faixa própria.

  Empilhados junto da lista, eles faziam a coluna da esquerda passar dos 900px
  contra 420 do desenho — meio metro de vazio à direita, que lia como erro e
  não como respiro. Numa faixa, o desenho volta a ter altura parecida com o
  texto e a ressalva ganha o peso de nota de rodapé, que é o que ela é.
*/
.privacidade__pe {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
  margin-top: clamp(44px, 5vw, 70px);
  padding-top: clamp(30px, 4vw, 44px);
  border-top: 1px solid rgba(243, 245, 244, 0.14);
}
.privacidade__pe .nota { margin: 0; line-height: 1.7; max-width: 76ch; }
@media (max-width: 760px) {
  .privacidade__pe { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ para quem -- */

.publico {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
}
@media (max-width: 860px) { .publico { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .publico { grid-template-columns: 1fr; } }

.publico__item { background: var(--papel); padding: 32px 28px; }
.publico__item h3 { margin-bottom: 8px; }
.publico__item p { color: var(--tinta-media); font-size: 0.94rem; margin: 0; }
.publico__num {
  font-family: "DM Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--cor);
  color: color-mix(in srgb, var(--cor) var(--mistura-texto), var(--tinta));
  display: block;
  margin-bottom: 18px;
}

/* --------------------------------------------------- contra dois aparelhos */

.confronto { width: 100%; border-collapse: collapse; }
.confronto th, .confronto td {
  text-align: left;
  padding: 20px 18px;
  border-bottom: 1px solid var(--linha);
  vertical-align: top;
  font-size: 0.97rem;
}
.confronto thead th {
  font-family: "DM Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  font-weight: 500;
  border-bottom-color: var(--tinta);
  padding-bottom: 14px;
}
.confronto tbody th {
  font-weight: 500;
  color: var(--tinta);
  width: 34%;
}
.confronto td { color: var(--tinta-media); }
/* A coluna do produto fica em branco de papel: separa sem precisar de cor. */
.confronto .col-nos { background: var(--papel-alto); color: var(--tinta); }
.confronto thead .col-nos { color: var(--tinta); }
/*
  NO CELULAR A TABELA DEIXA DE SER TABELA.

  Três colunas em 330px davam quatro palavras por linha — "Mais um / para /
  comprar, / carregar e / levar." Rolar de lado resolveria a largura e criaria
  outro problema: a coluna que interessa comparar fica fora da tela junto com a
  outra. Empilhado, cada linha vira um confronto legível de cima para baixo, e
  o rótulo de cada lado vem do `data-quem` — o mesmo texto do cabeçalho que
  some.
*/
@media (max-width: 680px) {
  .confronto, .confronto tbody, .confronto tr, .confronto th, .confronto td {
    display: block;
    width: auto;
  }
  .confronto thead { display: none; }
  .confronto tr { padding: 24px 0; border-bottom: 1px solid var(--linha); }
  .confronto tbody th {
    width: auto;
    padding: 0 0 14px;
    border: 0;
    font-size: 1.05rem;
    font-weight: 600;
  }
  .confronto td {
    padding: 0 0 0 16px;
    border: 0;
    border-left: 2px solid var(--linha);
    margin-bottom: 14px;
    font-size: 0.94rem;
  }
  .confronto td:last-child { margin-bottom: 0; }
  .confronto td::before {
    content: attr(data-quem);
    display: block;
    font-family: "DM Mono", monospace;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
    margin-bottom: 5px;
  }
  /* O lado do produto continua se destacando — por fio, e não por fundo:
     empilhado, o retângulo branco viraria uma caixa solta no meio do texto. */
  .confronto .col-nos { background: transparent; border-left-color: var(--c1); }
  .confronto .col-nos::before { color: var(--tinta); }
}

/* -------------------------------------------------------------- planos -- */

.ciclo {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--linha-forte);
  border-radius: 6px;
  background: var(--papel-alto);
  margin-bottom: 38px;
}
.ciclo button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--tinta-media);
  padding: 9px 20px;
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease;
}
.ciclo button[aria-pressed="true"] { background: var(--tinta); color: var(--papel-alto); }
.ciclo .economia {
  font-family: "DM Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--c1);
  color: color-mix(in srgb, var(--c1) var(--mistura-texto), var(--tinta));
  margin-left: 8px;
}
.ciclo button[aria-pressed="true"] .economia { color: #6ee7b7; }

.planos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
}
@media (max-width: 1020px) { .planos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .planos { grid-template-columns: 1fr; } }

.plano {
  background: var(--papel);
  padding: 36px 26px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.plano--destaque { background: var(--papel-alto); }
.plano--destaque::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--tinta);
  pointer-events: none;
}

.plano__selo {
  font-family: "DM Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--papel-alto);
  background: var(--tinta);
  padding: 4px 10px;
  align-self: flex-start;
  margin: -36px 0 18px -26px;
}

.plano__nome {
  font-family: "Instrument Serif", serif;
  font-size: 1.65rem;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.plano__contas {
  font-family: "DM Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor);
  color: color-mix(in srgb, var(--cor) var(--mistura-texto), var(--tinta));
  margin: 0 0 24px;
}

/* O par de preços vive junto no HTML e o seletor troca qual aparece. Sem
   JavaScript fica o mensal — que é o que a pessoa procura primeiro. */
.plano__preco {
  font-family: "Instrument Serif", serif;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.plano__preco small {
  font-family: "Instrument Sans", sans-serif;
  font-size: 0.84rem;
  color: var(--tinta-fraca);
  letter-spacing: 0;
}
.plano__abaixo {
  font-family: "DM Mono", monospace;
  font-size: 0.66rem;
  line-height: 1.6;
  color: var(--tinta-fraca);
  margin: 0 0 22px;
  min-height: 2.1em;
}
.plano__abaixo b { color: var(--c1); color: color-mix(in srgb, var(--c1) var(--mistura-texto), var(--tinta)); font-weight: 500; }

.plano__valor[data-ciclo="ano"] { display: none; }
/* ---------------------------------------------------------- formulario -- */
/*
  O formulario da pagina de contato. Sem servidor: ele monta a mensagem e
  entrega ao programa de e-mail da pessoa. Ver o comentario em contato.html.
*/
.formulario { margin: 28px 0 8px; }

.campo { margin-bottom: 20px; }
.campo label {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 7px;
}
.campo input,
.campo textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--tinta);
  box-shadow: 0 0 0 3px rgba(18, 61, 70, 0.10);
}
.campo__dica {
  margin: 7px 0 0;
  font-size: 0.86rem;
  color: var(--tinta-fraca);
}

/* Duas colunas no computador, empilhado no celular: e-mail e telefone cabem
   lado a lado e encurtam o formulario, que ja e longo. */
.campo-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .campo-duplo { grid-template-columns: 1fr; } }

/*
  A armadilha de robo. Fora da tela, e nao `display:none`: leitor de tela ignora
  o que esta escondido por display, mas alguns robos tambem checam isso -- e o
  campo precisa existir de verdade para a isca funcionar. O aria-hidden no HTML
  cuida de quem usa leitor.
*/
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario__aviso {
  font-size: 0.88rem;
  color: var(--tinta-fraca);
  background: var(--papel-alto);
  border-left: 2px solid var(--linha-forte);
  padding: 12px 16px;
  margin: 0 0 20px;
}

.formulario__acoes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/*
  A resposta ao envio. `white-space: pre-wrap` porque o caminho de emergencia
  despeja a mensagem inteira aqui para a pessoa copiar a mao -- sem isso as
  quebras de linha sumiriam e o texto viraria um bloco ilegivel.
*/
.formulario__resposta {
  margin: 18px 0 0;
  font-size: 0.92rem;
  white-space: pre-wrap;
}
.formulario__resposta:empty { display: none; }
.formulario__resposta.e-bom { color: var(--c1); }
.formulario__resposta.e-erro { color: #b4413a; }

/*
  A faixa de "mais de 30 contas". Encostada na grade dos planos, com o mesmo
  fio de 1px, para ler como continuacao da mesma tabela e nao como anuncio
  solto. Empilha no celular, onde lado a lado nao cabe.
*/
.acima {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 24px 26px;
  border: 1px solid var(--linha);
  border-top: 0;
  background: var(--papel-alto);
}
.acima__texto { flex: 1 1 320px; }
.acima__titulo { font-weight: 600; margin: 0 0 4px; }
.acima__linha {
  margin: 0;
  font-size: 0.94rem;
  color: var(--tinta-fraca);
  max-width: 62ch;
}

.planos-bloco[data-ciclo="ano"] .plano__valor[data-ciclo="mes"] { display: none; }
.planos-bloco[data-ciclo="ano"] .plano__valor[data-ciclo="ano"] { display: block; }

.plano__lista {
  list-style: none;
  margin: auto 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--linha);
}
.plano__lista li {
  font-size: 0.89rem;
  color: var(--tinta-media);
  padding: 6px 0 6px 20px;
  position: relative;
}
.plano__lista li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--linha-forte);
  font-family: "DM Mono", monospace;
}

.planos__nota { margin-top: 30px; font-size: 0.92rem; color: var(--tinta-fraca); max-width: 68ch; }

/* ---------------------------------------------------------- perguntas --- */

.perguntas { max-width: 820px; }
.pergunta { border-top: 1px solid var(--linha); }
.pergunta:last-child { border-bottom: 1px solid var(--linha); }
.pergunta summary {
  cursor: pointer;
  padding: 26px 46px 26px 0;
  font-family: "Instrument Serif", serif;
  font-size: 1.38rem;
  letter-spacing: -0.01em;
  list-style: none;
  position: relative;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
  content: "+";
  position: absolute; right: 4px; top: 24px;
  font-family: "DM Mono", monospace;
  font-size: 1.3rem;
  color: var(--tinta-fraca);
}
.pergunta[open] summary::after { content: "\2013"; }
.pergunta__corpo { padding: 0 0 26px; color: var(--tinta-media); max-width: 64ch; }

/* ------------------------------------------------------------- chamada -- */

.chamada { text-align: center; }
.chamada h2 { max-width: 17ch; margin: 0 auto 24px; }
.chamada .guia { margin: 0 auto; }
.chamada .etiqueta { justify-content: center; }
.chamada .acoes { justify-content: center; }

/*
  OS DOIS CARTOES DAS LOJAS.

  Eram duas caixinhas de borda fina com texto de 1rem no meio de uma secao
  de 150px de respiro: encolhiam exatamente onde a pagina devia convidar. A
  captura nao deixava duvida -- pareciam espaco reservado, e nao elemento.

  POR QUE NAO TEM O LOGOTIPO DAS LOJAS. As duas exigem a arte OFICIAL, sem
  modificacao, e o badge oficial diz "Baixar" -- hoje nao ha o que baixar. E
  ha um motivo de calendario: enquanto a versao estiver em analise, a Apple
  entra nesta URL, e marca da Apple desenhada a mao e a diretriz 5.2.5 na
  veia. QUANDO AS LOJAS ABRIREM: badge oficial das duas, baixado das paginas
  de marca, com link real, e o `<span>` vira `<a>`.

  O PONTO PULSA PORQUE A ANALISE ESTA ACONTECENDO AGORA. E a unica animacao
  da secao, e ela diz uma coisa verdadeira -- por isso existe. Some inteira
  em `prefers-reduced-motion`.
*/
/*
  `.loja` SERVE A DOIS ELEMENTOS DIFERENTES desde 24/09/2026: a Google Play e um
  <a>, porque o aplicativo esta publicado, e a App Store continua um <span>,
  porque continua em revisao. O seletor nao distingue os dois de proposito -- a
  caixa e a mesma, e so o que e link ganha as regras de link abaixo.
*/
.loja {
  display: inline-flex;
  flex-direction: column;
  gap: 11px;
  min-width: 234px;
  padding: 22px 26px;
  border: 1px solid rgba(243, 245, 244, 0.22);
  border-radius: 6px;
  background: rgba(243, 245, 244, 0.03);
  text-align: left;
}
/*
  So o SELO QUE E LINK reage. `a.loja` em vez de `.loja:hover` evita que a caixa
  da App Store, que nao leva a lugar nenhum, acenda ao passar o mouse e prometa
  um clique que nao existe.

  O foco NAO e redefinido aqui: a regra global `:focus-visible` (topo deste
  arquivo) ja da contorno de 2px em `--c2` com deslocamento de 4px, e ela vale
  para este <a> como vale para qualquer outro link do site.
*/
a.loja {
  text-decoration: none;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
a.loja:hover {
  border-color: rgba(0, 168, 132, 0.55);
  background: rgba(0, 168, 132, 0.08);
}
.loja__marca { font-weight: 600; font-size: 1.16rem; color: var(--papel-alto); letter-spacing: -0.01em; }
.loja__estado {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "DM Mono", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* 5,9:1 sobre `--tinta`: passa com folga para texto pequeno. */
  color: var(--c1);
}
.loja__estado::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--c1);
  animation: loja-pulso 2.4s ease-in-out infinite;
}
/*
  O PONTO PARA DE PULSAR NO ESTADO PUBLICADO, e a razao e de sentido, nao de
  gosto: pulsar diz "acontecendo agora", que era exatamente o que "Em analise"
  queria dizer. Uma loja que ja aprovou nao esta acontecendo -- esta pronta. O
  ponto fica aceso e parado.

  A cor NAO muda: `--c1` ja e o verde da marca, ja mede 5,9:1 sobre `--tinta` e
  ja passa para texto pequeno. O que separa os dois estados e a PALAVRA e o
  movimento, nao mais uma cor para o olho decifrar.
*/
.loja__estado--no-ar::before {
  animation: none;
}
@keyframes loja-pulso {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.78); }
}
@media (prefers-reduced-motion: reduce) {
  .loja__estado::before { animation: none; }
}
@media (max-width: 460px) { .loja { min-width: 0; width: 100%; } }

/* ---------------------------------------------------------------- verse -- */

/*
  A EMPRESA APARECE, E NÃO TOMA A PÁGINA.

  O ZappyDue é a marca deste site; a Verse é quem responde por ele. Uma faixa
  de uma linha, no mesmo escuro do fim, resolve as duas coisas — sem virar um
  segundo "sobre nós" competindo com o produto.
*/
/*
  OS ESTILOS DO BLOCO DA EMPRESA SAIRAM COM ELE — 04/09/2026.
  Ver o comentario no fim do index.html, na secao das lojas.
*/

/* -------------------------------------------------------------- rodapé -- */

/*
  O FIM DA PAGINA E UMA DESPEDIDA, NAO UM INDICE.

  O que havia aqui era o rodape generico de qualquer site: quatro colunas
  iguais, a marca reduzida a 26px e a frase do produto rebaixada a legenda de
  0,95rem. Com nove links espalhados em quatro colunas, "Legal" ficava com
  dois itens e sobrava meia tela de vazio a direita. A captura mostrava isso
  sem discussao.

  Quatro decisoes, em ordem de peso:

  1. A FRASE DO PRODUTO VIROU TITULO. "Varios WhatsApp Web no mesmo celular,
     cada um no seu lugar" era caption; agora e serifa grande, com o italico
     na parte que carrega o sentido -- o tratamento exato de todo `h2` desta
     pagina. A regra da casa diz que a serifa so aparece em titulo grande:
     aqui ela aparece em titulo grande, num lugar onde ninguem espera. E o
     risco desta tela, e e o que da voz ao rodape.

  2. A MARCA GANHOU ESCALA. Em 26px o sinal do aplicativo virava uma mancha
     verde -- o quadrado de tras e o recorte simplesmente nao se liam. No
     corpo da capa ele volta a ser o icone que a pessoa viu na loja.

  3. O VAZIO VIROU INFORMACAO. A quarta coluna deixou de ser sobra e passou a
     responder a pergunta que a pagina inteira faz uma vez so: em que
     aparelhos isto roda, e onde se baixa. QUANDO AS LOJAS ABRIREM, e aqui
     que entram os dois links -- e a secao `#lojas` continua sendo o unico
     lugar que fala em obter o aplicativo.

  4. O FIM VIROU DOIS TEXTOS. A isencao da Meta e aviso legal; o `(c)` com
     CNPJ e assinatura. Estavam grudados na mesma frase.

  AS RAIAS DE SEIS CORES SAIRAM. Fora do contexto de sessao elas eram um
  traco arco-iris solto, e faixa colorida de rodape e decoracao de empresa
  generica -- o oposto do que este site e.
*/

.rodape {
  background: var(--tinta);
  color: rgba(243, 245, 244, 0.6);
  padding: 0 0 44px;
  /* A emenda. O rodape vem depois de `.escuro`, que e o MESMO `--tinta`:
     sem este fio de largura inteira os dois viram um bloco escuro so. */
  border-top: 1px solid rgba(243, 245, 244, 0.14);
}
.rodape a { color: rgba(243, 245, 244, 0.86); text-decoration: none; }
.rodape a:hover { color: var(--papel-alto); }

/* ---- a capa: a fala de um lado, quem fala do outro ---- */

/*
  A CAPA E UMA CITACAO: DECLARACAO A ESQUERDA, ASSINATURA A DIREITA.

  Na primeira tentativa a marca vinha a esquerda e a frase a direita, as duas
  alinhadas no topo, e a captura mostrou o problema: eram dois objetos soltos
  a 400px um do outro, sem relacao nenhuma. Trocando a ordem, a leitura se
  resolve sozinha -- primeiro o que se diz, depois quem diz. E o unico
  alinhamento a direita do site inteiro, e e de proposito: e o que faz a
  marca funcionar como assinatura em vez de logotipo perdido.

  No celular as duas empilham nessa mesma ordem, e a assinatura volta para a
  esquerda: coluna estreita nao comporta a leitura em diagonal.
*/
.rodape__capa {
  display: grid;
  grid-template-columns: 1.7fr auto;
  gap: 40px;
  align-items: start;
  padding: 66px 0 52px;
}
@media (max-width: 760px) {
  .rodape__capa { grid-template-columns: 1fr; gap: 32px; padding: 52px 0 42px; }
}

.rodape .marca {
  color: var(--papel-alto);
  font-size: 1.9rem;
  justify-self: end;
  /* Sobe a assinatura para a primeira linha da frase: a serifa tem entrelinha
     1,08 e a caixa alta dela comeca abaixo do topo do bloco. */
  margin-top: 6px;
}
@media (max-width: 760px) { .rodape .marca { justify-self: start; margin-top: 0; } }
.rodape .marca em, .rodape .marca span { color: var(--c1); }
/* No rodape o sinal cresce: e aqui que ele e a assinatura da pagina, e em
   1,16em (o tamanho do topo) o quadrado de tras nao se lia. */
.rodape .marca__sinal { width: 1.42em; height: 1.42em; }

/*
  A frase de despedida. Serifa, como todo titulo grande do site.

  `text-wrap: balance` e o que impede a segunda linha de ficar com duas
  palavras orfas quando a tela encolhe -- num titulo de duas linhas isso
  aparece na hora.
*/
.rodape__frase {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.62rem, 2.9vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--papel-alto);
  margin: 0;
  max-width: 24ch;
  text-wrap: balance;
}

/* ---- as colunas ---- */

.rodape__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-top: 46px;
  border-top: 1px solid rgba(243, 245, 244, 0.14);
}
@media (max-width: 860px) { .rodape__grade { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 560px) { .rodape__grade { grid-template-columns: 1fr; gap: 30px; } }

.rodape h4 {
  font-family: "DM Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(243, 245, 244, 0.62);
  margin: 0 0 18px;
}
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 11px; }

.rodape__nota {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 24ch;
}

/* ---- o colofao ---- */

/*
  O COLOFAO REPETE A COMPOSICAO DA CAPA, E ISSO E DE PROPOSITO.

  A capa abre com a fala a esquerda e a assinatura a direita. O fim fecha do
  mesmo jeito: aviso legal a esquerda, `(c)` a direita. A pagina inteira
  passa a ter um comeco e um fim que rimam, e o bloco escuro deixa de
  terminar num degrau de tres linhas empilhadas no canto esquerdo.

  `align-items: end` encosta a assinatura na ULTIMA linha do aviso, e nao no
  topo dele: e o alinhamento que faz as duas parecerem a mesma linha de
  base quando o aviso quebra em duas.
*/
.rodape__base {
  border-top: 1px solid rgba(243, 245, 244, 0.14);
  margin-top: 46px;
  padding-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px 44px;
  align-items: end;
}
@media (max-width: 860px) {
  .rodape__base { grid-template-columns: 1fr; align-items: start; }
}
.rodape__fim {
  font-size: 0.84rem;
  color: rgba(243, 245, 244, 0.62);
  max-width: 64ch;
  margin: 0;
}
/*
  A assinatura, em DM Mono como as etiquetas do site: texto de servico, lido
  depois de tudo.

  A opacidade e 0,55 e nao menos. Em 0,48 o contraste sobre `--tinta` cai
  para 4,6:1, e isto e corpo 0,7rem -- fica na margem dos 4,5:1 da WCAG. Em
  0,55 da 5,6:1, com folga.
*/
.rodape__selo {
  font-family: "DM Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: rgba(243, 245, 244, 0.55);
  margin: 0;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 860px) { .rodape__selo { text-align: left; white-space: normal; } }

/* ------------------------------------------------- páginas de texto ----- */

.texto { padding: clamp(50px, 7vw, 90px) 0 clamp(70px, 9vw, 120px); }
.texto__folha { max-width: 720px; }
.texto h1 { font-size: clamp(2.5rem, 5.6vw, 3.8rem); margin-bottom: 14px; }
.texto .data {
  font-family: "DM Mono", monospace;
  font-size: 0.75rem;
  color: var(--tinta-fraca);
  margin: 0 0 44px;
  letter-spacing: 0.04em;
}
.texto h2 {
  font-size: 1.7rem;
  margin: 50px 0 16px;
  padding-top: 30px;
  border-top: 1px solid var(--linha);
}
.texto h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.texto h3 { margin-top: 30px; margin-bottom: 8px; }
.texto p, .texto li { color: var(--tinta-media); }
.texto strong { color: var(--tinta); }
.texto ul { padding-left: 22px; margin: 0 0 1.1rem; }
.texto li { margin-bottom: 9px; }

.resumo {
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--c1);
  padding: 26px 28px;
  margin-bottom: 44px;
}
.resumo p { color: var(--tinta); margin: 0; }

.destaque {
  background: #fdf6ec;
  border: 1px solid #e8d6b4;
  padding: 24px 26px;
  margin-bottom: 40px;
}
.destaque p { color: #6b4f1f; margin: 0; }

.chave { border-left: 3px solid var(--c1); padding: 4px 0 4px 20px; margin: 0 0 1.1rem; }
.chave p { color: var(--tinta); margin: 0; }

.sumario {
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  padding: 28px 30px;
  margin: 0 0 50px;
}
.sumario h2 {
  font-family: "DM Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  font-weight: 500;
  border: 0; padding: 0; margin: 0 0 18px;
}
.sumario ol { list-style: none; counter-reset: c; margin: 0; padding: 0; columns: 2; column-gap: 34px; }
@media (max-width: 620px) { .sumario ol { columns: 1; } }
.sumario li {
  counter-increment: c;
  margin: 0 0 9px;
  break-inside: avoid;
  color: var(--tinta-media);
  font-size: 0.93rem;
}
.sumario li::before {
  content: counter(c, decimal-leading-zero);
  font-family: "DM Mono", monospace;
  font-size: 0.72rem;
  color: var(--tinta-fraca);
  margin-right: 10px;
}
.sumario a { color: var(--tinta-media); text-decoration: none; }
.sumario a:hover { color: var(--c1); color: color-mix(in srgb, var(--c1) var(--mistura-texto), var(--tinta)); }

.texto h2[id] { scroll-margin-top: calc(var(--topo-altura) + 20px); }

.tabela-envolve { overflow-x: auto; margin: 0 0 26px; }
.tabela { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.9rem; }
.tabela th, .tabela td {
  text-align: left;
  padding: 14px 15px;
  border-bottom: 1px solid var(--linha);
  vertical-align: top;
}
.tabela th {
  font-family: "DM Mono", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  font-weight: 500;
  border-bottom-color: var(--linha-forte);
}
.tabela td { color: var(--tinta-media); }
.tabela td:first-child { color: var(--tinta); }

.aviso-lei {
  font-size: 0.87rem;
  color: var(--tinta-fraca);
  border-top: 1px solid var(--linha);
  padding-top: 24px;
  margin-top: 44px;
}