/* ==========================================================================
   LAVYTIER — vanguard.css

   Sete faixas alternando preto e branco, sem nenhum cinza em superfície
   grande. Cada seção responde a uma pergunta e nenhuma repete a anterior.

   Duas peças carregam a identidade e reaparecem com funções diferentes: a
   linha com marcas (instrumento do hero, depois linha do tempo do protocolo)
   e a célula cercada por fios (placa de especificação, régua, condições).

   Regras da casa: tokens do core; reset em :where(); anima-se transform e
   opacity e nada mais; animação infinita pausa fora da tela; efeito de
   ponteiro só sob (hover: hover).
   ========================================================================== */

.vg-root {
  --vg-tx:   #FFFFFF;
  --vg-soft: #A0A0A0;
  --vg-mute: #646464;
  --vg-ln:   rgba(255, 255, 255, .12);
  --vg-fio:  rgba(0, 0, 0, .10);

  font-family: var(--font);
  color: var(--graphite);
  background: var(--paper);
  line-height: 1.55;
}

.vg-root > section {
  position: relative;
  contain: layout paint style;
  padding-block: 132px;
}
@media (max-width: 1024px) { .vg-root > section { padding-block: 88px; } }
@media (max-width: 768px)  { .vg-root > section { padding-block: 64px; } }

.vg-root :where(h1, h2, h3) { margin: 0; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.vg-root :where(p)          { margin: 0; max-width: 62ch; }
.vg-root :where(ul, ol)     { margin: 0; padding: 0; list-style: none; }
.vg-root :where(a)          { text-decoration: none; color: inherit; }

.vg-wrap {
  width: 100%; max-width: var(--shell);
  margin-inline: auto; padding-inline: var(--gutter);
}

.vg-eyebrow {
  display: block; margin-bottom: 20px;
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--slate);
}

.vg-cabeca { max-width: 48ch; margin-bottom: 72px; }
.vg-cabeca h2 {
  font-size: clamp(28px, 3.5vw, 46px); line-height: 1.12;
  letter-spacing: -.034em; text-wrap: balance;
}
.vg-cabeca p {
  margin-top: 26px;
  font-size: 16px; line-height: 1.75; font-weight: 300; color: var(--slate);
  text-wrap: pretty;
}
.vg-cabeca--centro { max-width: 40ch; margin-inline: auto; text-align: center; }
.vg-cabeca--centro p { margin-inline: auto; }
.vg-cabeca--claro h2 { color: var(--vg-tx); }
.vg-cabeca--claro p  { color: var(--vg-soft); }
.vg-cabeca--claro .vg-eyebrow { color: var(--vg-mute); }

/* ---------- entrada ----------
   O bloco NASCE VISÍVEL. A ocultação só passa a valer depois que o script
   assume o controle. Animação é acréscimo, nunca condição para o conteúdo
   existir — escrever opacity:0 direto no seletor já deixou esta página
   inteira em branco uma vez. */
.vg-root.vg-anima [data-vg-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.vg-root.vg-anima [data-vg-reveal].vg-visto { opacity: 1; transform: none; }

/* ==========================================================================
   BOTÕES
   ========================================================================== */

.vg-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }
.vg-acoes--centro { justify-content: center; }

.vg-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 26px;
  border: 1px solid transparent; border-radius: var(--r-2);
  font: 600 13.5px/1 var(--font); white-space: nowrap; cursor: pointer;
  transition: transform var(--t-tap) var(--ease),
              background-color var(--t-state) var(--ease),
              border-color var(--t-state) var(--ease),
              color var(--t-state) var(--ease);
}
.vg-btn:hover { transform: translateY(-2px); }

.vg-btn-escuro { background: var(--ink); color: var(--paper); }
.vg-btn-escuro:hover { background: var(--graphite); }
.vg-btn-claro  { background: var(--paper); color: var(--ink); }
.vg-btn-claro:hover { background: var(--cloud); }
.vg-btn-linha  { color: var(--ink); border-color: rgba(0, 0, 0, .45); }
.vg-btn-linha:hover { border-color: var(--ink); background: rgba(0, 0, 0, .04); }

/* Sobre preto o contorno inverte — escrito por contexto, para a marcação
   não precisar saber em que fundo está. */
