/* =============================================================================
   VITRINE.CSS — a linguagem visual do SIA
   =============================================================================
   Acrescentado em 12/09/2026 (frente VITRINE). Carrega DEPOIS de loja.css e
   NUNCA o substitui: loja.css continua dono das classes .ds-* (conta do cliente
   e admin, que não podem mudar de cara) e dos tokens --vt-* originais. Este
   arquivo só acrescenta componentes, e tudo aqui está escopado em .vt-page.

   -----------------------------------------------------------------------------
   A IDENTIDADE, EM UMA FRASE
   -----------------------------------------------------------------------------
   O produto tem uma ideia visual própria e ela não foi inventada para o site:
   ela É o programa. Quando o SIA fala, a música desce e a voz sobe.

       VIOLETA (#8b5cf6) = A VOZ         — só a fala do SIA usa essa cor
       CINZA   (#4a4463) = A MÚSICA      — o som que já estava tocando aí
       MONO    (Azeret)  = O RELÓGIO     — horário e número nunca dançam

   Disso saem as quatro formas que se repetem na vitrine inteira e que fazem
   alguém reconhecer um print como sendo do SIA:

     1. A FAIXA — barra cinza horizontal que despenca a 20% da altura e volta.
        20% e 500 ms não são estética: são DuckVol = 0.2f e DuckFadeMs = 500,
        os padrões de fábrica (SIA1/Services/AudioPlayer.cs:50-51).
     2. A BARRA DA VOZ — violeta, vertical, só existe enquanto a faixa está baixa.
     3. O RELÓGIO — Azeret Mono, tabular-nums, sempre grande demais para a caixa.
     4. A RÉGUA DE 24 H — marcas sobre uma linha; é como o produto pensa o dia.

   -----------------------------------------------------------------------------
   REGRA DE MOVIMENTO (ordem do dono, 12/09/2026)
   -----------------------------------------------------------------------------
   "Toda animação precisa servir para chamar atenção, explicar uma funcionalidade,
   mostrar relação entre elementos, criar continuidade ou melhorar a percepção de
   qualidade. Se não faz nenhuma, não coloque."

   Cada bloco animado deste arquivo carrega, no comentário, qual das cinco razões
   ele cumpre. Bloco sem razão escrita é bloco para apagar — e foi assim que a
   entrada dos cartões, o parallax do fundo e o brilho pulsante dos botões
   morreram antes de nascer.

   Custo: só `transform` e `opacity` (compositor, sem reflow). Nenhuma animação
   de `height`, `top`, `width` ou `box-shadow` em laço. A única altura animada é
   a do acordeão, que é um gesto único do visitante e não um laço.
   ============================================================================= */

/* =============================================================================
   DUAS CORREÇÕES DE CONTRASTE QUE JÁ ESTAVAM NO AR
   =============================================================================
   Medidas no navegador em 12/09/2026, com a fórmula de luminância relativa da
   WCAG, sobre os elementos renderizados — não estimadas no olho.

   1) O BOTÃO PRINCIPAL ESTAVA COM 2,19:1.
      loja.css declara `.vt-btn { color: #fff }` com especificidade (0,1,0) e,
      ANTES dele no arquivo, `.vt-page a { color: var(--vt-voz-claro) }` com
      (0,1,1). Especificidade ganha de ordem: todo `<a class="vt-btn">` da
      vitrine saía com texto VIOLETA CLARO (#b79cff) sobre o violeta do botão
      (#7c4ef0) — 2,19:1, muito abaixo dos 4,5:1 exigidos. Ninguém percebeu
      porque `.vt-btn:hover` tem (0,2,0) e ganha: passar o mouse consertava a
      cor, e quem testa passa o mouse. No celular não existe hover.
      Aqui a regra é `.vt-page a.vt-btn` (0,2,1), que vence sem tocar em
      loja.css — arquivo de outra frente. Com #fff sobre #7c4ef0: 5,02:1.

   2) --vt-ink-3 PASSAVA NO FUNDO DA PÁGINA E REPROVAVA DENTRO DOS CARTÕES.
      O tom #7a7593 foi calibrado contra --vt-ground (#08070d), onde mede
      4,6:1. Dentro de .vt-cartao / .vt-plano / .vt-painel o fundo é
      --vt-surface (#100e19), mais claro, e a mesma cor cai para 4,36:1 —
      reprovando justamente onde moram os textos pequenos que mais importam:
      o limite de computadores do plano, o rótulo da barra de gasto e as
      etiquetas de status. #7f7a99 mede 4,68:1 sobre a superfície e 4,95:1
      sobre o fundo: passa nos dois, e continua lendo como "texto secundário".
      A troca é só dentro de .vt-page — as telas .ds-* não mudam de cor.
   ============================================================================= */
/* O HALO DO HERÓI NÃO PODE EMPURRAR A PÁGINA.
   MEDIDO em 12/09 a 360, 320 e 768 px: a página tinha rolagem horizontal (17,
   13 e 55 px) e NENHUM elemento do DOM era o culpado — porque o culpado é um
   PSEUDO-ELEMENTO. `.vt-heroi2::before` é o brilho de fundo e usa
   `inset: -10% -10% 40% -10%`, ou seja, transborda 10% da largura para cada
   lado de propósito, para o brilho não ter borda visível. A 768 px isso vira
   73 px para fora da direita.
   Pseudo-elemento não aparece em querySelectorAll, então varredura de DOM não
   o encontra: é preciso ler getComputedStyle(el, '::before'). Fica registrado
   porque esta é a classe de bug que sobrevive a toda revisão de código.
   `overflow-x: clip` e NÃO `hidden`: `clip` corta o transbordo sem criar um
   contêiner de rolagem, então o `position: sticky` da seção da tarde continua
   funcionando. Navegador sem suporte a `clip` ignora a linha e volta ao
   comportamento de hoje — degrada, não quebra. */
.vt-page .vt-faixa { overflow-x: clip; }

