/* A VITRINE — o estilo da única tela pública com conteúdo de produto.
 *
 * Mora fora do `tema.css` de propósito. O `tema.css` é o sistema visual do APP, carregado
 * pelas catorze telas de dentro; esta é a peça de marketing, e o que ela precisa —
 * `@property`, `container-type`, coreografia de entrada — não tem o que fazer no painel
 * nem no caderno de campo. Um erro aqui derruba UMA tela; o mesmo erro no `tema.css`
 * reprova o gate em trinta rotas.
 *
 * O contrato deste arquivo, que é o que faz a separação valer alguma coisa:
 *
 *   1. TODO seletor começa em `.vt`. Nada em `:root`, `html`, `body`, `*` ou tag nua —
 *      senão a separação é só um segundo lugar de onde estragar as outras telas.
 *   2. NENHUMA cor literal. Só tokens do `:root` do `tema.css`. É isso que faz o fallback
 *      de `@supports not (backdrop-filter)` e de `prefers-reduced-transparency` valer de
 *      graça aqui: aqueles blocos zeram os tokens, e quem consome token herda o
 *      comportamento. Um `rgba(255,255,255,.62)` escrito à mão seria a promessa de
 *      acessibilidade quebrada em silêncio.
 *   3. O estado de REPOUSO é o estado FINAL. Nada nasce com `opacity:0` esperando o
 *      JavaScript ligar: se ele não carregar, a página tem de ler inteira — e a auditoria
 *      de UX descarta elemento invisível, então ela aprovaria uma vitrine em branco.
 */

/* ============================================================ escala e casca
 *
 * Uma unidade só para a página inteira (`--vt-u`), como antes: é ela que faz tudo respirar
 * junto quando a tela muda, em vez de dezoito `clamp()` discordando entre si. O que mudou
 * é que o hero agora é uma GRADE DE DOZE COLUNAS — o comp medido das referências, escrito
 * em português no CSS, sem um único `style=` no HTML (a CSP proíbe, e a proibição é o que
 * impede uma injeção de HTML de pintar um formulário falso por cima da tela).
 *
 * Pontos de quebra: os MESMOS do resto do sistema (1100, 820, 560). Um segundo conjunto
 * seria um segundo design system escondido dentro do primeiro.
 */
.vt{ --vt-u:clamp(16px, 1.15vw, 19px);
  /* O respiro entre seções, numa variável só. Ele era um múltiplo solto de `--vt-u` em
     cada seção (2.2 aqui, 2.4 ali, 2.6 acolá), e a diferença entre eles não queria dizer
     nada: era o resto de cada seção ter nascido num dia diferente. Com uma medida só, o
     ritmo da página é uma decisão e não um acidente. */
  --vt-secao:clamp(4rem, 3rem + 5vw, 9rem);
  /* O easing de assinatura, escrito uma vez. Sai devagar no fim, que é o que faz o
     movimento parecer peso chegando ao lugar em vez de elemento aparecendo. */
  --vt-saida:cubic-bezier(.16, 1, .3, 1);
  display:flex; flex-direction:column; min-height:100dvh;
  padding:0 calc(var(--vt-u) * 2) }

/* ---------------------------------------------------------------- o topo */
.vt-topo{ display:flex; align-items:center; gap:var(--vt-u);
  max-width:1120px; width:100%; margin:0 auto; padding:calc(var(--vt-u) * 1.5) 0;
  position:relative; z-index:5 }
.vt-marca{ display:block; line-height:0 }
/* Sem `display` aqui: quem decide qual dos dois PNGs aparece é a troca por tema,
   no `tema.css`. Declarar `display:block` nos dois com a mesma especificidade e mais
   abaixo no arquivo ressuscita o logotipo escondido — e a marca aparece DUAS vezes. */
.vt-marca .logo{ width:calc(var(--vt-u) * 10); height:auto }

/* O topo tem DUAS coisas: o conforto do olho e a porta de quem já é cliente.
 *
 * A pílula de navegação, o botão de conversa e a gaveta de celular saíram daqui em 18/09,
 * e com eles saiu todo o JavaScript do cabeçalho. O que sobrou não tem estado: não abre,
 * não fecha, não depende de script, e por isso é igual em 390px e em 1440px. Um topo que
 * não precisa de gaveta é um topo que não tem como ficar preso aberto.
 *
 * A ordem é caminho antes de conforto na leitura e na tabulação, mas aqui os dois são
 * pequenos e vizinhos: o alternador primeiro porque é o mais usado por quem já entrou, e
 * o `Entrar` por último porque é o destino. */
.vt-topo-fim{ display:flex; align-items:center; gap:calc(var(--vt-u) * .7);
  margin-left:auto }
.vt-tema{ flex:none; width:44px; height:44px }
.vt-entrar{ min-height:44px; padding:0 calc(var(--vt-u) * 1.3);
  font-size:calc(var(--vt-u) * .84); font-weight:600; white-space:nowrap }

/* ---------------------------------------------------------------- o corpo */
.vt-corpo{ flex:1 1 auto; max-width:1120px; width:100%; margin:0 auto }
.vt h1{ margin:calc(var(--vt-u) * .9) 0 0;
  /* O termo em `vw` é o que protege em 390px: abaixo de 560 o `--vt-u` satura em 16px e
     para de encolher. Dimensionado pela palavra mais longa da frase, não pela frase. */
  font-size:clamp(30px, 7.6vw, calc(var(--vt-u) * 3.05));
  line-height:1.05; letter-spacing:-.042em; font-weight:600; max-width:24ch;
  text-wrap:balance; overflow-wrap:break-word }
.vt h2{ margin:0; font-size:calc(var(--vt-u) * 1.62); letter-spacing:-.038em; font-weight:600;
  text-wrap:balance }
.vt h3{ margin:0; font-size:calc(var(--vt-u) * 1.08); font-weight:600; letter-spacing:-.02em }
.vt-linha{ max-width:54ch; margin:calc(var(--vt-u) * 1) 0 0; color:var(--cinza);
  font-size:calc(var(--vt-u) * 1.02); line-height:1.6 }
.vt-linha b{ color:var(--preto); font-weight:600 }
.vt-nota{ margin:calc(var(--vt-u) * 1.2) 0 0; color:var(--cinza-2);
  font-size:calc(var(--vt-u) * .86) }
.vt-acoes{ display:flex; flex-wrap:wrap; gap:10px; margin-top:calc(var(--vt-u) * 1.7) }
.vt-acoes .b{ min-height:48px; padding:0 24px; font-size:14.5px }

/* ---------------------------------------------------------------- a abertura
 *
 * A tela inteira com uma pergunta e nada mais. Ela é a única cena da página que não vende:
 * pergunta, e devolve ao visitante a conta que ele já faz de cabeça toda semana.
 *
 * `100svh` e não `100vh`: no celular a barra do navegador recolhe durante a rolagem, e a
 * medida grande jogaria a seta de rolar para fora da tela justamente em quem precisa dela.
 * O `-4.5rem` desconta o cabeçalho, para a cena caber embaixo dele sem empurrar nada.
 *
 * Nenhum `opacity:0` aqui. Quem some é a ROLAGEM, lá embaixo no bloco de movimento, e só
 * onde o navegador souber animar por linha do tempo de rolagem. */
.vt-abertura{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:calc(100svh - 4.5rem); padding:calc(var(--vt-u) * 2) 0;
  text-align:center; transform-origin:50% 40% }
.vt-pergunta{ margin:0; max-width:26ch;
  /* A mesma régua do `h1`, porque na tela ela É o título — no HTML não, que a página tem
     um `h1` só e ele é a resposta, não a pergunta. */
  font-size:clamp(32px, 8.2vw, calc(var(--vt-u) * 3.4));
  line-height:1.03; letter-spacing:-.045em; font-weight:600; color:var(--preto);
  text-wrap:balance }
.vt-abertura-sub{ margin:calc(var(--vt-u) * 1.4) 0 0; max-width:46ch; color:var(--cinza);
  font-size:calc(var(--vt-u) * 1); line-height:1.6 }

/* A seta de rolar. Ela não é decoração: numa cena de tela cheia sem nada abaixo da dobra,
   é o que diz que a página continua. Some quando a rolagem começa, junto com a cena. */
.vt-rolar{ display:flex; align-items:flex-start; justify-content:center;
  width:26px; height:42px; margin-top:calc(var(--vt-u) * 2.6); padding-top:8px;
  border:1.5px solid var(--cinza-3); border-radius:999px }
.vt-rolar i{ display:block; width:3px; height:8px; border-radius:999px;
  background:var(--cinza) }

/* ---------------------------------------------------------------- a promessa
 *
 * Uma frase de laudo de verdade, com o pedaço que falta marcado. É a mesma sentença que a
 * folha do hero desenha de longe, agora lida de perto: quem chegou aqui já viu a marca
 * amarela e agora entende o que ela quer dizer.
 *
 * O bloco da frase é `--branco` com borda, e não vidro: ele imita papel, e papel é opaco. */
.vt-promessa{ padding:var(--vt-secao) 0 0 }
.vt-promessa h2{ max-width:30ch }
/* Sem tarja colorida na lateral. Ela estava aqui e saiu: além de ser o carimbo mais
   reconhecível de interface gerada por máquina, ela contradiz o que o bloco imita. Isto é
   um pedaço de FOLHA de laudo, e folha não tem aba azul na beirada. O que diz que é um
   trecho de laudo é o "6.2" no começo da frase e a marca amarela no fim, que são as duas
   coisas que o documento de verdade tem. */
.vt-frase{ position:relative;
  margin:calc(var(--vt-u) * 1.8) 0 0; padding:calc(var(--vt-u) * 1.6) calc(var(--vt-u) * 1.8);
  border:1px solid var(--linha); border-radius:calc(var(--r) * .7);
  background:var(--branco); box-shadow:var(--sombra-2);
  color:var(--cinza); font-size:calc(var(--vt-u) * .95); line-height:1.75 }
.vt-promessa .vt-nota{ margin-top:calc(var(--vt-u) * 1) }

/* ---------------------------------------------------------------- o hero
 *
 * A grade de comp: doze colunas, e cada peça declara onde começa e quanto ocupa. É o que
 * substitui o `style="--x:..;--y:.."` das referências — o comp fica legível no CSS e o
 * HTML fica limpo. */
.vt-hero{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr));
  column-gap:calc(var(--vt-u) * 1.2); row-gap:calc(var(--vt-u) * 2.4);
  align-items:center; padding:calc(var(--vt-u) * 2.2) 0 calc(var(--vt-u) * 2) }
.vt-hero-texto{ grid-column:1 / span 6 }
/* A folga embaixo é onde o painel de vidro desce. Sem ela ele sobraria para dentro da
   linha de estatísticas — ou, pior, ficaria em cima do parágrafo da folha, que é a prova
   que a página está tentando mostrar. */
.vt-hero-arte{ grid-column:8 / span 5; position:relative;
  padding-bottom:calc(var(--vt-u) * 8) }
.vt-stats{ grid-column:1 / span 12 }

/* A folha: o laudo desenhado com os tokens do produto, nunca um screenshot. */
.vt-folha{ padding:calc(var(--vt-u) * 1.6); border:1px solid var(--linha); border-radius:var(--r);
  background:var(--branco); box-shadow:var(--sombra-2) }
