/* ══════════════════════════════════════════════════════════════════════════
   A vitrine pública, em `/`.
   ──────────────────────────────────────────────────────────────────────────
   Versionada em `public/` e servida direto, sem build, com o `?v=` saindo do
   hash do conteúdo — a régua do `painel.css` e do `admin.css`. `@vite` continua
   proibido pela razão de sempre.

   ── As camadas existem para o white-label funcionar ──────────────────────

   `layouts/_marca` emite `:root { --acento: … }` **fora de qualquer camada**, e
   em CSS declaração fora de camada vence declaração dentro de camada sem olhar
   ordem nem especificidade. É por isso que os tokens daqui moram em
   `@layer vitrine-tokens`: no domínio de uma revenda com marca cadastrada, o
   acento dela sobrescreve o padrão por cascata, sem `!important` e sem esta
   folha saber que existe revenda.

   Os valores que aquele parcial emite já vêm com o **contraste conferido** pelo
   `App\Support\Branding` — inclusive `--acento-texto`, que é a mesma cor
   ajustada até passar em AA sobre o fundo. Nada aqui recalcula nada.

   ── O que o tenant NÃO escolhe ───────────────────────────────────────────

   Fundo, superfície e cor de texto, exatamente como no painel: eles são o par
   de contraste de tudo que a página escreve. O acento é seguro porque tudo que
   depende dele é derivado no servidor.
   ══════════════════════════════════════════════════════════════════════════ */

@layer vitrine-tokens, vitrine-base, vitrine-componentes;

/* ─────────────────────────────── tokens ───────────────────────────────── */
@layer vitrine-tokens {
  :root {
    --vazio:     #0A0A0B;
    --vazio-2:   #121216;
    --osso:      #F2EFE9;
    --osso-2:    #E4DFD5;

    /* O acento padrão é o laranja da marca da plataforma. Conta com branding
       cadastrado sobrescreve os quatro por `layouts/_marca`. */
    --acento:           #F09018;
    --acento-contraste: #14100A;
    --acento-texto:     #F5A742;
    --acento-forte:     #FFA83A;

    /* O segundo acento, do vinho da marca. Ele é redefinido para `var(--acento)`
       quando a conta tem marca própria — ver `landing/index.blade.php`. Uma
       revenda com a cor dela misturada ao vinho da plataforma teria duas marcas
       na mesma página. */
    --realce: #D9315F;

    --zap: #25D366;

    --tinta:       #F2EFE9;
    --tinta-fraca: #9A96A0;
    --tinta-escura:#0D0D10;

    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
            "Liberation Mono", monospace;

    --caixa: 78rem;
    --borda: 1px solid rgb(255 255 255 / .09);
    --curva: cubic-bezier(.22, 1, .36, 1);
  }
}

@layer vitrine-base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
    /* O cabeçalho é fixo: sem isto uma âncora chega escondida atrás dele. */
    scroll-padding-top: 5.5rem;
    /* A goteira reservada é o que impede o salto de layout quando o menu do
       celular tranca a rolagem: sem ela, `overflow: hidden` some com a barra e a
       página inteira anda uns quinze pixels para o lado no instante em que a
       gaveta abre. Em barra de rolagem sobreposta — que é o caso de todo
       aparelho de toque — ela não reserva nada e não custa nada. */
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
    background: var(--vazio);
  }

  body {
    margin: 0;
    background: var(--vazio);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

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

  h1, h2, h3 {
    margin: 0;
    line-height: 1.08;
    letter-spacing: -.03em;
    font-weight: 700;
    text-wrap: balance;
  }
  h1 { font-size: clamp(2.4rem, 6.2vw, 4.6rem); }
  h2 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); }
  h3 { font-size: 1.1rem; letter-spacing: -.01em; }

  p { margin: 0 0 1rem; text-wrap: pretty; }
  a { color: inherit; }

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