.vg-hero .vg-btn-linha, .vg-dif .vg-btn-linha,
.vg-investimento .vg-btn-linha, .vg-fecho .vg-btn-linha {
  color: var(--vg-tx); border-color: rgba(255, 255, 255, .34);
}
.vg-hero .vg-btn-linha:hover, .vg-dif .vg-btn-linha:hover,
.vg-investimento .vg-btn-linha:hover, .vg-fecho .vg-btn-linha:hover {
  border-color: var(--vg-tx); background: rgba(255, 255, 255, .08);
}

.vg-micro { margin-top: 22px; font-size: 12.5px; line-height: 1.6; color: var(--slate); }

/* ==========================================================================
   HERO
   ========================================================================== */

.vg-root .vg-hero {
  display: flex; align-items: center;
  min-height: 92svh;
  padding: calc(var(--nav-h) + 104px) 0 104px;
  overflow: hidden;
  background: var(--ink); color: var(--vg-tx);
}
/* O empilhamento e as medidas de tela pequena moram no bloco DISPOSITIVOS,
   no fim do arquivo. Duas fontes de verdade para a mesma peça é como bug
   nasce. */

/* Mesma caixa do .vg-wrap — largura do shell, centrada, com o recuo lateral
   da casa. O espaço do instrumento sai de um padding à direita, e não de uma
   margem calculada com 100vw: era assim que o texto do hero nascia 8px
   fora da coluna de todas as outras seções. */
.vg-hero-texto {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--shell);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: max(var(--gutter), 42%);
}

.vg-hero .vg-eyebrow { color: var(--vg-mute); }
.vg-hero h1 {
  font-size: clamp(34px, 4.9vw, 60px); line-height: 1.04;
  letter-spacing: -.042em; color: var(--vg-tx); text-wrap: balance;
}
/* A segunda frase recua em tom, não em corpo nem em família. */
.vg-hero h1 em { display: block; margin-top: .14em; font-style: normal; color: var(--vg-mute); }

.vg-lead {
  margin-top: 32px; max-width: 52ch;
  font-size: 16.5px; line-height: 1.78; font-weight: 300; color: var(--vg-soft);
  text-wrap: pretty;
}
.vg-hero .vg-micro { color: rgba(255, 255, 255, .48); }

/* O instrumento. Máscara em gradiente para ele nascer do fundo em vez de
   terminar numa borda — mesmo recurso do hero do Orys. */
/* O instrumento fecha na mesma borda direita do conteúdo — a coluna que
   todas as seções usam. Antes ele sangrava 6% para fora e o anel externo
   aparecia cortado pela beira da tela: leitura de imagem mal enquadrada, não
   de peça que continua além da moldura.

   A largura sai do menor entre a altura útil e a largura livre à direita do
   texto, para o círculo nunca disputar espaço com a leitura nem estourar
   verticalmente. */
.vg-hero-art {
  position: absolute; z-index: 0;
  right: max(calc((100% - var(--shell)) / 2 + var(--gutter)), var(--gutter));
  top: 50%; transform: translateY(-50%);
  width: min(76svh, 46%); max-width: 720px;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 30%, #000 100%);
          mask-image: linear-gradient(100deg, transparent 0%, #000 30%, #000 100%);
}
.vg-hero-art canvas { width: 100%; height: 100%; display: block; }

/* ==========================================================================
   RÉGUA DE ESTADO
   Quatro fatos em células cercadas por fios — a mesma moldura da faixa de
   capacidades do Orys. É o único lugar da página onde eles aparecem.
   ========================================================================== */

/* A faixa preta é full-bleed, mas a grade dentro dela usa .vg-wrap — a mesma
   régua de todas as outras seções.

   Antes eu centrava a grade com `calc((100vw - shell) / 2)`, e ela nascia
   40px para fora dos dois lados: 100vw inclui a barra de rolagem, .vg-wrap
   não. Duas formas de centrar a mesma coisa nunca coincidem. */
.vg-regua {
  background: var(--ink); color: var(--vg-tx);
  border-top: 1px solid var(--vg-ln);
}
.vg-regua-grade { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .vg-regua-grade { grid-template-columns: 1fr 1fr; } }

.vg-regua-item {
  padding: 34px 30px 34px 0;
  border-left: 1px solid var(--vg-ln);
  padding-left: 30px;
}
.vg-regua-item:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 860px) {
  .vg-regua-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .vg-regua-item:nth-child(1), .vg-regua-item:nth-child(2) { border-bottom: 1px solid var(--vg-ln); }
}
.vg-regua-item b {
  display: block; margin-bottom: 10px;
  font-size: 34px; font-weight: 300; line-height: 1; letter-spacing: -.045em;
  color: var(--vg-tx); font-variant-numeric: tabular-nums;
}
.vg-regua-item span {
  display: block; max-width: 22ch;
  font-size: 13px; line-height: 1.6; font-weight: 300; color: var(--vg-soft);
}