.vt-folha-topo{ display:flex; justify-content:space-between; padding-bottom:calc(var(--vt-u) * .8);
  border-bottom:2px solid var(--azul) }
.vt-folha-topo span{ display:block; height:8px; border-radius:999px; background:var(--azul-lavado) }
.vt-folha-topo span:first-child{ width:38% }
.vt-folha-topo span:last-child{ width:18% }
.vt-folha-titulo{ margin-top:calc(var(--vt-u) * 1.2); color:var(--preto);
  font-size:calc(var(--vt-u) * .82); font-weight:700; letter-spacing:.1em; text-align:center }
.vt-folha-secao{ margin-top:calc(var(--vt-u) * 1.1); color:var(--preto);
  font-size:calc(var(--vt-u) * .88); font-weight:700 }
.vt-folha-txt{ margin:calc(var(--vt-u) * .5) 0 0; color:var(--cinza);
  font-size:calc(var(--vt-u) * .8); line-height:1.65 }
.vt-folha-txt b{ color:var(--preto) }
.vt-folha-classe{ display:inline-block; margin-top:calc(var(--vt-u) * .6); padding:2px 9px;
  border-radius:999px; background:var(--alerta-lavado); color:var(--alerta);
  font-size:calc(var(--vt-u) * .72) }
.vt-folha-classe b{ font-weight:700 }
/* O amarelo do `[[PREENCHE]]` é o mesmo que o laudo de verdade usa: é a promessa de que o
   sistema marca o que falta em vez de preencher com invenção. */
/* `box-decoration-break:clone` porque este trecho QUEBRA DE LINHA: sem ele, o pedaço que
   desce para a linha seguinte perde o canto arredondado e o respiro lateral, e a marca
   amarela deixa de parecer marca-texto e passa a parecer erro de renderização. */
.vt-preenche{ padding:1px 6px; border-radius:5px; background:var(--alerta-lavado);
  color:var(--alerta); font-weight:700;
  -webkit-box-decoration-break:clone; box-decoration-break:clone }
.vt-folha-rodape{ margin-top:calc(var(--vt-u) * 1.6); padding-top:calc(var(--vt-u) * .7);
  border-top:1px solid var(--linha) }
.vt-folha-rodape span{ display:block; width:44%; height:7px; border-radius:999px;
  background:var(--poco-linha) }

/* O painel de vidro que flutua sobre a folha.
 *
 * Ele fica SOBRE um elemento opaco de propósito: vidro dentro de vidro desfoca o desfoque,
 * e a folha branca é justamente o que dá textura ao que ele amostra. Nenhum ancestral dele
 * pode ganhar `filter`, `opacity` ou `will-change:opacity` — qualquer um dos três vira o
 * subárvore em raiz de fundo, o `backdrop-filter` passa a amostrar só o que está dentro
 * dele, e o vidro achata num retângulo cinza. Isso nenhum teste pega: `getComputedStyle`
 * continua dizendo `blur(26px)`. Só se vê olhando. */
.vt-painel{ position:absolute; left:calc(var(--vt-u) * -2.6); bottom:0;
  width:calc(var(--vt-u) * 13.5); padding:calc(var(--vt-u) * 1.2);
  border:1px solid var(--vidro-borda); border-radius:calc(var(--r) * .85);
  background:var(--vidro-forte);
  -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque);
  box-shadow:inset 0 1px 0 var(--vidro-brilho), var(--sombra-2) }
.vt-painel-titulo{ font-size:calc(var(--vt-u) * 1.02); font-weight:600; letter-spacing:-.025em;
  color:var(--preto) }
.vt-ponto{ display:inline-block; width:7px; height:7px; margin-left:7px; border-radius:50%;
  background:var(--azul); vertical-align:middle }
.vt-selo{ position:absolute; top:calc(var(--vt-u) * 1.1); right:calc(var(--vt-u) * 1.1);
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--vt-u) * 2.5); height:calc(var(--vt-u) * 2.5); border-radius:50%;
  background:var(--azul-lavado); color:var(--azul) }
.vt-selo svg{ width:calc(var(--vt-u) * 1.15); height:calc(var(--vt-u) * 1.5) }
.vt-painel-sub{ margin:calc(var(--vt-u) * .6) 0 0; color:var(--cinza);
  font-size:calc(var(--vt-u) * .82); line-height:1.5 }
.vt-etapa{ margin:calc(var(--vt-u) * 1) 0 calc(var(--vt-u) * .4); color:var(--cinza-2);
  font-size:calc(var(--vt-u) * .74); letter-spacing:.02em }
.vt-trilho{ height:7px; border-radius:999px;
  background:var(--cinza-3); overflow:hidden }
.vt-trilho i{ display:block; width:72%; height:100%; border-radius:999px; background:var(--azul) }

/* A linha de estatísticas. Nenhum número aqui é medição: são fatos do produto — quantos
   documentos ele escreve, quanta configuração ele pede, e onde o caderno funciona. */
.vt-stats{ display:flex; align-items:center; flex-wrap:wrap;
  gap:calc(var(--vt-u) * 1.4); margin:0; padding:calc(var(--vt-u) * 1.6) 0 0; list-style:none;
  border-top:1px solid var(--linha) }
.vt-stats li{ display:flex; align-items:baseline; gap:calc(var(--vt-u) * .7) }
.vt-stats b{ font-size:calc(var(--vt-u) * 2.5); font-weight:600; letter-spacing:-.045em;
  line-height:1; color:var(--preto); font-variant-numeric:tabular-nums; white-space:nowrap }
.vt-stats span{ color:var(--cinza); font-size:calc(var(--vt-u) * .8); line-height:1.35 }
.vt-risco{ width:14px; height:calc(var(--vt-u) * 2.4); flex:none;
  background:linear-gradient(to top left, transparent calc(50% - .8px),
    var(--cinza-3) calc(50% - .8px), var(--cinza-3) calc(50% + .8px),
    transparent calc(50% + .8px)) }

/* ---------------------------------------------------------------- o tríptico
 *
 * Três cartões, cada um com um painel DESENHADO em cima e a copy embaixo. O desenho é
 * feito com os tokens do produto — barra, pílula, trilho —, que é a mesma regra da folha
 * do hero: o que a página mostra do produto, ela desenha.
 *
 * `container-type:inline-size` faz o miolo medir contra o CARTÃO e não contra a janela,
 * que é o que mantém a composição intacta quando a grade vira duas colunas e depois uma.
 * Ele resolve em `contain: layout style inline-size` — sem contenção de pintura — então
 * não vira raiz de fundo e não achata o vidro de ninguém. */
.vt-passos{ padding:calc(var(--vt-u) * 2.4) 0 }
.vt-tres{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--gap); margin-top:calc(var(--vt-u) * 1.6) }
.vt-passo{ container-type:inline-size;
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--linha); border-radius:var(--r); background:var(--branco);
  box-shadow:var(--sombra); transition:border-color .16s ease, transform .16s ease,
    box-shadow .16s ease }
.vt-passo:hover{ transform:translateY(-3px); border-color:var(--azul); box-shadow:var(--sombra-2) }
.vt-visual{ position:relative; aspect-ratio:1.18; margin:calc(var(--vt-u) * .55);
  border-radius:calc(var(--r) * .72); overflow:hidden;
  background-color:var(--papel-2);
  background-image:linear-gradient(180deg, var(--branco), var(--papel-2)) }
.vt-passo-copy{ padding:calc(var(--vt-u) * .5) calc(var(--vt-u) * 1.35) calc(var(--vt-u) * 1.5) }
.vt-passo-copy p{ margin:calc(var(--vt-u) * .5) 0 0; color:var(--cinza);
  font-size:calc(var(--vt-u) * .85); line-height:1.6 }
.vt-passo-copy p b{ color:var(--preto); font-weight:600 }

/* -- cartão 1: a vistoria, em barras ------------------------------------- */
.vt-tempo{ position:absolute; top:7%; left:14%; right:14%;
  display:flex; align-items:center; justify-content:space-between;
  color:var(--cinza); font-size:4cqw; font-weight:500 }
.vt-tempo i{ flex:1 1 auto; margin:0 6cqw; border-top:1px dashed var(--cinza-3) }
.vt-barras{ position:absolute; left:7%; right:7%; bottom:14%; height:56%;
  display:flex; align-items:flex-end; justify-content:space-between }
.vt-barras i{ width:2.2%; border-radius:999px; background:var(--cinza-3) }
.vt-barras i.alta{ width:2.6%; background:var(--azul) }
.vt-barras i:nth-child(1){ height:20% }   .vt-barras i:nth-child(2){ height:33% }
.vt-barras i:nth-child(3){ height:48% }   .vt-barras i:nth-child(4){ height:56% }
.vt-barras i:nth-child(5){ height:51% }   .vt-barras i:nth-child(6){ height:47% }
.vt-barras i:nth-child(7){ height:39% }   .vt-barras i:nth-child(8){ height:31% }
.vt-barras i:nth-child(9){ height:53% }   .vt-barras i:nth-child(10){ height:55% }
.vt-barras i:nth-child(11){ height:60% }  .vt-barras i:nth-child(12){ height:56% }
.vt-barras i:nth-child(13){ height:100% } .vt-barras i:nth-child(14){ height:92% }
.vt-barras i:nth-child(15){ height:76% }  .vt-barras i:nth-child(16){ height:67% }
.vt-barras i:nth-child(17){ height:62% }  .vt-barras i:nth-child(18){ height:65% }
.vt-barras i:nth-child(19){ height:59% }  .vt-barras i:nth-child(20){ height:70% }
.vt-barras i:nth-child(21){ height:74% }  .vt-barras i:nth-child(22){ height:87% }
.vt-barras i:nth-child(23){ height:83% }  .vt-barras i:nth-child(24){ height:77% }
.vt-chip{ position:absolute; top:22%; left:50%; transform:translateX(-50%);
  padding:1.6cqw 3.4cqw; border:1.5px solid var(--branco); border-radius:999px;
  background:var(--azul); color:var(--azul-tinta);
  font-size:4.2cqw; font-weight:600; white-space:nowrap; box-shadow:var(--sombra) }
.vt-eixo{ position:absolute; left:7%; right:7%; bottom:5%;
  display:flex; justify-content:space-between;
  color:var(--cinza); font-size:3.6cqw; letter-spacing:.04em }

/* -- cartão 2: o pedido e o botão ---------------------------------------- */
.vt-ia-topo{ position:absolute; top:8%; left:7%; display:flex; align-items:center;
  gap:2.6cqw; color:var(--azul-forte); font-size:5cqw; font-weight:700;
  letter-spacing:-.03em }
.vt-badge{ position:relative; width:8cqw; height:8cqw; border-radius:50%;
  background:var(--azul-lavado); flex:none }
/* A estrelinha do assistente: duas barras cruzadas, o mesmo glifo do menu de comandos. */
.vt-badge::before, .vt-badge::after{ content:""; position:absolute; border-radius:999px;
  background:var(--azul) }
.vt-badge::before{ top:44%; left:22%; width:56%; height:12% }
.vt-badge::after{ top:22%; left:44%; width:12%; height:56% }
.vt-ia-pergunta{ position:absolute; top:22%; left:7%; right:7%; margin:0;
  color:var(--preto); font-size:5cqw; font-weight:500; letter-spacing:-.03em; line-height:1.2 }
