/*
 * /prato — a análise acontecendo.
 *
 * O herói não é foto de comida: é a tela de resultado do app, refeita em
 * HTML e tocada ao vivo. Foto de prato bonito qualquer concorrente tem;
 * o que separa este app é o que ele DEVOLVE — e é exatamente isso que
 * está tocando na tela.
 *
 * =====================================================================
 * COMANDA — a reforma de 16/09/2026
 * =====================================================================
 *
 * A página tinha DOIS mundos: escuro enquanto a pessoa avalia, papel
 * quando ela vai confiar. O dono olhou no celular e viu o que o escuro
 * tinha virado: preto + verde-neon + sans pesada + botão-pílula — a
 * receita padrão de toda landing gerada por IA em 2026. Não era o
 * conteúdo; era a roupa. E a roupa contradizia o produto.
 *
 * Agora é UM mundo, e ele vem do que este app tem que nenhum
 * concorrente de fora tem: PAPEL. O cupom fiscal, a comanda de cantina,
 * o "PORC FRITAS G" impresso em térmica — é dali que sai o peso, o
 * argumento de venda, e agora a cara do site. Papel quente, tinta
 * preta, um verde de carimbo usado uma vez por tela. O único objeto
 * escuro é o celular com o app tocando, como um celular em cima de uma
 * mesa de almoço.
 *
 * Três recusas, e cada uma é uma decisão:
 *  - Nada de vidro, bento, mesh gradient ou brilho no hover: é o
 *    vocabulário exato que produz o site que a gente acabou de trocar.
 *  - Uma fonte só de exibição (Fraunces, serifa com temperamento, em
 *    título e número); o corpo continua na fonte do sistema. Fonte de
 *    corpo custa 40 KB bloqueando a primeira pintura, e a "cara de
 *    sistema" estava nos títulos, não no parágrafo.
 *  - Um acento só, escuro, de tinta de carimbo. O neon saiu porque
 *    sobre papel ele não lê e sobre preto ele é o sinal.
 */

:root {
  --fundo: #f4efe6;
  --fundo2: #ebe4d7;
  --tinta: #1b1813;
  --tinta2: #6d655b;
  --verde: #1d6b3d;
  --p: #b3423f;
  --c: #a06d0e;
  --g: #2c5f8a;
  --linha: rgba(27, 24, 19, 0.14);
  --dentro: 1080px;
  --serifa: "Fraunces", Georgia, "Times New Roman", serif;
}

/*
 * A serifa de exibição, auto-hospedada. A CSP desta casa só aceita
 * `font-src 'self'`, então não há CDN: o arquivo mora em /fontes/ com a
 * licença (OFL 1.1) ao lado. Um arquivo só, variável, subset latino —
 * 121 KB — cobre do peso 300 ao 900 e os dois eixos que dão a ela
 * temperamento: SOFT (as pontas arredondam) e WONK (o "a" e o "g"
 * ganham uma mão humana). `swap` porque título invisível esperando
 * fonte é pior que título em Georgia por 200 ms.
 */
@font-face {
  font-family: "Fraunces";
  src: url("/fontes/fraunces-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 400 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  /*
   * `clip`, nunca `hidden`. `overflow: hidden` cria um contêiner de
   * rolagem e mata todo `position: sticky` de dentro — foi o defeito que
   * deixou esta página com a tela preta ao rolar.
   */
  overflow-x: clip;
}

img { max-width: 100%; }
a { color: inherit; }

/* O atalho de teclado: fora da tela, mas DENTRO da ordem de foco.
   `display: none` tiraria ele do teclado junto. */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  background: var(--verde);
  color: #06210f;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-weight: 700;
  text-decoration: none;
}
.pular:focus { left: 0; }

/* ---------------------------------------------------------------- barra */

.barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--fundo) 84%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--linha);
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.barra__marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.barra__ponto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--verde);
}
/*
 * O BOTÃO desta casa, um só, em três lugares (barra, âncora, fecho).
 *
 * Tinta sólida sobre papel, canto de 8px — não é pílula, não é
 * retângulo de framework. Sem sombra: um botão de tinta não flutua, ele
 * está impresso. A única reação ao ponteiro é a seta andar 4px — o
 * gesto de "vai" — e só onde existe ponteiro; no toque, nada se mexe
 * porque não haveria o que ver. `hover: hover` é a diferença entre
 * micro-interação e efeito que dispara sozinho no dedo.
 */
