/*
  O CSS do site, em arquivo proprio.

  Ele ja morou dentro do <style> da pagina, autorizado no CSP por hash. O
  desenho funcionava, mas era fragil: qualquer descompasso entre o corpo
  que o navegador tem guardado e o cabecalho que ele acabou de receber
  bloqueia o bloco inteiro — e a pagina aparece SEM ESTILO NENHUM, que e a
  falha mais feia possivel. Em arquivo, 'self' cobre e nao ha hash pra
  descasar; de quebra o navegador guarda o CSS entre visitas.

  ------------------------------------------------------------------
  A COR VEM DA COMIDA, NAO DA INTERFACE.

  Esta pagina tem uma foto de feijoada e mais nada colorido. Os neutros
  puxam pro verde-oliva (nao pro cinza, que parece que ninguem escolheu,
  nem pro creme com terracota, que e o visual padrao de tudo que sai de
  IA hoje), e o verde aparece so onde ha o que apertar.

  O verde e EXATAMENTE o do app (#157f3c). Antes eram dois verdes quase
  iguais e diferentes, o que e o pior dos dois mundos: nao se percebe
  como escolha e se percebe como descuido.

  Fonte do sistema, sem webfont. O CSP bloqueia CDN, entao a alternativa
  seria embutir a fonte em base64 — uns 50 KB a mais na primeira dobra de
  uma pagina que abre no 4G de quem viu um video. A hierarquia aqui vem
  de tamanho e peso, que sao de graca.
  ------------------------------------------------------------------
*/

:root {
  --papel: #fbfbf9;
  --papel-baixo: #f1f4ee;
  --papel-alto: #ffffff;

  --tinta: #12160f;
  --tinta-suave: #545c4e;
  /*
    Era #8a9382, que dá 3,2:1 sobre o papel — abaixo dos 4,5:1 que a
    WCAG pede pra texto. E ele não pinta enfeite: pinta a linha embaixo
    do botão, o "provavelmente entre 690 e 830" (que é o argumento
    central do produto) e o "1 concha" (que é a prova de que ele entende
    comida brasileira). Numa tela de Android barato, no sol, sumia.
    #68715f dá 4,9:1 e não muda mais nada.
  */
  --tinta-fraca: #68715f;
  --linha: #e3e8dd;

  /*
    ------------------------------------------------------------------
    A FONTE DE TÍTULO, SEM BAIXAR UM BYTE.

    A CSP tem `font-src 'self'`, então webfont de CDN está fora — e
    embutir uma em base64 custaria ~50 KB na primeira dobra de quem
    abriu num 4G depois de ver um reel.

    A saída é uma stack de SLAB/SERIF que já existe nos aparelhos:
    Roboto Slab vem no Android (81% do público), Charter e Cambria no
    resto. Todo título passa a ter serifa e contraste de traço contra um
    corpo em sans do sistema — que é a diferença mais visível que dá pra
    fazer aqui, e ela é de graça.

    Isso também resolve um "carimbo de IA" documentado: página inteira
    numa fonte sans só (Inter, no caso mais citado) é um dos sinais que
    designers apontam como saída de gerador.
    ------------------------------------------------------------------
  */
  /* A serifa saiu: serifa de display + itálico colorido é o par que hoje
     denuncia página gerada por máquina, e o dono recusou ele duas vezes.
     O sistema da /prato é peso e entreletra, não família. */
  --fonte-titulo: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-corpo: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --verde: #157f3c;
  --verde-forte: #0e5f2c;
  --verde-fraco: #e7f2e9;
  /*
    O tom que a câmera e os destaques usam quando o fundo é escuro. O
    `--verde` acima dá 4,9:1 sobre papel e menos de 2:1 sobre a capa
    preta — é o mesmo par que o app já mantém.
  */
  --verde-vivo: #4ade80;

  /*
    O MESMO VERDE EM COMPONENTES SOLTOS, e ele FALTAVA aqui.

    `rgba(var(--verde-rgb), 0.4)` estava escrito em dez lugares deste
    arquivo — a borda da seção do cupom, o fundo da coluna "Noprato" da
    corrida, e as três tentativas de halo da capa. A variável só existia
    no `src/estilos.css`, que é OUTRO arquivo e não alcança este.

    O efeito é o pior possível: `rgba()` com argumento inválido invalida
    a DECLARAÇÃO INTEIRA, sem erro nenhum. A última tentativa de halo
    derrubou junto o `background` completo da capa, e ela apareceu
    branca — com o texto claro sumindo no branco.

    Enquanto foi só a borda de uma seção, ninguém viu. É a mesma família
    do resto: escrito, sem erro, e não acontece.
  */
  --verde-rgb: 21, 127, 60;

  --proteina: #c33b54;
  --carboidrato: #a86a06;
  --gordura: #2965c4;

  /*
    Sombra em TRÊS camadas, tingida de verde.

    Uma sombra só é o que faz superfície parecer adesivo colado: ou fica
    achatada (raio curto) ou fica borrão (raio longo). Objeto de verdade
    projeta três coisas ao mesmo tempo — o contato quase preto onde ele
    encosta, a penumbra média, e a sombra funda e difusa da luz do
    ambiente. É isso que o olho lê como PESO.

    E o pigmento é verde-oliva, não cinza neutro: sombra cinza sobre
    fundo esverdeado suja a cor em vez de escurecer. O mesmo motivo pelo
    qual os neutros da paleta puxam pro verde.
  */
  --sombra:
    0 1px 1px rgba(28, 42, 22, 0.04),
    0 4px 8px -4px rgba(28, 42, 22, 0.06),
    0 16px 32px -16px rgba(28, 42, 22, 0.14);
  --sombra-alta:
    0 1px 1px rgba(28, 42, 22, 0.05),
    0 8px 16px -6px rgba(28, 42, 22, 0.09),
    0 32px 64px -24px rgba(28, 42, 22, 0.22);

  /* A curva. `ease` do navegador desacelera cedo demais e parece mole;
     esta sai rápido e assenta, que é como coisa com massa se move. */
  --mola: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/*
  ---------- PROFUNDIDADE ----------

  O que dá volume aqui não é 3D de biblioteca — é como a luz cai. Três
  coisas juntas, e nenhuma custa um byte de JavaScript:

  1. a sombra de três camadas acima;
  2. uma aresta clara no topo de cada superfície (o `linear-gradient`
     abaixo), que é o reflexo da luz batendo na quina de cima — é o
     detalhe que separa "retângulo branco" de "objeto levantado";
  3. o movimento de erguer no toque/hover, curto o bastante pra parecer
     físico e não animação.

  Cena 3D de verdade (WebGL) custaria uns 600 KB antes do primeiro
  pixel, num público que é 81% Android em 4G — e prato flutuando girando
  é hoje a assinatura visual mais reconhecível de página gerada em
  série. O caro aqui é o contrário disso.
*/
.fichas li,
.plano,
.cartao-plano,
details,
.passo__figura--ui {
  box-shadow: var(--sombra);
  border-color: rgba(28, 42, 22, 0.07);
  background-image: linear-gradient(rgba(255, 255, 255, 0.9), transparent 40%);
  transition:
    transform 0.18s var(--mola),
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.fichas li:hover,
.plano:hover,
.cartao-plano:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-alta);
  border-color: rgba(21, 127, 60, 0.35);
}

/* O botão principal não muda só de cor: ele SOBE. Cor é decoração,
   deslocamento é o que o dedo lê como "isto é apertável". */
.botao--grande {
  box-shadow:
    0 2px 4px rgba(21, 127, 60, 0.2),
    0 12px 28px -10px rgba(21, 127, 60, 0.55);
  transition:
    transform 0.16s var(--mola),
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.botao--grande:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(21, 127, 60, 0.22),
    0 20px 40px -12px rgba(21, 127, 60, 0.6);
}

/* Detalhes que ninguém genérico faz. */
::selection {
  background: rgba(21, 127, 60, 0.22);
  color: var(--tinta);
}

/* Halo de foco quadrado em botão redondo é a marca de CSS não revisado. */
.botao:focus-visible {
  border-radius: inherit;
}