.vt-ia-prompt{ position:absolute; top:35%; left:7%; right:7%;
  padding:4cqw; border:1px solid var(--linha); border-radius:3.5cqw;
  background:var(--branco); color:var(--cinza);
  font-size:4cqw; line-height:1.35 }
.vt-ia-botao{ position:absolute; bottom:9%; left:7%; display:inline-flex; align-items:center;
  gap:2cqw; padding:3cqw 5cqw; border-radius:999px;
  background:var(--azul); color:var(--azul-tinta);
  font-size:4.2cqw; font-weight:600; box-shadow:var(--sombra-2) }
.vt-brilho{ width:5cqw; height:5cqw; display:block }
/* O ponteiro: o mesmo desenho de cursor das referências, feito em `clip-path`. */
.vt-cursor{ position:absolute; bottom:5%; left:44%; width:7cqw; aspect-ratio:.72;
  background:var(--preto);
  clip-path:polygon(0 0, 94% 62%, 57% 67%, 38% 100%);
  filter:drop-shadow(0 1px 1px var(--poco-linha)) }

/* -- cartão 3: a correção que converge ----------------------------------- */
.vt-metrica{ position:absolute; top:8%; left:7% }
.vt-metrica-rot{ display:block; color:var(--cinza); font-size:3.8cqw; font-weight:500 }
.vt-metrica-num{ display:block; margin-top:1cqw; color:var(--azul-forte);
  font-size:8.4cqw; font-weight:700; letter-spacing:-.04em; line-height:1 }
.vt-fluxo{ position:absolute; top:32%; left:0; width:100%; height:62%; display:block }
.vt-tag{ position:absolute; display:flex; align-items:center; justify-content:center;
  height:9%; padding:0 3cqw; border:1px solid var(--linha); border-radius:999px;
  background:var(--branco); color:var(--preto);
  font-size:3.6cqw; font-weight:600; white-space:nowrap; box-shadow:var(--sombra) }
.vt-tag-a{ top:33%; right:7% }
.vt-tag-b{ top:63%; left:6% }
.vt-tag-c{ top:81%; right:7% }

/* ---------------------------------------------------------------- os marcos
 *
 * Três números grandes com a conta de cada um escrita ao lado. A régua é a mesma da linha
 * de estatísticas do hero — mesma escala, mesmo risco diagonal entre eles —, para a página
 * ter UM jeito de mostrar número, e não dois. */
.vt-marcos{ padding:calc(var(--vt-u) * 1.2) 0 calc(var(--vt-u) * 2.4) }
.vt-marcos-rot{ margin:0 0 calc(var(--vt-u) * 1.2); color:var(--cinza-2);
  font-size:calc(var(--vt-u) * .78); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase }
.vt-marcos-lista{ display:flex; align-items:center; flex-wrap:wrap;
  gap:calc(var(--vt-u) * 1.4); margin:0; padding:calc(var(--vt-u) * 1.8) 0 0; list-style:none;
  border-top:1px solid var(--linha) }
.vt-marcos-lista li{ display:flex; align-items:baseline; gap:calc(var(--vt-u) * .7) }
.vt-marcos-lista b{ font-size:calc(var(--vt-u) * 2.9); font-weight:600; letter-spacing:-.045em;
  line-height:1; color:var(--preto); font-variant-numeric:tabular-nums; white-space:nowrap }
.vt-marcos-lista span{ color:var(--cinza); font-size:calc(var(--vt-u) * .8); line-height:1.35 }

/* ---------------------------------------------------------------- a conta
 *
 * A única aritmética da página, e ela é DO VISITANTE: ele digita quantos laudos faz e
 * quantas horas leva, e a multiplicação acontece aqui no navegador. Nada sai da página,
 * nada é medido por nós, e por isso não há aqui um único número que precise de fonte.
 *
 * O par (fundo `--grafite`, texto `--papel`) inverte junto nos dois temas: no claro é um
 * bloco escuro sobre papel claro, no escuro é o contrário — e o contraste é o mesmo. */
.vt-conta{ display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
  gap:calc(var(--vt-u) * 2.2); align-items:center;
  padding:calc(var(--vt-u) * 2.2); border-radius:var(--r);
  background:var(--noite); color:var(--noite-tinta) }
.vt-conta h2{ color:var(--noite-tinta) }
.vt-conta .vt-linha{ color:var(--noite-cinza) }
.vt-campos{ display:flex; flex-wrap:wrap; gap:calc(var(--vt-u) * 1); margin-top:calc(var(--vt-u) * 1.4) }
.vt-campo{ display:flex; flex-direction:column; gap:6px; margin:0 }
.vt-campo label{ color:var(--noite-cinza); font-size:calc(var(--vt-u) * .78); font-weight:500 }
.vt-campo input{ width:calc(var(--vt-u) * 7); min-height:48px; padding:0 14px;
  border:1px solid color-mix(in srgb, var(--noite-tinta) 16%, transparent);
  border-radius:var(--r-2);
  background:color-mix(in srgb, var(--noite-tinta) 8%, transparent); color:var(--noite-tinta);
  font-size:16px; font-weight:600; font-variant-numeric:tabular-nums }
.vt-campo input:focus{ border-color:var(--azul) }
.vt-conta-saldo{ padding:calc(var(--vt-u) * 1.6); border-radius:calc(var(--r) * .8);
  border:1px solid color-mix(in srgb, var(--noite-tinta) 12%, transparent);
  background:color-mix(in srgb, var(--noite-tinta) 7%, transparent) }
.vt-saldo-rot{ display:block; color:var(--noite-cinza); font-size:calc(var(--vt-u) * .78);
  font-weight:500; letter-spacing:.04em; text-transform:uppercase }
.vt-saldo-par{ display:flex; align-items:center; gap:calc(var(--vt-u) * 1.1);
  flex-wrap:wrap }
.vt-saldo-num{ display:block; margin-top:calc(var(--vt-u) * .3);
  font-size:calc(var(--vt-u) * 2.7); font-weight:700; letter-spacing:-.045em; line-height:1;
  color:var(--noite-tinta); font-variant-numeric:tabular-nums; white-space:nowrap }
/* O número da direita é o argumento inteiro da seção: é ele que diz o que o sistema faz
   com as horas da esquerda. Azul de noite, não o da marca — o da marca não alcança o
   contraste neste fundo. */
.vt-saldo-depois{ color:var(--noite-azul) }
.vt-saldo-seta{ display:flex; align-items:center; color:var(--noite-cinza);
  margin-top:calc(var(--vt-u) * 1.1) }
.vt-saldo-seta svg{ width:calc(var(--vt-u) * 1.3); height:calc(var(--vt-u) * 1.3) }
.vt-saldo-nota{ margin:calc(var(--vt-u) * 1) 0 0; color:var(--noite-cinza);
  font-size:calc(var(--vt-u) * .82); line-height:1.55 }
.vt-saldo-nota b{ color:var(--noite-tinta); font-weight:600 }

/* ---------------------------------------------------------------- o que não faz */
.vt-honesto{ padding:calc(var(--vt-u) * 2.6) 0 calc(var(--vt-u) * 2.2) }
.vt-lista{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:calc(var(--vt-u) * 1.1) calc(var(--vt-u) * 2);
  margin:calc(var(--vt-u) * 1.4) 0 0; padding:0; list-style:none }
.vt-lista li{ padding-left:calc(var(--vt-u) * 1.1); border-left:2px solid var(--alerta-lavado);
  color:var(--cinza); font-size:calc(var(--vt-u) * .9); line-height:1.6 }
.vt-lista b{ color:var(--preto); font-weight:600 }

/* ---------------------------------------------------------------- como começa
 *
 * Três passos numerados. O número é grande e vazado no papel — ele ordena a leitura sem
 * competir com o título, que é quem carrega a informação. */
.vt-comeco{ padding:calc(var(--vt-u) * 1.4) 0 calc(var(--vt-u) * 2.6) }
.vt-comeco-passos{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--gap); margin:calc(var(--vt-u) * 1.8) 0 0; padding:0; list-style:none;
  counter-reset:none }
.vt-comeco-passos li{ position:relative; padding:calc(var(--vt-u) * 1.5);
  border:1px solid var(--linha); border-radius:var(--r); background:var(--branco);
  box-shadow:var(--sombra) }
.vt-num{ display:flex; align-items:center; justify-content:center;
  width:calc(var(--vt-u) * 2.2); height:calc(var(--vt-u) * 2.2); margin-bottom:calc(var(--vt-u) * .9);
  border-radius:50%; background:var(--azul-lavado); color:var(--azul-forte);
  font-size:calc(var(--vt-u) * .95); font-weight:700; font-variant-numeric:tabular-nums }
.vt-comeco-passos p{ margin:calc(var(--vt-u) * .5) 0 0; color:var(--cinza);
  font-size:calc(var(--vt-u) * .85); line-height:1.6 }
.vt-comeco-passos p b{ color:var(--preto); font-weight:600 }

/* O ícone do WhatsApp no botão. Ele não é enfeite: é o aviso de que o clique SAI daqui e
   abre uma conversa — e um botão que não diz para onde leva é o que faz alguém fechar a
   aba assim que o aplicativo abre sozinho. */
.vt-zap{ width:17px; height:17px; flex:none }
.vt-cta-botao .vt-zap{ width:18px; height:18px }

/* ---------------------------------------------------------------- o fecho
 *
 * A grade segue o CONTEÚDO, não o contrário: uma coluna quando só há o cartão de decisão,
 * duas quando as mensagens dos clientes estão na página. É `:has()` e não uma classe no
 * HTML porque a coluna das vozes entra e sai por autorização de pessoa, não por decisão de
 * layout — e cada ida e volta não pode pedir uma edição de CSS para lembrar de fazer
 * junto. Descomentar o bloco no `landing.html` basta. */
.vt-fecho{ display:grid; grid-template-columns:1fr;
  gap:var(--gap); align-items:stretch }
.vt-fecho:has(.vt-vozes){ grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr) }

/* Sozinho, o cartão de decisão ocupa a largura inteira, e aí o texto encostado à esquerda
   deixa dois terços de azul vazio à direita. Centrado, ele vira faixa de fecho — e fecha
   uma simetria que a página já tinha sem querer: ela ABRE com uma pergunta centrada na
   tela toda, e passa a TERMINAR com outra. Ao lado das vozes ele volta a ser alinhado à
   esquerda, que é o certo quando divide a linha com uma coluna de conversa. */
.vt-fecho:not(:has(.vt-vozes)) .vt-cta{ justify-content:center; text-align:center }
.vt-fecho:not(:has(.vt-vozes)) .vt-cta-txt{ max-width:48ch; margin-inline:auto }

/* O cartão de decisão. O fundo OPACO embaixo dos borrões não é detalhe: a auditoria de
   contraste lê `background-color` e é cega a `background-image`, então um cartão só com
   gradiente mediria o texto contra o papel da página e passaria verde sendo ilegível.
   Com a cor cheia declarada, o número que o gate mede é o pior caso de verdade. */
.vt-cta{ position:relative; overflow:hidden; display:flex; align-items:center;
  padding:calc(var(--vt-u) * 3) calc(var(--vt-u) * 2.4); border-radius:var(--r);
  background:var(--noite); color:var(--noite-tinta); box-shadow:var(--sombra-2) }