/* ==========================================================================
   O ESCOPO — placas de especificação

   Antes eram duas listas com marcador redondo: o desenho de qualquer site.
   Agora cada frente é uma placa — numeral em marca d'água no alto, e os
   itens em células cercadas por fios, como a régua. O conteúdo é o mesmo; o
   que muda é ele passar a ter construção.
   ========================================================================== */

.vg-escopo { background: var(--paper); }
.vg-escopo .vg-cabeca { max-width: 56ch; }

.vg-placas { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 900px) { .vg-placas { grid-template-columns: 1fr; gap: 20px; } }

.vg-placa {
  border: 1px solid var(--cloud); border-radius: var(--r-4);
  overflow: hidden;
  background: var(--paper);
}
.vg-placa:nth-child(2) { transition-delay: .08s; }

.vg-placa-topo {
  display: flex; align-items: flex-start; gap: 22px;
  padding: clamp(26px, 2.6vw, 38px);
  border-bottom: 1px solid var(--cloud);
}
.vg-placa-num {
  font-size: 44px; font-weight: 300; line-height: .9; letter-spacing: -.05em;
  color: var(--cloud); flex: none;
}
.vg-placa-topo h3 {
  margin-bottom: 8px;
  font-size: clamp(21px, 2vw, 26px); line-height: 1.15; letter-spacing: -.032em;
}
.vg-placa-topo p { font-size: 14px; line-height: 1.6; font-weight: 300; color: var(--slate); }

/* As células: duas colunas, fios entre elas e nenhum cartão dentro de
   cartão. A grade é desenhada pelas próprias bordas. */
.vg-celulas { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .vg-celulas { grid-template-columns: 1fr; } }

.vg-celula {
  padding: 26px clamp(22px, 2.2vw, 30px);
  border-bottom: 1px solid var(--cloud);
}
.vg-celula:nth-child(odd)  { border-right: 1px solid var(--cloud); }
.vg-celula:nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 520px) {
  .vg-celula:nth-child(odd) { border-right: 0; }
  .vg-celula:nth-last-child(-n+2) { border-bottom: 1px solid var(--cloud); }
  .vg-celula:last-child { border-bottom: 0; }
}
.vg-celula b {
  display: block; margin-bottom: 9px;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.018em; color: var(--ink);
}
.vg-celula span {
  display: block;
  font-size: 13.5px; line-height: 1.65; font-weight: 300; color: var(--slate);
}

/* Uma frase sozinha fechando a seção, em corpo de subtítulo. É a única
   licença tipográfica da página — e existe porque ela é o argumento inteiro
   em duas linhas. */
.vg-assinatura {
  max-width: 44ch; margin: 64px auto 0;
  text-align: center;
  font-size: clamp(18px, 1.9vw, 23px); line-height: 1.42;
  font-weight: 600; letter-spacing: -.028em; color: var(--ink);
  text-wrap: balance;
}

/* ==========================================================================
   A DIFERENÇA ESTRUTURAL
   ========================================================================== */

.vg-dif {
  isolation: isolate; overflow: hidden;
  background: var(--ink); color: var(--vg-tx);
}
.vg-dif .vg-eyebrow { color: var(--vg-mute); }

.vg-dif-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 900px) { .vg-dif-grid { grid-template-columns: 1fr; gap: 20px; } }