/*
  Movimento é sintoma, não enfeite, pra quem tem enxaqueca vestibular.
  Mesma regra que o app já segue na tarja de atualização.
*/
@media (prefers-reduced-motion: reduce) {
  .fichas li,
  .plano,
  .cartao-plano,
  details,
  .botao--grande {
    transition: none;
  }

  .fichas li:hover,
  .plano:hover,
  .cartao-plano:hover,
  .botao--grande:hover {
    transform: none;
  }
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

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

/*
  TODO link começa estilizado.

  Esta regra não existia, e o resultado foi um link roxo sublinhado do
  navegador no meio de uma página que não tem roxo em lugar nenhum. É a
  falha mais fácil de cometer num CSS assim: as classes de botão cobrem
  quase tudo, então o único <a> sem classe passa despercebido em todo
  teste que não seja olhar a tela.

  Regra na raiz e não remendo naquele link: o próximo <a> que alguém
  escrever já nasce certo.
*/
a {
  color: var(--verde-forte);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

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

/* Os botões e a marca decidem a própria cor: são <a> por serem navegação,
   não por serem texto. */
.botao,
.marca {
  text-decoration: none;
}

/* A largura de leitura. Tudo mora dentro dela. */
.dentro {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

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

/*
  O `clamp` era calibrado pra headline de três palavras ("Fotografe o
  prato"). Com a headline de agora, que é uma FRASE, 10.5vw estourava a
  margem no celular — as palavras da direita saíam da tela, e num título
  ninguém percebe que o texto continua: parece só uma frase mal escrita.

  8.4vw cabe a frase inteira num aparelho de 360px, que é o piso do
  público (81% Android). `overflow-wrap` é o cinto de segurança pra
  palavra comprida que alguém escreva aqui depois.
*/
.titulo {
  margin: 0 0 1rem;
  font-family: var(--fonte-titulo);
  /*
    Tipografia grande e o unico recurso visual que nao custa byte com
    fonte de sistema. Mas GRANDE tem teto, e o teto foi ultrapassado.

    Era `clamp(1.95rem, 8vw, 4.2rem)`. A ~990px isso batia no teto de
    4,2rem = 67px, e a frase inteira ocupava SEIS linhas — empurrando a
    demonstracao (a foto com o cartao lendo o prato) pra fora da
    primeira tela. Numa pagina cujo comentario diz que 64% das pessoas
    nunca rolam alem dela, isso enterra o melhor argumento embaixo do
    titulo.

    Titulo grande demais nao e enfase, e obstaculo: ele rouba o espaco
    do unico elemento que PROVA o produto.

    6,2vw no lugar de 8vw suaviza o meio da faixa, e o teto volta pros
    3,1rem que a pagina ja usou.
  */
  font-size: clamp(1.9rem, 6.2vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  /*
    `pretty`, não `balance`.

    `balance` tenta igualar o comprimento das linhas — e pra igualar ele
    aceita deixar uma linha passar da caixa. Numa headline de uma frase
    só, com palavra longa ("preguiça", "minutos"), foi exatamente o que
    aconteceu: a primeira linha vazou pra fora da tela no celular.
    `pretty` só cuida de não deixar palavra órfã no fim, e respeita a
    largura.
  */
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/*
  A segunda LINHA em verde e italico: e a promessa, e ela merece o unico
  destaque tipografico da pagina.

  `display: block` porque este comentario sempre disse "linha" e ela
  nunca foi uma. Inline, ela emendava na frase anterior e a quebra caia
  onde desse: "...de vontade. *Largou*" no fim de uma linha, "porque
  dava" na seguinte, "trabalho." sozinha na terceira. A virada de tom —
  da acusacao pro alivio — se perdia no meio de um paragrafo.

  Em bloco, cada frase ocupa o seu lugar e a segunda comeca sempre no
  comeco de uma linha, que e onde o olho pega.
*/
.titulo em {
  display: block;
  margin-top: 0.15em;
  color: var(--verde);
  /* Sem itálico — a cor e a linha própria já marcam o giro da frase. */
  font-style: normal;
}

h2 {
  margin: 0 0 1rem;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.7rem, 6.8vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-wrap: balance;
}

h3 {
  margin: 0 0 0.35rem;
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/*
  O chapeu de cada secao.

  Nao e enfeite: ele diz do que a secao trata em duas palavras, pra quem
  esta rolando rapido e nao vai ler o titulo inteiro.
*/
.chapeu {
  margin: 0 0 0.5rem;
  color: var(--verde);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.linha-fina {
  margin: 0 0 1.75rem;
  max-width: 30ch;
  color: var(--tinta-suave);
  font-size: clamp(1.08rem, 4.4vw, 1.25rem);
  line-height: 1.45;
  text-wrap: balance;
}

/*
  A linha que fala com quem já tentou contar caloria e largou.

  Fica entre a promessa e o botão, com uma barra verde à esquerda: ela é
  um aparte, não um segundo subtítulo. Sem a barra, três parágrafos
  seguidos no topo viram uma parede e a pessoa pula todos.

  O `max-width` é maior que o da linha-fina de propósito — esta é uma
  frase pra LER, e não uma pra bater o olho.
*/
/*
  A BARRA VERDE DA ESQUERDA SAIU.

  Uma faixa colorida de 3-4px na borda esquerda de um bloco é apontada
  por designers como "the single most reliable AI tell" — o sinal mais
  confiável de página gerada. Estava exatamente aqui, no bloco mais
  importante da primeira dobra.

  O que ficou no lugar faz o mesmo trabalho (separar este aparte dos
  parágrafos vizinhos) sem o carimbo: fundo próprio, cantos de raio
  DIFERENTE dos outros cartões da página, e um marcador tipográfico —
  o "Sem pegadinha" em serifa, que a stack de título já dá de graça.

  Raio diferente também é de propósito: `border-radius` igual em tudo é
  outro sinal da mesma lista. Objeto que importa tem forma própria.
*/
.reconhece {
  margin: 0 0 1.75rem;
  padding: 0.85rem 1.1rem 0.9rem;
  max-width: 44ch;
  border-radius: 4px 14px 14px 14px;
  background: var(--verde-fraco);
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.5;
}

.reconhece strong {
  display: block;
  margin-bottom: 0.15rem;
  font-family: var(--fonte-titulo);
  color: var(--verde-forte);
  font-weight: 700;
}

.texto {
  margin: 0 0 1.1rem;
  max-width: 62ch;
  color: var(--tinta-suave);
  font-size: 1.05rem;
}

.texto strong,
.texto b {
  color: var(--tinta);
  font-weight: 700;
}

.miudo {
  margin: 0.8rem 0 0;
  color: var(--tinta-fraca);
  font-size: 0.9rem;
}

.miudo--centro {
  margin-top: 1.2rem;
  text-align: center;
}

/* ---------- botoes ---------- */

.botao {
  display: inline-grid;
  place-items: center;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  background: var(--verde);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.12s ease;
}

.botao:hover {
  background: var(--verde-forte);
}

.botao:active {
  transform: scale(0.97);
}

.botao--pequeno {
  /* 44px é o alvo de toque mínimo, e este é o ÚNICO CTA visível durante
     a rolagem inteira — ele estava em ~40px. */
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  font-size: 0.92rem;
}

.botao--grande {
  width: 100%;
  max-width: 24rem;
  min-height: 60px;
  font-size: 1.12rem;
  box-shadow: 0 10px 24px -12px rgba(21, 127, 60, 0.75);
}

/* ---------- a barra de cima ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 251, 249, 0.85);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: border-color 0.2s ease;
  border-bottom: 1px solid transparent;
}

/* A linha so aparece depois que a pagina rola: encostada no topo ela e
   uma risca no meio do nada. */
.barra--rolou {
  border-bottom-color: var(--linha);
}

.barra__dentro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.marca {
  color: var(--tinta);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.marca span {
  color: var(--verde);
}

/* ---------- o topo ---------- */

.topo {
  padding: 2.75rem 0 0;
  text-align: left;
}

/*
  ==================================================================
  A ABERTURA — a página inteira, pra 64% das pessoas.

  Essa é a medida que reorganizou tudo: no celular, quase dois terços
  nunca rolam além da primeira tela. Então o que decide (a dor, a prova
  e o botão) cabe aqui, e o resto da página é bônus pra quem já quis
  rolar.
  ==================================================================
*/
.abertura {
  padding: 2.25rem 0 0;
}

/*
  A etiqueta acima do título.

  Ela existe porque a headline nova fala de SENTIMENTO ("você não
  largou porque faltou força de vontade") e não diz o que o produto é.
  Quem chega de um reel já sabe; quem chega de busca, não. Duas
  palavras resolvem sem gastar a headline.
*/
.etiqueta {
  margin: 0 0 0.9rem;
  color: var(--tinta-fraca);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/*
  ---------- A BARRA FIXA DO RODAPÉ ----------

  O maior ganho estrutural medido numa landing mobile: +11% sozinha.
  (Somada ao CTA acima da dobra dá +12%, ou seja, quase não soma — quem
  faz o trabalho é ela.)

  `hidden` some com `display:none`, então o JS troca o atributo e a
  transição abaixo faz ela subir em vez de aparecer estalada.
*/
.ancora {
  position: fixed;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 251, 249, 0.92);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-top: 1px solid var(--linha);
}

.ancora__dentro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 40rem;
  margin: 0 auto;
}

.ancora__recado {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 0.88rem;
  line-height: 1.25;
}

.ancora .botao {
  flex: none;
  min-height: 46px;
  padding: 0.7rem 1.4rem;
}

@media (prefers-reduced-motion: no-preference) {
  .ancora {
    animation: subir 0.24s var(--mola) both;
  }

  @keyframes subir {
    from {
      transform: translateY(100%);
    }
  }
}

/*
  O rodapé da página precisa de folga pra não ficar embaixo da barra.
  Sem isto o último link fica inalcançável — o pior tipo de defeito,
  porque só aparece pra quem rolou até o fim.
*/
body:has(.ancora:not([hidden])) .rodape {
  padding-bottom: 6.5rem;
}


/*
  O link que leva a mais, no fim de uma seção.

  Não é botão: quem chega aqui já tem o botão principal na mão e este
  leva pra uma página de leitura. Botão faria os dois competirem, e o
  errado ganharia por ser o último que a pessoa viu.

  A seta vem do CSS e não do HTML pra ela não ser lida em voz alta por
  leitor de tela — "seta pra direita" no meio da frase não ajuda ninguém.
*/
.mais {
  margin: 1.4rem 0 0;
  text-align: center;
}

.mais a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--verde-forte);
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(21, 127, 60, 0.3);
  padding-bottom: 2px;
}

.mais a::after {
  content: '→';
  transition: transform 0.15s ease;
}

.mais a:hover {
  border-bottom-color: var(--verde);
}

.mais a:hover::after {
  transform: translateX(3px);
}

/* ---------- secoes ---------- */

/*
  O espaçamento é menor no celular e cresce na tela larga.

  3,5rem de folga entre seções num telefone é meia tela em branco a cada
  rolagem — o que faz a página parecer mais longa e mais vazia do que
  ela é. Numa tela larga a mesma folga fica certa, porque a linha de
  texto é mais curta em relação à largura.
*/
.secao {
  padding: 2.5rem 1.25rem;
}

/*
  ------------------------------------------------------------------
  A SEÇÃO EM DESTAQUE — que estava no HTML e NÃO existia aqui.

  `secao--destaque` era usada duas vezes no `sobre.html`, nas duas
  seções que carregam o argumento que ninguém copia: o CUPOM FISCAL (o
  que a assinatura vende) e A FAIXA em vez do número cravado. E não
  havia uma linha de CSS pra ela. O atributo estava lá, o navegador
  aplicava a classe, e nada acontecia.

  O efeito era a página inteira no mesmo tom: cinco blocos de cartão
  branco em sequência, todos com o mesmo peso. Sem hierarquia, o olho
  não sabe onde parar — e o que vende ficava igual ao que só informa.

  Mesma família do `iniciarBackup()` importado e nunca chamado: o código
  existe, o build passa, e a coisa não acontece.

  O tom é o `--papel-baixo`, o mesmo que a `.faixa` já usava pra isto —
  não um verde novo. Duas faixas recuadas na página dão respiro e
  cadência; uma cor nova daria carnaval.
  ------------------------------------------------------------------
*/
.secao--destaque {
  background: var(--papel-baixo);
  border-block: 1px solid var(--linha);
}

/* A faixa recuada separa os assuntos sem precisar de linha nem de titulo
   maior. */
.faixa {
  margin: 0;
  padding: 2.5rem 0;
  background: var(--papel-baixo);
}

/* ---------- como funciona ---------- */

.passos {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2.25rem;
}

.passo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
}

.passo__numero {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
}

.passo__texto p {
  margin: 0;
  max-width: 46ch;
  color: var(--tinta-suave);
  font-size: 1rem;
}

.passo__figura {
  grid-column: 1 / -1;
  margin-top: 0.9rem;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sombra);
}

.passo__figura img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.passo__figura--ui {
  padding: 1rem 1.1rem;
  background: var(--papel-alto);
}

/* As telinhas de exemplo: interface de verdade, nao desenho de interface. */
.mini {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mini li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--linha);
  font-size: 0.96rem;
}

.mini li:last-child {
  border-bottom: 0;
}

.mini small {
  display: block;
  color: var(--tinta-fraca);
  font-size: 0.82rem;
}

.mini b {
  font-variant-numeric: tabular-nums;
}

/* A telinha do passo 3: o dia com o total ja somado. */
.mini-dia {
  display: block;
}

.mini-dia__rotulo {
  margin: 0;
  color: var(--tinta-fraca);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mini-dia__total {
  margin: 0.15rem 0 0.7rem;
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

.mini-dia__total small {
  color: var(--tinta-fraca);
  font-size: 0.5em;
  font-weight: 600;
}

.errar {
  margin: 2rem 0 0;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--verde);
  border-radius: 0 12px 12px 0;
  background: var(--verde-fraco);
  color: var(--verde-forte);
  font-size: 0.98rem;
}

/* ---------- as fichas de porcao ---------- */

.fichas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.6rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.fichas li {
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--papel-alto);
}

.fichas b {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.fichas span {
  color: var(--tinta-fraca);
  font-size: 0.9rem;
}

/* ---------- a comparacao ---------- */

/*
  A tabela substituiu quatro cartoes de texto.

  Dito em prosa, "nao temos meta diaria" soa como funcionalidade
  faltando. Numa coluna ao lado do que os outros fazem, vira
  posicionamento — e o olho le as seis linhas em menos tempo do que
  levaria pra ler o primeiro paragrafo.
*/
/*
  A tabela rola de lado no celular — e nada dizia isso.

  Sem sinal, o que a pessoa vê é uma tabela CORTADA, não uma tabela que
  continua: ela lê as duas primeiras colunas, conclui que a terceira não
  existe, e a coluna "Noprato" é justamente a que carrega o argumento.

  A máscara apaga os últimos 32px na borda direita. Texto meio desbotado
  é o único jeito que o olho lê como "tem mais ali" sem precisar de
  seta, legenda ou instrução. Some no desktop, onde a tabela cabe.
*/
.rolagem {
  overflow-x: auto;
  margin: 1.75rem 0 1rem;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--papel-alto);
  scrollbar-width: thin;
  scrollbar-color: var(--linha) transparent;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
}

@media (min-width: 46rem) {
  .rolagem {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.versus {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}

.versus th,
.versus td {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--linha);
  text-align: left;
}

.versus thead th {
  color: var(--tinta-fraca);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* A coluna da marca em verde desde o cabecalho: a pessoa sabe qual das
   duas ler antes de comecar a percorrer as linhas. */
.versus thead th:last-child {
  color: var(--verde);
}

.versus tbody tr:last-child td {
  border-bottom: 0;
}

.versus td:first-child {
  color: var(--tinta-suave);
}

.versus__eles,
.versus__nos {
  width: 5.5rem;
  font-weight: 700;
  white-space: nowrap;
}

.versus__eles {
  color: var(--tinta-fraca);
}

.versus__nos {
  color: var(--verde);
}

/* ---------- o numero, dos dois jeitos ---------- */

/*
  O mesmo 753 nos dois lados, e so o que vem embaixo muda.

  E o argumento inteiro do produto sem uma frase: a diferenca nao esta no
  numero, esta em admitir que ele e uma estimativa.
*/
.versus-numero {
  display: grid;
  gap: 0.7rem;
  margin: 1.5rem 0 1rem;
}

.versus-numero__lado {
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--linha);
  border-radius: 18px;
  background: var(--papel-alto);
}

.versus-numero__lado--nos {
  border-color: var(--verde);
  box-shadow: var(--sombra);
}

.versus-numero__quem {
  margin: 0;
  color: var(--tinta-fraca);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.versus-numero__lado--nos .versus-numero__quem {
  color: var(--verde);
}

.versus-numero__valor {
  margin: 0.2rem 0 0;
  font-size: 2.3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  line-height: 1;
}

.versus-numero__nota {
  margin: 0.35rem 0 0;
  color: var(--tinta-fraca);
  font-size: 0.98rem;
}

.versus-numero__nota--verde {
  color: var(--verde);
  font-weight: 700;
}

/* ---------- preco ---------- */

.planos {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.75rem;
}

.plano {
  padding: 1.4rem 1.35rem;
  border: 1px solid var(--linha);
  border-radius: 18px;
  background: var(--papel-alto);
}

.plano--pago {
  border-color: var(--verde);
  box-shadow: var(--sombra);
}

/*
  O selo do anual. Verde cheio porque ele precisa ganhar do "Mês a mês"
  logo abaixo — os dois são cartões brancos, e sem o selo a única
  diferença seria a cor da borda, que some em tela pequena.
*/
.plano__selo {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--verde);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plano__nome {
  margin: 0;
  color: var(--tinta-fraca);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plano__preco {
  margin: 0.2rem 0 0.9rem;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.plano__preco small {
  color: var(--tinta-fraca);
  font-size: 0.45em;
  font-weight: 700;
}

.plano__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.plano__lista li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--tinta-suave);
  font-size: 0.97rem;
}

.plano__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--verde);
  border-bottom: 2px solid var(--verde);
  transform: rotate(-45deg);
}

/* ================= a página de preço ================= */

/* Topo sem foto: aqui a pessoa já sabe o que o app faz e veio pelo
   número. Foto grande atrasaria a resposta que ela veio buscar. */
.topo--curto {
  padding: 2.5rem 0 0;
  text-align: left;
}

.titulo--menor {
  font-size: clamp(2rem, 8.5vw, 2.9rem);
}

.secao--topo {
  padding-top: 2rem;
}

.cartoes {
  display: grid;
  gap: 0.9rem;
}

.cartao-plano {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--linha);
  border-radius: 20px;
  background: var(--papel-alto);
}

/*
  O anual levantado do resto: borda verde, sombra e um selo.

  É o plano que o produto prefere vender, e esconder essa preferência não
  ajudaria ninguém — a pessoa lê "economiza 2 meses" e decide sabendo.
*/
.cartao-plano--destaque {
  border-color: var(--verde);
  border-width: 2px;
  box-shadow: var(--sombra-alta);
}

.cartao-plano__selo {
  position: absolute;
  top: -0.75rem;
  left: 1.4rem;
  margin: 0;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--verde);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}