.botao,
.barra__link,
.ancora__botao,
.acao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--tinta);
  color: var(--fundo);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background 0.18s ease;
}
.botao .seta,
.acao .seta {
  display: inline-block;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (hover: hover) {
  .botao:hover,
  .barra__link:hover,
  .ancora__botao:hover,
  .acao:hover { background: #2b2620; }
  .botao:hover .seta,
  .acao:hover .seta { transform: translateX(4px); }
}
.barra__link { padding: 9px 16px; font-size: 14px; }
/*
 * No celular, enquanto a âncora de baixo está na tela, o botão de cima
 * some: eram dois botões verdes idênticos a 700px um do outro, e um
 * terceiro no fim da página. A classe é posta pelo casa.js no mesmo
 * observador que mostra a âncora — os dois estados nunca se cruzam.
 * No computador a âncora também aparece, mas a tela é larga o bastante
 * pra dois botões não brigarem; ali o de cima fica.
 */
@media (max-width: 660px) {
  .barra--recolhida .barra__link { display: none; }
}
/*
 * `.barra--clara` era a inversão da barra ao chegar no papel. A página
 * inteira é papel agora, então a classe — que o casa.js continua
 * pondo e tirando — não muda nada. Fica declarada vazia de propósito:
 * uma classe que o JS toggla e o CSS não conhece é o tipo de coisa que
 * alguém "conserta" daqui a três meses reintroduzindo a barra escura.
 */
.barra--clara { }

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

/*
 * O rótulo era CAIXA ALTA, verde, espaçado (0.14em) — o "eyebrow" que
 * toda landing gerada por template tem em cima de todo H2. Oito vezes
 * na mesma página, é o sinal mais forte de "vibe coded" que a página
 * tinha, e foi o dono quem viu. Agora é uma linha comum, cinza, em
 * caixa normal: ainda diz de que é a seção, sem gritar a fórmula.
 */
.rotulo {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta2);
}

/*
 * OS TÍTULOS SÃO A ÚNICA COISA EM SERIFA — e é isso que faz o contraste.
 *
 * Peso 600, não 800: serifa pesada demais em tamanho grande vira
 * bloco, e o que se quer é a letra ter desenho. Tracking quase zero —
 * o −0,045em de antes era o remédio da sans pesada; numa serifa com
 * eixo óptico a letra grande já vem ajustada, e apertar mais cola as
 * serifas umas nas outras. WONK ligado: o "a" de haste e o "g" de
 * duas voltas são a mão humana que a fonte do sistema não tem. SOFT
 * a 40: as pontas arredondam um pouco, como tinta que entrou no papel.
 */
.colossal {
  margin: 0 0 20px;
  font-family: var(--serifa);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-size: clamp(48px, 10vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.012em;
  font-weight: 600;
  text-wrap: balance;
}
/* O <em> da segunda linha continua regido pela regra lá embaixo: bloco,
   SEM itálico, verde. A folha já sabia que serifa + itálico colorido é
   a assinatura de página gerada — e eu quase reescrevi isso aqui. */

.titulo2 {
  margin: 0 0 24px;
  font-family: var(--serifa);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-size: clamp(30px, 5.2vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.008em;
  font-weight: 600;
  text-wrap: balance;
}

.nota {
  margin: 28px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--tinta2);
}
.nota a { color: var(--verde); }

/* -------------------------------------------------------------- o palco */

/*
 * A altura é o que dá o curso da rolagem. O quadro gruda e as legendas
 * passam ao lado — cada uma ACENDE um pedaço da tela do app e apaga o
 * resto. É a vista explodida, feita com a interface de verdade.
 */
.palco {
  position: relative;
  height: 380vh;
}
.palco__quadro {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 74px clamp(16px, 4vw, 40px) 26px;
  max-width: var(--dentro);
  margin: 0 auto;
  overflow: hidden;
}

.palco__texto { min-width: 0; }
.palco__linha {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(15px, 2.2vw, 20px);
  line-height: 1.5;
  color: var(--tinta2);
}
.palco__linha i { font-style: italic; }

/*
 * As legendas: uma de cada vez, no mesmo lugar.
 *
 * O ESTADO DE REPOUSO É O VISÍVEL. Nada nesta página nasce em
 * `opacity: 0` esperando o JavaScript — quem esconde é a classe
 * `.anima`, que o próprio JS põe no <html> quando vai de fato animar.
 * Sem JS, ou com "menos movimento" pedido, tudo aparece empilhado e a
 * página continua inteira. Página que só existe depois do script é
 * página que some quando o script falha.
 */
.legendas {
  position: relative;
  margin-top: 16px;
  display: grid;
  gap: 14px;
}
.anima .legendas {
  display: block;
  min-height: 96px;
}
.legenda {
  max-width: 34ch;
}
.anima .legenda {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.42s ease, transform 0.42s ease;
  pointer-events: none;
}
.anima .legenda--aqui {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.legenda b {
  display: block;
  font-size: clamp(18px, 2.6vw, 24px);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.legenda span {
  display: block;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tinta2);
}

/* ---------------------------------------------------------- a tela viva */

/*
 * O aparelho vem de `telaviva.css` — o MESMO componente que a home usa.
 * Aqui ficam só as regras de POSIÇÃO dele dentro do palco. As regras de
 * aparência moravam duplicadas aqui e foram embora: duas cópias da
 * mesma tela é o jeito garantido de uma envelhecer sem ninguém notar.
 */
.palco__quadro .tv {
  justify-self: center;
  align-self: center;
  max-height: 100%;
  transform-origin: 50% 34%;
}
/* Só existe se houver animação pra repetir. */
.repetir { display: none; }
.anima .repetir {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta);
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 9px 17px;
  cursor: pointer;
}
.repetir:hover { border-color: var(--verde); color: var(--verde); }

/*
 * NO CELULAR o palco se reorganiza, e não é ajuste fino: com a coluna
 * de texto inteira em cima, o aparelho sobrava pra fora da tela e a
 * lista de alimentos — que é a terceira etapa da explicação — ficava
 * abaixo da dobra, dentro de um bloco que é `position: sticky` e por
 * isso NUNCA seria alcançada rolando.
 *
 * `display: contents` dissolve a caixa do texto e joga os filhos dela
 * direto no grid, pra que a ordem possa ser título → subida →
 * aparelho → legenda.
 */
@media (max-width: 859px) {
  .palco__quadro {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 4px;
    padding-top: 64px;
  }
  .palco__texto { display: contents; }
  /*
   * O RÓTULO SAI, e a SUBIDA FICA — era o contrário, e estava errado.
   *
   * "Contador de caloria por foto" repete as palavras que o H1 agora
   * carrega ("Quantas calorias… seu prato"). Já a subida é a única que
   * traz o NÚMERO — 638 kcal — que é a resposta da pergunta do título e
   * o que alguém procurando "quantas calorias tem um prato feito" veio
   * ler. Escondê-la no celular é escondê-la de 81% do público.
   */
  /*
   * DESCENDENTE, não filho direto. `display: contents` muda quem é ITEM
   * DE GRID, mas não muda a árvore do DOM: o rótulo continua sendo filho
   * de `.palco__texto`. Escrito com `>` o seletor não casava com nada, o
   * rótulo ficava, e sobrava um quinto item pra quatro linhas de grid —
   * o título caía por cima da subida. A regra não dava erro; só não
   * acontecia.
   */
  .palco__quadro .rotulo { display: none; }
  .palco__linha {
    order: 2;
    font-size: 14.5px;
    line-height: 1.4;
    max-width: none;
    margin-bottom: 6px;
  }
  .colossal {
    order: 1;
    /* Três linhas no celular (o título novo é uma frase mais longa
       que a anterior), então cada ponto de fonte custa três vezes mais
       altura — e a altura que sobra é a do aparelho. */
    font-size: clamp(30px, 8.4vw, 44px);
    margin-bottom: 6px;
  }
  .palco__quadro .tv {
    order: 3;
    height: 100%;
    width: auto;
    max-width: 100%;
  }
  .legendas { order: 4; margin-top: 10px; }
  .anima .legendas { min-height: 78px; }
  /* Sem lugar pro botão: quem repete a cena é rolar de volta pro topo. */
  .anima .repetir { display: none; }
}

/* Do tablet pra cima o texto vai pro LADO do aparelho. */
@media (min-width: 860px) {
  .palco__quadro {
    /*
     * 1.15fr, não 1fr: o texto pesa mais que o aparelho, e a coluna
     * dele é mais larga de propósito. Simetria perfeita é o que faz um
     * herói parecer "template de duas colunas"; um pouco de desequilíbrio
     * é o que faz parecer composição.
     */
    grid-template-columns: 1.15fr auto;
    grid-template-rows: 1fr;
    gap: clamp(40px, 7vw, 110px);
    padding-top: 40px;
  }
  .palco__quadro .tv { width: min(330px, 34vw); }
}

/*
 * O aparelho sobre a mesa. Uma sombra larga, baixa e difusa — a que um
 * objeto de verdade faz sob luz de janela — não o drop-shadow curto de
 * cartão de framework. É a única profundidade da página, e ela existe
 * porque o celular é a única coisa que não é papel.
 */
.palco__quadro .tv {
  box-shadow:
    0 2px 4px rgba(27, 24, 19, 0.06),
    0 18px 40px -12px rgba(27, 24, 19, 0.28),
    0 60px 90px -40px rgba(27, 24, 19, 0.22);
}

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

/*
 * O respiro entre seções era clamp(84px, 13vh, 150px) — em cima E
 * embaixo. Num celular de 900px de altura dava 234px de nada entre o
 * fim de uma seção e o começo da outra, mais a revelação atrasada do
 * `.entra`: telas inteiras de preto rolando. Medido ao vivo em 16/09:
 * ~400px vazios antes de "Sabe dizer não" e antes de "Por que o peso
 * importa". Página que rola vazia lê como template carregando.
 */
.secao {
  position: relative;
  padding: clamp(56px, 9vh, 120px) clamp(16px, 4vw, 40px);
}
@media (max-width: 660px) {
  .secao { padding-top: 48px; padding-bottom: 48px; }
}
.secao--fio + .secao--fio { border-top: 1px solid var(--linha); }
.dentro { max-width: var(--dentro); margin: 0 auto; }

/* Tudo que entra rolando começa VISÍVEL e não em opacity 0 permanente:
   sem JS, a página inteira continua legível. */
.entra { opacity: 1; }

.lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linha);
}
.lista li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--linha);
}
.lista b {
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.lista small {
  display: block;
  font-size: 14px;
  color: var(--tinta2);
  font-weight: 400;
  margin-top: 2px;
}
/* Os números em serifa também — são o que um cupom imprime, e é a
   mesma família dos títulos: duas vozes na página, não três. */
.lista strong {
  font-family: var(--serifa);
  font-optical-sizing: auto;
  font-size: clamp(20px, 2.8vw, 25px);
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.lista strong span {
  font-size: 0.6em;
  color: var(--tinta2);
  font-weight: 600;
  margin-left: 3px;
}
.lista li:last-child { border-bottom: none; }
.lista__soma {
  border-top: 2px solid var(--verde) !important;
  border-bottom: none !important;
}
.lista__soma b, .lista__soma strong { color: var(--verde); }

/*
 * Os quatro números eram do tamanho de um título (46 a 76px), um por
 * linha no celular, cada um com metade da tela vazia ao lado — o "stats
 * block" de template, e desproporcional pro que os números dizem. Dois
 * por linha, menores: continuam sendo números, param de ser cartazes.
 */
.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(24px, 4vw, 48px);
}
@media (max-width: 660px) {
  .numeros { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
}
.numero b {
  display: block;
  font-family: var(--serifa);
  font-optical-sizing: auto;
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.numero span {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta2);
  max-width: 24ch;
}

.recusas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.recusas li {
  display: grid;
  grid-template-columns: minmax(0, 260px) 1fr;
  gap: clamp(14px, 3vw, 40px);
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--linha);
}
.recusas s {
  font-size: clamp(18px, 2.6vw, 23px);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration-thickness: 1px;
  color: var(--tinta2);
}
.recusas span { font-size: 15px; line-height: 1.6; color: var(--tinta2); }
@media (max-width: 660px) {
  .recusas li { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------------------------------------------------------------- a dor */

/*
 * A mesma grade das recusas — nome à esquerda, explicação à direita — de
 * propósito: as duas seções são a mesma conversa ("o que fez você
 * largar" / "o que ele recusa fazer"), e a forma igual diz isso sem
 * precisar de uma linha de texto.
 *
 * A diferença é o peso: aqui o nome é a DOR, em tinta cheia e sem
 * riscar, porque ela é verdadeira. O <em> no fim de cada linha é a
 * resposta do app, em verde — o único lugar da seção onde o app fala.
 */
.dores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.dores li {
  display: grid;
  grid-template-columns: minmax(0, 260px) 1fr;
  gap: clamp(14px, 3vw, 40px);
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--linha);
}
.dores > li > b {
  font-size: clamp(18px, 2.6vw, 23px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tinta);
}
.dores span { font-size: 15px; line-height: 1.6; color: var(--tinta2); }
.dores span b { color: var(--tinta); font-weight: 700; }
.dores em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-weight: 600;
  color: var(--verde);
}
@media (max-width: 660px) {
  .dores li { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------------------------------------------------------- o amanhecer */

/*
 * A virada de mundo. Uma faixa de gradiente do carvão pro papel — ela
 * existe pra que a troca seja um LUGAR da página, e não um corte seco
 * que parece defeito de carregamento.
 */
.amanhecer {
  /* A virada de mundo não existe mais — a página é um mundo só. A regra
     fica só pra uma cópia velha do HTML não mostrar um gradiente preto
     do nada. */
  display: none;
}

/*
 * `.secao--claro` trocava os tokens pro papel a partir do preço. A página
 * inteira é papel agora; a classe fica no HTML (o casa.js a usa pra
 * saber onde "começa o claro") e aqui só dá o segundo tom de papel, um
 * pouco mais fundo, pra separar avaliar de confiar sem virar outro
 * mundo.
 */
.secao--claro {
  background: var(--fundo2);
}
.secao--fecho { padding-bottom: clamp(96px, 16vh, 180px); }

.precos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.preco {
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 26px;
}
.preco--pago { border-color: var(--verde); border-width: 2px; }
.preco__n {
  margin: 0 0 16px;
  font-family: var(--serifa);
  font-optical-sizing: auto;
  font-size: clamp(34px, 5vw, 44px);
  font-weight: 600;
  letter-spacing: 0;
}
.preco__n small {
  font-size: 0.42em;
  font-weight: 600;
  color: var(--tinta2);
  letter-spacing: 0;
}
.preco ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-size: 15px;
  color: var(--tinta2);
}

/* O CTA do fecho é o mesmo botão de tinta, só maior — é o único da
   página que a pessoa alcança depois de ler tudo. */
.acao {
  margin: 8px 0 0;
  padding: 16px 26px;
  font-size: 17px;
}

/* ------------------------------------------------------ menos movimento */

/*
 * Quem pediu menos movimento não recebe uma página quebrada: o palco
 * deixa de ser um trilho de 380vh e vira uma tela só, com tudo já no
 * lugar. Movimento não é enfeite pra quem tem enxaqueca vestibular.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .palco { height: auto; }
  .palco__quadro {
    position: static;
    height: auto;
    padding-top: 96px;
  }
  .legendas {
    position: static;
    min-height: 0;
    display: grid;
    gap: 18px;
  }
  .legenda { position: static; opacity: 1; }
  .tv__itens li { opacity: 1; }
  .tv__barra { width: 100%; }
  .repetir { display: none; }
}

/*
 * O ANEL DE FOCO — esta página era a ÚNICA do site sem nenhuma regra de
 * foco. Tabulando, os sete primeiros focáveis caíam no anel padrão do
 * navegador: 1px laranja, contra os 2px verdes com 3px de folga do
 * resto do site. Anel de outra cor e mais fino é inconsistência que só
 * quem usa teclado sente.
 */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
  border-radius: 4px;
}

/* A barra desta página é `fixed` e tem 68px: sem isto o "pular para o
   conteúdo" entrega a pessoa embaixo dela. */
html { scroll-padding-top: 76px; }

/*
 * O rodapé de verdade. Alvo de toque de 24px no mínimo (WCAG 2.2 2.5.8)
 * e sublinhado, porque o público é 81% Android com o dedo na tela.
 */
.secao--rodape {
  padding-top: 0;
  padding-bottom: clamp(48px, 8vh, 90px);
}
.rodape__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
}
.rodape__links a {
  display: inline-block;
  min-height: 24px;
  padding-block: 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/*
 * DUAS SEÇÕES CURTAS SEGUIDAS SOMAVAM OS RESPIROS.
 *
 * Cada `.secao` tem até 150px em cima e 150px embaixo. Onde duas se
 * encostam, isso vira 300px de nada — quase metade de uma tela de
 * celular. Num fim de página com um título curto e um botão, o vazio
 * não lê como respiro: lê como página que não terminou de carregar.
 *
 * Medido a 412×740 em produção: ~380px entre "veja os planos" e "Agora
 * com o seu prato", e ~250px entre o botão e o rodapé.
 */
.secao--claro + .secao--claro { padding-top: 0; }
.secao--fecho { padding-bottom: clamp(56px, 9vh, 96px); }
.secao--rodape { padding-top: 0; }

/* =====================================================================
   O QUE A /prato NÃO TINHA, E A HOME PRECISA
   =====================================================================

   Esta folha nasceu servindo uma página de demonstração. Quando ela
   virou a home, veio junto o que só a home carrega: a barra fixa do
   rodapé (+11% de conversão no histórico deste projeto), a FAQ, a
   faixa de confiança, a seção com a captura ao lado do texto e o
   rodapé com a linha do fornecedor.

   Tudo escrito na MESMA linguagem — pilha do sistema, peso 800,
   entreletra negativa, e os dois mundos separados pelo amanhecer.
   ===================================================================== */

/* --------------------------------------------------- texto do herói */

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

/* O <em> da segunda linha do título: cor e linha própria marcam o giro
   da frase. Sem itálico — ele era metade do par (serifa + itálico
   colorido) que hoje denuncia página gerada por máquina. */
.colossal em {
  display: block;
  font-style: normal;
  color: var(--verde);
}

/* ------------------------------------------- seção com imagem ao lado */

.dupla {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.dupla__media img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 22px;
  border: 1px solid var(--linha);
}
@media (min-width: 760px) {
  .dupla { grid-template-columns: 1fr auto; }
  .dupla__media img { max-width: 260px; }
}

/* ------------------------------------------------------------- preço */

/*
 * O selo era a última pílula da página: verde, caixa alta, espaçada — a
 * fórmula inteira num elemento só. Vira uma linha em serifa, na cor do
 * acento, sem fundo: é uma anotação à margem do cartão, como alguém
 * escreveria "metade do preço" a caneta num cardápio.
 */
.selo {
  display: block;
  margin: 0 0 8px;
  font-family: var(--serifa);
  font-optical-sizing: auto;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--verde);
}