.vg-dif-card {
  display: flex; flex-direction: column;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--vg-ln); border-radius: var(--r-4);
  background: rgba(255, 255, 255, .03);
}
.vg-dif-card--nosso {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .06);
  transition-delay: .08s;
}
.vg-dif-tag {
  display: inline-block; align-self: flex-start; margin-bottom: 18px;
  padding: 7px 13px;
  border: 1px solid var(--vg-ln); border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--vg-mute);
}
.vg-dif-tag--forte { border-color: rgba(255, 255, 255, .34); color: var(--vg-tx); }
.vg-dif-card h3 {
  font-size: clamp(21px, 2vw, 27px); line-height: 1.2;
  letter-spacing: -.03em; color: var(--vg-tx);
}
.vg-dif-card p {
  margin-top: auto;
  font-size: 14.5px; line-height: 1.75; font-weight: 300; color: var(--vg-soft);
}
.vg-dif-card--nosso p { color: rgba(255, 255, 255, .86); }

/* ---------- o medidor de carga ----------
   Cada coluna é um site na mesma máquina, subindo e descendo em tempo
   próprio; a sua fatia, em branco, encolhe quando as vizinhas crescem. Tudo
   em scaleY com origem embaixo — altura animada de verdade recalcularia a
   caixa quinze vezes por quadro. */
.vg-medidor { margin: 32px 0 28px; }

.vg-medidor-linha {
  display: flex; align-items: flex-end; gap: 4px;
  height: 104px; padding: 11px;
  border: 1px solid var(--vg-ln); border-radius: var(--r-2);
  background: rgba(255, 255, 255, .03);
}
.vg-medidor-linha i {
  flex: 1; height: 100%;
  border-radius: 2px;
  background: rgba(255, 255, 255, .17);
  transform-origin: bottom;
  transform: scaleY(.4);
  animation: vg-carga var(--t, 3s) var(--ease) var(--d, 0s) infinite alternate;
}
@keyframes vg-carga {
  from { transform: scaleY(.14); }
  to   { transform: scaleY(.94); }
}
/* Prefixado com o pai: .vg-medidor-linha i vale (0,1,1) e venceria uma
   classe sozinha — a fatia branca sairia cinza. */
.vg-medidor-linha .vg-medidor-voce {
  background: var(--vg-tx);
  animation-name: vg-espremido;
}
@keyframes vg-espremido {
  from { transform: scaleY(.66); }
  to   { transform: scaleY(.19); }
}
.vg-medidor--nosso .vg-medidor-linha i {
  background: var(--vg-tx);
  animation: vg-firme 7s var(--ease) infinite;
}
@keyframes vg-firme {
  0%, 100% { transform: scaleY(.965); }
  50%      { transform: scaleY(1); }
}
/* Fora da tela nada corre — quinze animações infinitas rodando no fundo
   competem com a rolagem por linha principal. */
.vg-dif.vg-parado .vg-medidor-linha i { animation-play-state: paused; }

.vg-medidor-legenda {
  display: block; margin-top: 15px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  color: var(--vg-mute);
}
.vg-medidor-legenda em { font-style: normal; color: var(--vg-tx); }

.vg-remate {
  max-width: 44ch; margin: 72px auto 0;
  text-align: center;
  font-size: clamp(18px, 1.9vw, 23px); line-height: 1.42;
  font-weight: 600; letter-spacing: -.028em; color: var(--vg-tx);
  text-wrap: balance;
}

/* ==========================================================================
   O PROTOCOLO — linha do tempo

   Antes: três colunas com um fio em cima, o desenho mais genérico que
   existe. Agora as etapas penduram numa linha só, com marcas sobre ela —
   a mesma peça do hero reaparecendo com outra função. A leitura passa a ser
   temporal, que é exatamente o assunto da seção.
   ========================================================================== */

.vg-protocolo { background: var(--paper); }

.vg-tempo {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px;
  padding-top: 46px;
}
/* A linha. Vai de ponta a ponta e some nas bordas, para não terminar num
   corte duro. */
.vg-tempo::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 82%, transparent 100%);
  opacity: .18;
}
@media (max-width: 900px) {
  .vg-tempo { grid-template-columns: 1fr; gap: 44px; padding-top: 0; }
  .vg-tempo::before { display: none; }
}

.vg-tempo-etapa { position: relative; }
.vg-tempo-etapa:nth-child(2) { transition-delay: .08s; }
.vg-tempo-etapa:nth-child(3) { transition-delay: .16s; }