.cartao-plano__nome {
  margin: 0;
  color: var(--tinta-fraca);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.cartao-plano--destaque .cartao-plano__nome {
  color: var(--verde);
}

.cartao-plano__preco {
  margin: 0.35rem 0 0;
  font-size: 2.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  line-height: 1;
}

.cartao-plano__preco small {
  color: var(--tinta-fraca);
  font-size: 0.38em;
  font-weight: 700;
}

.cartao-plano__ciclo {
  margin: 0.3rem 0 1.1rem;
  color: var(--tinta-fraca);
  font-size: 0.92rem;
}

.cartao-plano__lista {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
}

.cartao-plano__lista li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--tinta-suave);
  font-size: 0.98rem;
}

.cartao-plano__lista b {
  color: var(--tinta);
  font-weight: 700;
}

.cartao-plano__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--verde);
  border-bottom: 2px solid var(--verde);
  transform: rotate(-45deg);
}

/* O botão de contorno: presente, mas sem competir com o do plano em
   destaque. Três botões verdes iguais não escolhem nada por ninguém. */
.botao--contorno {
  border: 1px solid var(--linha);
  background: transparent;
  color: var(--tinta);
}

.botao--contorno:hover {
  border-color: var(--verde);
  background: var(--verde-fraco);
  color: var(--verde-forte);
}

