/* A home do OuroPoster — proposta C ("Video Scrub"), aprovada em 24/08/2026.

   Vem depois de `marca.css`, que traz os tokens do manual. Aqui só o desenho da página.

   CSS escrito à mão de propósito, como o resto da landing: a página é estática, sem build,
   para carregar rápido no 4G do lojista e para a Ouro Printer conseguir editar o texto sem
   ferramenta. E sem GSAP — o herói e as entradas rodam em `lp.js`, ~120 linhas de JS puro,
   contra os ~70 KB da biblioteca. Numa página cujo assunto é velocidade, isso conta.

   Desde 24/08/2026 este arquivo desenha o SITE INTEIRO: a home e as três internas. O
   `estilo.css` anterior (1857 linhas), o `animacao.js`, o `popup-saida.js` e o GSAP foram
   removidos no mesmo commit — ver a seção "PÁGINAS INTERNAS" no fim do arquivo. */

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

html {
  scroll-behavior: smooth;
  /* O cabeçalho é sticky (~72px): a âncora precisa do respiro para o título da seção não
     nascer escondido atrás dele. */
  scroll-padding-top: calc(var(--altura-topo) + 16px);
}

/* ── Tinta por superfície (20/10/2026) ─────────────────────────────────────────────────
   Até aqui cada superfície escura invertia a cor elemento por elemento (`.secao-azul h2`,
   `.secao-azul .secao-sub`, `.secao-azul .btn-suave`…), e tudo que não entrava na lista
   herdava a tinta do branco e sumia. A auditoria de 20/10/2026 mediu o resultado: o h3
   "Ou assine só o sistema" a 1,00:1 e o link "Rodízio de cartazes na TV" a 1,87:1 no azul
   de `contratar.html`, e o anel de foco amarelo a 1:1 na faixa amarela e a ~1,6:1 no branco.

   Agora a SUPERFÍCIE declara a tinta, e título, texto de apoio, link e anel de foco leem
   daqui. Quem cria uma superfície nova entra numa das três listas abaixo, e tudo dentro
   dela já nasce legível. Os valores medidos: azul sobre branco 17,6:1, ouro sobre azul
   10,8:1, azul sobre ouro 10,8:1 — o anel nunca fica abaixo de 10:1 contra o fundo. */
:root {
  /* ponytail: altura medida do cabeçalho no desktop (14+44+14 + filete de 1px), escrita à
     mão. Mudou o respiro ou o botão do `.topo`, muda aqui; o painel do herói gruda nela. */
  --altura-topo: 73px;
  --cor-titulo: var(--azul);
  --cor-texto: var(--corpo);
  --cor-apoio: var(--suave);
  --cor-link: var(--azul);
  --cor-link-hover: var(--azul-claro);
  --cor-anel: var(--azul);
}
/* Superfícies escuras: o azul da marca e o grafite do rodapé. */
.topo,
.heroi,
.heroi-documento,
.numeros,
.secao-azul,
.prova,
.rodape {
  --cor-titulo: #fff;
  --cor-texto: #fff;
  --cor-apoio: rgba(255, 255, 255, 0.78);
  --cor-link: var(--ouro);
  --cor-link-hover: #fff;
  --cor-anel: var(--ouro);
  color: var(--cor-texto);
}
/* Cartão claro DENTRO de superfície escura: inverte de novo. */
.duplo-cartao,
.planos .destacado {
  --cor-titulo: var(--azul);
  --cor-texto: var(--corpo);
  --cor-apoio: var(--suave);
  --cor-link: var(--azul);
  --cor-link-hover: var(--azul-claro);
  --cor-anel: var(--azul);
  color: var(--cor-texto);
}
/* Superfícies amarelas: a tinta e o anel são o azul (branco sobre ouro mede 1,8:1). */
.aviso-topo,
.esteira,
.cta-fim {
  --cor-titulo: var(--azul);
  --cor-texto: var(--tinta-sobre-ouro);
  --cor-link: var(--azul);
  --cor-anel: var(--azul);
  color: var(--cor-texto);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font: 400 17px/1.6 var(--fonte-corpo);
  color: var(--corpo);
  background: var(--sup);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--fonte-display);
  font-weight: 800;
  color: var(--cor-titulo);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

/* `height: auto` junto do `max-width`, e não só o max-width (25/08/2026). Toda imagem da
   landing traz `width`/`height` no HTML — é o que reserva o espaço e evita o pulo do layout
   ao carregar. Mas atributo de altura é ALTURA USADA quando o CSS mexe só na largura: o
   cartaz de exemplo era pintado em 536×1414 com arquivo de 1000×1414, espremido a 54% da
   largura certa. Com `height: auto` a altura volta a derivar da largura, e a reserva de
   espaço dos atributos continua funcionando. Quem precisa de altura própria (a logo do
   cabeçalho) declara a sua e ganha por especificidade. */
img,
video {
  max-width: 100%;
  height: auto;
}

/* Foco visível em tudo, na cor que a SUPERFÍCIE manda (`--cor-anel`, acima). Até 20/10/2026
   o anel era sempre o amarelo, sob o argumento de que ele "aparece tanto sobre o azul quanto
   sobre o branco". A medição desmentiu: ~1,6:1 no branco, 1:1 na faixa amarela final — e o
   WCAG 1.4.11 pede 3:1. Azul no claro e no amarelo, amarelo no escuro: nunca abaixo de 10:1. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--cor-anel);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Link de texto com a cor do sistema (20/10/2026). Não havia regra base para `a`, e todo
   link de frase saía no #0000EE do navegador: fora da paleta e a 1,87:1 sobre o azul.
   `:where()` zera a especificidade, então botão, menu e rodapé continuam mandando na cor
   deles sem precisar desfazer nada aqui. */