/* Os borrões do cartão de decisão, animados por `@property`.
 *
 * Só ÂNGULO e PORCENTAGEM são registrados aqui — nunca cor. `@property` exige um
 * `initial-value` computacionalmente independente, e `var()` não serve: registrar uma
 * propriedade de cor obrigaria a escrever uma cor literal fora do `:root`, que é
 * exatamente a regra que mantém o tema escuro sendo uma troca de bloco. Então o que anda
 * é a POSIÇÃO e o RAIO de cada borrão; a cor sai de `color-mix()` com os tokens da marca.
 *
 * E como o movimento é animação CSS, o `*{animation:none}` de `prefers-reduced-motion`
 * (no `tema.css`) o congela sozinho — nos `initial-value` daqui. Por isso eles não são
 * zeros de preguiça: são a composição parada, a que a maioria vai ver num monitor de
 * escritório com movimento reduzido ligado.
 */
@property --vt-b1x{ syntax:'<percentage>'; inherits:false; initial-value:14% }
@property --vt-b1y{ syntax:'<percentage>'; inherits:false; initial-value:18% }
@property --vt-b1r{ syntax:'<percentage>'; inherits:false; initial-value:52% }
@property --vt-b2x{ syntax:'<percentage>'; inherits:false; initial-value:86% }
@property --vt-b2y{ syntax:'<percentage>'; inherits:false; initial-value:14% }
@property --vt-b2r{ syntax:'<percentage>'; inherits:false; initial-value:48% }
@property --vt-b3x{ syntax:'<percentage>'; inherits:false; initial-value:74% }
@property --vt-b3y{ syntax:'<percentage>'; inherits:false; initial-value:88% }
@property --vt-b3r{ syntax:'<percentage>'; inherits:false; initial-value:46% }
@property --vt-b4x{ syntax:'<percentage>'; inherits:false; initial-value:26% }
@property --vt-b4y{ syntax:'<percentage>'; inherits:false; initial-value:86% }
@property --vt-b4r{ syntax:'<percentage>'; inherits:false; initial-value:50% }

.vt-cta-luz{ position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(circle at var(--vt-b1x) var(--vt-b1y),
      color-mix(in srgb, var(--azul) 50%, transparent) 0, transparent var(--vt-b1r)),
    radial-gradient(circle at var(--vt-b2x) var(--vt-b2y),
      color-mix(in srgb, var(--azul-forte) 44%, transparent) 0, transparent var(--vt-b2r)),
    radial-gradient(circle at var(--vt-b3x) var(--vt-b3y),
      color-mix(in srgb, var(--alerta) 26%, transparent) 0, transparent var(--vt-b3r)),
    radial-gradient(circle at var(--vt-b4x) var(--vt-b4y),
      color-mix(in srgb, var(--azul) 34%, transparent) 0, transparent var(--vt-b4r));
  /* Devagar de propósito. As referências animam em 3–6 s, que numa página de venda de
     software vira letreiro; aqui o movimento tem de ser percebido como luz mudando de
     lugar, não como animação tocando. Os períodos são primos entre si para o desenho não
     voltar ao mesmo ponto a cada volta. */
  animation:
    vt-b1 23s ease-in-out infinite,
    vt-b2 29s ease-in-out infinite,
    vt-b3 31s ease-in-out infinite,
    vt-b4 19s ease-in-out infinite,
    vt-r1 13s ease-in-out infinite,
    vt-r2 17s ease-in-out infinite }

@keyframes vt-b1{
  0%,100%{ --vt-b1x:14%; --vt-b1y:18% }
  33%    { --vt-b1x:38%; --vt-b1y:34% }
  66%    { --vt-b1x:8%;  --vt-b1y:52% }
}
@keyframes vt-b2{
  0%,100%{ --vt-b2x:86%; --vt-b2y:14% }
  40%    { --vt-b2x:62%; --vt-b2y:36% }
  70%    { --vt-b2x:92%; --vt-b2y:46% }
}
@keyframes vt-b3{
  0%,100%{ --vt-b3x:74%; --vt-b3y:88% }
  50%    { --vt-b3x:52%; --vt-b3y:72% }
}
@keyframes vt-b4{
  0%,100%{ --vt-b4x:26%; --vt-b4y:86% }
  45%    { --vt-b4x:44%; --vt-b4y:96% }
  75%    { --vt-b4x:12%; --vt-b4y:70% }
}
@keyframes vt-r1{ 0%,100%{ --vt-b1r:52%; --vt-b3r:46% } 50%{ --vt-b1r:68%; --vt-b3r:58% } }
@keyframes vt-r2{ 0%,100%{ --vt-b2r:48%; --vt-b4r:50% } 50%{ --vt-b2r:62%; --vt-b4r:64% } }

.vt-cta-txt{ position:relative; max-width:34ch }
.vt-cta h2{ color:var(--noite-tinta); font-size:calc(var(--vt-u) * 2.2); letter-spacing:-.04em }
.vt-cta p{ margin:calc(var(--vt-u) * .9) 0 calc(var(--vt-u) * 1.7);
  color:var(--noite-tinta); font-size:calc(var(--vt-u) * .95); line-height:1.6 }
.vt-cta-botao{ min-height:52px; padding:0 28px; font-size:15px; font-weight:600;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:var(--azul); color:var(--azul-tinta); border-color:var(--azul);
  /* Um aro claro separa o azul do botão do azul dos borrões atrás dele — este é o único
     lugar da página onde o fundo também puxa para o azul. Aro em token, nunca em cor
     literal: é o que faz o fallback de transparência continuar valendo aqui. */
  box-shadow:0 0 0 2px color-mix(in srgb, var(--azul-tinta) 26%, transparent),
    var(--sombra-2) }
.vt-cta-botao:hover{ background:var(--azul-forte); border-color:var(--azul-forte) }

/* ---------------------------------------------------------------- as vozes
 *
 * As mensagens que os clientes escreveram, ao lado da decisão. Desenhadas como conversa
 * porque foi como chegaram: a origem da frase é parte do que ela prova.
 *
 * Fundo `--noite` como o cartão ao lado, pelo mesmo motivo registrado na E-27: o par
 * `--grafite`/`--papel` inverteria com o tema e transformaria a coluna num retângulo quase
 * branco encostado num cartão escuro, com o contraste certo e a composição desmontada.
 *
 * O balão é cartão dentro de cartão, com o raio de dentro CALCULADO a partir do de fora
 * menos o respiro. Dois raios iguais aninhados desenham uma casca de espessura variável,
 * que é o detalhe que faz a caixa parecer colada em vez de construída. */
.vt-vozes{ display:flex; flex-direction:column; overflow:hidden;
  padding:calc(var(--vt-u) * 1.6); border-radius:var(--r);
  background:var(--noite); color:var(--noite-tinta); box-shadow:var(--sombra-2) }
.vt-vozes-rot{ margin:0 0 calc(var(--vt-u) * 1.2); color:var(--noite-cinza);
  font-size:calc(var(--vt-u) * .74); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase }
.vt-vozes-fio{ flex:1 1 auto;
  display:flex; flex-direction:column; gap:calc(var(--vt-u) * .8);
  margin:0; padding:0; list-style:none }
.vt-voz{ position:relative; padding:calc(var(--vt-u) * 1);
  border:1px solid color-mix(in srgb, var(--noite-tinta) 12%, transparent);
  border-radius:calc(var(--r) - var(--vt-u) * 1.6);
  border-bottom-left-radius:calc(var(--vt-u) * .4);
  background:color-mix(in srgb, var(--noite-tinta) 8%, transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--noite-tinta) 10%, transparent) }
.vt-voz-txt{ margin:0; color:var(--noite-tinta); font-size:calc(var(--vt-u) * .95);
  line-height:1.5 }
.vt-voz-quem{ display:flex; align-items:center; flex-wrap:wrap; gap:calc(var(--vt-u) * .5);
  margin:calc(var(--vt-u) * .8) 0 0; color:var(--noite-cinza);
  font-size:calc(var(--vt-u) * .78) }
.vt-voz-quem b{ color:var(--noite-tinta); font-weight:600 }
/* O monograma ocupa o lugar da foto, que ainda não existe. Ele é desenhado, e não uma
   imagem cinza com iniciais: `VT-08` recusa imagem fora de `/estatico/marca/`, e uma foto
   de cliente numa página pública é decisão de quem aparece nela, não nossa. */
.vt-mono{ display:flex; align-items:center; justify-content:center; flex:none;
  width:calc(var(--vt-u) * 1.8); height:calc(var(--vt-u) * 1.8); border-radius:50%;
  background:color-mix(in srgb, var(--noite-azul) 22%, transparent);
  color:var(--noite-azul); font-size:calc(var(--vt-u) * .74); font-weight:700;
  letter-spacing:.02em }

/* O balão que digita: o único movimento em laço desta coluna, e o único elemento sem
   autor. Ele não afirma que há uma terceira mensagem — é `aria-hidden`, e sob movimento
   reduzido vira três pontos parados, que é exatamente o que ele é. */
.vt-voz-digita{ display:flex; align-items:center; gap:6px;
  align-self:flex-start; margin-top:auto; padding:calc(var(--vt-u) * .8) calc(var(--vt-u) * 1) }
.vt-voz-digita i{ display:block; width:6px; height:6px; border-radius:50%;
  background:var(--noite-cinza); opacity:.55;
  animation:vt-digita 1.4s ease-in-out infinite }
.vt-voz-digita i:nth-child(2){ animation-delay:.18s }
.vt-voz-digita i:nth-child(3){ animation-delay:.36s }
@keyframes vt-digita{
  0%, 60%, 100%{ transform:none; opacity:.55 }
  30%          { transform:translateY(-4px); opacity:1 }
}

/* ---------------------------------------------------------------- as perguntas
 *
 * O FAQ saiu de dentro do fecho e ficou com a largura inteira. Espremido ao lado do cartão
 * de decisão, cada pergunta quebrava em três linhas e o acordeão virava uma escada; em
 * duas colunas largas ele volta a ser uma lista que se varre com o olho. */
.vt-perguntas{ padding:var(--vt-secao) 0 0 }
.vt-perguntas .vt-faq{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:start; align-content:start; gap:8px calc(var(--vt-u) * 1.2); margin-top:calc(var(--vt-u) * 1.4) }
.vt-perguntas .vt-faq h2{ grid-column:1 / -1 }

/* O acordeão em `<details>`: abre e fecha sem uma linha de JavaScript, é navegável por
   teclado de graça, e sobrevive ao script não carregar. O `summary` não entra na medição
   de alvo de toque da auditoria — então a régua de 44px é nossa, e está aqui. */
.vt-faq{ display:flex; flex-direction:column; gap:8px }
.vt-faq h2{ margin-bottom:calc(var(--vt-u) * .4) }
.vt-q{ border:1px solid var(--linha); border-radius:var(--r-2); background:var(--branco);
  box-shadow:var(--sombra); transition:border-color .16s ease }
.vt-q:hover{ border-color:var(--cinza-3) }
.vt-q[open]{ border-color:var(--azul) }
.vt-q summary{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:48px; padding:calc(var(--vt-u) * .7) calc(var(--vt-u) * 1);
  cursor:pointer; list-style:none;
  color:var(--preto); font-size:calc(var(--vt-u) * .88); font-weight:600; line-height:1.35 }