.cartao-plano .botao {
  width: 100%;
  min-height: 52px;
}

/* ---------- a conta em uma linha ---------- */

.conta-simples {
  margin-top: 1.5rem;
  padding: 1.6rem 1.4rem;
  border-radius: 20px;
  background: var(--papel-alto);
  box-shadow: var(--sombra);
  text-align: center;
}

.conta-simples__linha {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 1.05rem;
}

.conta-simples__linha b {
  display: block;
  color: var(--tinta);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.conta-simples__linha span {
  display: block;
  color: var(--tinta-fraca);
  font-size: 0.9rem;
}

.conta-simples__igual {
  margin: 0.7rem 0;
  color: var(--verde);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* ---------- as garantias ---------- */

.garantias {
  display: grid;
  gap: 0.9rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.garantia {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
}

.garantia__marca {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--verde-fraco);
  color: var(--verde-forte);
  font-size: 0.95rem;
  font-weight: 800;
}

.garantia b {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.garantia small {
  display: block;
  margin-top: 0.1rem;
  color: var(--tinta-suave);
  font-size: 0.93rem;
  line-height: 1.45;
}

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

/* <details> nativo: funciona com o JavaScript desligado e o Ctrl+F do
   navegador acha texto dentro do que está fechado. */
details {
  margin-bottom: 0.6rem;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--papel-alto);
  overflow: hidden;
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.15rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

/*
  A seta, e não o "+"/"−".

  Trocar o GLIFO faz o sinal pular: "+" e "−" têm largura e altura
  diferentes na mesma fonte, então ele salta de posição no clique. Uma
  seta desenhada com borda GIRA — mesmo elemento, mesmo tamanho, e o
  movimento diz "abriu" melhor que a troca de símbolo.

  `float: right` também sai: é técnica de antes do flexbox, e ela tira o
  elemento do fluxo — alinhar verticalmente com o texto do lado vira
  chute de `margin`.
*/
summary::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  margin-left: 1rem;
  border-right: 2px solid var(--verde);
  border-bottom: 2px solid var(--verde);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.22s var(--mola);
}

details[open] summary {
  border-bottom: 1px solid var(--linha);
}

details[open] summary::after {
  transform: rotate(-135deg) translate(-3px, -3px);
}

@media (prefers-reduced-motion: reduce) {
  summary::after {
    transition: none;
  }
}

details p {
  margin: 1rem 1.15rem;
  color: var(--tinta-suave);
  font-size: 0.97rem;
}

/* ---------- o fecho ---------- */

.fecho {
  padding: 3rem 1.25rem 3.5rem;
  text-align: center;
}

/* O fecho respira mais que as outras seções de propósito: é o último
   pedido, e ele funciona melhor sozinho na tela. */
.fecho h2 {
  margin-bottom: 1.5rem;
}

.fecho .texto {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- rodape ---------- */

.rodape {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--linha);
  background: var(--papel-baixo);
  color: var(--tinta-suave);
  font-size: 0.93rem;
}

.rodape p {
  margin: 0 0 0.9rem;
  max-width: 58ch;
}

.rodape__marca {
  color: var(--tinta);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.rodape__marca span {
  color: var(--verde);
}

.rodape__links {
  /* Duas colunas alinhadas no celular. Com flex-wrap os nove links caíam
     em três fileiras de larguras diferentes e "Abrir o app" sobrava
     sozinho na última — lia como resto de página, não como navegação.
     E é o bloco que a pessoa procura quando está decidindo se confia. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.1rem 1rem;
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 34rem) {
  /* Com espaço, uma fileira só volta a ser melhor. */
  .rodape__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.4rem;
  }
}

.rodape__links a {
  color: var(--tinta-suave);
  font-weight: 600;
  text-decoration: none;
}

.rodape__links a:hover {
  color: var(--verde);
  text-decoration: underline;
}

.rodape__credito {
  color: var(--tinta-fraca);
  font-size: 0.85rem;
}

.rodape__fornecedor {
  margin: 0.8rem 0 0;
  color: var(--tinta-fraca);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ---------- telas grandes ---------- */

@media (min-width: 46rem) {
  body {
    font-size: 18px;
  }

  /* Na tela larga a folga volta a crescer: ver o comentário em `.secao`. */
  .secao {
    padding: 4rem 1.25rem;
  }

  .faixa {
    padding: 4rem 0;
  }

  .fecho {
    padding: 5rem 1.25rem 5.5rem;
  }

  .dentro {
    max-width: 44rem;
  }

  .topo {
    padding-top: 4rem;
    text-align: center;
  }

  .topo .linha-fina {
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
  }

  .palco {
    max-width: 44rem;
    /* O cartão fica pendurado 2.5rem abaixo da foto: sem esta folga a
       seção seguinte é pintada por cima dele e corta o número. */
    margin: 0 auto 4rem;
    border-radius: 24px;
    overflow: visible;
  }

  .palco__foto {
    border-radius: 24px;
    aspect-ratio: 16 / 9;
  }

  /* Em tela larga o cartao encosta na direita da foto, em vez de tapar o
     meio dela: sobra a comida, que e o argumento. */
  .cartao {
    position: absolute;
    right: -1rem;
    bottom: -2.5rem;
    width: 21rem;
    margin: 0;
  }

  .passo {
    grid-template-columns: auto 1fr 16rem;
    align-items: start;
    gap: 0.35rem 1.25rem;
  }

  .passo__figura {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin-top: 0;
  }

  .planos {
    grid-template-columns: 1fr 1fr;
  }

  /* Lado a lado só na tela larga: no celular, dois números de 2,3rem na
     mesma linha viram dois números pequenos. */
  .versus-numero {
    grid-template-columns: 1fr 1fr;
  }

  /*
    Os três planos lado a lado.

    O destaque fica no MEIO — é a ordem em que eles já estão no HTML, e
    não por acaso: o olho pousa no centro primeiro, e o plano do meio é o
    que compara melhor com os dois vizinhos (de um lado o grátis, do
    outro o mensal mais caro).
  */
  .cartoes {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 1rem;
  }

  .garantias {
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem 1.6rem;
  }

  .conta-simples {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.8rem;
  }

  .conta-simples__igual {
    margin: 0;
  }
}

/* ---------- quem pediu menos movimento ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .cartao__itens li.pingando {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
  border-radius: 6px;
}

/*
  ==================================================================
  A CAPA ESCURA — refeita em 27/08/2026

  Comida aparece muito melhor sobre fundo escuro. É por isso que
  cardápio bom é preto, e é por isso que toda foto de prato em revista
  tem fundo fechado: o claro rouba saturação da comida, o escuro
  devolve.

  Vale duas coisas a mais aqui:

  1. A CÂMERA DO APP JÁ É ESCURA. Com a capa clara, o site parecia um
     folheto SOBRE o produto; escura, ele parece o produto. Quem vem
     do vídeo reconhece antes de ler.

  2. É O OPOSTO DO VISUAL PADRÃO DE IA. O comentário no topo deste
     arquivo já recusava "creme com terracota" por ser o que sai de
     toda geração automática hoje. Um fundo verde-quase-preto com uma
     foto de comida não se confunde com aquilo.

  O tom NÃO é preto puro: é o `--tinta` (#12160f), que já é o texto da
  página — o mesmo verde-oliva escurecido. Preto puro ao lado de uma
  foto quente parece buraco; este parece sombra.
  ==================================================================
*/
.capa {
  background: var(--tinta);
  padding-bottom: 0;
  /* Sem isto, a margem negativa do cartão vaza pra fora da capa e a cor
     escura corta no meio da sombra. */
  overflow: visible;
}

.capa__dentro {
  padding-top: 2rem;
  padding-bottom: 0.5rem;
}

/*
  A barra sobre a capa escura.

  `background: transparent` e não a cor da capa: ela é `sticky`, então
  quando a página rola ela sai de cima do escuro e passa por cima do
  claro. Transparente com blur funciona nos dois; cor fixa ficaria uma
  faixa escura flutuando sobre o conteúdo branco.
*/
.barra--escura {
  background: rgba(18, 22, 15, 0.72);
}

.marca--clara {
  color: var(--papel);
}

/* O verde escuro da marca some sobre o fundo escuro: sobre o claro ele
   dá 4,9:1, sobre a capa daria menos de 2:1. O `--verde-vivo` é o tom
   que o próprio app já usa quando o fundo é escuro. */
.marca--clara span {
  color: var(--verde-vivo);
}

.etiqueta--clara {
  color: rgba(251, 251, 249, 0.62);
}

.titulo--capa {
  color: var(--papel);
}

/* Mesma razão da marca: sobre escuro, o verde do app não se lê. */
.titulo--capa em {
  color: var(--verde-vivo);
}

.linha-fina--clara {
  color: rgba(251, 251, 249, 0.78);
}

.miudo--claro {
  color: rgba(251, 251, 249, 0.55);
}

/* O botão claro da barra: contorno em vez de verde cheio, senão ele
   compete com o CTA grande logo abaixo — dois verdes cheios na mesma
   tela e nenhum é o principal. */
.botao--claro {
  background: transparent;
  color: var(--papel);
  box-shadow: inset 0 0 0 1px rgba(251, 251, 249, 0.35);
}

/*
  ------------------------------------------------------------------
  OS TRÊS PASSOS — a seção que faltava.

  Quem chega de um vídeo de 15 segundos tem uma dúvida concreta antes
  de qualquer argumento: vou ter que pesar? digitar? escolher de uma
  lista de dez? Enquanto não sabe, ela supõe o pior — porque é isso que
  o app anterior fazia com ela.

  O número é `aria-hidden` porque ele é enfeite tipográfico: o <ol> já
  diz ao leitor de tela que é o item 1, 2, 3. Sem isso ele lê "um um".
  ------------------------------------------------------------------
*/
.passos-numerados {
  margin: 1.75rem 0 1.5rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.25rem;
}

.passo-n {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.9rem;
}

.passo-n__numero {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--verde-fraco);
  color: var(--verde-forte);
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
  font-weight: 800;
}

/*
  O texto do passo inteiro num elemento SÓ.

  Num container flex/grid, cada pedaço de texto solto vira item próprio
  e quebra por conta — foi o que aconteceu com os passos da tela vazia
  do app, que apareciam em três colunas embaralhadas no celular. O
  <span> em volta é o que impede isso de voltar.
*/
.passo-n__texto {
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.55;
}

.passo-n__texto b {
  color: var(--tinta);
}

/* Três fichas cabem em linha onde seis não caberiam. */
.fichas--tres {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

/*
  A SEÇÃO QUE VENDE — usada UMA vez, e só nela.

  As duas faixas em `--papel-baixo` dão cadência. Mas cadência trata
  tudo como igual, e uma seção desta página não é igual: o CUPOM FISCAL
  é o que a assinatura vende, é o único caminho que traz o PESO
  (9,5% de erro por grama contra 26,1% pelo prato inteiro) e é a parte
  que um concorrente de fora não copia sem entender comanda de cantina.

  Verde pálido, o `--verde-fraco` que a página já usa nos números dos
  passos. Uma vez só: o comentário da `.secao--destaque` avisa que cor
  nova repetida daria carnaval, e ele continua certo. O que salva aqui
  é a raridade — se um dia uma segunda seção ganhar isto, as duas
  perdem o efeito.
*/
.secao--vende {
  background: var(--verde-fraco);
  border-block: 1px solid rgba(var(--verde-rgb), 0.18);
}

/*
  ==================================================================
  AS TELAS DO APP — a imagem que faltava (27/08/2026)

  A critica foi "muito texto, o site esta sem imagem e feio", e o
  diagnostico era constrangedor: um app cujo produto inteiro e
  FOTOGRAFAR tinha uma imagem so na home, e ela era de um prato numa
  mesa — nao do app.

  Estas capturas sao reais, de `/app?tela=resultado` e
  `/app?tela=incerto`, feitas pelo script que ja existia
  (`configurar/capturar-tela-resultado.mjs`). Uma delas entrega, sem
  uma linha de texto: medida caseira (colher, concha, bife medio),
  faixa em vez de numero cravado, macros, e que o produto existe.

  A moldura e discreta de proposito: a tela ja e escura e ja parece um
  celular. Um mockup de aparelho desenhado em volta acrescentaria peso
  visual e nenhum argumento.
  ==================================================================
*/
.aparelho {
  margin: 1.75rem auto 1.5rem;
  /* 18rem e o menor tamanho em que os nomes dos alimentos e as medidas
     ("4 colheres de sopa") ainda se leem num celular. Menor que isso a
     captura vira enfeite — e o argumento inteiro esta escrito nela. */
  max-width: 18rem;
}

.aparelho--menor {
  max-width: 13rem;
}

.aparelho__tela {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  /* A tela do app e quase preta e a capa tambem: sem esta borda de luz
     a imagem se dissolve no fundo e parece que nao carregou. */
  box-shadow:
    0 0 0 1px rgba(251, 251, 249, 0.12),
    0 24px 48px -16px rgba(0, 0, 0, 0.6);
}

/* Sobre fundo claro a borda de luz nao serve — inverte pra sombra. */
.secao .aparelho__tela {
  box-shadow:
    0 0 0 1px var(--linha),
    0 20px 40px -18px rgba(19, 23, 17, 0.35);
}

/*
  ------------------------------------------------------------------
  ISTO VIRA ISTO — o produto inteiro em duas imagens.

  Era uma secao de tres passos numerados com texto explicando cada um.
  Duas fotos com uma seta dizem a mesma coisa sem pedir leitura, e quem
  chega de um video de 15 segundos nao veio pra ler.

  Em celular estreito a seta vira vertical (`rotate`), porque lado a
  lado as duas imagens ficariam pequenas demais pra ler o que esta
  escrito na tela do app — que e justamente o argumento.
  ------------------------------------------------------------------
*/
.antes-depois {
  display: grid;
  gap: 0.75rem;
  align-items: center;
  margin: 1.75rem 0 1.5rem;
  grid-template-columns: 1fr;
  justify-items: center;
}

.antes-depois__lado {
  margin: 0;
  width: 100%;
  max-width: 14rem;
}

.antes-depois__lado img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--linha);
  /* A foto do prato e 16/9 e a tela do app e 1/2: sem altura fixa uma
     fica tres vezes mais alta que a outra e a comparacao se perde. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 55%;
}

/*
  O PRATO corta pelo meio (a comida esta no centro); a TELA corta pelo
  TOPO, senao o corte come justamente o total de 663 kcal e os macros —
  que sao a razao de a imagem estar aqui.
*/
.antes-depois__lado--tela img {
  object-position: center top;
}

.antes-depois__lado figcaption {
  margin-top: 0.5rem;
  color: var(--tinta-fraca);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.antes-depois__seta {
  margin: 0;
  color: var(--verde);
  font-size: 1.6rem;
  line-height: 1;
  rotate: 90deg;
}

@media (min-width: 34rem) {
  .antes-depois {
    grid-template-columns: 1fr auto 1fr;
  }

  .antes-depois__seta {
    rotate: none;
  }
}

/*
  ==================================================================
  A CAPA EM DUAS COLUNAS, no desktop

  Em telas largas a pagina era uma coluna de 40rem esticada: texto
  colado a esquerda, o celular centralizado embaixo dele, metade da
  tela vazia a direita — e o botao empurrado pra fora da primeira
  dobra pelo tamanho da imagem. Foi isso que apareceu como "a imagem e
  gigante": nao era a imagem, era a falta de layout ao lado dela.

  Duas colunas resolvem os tres de uma vez: o texto ganha companhia, a
  imagem para de empurrar o botao pra baixo, e o espaco vazio some.

  So a partir de 60rem (~960px). Abaixo disso a coluna unica esta
  certa — e e nela que 81% do publico esta.
  ==================================================================
*/
@media (min-width: 60rem) {
  .capa__dentro {
    max-width: 64rem;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3.5rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .capa__dentro .aparelho {
    grid-column: 2;
    margin: 0;
    max-width: 17rem;
  }

  /*
    Texto e ação na coluna 1, imagem na 2 atravessando as duas linhas.
    No celular a ordem do DOM manda: texto → imagem → botão, porque a
    frase acima da imagem diz "aparece isto:" e aponta pra ela.
  */
  .capa__texto,
  .capa__acao {
    grid-column: 1;
  }

  .capa__dentro .aparelho {
    grid-row: 1 / span 2;
  }

  .capa__dentro .titulo {
    font-size: 3.4rem;
  }
}

/*
  ==================================================================
  A ANIMAÇÃO DE SCROLL — e por que ela é PEQUENA de propósito

  A pesquisa pedida pra decidir isto voltou com o oposto do esperado, e
  o número que mais importa é de um teste A/B da HubSpot com três
  variantes na home:

      B — animação SUTIL (título com efeito de digitação)   +6%
      C — cor, movimento e imagens ANIMADAS                 −1%

  Mais animação perdeu pro próprio controle. E a NN/g tem artigo
  específico sobre isto ("Scroll-Triggered Text Animations Delay
  Users"), com a frase de uma participante que resume: *"às vezes eu só
  quero ver a informação sem ter que ver um movimentinho legal"*. As
  três regras de lá estão obedecidas abaixo: animar só conteúdo
  SECUNDÁRIO, disparar UMA vez, e lembrar que movimento é processado
  pré-atentivamente — o olho vai nele sem pedir licença.

  Do outro lado, o que É bem medido: LCP abaixo de 1s converte 4,4% e
  acima de 4s converte 1,7%. Essa evidência é de classe muito mais forte
  que qualquer coisa a favor de animação. Então animação aqui é CUSTO A
  JUSTIFICAR, não ganho esperado.

  ------------------------------------------------------------------
  AS TRÊS REGRAS QUE ESTE BLOCO NÃO QUEBRA

  1. SÓ `transform` E `opacity`. As duas rodam no compositor. Animar
     `width`, `height`, `margin` ou `box-shadow` traz layout/paint de
     volta pra main thread — e aí você reinventou a travada de que
     estava fugindo. (O bloco `assentar` que existia aqui animava
     `box-shadow`, e estava morto havia commits.)

  2. NUNCA `opacity: 0` — sempre `0.08`. O Chrome IGNORA paint com
     opacity zero como candidato a LCP desde ago/2020: o elemento só
     entra na conta quando repinta visível, e o LCP dispara tarde. Um
     valor mínimo mantém a candidatura e é invisível a olho nu.

  3. NADA DE TEXTO, e nada acima da dobra. A capa inteira e todo `h2`,
     `p` e tabela ficam de fora. Anima-se a FIGURA — que é apoio, e
     cuja ausência por 300ms não impede ninguém de ler.

  `animation-timeline: view()` é scroll do próprio navegador: zero JS,
  zero listener, roda no compositor. O caso da Tokopedia documentado
  pelo Chrome mediu a CPU durante o scroll cair de 50% pra 2% ao trocar
  listener por isto.
  ==================================================================
*/
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /*
      As figuras das seções (as capturas do app e o "isto vira isto").
      A da CAPA fica de fora de propósito: ela é o LCP.
    */
    .secao .aparelho,
    .antes-depois__lado {
      animation: surgir linear both;
      animation-timeline: view();
      /*
        Termina em 55% da entrada: a peça fica inteira MUITO antes de
        chegar ao meio da tela. Animação que só completa quando o
        elemento está centralizado é a que a NN/g descreve como
        "atrasando o usuário".
      */
      animation-range: entry 15% entry 55%;
    }

    /*
      As fichas entram escalonadas — o mesmo recurso que o app usa nos
      macros e nos alimentos (`animation-delay` crescente). Aqui o atraso
      vem do `animation-range`, e não de `delay`, porque com timeline de
      scroll o tempo é a rolagem: `delay` em segundos não teria efeito.
    */
    .fichas li {
      animation: surgir linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 50%;
    }

    .fichas li:nth-child(2n) {
      animation-range: entry 14% entry 54%;
    }

    .fichas li:nth-child(3n) {
      animation-range: entry 18% entry 58%;
    }

    @keyframes surgir {
      from {
        /* 0.08 e nao 0 — ver a regra 2 acima. */
        opacity: 0.08;
        transform: translateY(16px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
  }
}

/*
  A TRANSIÇÃO ENTRE AS PÁGINAS, em duas linhas e sem JavaScript.

  O site é multipágina estático (`/`, `/planos`, `/duvidas`, `/termos`…)
  — que é exatamente o caso de uso da View Transitions API entre
  documentos. Onde não houver suporte, a navegação acontece normal: não
  há nada pra degradar.

  Isto é POLIMENTO, e está escrito aqui pra não ser vendido como outra
  coisa: não achei evidência de que transição de página aumente
  conversão. O que ela faz é o site parar de "piscar branco" a cada
  clique, que é o que separa um site de um app na percepção de quem usa.
*/
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/*
  ==================================================================
  A CORRIDA — a animação que MOSTRA o problema em vez de contar

  A queixa que gerou isto: "não mostra o que ele resolve de problema, só
  muita escrita". Todas as versões anteriores diziam "registrar leva de
  2 a 5 minutos" num parágrafo. Esta encena: a coluna da esquerda
  cospe passo por passo enquanto o relógio sobe, a da direita faz uma
  coisa só e para em 3 segundos.

  POR QUE ESTA RODA EM LAÇO e as outras animações da página não: as
  outras são decoração e seguem a regra da NN/g (uma vez, só conteúdo
  secundário). Esta é uma DEMONSTRAÇÃO — o produto se explicando. Uma
  demonstração que roda uma vez só é uma demonstração que a maioria
  perde, porque ela dispara antes de a pessoa chegar.

  O laço é de 9s com 2s de pausa no fim: sem a pausa o resultado
  aparece e some antes de ser lido, que é o defeito mais comum desse
  tipo de peça.
  ==================================================================
*/
.secao--escura {
  background: var(--tinta);
  color: var(--papel);
  border-block: 1px solid rgba(251, 251, 249, 0.08);
}

.secao--escura h2 {
  color: var(--papel);
}

.chapeu--claro {
  color: var(--verde-vivo);
}

.texto--claro {
  color: rgba(251, 251, 249, 0.72);
}

.texto--claro strong {
  color: var(--papel);
}

.corrida__titulo {
  margin-bottom: 1.75rem;
}

.corrida__grade {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.5rem;
}

@media (min-width: 34rem) {
  .corrida__grade {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

.corrida__lado {
  border-radius: 16px;
  padding: 1.1rem 1.2rem 1rem;
  background: rgba(251, 251, 249, 0.04);
  border: 1px solid rgba(251, 251, 249, 0.1);
  /* Altura fixa: sem ela a coluna da esquerda CRESCE conforme os passos
     entram, empurrando a seção inteira pra baixo a cada laço — o pior
     tipo de CLS, o que se repete pra sempre. */
  min-height: 15.5rem;
  display: flex;
  flex-direction: column;
}

.corrida__lado--agora {
  background: rgba(var(--verde-rgb), 0.1);
  border-color: rgba(var(--verde-rgb), 0.4);
}

.corrida__quem {
  margin: 0 0 0.9rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 251, 249, 0.5);
}

.corrida__lado--agora .corrida__quem {
  color: var(--verde-vivo);
}

.corrida__passos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
  flex: 1;
  align-content: start;
}

.corrida__passos li {
  font-size: 0.92rem;
  line-height: 1.35;
  color: rgba(251, 251, 249, 0.82);
  padding-left: 1.1rem;
  position: relative;
}

.corrida__passos li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(251, 251, 249, 0.35);
}

.corrida__lado--agora .corrida__passos li {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--papel);
}

.corrida__lado--agora .corrida__passos li::before {
  background: var(--verde-vivo);
}

.corrida__relogio {
  margin: 0.9rem 0 0;
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  font-weight: 800;
  /* Sem isto o numero "dança" na largura enquanto conta — o mesmo
     cuidado que o total da tela de resultado do app ja tem. */
  font-variant-numeric: tabular-nums;
  color: rgba(251, 251, 249, 0.4);
}

.corrida__lado--agora .corrida__relogio {
  color: var(--verde-vivo);
}

/*
  O RELÓGIO É ESTÁTICO, e isto é uma decisão revista.

  A primeira versão contava de verdade: `@property --segundos` mais
  `counter()`, animando o número de 0 a 47. Era bonito no papel e **não
  renderizou** — o relógio saiu VAZIO nos dois lados, porque
  `counter-reset` com variável registrada depende de uma cadeia de
  suportes que falha calada.

  Achado abrindo a página, não lendo o CSS: é a mesma classe de defeito
  do resto desta sessão — o código existe, nada acusa, e a coisa não
  acontece.

  O contraste É a mensagem, e ele não precisa do número subindo: "2:47"
  ao lado de "0:03" já diz tudo. Trocar um efeito frágil por um fato
  legível é o negócio certo, ainda mais num elemento cuja falha é
  invisível pra quem escreveu e óbvia pra quem visita.
*/
.corrida__relogio--lento .corrida__conta::after {
  content: '2:47';
}

.corrida__relogio--rapido .corrida__conta::after {
  content: '0:03';
}

@media (prefers-reduced-motion: no-preference) {
    .corrida__lado--antes .corrida__passos li {
      animation: passo-entra 9s ease-out infinite both;
    }

    .corrida__lado--antes .corrida__passos li:nth-child(1) { animation-delay: 0.1s; }
    .corrida__lado--antes .corrida__passos li:nth-child(2) { animation-delay: 0.9s; }
    .corrida__lado--antes .corrida__passos li:nth-child(3) { animation-delay: 1.7s; }
    .corrida__lado--antes .corrida__passos li:nth-child(4) { animation-delay: 2.5s; }
    .corrida__lado--antes .corrida__passos li:nth-child(5) { animation-delay: 3.3s; }
    .corrida__lado--antes .corrida__passos li:nth-child(6) { animation-delay: 4.1s; }
    .corrida__lado--antes .corrida__passos li:nth-child(7) { animation-delay: 4.9s; }
    .corrida__lado--antes .corrida__passos li:nth-child(8) { animation-delay: 5.7s; }

    /* O da direita entra uma vez, logo no começo, e fica. */
    .corrida__lado--agora .corrida__passos li {
      animation: passo-entra 9s ease-out infinite both;
      animation-delay: 0.1s;
    }

    /*
      COMEÇA EM 0.3, NUNCA EM ZERO — e essa é a decisão que importa aqui.

      Com `opacity: 0` no 0% e `fill-mode: both`, o passo fica INVISÍVEL
      durante todo o `animation-delay`. Se a animação não rodar — laço
      congelado, aparelho fraco, alguma flag de navegador —, o texto
      simplesmente nunca aparece. É a mesma falha silenciosa que este
      projeto já teve três vezes nesta sessão: o código existe, nada
      acusa, e a coisa não acontece.

      Em 0.3 o pior caso é uma coluna esmaecida e LEGÍVEL, em vez de uma
      caixa vazia. O efeito de "ir surgindo" continua o mesmo, porque a
      distância de 0.3 pra 1 é o que o olho lê como entrada.

      A porcentagem é pequena porque a animação dura 9s: 4% dá ~360ms de
      entrada, e o resto do laço ela fica parada e legível.
    */
    @keyframes passo-entra {
      0% { opacity: 0.3; transform: translateY(6px); }
      4% { opacity: 1; transform: none; }
      100% { opacity: 1; transform: none; }
    }
}

/*
  ==================================================================
  A CAPA DE VITRINE — o produto no centro, com luz em volta

  Referência trazida por quem manda no projeto: página de produto de
  luxo, fundo escuro com um halo de luz atrás do objeto, tipografia
  grande e quase nenhum texto. O que faz aquilo funcionar não é a cor —
  é o objeto ser o ASSUNTO e a luz existir só pra dizer onde olhar.

  Aqui o objeto é a tela do app. Ela já é escura, então um halo
  esverdeado atrás dela faz o que o âmbar faz atrás de um frasco:
  separa o produto do fundo sem uma borda, e dá a impressão de que ele
  emite luz em vez de refletir.

  Três camadas, todas em gradiente do CSS — zero imagem, zero byte:
    1. o halo verde atrás do aparelho (`.capa::before`)
    2. a vinheta que escurece as bordas e empurra o olho pro centro
    3. o `drop-shadow` verde no próprio PNG, que vaza pelos cantos
       arredondados da tela e imita luz saindo dela

  `drop-shadow` (filtro) e não `box-shadow`: box-shadow desenharia um
  retângulo atrás do PNG inteiro, inclusive dos cantos transparentes.
  O filtro acompanha o desenho.
  ==================================================================
*/
.capa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* O halo. `z-index: -1` e `pointer-events: none` pra ele nunca disputar
   toque nem cobrir o botão. */
.capa::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 50%;
  top: 42%;
  width: min(120vw, 60rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(
    circle,
    rgba(var(--verde-rgb), 0.4) 0%,
    rgba(var(--verde-rgb), 0.14) 32%,
    rgba(var(--verde-rgb), 0) 62%
  );
}

/* A vinheta: escurece os cantos e faz o centro parecer iluminado. É o
   truque mais antigo de fotografia de produto, e custa um gradiente. */
.capa::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 45%,
    rgba(18, 22, 15, 0) 35%,
    rgba(18, 22, 15, 0.55) 100%
  );
}

/*
  A CAPA CENTRALIZADA, inclusive no desktop.

  Isto REVERTE o layout de duas colunas de algumas horas atrás. As duas
  colunas consertaram um problema real (a coluna de 40rem esticada, com
  metade da tela vazia), mas a referência de vitrine é centrada — e ela
  tem razão pra ser: com o produto no meio e a luz atrás, os dois lados
  vazios deixam de ser desperdício e viram moldura.

  O que NÃO se perde na volta: o botão continua acima da dobra, porque
  o aparelho encolheu e o título parou de ocupar seis linhas.
*/
.capa__dentro {
  position: relative;
  text-align: center;
  max-width: 46rem;
}

.capa__texto,
.capa__acao {
  max-width: 34rem;
  margin-inline: auto;
}

.capa .aparelho {
  /* Menor que antes: com o halo, o aparelho não precisa de tamanho pra
     dominar a tela — a luz faz esse trabalho. */
  max-width: 14.5rem;
  margin-inline: auto;
}

.capa .aparelho__tela {
  /* A luz que sai da tela. Duas camadas: uma curta e forte (o brilho
     colado no objeto), uma longa e fraca (o ambiente). */
  box-shadow: none;
  filter:
    drop-shadow(0 0 1px rgba(251, 251, 249, 0.35))
    drop-shadow(0 10px 30px rgba(var(--verde-rgb), 0.45))
    drop-shadow(0 30px 80px rgba(0, 0, 0, 0.7));
}

@media (min-width: 60rem) {
  /* Desfaz a grade de duas colunas: a vitrine é centrada. */
  .capa__dentro {
    display: block;
    max-width: 46rem;
  }

  .capa__dentro .aparelho {
    grid-column: auto;
    grid-row: auto;
    max-width: 15.5rem;
    margin-inline: auto;
  }

  .capa__dentro .titulo {
    font-size: 3.6rem;
  }
}

/*
  AJUSTES DA VITRINE, depois de ver na tela.

  O halo estava centrado em 42% da altura — ou seja, atrás do TÍTULO, e
  não do produto. Luz de vitrine ilumina o objeto; atrás do texto ela
  só suja o contraste. Agora ele desce e fica mais forte.

  E o `.linha-fina` tinha `max-width` sem `margin-inline: auto`: com o
  pai centralizado, o bloco ficava encostado à esquerda e parecia
  desalinhado de propósito. Vale pra qualquer filho com largura máxima
  dentro de um container centrado.
*/
.capa::before {
  top: 62%;
  width: min(130vw, 52rem);
  background: radial-gradient(
    circle,
    rgba(var(--verde-rgb), 0.62) 0%,
    rgba(var(--verde-rgb), 0.22) 30%,
    rgba(var(--verde-rgb), 0) 60%
  );
}

.capa__dentro .linha-fina,
.capa__dentro .miudo {
  margin-inline: auto;
}

/*
  O título da capa fica MENOR que o das outras seções, e isso é
  deliberado: aqui ele divide a atenção com o produto iluminado, e numa
  vitrine quem ganha é o objeto. O tamanho grande da página vive nos
  `h2` das seções, onde não há imagem competindo.
*/
.titulo--capa {
  font-size: clamp(1.85rem, 5.4vw, 2.9rem);
  text-wrap: balance;
}

@media (min-width: 60rem) {
  .capa__dentro .titulo {
    font-size: 3rem;
  }
}

/*
  A LUZ PRECISA VAZAR PELAS BORDAS DO OBJETO, não ficar atrás dele.

  Na primeira tentativa o halo tinha 52rem centrado no aparelho — e o
  aparelho, escuro, cobria justamente a parte mais forte do gradiente.
  Sobrava só a franja fraca. É o erro clássico de luz de produto:
  iluminar por trás do centro em vez de por trás das BORDAS.

  Agora o halo é menor que a área e mais concentrado, e o brilho que
  encosta no objeto vem do `drop-shadow` do próprio PNG (que acompanha
  o contorno) em vez do gradiente do fundo.
*/
.capa::before {
  top: 58%;
  width: min(90vw, 34rem);
  background: radial-gradient(
    circle,
    rgba(var(--verde-rgb), 0.85) 0%,
    rgba(var(--verde-rgb), 0.35) 26%,
    rgba(var(--verde-rgb), 0.08) 48%,
    rgba(var(--verde-rgb), 0) 66%
  );
  filter: blur(28px);
}

.capa .aparelho__tela {
  filter:
    drop-shadow(0 0 2px rgba(251, 251, 249, 0.5))
    drop-shadow(0 0 24px rgba(var(--verde-rgb), 0.75))
    drop-shadow(0 18px 50px rgba(0, 0, 0, 0.75));
}

/*
  E o CONJUNTO tem que caber na primeira dobra.

  Num monitor de 1280×800 o botão estava caindo logo abaixo do corte —
  o pior lugar possível, porque parece que não existe. Aparelho menor e
  respiros menores resolvem sem tirar nada da tela.
*/
.capa__dentro {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.capa .aparelho {
  margin-block: 1.1rem 1.25rem;
  max-width: 12.5rem;
}

@media (min-width: 60rem) {
  .capa__dentro {
    padding-top: 1.75rem;
    padding-bottom: 2rem;
  }

  .capa__dentro .aparelho {
    max-width: 13rem;
  }

  .capa__dentro .titulo {
    font-size: 2.9rem;
  }
}

/*
  O HALO VAI NO FUNDO DA PRÓPRIA CAPA, e não num pseudo-elemento.

  As duas tentativas anteriores usavam `::before` com `z-index: -1`
  dentro de um `isolation: isolate`. Não renderizou — e o pior é que a
  falha é silenciosa: a página abre inteira, só sem luz nenhuma, e quem
  escreveu o CSS não vê diferença de um fundo chapado.

  `background` com várias camadas na própria `.capa` não depende de
  ordem de pintura, de stacking context nem de z-index negativo. Um
  gradiente por cima da cor, na mesma declaração. Menos elegante de ler,
  impossível de sumir.

  A vinheta vira a terceira camada, pela mesma razão.
*/
.capa {
  background:
    radial-gradient(
      ellipse 46% 34% at 50% 62%,
      rgba(var(--verde-rgb), 0.55) 0%,
      rgba(var(--verde-rgb), 0.22) 38%,
      rgba(var(--verde-rgb), 0) 72%
    ),
    radial-gradient(
      ellipse 90% 70% at 50% 45%,
      rgba(18, 22, 15, 0) 40%,
      rgba(18, 22, 15, 0.6) 100%
    ),
    var(--tinta);
}

/* Os pseudo-elementos das tentativas anteriores saem de cena. Deixar
   os dois desenhando por baixo seria pagar duas camadas de pintura por
   nada. */
.capa::before,
.capa::after {
  content: none;
}

/*
  E o conjunto encolhe mais um pouco: em 1280×800 o botão ainda ficava
  cortado ao meio, que é pior que estar fora — parece defeito.
*/
.capa .aparelho {
  max-width: 11rem;
  margin-block: 0.9rem 1.1rem;
}

@media (min-width: 60rem) {
  .capa__dentro .aparelho {
    max-width: 11.5rem;
  }

  .capa__dentro .titulo {
    font-size: 2.6rem;
  }
}

/*
  ==================================================================
  O CUPOM, DESENHADO E SENDO LIDO

  Papel branco, texto monoespaçado, borda serrilhada em gradiente, e a
  varredura verde descendo — a mesma linguagem da tela de análise do
  app (`.analisando__varredura`).

  Tudo em CSS: zero byte de imagem num público 81% Android em 4G, e
  animável, que era o pedido. A técnica de desenhar cupom em vez de
  guardar PNG é a mesma que `configurar/aferir-cupom.mjs` já usa.
  ==================================================================
*/
.secao--cupom .cupom {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  margin: 1.75rem 0 1.25rem;
}

.cupom__papel {
  position: relative;
  overflow: hidden;
  width: min(100%, 22rem);
  background: #fdfdfb;
  color: #14180f;
  padding: 1.1rem 1rem 1.4rem;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.75);
}

/*
  A BORDA SERRILHADA do papel picotado, em gradiente.

  Dois gradientes cônicos alternados dão os dentes. É o detalhe que faz
  o bloco parar de parecer um retângulo branco e passar a parecer papel
  — e custa uma declaração, não uma imagem.
*/
.cupom__papel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 8px;
  background:
    linear-gradient(-45deg, transparent 50%, #fdfdfb 51%) repeat-x 0 0 / 12px 8px,
    linear-gradient(45deg, transparent 50%, #fdfdfb 51%) repeat-x 6px 0 / 12px 8px;
  transform: scaleY(-1);
}

.cupom__texto {
  margin: 0;
  font-family: 'Courier New', Courier, monospace;
  /* Encolhe junto com a tela: um cupom tem 32 colunas fixas, e quebrar
     linha destruiria o alinhamento que faz ele parecer cupom. */
  font-size: clamp(0.62rem, 2.6vw, 0.78rem);
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
}

/*
  ESTADO PADRÃO: o peso já vem destacado.

  Se a animação não rodar, a linha que importa continua sendo a que
  chama atenção. Mesma regra dos passos da corrida — nada aqui pode
  depender de animação pra existir.
*/
.cupom__peso {
  display: inline-block;
  background: rgba(var(--verde-rgb), 0.18);
  box-shadow: 0 0 0 2px rgba(var(--verde-rgb), 0.18);
  font-weight: 700;
}

.cupom__seta {
  margin: 0;
  color: var(--verde-vivo);
  font-size: 1.5rem;
  line-height: 1;
}

.cupom__saida {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  padding: 0.9rem 1.6rem;
  border-radius: 14px;
  background: rgba(var(--verde-rgb), 0.14);
  border: 1px solid rgba(var(--verde-rgb), 0.4);
}

.cupom__saida-peso {
  font-family: var(--fonte-titulo);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--verde-vivo);
  line-height: 1;
}

.cupom__saida-rotulo {
  font-size: 0.85rem;
  color: rgba(251, 251, 249, 0.65);
}

/* A varredura só existe com animação — sem ela é uma faixa parada no
   topo do papel, que confunde. Por isso nasce invisível e só o bloco
   animado a acende. */
.cupom__varredura {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .cupom__varredura {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 38%;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(var(--verde-rgb), 0) 0%,
      rgba(var(--verde-rgb), 0.22) 70%,
      rgba(var(--verde-rgb), 0.45) 100%
    );
    border-bottom: 2px solid rgba(74, 222, 128, 0.9);
    /*
      `translateY` de -100% a 285%: a faixa tem 38% da altura do papel,
      então 285% + 38% ≈ 320% leva a borda de baixo até o fim. O app usa
      exatamente a mesma conta na tela de análise, com outros números
      porque lá a faixa tem outra altura.
    */
    animation: varrer-cupom 4.5s ease-in-out infinite;
  }

  @keyframes varrer-cupom {
    0% { transform: translateY(-100%); }
    55% { transform: translateY(285%); }
    /* Fica parada embaixo o resto do laço: sem a pausa a varredura vira
       um pisca-pisca, que é o oposto de "ele está lendo". */
    100% { transform: translateY(285%); }
  }

  /*
    O PESO ACENDE quando a varredura passa por ele — e ela passa na
    linha do peso perto de 28% do laço.
  */
  .cupom__peso {
    animation: acender-peso 4.5s ease-out infinite;
  }

  @keyframes acender-peso {
    0%, 24% {
      background: rgba(var(--verde-rgb), 0.1);
      box-shadow: 0 0 0 2px rgba(var(--verde-rgb), 0.1);
    }
    32% {
      background: rgba(74, 222, 128, 0.55);
      box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.55);
    }
    100% {
      background: rgba(var(--verde-rgb), 0.22);
      box-shadow: 0 0 0 2px rgba(var(--verde-rgb), 0.22);
    }
  }

  /* A saída entra depois que a varredura terminou — a ordem é o
     argumento: primeiro ele lê, depois ele sabe. */
  .cupom__saida,
  .cupom__seta {
    animation: saida-entra 4.5s ease-out infinite both;
  }

  @keyframes saida-entra {
    0%, 55% { opacity: 0.25; transform: translateY(8px); }
    64% { opacity: 1; transform: none; }
    100% { opacity: 1; transform: none; }
  }
}