.vt-page a.vt-btn { color: #fff; }
.vt-page a.vt-btn.vazado { color: var(--vt-ink); }
.vt-page a.vt-btn.vazado:hover { color: #fff; }
.vt-page a.vt-btn.morto { color: var(--vt-ink-3); }

.vt-page {
  --vt-ink-3: #7f7a99;
  /* Tokens NOVOS. Os antigos (--vt-ground, --vt-voz, --vt-musica…) continuam
     vindo de loja.css: repetir valor de cor em dois arquivos é a receita para
     eles divergirem na primeira correção. */
  --vt-voz-fraco:  rgba(139, 92, 246, .16);
  --vt-voz-linha:  rgba(139, 92, 246, .42);
  --vt-vidro:      rgba(255, 255, 255, .028);
  --vt-halo:       radial-gradient(60% 60% at 50% 40%, rgba(139,92,246,.16), transparent 70%);
  --vt-raio:       14px;
  --vt-raio-g:     18px;
  /* Sombra de profundidade sutil: o SIA vive num computador de recepção, a peça
     tem que parecer um aparelho pousado na mesa, não um cartão colado. */
  --vt-sombra:     0 28px 70px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.03) inset;
}

/* =============================================================================
   0. ABERTURA — "Apresentamos, SIA", ~2,8 s, na PRIMEIRA visita da sessão
   =============================================================================
   TROCADA EM 14/09/2026 (frente abertura-3d). O dono pediu "uma introdução
   'Apresentamos, SIA' e aí vai aparecendo embaixo as informações que já tem".
   A abertura anterior (o relógio 18:30 e "a sua música abaixa…") saiu; o
   MECANISMO é o mesmo e continua valendo tudo o que ele garantia:
   o HTML da home está COMPLETO por baixo desta camada, nada de conteúdo é
   escondido esperando animação, e quem tem JS desligado, leitor de tela sem JS
   ou prefers-reduced-motion nunca vê este elemento — ele nasce com [hidden] e
   só o JS o revela (assets/js/vitrine.js), uma vez por sessão.

   JUSTIFICATIVA: CHAMA ATENÇÃO (o nome do produto antes de qualquer frase),
   CRIA CONTINUIDADE (a cortina se abre sobre o monitor, que sobe para o lugar
   dele — a abertura apresenta o programa e o monitor mostra o programa) e
   EXPLICA A FUNCIONALIDADE num gesto só: debaixo do nome, a faixa cinza da
   música desce a 20% enquanto a barra violeta da voz fala, e volta. 20% é
   DuckVol = 0.2f (SIA1/Services/AudioPlayer.cs:50). A rampa aqui é mais curta
   que os 500 ms de fábrica de propósito — a cena inteira dura menos de três
   segundos — e por isso ela não é vendida como número em lugar nenhum.
   ============================================================================= */
.vt-intro {
  position: fixed; inset: 0; z-index: 2000;
  /* o halo violeta é um gradiente parado: nenhum custo por quadro */
  background: radial-gradient(55% 45% at 50% 46%, rgba(139,92,246,.13), transparent 72%), var(--vt-ground);
  display: grid; place-items: center;
  padding: 24px;
  /* Nada de opacity animada no container durante a cena: ele some de uma vez
     no fim, via classe .saindo, para não segurar uma camada de composição à toa. */
}
.vt-intro[hidden] { display: none !important; }
.vt-intro.saindo { animation: vtIntroSai .45s ease forwards; }
@keyframes vtIntroSai { to { opacity: 0; visibility: hidden; } }

.vt-intro-cena { width: min(720px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; }

.vt-intro-de {
  margin: 0; font-family: var(--vt-dado); font-size: clamp(.8rem, 2.4vw, 1.02rem);
  letter-spacing: .24em; text-transform: uppercase; color: var(--vt-voz-claro);
  opacity: 0; animation: vtSurge .5s ease .12s forwards;
}
.vt-intro-nome {
  margin: 18px 0 0; display: flex; align-items: center; gap: clamp(12px, 3vw, 24px);
  font-family: var(--vt-display); font-weight: 800; line-height: .9; letter-spacing: -.04em;
  font-size: clamp(4rem, 17vw, 9rem); color: var(--vt-ink);
  opacity: 0; animation: vtIntroNome .75s cubic-bezier(.2, .8, .2, 1) .55s forwards;
}
.vt-intro-nome img { width: .9em; height: .9em; flex: none; }
/* só opacity e transform: um blur aqui repintaria o título inteiro por quadro */
@keyframes vtIntroNome { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* A faixa da música debaixo do nome: nasce cheia, desce a 20% e volta ao MESMO
   nível — não a um nível qualquer. */
.vt-intro-faixa {
  width: min(360px, 78vw); height: 34px; margin: 28px 0 0; position: relative;
  display: flex; align-items: flex-end; gap: 3px;
  opacity: 0; animation: vtSurge .4s ease 1s forwards;
}
.vt-intro-faixa i {
  flex: 1 1 auto; background: var(--vt-musica); border-radius: 2px;
  height: 100%; transform-origin: bottom;
  animation: vtDuck 1.3s cubic-bezier(.4, 0, .2, 1) 1.05s both;
}
@keyframes vtDuck {
  0%, 14%   { transform: scaleY(1); }
  34%, 72%  { transform: scaleY(.2); }   /* 20% — DuckVol = 0.2f */
  92%, 100% { transform: scaleY(1); }
}
/* A barra da voz só existe enquanto a música está baixa. */
.vt-intro-voz {
  position: absolute; left: 50%; bottom: 0; width: 6px; margin-left: -3px;
  background: var(--vt-voz); border-radius: 3px;
  height: 100%; transform: scaleY(0); transform-origin: bottom;
  animation: vtFala .64s ease-in-out 1.46s both;
}
@keyframes vtFala {
  0%   { transform: scaleY(0); }
  12%  { transform: scaleY(.85); }
  30%  { transform: scaleY(.45); }
  48%  { transform: scaleY(1); }
  66%  { transform: scaleY(.55); }
  84%  { transform: scaleY(.8); }
  100% { transform: scaleY(0); }
}
.vt-intro-sub {
  margin: 20px 0 0; font-family: var(--vt-dado); font-size: clamp(.66rem, 1.8vw, .8rem);
  letter-spacing: .16em; text-transform: uppercase; color: var(--vt-ink-3);
  opacity: 0; animation: vtSurge .45s ease 1.2s forwards;
}
@keyframes vtSurge { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Pular: visível desde 0,2 s, canto inferior direito, alvo de toque de 44 px.
   Ele recebe o foco quando a abertura começa (vitrine.js), então o anel de foco
   precisa aparecer — e sem virar quadrado: a regra geral de foco da vitrine
   (loja.css, `.vt-page button:focus-visible`) põe border-radius: 6px, e aqui ela
   transformaria a pílula num retângulo no instante do Tab. */
.vt-intro-pular {
  position: fixed; right: 18px; bottom: 18px;
  background: transparent; border: 1px solid var(--vt-line); color: var(--vt-ink-2);
  border-radius: 999px; padding: 11px 18px; min-height: 44px;
  font: 500 .84rem/1 var(--vt-texto); cursor: pointer;
  opacity: 0; animation: vtSurge .3s ease .2s forwards;
}
.vt-intro-pular:hover, .vt-intro-pular:focus-visible { color: #fff; border-color: var(--vt-voz); }
.vt-page .vt-intro-pular:focus-visible { outline: 2px solid var(--vt-voz-claro); outline-offset: 3px; border-radius: 999px; }

/* =============================================================================
   0B. APRESENTAMOS — o programa num monitor, com a interface VIVA dentro
   =============================================================================
   Pedido do dono em 14/09/2026: "a página inicial podia mostrar a interface em
   3D, igual estava antes". O monitor 3D morou em loja/sia/index.php até 06/09
   (assets/css/sia.css: .sia-stage perspective 1600px, .sia-monitor
   rotateY(-7deg) rotateX(2deg)) e saiu em 12/09 porque a interface de dentro
   mostrava o que o programa não faz mais (vozes por fornecedor, "ID desta máquina").
   Volta com a FORMA de antes e a interface refeita contra a 3.4.0 — ver o
   cabeçalho de assets/sia-ui/sia-ui.js. sia.css não é carregado aqui: ele é da
   página do programa, usa os tokens --ds-* e traria o resto daquela página junto.

   JUSTIFICATIVA: MOSTRA RELAÇÃO ENTRE ELEMENTOS (a inclinação segue o mouse, e é
   isso que diz "isto é um objeto que você pode mexer", não uma foto) e MELHORA A
   PERCEPÇÃO DE QUALIDADE (o programa pousado numa mesa, não um print colado).
   Sem 3D abaixo de 992 px: no celular a tela tem ~340 px de largura, e qualquer
   ângulo come a leitura. Sem 3D nem movimento para prefers-reduced-motion.

   DESEMPENHO. Nada aqui entra no caminho da primeira pintura: sia-ui.css e
   sia-ui.js não estão no <head> nem no fim do corpo — o vitrine.js os pede só
   quando esta seção existe e está perto da tela (quem chega por #planos não
   baixa nada que não vê), e até lá a tela mostra um esqueleto de CSS puro com
   a proporção exata da janela (1180x738), então nada pula quando a interface
   entra. O relógio de dentro para quando o monitor sai da tela.
   ============================================================================= */
.vt-faixa.vt-apresenta { padding-bottom: 64px; }
.vt-apresenta-cab { text-align: center; }
.vt-apresenta-t {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px;
  font-family: var(--vt-display); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(2rem, 5.2vw, 3.4rem); color: var(--vt-ink);
}
.vt-apresenta-de { color: var(--vt-ink-2); font-weight: 700; }
.vt-apresenta-sia { display: inline-flex; align-items: center; gap: .28em; }
.vt-apresenta-sia img { width: 1.04em; height: 1.04em; flex: none; }
.vt-apresenta-sub { margin: 14px auto 0; max-width: 66ch; color: var(--vt-ink-2); font-size: 1.02rem; }

/* O palco: a perspectiva mora no avô, e o .vt-monitor-entra passa o 3D adiante
   (preserve-3d) — é ele que faz a subida do monitor no fim da abertura, sem
   brigar com a inclinação do mouse, que mora no .vt-monitor. */
.vt-palco3d { position: relative; margin-top: 34px; perspective: 1600px; perspective-origin: 50% 30%; }
/* o halo da voz atrás do monitor: gradiente parado, sem custo por quadro; o
   transbordo lateral é cortado pelo overflow-x: clip de .vt-faixa */
.vt-palco3d::before {
  content: ""; position: absolute; inset: -8% -6% 12%; background: var(--vt-halo); pointer-events: none;
}
/* O CLIQUE ATRAVESSA O .vt-monitor-entra (medido em 14/09/2026 a 1280 px, com
   clique de mouse de verdade). Com preserve-3d ele é um plano em z=0 dentro do
   mesmo contexto 3D, e a metade esquerda do monitor, inclinada para trás, fica
   ATRÁS dele: a barra lateral inteira entregava o clique ao .vt-monitor-entra e
   trocar de tela por dentro não funcionava. O .vt-monitor devolve o clique. */
.vt-monitor-entra { position: relative; transform-style: preserve-3d; pointer-events: none; }
.vt-monitor {
  /* A POSE DE ANTES (sia.css de 06/09): -7° e 2°. O vitrine.js só troca estas
     duas variáveis; o CSS decide se elas valem (no celular e com menos
     movimento, a transform inteira vira none e as variáveis não importam). */
  --vt-ry: -7deg; --vt-rx: 2deg;
  position: relative; max-width: 980px; margin: 0 auto; pointer-events: auto;
  transform: rotateY(var(--vt-ry)) rotateX(var(--vt-rx)); transform-origin: 50% 50%;
  transition: transform .35s ease-out;
}
.vt-monitor-moldura {
  position: relative; padding: 12px 12px 18px; border-radius: 18px;
  background: linear-gradient(180deg, #17141f 0%, #0d0b14 100%);
  border: 1px solid #2e2745;
  box-shadow: 0 44px 90px -30px rgba(0,0,0,.92), 0 0 0 1px rgba(255,255,255,.04) inset;
}
/* o LED do monitor: violeta, a cor da voz */
.vt-monitor-moldura::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--vt-voz); opacity: .7;
}
/* O vidro é o referencial da frase "a demonstração não carregou", que fica FORA
   da .vt-monitor-tela de propósito: a tela é role="img" para o leitor de tela, e
   um link dentro dela não seria anunciado. */
.vt-monitor-vidro { position: relative; border-radius: 8px; overflow: hidden; }
/* O ESQUELETO É A PRÓPRIA TELA ANTES DE A INTERFACE CHEGAR: fundo do programa
   (#0b0b12) e a barra lateral (152 px de 1180 = 12,88%, com a borda de 1 px), na
   proporção exata da janela. sia-ui.js escreve a altura em px por cima, com o
   mesmo número — a caixa não muda de tamanho quando a interface entra. */
.vt-monitor-tela {
  position: relative; overflow: hidden; border-radius: 8px;
  aspect-ratio: 1180 / 738; max-width: 100%;
  background: linear-gradient(90deg, #0c0c14 0 12.88%, #23232f 12.88% 12.97%, #0b0b12 12.97% 100%);
}
/* o reflexo do vidro, por cima da interface e transparente ao clique */
.vt-monitor-tela::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 72%, rgba(255,255,255,.02) 100%);
}
.vt-monitor-tela > noscript img { display: block; width: 100%; height: auto; }
/* NO TOQUE, OS CAMPOS DE DENTRO NÃO RECEBEM FOCO (medido em 14/09/2026 a 375 e
   768 px com toque emulado: tocar o compositor punha o foco no textarea). O
   tabIndex -1 do sia-ui.js só tira do Tab. Num aparelho de verdade o foco abre o
   teclado virtual por cima da página para um texto de ~3 px, e no Safari do
   iPhone um campo abaixo de 16 px ainda aproxima a página. Os botões de dentro e
   as abas de fora continuam trocando de tela; com mouse nada muda. */
@media (hover: none), (pointer: coarse) {
  .vt-monitor-tela .sia-ui input,
  .vt-monitor-tela .sia-ui textarea,
  .vt-monitor-tela .sia-ui select { pointer-events: none; }
}
.vt-monitor-pescoco {
  width: 96px; height: 46px; margin: 0 auto;
  background: linear-gradient(90deg, #0e0c16 0%, #1d1929 50%, #0e0c16 100%);
  border-left: 1px solid #2e2745; border-right: 1px solid #2e2745;
}
.vt-monitor-base {
  width: 280px; height: 13px; margin: 0 auto; border-radius: 3px 3px 14px 14px;
  background: linear-gradient(#221d33, #100d19); border: 1px solid #2e2745; border-top: 0;
  box-shadow: 0 22px 34px -14px rgba(0,0,0,.95);
}
/* A demonstração não carregou (rede, bloqueador): diz isso em cima do esqueleto,
   em vez de deixar uma tela escura que parece defeito. Nasce [hidden]. */
.vt-monitor-falhou {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 16px;
  margin: 0; text-align: center; font-size: .9rem; color: var(--vt-ink-2); background: rgba(8,7,13,.72);
}

/* Os botões de tela FORA do monitor: dentro dele tudo é escalado (um botão da
   barra lateral tem ~9 px de altura no celular) e sai do Tab, então é aqui que o
   teclado, o leitor de tela e o dedo trocam de tela. Alvo de 44 px. */
.vt-monitor-abas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 30px auto 0; }
.vt-monitor-abas button {
  border: 1px solid var(--vt-line); background: transparent; color: var(--vt-ink-2);
  border-radius: 999px; padding: 10px 16px; min-height: 44px; cursor: pointer;
  font: 500 .86rem/1 var(--vt-texto); transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.vt-monitor-abas button:hover { color: #fff; border-color: var(--vt-voz); }
.vt-monitor-abas button[aria-pressed="true"] { background: var(--vt-voz-botao); border-color: var(--vt-voz-botao); color: #fff; }
.vt-page .vt-monitor-abas button:focus-visible { border-radius: 999px; }
.vt-monitor-nota { text-align: center; margin: 14px auto 0; }

/* A SUBIDA DO MONITOR no fim da abertura. `.antes` e `.revela` só existem quando
   a abertura roda (vitrine.js): `.antes` é posto no mesmo instante em que a
   cortina aparece por cima, e sai quando ela sai — com JS bloqueado, visita
   repetida ou menos movimento, o monitor simplesmente está lá. */
/* A OPACIDADE MORA NO .vt-palco3d, E O MOVIMENTO NO .vt-monitor-entra — separados
   de propósito: opacity < 1 num elemento com preserve-3d ACHATA o 3D dos filhos,
   e o monitor passaria a subida inteira sem perspectiva e "estalaria" para a pose
   inclinada no último quadro. O .vt-palco3d é a raiz do contexto 3D (dono da
   perspective), então apagar e acender ele não achata nada. */
.vt-palco3d.antes { opacity: 0; }
.vt-palco3d.revela { animation: vtSurgeSo .45s ease both; }
.vt-palco3d.revela .vt-monitor-entra { animation: vtMonitorSobe .9s cubic-bezier(.16, .84, .24, 1) both; }
@keyframes vtSurgeSo { from { opacity: 0; } to { opacity: 1; } }
@keyframes vtMonitorSobe {
  from { transform: translateY(70px) rotateX(var(--vt-entra-rx, 22deg)) scale(.94); }
  to   { transform: none; }
}

@media (max-width: 991px) {
  /* reto: sem perspectiva, sem ângulo, sem pé — no celular a tela é pequena demais para perder leitura */
  .vt-palco3d { perspective: none; margin-top: 24px; --vt-entra-rx: 0deg; }
  .vt-palco3d::before { inset: -4% -8% 0; }
  .vt-monitor { transform: none; transition: none; }
  .vt-monitor-moldura { padding: 7px 7px 11px; border-radius: 12px; }
  .vt-monitor-moldura::after { bottom: 4px; width: 3px; height: 3px; margin-left: -1.5px; }
  .vt-monitor-tela, .vt-monitor-vidro { border-radius: 5px; }
  .vt-monitor-pescoco, .vt-monitor-base { display: none; }
  .vt-faixa.vt-apresenta { padding-bottom: 48px; }
}
@media (max-width: 639px) {
  .vt-apresenta-sub { font-size: .95rem; }
  .vt-monitor-abas { gap: 6px; margin-top: 22px; }
  .vt-monitor-abas button { padding: 10px 13px; font-size: .82rem; }
}

/* =============================================================================
   1. HERÓI — o produto em funcionamento na primeira dobra
   ============================================================================= */
/* TRÊS FILHOS, NÃO DOIS — e a razão é o celular (medido em 12/09/2026).
   Com o herói em duas colunas (texto | palco), empilhar no celular jogava a
   demonstração para DEPOIS do parágrafo, dos botões e da linha fina: medido em
   426x922, a peça começava em y=937, ou seja, fora da primeira tela. O dono
   pediu o contrário com todas as letras — "no celular a peça vem logo depois do
   H1 e ANTES dos botões" — e é a peça que explica o produto.

   Por isso o texto foi partido em `.vt-h-topo` (marca + H1) e `.vt-h-resto`
   (parágrafo, botões, linha fina, estado da conta), e as áreas do grid decidem
   a ordem em cada largura. No desktop nada muda de aparência: topo e resto
   ficam colados numa coluna só, com o palco ao lado ocupando as duas linhas. */
.vt-heroi2 {
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  grid-template-areas: "topo palco" "resto palco";
  column-gap: 54px; align-items: start;
  position: relative;
}
.vt-h-topo  { grid-area: topo; }
.vt-h-resto { grid-area: resto; }
.vt-heroi2 > .vt-palco { grid-area: palco; align-self: center; }
/* O halo da voz: profundidade sutil atrás da peça, sem custo de pintura por
   quadro (é um gradiente estático). Não anima. */
.vt-heroi2::before {
  content: ""; position: absolute; inset: -12% -6% -18% 34%;
  background: var(--vt-halo); pointer-events: none; z-index: 0;
}
.vt-heroi2 > * { position: relative; z-index: 1; }

/* A marca do PRODUTO no herói, com peso: quem tira print da home precisa
   reconhecer o SIA, não a DivisionStore (o logotipo grande do cabeçalho é da
   empresa). */
.vt-marca { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.vt-marca img { width: 44px; height: 44px; flex: none; }
.vt-marca b {
  display: block; font-family: var(--vt-display); font-weight: 800;
  font-size: 1.32rem; letter-spacing: -.02em; color: var(--vt-ink); line-height: 1;
}
.vt-marca span {
  display: block; font-family: var(--vt-dado); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--vt-ink-3); margin-top: 5px;
}

/* ---- O PALCO: a janela do SIA + as fontes de som daquele computador -------- */
.vt-palco {
  background: linear-gradient(180deg, #12101d 0%, #0b0913 100%);
  border: 1px solid var(--vt-line); border-radius: var(--vt-raio-g);
  box-shadow: var(--vt-sombra); padding: 16px;
  /* min-width: 0 — MEDIDO no navegador em 12/09, a 375 px: sem isto a pagina
     inteira ganhava 51 px de rolagem horizontal e o H1 saia cortado.
     O palco e item de GRID (.vt-heroi2), e item de grid tem min-width: auto por
     padrao: ele nao encolhe abaixo da largura minima do proprio conteudo. O
     conteudo aqui e a tira .vt-fontes, que no celular vira flex com
     overflow-x: auto — e um contenedor rolavel AINDA declara min-content com
     base nos filhos, entao o palco inflava para 404 px dentro de uma celula de
     343 px e empurrava o body.
     O .vt-fonte (o cartao de dentro) ja tinha este mesmo min-width: 0 desde a
     primeira versao; faltava no pai. E o par: sem os dois, um deles sempre
     infla. */
  min-width: 0;
}
.vt-palco-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 2px 4px 12px;
}
.vt-palco-topo .onde { display: flex; align-items: center; gap: 9px; font-size: .8rem; color: var(--vt-ink-3); }
.vt-palco-topo .hora {
  font-family: var(--vt-dado); font-variant-numeric: tabular-nums;
  font-size: 1.5rem; font-weight: 500; color: var(--vt-ink); letter-spacing: -.02em;
}
.vt-palco canvas { display: block; width: 100%; height: 118px; }

/* A linha do anúncio: o mesmo desenho do painel do programa. */
.vt-palco-fala {
  display: flex; gap: 13px; align-items: flex-start;
  border-top: 1px solid var(--vt-line-soft); margin-top: 10px; padding-top: 12px;
  min-height: 62px;
}
.vt-palco-fala .h {
  font-family: var(--vt-dado); font-variant-numeric: tabular-nums;
  font-size: .92rem; color: var(--vt-voz-claro); flex: none; padding-top: 2px;
}
.vt-palco-fala .t { font-size: .95rem; color: var(--vt-ink); line-height: 1.45; }
.vt-palco-fala .m { font-size: .76rem; color: var(--vt-ink-3); margin-top: 4px; }
.vt-palco-fala.calado .t { color: var(--vt-ink-3); }

/* As três fontes de som DAQUELE computador, ligadas ao SIA. */
.vt-fontes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 14px;
}
.vt-fonte {
  background: var(--vt-vidro); border: 1px solid var(--vt-line-soft);
  border-radius: 10px; padding: 11px 11px 9px; min-width: 0;
}
.vt-fonte .n {
  font-size: .72rem; color: var(--vt-ink-2); line-height: 1.3;
  display: block; margin-bottom: 8px;
  /* Nome longo ("Navegador · rádio online") não pode empurrar a caixa. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* display: block — MEDIDO em 14/09/2026 no navegador: o .b é um <span>, e span é
   inline, que IGNORA height. O trilho não aparecia e o <i> de dentro (bloco com
   height:100%) crescia para 38 px; com o scaleX da animação sobrava um bloco em pé
   de 12x38 px vazando para fora do cartão, por cima da legenda. Achado pelo dono. */
.vt-fonte .b { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.06); overflow: hidden; }
.vt-fonte .b i {
  display: block; height: 100%; background: var(--vt-musica); border-radius: 2px;
  width: 100%; transform-origin: left; /* o JS mexe só em scaleX */
}
.vt-fonte .v {
  font-family: var(--vt-dado); font-size: .66rem; color: var(--vt-ink-3);
  margin-top: 6px; display: block; font-variant-numeric: tabular-nums;
}
.vt-legenda2 {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 13px;
  font-size: .74rem; color: var(--vt-ink-3);
}
.vt-legenda2 b { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* =============================================================================
   2. MOLDURA DE PRODUTO — a captura real dentro de uma janela
   =============================================================================
   Captura solta num cartão parece screenshot de documentação. Dentro de uma
   moldura com barra de janela, parece o programa. Perspectiva MUITO sutil (2°):
   mais do que isso e o texto da captura fica ilegível, que é o oposto do motivo
   de ela estar aqui.
   ============================================================================= */
.vt-moldura {
  border: 1px solid var(--vt-line); border-radius: var(--vt-raio);
  background: #0c0a14; overflow: hidden; box-shadow: var(--vt-sombra);
  position: relative;
}
.vt-moldura-barra {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 13px; border-bottom: 1px solid var(--vt-line-soft);
  background: rgba(255,255,255,.02);
}
.vt-moldura-barra i { width: 9px; height: 9px; border-radius: 50%; background: #2c2740; flex: none; }
.vt-moldura-barra span {
  font-family: var(--vt-dado); font-size: .68rem; color: var(--vt-ink-3);
  margin-left: 6px; letter-spacing: .06em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* O corpo é o referencial do zoom: as coordenadas do destaque são da IMAGEM, e
   a barra de janela tem altura própria. Sem este invólucro, todo destaque
   escorregaria uns 38 px para baixo — e a seta apontaria para o lugar errado,
   que é pior do que não apontar. */
.vt-moldura-corpo { position: relative; line-height: 0; }
.vt-moldura img { display: block; width: 100%; height: auto; }

/* O zoom no recurso comentado: um retângulo violeta sobre a captura.
   Posicionado em % pelo style inline de cada página, porque a coordenada
   pertence à imagem, não ao componente. */
.vt-zoom { position: absolute; border: 2px solid var(--vt-voz); border-radius: 8px; pointer-events: none; }
/* O RÓTULO SAIU DE CIMA DA CAPTURA (14/09/2026, achado do dono). Ele era um <b>
   posicionado logo abaixo do retângulo, DENTRO da imagem — e na tela de Música
   cobria justamente os botões Spotify/YouTube que a frase explica; na de Avisos,
   o campo Mensagem. Qualquer rótulo dentro da captura esconde um pedaço dela, e
   a captura só está aqui para ser lida. (Em 12/09 ele já tinha sido corrigido
   por ser CORTADO no celular: o problema era o lugar, não a largura.)
   Agora o retângulo fica sozinho sobre a imagem e a frase vai numa legenda
   (<figcaption>) abaixo da moldura, com uma MARCA do mesmo desenho — borda
   violeta de 2 px, cantos arredondados — que diz "é aquele retângulo".
   A marca é violeta porque é a cor do que o SIA destaca (ver o topo deste
   arquivo); o texto da legenda fica em --vt-ink e o complemento em --vt-ink-2. */
.vt-moldura > figcaption {
  padding: 12px 16px 14px; border-top: 1px solid var(--vt-line-soft);
  font-family: var(--vt-texto); font-size: .86rem; line-height: 1.5; color: var(--vt-ink-2);
}
/* (0,2,0) de propósito: a legenda do zoom pode SER a figcaption, e a regra acima
   (0,1,1) venceria a cor e o peso — MEDIDO em 14/09/2026 no Chrome, a mesma frase
   saía cinza e fina numa página e branca e forte na outra. */
.vt-moldura .vt-zoom-legenda { display: flex; align-items: flex-start; gap: 10px; color: var(--vt-ink); font-weight: 700; }
.vt-zoom-marca {
  flex: none; width: 22px; height: 14px; margin-top: .22em;
  border: 2px solid var(--vt-voz); border-radius: 4px;
}
/* O parágrafo que vem depois da frase do zoom, na mesma legenda (recursos.php). */
.vt-legenda-mais { display: block; margin-top: 8px; }

/* =============================================================================
   3. ENTRADA NO SCROLL — 12 px e 220 ms, uma vez, e só onde faz falta
   =============================================================================
   JUSTIFICATIVA: CRIA CONTINUIDADE. Sem isto o bloco seguinte aparece de
   supetão no meio da rolagem e o leitor perde o lugar na página. NÃO é aplicado
   em texto corrido nem em lista: só nas PEÇAS (captura, moldura, painel), que é
   onde a chegada significa "olhe para cá agora".

   CUIDADO QUE CUSTOU UMA REESCRITA: a regra que apaga o elemento está escopada
   em `body.vt-motion`, e quem coloca essa classe no body é o vitrine.js DEPOIS
   de confirmar que o movimento é permitido. Escrever `opacity:0` solto seria
   apostar a legibilidade da página inteira em um arquivo .js carregar — com o
   script bloqueado, lento ou com erro, metade da vitrine ficaria invisível para
   sempre. Sem JS: tudo aparece; com JS: tudo aparece chegando.
   ============================================================================= */
.vt-page.vt-motion .vt-entra { opacity: 0; transform: translateY(12px); }
.vt-page.vt-motion .vt-entra.dentro { opacity: 1; transform: none; transition: opacity .22s ease, transform .22s ease; }

/* =============================================================================
   4. "UMA TARDE COMUM" — o relógio andando com a rolagem
   =============================================================================
   JUSTIFICATIVA: EXPLICA A FUNCIONALIDADE (uma aula são três chamadas, e existe
   status por linha), MOSTRA RELAÇÃO ENTRE ELEMENTOS (relógio, linha e volume da
   música mudam juntos — que é exatamente a relação que o produto cria), CHAMA
   ATENÇÃO (a rolagem virar o relógio do produto é o gesto que prende) e CRIA
   CONTINUIDADE (é a cena do herói, agora com o tempo na mão do visitante).
   ============================================================================= */
.vt-tarde { position: relative; }
.vt-tarde-trilho { min-height: 235vh; }                 /* o curso da rolagem */
/* 120px e não um número redondo qualquer: `.ds-header` é `position: sticky;
   top: 0` (loja.css:48) e mede 112 px em TODAS as larguras conferidas (400,
   1024 e 1440 px) — o cabeçalho da loja nunca encolhe. Com o `top: 76px` da
   primeira versão, os 36 px de cima do painel ficavam ATRÁS do cabeçalho, e o
   que sumia era justamente o relógio grande, que é o elemento que a seção
   inteira existe para mostrar. 112 + 8 de respiro. */
.vt-tarde-preso { position: sticky; top: 120px; }
.vt-painel {
  background: linear-gradient(180deg, #12101d 0%, #0b0913 100%);
  border: 1px solid var(--vt-line); border-radius: var(--vt-raio-g);
  box-shadow: var(--vt-sombra); padding: 20px 20px 16px; position: relative; overflow: hidden;
}
/* A faixa da música no FUNDO do painel: desce quando uma linha está falando.
   scaleY só — nenhum reflow. */
.vt-painel-fundo {
  position: absolute; left: 0; right: 0; bottom: 0; height: 84px;
  display: flex; align-items: flex-end; gap: 3px; padding: 0 14px;
  opacity: .5; pointer-events: none;
}
.vt-painel-fundo i {
  flex: 1 1 auto; background: var(--vt-musica); border-radius: 2px 2px 0 0;
  transform-origin: bottom; transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.vt-painel > * { position: relative; z-index: 1; }
.vt-painel-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--vt-line-soft); margin-bottom: 6px;
}
.vt-painel-topo .hora {
  font-family: var(--vt-dado); font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 500; color: var(--vt-ink);
  letter-spacing: -.04em; line-height: 1;
}
.vt-painel-topo .rot { font-size: .78rem; color: var(--vt-ink-3); text-align: right; }

.vt-linha {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; align-items: center;
  padding: 15px 0; border-bottom: 1px solid var(--vt-line-soft);
  transition: opacity .3s ease;
}
.vt-linha:last-child { border-bottom: 0; }
.vt-linha.apagada { opacity: .42; }
.vt-linha .h {
  font-family: var(--vt-dado); font-variant-numeric: tabular-nums;
  font-size: .95rem; color: var(--vt-ink-2);
}
.vt-linha .nome { font-size: .95rem; color: var(--vt-ink); font-weight: 500; }
.vt-linha .msg { font-size: .84rem; color: var(--vt-ink-3); margin-top: 3px; line-height: 1.45; }
.vt-linha.tocando .h { color: var(--vt-voz-claro); }

.vt-pill {
  font-family: var(--vt-dado); font-size: .68rem; letter-spacing: .04em;
  padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.05); color: var(--vt-ink-3); border: 1px solid var(--vt-line-soft);
}
.vt-pill.tocando { background: var(--vt-voz-fraco); color: var(--vt-voz-claro); border-color: var(--vt-voz-linha); }
.vt-pill.feito   { background: rgba(46,204,113,.13); color: #5ee39b; border-color: rgba(46,204,113,.32); }
.vt-pill.falhou  { background: rgba(224,85,85,.14); color: #ff8a8a; border-color: rgba(224,85,85,.34); }
.vt-pill.cancelado { background: rgba(224,85,85,.10); color: #e08a8a; border-color: rgba(224,85,85,.24); text-decoration: line-through; }

/* =============================================================================
   5. RÉGUA DE 24 H — hora marcada (esquerda) x intervalo (direita)
   =============================================================================
   JUSTIFICATIVA: EXPLICA A FUNCIONALIDADE. A diferença entre "hora marcada" e
   "a cada tantos minutos" é ESPACIAL: marcas isoladas contra marcas igualmente
   espaçadas. A animação torna isso óbvio em menos de meio segundo, coisa que o
   texto leva um parágrafo para fazer. Uma vez por visita, sem repetir.
   ============================================================================= */
.vt-regua { margin-top: 26px; }
.vt-regua-linha {
  position: relative; height: 46px;
  border-bottom: 1px solid var(--vt-line);
}
.vt-regua-linha b {
  position: absolute; bottom: 0; width: 2px; height: 20px; border-radius: 1px;
  background: var(--vt-voz); transform-origin: bottom;
}
/* O ESTADO ESCONDIDO MORA EM body.vt-motion, NÃO NA REGRA BASE (achado de
   12/09). Antes era `transform: scaleY(0)` solto aqui: com o vitrine.js
   bloqueado, engolido pela rede ou com erro, a classe `.anima` nunca chega e as
   duas réguas de 24 h ficam SEM UMA ÚNICA MARCA — some o gráfico inteiro que
   diferencia hora marcada de intervalo. O bloco de prefers-reduced-motion
   devolvia a visibilidade, o que escondeu o defeito de quem testou só com
   "reduzir movimento" ligado; o par que expõe é JS bloqueado SEM reduced-motion.
   Mesma disciplina do .vt-entra: sem JS tudo aparece, com JS tudo aparece
   chegando. */
.vt-page.vt-motion .vt-regua-linha b { transform: scaleY(0); }
.vt-regua-linha b.alta { height: 34px; }
.vt-regua.anima b { animation: vtMarca .34s cubic-bezier(.2,.9,.3,1) both; }
@keyframes vtMarca { to { transform: scaleY(1); } }
.vt-regua-eixo {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: var(--vt-dado); font-size: .68rem; color: var(--vt-ink-3);
}
.vt-regua-rot {
  position: absolute; bottom: 38px; transform: translateX(-50%);
  font-family: var(--vt-dado); font-size: .7rem; color: var(--vt-voz-claro); white-space: nowrap;
}
/* `.fim` = o rótulo colado na borda direita da régua (o "22:30", em left:93.7%).
   MEDIDO EM 12/09/2026, no navegador, com Azeret Mono carregada:
     360 px → a direita do rótulo fica 0,9 px DENTRO da régua;
     320 px → fica 3,4 px FORA (0,6 px fora com a fonte de reserva).
   Não chega a rolar a página — os 22 px de padding do cartão .vt-troca > div
   absorvem o excesso — mas 0,9 px de folga não é margem, é sorte: basta a fonte
   do Google não carregar, o rótulo virar "22:30 e 23:00" ou o Android renderizar
   meio pixel diferente para o número encostar na borda. Ancorando pela DIREITA
   (translateX(-100%)) o rótulo termina exatamente sobre a marca e a folga passa
   a ser a régua inteira, sem depender de medida nenhuma.
   Só no estreito: acima de 640 px a régua tem folga de sobra e o rótulo
   centralizado sobre a marca lê melhor. */
@media (max-width: 639px) {
  .vt-regua-rot.fim { transform: translateX(-100%); }
}

/* =============================================================================
   6. SINCRONIZAÇÃO — o site à esquerda, o computador da sala à direita
   =============================================================================
   JUSTIFICATIVA: MOSTRA RELAÇÃO ENTRE ELEMENTOS. É a única forma de tornar
   visível uma relação que acontece entre DOIS APARELHOS DIFERENTES, e é
   exatamente o que o texto não consegue provar. Também EXPLICA A FUNCIONALIDADE
   (o que é "aplicado", e por que isso importa).
   ============================================================================= */
.vt-sync { display: grid; grid-template-columns: 1fr 92px 1fr; gap: 0; align-items: center; margin-top: 34px; }
.vt-sync-fio { position: relative; height: 2px; background: var(--vt-line); }
.vt-sync-fio::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--vt-voz), transparent);
  opacity: 0; transform: translateX(-100%);
}
.vt-sync.anda .vt-sync-fio::after { animation: vtFio .7s ease .25s both; }
@keyframes vtFio {
  0%   { opacity: 0; transform: translateX(-100%); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}
/* O selo "até 5 min" é a ÚNICA peça do desenho que informa o prazo de
   sincronização. Ele nascia com `opacity: 0` na regra base e só ganhava
   opacidade DENTRO do keyframe vtSelo — logo, em dois caminhos diferentes ele
   nunca era desenhado: (a) com o vitrine.js bloqueado, porque a classe `.anda`
   nunca chega; (b) com prefers-reduced-motion, porque aquele bloco mata a
   animação com `animation: none !important` e o keyframe era o único lugar que
   devolvia opacidade. O conserto é o mesmo dos demais: o estado escondido passa
   a valer só sob body.vt-motion, que o JS só coloca quando movimento é
   permitido. */
.vt-sync-selo {
  position: absolute; left: 0; top: 50%; margin-top: -13px;
  background: var(--vt-voz-botao); color: #fff; border-radius: 7px;
  font: 500 .66rem/1 var(--vt-dado); padding: 7px 9px; white-space: nowrap;
}
.vt-page.vt-motion .vt-sync-selo { opacity: 0; }
.vt-sync.anda .vt-sync-selo { animation: vtSelo .7s ease .25s both; }
@keyframes vtSelo {
  0%   { opacity: 0; transform: translateX(-46px); }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(46px); }
}
.vt-sync-cx {
  background: var(--vt-surface); border: 1px solid var(--vt-line);
  border-radius: var(--vt-raio); padding: 18px; min-width: 0;
}
.vt-sync-cx .cab {
  font-family: var(--vt-dado); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vt-ink-3); margin: 0 0 14px;
}
.vt-sync-campo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--vt-line); border-radius: 9px; padding: 11px 13px;
  background: rgba(0,0,0,.28);
}
.vt-sync-campo span { font-size: .8rem; color: var(--vt-ink-3); }
.vt-sync-campo b {
  font-family: var(--vt-dado); font-variant-numeric: tabular-nums;
  font-size: 1.02rem; color: var(--vt-ink); font-weight: 500;
}
.vt-sync.anda .vt-sync-campo { border-color: var(--vt-voz); transition: border-color .3s ease; }
.vt-sync-aplicado {
  display: inline-block; margin-top: 12px; font-family: var(--vt-dado); font-size: .66rem;
  padding: 5px 10px; border-radius: 999px; background: rgba(46,204,113,.12);
  color: #5ee39b; border: 1px solid rgba(46,204,113,.3);
}
/* "aplicado neste computador" é o DESFECHO da seção: sem ele a peça conta a
   viagem e não conta a chegada. Escondido só sob vt-motion, pelo mesmo motivo
   do selo. */
.vt-page.vt-motion .vt-sync-aplicado { opacity: 0; }
.vt-sync.anda .vt-sync-aplicado { animation: vtSurge .3s ease .98s forwards; }

/* =============================================================================
   7. A CENA DO CANCELAMENTO — cancelar UMA linha mexe nas OUTRAS
   =============================================================================
   JUSTIFICATIVA: MOSTRA RELAÇÃO ENTRE ELEMENTOS — o ponto inteiro desta seção é
   que cancelar a chamada das 18:30 cancela as pendentes do MESMO evento.
   Estático, isso vira uma frase que ninguém acredita. E EXPLICA A
   FUNCIONALIDADE, que é a mais difícil de contar por texto.
   ============================================================================= */
.vt-cena { position: relative; }
.vt-cena-caixa {
  background: #15121f; border: 1px solid var(--vt-voz-linha); border-radius: var(--vt-raio);
  padding: 16px 18px; margin-top: 12px;
}
/* SEM JS a caixa é conteúdo empilhado, não uma gaveta escondida. Ela carrega o
   texto sugerido ("A aula de Spinning das 18:30 não vai acontecer hoje") e os
   dois botões — ou seja, a demonstração inteira da seção. Antes ela nascia em
   `translateY(112%); opacity: 0` na regra base e só a classe `.passo2` (posta
   pelo JS) a trazia: script bloqueado, seção vazia. Agora a posição absoluta e
   o estado escondido só existem sob body.vt-motion, que é exatamente quando o
   JS vai rodar e trazê-la. */
.vt-page.vt-motion .vt-cena-caixa {
  position: absolute; left: 12px; right: 12px; bottom: 12px; margin-top: 0;
  box-shadow: 0 -14px 40px rgba(0,0,0,.5);
  transform: translateY(112%); opacity: 0;
}
.vt-page.vt-motion .vt-cena.passo2 .vt-cena-caixa { transform: none; opacity: 1; transition: transform .42s cubic-bezier(.3,.9,.3,1) .1s, opacity .3s ease .1s; }
.vt-cena-caixa p { margin: 0 0 12px; font-size: .88rem; color: var(--vt-ink-2); }
.vt-cena-caixa .sugerido {
  background: rgba(0,0,0,.35); border: 1px solid var(--vt-line); border-radius: 9px;
  padding: 11px 13px; font-size: .88rem; color: var(--vt-ink); margin: 0 0 12px;
}
.vt-cena-saidas { display: flex; gap: 9px; flex-wrap: wrap; }
/* "Ver de novo" só existe quando há o que rever. Sem JS ele não fazia nada — e
   botão morto é exatamente o que o dono proibiu. Agora ele aparece na mesma
   condição em que a cena anima (body.vt-motion, posto pelo vitrine.js); o
   bloco de reduced-motion já o escondia pelo mesmo motivo. */
.vt-denovo { display: none; }
.vt-page.vt-motion .vt-denovo {
  display: inline-block;
  background: transparent; border: 1px solid var(--vt-line); color: var(--vt-ink-2);
  border-radius: 9px; padding: 9px 15px; min-height: 40px;
  font: 500 .82rem/1 var(--vt-texto); cursor: pointer; margin-top: 16px;
}
.vt-denovo:hover { color: #fff; border-color: var(--vt-voz); }

/* =============================================================================
   8. BARRA DE USO DAS VOZES AI
   =============================================================================
   JUSTIFICATIVA: CHAMA ATENÇÃO para o único elemento da seção que representa
   DINHEIRO DO CLIENTE — é isso que faz o visitante ler o parágrafo do lado.
   Nenhuma outra animação existe nesta seção.
   ============================================================================= */
.vt-uso { margin-top: 18px; }
.vt-uso-cab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--vt-dado); font-size: .74rem; color: var(--vt-ink-3); margin-bottom: 9px;
}
.vt-uso-cab b { color: var(--vt-ink); font-weight: 500; }
.vt-uso-trilho { height: 9px; border-radius: 5px; background: rgba(255,255,255,.06); overflow: hidden; }
.vt-uso-trilho i {
  display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--vt-voz), var(--vt-voz-claro));
  transform: scaleX(0); transform-origin: left;
}
.vt-uso.anima .vt-uso-trilho i { transition: transform .6s cubic-bezier(.3,.9,.3,1); transform: scaleX(var(--pct, 0)); }
.vt-uso-limite { position: relative; height: 16px; margin-top: 6px; }
.vt-uso-limite b {
  position: absolute; top: 0; transform: translateX(-50%);
  font-family: var(--vt-dado); font-size: .66rem; color: var(--vt-alerta); white-space: nowrap;
}
/* MEDIDO a 360 px em 12/09: este rotulo e absoluto, centrado em left: 80% e com
   white-space: nowrap — 206 px de texto centrados num trilho de 282 px saem
   17 px para fora da TELA, e a pagina inteira ganha rolagem horizontal por
   causa de uma legenda. Abaixo de 640 px ele deixa de flutuar sobre o ponto e
   vira uma linha ancorada a direita: perde a precisao de apontar o 80% exato,
   que numa barra de 282 px ninguem le mesmo, e devolve a pagina inteira.
   Elemento absoluto com nowrap e a causa mais comum de vazamento horizontal
   que nenhuma media query de grade resolve. */
@media (max-width: 639px) {
  .vt-uso-limite { height: auto; }
  .vt-uso-limite b {
    position: static; transform: none; display: block;
    text-align: right; white-space: normal;
  }
}

/* =============================================================================
   9. "O QUE ELE NÃO FAZ" — ficha técnica confiante, e NENHUMA animação
   =============================================================================
   JUSTIFICATIVA DA AUSÊNCIA: esta é a seção onde qualquer movimento reduziria a
   credibilidade. A regra do dono diz que animação que não serve a uma das cinco
   razões não entra — aqui nenhuma serve, e a quietude é o próprio sinal de que
   a seção é para ser LIDA, não admirada. Sem ícone de alerta, sem cor de erro:
   o tom é ficha técnica, não aviso legal.
   ============================================================================= */
.vt-limites { margin: 34px 0 0; display: grid; gap: 0; }
.vt-limite {
  display: grid; grid-template-columns: 46px 1fr; gap: 18px;
  padding: 22px 0; border-top: 1px solid var(--vt-line-soft);
}
.vt-limite > b {
  font-family: var(--vt-dado); font-size: .82rem; font-weight: 500;
  color: var(--vt-ink-3); padding-top: 3px;
}
.vt-limite h3 { font-size: 1.02rem; margin: 0 0 7px; }
.vt-limite p { margin: 0; font-size: .92rem; color: var(--vt-ink-2); max-width: 70ch; }

/* =============================================================================
   10. COMPARAÇÃO DE ABORDAGEM (a troca que ninguém quer fazer)
   ============================================================================= */
.vt-troca { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }

/* AS TRÊS VARIAÇÕES DE .vt-troca MORAM AQUI, E NÃO NO style= DA PÁGINA.
   Medido no navegador em 12/09, a 360 px: a home tinha 66 px de rolagem
   horizontal e a cena de cancelamento ficava metade fora da tela. A regra que
   colapsa tudo para uma coluna existe (@media max-width: 991px) e estava
   CERTA — só que quatro blocos da home declaravam grid-template-columns no
   atributo style=, e estilo inline vence media query por especificidade.
   A media query não tinha como ganhar dessas quatro linhas.
   Regra geral que fica: layout em atributo style= é layout que não responde.
   Variação de grade vira classe; style= fica para o que não muda com a
   largura (uma margem, um alinhamento). */
/* O e-mail de contato (divisionstoretecnologia@gmail.com) e uma PALAVRA de 33
   caracteres sem espaco. Item de grid tem min-width: auto, entao o cartao nao
   podia encolher abaixo da largura dessa palavra: medido a 360 px, o cartao
   saia com 347 px dentro de uma coluna de 328 e a pagina de suporte ganhava
   rolagem horizontal. O min-width: 0 deixa o cartao encolher e o
   overflow-wrap manda a palavra quebrar em vez de empurrar a caixa.
   Escopado em .vt-page: as telas .ds-* nao mudam. */
.vt-page .vt-cartao { min-width: 0; }
.vt-page .vt-cartao h3, .vt-page .vt-cartao a { overflow-wrap: anywhere; }

.vt-troca-texto-peca { grid-template-columns: 1fr 1.05fr; gap: 44px; align-items: start; }
.vt-troca-tres       { grid-template-columns: 1fr 1fr 1fr; }
.vt-troca-peso       { grid-template-columns: 1.1fr .9fr; align-items: center; }
.vt-troca > div {
  border: 1px solid var(--vt-line); border-radius: var(--vt-raio); padding: 22px 22px 20px;
  background: var(--vt-surface);
}
.vt-troca > div.nosso { border-color: var(--vt-voz-linha); background: linear-gradient(180deg, rgba(139,92,246,.06), transparent 60%), var(--vt-surface); }
.vt-troca h3 { font-size: 1.04rem; margin: 0 0 10px; }
.vt-troca p { margin: 0; color: var(--vt-ink-2); font-size: .93rem; }
.vt-troca .cab {
  font-family: var(--vt-dado); font-size: .67rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vt-ink-3); margin: 0 0 12px;
}
.vt-troca .nosso .cab { color: var(--vt-voz-claro); }

/* A fronteira jurídica: destaque discreto, não caixa de alerta. */
.vt-fronteira {
  margin-top: 26px; padding: 18px 20px; border-left: 2px solid var(--vt-voz);
  background: linear-gradient(90deg, rgba(139,92,246,.07), transparent 70%);
  border-radius: 0 var(--vt-raio) var(--vt-raio) 0;
  color: var(--vt-ink-2); font-size: .93rem; max-width: 76ch;
}
.vt-fronteira b { color: var(--vt-ink); }

/* Linhas de apoio sem ícone genérico: um traço mono e a frase. */
.vt-apoios { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 13px; }
.vt-apoios li {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px;
  font-size: .93rem; color: var(--vt-ink-2); max-width: 78ch;
}
.vt-apoios li::before {
  content: "—"; font-family: var(--vt-dado); color: var(--vt-voz); font-size: .8rem; line-height: 1.6;
}

/* =============================================================================
   11. PÁGINA DE RECURSOS — problema / como funciona / exemplo / benefício
   ============================================================================= */
.vt-recurso { padding: 56px 0; border-top: 1px solid var(--vt-line-soft); }
.vt-recurso:first-of-type { border-top: 0; padding-top: 0; }
.vt-recurso-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.vt-recurso-grade.invertida > :first-child { order: 2; }
/* `solo`: o item que ainda NÃO tem captura atual. Em vez de preencher a metade
   vazia com um cartão de ícone genérico (que é o que o dono chamou de
   "superficial"), o texto ocupa a largura de leitura e a coluna some. Quando a
   captura for refeita na versão publicada, tira-se o `solo` e ela entra. */
.vt-recurso-grade.solo { grid-template-columns: minmax(0, 78ch); }
.vt-bloco { margin-top: 22px; }
.vt-bloco > b {
  display: block; font-family: var(--vt-dado); font-size: .67rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vt-ink-3); margin-bottom: 7px;
}
.vt-bloco p { margin: 0; color: var(--vt-ink-2); font-size: .94rem; max-width: 62ch; }
.vt-bloco.exemplo p {
  color: var(--vt-ink); border-left: 2px solid var(--vt-voz); padding-left: 14px;
}
.vt-bloco.beneficio > b { color: var(--vt-voz-claro); }
.vt-bloco.beneficio p { color: var(--vt-ink); }