.vt-q summary::-webkit-details-marker{ display:none }
.vt-q summary::after{ content:""; flex:none; width:9px; height:9px; margin-right:3px;
  border-right:2px solid var(--cinza); border-bottom:2px solid var(--cinza);
  transform:translateY(-2px) rotate(45deg); transition:transform .18s ease }
.vt-q[open] summary::after{ transform:translateY(2px) rotate(-135deg); border-color:var(--azul) }
.vt-q p{ margin:0; padding:0 calc(var(--vt-u) * 1) calc(var(--vt-u) * 1);
  color:var(--cinza); font-size:calc(var(--vt-u) * .84); line-height:1.6 }
.vt-q p b{ color:var(--preto); font-weight:600 }

/* ---------------------------------------------------------------- o rodapé
 *
 * A faixa "Já é cliente?" que ficava antes daqui saiu em 18/09: ela obrigava quem já paga
 * a rolar a página de venda inteira para achar a porta de casa. Quem responde agora é o
 * `Entrar` do topo, antes da primeira rolagem, e o do rodapé, para quem chegou ao fim. */
.vt-rodape{ max-width:1120px; width:100%; margin:0 auto;
  padding:calc(var(--vt-u) * 3) 0 calc(var(--vt-u) * 1.5) }
.vt-rodape-grade{ display:grid; grid-template-columns:minmax(0, 1.7fr) repeat(2, minmax(0, .8fr)) minmax(0, 1.5fr);
  gap:calc(var(--vt-u) * 1.6); padding-top:calc(var(--vt-u) * 2);
  border-top:1px solid var(--linha) }
.vt-rodape-marca .logo{ width:calc(var(--vt-u) * 9); height:auto }
.vt-rodape-marca p{ margin:calc(var(--vt-u) * .7) 0 0; max-width:26ch;
  color:var(--cinza); font-size:calc(var(--vt-u) * .82); line-height:1.6 }
.vt-rodape-col{ display:flex; flex-direction:column; align-items:flex-start;
  gap:calc(var(--vt-u) * .5) }
.vt-rodape-col h3{ margin-bottom:calc(var(--vt-u) * .2); font-size:calc(var(--vt-u) * .9) }
.vt-rodape-col a:not(.b){ color:var(--cinza); font-size:calc(var(--vt-u) * .84);
  display:inline-flex; align-items:center; min-height:30px;
  transition:color .16s ease }
.vt-rodape-col a:not(.b):hover{ color:var(--preto) }
.vt-rodape-col p{ margin:0; max-width:30ch; color:var(--cinza);
  font-size:calc(var(--vt-u) * .82); line-height:1.6 }
.vt-rodape-col .b{ margin-top:calc(var(--vt-u) * .4); min-height:44px }
.vt-rodape-fim{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px; margin-top:calc(var(--vt-u) * 2); padding-top:calc(var(--vt-u) * 1.2);
  border-top:1px solid var(--linha); color:var(--cinza-2); font-size:calc(var(--vt-u) * .8) }

/* ---------------------------------------------------------------- movimento
 *
 * A entrada roda UMA vez e termina: `backwards`, sem laço e sem JavaScript.
 *
 * Por que CSS e não a API de animação do navegador, que é o que as referências usam: o
 * `*{animation:none !important}` de `prefers-reduced-motion`, no `tema.css`, mata animação
 * CSS — e **não** mata `element.animate()`. Uma coreografia em JavaScript teria de
 * reimplementar essa guarda à mão, e o dia em que alguém esquecesse, a página passaria a
 * animar para quem pediu ao sistema que não animasse, sem nada reclamar. Aqui a guarda já
 * existe e vale de graça.
 *
 * O atraso é função da POSIÇÃO, não do HTML: `--vt-atraso` sai do `nth-child` e é herdado
 * pelo painel desenhado de dentro do cartão, que entra logo depois dele. É assim que a
 * ordem "o do meio primeiro, os de fora depois" fica escrita sem um `style=` sequer. */