:where(a) {
  color: var(--cor-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
:where(a):hover {
  color: var(--cor-link-hover);
}

/* Seleção de texto na marca, não no azul do sistema operacional. */
::selection {
  background: var(--ouro);
  color: var(--azul);
}

.pular {
  position: absolute;
  left: -9999px;
}
.pular:focus {
  left: 16px;
  top: 16px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--azul);
  color: #fff;
  text-decoration: none;
}

.faixa {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ── Aviso do topo ──────────────────────────────────────────────────────────────────────
   O gancho comercial antes de qualquer rolagem. A frase amarra o COMBO e só ele: quem entra
   pelo avulso paga mensalidade, e prometer o contrário aqui vira reclamação no telefone. */
.aviso-topo {
  padding: 11px 24px;
  background: var(--ouro);
  color: var(--tinta-sobre-ouro);
  text-align: center;
  font: 700 14px/1.5 var(--fonte-corpo);
}

/* ── Cabeçalho ─────────────────────────────────────────────────────────────────────────── */
.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Opaco desde 20/10/2026: a 97% o texto branco das seções azuis aparecia por trás dele
     ao rolar. O ganho do translúcido era nenhum — o fundo é a mesma cor. */
  background: var(--azul);
  border-bottom: 1px solid rgba(254, 194, 3, 0.28);
}
.topo .faixa {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-block: 14px;
}
.marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
}
.marca img {
  display: block;
  height: 42px;
  width: auto;
  /* A logo é azul sobre transparente; sobre o azul do cabeçalho ela sumiria. */
  filter: brightness(0) invert(1);
}
.menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font: 500 15px/1 var(--fonte-corpo);
  transition: background 160ms var(--curva);
}
.menu a:hover {
  background: rgba(255, 255, 255, 0.12);
}
/* "Testar grátis" é o amarelo do topo desde 20/10/2026: entrar no app como visitante é o
   primeiro passo que a página quer provocar; "Entrar" fica em contorno, para quem já tem conta. */
.topo-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topo-testar,
.topo-entrar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--ouro);
  color: var(--tinta-sobre-ouro);
  text-decoration: none;
  font: 700 15px/1 var(--fonte-corpo);
  transition:
    background 160ms var(--curva),
    transform 160ms var(--curva);
}
.topo-testar:hover {
  background: var(--ouro-escuro);
  transform: translateY(-1px);
}
.topo-testar:active,
.topo-entrar:active {
  transform: scale(0.97);
}
.topo-entrar {
  padding: 0 18px;
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.topo-entrar:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ── Herói com scrub ────────────────────────────────────────────────────────────────────
   A seção é alta e o painel gruda: enquanto ela passa, a ROLAGEM avança o vídeo quadro a
   quadro (`lp.js`). A altura vem do JS — `250vh` é só o que vale antes de o vídeo carregar
   e com JS desligado, para a seção não nascer do tamanho de uma tela e piscar.

   O véu é CSS puro, e é isso que garante o texto legível com JS fora, com o vídeo sem
   carregar e em movimento reduzido — os três casos em que ninguém está olhando o filme. */
.heroi {
  position: relative;
  height: 250vh;
  background: var(--azul);
  /* Corta o brilho decorativo. No desktop quem corta é o painel (`overflow: hidden`), mas no
     celular ele vira `position: static` e o fundo absoluto passa a se ancorar AQUI — sem esta
     linha o círculo de 560px vazava e a página rolava de lado.

     `clip`, e NÃO `hidden` (25/08/2026). `overflow: hidden` faz deste elemento o contêiner
     de rolagem do `position: sticky` do painel filho — e como ele próprio nunca rola, o
     painel deixava de grudar e sumia da tela aos ~700px. O resultado, medido: o herói de
     5.017px mostrava 4.100px de marinho vazio enquanto o vídeo fazia o scrub fora da vista.
     `clip` corta igual e não cria contêiner de rolagem, que é exatamente a diferença entre
     os dois. */
  overflow: clip;
}
.heroi-painel {
  position: sticky;
  /* Gruda ABAIXO do cabeçalho, e não no topo da janela (20/10/2026): com `top: 0` o
     cabeçalho sticky (73px) tampava o alto do painel durante o scrub inteiro — medido, o
     selo coberto 9px a 1366×768, 25px a 1280×720 e 45px a 900×700. */
  top: var(--altura-topo);
  display: grid;
  align-items: center;
  height: calc(100vh - var(--altura-topo));
  max-height: calc(100vh - var(--altura-topo));
  overflow: hidden;
  background: var(--azul);
  color: #fff;
  padding-block: clamp(20px, 4vh, 64px);
}
.heroi-fundo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* O poster mora aqui, e não no atributo `poster` do vídeo (20/10/2026). Abaixo de 900px o
   vídeo fica escondido, mas o atributo baixava os 150 KB mesmo assim: era 40% do peso da
   home no celular, para uma imagem que o lojista nunca via. Fundo dentro de media query
   não é baixado quando a consulta não casa. O vídeo sem poster é transparente até ter
   quadro, então é este fundo que aparece no lugar. */
@media (min-width: 900px) {
  .heroi-fundo {
    background: var(--azul) url('/imagens/heroi-poster.webp') center / cover no-repeat;
  }
}
.heroi-fundo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Degradê e não véu chapado: 95% de azul onde o texto vive, 28% na ponta direita, onde a
   cena continua visível. Medido: o corpo do herói fica acima de 12:1 em qualquer quadro. */
.heroi-veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0, 0, 102, 0.95) 0%,
    rgba(0, 0, 102, 0.88) 42%,
    rgba(0, 0, 102, 0.42) 78%,
    rgba(0, 0, 102, 0.28) 100%
  );
}
.heroi-brilho {
  position: absolute;
  inset: -20% -10% auto auto;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 194, 3, 0.2), transparent 62%);
  animation: pulso 9s ease-in-out infinite;
}
.heroi-grade {
  position: relative;
  display: grid;
  gap: clamp(40px, 5vw, 72px);
  /* `min(340px, 100%)` e não `340px` cru: o mínimo de um track é RÍGIDO, então a 375px de
     tela (327 de conteúdo) a coluna de 340 estourava a página em 40px — medido por varredura
     de QA, 24/08/2026. Com o `min`, o track cede quando a tela é menor que ele. */
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  align-items: center;
}
/* A coluna da direita fica VAZIA de propósito: a grade de duas colunas empurra o texto para
   a metade esquerda, que é onde o véu é forte e a cena não disputa com a letra. */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(10px, 1.6vh, 22px);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(254, 194, 3, 0.14);
  border: 1px solid rgba(254, 194, 3, 0.45);
  color: var(--ouro);
  font: 700 13px/1 var(--fonte-corpo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.selo-ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ouro);
  /* Duas piscadas e para (20/10/2026): pisca-pisca sem fim é movimento sem controle de
     pausa (WCAG 2.2.2). Em 3,6s ele já chamou o olho para o selo, que era o trabalho dele. */
  animation: piscar 1.8s ease-in-out 2;
}
.heroi h1 {
  margin-bottom: clamp(10px, 1.6vh, 20px);
  font: 800 clamp(32px, min(5.4vw, 7vh), 66px) / 1.03 var(--fonte-display);
  letter-spacing: -0.02em;
}
.heroi h1 em {
  font-style: normal;
  color: var(--ouro);
}
.chamada {
  margin-bottom: clamp(14px, 2.4vh, 30px);
  max-width: 34em;
  font: 400 clamp(16px, 2vh, 19px) / 1.6 var(--fonte-corpo);
  color: rgba(255, 255, 255, 0.82);
}