.preco .acao { margin-top: 20px; width: 100%; justify-content: center; }

/* O botão do plano grátis é de CONTORNO, e a borda é a única coisa que
   diz que aquilo é um botão — por isso ela precisa de 3:1 de contraste,
   não da cor de linha decorativa. */
.acao--vazia {
  background: transparent;
  color: var(--verde);
  border: 2px solid var(--verde);
}

.confianca {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 15px;
  color: var(--tinta2);
}
.confianca li {
  padding-left: 26px;
  position: relative;
}
.confianca li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--verde);
  font-weight: 700;
}
.confianca a { color: var(--verde); }

/* --------------------------------------------------------------- FAQ */

.faq {
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--linha);
}
.faq__item { border-bottom: 1px solid var(--linha); }
.faq__pergunta {
  cursor: pointer;
  list-style: none;
  padding: 20px 32px 20px 0;
  font-size: clamp(16px, 2.4vw, 19px);
  font-weight: 600;
  letter-spacing: -0.015em;
  position: relative;
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--verde);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.faq__item[open] .faq__pergunta::after { content: "−"; }
.faq__resposta {
  margin: 0;
  padding: 0 0 22px;
  max-width: 66ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--tinta2);
}
.faq__resposta a { color: var(--verde); }
.faq__resposta i { font-style: italic; }

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