@keyframes vt-sobe{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
@keyframes vt-revela{
  from{ opacity:0; clip-path:inset(0 0 34% 0) }
  to  { opacity:1; clip-path:inset(0 0 0 0) }
}

/* A entrada da abertura vai nos FILHOS, e a saída por rolagem vai no contêiner. Se as duas
   morassem no mesmo elemento, a regra de rolagem lá embaixo substituiria a de chegada, e a
   primeira coisa que o visitante vê apareceria seca. */
.vt-pergunta, .vt-abertura-sub, .vt-rolar{
  animation:vt-sobe .62s var(--vt-saida) backwards }
.vt-abertura-sub{ animation-delay:.12s }
.vt-rolar{ animation-delay:.3s }

.vt-hero-texto, .vt-hero-arte{ animation:vt-sobe .5s var(--vt-saida) backwards }
.vt-hero-texto{ animation-delay:.06s }
.vt-hero-arte{ animation-delay:.15s }

.vt-tres > *{ --vt-atraso:0ms }
.vt-tres > :nth-child(2){ --vt-atraso:60ms }    /* o do meio é o âncora: entra primeiro */
.vt-tres > :nth-child(1){ --vt-atraso:210ms }
.vt-tres > :nth-child(3){ --vt-atraso:280ms }
.vt-passo{ animation:vt-sobe .62s var(--vt-saida) backwards;
  animation-delay:var(--vt-atraso) }
.vt-visual{ animation:vt-revela .66s cubic-bezier(.24, .86, .28, 1) backwards;
  animation-delay:calc(var(--vt-atraso) + 170ms) }

@media (prefers-reduced-motion:reduce){
  .vt-passo:hover{ transform:none }
}

/* -------------------------------------------------- coreografia de ROLAGEM
 *
 * Aqui a página deixa de animar na chegada e passa a animar conforme se rola. É tudo CSS
 * nativo: `animation-timeline` troca o relógio da animação pelo progresso da rolagem, e
 * `animation-range` diz em que trecho desse progresso ela acontece. Nenhum
 * `addEventListener('scroll')`, nenhum `IntersectionObserver`, nenhum quadro de JavaScript.
 *
 * TRÊS coisas aqui não são preferência, e cada uma nasceu de um jeito de quebrar:
 *
 * 1. **O `@supports` é obrigatório.** Um navegador que não conhece `animation-timeline`
 *    ignora a linha e roda a mesma animação no relógio do DOCUMENTO: tudo dispara de uma
 *    vez no carregamento, e o visitante vê a página inteira piscar. Dentro do `@supports`,
 *    quem não suporta simplesmente não recebe animação nenhuma e lê a página parada, que é
 *    o certo.
 *
 * 2. **O repouso continua sendo o estado FINAL.** Nenhuma regra fora do `@supports` põe
 *    `opacity:0`. Vale para o navegador sem suporte, vale para `prefers-reduced-motion`
 *    (o `*{animation:none !important}` do `tema.css` apaga estas animações junto com as
 *    outras), e vale para o dia em que esta folha não carregar. É o que a prova `VT-14`
 *    mede: nada com texto pode ficar invisível com movimento reduzido.
 *
 * 3. **Só compositor:** `opacity`, `transform`, `clip-path` e `filter`. São as quatro que
 *    o navegador resolve sem refazer layout, e rolagem é justamente o momento em que não
 *    há quadro sobrando para refazer layout.
 *
 * `view()` mede o elemento entrando na janela; `scroll()` mede a rolagem da página. A
 * abertura usa `scroll()` porque ela já nasce visível e o que interessa é o quanto se
 * rolou; todo o resto usa `view()`.
 */
@keyframes vt-cena{
  from{ opacity:0; transform:translateY(26px) }
  to  { opacity:1; transform:none }
}
/* A abertura encolhendo e saindo de cena. O `scale` fica acima de .9 de propósito: mais
   que isso vira zoom de apresentação de slides, e a cena tem de entregar o lugar ao hero
   sem chamar atenção para a própria saída. */
@keyframes vt-abre{
  from{ opacity:1; transform:none }
  to  { opacity:0; transform:scale(.92) translateY(-3vh) }
}
/* O trecho que falta acendendo da esquerda para a direita: o gesto de quem passa o
   marca-texto, e a única animação da página que desenha um significado em vez de só
   apresentar um elemento.
 *
 * Quem anda é o PAPEL, não o amarelo, e a inversão não é esperteza: é contraste medido. O
 * amarelo é a `background-color` do trecho, e é ela que a auditoria lê para decidir se o
 * texto por cima é legível. Fazer o amarelo crescer exigiria zerar essa cor e deixar a
 * auditoria medir contra o papel da página, ou seja, medir um estado que ninguém vê parado.
 * Então o amarelo fica declarado o tempo todo, e o que encolhe é uma faixa da cor do papel
 * por cima dele, ancorada à direita. Parado, ela tem largura zero: o trecho está aceso, que
 * é como ele chega no laudo de verdade. */
@keyframes vt-acende{
  from{ background-size:100% 100% }
  to  { background-size:0 100% }
}

@supports (animation-timeline: view()) {
  .vt-abertura{ animation:vt-abre linear both;
    animation-timeline:scroll();
    animation-range:0 70vh }

  /* As cenas que entram. `entry 8% cover 34%` faz a entrada terminar bem antes de o
     elemento chegar ao meio da tela: uma animação que ainda está correndo quando o olho já
     está lendo é o que faz uma página parecer lenta em vez de viva. */
  .vt-promessa > *,
  .vt-passos > h2, .vt-marcos, .vt-honesto > *, .vt-comeco > *,
  .vt-conta, .vt-cta, .vt-vozes, .vt-perguntas > *{
    animation:vt-cena linear both;
    animation-timeline:view();
    animation-range:entry 8% cover 34% }

  /* Os três cartões perdem o atraso por posição e ganham a própria entrada: com linha do
     tempo de rolagem, o escalonamento por `animation-delay` não vale (o atraso é uma
     fração do alcance, não um tempo), e o que escalona de verdade é cada cartão entrar no
     campo de visão no seu momento. */
  .vt-passo{ animation:vt-cena linear both;
    animation-timeline:view();
    animation-range:entry 6% cover 30%;
    animation-delay:0s }
  .vt-visual{ animation:vt-revela linear both;
    animation-timeline:view();
    animation-range:entry 14% cover 42%;
    animation-delay:0s }

  /* O marca-texto. `background-size` é a única propriedade animada fora das quatro do
     compositor em toda a página, e ela anima um trecho de uma linha, não uma caixa que
     empurre layout. A cor da faixa é `--branco`, o mesmo token do fundo do bloco: ela
     inverte junto com o tema sem uma segunda regra. */
  .vt-acende{ background-image:linear-gradient(var(--branco), var(--branco));
    background-repeat:no-repeat; background-position:right center;
    background-size:0 100%;
    animation:vt-acende linear both;
    animation-timeline:view();
    animation-range:entry 30% cover 46% }
}

/* ---------------------------------------------------------------- responsivo
 *
 * 1100: a folha ao lado do texto fica estreita demais para o parágrafo do laudo caber em
 * três linhas — os cartões passam a duas colunas antes de o hero empilhar. */
@media (max-width:1100px){
  .vt-tres, .vt-comeco-passos{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  /* O terceiro cartão fica sozinho na segunda linha, e é assim mesmo. Deitá-lo para
     preencher o vão foi tentado e desfeito: as etiquetas do desenho são posicionadas em
     porcentagem e dimensionadas em `cqw`, então numa caixa larga e baixa elas crescem e
     saem por cima umas das outras. Um vão vazio é menos feio que texto sobreposto. */
  /* Os DOIS seletores, e o segundo não é redundância: `.vt-fecho:has(.vt-vozes)` tem
     especificidade maior que `.vt-fecho`, e media query não acrescenta especificidade
     nenhuma. Sem repetir o `:has()` aqui, o dia em que as mensagens voltarem elas ficariam
     em duas colunas espremidas no celular, e ninguém veria até abrir no telefone. */
  .vt-fecho, .vt-fecho:has(.vt-vozes){ grid-template-columns:1fr }
  .vt-cta{ padding:calc(var(--vt-u) * 2.4) calc(var(--vt-u) * 2) }
  /* O FAQ volta a uma coluna antes dos cartões: pergunta é linha de texto, e duas colunas
     estreitas quebram cada uma em três linhas. */
  .vt-perguntas .vt-faq{ grid-template-columns:1fr }
}
/* 820: o mesmo ponto em que a barra do app vira topo. Hero empilha e alvos vão a 44px.
   O topo NÃO muda aqui: ele tem dois controles pequenos e cabe inteiro em 390px, que é o
   que se ganhou ao trocar a pílula de navegação pelo `Entrar`. */
@media (max-width:820px){
  .vt{ padding:0 16px }
  /* O logotipo é um link, e no celular link é alvo de dedo: 44px de altura como todo o
     resto do sistema. A altura vai no ELO, nunca na imagem — `display` na imagem é o que
     ressuscita o PNG do outro tema. */
  .vt-marca{ display:flex; align-items:center; min-height:44px }
  .vt-marca .logo{ width:calc(var(--vt-u) * 8) }

  .vt-hero{ grid-template-columns:1fr; row-gap:calc(var(--vt-u) * 1.8);
    padding:calc(var(--vt-u) * 1.4) 0 calc(var(--vt-u) * 1.6) }
  .vt-hero-texto, .vt-hero-arte, .vt-stats{ grid-column:1 }
  .vt h1{ max-width:26ch }
  /* Abaixo daqui o painel de vidro deixa de flutuar: sobreposto num hero estreito ele
     cobre o texto da folha, e um painel que esconde a prova não tem por que existir. */
  .vt-hero-arte{ padding-bottom:0 }
  .vt-painel{ position:static; width:auto; margin-top:calc(var(--vt-u) * .9) }
  .vt-selo{ top:auto; margin-top:0 }
  .vt-conta{ grid-template-columns:1fr; gap:calc(var(--vt-u) * 1.4);
    padding:calc(var(--vt-u) * 1.8) }
  .vt-lista{ grid-template-columns:1fr }
  .vt-acoes .b{ flex:1 1 auto; min-height:50px }
  /* A cena de abertura encolhe o respiro no celular: com a barra do navegador visível,
     `100svh` menos o cabeçalho já é pouca altura para a pergunta, o parágrafo e a seta. */
  .vt-abertura{ min-height:calc(100svh - 3.5rem); padding:calc(var(--vt-u) * 1.2) 0 }
  .vt-rolar{ margin-top:calc(var(--vt-u) * 1.8) }
  .vt-frase{ padding:calc(var(--vt-u) * 1.2) }
  .vt-rodape-grade{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  /* Link de rodapé no celular é alvo de dedo como qualquer outro: 44px de altura e
     largura de linha inteira. Empilhado, ele fica a um polegar de distância do seguinte —
     que é o defeito que a auditoria acusa quando a altura é a da letra. */
  .vt-rodape-col a:not(.b){ min-height:44px; width:100% }
}
/* 560: abaixo disso o título passa de duas palavras por linha e vira escada. */
@media (max-width:560px){
  .vt{ --vt-u:16px }
  .vt-tres, .vt-comeco-passos{ grid-template-columns:1fr }
  /* Numa coluna só, o painel desenhado deita: a proporção de cartaz vira faixa. */
  .vt-visual{ aspect-ratio:1.32 }
  .vt h1{ max-width:none }
  .vt-stats, .vt-marcos-lista{ gap:calc(var(--vt-u) * 1) }
  .vt-risco{ display:none }
  .vt-rodape-grade{ grid-template-columns:1fr }
}

/* ------------------------------------------------------------------ os planos (/basic)
 *
 * A única parte da vitrine que mostra preço. A `/` não mostra, e a prova `VT-17` guarda
 * as duas pontas: valor é obrigatório aqui e proibido lá.
 *
 * Duas colunas que viram uma no celular, sem media query própria: `auto-fit` com um piso
 * de 22rem já faz isso, e cada media query nova neste arquivo é mais uma que alguém
 * esquece de atualizar.
 */
.vt-planos{ display:grid; gap:calc(var(--vt-u) * 1.2); margin-top:calc(var(--vt-u) * 1.4);
  grid-template-columns:repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }
.vt-plano{ display:flex; flex-direction:column; gap:calc(var(--vt-u) * .6);
  padding:calc(var(--vt-u) * 1.1); border:1px solid var(--linha);
  border-radius:var(--r-2); background:var(--branco); }
/* O plano em foco ganha a borda de ação, e não uma cor de fundo: fundo colorido num
   cartão de preço empurra o contraste do texto para baixo do mínimo, e foi o que a
   auditoria acusou na primeira tentativa. */
/* `--azul`, e não `--acao`: este seletor nasceu com `var(--acao)`, que não existe em
   `tema.css` nem aqui. A borda caía para `currentColor` e o cartão em foco nunca ficou em
   foco — defeito que não quebra nada, não aparece em prova e some na leitura. */
.vt-plano-foco{ border-color:var(--azul); box-shadow:0 0 0 1px var(--azul) inset }
.vt-plano h3{ margin:0; font-size:1.05rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--preto); }
.vt-valor{ margin:0; font-size:clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem); font-weight:700;
  line-height:1; color:var(--preto); }
.vt-valor span{ display:block; margin-top:.35rem; font-size:.85rem; font-weight:400;
  letter-spacing:.06em; text-transform:uppercase; }
.vt-valor-alt{ margin:0; font-size:.95rem }
/* Numa coluna só, a lista de plano não pode virar duas: `.vt-lista` é grid de 2 por
   padrão, e dentro de um cartão estreito isso quebra a leitura em escada. */
.vt-plano .vt-lista{ grid-template-columns:1fr; gap:.55rem }
.vt-plano .vt-acoes{ margin-top:auto; padding-top:calc(var(--vt-u) * .5) }

/* ------------------------------------------------------- o checkout (/assinar)
 *
 * Era um formulário de três `fieldset` empilhados, sem dizer em momento nenhum o que
 * estava sendo comprado nem o que aconteceria depois do clique. Quem chega aqui já
 * decidiu; o que falta é confirmar que o que ele decidiu é o que está no carrinho — daí a
 * coluna de resumo, que no celular desce para baixo do formulário e continua legível.
 *
 * As três regras do arquivo valem inteiras aqui: todo seletor começa em `.vt`, nenhuma cor
 * literal, e o estado de repouso é o estado final (nada espera JavaScript para aparecer —
 * com o `assinar.js` desligado a página continua um formulário que envia).
 */
.vt-checkout{ padding-block:calc(var(--vt-secao) * .5) }
.vt-checkout-cabeca{ max-width:44rem }
/* O h1 aqui não é um título de seção: é o nome da página que a pessoa está pagando. Com o
   cinza de `.vt-linha` ele ficava mais apagado que o resumo do pedido ao lado. */
.vt-checkout-cabeca h1{ color:var(--preto) }
.vt-checkout-sub{ margin:calc(var(--vt-u) * .7) 0 0; color:var(--cinza-2); font-size:1rem }
.vt-voltar{ display:inline-flex; align-items:center; min-height:44px;
  margin-bottom:calc(var(--vt-u) * .2); font-size:.9rem; color:var(--cinza-2); }
.vt-voltar::before{ content:"\2190"; margin-right:.4em }

/* A grade: formulário e resumo. `minmax(0,1fr)` na primeira coluna impede que um campo
   largo empurre a segunda para fora da tela — sem isso, `1fr` usa `min-content` como piso
   e a página ganha rolagem lateral, que é o primeiro item da auditoria de UX. */
.vt-checkout-grade{ display:grid; gap:calc(var(--vt-u) * 1.4);
  margin-top:calc(var(--vt-u) * 1.6); align-items:start;
  grid-template-columns:minmax(0, 1fr); }
@media (min-width:1100px){
  .vt-checkout-grade{ grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr) }
  /* O resumo acompanha a rolagem: são três blocos de campos, e o botão de comprar não
     pode ficar a uma tela de distância do que ele compra. */
  .vt-resumo{ position:sticky; top:calc(var(--vt-u) * 1.2) }
}
.vt-checkout-passos{ display:grid; gap:calc(var(--vt-u) * 1.1) }

.vt-bloco{ margin:0; padding:calc(var(--vt-u) * 1.1); border:1px solid var(--linha);
  border-radius:var(--r-2); background:var(--branco); }
.vt-bloco legend{ display:flex; align-items:center; gap:.6em; padding:0 .5em;
  font-size:1.02rem; font-weight:600; color:var(--preto); }
.vt-bloco-sub{ margin:0 0 calc(var(--vt-u) * .8); color:var(--cinza-2); font-size:.92rem }
/* O número do passo. Círculo pequeno, com a cor da marca: é orientação, não decoração. */
.vt-passo-n{ display:inline-grid; place-items:center; width:1.7em; height:1.7em;
  border-radius:50%; background:var(--azul); color:var(--azul-tinta);
  font-size:.82rem; font-weight:700; font-variant-numeric:tabular-nums; }

/* As opções de plano. O `input` continua no HTML e continua funcionando — ele é
   posicionado por cima do cartão inteiro, invisível, o que dá alvo de toque grande sem
   tirar o controle nativo de quem navega por teclado. */