/* A marca sobre a linha: um traço vertical fino, igual ao do instrumento. */
.vg-tempo-marca {
  position: absolute; top: -46px; left: 0;
  width: 1px; height: 14px; background: var(--ink);
}
@media (max-width: 900px) {
  .vg-tempo-etapa { padding-top: 26px; border-top: 1px solid var(--fio, rgba(0,0,0,.12)); }
  .vg-tempo-marca { display: none; }
}

.vg-tempo-quando {
  display: block; margin-bottom: 16px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--slate);
}
.vg-tempo-etapa strong {
  display: block; margin-bottom: 12px;
  font-size: 18px; font-weight: 600; letter-spacing: -.022em; line-height: 1.3; color: var(--ink);
}
.vg-tempo-etapa p { font-size: 14.5px; line-height: 1.72; font-weight: 300; color: var(--slate); }

/* ==========================================================================
   INVESTIMENTO

   Faixa preta, painel de vidro fino no meio. Sem ancoragem forçada, sem
   segundo botão e sem urgência: quem paga R$188 por mês para não pensar em
   infraestrutura não precisa ser convencido com desconto, precisa ver o
   escopo e a condição.
   ========================================================================== */

.vg-investimento { background: var(--ink); color: var(--vg-tx); }
.vg-investimento .vg-cabeca { margin-bottom: 56px; }

.vg-oferta {
  max-width: 760px; margin-inline: auto;
  padding: clamp(34px, 4vw, 60px) clamp(28px, 4vw, 60px) clamp(28px, 3vw, 44px);
  border: 1px solid var(--vg-ln); border-radius: var(--r-4);
  background: rgba(255, 255, 255, .04);
  text-align: center;
}

.vg-abas {
  display: inline-grid; grid-auto-flow: column; gap: 6px;
  margin-bottom: 52px; padding: 5px;
  border: 1px solid var(--vg-ln); border-radius: var(--r-pill);
}
.vg-abas button {
  padding: 12px 26px;
  border: 0; border-radius: var(--r-pill);
  background: none; cursor: pointer;
  font: 500 13px/1 var(--font); letter-spacing: .01em; color: var(--vg-soft);
  transition: background-color var(--t-state) var(--ease), color var(--t-state) var(--ease);
}
.vg-abas button:hover { color: var(--vg-tx); }
.vg-abas button[aria-pressed="true"] {
  background: var(--paper); color: var(--ink); font-weight: 600;
}
/* O desconto na própria aba: em mono, miúdo e recuado em opacidade. É a
   diferença entre informar uma vantagem e gritar uma promoção — o número
   está lá para quem procura, sem virar selo. */
.vg-abas em {
  margin-left: 3px;
  font-style: normal; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .08em; opacity: .6;
}
.vg-abas button[aria-pressed="true"] em { opacity: .5; }
@media (max-width: 560px) {
  .vg-abas button { display: grid; gap: 5px; justify-items: center; }
  .vg-abas em { margin-left: 0; }
}
/* No celular as abas viram uma barra segmentada de três colunas. A moldura e
   o item marcado precisam da mesma família de forma: moldura de canto reto
   com seleção em pílula é o tipo de detalhe que faz a peça parecer montada
   por duas pessoas diferentes. */
@media (max-width: 560px) {
  .vg-abas {
    display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr);
    width: 100%; border-radius: var(--r-3);
  }
  .vg-abas button { padding: 13px 6px; font-size: 12.5px; border-radius: var(--r-2); }
}

.vg-preco {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  max-width: none;
}
.vg-preco-cifra {
  align-self: flex-start; padding-top: .6em;
  font-size: 20px; font-weight: 300; color: var(--vg-soft);
}
.vg-preco b {
  font-size: clamp(56px, 7vw, 82px); font-weight: 300;
  letter-spacing: -.05em; line-height: .9; color: var(--vg-tx);
  font-variant-numeric: tabular-nums;
}
.vg-preco-por { font-size: 16px; font-weight: 300; color: var(--vg-soft); }

.vg-preco-nota {
  max-width: none; margin-top: 18px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--vg-mute);
}
.vg-oferta .vg-acoes { margin-top: 40px; }

/* As três condições, em células cercadas por fios — a mesma moldura da
   régua e das placas. */