/* Testar primeiro (20/10/2026): o amarelo da dobra é o "Testar agora" — experimentar é o que
   faz o lojista querer comprar. Os dois caminhos de contratação viram a segunda escolha, em
   contorno, logo abaixo. */
.testar {
  display: grid;
  gap: 8px;
  justify-items: start;
  margin-bottom: clamp(16px, 2.6vh, 28px);
}
.btn-testar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--ouro);
  color: var(--tinta-sobre-ouro);
  text-decoration: none;
  font: 800 clamp(17px, 2.2vh, 20px) / 1 var(--fonte-corpo);
  box-shadow: 0 12px 28px rgba(254, 194, 3, 0.28);
  transition:
    background 160ms var(--curva),
    transform 160ms var(--curva);
}
.btn-testar:hover {
  background: var(--ouro-escuro);
  transform: translateY(-2px);
}
.btn-testar:active {
  transform: scale(0.98);
}
.testar-nota {
  margin: 0;
  font: 400 14px/1.4 var(--fonte-corpo);
  color: rgba(255, 255, 255, 0.78);
}
.escolhas-rotulo {
  margin: 0 0 8px;
  font: 600 14px/1.3 var(--fonte-corpo);
  color: rgba(255, 255, 255, 0.78);
}
/* Os dois caminhos de contratação. */
.escolhas {
  display: grid;
  gap: 10px;
  max-width: 560px;
  margin-bottom: clamp(12px, 2.2vh, 26px);
}
.escolha {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #fff;
  text-decoration: none;
  transition:
    transform 180ms var(--curva),
    background 180ms var(--curva),
    box-shadow 180ms var(--curva);
}
.escolha:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
}
.escolha:active {
  transform: scale(0.985);
}
.escolha-texto {
  display: grid;
  gap: 2px;
}
.escolha-texto strong {
  font: 700 18px/1.3 var(--fonte-corpo);
}
.escolha-texto span {
  font: 400 15px/1.45 var(--fonte-corpo);
  color: rgba(255, 255, 255, 0.72);
}
.escolha-seta {
  margin-left: auto;
  font-size: 22px;
  line-height: 1;
}

.garantias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  font: 500 15px/1.4 var(--fonte-corpo);
  color: rgba(255, 255, 255, 0.8);
}
.garantias li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.garantias li::before {
  content: '✓';
  color: var(--ouro);
  font-weight: 700;
}

/* ── Números ───────────────────────────────────────────────────────────────────────────
   Logo abaixo do herói, ainda no azul: quem chegou até aqui já viu a promessa e agora
   recebe a medida. Tabulares porque são medida, não texto. */
.numeros {
  background: var(--azul);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.numeros ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding-block: 28px;
  /* Cada item centrado na PRÓPRIA coluna: as colunas já dividem a faixa em partes iguais,
     então centrar dentro delas é o que faz os quatro lerem como uma fileira, em vez de
     quatro blocos encostados na borda esquerda de cada célula. */
  text-align: center;
}
.numeros b {
  display: block;
  font: 800 clamp(28px, 3.4vw, 38px) / 1 var(--fonte-display);
  color: var(--ouro);
  font-variant-numeric: tabular-nums;
}
.numeros span {
  font: 400 15px/1.4 var(--fonte-corpo);
  color: rgba(255, 255, 255, 0.72);
}

/* ── Esteira de ramos ──────────────────────────────────────────────────────────────────
   Substitui a grade de 14 cartões de segmento: a informação é "serve para a sua loja
   também", e uma esteira diz isso em 40px de altura. `aria-hidden` na segunda cópia — ela
   existe só para o laço não ter emenda. */