.rodape__marca {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.rodape__marca span { color: var(--verde); }
.rodape__fornecedor { font-size: 13px; opacity: 0.8; }

/* --------------------------------------------- a barra fixa do rodapé

   O histórico deste projeto registra +11% de conversão só com ela.

   Ela nasce com `hidden` no HTML e o script tira quando o herói sai da
   tela. Antes disso ela competiria com o botão que já está visível — e
   dois botões grandes ao mesmo tempo viram nenhum botão.
   --------------------------------------------------------------- */
.ancora {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px clamp(14px, 4vw, 28px);
  background: color-mix(in srgb, var(--fundo) 90%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  border-top: 1px solid var(--linha);
  /* `[hidden]` do navegador PERDE pra qualquer `display:` do autor — é
     a cicatriz que já deixou um bloco desta casa visível quando devia
     estar escondido. */
}
.ancora[hidden] { display: none !important; }
.ancora__recado {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--tinta2);
  max-width: 18ch;
}
.ancora__botao {
  flex: 0 0 auto;
  padding: 13px 20px;
  min-height: 44px;
}

/*
 * O AVISO DE COOKIE COBRIA 100% DESTE BOTÃO — e só pra quem vem de
 * campanha. Medido a 412×740 com `?utm_source=tiktok`: o aviso ocupa
 * z-index 90 e esta barra, 30; `elementFromPoint` nos três cantos do
 * botão devolvia o aviso. E como o aviso só nasce quando há UTM na URL,
 * o defeito nunca aparecia pra quem abria `/` pra testar.
 */
body:has(.aviso-cookie) .ancora { display: none !important; }

/* A barra tapa o fim da página: o rodapé precisa de folga por baixo. */
@media (max-width: 859px) {
  .secao--rodape { padding-bottom: 110px; }
}

/*
 * Texto só pro leitor de tela. `clip-path` e 1px, nunca `display:none`
 * — display none TIRA o texto da árvore de acessibilidade, que é o
 * contrário do que esta classe existe pra fazer.
 */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Nota que serve de entrada pra seção, não de rodapé dela. */
.nota--acima { margin: 0 0 28px; }

/* =====================================================================
   AS TRANSIÇÕES MORAM AQUI, NÃO NUMA BIBLIOTECA

   O anime.js pesava 36,1 KB comprimidos pra fazer fade e translate numa
   página cujo código próprio inteiro soma 6,3 KB. `transition` faz o
   mesmo, nativo, sem baixar nada — e na única página onde cai o tráfego
   de vídeo isso não é detalhe.

   O ESTADO DE REPOUSO CONTINUA SENDO O VISÍVEL: quem esconde é
   `.entra--espera`, posta pelo JavaScript e só nos elementos que estão
   abaixo da dobra. Sem script, `.entra` é só um gancho sem efeito.
   ===================================================================== */
.anima .entra {
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.anima .entra--espera {
  opacity: 0;
  transform: translateY(18px);
}

/* A tela desliza dentro do aparelho pra centralizar o bloco aceso. */
.anima .tv__tela {
  transition: transform 0.62s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .anima .entra,
  .anima .tv__tela {
    transition: none;
  }
}

/* Sobre o papel, a barra de baixo vira junto com a de cima. */
/* Mesma história da .barra--clara: o JS ainda toggla, o CSS não muda
   nada — a âncora já nasce em papel. */
.ancora--clara { }