/*
  ==================================================================
  AS ÚLTIMAS SEÇÕES TAMBÉM ENTRAM, e pelo mesmo caminho

  A tabela do "os outros × Noprato" e os três planos eram os dois
  últimos blocos parados da página. Recebem o mesmo tratamento das
  figuras: `animation-timeline: view()`, só `transform` e `opacity`,
  uma vez, e nunca abaixo de `opacity` legível.

  As LINHAS da tabela entram de baixo pra cima em cascata — e isso não
  é enfeite: a última linha é a que mais importa ("mede em concha"), e
  a cascata leva o olho até ela em vez de deixá-lo parar na primeira.
  ==================================================================
*/
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .versus tbody tr,
    .plano {
      animation: surgir-linha linear both;
      animation-timeline: view();
    }

    /*
      A cascata vem do `animation-range` e não de `animation-delay`:
      com timeline de rolagem o "tempo" é o scroll, e delay em segundos
      simplesmente não existe.
    */
    .versus tbody tr:nth-child(1) { animation-range: entry 12% entry 40%; }
    .versus tbody tr:nth-child(2) { animation-range: entry 16% entry 44%; }
    .versus tbody tr:nth-child(3) { animation-range: entry 20% entry 48%; }
    .versus tbody tr:nth-child(4) { animation-range: entry 24% entry 52%; }
    .versus tbody tr:nth-child(5) { animation-range: entry 28% entry 56%; }

    .plano:nth-child(1) { animation-range: entry 10% entry 42%; }
    .plano:nth-child(2) { animation-range: entry 15% entry 47%; }
    .plano:nth-child(3) { animation-range: entry 20% entry 52%; }

    /*
      0.25, nunca 0 — a mesma regra dos passos da corrida. Uma tabela de
      preços invisível porque a animação não rodou é pior que uma tabela
      sem animação nenhuma.
    */
    @keyframes surgir-linha {
      from { opacity: 0.25; transform: translateY(10px); }
      to { opacity: 1; transform: none; }
    }
  }
}