.vg-condicoes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 52px; padding-top: 0;
  border-top: 1px solid var(--vg-ln);
  text-align: left;
}
@media (max-width: 760px) { .vg-condicoes { grid-template-columns: 1fr; } }

.vg-condicoes li {
  padding: 30px 26px 4px;
  border-left: 1px solid var(--vg-ln);
}
.vg-condicoes li:first-child { border-left: 0; padding-left: 0; }
.vg-condicoes li:last-child { padding-right: 0; }
@media (max-width: 760px) {
  .vg-condicoes li { border-left: 0; padding: 26px 0 0; border-top: 1px solid var(--vg-ln); }
  .vg-condicoes li:first-child { border-top: 0; }
}
.vg-condicoes span {
  display: block; margin-bottom: 10px;
  font-size: 13.5px; font-weight: 600; letter-spacing: -.015em; color: var(--vg-tx);
}
.vg-condicoes p { font-size: 12.5px; line-height: 1.65; font-weight: 300; color: var(--vg-soft); }

/* ==========================================================================
   ECOSSISTEMA — faixa clara
   ========================================================================== */

.vg-eco { background: var(--paper); }

.vg-portas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .vg-portas { grid-template-columns: 1fr; } }

.vg-porta {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(28px, 2.8vw, 38px);
  border: 1px solid var(--cloud); border-radius: var(--r-3);
  background: var(--paper);
  transition: border-color var(--t-state) var(--ease);
}
.vg-porta:hover { border-color: var(--slate); }
.vg-porta:nth-child(2) { transition-delay: .07s; }
.vg-porta:nth-child(3) { transition-delay: .14s; }

.vg-porta-nome { font-size: 22px; font-weight: 700; letter-spacing: -.032em; color: var(--ink); }
.vg-porta-desc { font-size: 14px; line-height: 1.7; font-weight: 300; color: var(--slate); }
.vg-porta-ir {
  margin-top: auto;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink);
  transition: transform var(--t-state) var(--ease);
}
.vg-porta:hover .vg-porta-ir { transform: translateX(5px); }

/* A luz que segue o ponteiro é um disco movido por transform, não um
   gradiente reposicionado: mudar a posição de um gradiente repinta o cartão
   inteiro a cada quadro. O vanguard.js interpola o destino. */
@media (hover: hover) and (pointer: fine) {
  .vg-porta::before {
    content: ''; position: absolute; z-index: -1;
    top: 0; left: 0; width: 320px; height: 320px; margin: -160px 0 0 -160px;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(0,0,0,.05), transparent 100%);
    opacity: 0;
    transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0);
    transition: opacity var(--t-state) var(--ease);
  }
  .vg-porta:hover::before { opacity: 1; }
}

/* ==========================================================================
   FECHO
   ========================================================================== */