.esteira {
  position: relative;
  background: var(--ouro);
  overflow: hidden;
  padding-block: 14px;
  border-block: 1px solid rgba(0, 0, 102, 0.15);
}
.esteira-trilho {
  display: flex;
  width: max-content;
  animation: esteira 26s linear infinite;
  font: 800 17px/1 var(--fonte-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.esteira-trilho > span {
  display: flex;
  gap: 40px;
  padding-right: 40px;
}
/* Pausa (20/10/2026). A esteira roda sem fim, e movimento automático de mais de 5s ao lado
   de outro conteúdo pede um jeito de parar (WCAG 2.2.2). O botão para a esteira E o brilho
   do herói (`.movimento-pausado` no <html>, posto pelo `lp.js`); passar o mouse ou o foco
   por cima também segura, e fora da tela ela nem roda. Nasce `hidden` no HTML: sem JS não
   haveria quem o fizesse funcionar. */
.esteira-pausa {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ouro);
  box-shadow: 0 0 0 1px rgba(0, 0, 102, 0.25), -16px 0 16px 4px var(--ouro);
  color: var(--azul);
  cursor: pointer;
}
.esteira-pausa[hidden] {
  display: none;
}
.esteira-pausa:hover {
  background: var(--ouro-escuro);
}
.esteira-pausa[aria-pressed='true'] .icone-pausar,
.esteira-pausa[aria-pressed='false'] .icone-tocar {
  display: none;
}
.movimento-pausado .esteira-trilho,
.movimento-pausado .heroi-brilho,
.esteira:hover .esteira-trilho,
.esteira:focus-within .esteira-trilho,
.fora-de-vista .esteira-trilho,
.fora-de-vista .heroi-brilho {
  animation-play-state: paused;
}

/* ── Seções ────────────────────────────────────────────────────────────────────────────── */
.secao {
  padding-block: var(--secao-y);
  background: var(--sup);
}
.secao-alt {
  background: var(--sup-alt);
  border-block: 1px solid var(--linha);
}
.secao-azul {
  background: var(--azul);
}
.secao h2 {
  font: 800 clamp(30px, 4vw, 46px) / 1.12 var(--fonte-display);
}
.secao-sub {
  margin-top: 10px;
  font: 400 19px/1.6 var(--fonte-corpo);
  color: var(--cor-apoio);
}
.secao-azul .secao-sub {
  max-width: 62ch;
}

/* ── As três saídas que o lojista já tentou ─────────────────────────────────────────────── */
.dor {
  display: grid;
  /* `min(…, 100%)` em todas as grades de cartão (20/10/2026): o mínimo de um track é rígido,
     e a 320px (272 de conteúdo) os 280–320px fixos empurravam a home 24px para o lado. */
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
  list-style: none;
  margin: 42px 0 0;
  padding: 0;
}
.dor li {
  padding: 30px;
  border-radius: 14px;
  background: var(--sup-alt);
  border: 1px solid var(--linha);
  transition:
    transform 180ms var(--curva),
    box-shadow 180ms var(--curva);
}
.dor li:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(10, 10, 20, 0.1);
}
.dor-numero {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: var(--ouro);
  color: var(--tinta-sobre-ouro);
  font: 800 18px/1 var(--fonte-display);
}
.dor h3 {
  margin-bottom: 8px;
  font: 700 21px/1.3 var(--fonte-display);
}

/* ── Como funciona ─────────────────────────────────────────────────────────────────────── */
.passos-grade {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: start;
  margin-top: 48px;
}
.passos {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.passos li {
  display: flex;
  gap: 18px;
  padding: 26px;
  border-radius: 14px;
  background: var(--sup);
  border: 1px solid var(--linha);
}
.passo-numero {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--azul);
  color: var(--ouro);
  font: 800 17px/1 var(--fonte-display);
}
.passos h3 {
  margin-bottom: 6px;
  font: 700 20px/1.3 var(--fonte-display);
}
.prova {
  position: relative;
  padding: 26px;
  border-radius: 20px;
  background: var(--azul);
  overflow: hidden;
}
.prova-brilho {
  position: absolute;
  inset: auto -30% -40% auto;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 194, 3, 0.22), transparent 65%);
}
.prova-moldura {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}
/* A folha entra por cima e assenta — o gesto do papel saindo da impressora, que é o assunto
   da seção. UMA passada, quando a seção entra na tela (20/10/2026): em laço infinito o cartaz
   de prova passava metade do tempo meio escondido e não havia como parar (WCAG 2.2.2). O
   `.em-vista` vem do `lp.js`; sem ele (JS fora, movimento reduzido) o cartaz fica parado e
   inteiro, que é o estado final da animação. */
.prova-moldura img {
  display: block;
  width: 100%;
}
.prova.em-vista .prova-moldura img {
  animation: folha 2.4s var(--curva) both;
}
.prova-legenda {
  position: relative;
  margin-top: 18px;
  font: 500 14px/1.5 var(--fonte-corpo);
  color: rgba(255, 255, 255, 0.78);
}

/* ── Planos ────────────────────────────────────────────────────────────────────────────── */
.planos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
  align-items: start;
  list-style: none;
  /* Dois cartões, e não três (20/10/2026): esticados na faixa de 1280px cada um ficava com
     600px de largura para quatro linhas de texto. */
  max-width: 820px;
  margin: 48px 0 28px;
  padding: 0;
}
/* `> li`, e não `li` (20/10/2026): o seletor descendente alcançava a lista de limites
   DENTRO do cartão, e cada linha ("1.000 produtos no catálogo") virava outro cartão de 30px
   de respiro — caixa dentro de caixa. */
.planos > li {
  padding: 30px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 180ms var(--curva);
}
.planos > li:hover {
  transform: translateY(-4px);
}
.planos-nome {
  margin-bottom: 14px;
  font: 700 14px/1 var(--fonte-corpo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ouro);
}
/* O preço lidera o cartão desde 20/10/2026 — Essencial e Profissional, definidos pelo dono em
   18/10/2026 e vendidos pela Kiwify (CLAUDE.md). Até ali o cartão liderava pelo volume de
   exportações, porque não havia preço para mostrar. Dígito grande e tabular, a unidade em
   linha de apoio, e o anual logo embaixo, menor: é a segunda leitura, não a primeira. */
.planos-preco {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  font: 400 16px/1.3 var(--fonte-corpo);
  color: var(--cor-apoio);
}
.planos-preco b {
  font: 800 44px/1 var(--fonte-display);
  color: var(--cor-titulo);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.planos-anual {
  margin: 8px 0 22px;
  font: 400 15px/1.45 var(--fonte-corpo);
  color: var(--cor-apoio);
}
.planos-limites {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  font: 400 16px/1.45 var(--fonte-corpo);
  color: rgba(255, 255, 255, 0.82);
}
.planos-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 999px;
  background: #fff;
  color: var(--azul);
  text-decoration: none;
  font: 700 16px/1 var(--fonte-corpo);
  transition: background 160ms var(--curva);
}
.planos-botao:hover {
  background: var(--neutro-100);
}