@layer vitrine-componentes {

  /* ──────────────────────────── utilidades ───────────────────────────── */

  .vt-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  .vt-pular {
    position: absolute; left: -999px; top: 0; z-index: 200;
    background: var(--acento); color: var(--acento-contraste);
    padding: .8rem 1.2rem; font-weight: 700; text-decoration: none;
  }
  .vt-pular:focus { left: .5rem; top: .5rem; }

  /* A revelação por rolagem. O estado escondido só existe quando o script
     confirmou que está vivo (`html.temjs`): sem JS a página aparece inteira. */
  html.temjs .vt-revela {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--curva), transform .7s var(--curva);
  }
  html.temjs .vt-revela.dentro { opacity: 1; transform: none; }
  html.temjs .vt-revela:nth-child(2) { transition-delay: .07s; }
  html.temjs .vt-revela:nth-child(3) { transition-delay: .14s; }
  html.temjs .vt-revela:nth-child(4) { transition-delay: .21s; }
  html.temjs .vt-revela:nth-child(5) { transition-delay: .28s; }
  html.temjs .vt-revela:nth-child(6) { transition-delay: .35s; }

  /* O título fatiado em palavras, cada uma subindo no seu tempo.

     O par `padding-bottom`/`margin-bottom` não é enfeite: a caixa da linha tem
     exatamente `line-height`, e com `overflow: hidden` o que passa dela é
     cortado — em 1.08 de entrelinha, isso é o pé do "q", do "g" e do "ç". A
     folga alarga só a área visível e o negativo a devolve ao layout.

     O deslocamento é 120% e não 105% pela mesma razão: com a folga, 105% da
     altura do <i> já não o esconde inteiro. */
  .vt-fatia {
    display: inline-block; overflow: hidden; vertical-align: top;
    padding-bottom: .14em; margin-bottom: -.14em;
  }
  .vt-fatia > i {
    display: inline-block; font-style: inherit;
    transform: translateY(120%);
    transition: transform .8s var(--curva);
  }
  [data-fatia].dentro .vt-fatia > i { transform: none; }

  .vt-etiqueta {
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: var(--mono);
    font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--acento-texto);
    border: 1px solid rgb(255 255 255 / .18);
    background: rgb(255 255 255 / .04);
    padding: .42rem .85rem; border-radius: 999px;
    margin: 0 0 1.6rem;
  }
  .vt-etiqueta--centro { margin-inline: auto; }
  .vt-etiqueta__ponto {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--zap);
    animation: vt-pulso 2.4s infinite;
  }
  @keyframes vt-pulso {
    0%   { box-shadow: 0 0 0 0 rgb(37 211 102 / .55); }
    70%  { box-shadow: 0 0 0 9px rgb(37 211 102 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(37 211 102 / 0); }
  }

  /* O rótulo de seção. Ele já teve `001 /` na frente e **não tem mais**: a
     numeração prometia um percurso — um capítulo depois do outro — que a
     página não cumpre, porque quem chega pelo menu entra em qualquer ponto e
     encontra um "004" sem 001, 002 e 003 antes. O que sobrou é o assunto. */
  .vt-rotulo {
    font-family: var(--mono);
    font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--acento-texto);
    margin: 0 0 1.1rem;
    display: flex; align-items: center; gap: .7rem;
  }
  .vt-rotulo::before {
    content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: .55;
  }
  .vt-rotulo--centro { justify-content: center; }

  /* botões */
  .vt-botao {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem;
    font: inherit; font-weight: 650; line-height: 1;
    text-decoration: none; cursor: pointer;
    padding: .78rem 1.35rem; border-radius: 9px;
    border: 1px solid transparent;
    transition: transform .18s var(--curva), background .2s, border-color .2s, color .2s;
    white-space: nowrap;
  }
  .vt-botao:hover { transform: translateY(-2px); }
  .vt-botao--grande { padding: 1.05rem 1.9rem; font-size: 1.02rem; }

  .vt-botao--solido { background: var(--acento); color: var(--acento-contraste); }
  .vt-botao--solido:hover { background: var(--acento-forte); }

  .vt-botao--linha { border-color: rgb(255 255 255 / .22); color: var(--tinta); }
  .vt-botao--linha:hover { border-color: var(--acento); color: var(--acento-texto); }

  .vt-botao--fantasma { color: var(--tinta-fraca); padding-inline: .7rem; }
  .vt-botao--fantasma:hover { color: var(--tinta); }

  /* ─────────────────────────────── topo ────────────────────────────────── */
  .vt-topo {
    position: fixed; inset: 0 0 auto; z-index: 100;
    background: rgb(10 10 11 / .72);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    /* Funcional, não decorativa: ela separa a barra que flutua do que passa
       por baixo. Em 5% ela some quando não é necessária. */
    border-bottom: 1px solid rgb(255 255 255 / .05);
    transition: transform .35s var(--curva);
  }
  .vt-topo.escondido { transform: translateY(-101%); }

  .vt-topo__caixa {
    max-width: var(--caixa); margin-inline: auto;
    padding: .8rem clamp(1rem, 3vw, 2rem);
    display: flex; align-items: center; gap: 1.5rem;
  }

  .vt-marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
  /* A placa clara é a superfície para a qual todo logo é desenhado — a mesma
     razão de `layouts/_logo`, e é o que permite aceitar arte de terceiro. */
  .vt-marca__selo {
    display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--osso); padding: 4px; flex: none;
  }
  .vt-marca__selo img { width: 100%; height: auto; object-fit: contain; }
  .vt-marca__sigla {
    display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 10px; flex: none;
    background: var(--acento); color: var(--acento-contraste);
    font-weight: 800; font-size: 1.05rem;
  }
  .vt-marca__nome { font-weight: 750; font-size: 1.06rem; letter-spacing: -.02em; }

  .vt-topo__nav { display: flex; gap: 1.5rem; margin-inline: auto; }
  .vt-topo__nav a {
    font-size: .92rem; color: var(--tinta-fraca); text-decoration: none;
    transition: color .2s; position: relative; padding-block: .3rem;
  }
  .vt-topo__nav a:hover, .vt-topo__nav a.ativo { color: var(--tinta); }
  /* O traço existe sempre e cresce da esquerda: no hover ele responde ao gesto,
     e na seção ativa ele fica. Desenhado só em `.ativo`, ele aparecia de uma vez
     ao rolar e o mouse não movia nada no cabeçalho — que é o lugar em que a
     pessoa mais passa antes de decidir para onde vai. */
  .vt-topo__nav a::after {
    content: ""; position: absolute; inset: auto 0 -.35rem;
    height: 2px; background: var(--acento); border-radius: 2px;
    transform: scaleX(0); transform-origin: left center;
    transition: transform .28s var(--curva);
  }
  .vt-topo__nav a:hover::after, .vt-topo__nav a.ativo::after { transform: scaleX(1); }

  .vt-topo__acoes { display: flex; align-items: center; gap: .6rem; flex: none; }

  .vt-topo__menu {
    display: none; background: none; border: 0; cursor: pointer;
    width: 42px; height: 42px; padding: 0; place-items: center; color: inherit;
    position: relative;
  }
  .vt-topo__hamburguer, .vt-topo__hamburguer::before, .vt-topo__hamburguer::after {
    display: block; width: 20px; height: 2px; background: currentColor;
    border-radius: 2px; transition: transform .25s var(--curva);
  }
  .vt-topo__hamburguer::before, .vt-topo__hamburguer::after { content: ""; position: absolute; }
  .vt-topo__hamburguer::before { transform: translateY(-6px); }
  .vt-topo__hamburguer::after  { transform: translateY(6px); }
  [aria-expanded="true"] .vt-topo__hamburguer { background: transparent; }
  [aria-expanded="true"] .vt-topo__hamburguer::before { transform: rotate(45deg); }
  [aria-expanded="true"] .vt-topo__hamburguer::after  { transform: rotate(-45deg); }

  /* ─────────────── o menu do celular: uma gaveta e um véu ──────────────
     Ele era uma sanfona que empurrava a barra para baixo — a lista aparecia
     grudada no cabeçalho, sobre a página que continuava rolando atrás.

     Agora é uma gaveta que entra pela direita, ocupando a **altura inteira da
     janela**, com um véu de vidro fosco cobrindo o resto. As duas peças moram
     no `<body>`, e não no `<header>`: `backdrop-filter` e `transform` criam
     bloco contentor para `position: fixed`, e o cabeçalho tem os dois.

     ── Fechada é `visibility: hidden`, e não `display: none` ────────────

     As duas tiram o elemento do foco e da árvore de acessibilidade; só a
     primeira deixa a entrada ser animada. O `visibility` entra na transição com
     duração zero e **atraso** igual à da gaveta: ela demora o fecho inteiro
     para sumir, e some na hora ao abrir.

     O véu cobre também o cabeçalho, de propósito: com o resto da página inerte
     e a gaveta com botão próprio de fechar, uma barra nítida por cima do vidro
     seria a única coisa da tela que parece clicável e não é. */
  .vt-veu {
    position: fixed; inset: 0; z-index: 105;
    background: rgb(6 6 8 / .55);
    backdrop-filter: blur(7px) saturate(.85);
    -webkit-backdrop-filter: blur(7px) saturate(.85);
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--curva), visibility 0s .3s;
  }

  .vt-menu {
    position: fixed; inset: 0 0 0 auto; z-index: 110;
    width: min(21rem, 84vw);
    display: flex; flex-direction: column;
    padding: 1rem 1.3rem calc(1.5rem + env(safe-area-inset-bottom));
    background: var(--vazio-2);
    border-left: var(--borda);
    box-shadow: -34px 0 70px -30px rgb(0 0 0 / .9);
    /* A lista pode passar da tela num aparelho baixo. `contain` é o que impede
       a rolagem de vazar para a página quando ela chega ao fim — sem ele, o
       gesto continua no documento atrás do véu. */
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden;
    transition: transform .32s var(--curva), visibility 0s .32s;
  }

  .vt-menu__topo {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: .8rem; margin-bottom: .5rem;
    border-bottom: var(--borda);
  }
  .vt-menu__titulo {
    font-family: var(--mono); font-size: .72rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--tinta-fraca);
  }
  .vt-menu__fechar {
    background: none; border: 0; cursor: pointer; color: var(--tinta-fraca);
    width: 42px; height: 42px; margin-right: -.5rem;
    display: grid; place-items: center; border-radius: 10px;
    font: inherit; font-size: 1.4rem; line-height: 1;
    transition: color .2s, background .2s;
  }
  .vt-menu__fechar:hover { color: var(--tinta); background: rgb(255 255 255 / .07); }

  /* O `:not(.vt-botao)` existe porque a chamada para a ação também é um `<a>`
     aqui dentro, e ela não é item de lista. */
  .vt-menu a:not(.vt-botao) {
    display: block; padding: .95rem .2rem; text-decoration: none;
    color: var(--tinta-fraca); border-bottom: var(--borda);
    transition: color .2s, padding-left .2s;
  }
  .vt-menu a:not(.vt-botao):hover { color: var(--tinta); padding-left: .5rem; }
  /* A chamada para a ação vem logo depois da lista, com vão, e **não** colada no
     pé da gaveta: `margin-top: auto` a mandaria para baixo numa tela alta e a
     deixaria longe do último item, com um vazio no meio que se lê como fim da
     lista. */
  .vt-menu .vt-botao { margin-top: 1.4rem; }

  .vt-progresso { height: 2px; background: rgb(255 255 255 / .06); }
  .vt-progresso span {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--realce), var(--acento));
  }

  /* ─────────────────────────────── herói ───────────────────────────────── */
  .vt-heroi {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    max-width: var(--caixa); margin-inline: auto;
    padding: clamp(7rem, 14vh, 10rem) clamp(1rem, 3vw, 2rem) clamp(4rem, 9vh, 7rem);
    min-height: 100svh;
  }

  .vt-heroi__linha {
    font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    color: var(--tinta-fraca);
    max-width: 34rem;
    margin-block: 1.6rem 2.2rem;
  }
  .vt-heroi__linha strong { color: var(--tinta); font-weight: 640; }

  .vt-heroi__acoes { display: flex; flex-wrap: wrap; gap: .8rem; }

  .vt-fichas {
    display: flex; flex-wrap: wrap; gap: .5rem;
    list-style: none; padding: 0; margin: 2.4rem 0 0;
  }
  .vt-fichas li {
    font-family: var(--mono); font-size: .74rem; letter-spacing: .07em;
    color: var(--tinta-fraca);
    border: var(--borda); border-radius: 999px; padding: .38rem .8rem;
  }

  .vt-cena {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 20px;
    overflow: hidden;
    border: var(--borda);
    background:
      radial-gradient(120% 90% at 70% 10%, rgb(255 255 255 / .06), transparent 62%),
      var(--vazio-2);
  }
  .vt-cena__brilho {
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(120% 90% at 70% 10%, var(--realce), transparent 62%),
      radial-gradient(90% 70% at 20% 90%, var(--acento), transparent 60%);
    opacity: .26;
  }
  .vt-cena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

  /* A dica de que a cena responde ao ponteiro.

     A malha reage ao mouse, e reação que ninguém descobre é reação que não
     existe — o cartão de vidro que ficava aqui ocupava a atenção toda e nada
     nesta caixa dizia "mexa em mim". A dica some na primeira vez que o ponteiro
     entra, e ela **só aparece onde há ponteiro fino**: no celular não há o que
     passar, e a frase seria uma instrução impossível de cumprir. */
  .vt-cena__dica {
    position: absolute; inset: auto 0 1.1rem; margin: 0;
    text-align: center; pointer-events: none;
    font-family: var(--mono); font-size: .68rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--tinta-fraca);
    opacity: 0; transition: opacity .5s var(--curva);
  }
  @media (hover: hover) and (pointer: fine) {
    .vt-cena__dica { opacity: .7; }
  }
  .vt-cena__dica.sumiu { opacity: 0; }

  /* ──────────────────────────────── blocos ────────────────────────────── */
  .vt-bloco { padding: clamp(4.5rem, 11vh, 8rem) clamp(1rem, 3vw, 2rem); }

  .vt-bloco__caixa {
    max-width: var(--caixa); margin-inline: auto;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.2rem, 5vw, 5rem); align-items: center;
  }
  /* A figura vai para a esquerda sem sair da ordem do documento — quem lê com
     leitor de tela continua ouvindo o texto antes do enfeite. */
  .vt-bloco__caixa--invertida .vt-bloco__texto  { order: 2; }
  .vt-bloco__caixa--invertida .vt-bloco__figura { order: 1; }

  .vt-bloco__linha {
    font-size: 1.1rem; color: var(--tinta-fraca); max-width: 33rem;
    margin-bottom: 1.1rem;
  }
  .vt-bloco__linha strong { color: var(--tinta); font-weight: 640; }
  .vt-bloco__linha--fraca { font-size: 1rem; opacity: .82; }

  /* O respiro entre o título e o texto mora no irmão adjacente, e não num
     `margin-bottom` do h2: os títulos são seguidos ora de parágrafo, ora de
     lista, ora de um cartão inteiro. Sem esta regra o vão é **zero**. */
  .vt-bloco__texto h2 + .vt-bloco__linha { margin-top: 1.7rem; }

  /* ─────────────────── como uma seção se distingue da outra ────────────
     A página inteira é **um fundo só**. A alternância era preto ↔ creme com
     uma linha de 1px no meio, e o corte se via de longe: em cada junção havia
     uma aresta dizendo "aqui acaba um assunto e começa outro".

     No lugar dela, dois recursos, e nenhum tem borda:

     1. `--elevado`, uma superfície de branco translúcido que **nasce e morre
        em transparência**. Ela vale 1,05:1 contra o fundo — não se lê como
        troca de cor, se lê como a luz batendo diferente ali. Não há aresta em
        ponto nenhum da transição, porque as duas pontas do gradiente são o
        próprio fundo;
     2. `--realce`, um brilho radial do acento da marca cujo raio **não alcança
        as bordas da seção** (55% da altura, centrado). Ele se apaga sozinho
        antes de chegar na vizinha — é a mesma ideia, escrita em geometria em
        vez de em opacidade.

     A consequência de desenho: o ritmo da página deixou de vir do contraste
     entre faixas e passou a vir do que já existia — texto e figura trocando de
     lado a cada bloco. */
  .vt-bloco--elevado {
    background: linear-gradient(180deg,
      rgb(255 255 255 / 0)    0%,
      rgb(255 255 255 / .028) 20%,
      rgb(255 255 255 / .028) 80%,
      rgb(255 255 255 / 0)    100%);
  }

  .vt-bloco--realce { position: relative; isolation: isolate; }
  .vt-bloco--realce::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    /* 55% da altura, centrado: sobra 22,5% de fundo puro em cima e embaixo. */
    background: radial-gradient(62% 55% at 26% 50%, var(--realce), transparent 72%);
    opacity: .22;
  }

  .vt-pontos { margin: 2.2rem 0 0; display: grid; gap: 1.35rem; }
  .vt-pontos dt {
    font-weight: 700; font-size: 1.02rem; margin-bottom: .2rem;
    display: flex; align-items: center; gap: .55rem;
  }
  .vt-pontos dt::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--realce); flex: none;
  }
  .vt-pontos dd { margin: 0 0 0 1.1rem; color: var(--tinta-fraca); font-size: .98rem; }

  .vt-marcadores { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .7rem; }
  .vt-marcadores li {
    display: flex; align-items: center; gap: .7rem;
    font-size: .98rem; color: var(--tinta-fraca);
  }
  .vt-marcadores li::before {
    content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid var(--acento-texto);
    background-image: linear-gradient(45deg, transparent 46%, var(--acento-texto) 46% 54%, transparent 54%),
                      linear-gradient(-45deg, transparent 46%, var(--acento-texto) 46% 54%, transparent 54%);
    background-size: 9px 9px; background-position: center; background-repeat: no-repeat;
  }

  /* ───────────────── figura: a prévia da mensagem ─────────────────────── */
  /*
     O contraste desta figura foi refeito, e os números estão aqui porque ela é
     a única parte da página que imita a interface de um terceiro — a tentação
     de "deixar igual ao WhatsApp" é o que produziu o problema.

     O balão original era `#1F2C33` sobre `#0B0C0E`: **1,37:1**. É o tom real do
     aplicativo, e lá ele funciona porque a tela inteira é aquilo; aqui ele é um
     cartão pequeno dentro de uma página, e o balão simplesmente não se
     destacava do fundo.

     WCAG 2.1 (1.4.11) pede **3:1** para o limite visual de um componente. Em vez
     de clarear o balão até `#43677C` — que passa e deixa de parecer WhatsApp —,
     o limite virou a **borda**: `#46697E` contra o fundo dá 3,35:1, e o balão
     fica no tom certo. Os textos de dentro estão todos acima de 7:1.
  */
  .vt-conversa {
    background: #0F1013;
    border-radius: 18px; border: var(--borda);
    overflow: hidden; max-width: 25rem; margin-inline: auto;
    box-shadow: 0 30px 70px -30px rgb(0 0 0 / .6);
  }
  .vt-conversa__topo {
    display: flex; align-items: center; gap: .7rem;
    padding: .85rem 1rem; background: #16242D; border-bottom: var(--borda);
  }
  .vt-conversa__avatar {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, var(--realce), var(--acento));
  }
  .vt-conversa__id { display: grid; line-height: 1.3; color: #F4F7F8; }
  .vt-conversa__id b { font-size: .93rem; }
  .vt-conversa__id small {
    font-size: .74rem; color: #ADBAC2;      /* 7,99:1 sobre #16242D */
    display: flex; align-items: center; gap: .3rem;
  }
  .vt-selo-oficial {
    width: 12px; height: 12px; border-radius: 50%; background: var(--zap); flex: none;
    background-image: linear-gradient(45deg, transparent 45%, #16242D 45% 55%, transparent 55%);
  }
  .vt-conversa__corpo {
    padding: 1.4rem 1rem 1.8rem;
    background:
      radial-gradient(circle at 20% 20%, rgb(255 255 255 / .025) 1px, transparent 1px) 0 0/22px 22px,
      #070C0F;
    min-height: 15rem;
  }
  .vt-balao {
    background: #243845;
    border: 1px solid #46697E;               /* 3,35:1 sobre #070C0F */
    border-radius: 12px 12px 12px 3px;
    padding: .75rem .85rem .5rem; max-width: 88%;
    font-size: .93rem; position: relative;
    color: #F4F7F8;                          /* 11,30:1 */
  }
  .vt-balao p { margin: 0 0 .45rem; }
  .vt-balao p:first-child b { color: #FFC46B; }   /* 7,74:1 */
  .vt-balao__botao {
    display: block; text-align: center; margin: .7rem -.85rem -.5rem;
    padding: .65rem; border-top: 1px solid rgb(255 255 255 / .14);
    color: #8FDCFA;                          /* 7,98:1 */
    font-weight: 600; font-size: .9rem;
  }
  .vt-balao__hora {
    position: absolute; right: .7rem; bottom: 2.9rem;
    font-size: .68rem; color: #C6D2D9;       /* 7,89:1 */
  }
  .vt-balao__ticks { color: #8FDCFA; }

  /* ───────────────────── figura: o painel ao vivo ──────────────────────── */
  .vt-painel {
    background: var(--vazio-2); border: var(--borda); border-radius: 16px;
    overflow: hidden; box-shadow: 0 30px 70px -34px rgb(0 0 0 / .8);
  }
  .vt-painel__topo {
    display: flex; align-items: center; gap: .6rem;
    padding: .8rem 1.1rem; border-bottom: var(--borda);
    font-family: var(--mono); font-size: .78rem; color: var(--tinta-fraca);
  }
  .vt-painel__luz { width: 8px; height: 8px; border-radius: 50%; background: var(--zap); animation: vt-pulso 2.4s infinite; }
  .vt-painel__vivo {
    margin-left: auto; color: var(--zap); text-transform: uppercase;
    letter-spacing: .14em; font-size: .68rem;
  }
  .vt-painel__medidas { list-style: none; margin: 0; padding: 1.2rem; display: grid; gap: 1.15rem; }
  .vt-painel__medidas li { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; }
  .vt-painel__rotulo { font-size: .86rem; color: var(--tinta-fraca); }
  .vt-painel__valor {
    font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right;
  }
  .vt-painel__barra {
    grid-column: 1 / -1; height: 6px; border-radius: 999px;
    background: rgb(255 255 255 / .07); overflow: hidden;
  }
  .vt-painel__barra i {
    display: block; height: 100%; width: 0; border-radius: inherit;
    background: linear-gradient(90deg, var(--realce), var(--acento));
    transition: width 1.4s var(--curva);
  }
  [data-medida].dentro .vt-painel__barra i { width: var(--ate); }
  .vt-painel__nota {
    margin: 0; padding: 0 1.2rem 1.1rem;
    font-family: var(--mono); font-size: .7rem; color: #6B6875;
  }

  /* ─────────────────────── figura: quem clicou ─────────────────────────── */
  .vt-cliques {
    background: rgb(10 10 11 / .55);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: var(--borda); border-radius: 16px; overflow: hidden;
  }
  .vt-cliques__topo {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.2rem; border-bottom: var(--borda);
    font-family: var(--mono); font-size: .8rem; color: var(--tinta-fraca);
  }
  .vt-cliques__topo b {
    font-family: var(--sans); font-size: 1.5rem; color: var(--acento-texto);
    font-variant-numeric: tabular-nums;
  }
  .vt-cliques__lista { list-style: none; margin: 0; padding: .5rem .6rem; }
  .vt-cliques__lista li {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem; border-radius: 9px; font-size: .95rem;
    transition: background .2s, color .2s;
  }
  /* A linha é o que a seção promete — "dá para saber quem clicou" —, e passar o
     mouse por ela é o gesto de quem está conferindo uma lista. Só o realce muda:
     nada aqui é clicável, e sublinhar ou mover a linha prometeria uma página
     que não existe. */
  .vt-cliques__lista li:hover { background: rgb(255 255 255 / .05); }
  .vt-cliques__lista li:hover .vt-cliques__ini {
    border-color: var(--acento); color: var(--acento-texto);
  }
  .vt-cliques__lista li:hover time { color: var(--tinta); }
  .vt-cliques__ini { transition: border-color .2s, color .2s; }
  .vt-cliques__lista time { margin-left: auto; font-family: var(--mono); font-size: .78rem; color: var(--tinta-fraca); }
  .vt-cliques__ini {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    font-size: .7rem; font-weight: 700;
    background: rgb(255 255 255 / .08); color: var(--tinta);
    border: 1px solid rgb(255 255 255 / .16);
  }
  .vt-cliques__nota {
    margin: 0; padding: .3rem 1.2rem 1.1rem;
    font-family: var(--mono); font-size: .7rem; color: #6B6875;
  }

  /* ─────────────────────────── figura: gráfico ─────────────────────────── */
  .vt-grafico {
    margin: 0; background: var(--vazio-2); border: var(--borda);
    border-radius: 16px; padding: 1.2rem;
    position: relative;                    /* a âncora da caixa do ponteiro */
  }
  .vt-grafico figcaption {
    font-family: var(--mono); font-size: .74rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--tinta-fraca); margin-bottom: 1rem;
  }
  .vt-grafico canvas { width: 100%; height: 240px; display: block; }
  .vt-grafico__nota {
    margin: .9rem 0 0;
    font-family: var(--mono); font-size: .7rem; color: #6B6875;
  }

  /* A caixa que abre sob o ponteiro, com os quatro valores do dia.
     Ela é HTML e não desenho no canvas: dentro do canvas o texto sairia numa
     fonte que a página não usa, sem seleção e sem herdar tema nenhum.
     `pointer-events: none` é o que impede a caixa de se colocar embaixo do
     cursor e disparar o `pointerleave` do próprio gráfico, que a faria piscar. */
  .vt-grafico__dica {
    position: absolute; z-index: 2; pointer-events: none;
    transform: translateX(-50%);
    background: rgb(10 10 11 / .94);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: var(--borda); border-radius: 10px;
    padding: .6rem .75rem; min-width: 10rem;
    font-size: .82rem; line-height: 1.5;
    box-shadow: 0 18px 40px -20px rgb(0 0 0 / .9);
    opacity: 0; transition: opacity .15s;
  }
  .vt-grafico__dica.aberta { opacity: 1; }
  .vt-grafico__dica b {
    display: block; margin-bottom: .35rem;
    font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--tinta-fraca); font-weight: 500;
  }
  .vt-grafico__dica span { display: flex; align-items: center; gap: .45rem; }
  .vt-grafico__dica i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
  .vt-grafico__dica em {
    margin-left: auto; font-style: normal; font-weight: 650;
    font-variant-numeric: tabular-nums;
  }


  /* ────────────── a grade que se ajusta à quantidade de itens ───────────
     `auto-fit` enche a linha e joga o resto na seguinte: seis setores viravam
     quatro em cima e **dois** embaixo, e a fila órfã fazia os dois últimos
     parecerem menos importantes que os outros quatro.

     Aqui a quantidade de colunas é escolhida pela quantidade de itens, para as
     linhas saírem cheias — seis viram 3+3, oito viram 4+4. A regra é: a maior
     divisão exata até quatro; não havendo divisão exata, a que deixa a última
     linha mais cheia (cinco → 3+2, sete → 4+3, dez → 4+4+2).

     Ela é `:has()` e não conta em PHP porque a contagem é do layout, não do
     conteúdo — e porque, num navegador sem `:has()`, o `--colunas` padrão
     continua valendo e a grade sai igual à de antes.

     Vale para as três listas de contagem variável (setores, passos e
     confronto): elas são todas repeater editável, e quem acrescentar um quinto
     passo não deve descobrir a fila órfã no ar. */
  .vt-grade {
    display: grid;
    gap: 1.1rem;
    --colunas: 1;
    grid-template-columns: repeat(var(--colunas), minmax(0, 1fr));
  }

  @media (min-width: 40rem) {
    .vt-grade { --colunas: 2; }
  }

  @media (min-width: 60rem) {
    /* O default cobre treze itens em diante, e é o que sobra de mais legível
       numa lista longa. */
    .vt-grade { --colunas: 3; }

    .vt-grade:has(> :nth-child(1):last-child)  { --colunas: 1; }
    .vt-grade:has(> :nth-child(2):last-child)  { --colunas: 2; }
    .vt-grade:has(> :nth-child(3):last-child)  { --colunas: 3; }
    .vt-grade:has(> :nth-child(4):last-child)  { --colunas: 4; }
    .vt-grade:has(> :nth-child(5):last-child)  { --colunas: 3; }
    .vt-grade:has(> :nth-child(6):last-child)  { --colunas: 3; }
    .vt-grade:has(> :nth-child(7):last-child)  { --colunas: 4; }
    .vt-grade:has(> :nth-child(8):last-child)  { --colunas: 4; }
    .vt-grade:has(> :nth-child(9):last-child)  { --colunas: 3; }
    .vt-grade:has(> :nth-child(10):last-child) { --colunas: 4; }
    .vt-grade:has(> :nth-child(11):last-child) { --colunas: 4; }
    .vt-grade:has(> :nth-child(12):last-child) { --colunas: 4; }
  }

  /* ─────────────────────────────── passos ──────────────────────────────── */
  .vt-secao { padding: clamp(4.5rem, 11vh, 8rem) clamp(1rem, 3vw, 2rem); }
  .vt-secao__caixa { max-width: var(--caixa); margin-inline: auto; }
  .vt-secao__caixa--estreita { max-width: 48rem; }
  .vt-secao__caixa > h2 { text-align: center; max-width: 22ch; margin-inline: auto; }

  .vt-passos {
    list-style: none; padding: 0; margin: 3.5rem 0 0;
    counter-reset: vt-passo;
  }
  /* Superfície e não borda, como todo cartão desta página desde que as seções
     pararam de se separar por linha: a borda de 9% desenhava um retângulo
     nítido em volta de cada passo, e quatro deles em fila lado a lado eram
     quatro molduras competindo com o texto de dentro. */
  .vt-passos li {
    border-radius: 14px; padding: 1.6rem 1.4rem;
    background: rgb(255 255 255 / .04);
    counter-increment: vt-passo;
  }
  /* O passo é numerado e a seção não. A diferença não é inconsistência: aqui a
     ordem é a instrução — o segundo passo depois do primeiro —, e lá ela era só
     enfeite sobre assuntos que se leem em qualquer ordem. */
  .vt-passos li::before {
    content: counter(vt-passo, decimal-leading-zero);
    font-family: var(--mono); font-size: .8rem; letter-spacing: .1em;
    color: var(--acento-texto); display: block; margin-bottom: 1.4rem;
  }
  .vt-passos h3 { margin-bottom: .5rem; }
  .vt-passos p { margin: 0; color: var(--tinta-fraca); font-size: .96rem; }

  /* ───────────────────────────── confronto ─────────────────────────────── */
  .vt-confronto { margin-top: 3.2rem; }
  /* O cartão era branco sobre creme; virou superfície translúcida sobre o
     mesmo fundo de todo o resto. Ele continua sendo o elemento mais claro da
     seção — o que mudou é que agora ele se destaca **do fundo da página**, e
     não de uma faixa de outra cor. */
  .vt-confronto article {
    background: rgb(255 255 255 / .05);
    border-radius: 14px; padding: 1.5rem;
  }
  .vt-confronto h3 { margin-bottom: 1.1rem; color: var(--tinta); }
  .vt-confronto p { margin: 0 0 .7rem; font-size: .95rem; display: grid; gap: .2rem; }
  .vt-confronto p:last-child { margin: 0; }
  .vt-confronto span {
    font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
    text-transform: uppercase;
  }
  .vt-confronto__antes  { color: #8C8894; }        /* 4,86:1 */
  .vt-confronto__antes span { color: #8C8894; }
  .vt-confronto__depois { color: var(--tinta); font-weight: 600; }
  .vt-confronto__depois span { color: var(--acento-texto); }

  /* ─────────────────────────────── setores ─────────────────────────────── */
  .vt-secao__linha {
    text-align: center; color: var(--tinta-fraca);
    max-width: 44ch; margin: 1.4rem auto 0;
  }
  .vt-setores { list-style: none; padding: 0; margin: 3rem 0 0; }
  .vt-setores li {
    border-radius: 13px; padding: 1.3rem 1.3rem 1.3rem 1.5rem;
    display: grid; gap: .35rem;
    background: rgb(255 255 255 / .035);
    position: relative; overflow: hidden;
  }
  /* A barra do acento era 3px cheios de ponta a ponta. Como degradê que se
     apaga no pé do cartão, ela marca sem cortar. */
  .vt-setores li::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: linear-gradient(180deg, var(--realce), transparent);
  }
  .vt-setores b { font-size: 1.02rem; }
  .vt-setores span { color: var(--tinta-fraca); font-size: .93rem; }

  /* ─────────────────────────────── dúvidas ─────────────────────────────── */
  .vt-duvidas { margin-top: 3rem; display: grid; gap: .6rem; }
  .vt-duvidas details {
    border-radius: 12px;
    background: rgb(255 255 255 / .04); overflow: hidden;
  }
  /* O vão entre um item e o seguinte é o que os separa — dois cartões
     colados precisariam de linha, e afastados não precisam de nada. */
  .vt-duvidas details + details { margin-top: .1rem; }
  .vt-duvidas summary {
    cursor: pointer; list-style: none;
    padding: 1.15rem 3rem 1.15rem 1.3rem;
    font-weight: 620; font-size: 1.02rem; position: relative;
  }
  .vt-duvidas summary::-webkit-details-marker { display: none; }
  .vt-duvidas summary::after {
    content: ""; position: absolute; right: 1.3rem; top: 50%;
    width: 11px; height: 11px; margin-top: -6px;
    border-right: 2px solid var(--acento-texto); border-bottom: 2px solid var(--acento-texto);
    transform: rotate(45deg); transition: transform .25s var(--curva);
  }
  .vt-duvidas details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
  .vt-duvidas details > div { padding: 0 1.3rem 1.25rem; }
  .vt-duvidas details p { margin: 0; color: var(--tinta-fraca); font-size: .98rem; }

  /* ──────────────────────────── chamada final ──────────────────────────── */
  /* O fecho e o rodapé são **uma superfície contínua**: aqui a elevação sobe do
     transparente e não volta a zero, e o rodapé continua exatamente de onde ela
     parou. Não há linha entre os dois porque não há transição a marcar — é o
     mesmo plano, ficando mais escuro conforme a página acaba. */
  .vt-final {
    padding: clamp(5rem, 13vh, 9rem) clamp(1rem, 3vw, 2rem);
    background: linear-gradient(180deg,
      rgb(255 255 255 / 0) 0%,
      rgb(255 255 255 / .03) 42%,
      rgb(255 255 255 / .03) 100%);
    text-align: center; position: relative; isolation: isolate;
  }
  /* ─────────── o brilho que atravessa a junção com o rodapé ───────────
     O corte que se via ali **não era da superfície** — as duas são `.03` e o
     degradê do fecho já terminava exatamente no valor com que o rodapé começa.
     Era do brilho do acento: ele era uma elipse centrada a 96% da altura desta
     seção, e a 100% ainda estava a nove por cento do raio, ou seja, quase na
     cor cheia. A borda de baixo da seção a cortava no meio, e o que o olho
     achava era o fim abrupto de uma cor, não a troca de um plano.

     A correção é desenhar **uma elipse só, partida na junção**: a metade de
     cima sai daqui centrada em `50% 100%`, a de baixo sai de `.vt-rodape::before`
     centrada em `50% 0`, e as duas usam os mesmos parâmetros. Na linha da junção
     as duas metades valem a cor cheia sobre o mesmo `.03`, então não há o que
     ver — nem costura, nem corte.

     O raio vertical é **`rem` e não porcentagem**: porcentagem se mede na altura
     de cada elemento, e as duas metades sairiam de tamanhos diferentes assim que
     o fecho e o rodapé deixassem de ter a mesma altura — o que é sempre. O
     horizontal pode ser porcentagem porque os dois são de largura cheia.

     O brilho do realce fica só aqui, e não precisa de metade nenhuma: com o
     centro a 55% e o transparente a 72% do raio de 62%, ele chega a zero em
     99,6% da altura — ele já morria antes da borda, que era o desenho. */
  .vt-final::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(58% 62% at 50% 55%, var(--realce), transparent 72%),
      radial-gradient(48% 16rem at 50% 100%, var(--acento), transparent 70%);
    opacity: .26;
  }
  .vt-final__caixa { max-width: 46rem; margin-inline: auto; }
  .vt-final__linha { color: var(--tinta-fraca); font-size: 1.08rem; margin: 1.5rem auto 2.4rem; max-width: 40rem; }
  .vt-final__acoes { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

  /* ─────────────────────────────── rodapé ──────────────────────────────── */
  /* O rodapé **começa exatamente onde o fecho parou** e não escurece: a versão
     anterior caía para 35% de preto ao longo dele, e essa queda, embora suave,
     era visível como uma faixa mais escura — o olho acha a borda de um degradê
     longo do mesmo jeito que acha a de uma linha, só que mais devagar.

     Agora é a mesma superfície do fecho, constante. O que separa um do outro é
     o espaço em volta do conteúdo, e mais nada.

     E ele **carrega a metade de baixo do brilho do acento**, com os mesmos
     parâmetros do `.vt-final::before` e o centro na própria borda de cima: a
     razão inteira está escrita lá. `isolation` é o que mantém o pseudoelemento
     de `z-index: -1` dentro do rodapé, acima do fundo dele e atrás do texto —
     sem ela, um `-1` sairia procurando um contexto de empilhamento lá em cima e
     o brilho sumiria por baixo da página. */
  .vt-rodape { background: rgb(255 255 255 / .03); position: relative; isolation: isolate; }
  .vt-rodape::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(48% 16rem at 50% 0%, var(--acento), transparent 70%);
    opacity: .26;
  }
  .vt-rodape__caixa {
    max-width: var(--caixa); margin-inline: auto;
    padding: clamp(3rem, 7vh, 4.5rem) clamp(1rem, 3vw, 2rem) 2.5rem;
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem;
  }
  .vt-rodape__marca { display: grid; gap: 1rem; align-content: start; justify-items: start; }
  .vt-rodape__marca p { color: var(--tinta-fraca); font-size: .93rem; margin: 0; }
  .vt-rodape__nav { display: grid; gap: .55rem; align-content: start; }
  .vt-rodape__titulo {
    font-family: var(--mono); font-size: .72rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--tinta-fraca); font-weight: 500;
    margin: 0 0 .35rem;
  }
  .vt-rodape__nav a { color: var(--tinta-fraca); text-decoration: none; font-size: .93rem; transition: color .2s; }
  .vt-rodape__nav a:hover { color: var(--acento-texto); }

  .vt-rodape__fim {
    max-width: var(--caixa); margin-inline: auto;
    padding: 1.5rem clamp(1rem, 3vw, 2rem) 2.5rem;
    /* A única divisória que sobrou na página, e ela separa dois blocos do
       MESMO rodapé — não duas seções.

       Ela não é `border`: uma borda tem duas pontas, e ponta de linha é
       aresta. Como degradê que morre em transparência dos dois lados, ela
       sugere a separação no meio e não termina em lugar nenhum. */
    border-top: 0;
    position: relative;
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
    font-size: .82rem; color: #6B6875;
  }
  .vt-rodape__fim::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 1px;
    background: linear-gradient(90deg,
      transparent, rgb(255 255 255 / .07) 22%, rgb(255 255 255 / .07) 78%, transparent);
  }
  .vt-rodape__fim p { margin: 0; }
  .vt-rodape__aviso { max-width: 44ch; }

  /* ────────────────────────── botão do WhatsApp ────────────────────────── */
  .vt-zap {
    position: fixed; z-index: 90;
    right: clamp(1rem, 3vw, 1.8rem);
    bottom: max(clamp(1rem, 3vw, 1.8rem), env(safe-area-inset-bottom));
    width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--zap); color: #06331A;
    box-shadow: 0 12px 30px -8px rgb(37 211 102 / .55);
    transition: transform .22s var(--curva);
  }
  .vt-zap:hover { transform: scale(1.08); }

  /* ══════════════════ o que responde ao ponteiro ═══════════════════════
     A página era inteira dirigida pela rolagem: ela reagia ao dedo e ao
     scroll, e não reagia à **mão**. Passar o mouse por ela não movia nada, e
     numa página que se propõe a mostrar um produto isso se lê como imagem.

     Três recursos, e os três chegam por atributo que o **script** carimba
     (`data-luz` e `data-inclina`) — nunca escrito no Blade. A razão é que os
     dois dependem de coordenada: sem quem alimente `--lx`/`--ly`, o brilho
     ficaria congelado no meio do cartão, e sem quem alimente `--rx`/`--ry` a
     inclinação seria uma perspectiva parada. Marcando no script, o estilo só
     existe quando existe quem o mova.

     Quem é carimbado, e o alcance de cada um, está em `landing.js`, seção 11.

     ── Onde eles param ──────────────────────────────────────────────────

     A **inclinação** morre com `prefers-reduced-motion`: ela desloca a figura
     inteira e persegue o cursor, que é exatamente o movimento que alguém com
     transtorno vestibular pediu para não ver. O **brilho** fica: ele não
     desloca nada, é mudança de luz sob a mão de quem move a mão — a mesma
     categoria de um `:hover` de cor, que a regra nunca pediu para tirar.

     Os dois só existem onde há ponteiro fino. No toque, `pointermove` só
     acontece com o dedo apoiado, e um cartão que se inclina enquanto a pessoa
     tenta rolar a página é um defeito, não um efeito. */

  [data-luz] { position: relative; isolation: isolate; }
  [data-luz]::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border-radius: inherit; pointer-events: none;
    background: radial-gradient(14rem 14rem at var(--lx, 50%) var(--ly, 50%),
                                rgb(255 255 255 / .11), transparent 68%);
    opacity: 0; transition: opacity .28s var(--curva);
  }
  [data-luz]:hover::after { opacity: 1; }

  /* No botão sólido o branco por cima do acento clarearia demais; o realce dele
     é o próprio acento forte, que é a mesma cor que o `:hover` já usa. */
  .vt-botao--solido[data-luz]::after {
    background: radial-gradient(9rem 9rem at var(--lx, 50%) var(--ly, 50%),
                                rgb(255 255 255 / .28), transparent 70%);
  }

  /* O cartão sobe por `translate` e **não** por `transform`: a propriedade
     `transform` já é do `.vt-revela`, que anima a entrada dele na tela, e a
     regra `.dentro` vence esta na especificidade — escrito como `transform`,
     o levantar simplesmente não acontecia, sem erro nenhum. As duas se
     compõem: `translate` é aplicada antes de `transform`. */
  .vt-passos li, .vt-confronto article, .vt-setores li {
    transition: translate .3s var(--curva), background .3s;
  }
  .vt-passos li:hover, .vt-confronto article:hover, .vt-setores li:hover {
    translate: 0 -3px;
    background: rgb(255 255 255 / .075);
  }

  .vt-duvidas summary { transition: color .2s; }
  .vt-duvidas summary:hover { color: var(--acento-texto); }

  /* A inclinação das duas figuras. O ângulo é pequeno de propósito: em 7° a
     prévia da mensagem ainda se lê, e é ela que carrega o argumento da seção.
     A perspectiva é longa (900px) pelo mesmo motivo — quanto mais curta, mais
     a figura deforma nas bordas. */
  [data-inclina] {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .3s var(--curva);
    will-change: transform;
  }

  /* ─────────────────────────────── telas ───────────────────────────────── */
  @media (max-width: 60rem) {
    .vt-topo__nav, .vt-topo__acoes { display: none; }
    .vt-topo__menu { display: grid; margin-left: auto; }

    /* A gaveta só abre aqui. Fora deste recorte a classe pode existir no `<html>`
       e não pinta nada — é o que faz o menu se fechar sozinho quando a janela
       cresce, sem depender de o script perceber. */
    html.menu-aberto { overflow: hidden; }
    html.menu-aberto .vt-veu {
      opacity: 1; visibility: visible;
      transition: opacity .3s var(--curva), visibility 0s;
    }
    html.menu-aberto .vt-menu {
      transform: none; visibility: visible;
      transition: transform .32s var(--curva), visibility 0s;
    }

    .vt-heroi { grid-template-columns: 1fr; min-height: auto; padding-top: 6.5rem; }
    .vt-cena { aspect-ratio: 5 / 4; }

    .vt-bloco__caixa { grid-template-columns: 1fr; }
    /* No empilhado a figura volta para depois do texto, sempre — inverter a
       ordem numa coluna só deixaria o enfeite antes da explicação dele. */
    .vt-bloco__caixa--invertida .vt-bloco__texto  { order: 1; }
    .vt-bloco__caixa--invertida .vt-bloco__figura { order: 2; }

    .vt-rodape__caixa { grid-template-columns: 1fr 1fr; }
    .vt-rodape__marca { grid-column: 1 / -1; }
  }

  @media (max-width: 32rem) {
    .vt-heroi__acoes .vt-botao, .vt-final__acoes .vt-botao { width: 100%; }
    .vt-rodape__caixa { grid-template-columns: 1fr; }
  }

  /* ───────────────────────── movimento reduzido ────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
    html.temjs .vt-revela { opacity: 1; transform: none; }
    .vt-fatia > i { transform: none; }
    [data-medida] .vt-painel__barra i { width: var(--ate); }
  }
}