/*
  A COLUNA DO "NÃO" GANHA PESO.

  Numa tabela de comparação o olho lê a primeira coluna e desiste. O
  verde na coluna certa e o cinza na outra fazem o padrão aparecer antes
  da leitura: uma coluna toda apagada, outra toda acesa.
*/
.versus__nos {
  color: var(--verde-forte);
  font-weight: 800;
}

.versus__eles {
  color: var(--tinta-fraca);
}

/* === acessibilidade e aviso de cookie === */

/*
  O LINK DE PULAR (WCAG 2.4.1).

  Ele fica escondido até receber foco pelo teclado. Não usa
  `display:none` nem `visibility:hidden`: as duas tiram o elemento da
  ordem de foco, e aí o link não teria como aparecer — é o erro clássico
  de quem tenta esconder um skip link.
*/
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.15rem;
  background: var(--verde, #157f3c);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 .4rem 0;
}
.pular:focus {
  left: 0;
}

/*
  O AVISO DE COOKIE.

  Ele quase nunca aparece: o servidor só o monta pra quem chegou por link
  de campanha, ou quando há experimento ligado. Ver `avisoDeCookie` em
  server/index.ts.

  Fica no rodapé e NÃO cobre a tela. Bloqueio de tela inteira é o padrão
  escuro mais comum desse tipo de aviso — ele obriga a responder pra ler
  a página, e a ANPD chama isso de consentimento não-livre.
*/
.aviso-cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: .9rem;
  background: var(--papel-alto, #fffdf9);
  border-top: 1px solid var(--linha-forte, #cfc8b9);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .10);
}
.aviso-cookie__cx {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.4rem;
  width: min(100% - 1rem, 62rem);
  margin-inline: auto;
}
.aviso-cookie__txt {
  flex: 1 1 20rem;
  margin: 0;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--tinta-suave, #57544c);
}
.aviso-cookie__txt b { color: var(--tinta, #1a1a17); }
.aviso-cookie__txt a { color: inherit; }

.aviso-cookie__botoes {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

/*
  OS DOIS BOTÕES TÊM O MESMO PESO, e isto não é descuido de design.

  Mesma altura, mesma fonte, mesma borda, mesmo contraste. A ANPD proíbe
  padrão escuro, e o mais comum deles é o "aceitar" grande e colorido ao
  lado de um "recusar" cinza e pequeno. Recusar tem que custar o mesmo
  toque que aceitar — se um dia alguém destacar um dos dois, isto aqui
  deixa de estar em conformidade.
*/
.aviso-cookie__b {
  min-height: 44px;
  padding: .6rem 1.1rem;
  border: 1px solid var(--tinta, #1a1a17);
  border-radius: .4rem;
  background: transparent;
  color: var(--tinta, #1a1a17);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.aviso-cookie__b:hover {
  background: var(--papel-baixo, #f0ece3);
}
.aviso-cookie__b:focus-visible {
  outline: 3px solid var(--verde, #157f3c);
  outline-offset: 2px;
}

/*
 * ALVO DE TOQUE: 23px de altura com 1,6px entre um link e o outro.
 * O mínimo da WCAG 2.2 é 24×24, e a exceção de espaçamento não salva —
 * com 1,6px de folga os círculos de 24px de links vizinhos se cruzam.
 * Público 81% Android, dedo em celular.
 */
.rodape__links a {
  display: inline-block;
  min-height: 24px;
  padding-block: 2px;
  /* Sem sublinhado, o link tinha exatamente a mesma cor do texto ao
     redor: 1:1. A regra pede outra pista além da cor. */
  text-decoration: underline;
  text-underline-offset: 3px;
}

html { scroll-padding-top: 80px; }

.botao--contorno { border-color: var(--tinta-suave); }