/* O recomendado se adianta e inverte a superfície: branco sobre o azul. O destaque é do
   Essencial (`recomendado: true` em `client/src/lib/planos.ts`) porque é o plano que
   serve à loja média, e não porque seja o mais caro. */
.planos .destacado {
  padding: 34px 30px;
  background: #fff;
  color: var(--neutro-800);
  border: 2px solid var(--ouro);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  transform: translateY(-10px);
}
.planos .destacado:hover {
  transform: translateY(-14px);
}
.planos-selo {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ouro);
  color: var(--tinta-sobre-ouro);
  font: 700 12px/1 var(--fonte-corpo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.destacado .planos-nome {
  color: var(--azul-claro);
}
/* Sem botão dentro do cartão desde 20/10/2026 (as ações ficam embaixo dos dois): a margem
   que separava a lista do botão virava 26px de vazio no pé do cartão. */
.planos-limites:last-child {
  margin-bottom: 0;
}
.destacado .planos-limites {
  color: var(--corpo);
}
.destacado .planos-botao {
  background: var(--azul);
  color: #fff;
}
.destacado .planos-botao:hover {
  background: var(--azul-claro);
}

/* As ações da assinatura ficam UMA vez, embaixo dos dois cartões, e não um botão por cartão:
   a avaliação de 7 dias é a mesma para os dois planos — o plano se escolhe depois, ao
   continuar. Dois botões iguais lado a lado diriam que são dois caminhos diferentes. */
.planos-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin: 0 0 36px;
}
.planos-acoes .planos-botao {
  padding: 0 26px;
}
.planos-acoes p {
  flex: 1 1 100%;
  font: 400 15px/1.5 var(--fonte-corpo);
  color: var(--cor-apoio);
}

/* A faixa do combo fecha a seção em vez de virar um quarto cartão: ele não é um plano mais
   caro, é o outro caminho inteiro. */
.faixa-combo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  border-radius: 18px;
  background: rgba(254, 194, 3, 0.1);
  border: 1px solid rgba(254, 194, 3, 0.4);
}
.faixa-combo p {
  flex: 1 1 380px;
  font: 400 17px/1.6 var(--fonte-corpo);
  color: rgba(255, 255, 255, 0.88);
}
.faixa-combo strong {
  color: #fff;
}
.btn-destino {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--ouro);
  color: var(--tinta-sobre-ouro);
  text-decoration: none;
  font: 700 16px/1 var(--fonte-corpo);
  transition:
    background 160ms var(--curva),
    transform 160ms var(--curva);
}
.btn-destino:hover {
  background: var(--ouro-escuro);
  transform: translateY(-1px);
}

/* ── Perguntas ─────────────────────────────────────────────────────────────────────────── */
.faixa-estreita {
  max-width: 780px;
}
.perguntas {
  display: grid;
  gap: 12px;
  margin-top: 36px;
}
.perguntas details {
  padding: 20px 24px;
  border-radius: 14px;
  background: var(--sup-alt);
  border: 1px solid var(--linha);
}
.perguntas summary {
  cursor: pointer;
  font: 700 18px/1.4 var(--fonte-corpo);
  color: var(--cor-titulo);
}
.perguntas p {
  margin-top: 12px;
}

/* O link para a página de perguntas é navegação, não linha de apoio: ganha o alvo de 44px
   como qualquer outro caminho da página. */
.secao-sub a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

/* ── Fecho ─────────────────────────────────────────────────────────────────────────────── */
.cta-fim {
  padding-block: clamp(64px, 8vw, 104px);
  background: var(--ouro);
  color: var(--tinta-sobre-ouro);
  text-align: center;
}
.cta-fim h2 {
  margin-bottom: 26px;
  font: 800 clamp(30px, 4.4vw, 52px) / 1.1 var(--fonte-display);
  letter-spacing: -0.02em;
}
.cta-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.btn-azul,
.btn-contorno {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  text-decoration: none;
  font: 700 17px/1 var(--fonte-corpo);
  transition:
    background 160ms var(--curva),
    transform 160ms var(--curva);
}
.btn-azul {
  background: var(--azul);
  color: #fff;
}
.btn-azul:hover {
  background: var(--azul-claro);
  transform: translateY(-2px);
}
.btn-contorno {
  border: 2px solid var(--azul);
  color: var(--azul);
}
.btn-contorno:hover {
  background: rgba(0, 0, 102, 0.08);
}

/* ── Rodapé ────────────────────────────────────────────────────────────────────────────── */
.rodape {
  padding-block: 56px 28px;
  background: var(--neutro-800);
  color: rgba(255, 255, 255, 0.72);
}
.rodape .faixa {
  display: grid;
  gap: 36px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.rodape img {
  display: block;
  height: 44px;
  width: auto;
  margin-bottom: 16px;
  filter: brightness(0) invert(1);
}
.rodape-titulo {
  margin-bottom: 12px;
  font: 700 13px/1 var(--fonte-corpo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ouro);
}
.rodape ul {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
  font: 400 15px/1.6 var(--fonte-corpo);
}
/* 44px em TODO link do rodapé, não só nos de contato (24/08/2026, varredura de QA): os da
   coluna "Páginas" mediam 18px de altura, menos da metade do mínimo, e são navegação — o
   dedo do lojista erra e cai no link de baixo. O `gap` sai: a altura do alvo já separa. */
.rodape a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* "Início" media 37px de largura (auditoria, 20/10/2026). */
  min-width: 44px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}