/* Índice da página de recursos: navegação mono, colada no topo. */
.vt-indice {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px;
}
.vt-indice a {
  font-family: var(--vt-dado); font-size: .74rem; text-decoration: none;
  padding: 9px 14px; border-radius: 999px; border: 1px solid var(--vt-line);
  color: var(--vt-ink-2); min-height: 38px; display: inline-flex; align-items: center;
}
.vt-indice a:hover { border-color: var(--vt-voz); color: #fff; background: var(--vt-surface); }

/* =============================================================================
   12. PLANOS — elevação no foco/hover. Preço NÃO se mexe na tela.
   =============================================================================
   JUSTIFICATIVA: MELHORA A PERCEPÇÃO DE QUALIDADE e sinaliza que o cartão é
   clicável. 2 px e 120 ms; nada mais. Número de dinheiro que se move sozinho
   parece contagem regressiva de promoção — o oposto do que queremos aqui.
   ============================================================================= */
.vt-page .vt-plano { transition: transform .12s ease, border-color .12s ease; }
.vt-page .vt-plano:hover, .vt-page .vt-plano:focus-within { transform: translateY(-2px); }

/* ALVO DE TOQUE. Medido em 12/09/2026: `.vt-btn.pequeno` fechava em 37 px de
   altura, e ele é um LINK de verdade na página de suporte e nos cartões de
   ajuda — dedo grande em botão pequeno erra, e quem erra num site de suporte
   desiste. 44 px é o alvo confortável recomendado; o botão continua parecendo
   pequeno porque o que muda é a caixa, não a tipografia. */
.vt-page .vt-btn { min-height: 44px; }

/* Uma decisão, não quatro produtos: o seletor "com/sem atendimento prioritário". */
.vt-escolha {
  display: inline-flex; gap: 4px; padding: 4px; margin-top: 26px;
  background: var(--vt-surface); border: 1px solid var(--vt-line); border-radius: 999px;
}
.vt-escolha button {
  border: 0; background: transparent; color: var(--vt-ink-2); cursor: pointer;
  border-radius: 999px; padding: 10px 18px; min-height: 42px;
  font: 500 .87rem/1 var(--vt-texto); transition: background .12s ease, color .12s ease;
}
.vt-escolha button[aria-pressed="true"] { background: var(--vt-voz-botao); color: #fff; font-weight: 700; }
/* `display:flex` de .vt-plano e `display:inline-flex` de .vt-escolha VENCEM o
   display:none que o atributo [hidden] traz por padrão — o cartão escondido
   continuaria na tela. Esta regra devolve ao [hidden] o poder que o HTML lhe
   promete, e é ela que faz o seletor "com/sem suporte" funcionar. */
.vt-page [hidden] { display: none !important; }

/* Recado do limite dentro do cartão — no cartão, nunca no rodapé. */
.vt-plano-limite {
  font-family: var(--vt-dado); font-size: .7rem; color: var(--vt-ink-3);
  border-top: 1px dashed var(--vt-line); padding-top: 12px; margin: 0;
}

/* =============================================================================
   13. FECHAMENTO — o arco que começou na abertura
   =============================================================================
   JUSTIFICATIVA: CRIA CONTINUIDADE. É o MESMO elemento da abertura (a faixa
   cinza e a barra da voz), não um enfeite novo: sem ele o fim da página não
   pertence ao começo. Um pulso, 800 ms, uma vez só.
   ============================================================================= */
.vt-arco { position: relative; height: 52px; margin: 0 0 30px; display: flex; align-items: flex-end; gap: 4px; }
.vt-arco i { flex: 1 1 auto; background: var(--vt-musica); border-radius: 2px; height: 100%; opacity: .55; }
.vt-arco b {
  position: absolute; left: 50%; bottom: 0; width: 8px; margin-left: -4px; border-radius: 3px;
  background: var(--vt-voz); height: 100%; transform: scaleY(.12); transform-origin: bottom;
}
.vt-arco.pulsa b { animation: vtPulso .8s cubic-bezier(.3,.9,.3,1) both; }
@keyframes vtPulso { 0% { transform: scaleY(.12); } 45% { transform: scaleY(1); } 100% { transform: scaleY(.35); } }

/* =============================================================================
   14. ACORDEÃO — a única altura animada do site
   =============================================================================
   JUSTIFICATIVA: CRIA CONTINUIDADE. O corte seco do <details> faz o conteúdo
   abaixo saltar e o leitor perde o lugar na página. 180 ms é o mínimo que o olho
   lê como "abriu" em vez de "piscou". É gesto único do visitante, não laço:
   animar altura aqui custa um reflow por clique, e não sessenta por segundo.
   ============================================================================= */
.vt-page .vt-faq details > *:not(summary) { will-change: auto; }
.vt-page .vt-faq details[open] > *:not(summary) { animation: vtAbre .18s ease; }
@keyframes vtAbre { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* =============================================================================
   15. FAIXA SUPERIOR NO CELULAR (achado: o argumento mais forte sumia < 768 px)
   =============================================================================
   A barra do cabeçalho carrega "30 dias de teste grátis" e tinha d-none
   d-md-block: em 360 px o melhor argumento da oferta simplesmente não existia.
   A classe .ds-topbar-sia (só nas páginas do SIA) devolve a barra ao celular,
   empilhada e menor — sem tocar no .ds-topbar da loja de peças.
   ============================================================================= */
.ds-topbar-sia { display: block; }
.ds-topbar-sia .container { flex-wrap: wrap; gap: 2px 14px; }
@media (max-width: 767px) {
  .ds-topbar-sia .container { justify-content: center !important; text-align: center; }
  .ds-topbar-sia .so-desktop { display: none; }
}

/* =============================================================================
   RESPONSIVO — 360 px é o alvo, não o resto
   =============================================================================
   Conferido em 360, 390, 768, 1024 e 1440. Nada rola na horizontal: a única
   peça larga (a régua e a tabela de ficha) rola dentro do próprio quadro.
   ============================================================================= */
@media (max-width: 991px) {
  /* as tres variacoes tambem colapsam: ver o comentario em .vt-troca */
  .vt-troca-texto-peca, .vt-troca-tres, .vt-troca-peso { grid-template-columns: 1fr; gap: 22px; }
  /* A ORDEM DO CELULAR: marca e H1, depois a DEMONSTRAÇÃO, e só então o
     parágrafo e os botões. Quem chega de busca vê o que o produto faz antes de
     ler qualquer coisa — que é o motivo de a peça existir. */
  .vt-heroi2 { grid-template-columns: 1fr; grid-template-areas: "topo" "palco" "resto"; row-gap: 24px; }
  .vt-heroi2::before { inset: -10% -10% 40% -10%; }
  .vt-sync { grid-template-columns: 1fr; gap: 0; }
  .vt-sync-fio { height: 58px; width: 2px; margin: 0 auto; background: var(--vt-line); }
  .vt-sync-fio::after { background: linear-gradient(180deg, transparent, var(--vt-voz), transparent); }
  .vt-sync.anda .vt-sync-fio::after { animation: vtFioV .7s ease .25s both; }
  @keyframes vtFioV {
    0% { opacity: 0; transform: translateY(-100%); } 20% { opacity: 1; }
    80% { opacity: 1; } 100% { opacity: 0; transform: translateY(100%); }
  }
  .vt-sync-selo { left: 50%; top: 0; margin: 0 0 0 -46px; }
  .vt-sync.anda .vt-sync-selo { animation: vtSeloV .7s ease .25s both; }
  @keyframes vtSeloV {
    0% { opacity: 0; transform: translateY(-8px); } 18% { opacity: 1; }
    82% { opacity: 1; } 100% { opacity: 0; transform: translateY(42px); }
  }
  .vt-recurso-grade { grid-template-columns: 1fr; gap: 26px; }
  .vt-recurso-grade.invertida > :first-child { order: 0; }
  .vt-troca { grid-template-columns: 1fr; }
  /* O cabeçalho mede os mesmos 112 px no celular (medido em 400 px), então o
     recuo do sticky não muda; o que encolhe é o curso da rolagem, para a seção
     não prender o dedo por duas telas e meia. */
  .vt-tarde-trilho { min-height: 175vh; }
}
@media (max-width: 639px) {
  .vt-palco { padding: 13px; }
  .vt-palco canvas { height: 92px; }
  .vt-palco-topo .hora { font-size: 1.25rem; }
  /* As três fontes em linha rolável: empilhar comeria a primeira dobra inteira,
     e a peça precisa caber junto com o H1 e os botões. A rolagem é DA TIRA,
     nunca da página. */
  .vt-fontes {
    display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 4px;
    /* a rolagem e DA TIRA, nunca da pagina: sem min-width: 0 ela declara a
       largura dos tres cartoes somados e empurra o palco (ver .vt-palco) */
    min-width: 0;
  }
  .vt-fontes > * { flex: 0 0 46%; scroll-snap-align: start; }
  .vt-linha { grid-template-columns: 52px 1fr; gap: 10px; padding: 13px 0; }
  .vt-linha .vt-pill { grid-column: 2; justify-self: start; margin-top: 7px; }
  .vt-painel { padding: 16px 15px 12px; }
  .vt-limite { grid-template-columns: 34px 1fr; gap: 12px; padding: 18px 0; }
  /* O seletor precisa dos MESMOS dois níveis de .vt-page.vt-motion para vencer
     a regra de cima (0,3,0). No celular a caixa nunca é gaveta: 112% de um
     elemento absoluto sobre um painel curto sai da tela. */
  .vt-page.vt-motion .vt-cena-caixa { position: static; transform: none; opacity: 1; margin-top: 12px; box-shadow: none; }
  .vt-intro-faixa { height: 28px; }
  .vt-marca img { width: 38px; height: 38px; }
  .vt-indice a { font-size: .7rem; padding: 8px 12px; }
}

/* =============================================================================
   PREFERS-REDUCED-MOTION — o site continua INTEIRO e utilizável
   =============================================================================
   Sem abertura, sem entrada animada, sem scroll preso, sem pulso. O que o
   movimento explicava passa a ser explicado por um QUADRO PARADO no instante
   que importa (o da fala) mais a legenda impressa. Nada de conteúdo depende de
   animação para aparecer — é por isso que .vt-entra volta a ser visível aqui em
   vez de ficar em opacity 0 esperando um observador que não vai rodar.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .vt-page.vt-motion .vt-entra { opacity: 1 !important; transform: none !important; transition: none !important; }
  .vt-intro { display: none !important; }
  .vt-tarde-trilho { min-height: 0; }
  .vt-tarde-preso { position: static; }
  .vt-painel-fundo i { transition: none !important; }
  .vt-regua.anima b, .vt-arco.pulsa b, .vt-intro-faixa i, .vt-intro-voz,
  .vt-sync.anda .vt-sync-fio::after, .vt-sync.anda .vt-sync-selo,
  .vt-sync.anda .vt-sync-aplicado, .vt-page .vt-faq details[open] > *:not(summary) {
    animation: none !important;
  }
  /* CINTO E SUSPENSÓRIO (12/09, achado do selo "até 5 min").
     Os estados escondidos agora moram em `.vt-page.vt-motion`, e o vitrine.js
     só põe `vt-motion` quando REDUZ é falso — então, no caminho normal, este
     bloco nem precisaria devolver visibilidade. Ele continua aqui por um caso
     real: o visitante que LIGA "reduzir movimento" no sistema com a página já
     aberta. matchMedia foi lido uma vez no carregamento, `vt-motion` continua
     no body, e sem estas regras a régua, o selo, a etiqueta "aplicado" e a
     caixa de cancelamento ficariam escondidos para sempre. Daí a especificidade
     casada (.vt-page.vt-motion) e o !important: (0,3,x) contra (0,3,x) é
     empate, e empate se resolve pela ordem — que eu não quero depender. */
  .vt-page.vt-motion .vt-regua-linha b { transform: scaleY(1) !important; }
  .vt-arco b { transform: scaleY(1); }
  .vt-page.vt-motion .vt-sync-selo,
  .vt-page.vt-motion .vt-sync-aplicado { opacity: 1 !important; transform: none !important; }
  .vt-uso.anima .vt-uso-trilho i { transition: none; }
  .vt-uso .vt-uso-trilho i { transform: scaleX(var(--pct, 0)); }
  .vt-page.vt-motion .vt-cena-caixa {
    position: static !important; transform: none !important; opacity: 1 !important;
    margin-top: 14px; box-shadow: none;
  }
  /* !important porque `.vt-page.vt-motion .vt-denovo` (0,3,0) venceria (0,1,0)
     no caso de o visitante ligar "reduzir movimento" com a página já aberta. */
  .vt-denovo { display: none !important; }
  .vt-page .vt-plano:hover { transform: none; }
  /* O monitor reto e parado, como no celular (14/09/2026). !important pela mesma
     razão dos de cima: quem liga "reduzir movimento" com a página aberta ainda
     tem as variáveis de inclinação escritas pelo vitrine.js, e a regra base do
     .vt-monitor as leria. `.antes`/`.revela` não deviam existir aqui (a abertura
     não roda), mas se existirem o monitor aparece, não fica apagado. */
  .vt-monitor { transform: none !important; transition: none !important; }
  .vt-palco3d.antes, .vt-palco3d.revela { opacity: 1 !important; animation: none !important; }
  .vt-palco3d.revela .vt-monitor-entra { animation: none !important; }
}