.vg-fecho { background: var(--ink); color: var(--vg-tx); }
.vg-fecho-inner { max-width: 46ch; margin-inline: auto; text-align: center; }
.vg-fecho .vg-eyebrow { color: var(--vg-mute); }
.vg-fecho h2 {
  font-size: clamp(28px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -.038em;
  color: var(--vg-tx); text-wrap: balance;
}
.vg-fecho p {
  margin: 26px auto 0;
  font-size: 15.5px; line-height: 1.78; font-weight: 300; color: var(--vg-soft);
  text-wrap: pretty;
}

/* ==========================================================================
   DISPOSITIVOS

   Nada aqui é maquiagem de tela pequena: cada bloco corrige algo que foi
   medido quebrado num tamanho real. A ordem é do maior para o menor, e os
   pontos de corte saem do conteúdo — a largura em que uma peça deixa de
   caber —, não de uma tabela de aparelhos.
   ========================================================================== */

/* ---- tablet deitado e telas médias (até 1100px) ----
   As duas placas lado a lado dariam quatro colunas de texto na mesma linha:
   cada célula com ~180px, três palavras por linha. Uma placa por vez
   devolve o texto ao seu ritmo e mantém as células em duas colunas. */
@media (max-width: 1100px) {
  .vg-placas { grid-template-columns: 1fr; gap: 22px; }
  .vg-regua-grade { grid-template-columns: repeat(2, 1fr); }
  .vg-regua-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .vg-regua-item:nth-child(1), .vg-regua-item:nth-child(2) { border-bottom: 1px solid var(--vg-ln); }
  .vg-regua-item:nth-child(3) { border-left: 0; }
}

/* ---- tablet em pé (até 1024px) ----
   O hero deixa de ser duas colunas. Em pé, o instrumento comprimido a 56%
   da largura ficava do tamanho de um ícone ao lado de um texto espremido —
   empilhado, ele volta a ser a peça que é. */
@media (max-width: 1024px) {
  .vg-root .vg-hero {
    min-height: 0; flex-direction: column; align-items: stretch;
    padding: calc(var(--nav-h) + 44px) 0 56px;
  }
  .vg-hero-texto { max-width: 100%; padding-right: var(--gutter); }
  .vg-hero-art {
    position: relative; order: -1; right: auto; top: auto; transform: none;
    width: 100%; max-width: 300px; margin: 0 auto 30px;
    -webkit-mask-image: none; mask-image: none;
  }
  .vg-cabeca { margin-bottom: 56px; }
  .vg-oferta { max-width: 640px; }
}

/* ---- deitado e baixo (tablet na horizontal, notebook curto) ----
   Medido: em 1180×820 o hero fechava com 871px de altura e o botão caía
   abaixo da dobra. A primeira dobra tem de caber inteira na tela — é ela
   que decide se alguém continua rolando. O que cede é o respiro e o corpo
   do título, nunca o conteúdo. */
@media (orientation: landscape) and (max-height: 880px) and (min-width: 1025px) {
  .vg-root .vg-hero {
    min-height: 0;
    padding-top: calc(var(--nav-h) + 60px);
    padding-bottom: 60px;
  }
  .vg-hero h1 { font-size: clamp(30px, 3.9vw, 48px); }
  .vg-lead { margin-top: 24px; font-size: 15.5px; }
  .vg-hero .vg-acoes { margin-top: 28px; }
  .vg-hero-art { width: min(70svh, 48%); }
}

/* ---- telas curtas e deitadas ----
   Celular na horizontal tem ~360px de altura. Um hero de 92svh com o
   instrumento empilhado por cima do texto empurra o botão para fora da
   tela: ninguém rola um hero para achar a ação. Aqui as duas colunas
   voltam, o instrumento encolhe e a altura mínima cai. */
@media (max-height: 620px) and (orientation: landscape) {
  .vg-root .vg-hero {
    flex-direction: row; align-items: center;
    min-height: 0;
    padding: calc(var(--nav-h) + 28px) 0 36px;
  }
  .vg-hero-texto { max-width: 62%; padding-right: var(--gutter); }
  .vg-hero-art {
    position: relative; order: 0; width: 38%; max-width: none; margin: 0 0 0 auto;
  }
  .vg-hero h1 { font-size: clamp(26px, 3.4vw, 38px); }
  .vg-lead { margin-top: 18px; font-size: 15px; }
  .vg-hero .vg-acoes { margin-top: 22px; }
  .vg-hero .vg-micro { margin-top: 14px; }
  .vg-root > section { padding-block: 64px; }
}

/* ---- telas médias-pequenas (até 900px) ----
   Já coberto pelos blocos das peças; aqui fica só o que depende da
   composição inteira. */
@media (max-width: 900px) {
  .vg-cabeca h2 { font-size: clamp(26px, 4.6vw, 36px); }
  .vg-assinatura, .vg-remate { margin-top: 48px; font-size: clamp(18px, 2.6vw, 21px); }
  .vg-medidor-linha { height: 88px; }
}

/* ---- celular (até 620px) ---- */
@media (max-width: 620px) {
  .vg-root > section { padding-block: 56px; }

  /* A primeira dobra precisa terminar dentro da tela: medido em 390×844,
     ela fechava com 964px e o botão nascia embaixo do fim do visor. O que
     cede é o tamanho do instrumento e o respiro entre as peças — o texto
     continua inteiro. */
  .vg-root .vg-hero {
    padding-top: calc(var(--nav-h) + 32px);
    padding-bottom: 44px;
  }
  /* O instrumento é a assinatura da página: encolhido a 190px ele virava um
     selo perdido no meio do preto. Ocupa a largura útil, com teto para não
     empurrar o botão para fora da primeira dobra. */
  .vg-hero-art { width: min(78vw, 320px); max-width: none; margin-bottom: 18px; }
  .vg-hero h1 { font-size: clamp(28px, 8vw, 36px); letter-spacing: -.036em; }
  .vg-hero h1 em { margin-top: .2em; }
  .vg-lead, .vg-cabeca p { font-size: 15px; line-height: 1.72; }
  .vg-hero .vg-lead { margin-top: 22px; }
  .vg-hero .vg-acoes { margin-top: 26px; }
  .vg-hero .vg-micro { margin-top: 16px; }

  /* Botão de largura inteira: o polegar acerta o alvo sem mirar, e duas
     ações lado a lado num telefone viram dois alvos estreitos. */
  .vg-acoes { flex-direction: column; align-items: stretch; gap: 10px; }
  .vg-acoes .vg-btn { width: 100%; justify-content: center; padding: 16px 20px; }
  .vg-btn:hover { transform: none; }

  .vg-regua-grade { grid-template-columns: 1fr; }
  .vg-regua-item {
    padding: 24px 0; border-left: 0; padding-left: 0;
    border-bottom: 1px solid var(--vg-ln);
  }
  .vg-regua-item:last-child { border-bottom: 0; }
  .vg-regua-item b { font-size: 30px; margin-bottom: 6px; }
  .vg-regua-item span { max-width: none; }

  .vg-placa-topo { gap: 16px; padding: 24px; }
  .vg-placa-num { font-size: 34px; }
  .vg-celulas { grid-template-columns: 1fr; }
  .vg-celula { padding: 22px 24px; }
  .vg-celula:nth-child(odd) { border-right: 0; }
  .vg-celula:nth-last-child(-n+2) { border-bottom: 1px solid var(--cloud); }
  .vg-celula:last-child { border-bottom: 0; }

  .vg-dif-card { padding: 26px 22px; }
  /* Quinze colunas em 280px dariam 14px cada com o vão original: o desenho
     vira uma cerca. Vão menor e caixa mais baixa mantêm a leitura. */
  .vg-medidor-linha { height: 76px; gap: 3px; padding: 9px; }
  .vg-medidor { margin: 26px 0 22px; }

  .vg-tempo { gap: 34px; }
  .vg-tempo-etapa { padding-top: 22px; }

  .vg-oferta { padding: 32px 22px 24px; border-radius: var(--r-3); }
  .vg-abas { margin-bottom: 38px; }
  .vg-preco b { font-size: clamp(52px, 15vw, 64px); }
  .vg-oferta .vg-acoes { margin-top: 32px; }
  .vg-condicoes { margin-top: 38px; }

  .vg-porta { padding: 26px 22px; }
  .vg-porta-nome { font-size: 20px; }

  .vg-fecho-inner { max-width: 100%; }
}

/* ---- celular estreito (até 380px) ----
   Aqui o que quebra é a tipografia grande: título, preço e numeral. */
@media (max-width: 380px) {
  .vg-hero h1 { font-size: 27px; }
  .vg-cabeca h2 { font-size: 25px; }
  .vg-preco b { font-size: 50px; }
  .vg-preco-cifra { font-size: 17px; }
  .vg-placa-num { font-size: 30px; }
  .vg-eyebrow { font-size: 10px; letter-spacing: .16em; }
  .vg-btn { font-size: 13px; padding: 15px 18px; }
  .vg-medidor-linha { height: 68px; gap: 2px; }
}

/* ---- alvos de toque ----
   Sem ponteiro, o hover não existe e o que importa é a área que o dedo
   acerta. */
@media (hover: none) and (pointer: coarse) {
  .vg-abas button { padding-block: 15px; }
  .vg-porta { padding-block: 30px; }
}

/* ==========================================================================
   MOVIMENTO REDUZIDO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .vg-medidor-linha i { animation: none; transform: scaleY(.55); }
  .vg-medidor-linha i:nth-child(3n)   { transform: scaleY(.8); }
  .vg-medidor-linha i:nth-child(4n+2) { transform: scaleY(.35); }
  .vg-medidor-linha .vg-medidor-voce  { transform: scaleY(.24); }
  .vg-medidor--nosso .vg-medidor-linha i { transform: scaleY(1); }
}