.rodape a:hover {
  color: #fff;
  text-decoration: underline;
}
/* Telefone e e-mail são alvo de toque, não texto corrido. */
.rodape-contato a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.rodape-fim {
  max-width: var(--largura);
  margin: 36px auto 0;
  padding-inline: 24px;
  font: 400 14px/1.6 var(--fonte-corpo);
  color: rgba(255, 255, 255, 0.5);
}

/* ── WhatsApp fixo ─────────────────────────────────────────────────────────────────────
   O canal que o lojista realmente usa, alcançável de qualquer altura da página. Verde do
   WhatsApp e não da marca: aqui o reconhecimento vale mais que a identidade. */
.zap {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  transition:
    transform 180ms var(--curva),
    opacity 180ms var(--curva);
}
.zap:hover {
  transform: scale(1.06);
}
/* No celular o botão fixo cobria o canto do cartão "Já tenho impressora" na dobra (auditoria,
   20/10/2026). Enquanto o herói está na tela ele sai de cena — o herói já tem as ações dele
   — e volta quando o lojista desce. `visibility` junto, para não receber foco escondido. */
.zap[data-oculto] {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
}
/* O botão é fixo e passa por cima de superfície clara E escura, então nenhuma cor única de
   anel serve às duas: o anel azul (o da raiz) ganha um aro branco por baixo. */
.zap:focus-visible {
  box-shadow: 0 0 0 8px #fff;
}