.vt-opcoes{ display:grid; gap:.7rem;
  grid-template-columns:repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.vt-opcao{ position:relative; display:flex; min-height:56px; padding:.85rem 1rem;
  border:1px solid var(--linha); border-radius:var(--r-2); background:var(--papel);
  cursor:pointer; transition:border-color .18s var(--vt-saida),
  background-color .18s var(--vt-saida); }
.vt-opcao:hover{ border-color:var(--cinza-3) }
.vt-opcao input{ position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:pointer; }
/* O estado escolhido: borda da marca e fundo lavado. O fundo é `--azul-lavado`, que
   inverte com o tema — um fundo chapado da cor da marca empurraria o texto para baixo do
   contraste mínimo, que foi o que a auditoria acusou no cartão de preço. */
.vt-opcao:has(input:checked){ border-color:var(--azul); background:var(--azul-lavado) }
.vt-opcao:has(input:focus-visible){ outline:2px solid var(--azul); outline-offset:2px }
.vt-opcao-corpo{ display:flex; flex-direction:column; gap:.25rem }
.vt-opcao-titulo{ color:var(--preto); font-size:.97rem; font-weight:600;
  text-wrap:balance; }
.vt-opcao-valor{ color:var(--preto); font-size:1.5rem; font-weight:700; line-height:1.1;
  font-variant-numeric:tabular-nums; }
/* `--cinza`, e não `--cinza-2`: sobre o fundo lavado do cartão escolhido o `--cinza-2`
   mede 4,44:1 contra o mínimo de 4,5. Passa despercebido na leitura e não passa na
   auditoria, que é o ponto de ela medir na tela em vez de no arquivo. */
.vt-opcao-nota{ color:var(--cinza); font-size:.85rem }
/* `vt-form`, e NÃO `vt-campos`: esse nome já é dos campos da calculadora da landing, que
   vivem sobre fundo escuro. É a segunda colisão desta mesma leva (a outra foi
   `.vt-conta`), e as duas apareceram como contraste de 1:1 numa tela que ninguém tocou —
   o arquivo é um espaço de nomes só, e classe genérica aqui é nome já usado. */
.vt-form{ display:grid; gap:.9rem;
  grid-template-columns:repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.vt-form label{ display:flex; flex-direction:column; gap:.35rem;
  color:var(--preto); font-size:.9rem; font-weight:500; }
/* 44px de alvo de toque, que é o mínimo que a auditoria mede. O `.campo` do `tema.css`
   tem 28px de altura e está certo lá: as telas internas são densas e de mouse. Aqui é uma
   página pública, preenchida no celular, e a diferença entre 28 e 44 é a diferença entre
   acertar o campo e acertar o de cima. Escopo `.vt-form`, para não empurrar a densidade
   das outras catorze telas. */
.vt-form .campo{ min-height:44px }
.vt-form-largo{ grid-column:1 / -1 }
.vt-form-dica{ color:var(--cinza-2); font-size:.82rem; font-weight:400 }
/* Erro por campo, e não só um recado no fim: o recado global obriga a pessoa a procurar
   qual dos seis campos ele está falando. */
.vt-form label.vt-erro .campo{ border-color:var(--alerta) }
.vt-form-erro{ color:var(--alerta); font-size:.82rem; font-weight:500 }

.vt-resumo{ display:grid; gap:calc(var(--vt-u) * .9) }
.vt-resumo-caixa{ padding:calc(var(--vt-u) * 1.1); border:1px solid var(--azul);
  border-radius:var(--r-2); background:var(--branco); }
/* `.vt .vt-resumo-titulo`, com os dois nomes: o `.vt h2` lá de cima pesa mais que uma
   classe só, e o rótulo saía do tamanho de um título de seção. */
.vt .vt-resumo-titulo{ margin:0; font-size:.82rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--cinza-2); }
.vt-resumo-plano{ margin:.5rem 0 0; color:var(--preto); font-size:1rem; font-weight:600 }
.vt-resumo-valor{ margin:.1rem 0 0; color:var(--preto); font-weight:700; line-height:1.05;
  font-size:clamp(2.1rem, 1.6rem + 2vw, 2.9rem); font-variant-numeric:tabular-nums; }
.vt-resumo-lista{ margin:calc(var(--vt-u) * .9) 0 0; padding:0; list-style:none;
  display:grid; gap:.5rem; }
.vt-resumo-lista li{ padding-left:1.1rem; color:var(--cinza); font-size:.9rem;
  position:relative; }
.vt-resumo-lista li::before{ content:"\2713"; position:absolute; left:0;
  color:var(--ok); font-weight:700; }
.vt-resumo-lista b{ color:var(--preto); font-weight:600 }
.vt-resumo-garantia{ margin:calc(var(--vt-u) * .9) 0 0; padding-top:calc(var(--vt-u) * .7);
  border-top:1px solid var(--linha); color:var(--cinza-2); font-size:.86rem; }

/* O que acontece depois do clique. Ninguém pergunta isso em voz alta e todo mundo quer
   saber antes de digitar um CPF. */
.vt-depois{ margin:0; padding:0 0 0 1.2rem; display:grid; gap:.45rem;
  color:var(--cinza-2); font-size:.88rem; }
.vt-depois b{ color:var(--preto); font-weight:600 }
.vt-comprar{ width:100% }

/* ------------------------------------------------ o pagamento no cartão (07/10/2026)
   O passo 4 do checkout. O cartão desenhado repete o que a pessoa digita; é enfeite, e
   por isso é `aria-hidden` e some inteiro sem atrapalhar nada. Ele usa os tokens
   `--noite-*`, que são os mesmos nos dois temas: um cartão é escuro de dia e de noite, e
   assim o texto dele tem um contraste só para medir. */
.vt-pagar{ display:grid; gap:calc(var(--vt-u) * 1.1); align-items:start;
  grid-template-columns:minmax(0, 1fr); }
@media (min-width:760px){
  .vt-pagar{ grid-template-columns:minmax(0, 19rem) minmax(0, 1fr) }
}
.vt-cartao{ display:flex; flex-direction:column; justify-content:space-between;
  width:100%; max-width:21rem; aspect-ratio:1.586; padding:1.15rem 1.25rem;
  border:1px solid var(--linha); border-radius:var(--r-2);
  background:var(--noite); color:var(--noite-tinta); box-shadow:var(--sombra-2);
  background-image:radial-gradient(120% 90% at 100% 0%, var(--luz-1), transparent 60%); }
.vt-cartao-topo{ display:flex; align-items:center; justify-content:space-between }
.vt-cartao-chip{ width:2.3rem; height:1.7rem; border-radius:.4rem;
  border:1px solid var(--noite-cinza); opacity:.7 }
.vt-cartao-bandeira{ min-height:1.2em; color:var(--noite-azul); font-size:.95rem;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase }
.vt-cartao-numero{ margin:0; font-size:clamp(1.02rem, .8rem + 1.1vw, 1.3rem);
  font-weight:600; letter-spacing:.09em; font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:clip }
.vt-cartao-pe{ display:flex; justify-content:space-between; gap:1rem }
.vt-cartao-pe span{ display:flex; flex-direction:column; gap:.15rem; min-width:0 }
.vt-cartao-pe small{ color:var(--noite-cinza); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase }
.vt-cartao-pe b{ font-size:.86rem; font-weight:600; letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* Duas colunas fixas, e não o `auto-fit` do `.vt-form`: validade e código andam juntos
   num cartão de verdade, e CEP e número também. Cabe em 390px. */
.vt-pagar .vt-form{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
.vt-pagar-nota{ margin:calc(var(--vt-u) * .9) 0 0 }
.vt-comprar{ justify-content:center; min-height:52px; font-size:1.02rem }

/* O recado de depois do pagamento, no lugar do formulário. */
.vt-pago{ max-width:38rem; margin-top:calc(var(--vt-u) * 1.6);
  padding:calc(var(--vt-u) * 1.4); border:1px solid var(--linha);
  border-radius:var(--r-2); background:var(--branco); color:var(--cinza); }
/* O foco vem para cá quando o formulário sai, e ele tem de ser visto como qualquer outro. */
.vt-pago:focus{ outline:2px solid var(--azul); outline-offset:3px }
.vt-pago h2{ margin:0 0 .5rem; color:var(--preto); font-size:1.5rem; text-wrap:balance }
.vt-pago p{ margin:.5rem 0 0 }
.vt-pago .vt-acoes{ margin-top:calc(var(--vt-u) * 1.1) }
.vt-pago-marca{ display:grid; place-items:center; width:2.6rem; height:2.6rem;
  margin-bottom:.8rem; border-radius:50%; background:var(--ok-lavado); color:var(--ok);
  font-size:1.3rem; font-weight:700 }
.vt-pago-marca::before{ content:"\2713" }
/* Em análise: some o "aprovado" e aparece o outro texto. A classe é posta pelo servidor
   (sem JavaScript) ou pelo `assinar.js`, e por isso a troca é em CSS e não em `hidden`. */
.vt-pago-processando{ display:none }
.vt-pago-espera .vt-pago-aprovado{ display:none }
.vt-pago-espera .vt-pago-processando{ display:block }
@media (max-width:560px){
  .vt-bloco{ padding:calc(var(--vt-u) * .9) }
  .vt-checkout-grade{ gap:calc(var(--vt-u) * 1.1) }
}

/* ------------------------------------------------ termos, privacidade e o aceite
   Nomes da PEÇA (`.vt-legal`, `.vt-aceite`), não do conceito: este arquivo é um espaço de
   nomes só, e `.vt-conta`/`.vt-campos` genéricos já colidiram aqui (learnings, 24/09). */
.vt .vt-legal{ max-width:72ch; margin:0 auto; padding:calc(var(--vt-u) * 2) 0 calc(var(--vt-u) * 3);
  color:var(--preto); line-height:1.6 }
.vt .vt-legal h1{ font-size:clamp(1.8rem, 4vw, 2.4rem); margin:.2em 0 .6em; text-wrap:balance }
.vt .vt-legal h2{ font-size:1.1rem; margin:1.8em 0 .5em }
.vt .vt-legal p, .vt .vt-legal li{ margin:.5em 0 }
.vt .vt-legal ul{ padding-left:1.2em }
.vt .vt-legal a{ color:var(--azul-forte) }
.vt .vt-legal-versao{ color:var(--cinza-2); font-size:.85rem }
.vt-legal-links{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem }
.vt-legal-links a{ color:inherit; min-height:44px; display:inline-flex; align-items:center }
.vt > .vt-legal-links{ justify-content:center; padding:calc(var(--vt-u) * 1.5) 0; font-size:.9rem;
  color:var(--cinza-2) }
.vt label.vt-aceite{ display:flex; flex-direction:row; align-items:flex-start; gap:.6rem;
  margin-top:calc(var(--vt-u) * 1.2); font-size:.9rem; color:var(--cinza) }
.vt-aceite input{ width:22px; height:22px; flex:none; margin:0; accent-color:var(--azul) }
.vt-aceite a{ color:var(--azul-forte) }
.vt label.vt-aceite.vt-erro{ color:var(--alerta) }
/* No celular a caixa de aceite é o alvo de toque inteiro: 22px é o que o dedo erra. */
@media (max-width:480px){ .vt-aceite input{ width:40px; height:40px } }

/* ------------------------------------------------ os dois planos, na LP (E-33-T9)
   A tabela rola DENTRO do próprio contêiner no celular: três colunas de texto não cabem
   em 390px, e a página não pode rolar de lado (auditoria `rola-lado`). */
.vt-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap }
.vt-planos-tabela{ margin:calc(var(--vt-u) * 1.8) 0 0; overflow-x:auto;
  border:1px solid var(--linha); border-radius:var(--r); background:var(--branco);
  box-shadow:var(--sombra) }
.vt-planos-tabela:focus-visible{ outline:2px solid var(--azul); outline-offset:2px }
.vt-planos-tabela table{ width:100%; min-width:620px; border-collapse:collapse;
  font-size:calc(var(--vt-u) * .85); line-height:1.5 }
.vt-planos-tabela th, .vt-planos-tabela td{ padding:calc(var(--vt-u) * .8) calc(var(--vt-u) * 1);
  text-align:left; vertical-align:top; border-top:1px solid var(--linha) }
.vt-planos-tabela thead th{ border-top:0; vertical-align:bottom }
.vt-planos-tabela tbody th{ color:var(--preto); font-weight:600; width:26% }
.vt-planos-tabela td{ color:var(--cinza) }
.vt-planos-tabela td b{ color:var(--preto); font-weight:600 }
.vt-planos-difere th, .vt-planos-difere td{ background:var(--azul-lavado) }
.vt-planos-nome{ display:block; color:var(--preto); font-size:calc(var(--vt-u) * 1); font-weight:700 }
.vt-planos-preco{ display:block; margin-top:.2em; color:var(--preto);
  font-size:calc(var(--vt-u) * 1.6); font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums }
.vt-planos-preco small{ font-size:.5em; font-weight:500; color:var(--cinza-2); margin-left:.15em }
.vt-planos-alt{ display:block; color:var(--cinza-2); font-size:calc(var(--vt-u) * .75);
  font-weight:500 }
.vt-planos-tabela tfoot td{ padding-top:calc(var(--vt-u) * 1.1); padding-bottom:calc(var(--vt-u) * 1.1) }
.vt-planos-tabela tfoot .b{ min-height:44px }
.vt-comeco-sub{ margin:calc(var(--vt-u) * 2.4) 0 0; font-size:calc(var(--vt-u) * 1.1) }
.vt .vt-comeco-sub{ margin-top:calc(var(--vt-u) * 2.6) }
/* No celular a tabela vira lista: rolar de lado esconde a coluna do Personalizado, que é
   justamente o que a pessoa quer comparar. Cada linha é o título e, embaixo, os dois
   planos, cada um com o nome dele. */
@media (max-width:640px){
  .vt-planos-tabela{ overflow:visible }
  .vt-planos-tabela table{ min-width:0 }
  .vt-planos-tabela thead tr{ display:grid; grid-template-columns:1fr 1fr }
  .vt-planos-tabela thead th:first-child{ display:none }
  .vt-planos-tabela tbody, .vt-planos-tabela tfoot{ display:block }
  .vt-planos-tabela tbody tr, .vt-planos-tabela tfoot tr{ display:block;
    border-top:1px solid var(--linha) }
  .vt-planos-tabela tbody th, .vt-planos-tabela td{ display:block; width:auto; border-top:0 }
  .vt-planos-tabela tbody th{ padding-bottom:0 }
  .vt-planos-tabela td[data-plano]::before{ content:attr(data-plano); display:block;
    color:var(--cinza-2); font-size:.78em; font-weight:600; letter-spacing:.02em }
  .vt-planos-tabela tfoot th{ display:none }
  .vt-planos-tabela tfoot td{ padding-top:calc(var(--vt-u) * .5); padding-bottom:calc(var(--vt-u) * .5) }
  .vt-planos-tabela tfoot td[data-plano]::before{ content:none }
  .vt-planos-tabela tfoot .b{ width:100%; justify-content:center }
}

/* ------------------------------------------------------- a barra de consentimento
 *
 * Só existe nas páginas de venda e só enquanto o visitante não respondeu. Fixa embaixo e
 * acima de tudo (inclusive da barra de compra da LP no celular): enquanto a pergunta está
 * aberta, ela é a única coisa que precisa de resposta. Os dois botões têm o mesmo tamanho. */
.vt-consent{ position:fixed; left:16px; right:16px; bottom:16px; z-index:40;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:12px 20px; max-width:860px; margin:0 auto; padding:14px 18px;
  border:1px solid var(--linha); border-radius:var(--r-2); background:var(--branco);
  box-shadow:var(--sombra-2) }
.vt-consent[hidden]{ display:none }
.vt-consent p{ flex:1 1 280px; margin:0; color:var(--cinza); font-size:14px; line-height:1.5 }
.vt-consent a{ color:var(--azul-forte); text-decoration:underline; text-underline-offset:3px }
.vt-consent-acoes{ display:flex; gap:10px; flex:none }
.vt-consent-acoes .b{ min-height:44px; min-width:104px; padding:0 18px; font-size:14px }
@media (max-width:560px){
  .vt-consent-acoes{ flex:1 1 100% }
  .vt-consent-acoes .b{ flex:1 1 0 }
}

/* O Google no checkout: o botão antes dos campos, e a linha que diz com qual Google a
   compra será feita. */
.vt-google-topo{ padding-top:calc(var(--vt-u) * 1) }
.vt-google-topo > p:last-child{ margin-bottom:0 }
.vt-google-entrar{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin:0 0 1rem }
.vt-google-entrar .b{ min-height:44px; text-decoration:none }
.vt-google-entrar .vt-nota{ margin:0 }
.vt-google-quem{ margin:0 0 1rem; color:var(--preto) }
.vt-google-quem a{ color:var(--azul-forte) ; text-decoration:underline }

/* O portão do checkout: entrar antes de pagar. Duas colunas, a entrada e o resumo do
   pedido. Era uma caixa estreita sozinha, com metade da tela vazia ao lado e sem dizer o
   que estava sendo comprado. No celular o resumo desce para baixo da entrada. */
.vt-portao-grade{ display:grid; gap:calc(var(--vt-u) * 1.4);
  margin-top:calc(var(--vt-u) * 1.4); align-items:stretch;
  grid-template-columns:minmax(0, 1fr) }
@media (min-width:820px){
  .vt-portao-grade{ grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr) }
}
/* A caixa da entrada é a ação da página: raio de cartão e sombra, para pesar mais que o
   resumo ao lado, que é leitura. */
/* Coluna flexível: quando o resumo ao lado é mais alto, a sobra fica acima do "Já é
   cliente?", e não num vazio depois dele. */
.vt-portao-caixa{ display:flex; flex-direction:column; padding:calc(var(--vt-u) * 1.8);
  border-radius:var(--r); box-shadow:var(--sombra-2) }
.vt .vt-portao-titulo{ margin:0; color:var(--preto); font-size:1.5rem; font-weight:600;
  letter-spacing:-.03em }
.vt-portao-titulo + .vt-nota{ margin:.6rem 0 1.5rem; max-width:44ch; font-size:.95rem;
  line-height:1.55 }
.vt-portao-caixa .b.b-google, .vt-portao-caixa .b.b-largo{ height:52px; font-size:15px }
.vt-portao-caixa .recado{ margin:12px 0 0 }
.vt-portao-seguro{ display:flex; align-items:center; gap:.5rem; margin:1.1rem 0 1.4rem;
  color:var(--cinza-2); font-size:.86rem }
.vt-portao-seguro svg{ flex:none; width:16px; height:16px }
.vt-portao-caixa .vt-portao-pe{ margin:auto 0 0; padding-top:1.1rem;
  border-top:1px solid var(--linha); font-size:.92rem }
.vt-portao-pe a{ color:var(--azul-forte); text-decoration:underline;
  text-underline-offset:3px }
.vt-portao-resumo .vt-resumo-caixa{ padding:calc(var(--vt-u) * 1.5);
  border-radius:var(--r) }
.vt-resumo-prazo{ margin:.3rem 0 0; color:var(--cinza-2); font-size:.9rem }

/* O cupom, embaixo dos planos. O campo e o botão são UMA peça: a borda é da linha, o
   foco acende a linha inteira, e o "Aplicar" mora dentro dela, à direita. Aplicado, a
   peça vira um selo verde com o código e o "Remover". */
.vt-cupom{ display:flex; flex-direction:column; gap:.45rem; max-width:26rem;
  margin-top:1.1rem; color:var(--preto); font-size:.9rem; font-weight:500; }
.vt-cupom-linha{ display:flex; align-items:center; gap:.4rem; min-height:50px;
  padding:2px 2px 2px 14px; border:1px solid var(--linha); border-radius:var(--r-2);
  background:var(--papel); transition:border-color .18s var(--vt-saida),
  box-shadow .18s var(--vt-saida); }
.vt-cupom-linha:hover{ border-color:var(--cinza-3) }
.vt-cupom-linha:focus-within{ border-color:var(--azul);
  box-shadow:0 0 0 3px var(--azul-lavado) }
.vt-cupom.vt-erro .vt-cupom-linha{ border-color:var(--alerta) }
.vt-cupom-linha input{ flex:1; min-width:0; height:44px; padding:0; border:0;
  background:none; color:var(--preto); font:inherit; font-size:.95rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; outline:none; }
.vt-cupom-linha input:focus-visible{ box-shadow:inset 0 -2px 0 var(--azul) }
.vt-cupom-linha input::placeholder{ color:var(--cinza-2); font-weight:400;
  letter-spacing:0; text-transform:none; }
.vt-cupom-linha button{ flex:none; height:44px; padding:0 18px; border:0;
  border-radius:calc(var(--r-2) - 3px); background:var(--azul-lavado);
  color:var(--azul-forte); font:inherit; font-size:.88rem; font-weight:600;
  cursor:pointer; transition:background .14s, color .14s; }
.vt-cupom-linha button:hover{ background:var(--azul); color:var(--azul-tinta) }
.vt-cupom-linha button:focus-visible{ outline:2px solid var(--azul); outline-offset:2px }
.vt-cupom-aplicado{ flex-direction:row; align-items:center; gap:.75rem;
  padding:.75rem .9rem; border:1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  border-radius:var(--r-2); background:var(--ok-lavado); color:var(--ok); }
.vt-cupom-icone{ flex:none; width:22px; height:22px; padding:4px; border-radius:50%;
  background:var(--ok); color:var(--papel); }
.vt-cupom-texto{ display:flex; flex-direction:column; gap:.1rem; flex:1; min-width:0 }
.vt-cupom-texto b{ letter-spacing:.06em }
.vt-cupom-texto small{ font-size:.82rem; font-weight:400 }
.vt-cupom-tirar{ flex:none; color:var(--ok); font-size:.85rem; font-weight:500;
  text-decoration:underline; text-underline-offset:3px }
.vt-resumo-cupom{ color:var(--ok) }
.vt-resumo-cupom{ margin:.3rem 0 0; font-size:.9rem }

/* A trilha das etapas. A atual leva o azul da marca; as que faltam ficam só no contorno.
   Reaproveita o círculo `.vt-passo-n` dos passos do formulário. */
.vt-trilha{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .6rem;
  margin:calc(var(--vt-u) * 1.5) 0 0; padding:0; list-style:none;
  color:var(--cinza); font-size:.9rem }
.vt-trilha li{ display:flex; align-items:center; gap:.5rem }
.vt-trilha li + li::before{ content:""; width:clamp(.75rem, 3vw, 2.5rem); height:1px;
  margin-right:.1rem; background:var(--cinza-3) }
.vt-trilha .vt-passo-n{ border:1px solid var(--cinza-3); background:none; color:var(--cinza) }
.vt-trilha [aria-current]{ color:var(--preto); font-weight:600 }
.vt-trilha [aria-current] .vt-passo-n{ border-color:var(--azul); background:var(--azul);
  color:var(--azul-tinta) }
@media (max-width:560px){
  .vt-trilha{ gap:.4rem; font-size:.82rem }
  .vt-trilha li{ gap:.35rem }
  .vt-portao-caixa{ padding:calc(var(--vt-u) * 1.3) }
  .vt-portao-resumo .vt-resumo-caixa{ padding:calc(var(--vt-u) * 1.2) }
}

/* Trocar o e-mail que o Google informou: um link discreto no campo, e a pergunta de
   confirmação que abre no lugar. */
.vt-link{ padding:0; border:0; background:none; color:var(--azul-forte); font:inherit;
  text-decoration:underline; cursor:pointer; min-height:24px }
.vt-certeza{ padding:calc(var(--vt-u) * .8); border:1px solid var(--linha);
  border-radius:var(--r-2); background:var(--poco) }
.vt-certeza p{ margin:0; color:var(--preto); font-size:.92rem }
.vt-certeza-acoes{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem }
.vt-certeza-acoes .b{ min-height:44px }