/* ── Movimento ─────────────────────────────────────────────────────────────────────────── */
@keyframes esteira {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes pulso {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.06);
  }
}
@keyframes folha {
  from {
    transform: translateY(-56%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes piscar {
  0%,
  45% {
    opacity: 1;
  }
  50%,
  95% {
    opacity: 0.25;
  }
}

/* Movimento reduzido: tudo que se move por conta própria para. O scrub também — `lp.js` lê
   a mesma consulta e nem prende o herói. O que fica é o `poster`, o último quadro. */
@media (prefers-reduced-motion: reduce) {
  .esteira-trilho,
  .heroi-brilho,
  .prova.em-vista .prova-moldura img,
  .selo-ponto {
    animation: none;
  }
  /* Nada se move sozinho: não há o que pausar. */
  .esteira-pausa {
    display: none;
  }
  .planos .destacado:hover {
    transform: translateY(-10px);
  }
  .heroi {
    height: auto;
  }
  .heroi-painel {
    position: static;
    height: auto;
    max-height: none;
  }
  .escolha:hover,
  .dor li:hover,
  .planos > li:hover,
  .btn-testar:hover,
  .topo-testar:hover,
  .btn-destino:hover,
  .btn-azul:hover,
  .zap:hover {
    transform: none;
  }
}

/* No celular o vídeo não vale o custo: a 16:9 em `cover` o que aparece é um recorte central
   sem leitura, e o scrub depende de rolagem longa que o polegar não faz. Fica o azul, que é
   o fundo que o texto sempre teve. */
@media (max-width: 899px) {
  .heroi {
    height: auto;
  }
  .heroi-painel {
    position: static;
    height: auto;
    max-height: none;
    padding-block: 56px;
  }
  .heroi-fundo video {
    display: none;
  }
  /* Respiro menor no celular (20/10/2026): o cabeçalho é sticky, e cada pixel dele some da
     tela em toda a rolagem. Com 14px em cima e embaixo e 12 entre as linhas ele media 129px
     a 390 — e 185px a 360, quando os botões caíam numa terceira linha. */
  .topo .faixa {
    gap: 6px 12px;
    padding-block: 6px;
  }
  /* O `nav` é o filho do flex; travar só o `ul` deixava o pai crescer com o conteúdo, e o
     menu de quatro itens das páginas internas estourava a tela em 9px (medido, 24/08/2026). */
  .topo nav {
    order: 3;
    width: 100%;
    min-width: 0;
  }
  .menu {
    width: 100%;
    overflow-x: auto;
  }
}

/* Abaixo de 420px a primeira linha (logo + "Testar grátis" + "Entrar") só cabe inteira com
   botão e logo um pouco menores; sem isto os botões caíam para a linha de baixo e o cabeçalho
   ganhava uma terceira linha. E o menu das internas perde "Como funciona" (`.menu-extra`):
   com quatro itens ele media 406–427px numa largura útil de 272–342, e a página atual
   aparecia cortada ("Co") sem nenhuma pista de que dava para arrastar. O caminho para a home
   continua no logotipo. */
@media (max-width: 419px) {
  .marca img {
    height: 34px;
  }
  .topo-acoes {
    gap: 6px;
  }
  .topo-testar,
  .topo-entrar {
    padding: 0 12px;
    font-size: 14px;
  }
  .menu {
    gap: 0;
  }
  .menu a {
    padding: 0 10px;
    font-size: 14px;
  }
  .menu-extra {
    display: none;
  }
}

/* Desktop baixo (20/10/2026): 1366×768, 1280×720 e 900×700 são telas de notebook comuns, e
   nelas o painel do herói (agora a altura da janela MENOS o cabeçalho) não comportava o
   bloco inteiro — a 900×700 as garantias saíam cortadas embaixo. Aqui o herói aperta o
   respiro e o corpo, e a coluna do texto fica um pouco mais larga para ele quebrar em menos
   linhas. O véu continua forte nessa faixa (acima de 70% de azul até a metade da tela). */
@media (min-width: 900px) and (max-height: 860px) {
  .heroi-painel {
    padding-block: 14px;
  }
  .heroi-grade {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
  .selo {
    margin-bottom: 10px;
  }
  .heroi h1 {
    margin-bottom: 10px;
    font-size: clamp(30px, min(4.6vw, 6.2vh), 56px);
  }
  .chamada {
    margin-bottom: 14px;
    font-size: 16px;
  }
  .testar {
    gap: 6px;
    margin-bottom: 14px;
  }
  .btn-testar {
    min-height: 52px;
  }
  .escolhas {
    gap: 8px;
    margin-bottom: 12px;
  }
  .escolha {
    padding: 11px 18px;
  }
  .escolha-texto strong {
    font-size: 16px;
  }
  .escolha-texto span {
    font-size: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   PÁGINAS INTERNAS — contratar, perguntas, privacidade

   Portadas para a proposta C em 24/08/2026. Até aqui elas viviam num `estilo.css` próprio,
   com o desenho anterior; ficaram algumas horas com a paleta nova e o layout velho, que é o
   pior dos dois mundos. Agora falam a mesma língua da home: mesmo cabeçalho, mesmo rodapé, mesmo
   par de tipos, mesmos raios.

   O que elas NÃO herdam é o herói: o da home é o vídeo preso à rolagem, e uma página de
   texto não tem filme para prender. `.heroi-documento` é a versão sóbria — título, uma linha
   de apoio, e o azul da marca como fundo para a página não começar em branco. */

.heroi-documento {
  padding-block: clamp(48px, 6vw, 88px) clamp(40px, 5vw, 72px);
  background: var(--azul);
}
.heroi-documento h1 {
  font: 800 clamp(30px, 4.4vw, 52px) / 1.08 var(--fonte-display);
  letter-spacing: -0.02em;
}
.heroi-documento .selo {
  /* Sem o ponto piscando: ali ele anuncia "cartaz em 2 minutos", que é promessa da home. */
  animation: none;
}
.heroi-documento .chamada {
  margin-top: 14px;
  margin-bottom: 0;
  max-width: 60ch;
}
.heroi-documento .acoes {
  margin-top: 26px;
}

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

/* ── Botões ──────────────────────────────────────────────────────────────────────────────
   Quatro papéis, e a regra é a do manual: o amarelo marca a SAÍDA (falar com a Ouro
   Printer), o azul é ação comum, o branco é alternativa e o vazado só existe sobre o azul. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  text-decoration: none;
  font: 700 16px/1 var(--fonte-corpo);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background 160ms var(--curva),
    transform 160ms var(--curva);
}
.btn:active {
  transform: scale(0.98);
}
.btn-primario {
  background: var(--azul);
  color: #fff;
}
.btn-primario:hover {
  background: var(--azul-claro);
}
.btn-suave {
  background: var(--sup);
  color: var(--azul);
  border-color: var(--linha);
}
.btn-suave:hover {
  background: var(--neutro-100);
}
.btn-destaque {
  background: var(--ouro);
  color: var(--tinta-sobre-ouro);
}
.btn-destaque:hover {
  background: var(--ouro-escuro);
}
/* Só sobre superfície escura — o nome diz, e ainda assim ele apareceu dentro de um cartão
   branco em `contratar.html`, branco no branco (medido, 24/08/2026). O seletor agora recusa
   o uso fora do azul: sobre claro ele cai no tratamento do `.btn-suave`. */
.btn-vazado-claro {
  border-color: var(--linha);
  color: var(--azul);
}
.secao-azul .btn-vazado-claro,
.heroi-documento .btn-vazado-claro,
.cta-fim .btn-vazado-claro {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.btn-vazado-claro:hover {
  background: rgba(255, 255, 255, 0.12);
}
.btn-largo {
  width: 100%;
}
/* Sobre o azul, o botão branco troca de tinta para não sumir. */
.secao-azul .btn-suave,
.heroi-documento .btn-suave {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.secao-azul .btn-suave:hover,
.heroi-documento .btn-suave:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* …MENOS dentro de um cartão claro, que existe dentro da seção azul e inverte a superfície
   outra vez. A regra acima é por DESCENDÊNCIA, então ela alcançava o botão de um cartão
   branco e o deixava branco no branco — 1:1, medido em `contratar.html` (24/08/2026). Toda
   inversão aninhada precisa desfazer a de fora; é o preço de escolher cor por ancestral. */
.secao-azul .duplo-cartao .btn-suave,
.secao-azul .destacado .btn-suave,
.secao-azul .duplo-cartao .btn-vazado-claro,
.secao-azul .destacado .btn-vazado-claro {
  background: var(--sup);
  color: var(--azul);
  border-color: var(--linha);
}
.secao-azul .duplo-cartao .btn-suave:hover,
.secao-azul .destacado .btn-suave:hover {
  background: var(--neutro-100);
}

/* ── Documento (privacidade) ─────────────────────────────────────────────────────────────
   Prosa jurídica revisável: nada de cartão, nada de grade. Só medida de leitura e ritmo. */
.documento h2 {
  margin-top: 44px;
  margin-bottom: 12px;
  font: 700 24px/1.25 var(--fonte-display);
}
.documento h2:first-of-type {
  margin-top: 0;
}
.documento p,
.documento ul {
  margin-bottom: 16px;
}
.documento ul {
  padding-left: 22px;
}
.documento li {
  margin-bottom: 8px;
}
.aviso {
  padding: 20px 22px;
  margin-bottom: 40px;
  border-radius: 14px;
  background: var(--ouro-claro);
  border: 1px solid rgba(254, 194, 3, 0.55);
  color: var(--neutro-800);
}

/* ── Perguntas agrupadas (faq) ───────────────────────────────────────────────────────── */
.grupo-perguntas {
  margin-bottom: 48px;
}
.grupo-titulo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.grupo-titulo h2 {
  font: 700 24px/1.2 var(--fonte-display);
}
.selo-numero {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--azul);
  color: var(--ouro);
  font: 800 17px/1 var(--fonte-display);
}
.resposta > :first-child {
  margin-top: 12px;
}
.resposta > * + * {
  margin-top: 12px;
}

/* ── Trilho de passos (contratar) ──────────────────────────────────────────────────────
   Numerado pelo CSS: a ordem É a informação, e escrever o número no HTML deixaria os dois
   fora de sincronia no dia em que um passo entrar no meio. */
.trilho {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  counter-reset: passo;
}
.trilho li {
  position: relative;
  padding: 26px 26px 26px 82px;
  border-radius: 14px;
  background: var(--sup);
  border: 1px solid var(--linha);
  counter-increment: passo;
}
.trilho li::before {
  content: counter(passo);
  position: absolute;
  left: 26px;
  top: 26px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--azul);
  color: var(--ouro);
  font: 800 17px/1 var(--fonte-display);
}
.trilho h3 {
  margin-bottom: 6px;
  font: 700 20px/1.3 var(--fonte-display);
}
.secao-alt .trilho li {
  background: var(--sup);
}

/* ── Lista de conferência (contratar) ──────────────────────────────────────────────────
   O que está incluído. Duas colunas quando cabe: é lista de leitura rápida, não prosa. */
.confere {
  display: grid;
  /* `min(300px, 100%)`: em 320px o conteúdo da faixa tem 272px, e o mínimo fixo de 300px
     empurrava a página 4px para o lado (medido em `tv.html`). Com o `min()` a coluna nunca
     pede mais do que o espaço que existe. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 10px 28px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.confere li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.confere li::before {
  content: '✓';
  flex: none;
  color: var(--ouro-tinta);
  font-weight: 700;
}
.secao-azul .confere li::before {
  color: var(--ouro);
}

/* ── Par de caminhos (contratar) ───────────────────────────────────────────────────────── */
.duplo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
  margin-top: 32px;
}
/* `color` explícito, e não herdado: dentro de `.secao-azul` a tinta da seção é branca, e um
   cartão de fundo branco herdava branco no branco — 1:1, invisível (medido, 24/08/2026). Quem
   inverte a superfície tem de inverter a tinta junto. */
.duplo-cartao {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px;
  border-radius: 18px;
  background: var(--sup);
  color: var(--corpo);
  border: 1px solid var(--linha);
}
.duplo-cartao h3 {
  font: 700 22px/1.25 var(--fonte-display);
}
.duplo-cartao .btn {
  margin-top: auto;
}
/* O caminho principal ganha a borda de ouro — mesma marcação do plano "mais escolhido". */
.duplo-cartao.principal {
  border: 2px solid var(--ouro);
  box-shadow: 0 18px 44px rgba(10, 10, 20, 0.12);
}
.etiqueta {
  font: 700 13px/1 var(--fonte-corpo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ouro-tinta);
}
.duplo-lista {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.contatos a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--azul);
}

/* ── Foto de seção ─────────────────────────────────────────────────────────────────────── */
.secao-foto {
  padding-block: 0;
}
.secao-foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

/* Notas e apoios que aparecem nos planos das internas. */
.planos-nota {
  margin-top: 16px;
  font: 400 14px/1.5 var(--fonte-corpo);
  color: var(--suave);
}
.secao-azul .planos-nota {
  color: rgba(255, 255, 255, 0.7);
}
.planos-avulsos {
  margin-top: 48px;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   TV DA LOJA — `tv.html` (08/09/2026)

   Só dois blocos novos; o resto da página reaproveita `.trilho`, `.dor`, `.confere`,
   `.duplo` e `.perguntas` das outras internas. */

/* A televisão: uma moldura escura em volta da CAPTURA REAL da rota `/tv/:token` (a mesma
   tela que a loja pendura). É o que o concorrente faz com foto de corredor — só que a nossa
   mostra o produto de verdade, não uma sala de estar.

   ponytail: moldura e pezinho em CSS, imagem em WebP; nenhuma foto de TV existe no repo, e
   comprar uma para emoldurar um print seria peso sem informação nova. */
.tv-aparelho {
  margin: 0;
}
.tv-aparelho-moldura {
  position: relative;
  padding: 10px;
  border-radius: 14px;
  background: var(--neutro-900);
  box-shadow: 0 22px 50px rgba(10, 10, 20, 0.35);
}
.tv-aparelho-moldura::after {
  /* O pezinho, para a moldura ler como televisão e não como quadro na parede. */
  content: '';
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 22%;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 0 0 8px 8px;
  background: var(--neutro-800);
}
.tv-aparelho-moldura img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.tv-aparelho .prova-legenda {
  /* Herda o branco 78% de `.prova-legenda` e continua legível porque, aqui, o fundo é o
     azul do herói — não o branco da página, onde a legenda antiga sumia. */
  margin-top: 30px;
  margin-bottom: 0;
  max-width: 46ch;
}

/* Herói em duas colunas a partir de 900px: o texto vende, a TV prova. Abaixo disso empilha
   (a foto vem depois do botão, que é o que o dedo procura primeiro no celular). */
.faixa-tv {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
@media (min-width: 900px) {
  .faixa-tv {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
  .heroi-tv .chamada {
    max-width: 46ch;
  }
}

/* Listas dos dois cartões "já faz / ainda não faz". A marca vem do CSS porque ela É a
   informação do cartão — repetir ✓ ou — em cada <li> do HTML só convida a erro de digitação
   no dia em que alguém acrescentar um item. */
.lista-marcada li,
.lista-riscada li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.lista-marcada li::before {
  content: '✓';
  flex: none;
  font-weight: 700;
  color: var(--ouro-tinta);
}
.lista-riscada li::before {
  content: '—';
  flex: none;
  font-weight: 700;
  color: var(--neutro-300);
}

/* O que abre a pergunta é o `summary`, e só ele: o respiro do `details` em volta não é
   clicável. Media 25px de altura — o dedo erra. O `padding` cresce o alvo para 45px e a
   margem negativa devolve o espaçamento, então nada se move na tela.
   Vale para `faq.html` também, que usa o mesmo bloco. */
.perguntas summary {
  padding-block: 10px;
  margin-block: -10px;
}

/* O menu do topo é `sticky` e ficou de quatro itens quando "TV da loja" entrou: em 375px
   cada rótulo quebrava em duas ou três linhas e o cabeçalho comia 137px de tela em toda a
   rolagem. Sem quebra, o `overflow-x: auto` que o menu já tem faz o trabalho — arrasta-se
   de lado, e o cabeçalho volta a caber. */
@media (max-width: 899px) {
  .menu a {
    white-space: nowrap;
  }
}