/* ============================================================================
 * VITRINE — a home e a landing de produto
 * ============================================================================
 * Marcos, 14/09: *"hero no padrão marcup (imagem que enche toda, fica fixa e o
 * conteúdo sobe, o menu no top transparente e fica com cor depois do movimento
 * de rolagem)"* e *"a ideia é escalar para o país inteiro, então capriche"*.
 *
 * As páginas que usam este arquivo chamam `pagina_inicio(..., mainLivre: true,
 * topoSobreFoto: true)`: o `<main>` perde o eixo e cada faixa desenha o seu
 * (`.vt-int`), e a barra do topo vai por cima da foto.
 *
 * Tokens: os do `site.css` (sistema da casa). Nada de cor nova, com uma
 * exceção documentada — o véu do hero, que é escuro nos dois temas porque a
 * FOTO é a mesma nos dois.
 * ============================================================================ */

/* ⚠️ `[hidden]` PRECISA VENCER `display`. Toda classe daqui que declara display
      (os passos do formulário, a lista de cidades) sumiria só no papel sem esta
      regra — o atributo perde para qualquer `display` de classe (memória
      css-display-anula-hidden). */
[hidden] { display: none !important; }

.vt-int { max-width: var(--medida); margin: 0 auto; padding-inline: 1.5rem; }


/* ============================================================================
 * HERO — foto de tela cheia, parada, com o conteúdo subindo por cima
 * ============================================================================
 * É o `.parallax` + `.hero-parallax` do Marcup, com as mesmas três guardas no
 * `background-attachment: fixed` (ver premios.css, `.pr-hero--com-arte`):
 *   · largura ≥ 64rem — abaixo disso a banda é mais alta que larga e o `cover`
 *     sobre a JANELA recorta demais;
 *   · `pointer: fine` — no toque, fundo fixo é repintado a cada pixel de
 *     rolagem no iOS e no Android, e a página engasga;
 *   · `prefers-reduced-motion` — imagem parada com conteúdo deslizando é
 *     movimento, e quem pediu menos movimento pediu isto também.
 * Fora das guardas a foto rola junto: vira uma foto de fundo comum.
 *
 * ⚠️ DUAS FOTOS, e não uma recortada. A do desktop é 16:9 com a pessoa à
 *    direita e o texto à esquerda; a do celular é 3:4 com a pessoa em cima e o
 *    texto embaixo. Uma 16:9 cortada para a tela em pé perderia justo a pessoa.
 *    As variáveis vêm do HTML (`--vt-foto`, `--vt-foto-celular`) para o CSS não
 *    carregar caminho de imagem.
 * ============================================================================ */

.vt-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 94svh;
  padding-block: 7.5rem 3rem;
  color: #fff;
  /* Cor por baixo: a faixa funciona antes de a foto chegar. */
  background-color: #2A0F1A;
  background-image: var(--vt-foto-celular, var(--vt-foto));
  background-size: cover;
  background-position: var(--vt-foco-celular, center top);
  background-repeat: no-repeat;
}

/* O VÉU. No celular é vertical: a foto respira em cima e escurece onde o texto
   mora, embaixo. Escuro FIXO nos dois temas — a foto é a mesma. */
.vt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgb(20 6 12 / .50) 0%,
    rgb(20 6 12 / .18) 26%,
    rgb(20 6 12 / .62) 52%,
    rgb(20 6 12 / .90) 76%,
    rgb(20 6 12 / .94) 100%);
}

@media (min-width: 60rem) {
  .vt-hero {
    align-items: center;
    min-height: 100svh;
    padding-block: 6.5rem 5rem;
    background-image: var(--vt-foto);
    background-position: var(--vt-foco, center);
  }
  /* No desktop o véu é HORIZONTAL: denso do lado do texto, sumindo do lado da
     pessoa. O segundo gradiente escurece só a faixa de cima, onde a barra
     transparente mostra a marca branca. */
  .vt-hero::before {
    background:
      linear-gradient(180deg, rgb(20 6 12 / .45) 0%, rgb(20 6 12 / 0) 22%),
      linear-gradient(90deg,
        rgb(20 6 12 / .92) 0%,
        rgb(20 6 12 / .82) 30%,
        rgb(20 6 12 / .50) 52%,
        rgb(20 6 12 / .16) 74%,
        rgb(20 6 12 / .04) 100%);
  }
}

@media (min-width: 64rem) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .vt-hero, .vt-banda { background-attachment: fixed; }
}

.vt-hero__int { width: 100%; }
.vt-hero__texto { max-width: 39rem; }

.vt-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.vt-kicker::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.vt-hero .vt-kicker, .vt-banda .vt-kicker { color: #F9B8D2; }

.vt-hero h1 {
  margin: 0 0 1.1rem;
  font-family: var(--font-marca);
  font-weight: 800;
  font-size: clamp(2.15rem, 5.6vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  color: #fff;
  text-wrap: balance;
}
.vt-hero h1 em { font-style: normal; color: #F9B8D2; }

.vt-hero__lead {
  max-width: 34rem;
  margin: 0 0 1.5rem;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  color: rgb(255 255 255 / .9);
}

.vt-provas {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.4rem;
}
.vt-provas li {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  color: rgb(255 255 255 / .95);
}
.vt-provas svg { flex: none; color: #F9B8D2; }

.vt-acoes { display: flex; flex-wrap: wrap; gap: .75rem; }

.vt-ancora {
  margin: 1.25rem 0 0;
  font-size: .925rem;
  color: rgb(255 255 255 / .78);
}
/* `nowrap`: preço não se parte. "R$" numa linha e "75" na outra, que o celular
   fazia, lê como dois números. */
.vt-ancora strong { color: #fff; font-weight: 700; white-space: nowrap; }

/* A indicação de que a página continua. Sem ela, um hero de tela cheia parece
   a página inteira — e quem não rola não vê preço nenhum. */
.vt-rolar {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  translate: -50% 0;
  display: none;
  color: rgb(255 255 255 / .75);
  text-decoration: none;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media (min-width: 60rem) { .vt-rolar { display: grid; justify-items: center; gap: .3rem; } }
.vt-rolar:hover { color: #fff; }
.vt-rolar svg { animation: vt-quica 2.2s ease-in-out infinite; }
@keyframes vt-quica { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .vt-rolar svg { animation: none; } }


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

.vt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3.1rem;
  padding: .8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: .8rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.vt-btn:hover { transform: translateY(-1px); }
.vt-btn:disabled { opacity: .7; cursor: progress; transform: none; }

.vt-btn--marca {
  background: var(--color-primary);
  color: var(--color-primary-text);
  box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--color-primary) 75%, transparent);
}
.vt-btn--marca:hover { background: var(--color-primary-hover); color: var(--color-primary-text); }

/* Sobre foto escura: branco com o rosa FIXO, pelo mesmo motivo da barra
   (a primária do tema escuro é clara demais para texto branco). */
.vt-btn--claro { background: #fff; color: #9D174D; box-shadow: 0 16px 34px -18px rgb(0 0 0 / .6); }
.vt-btn--claro:hover { background: #FCE7F0; color: #851140; }

.vt-btn--contorno { background: transparent; color: #fff; border-color: rgb(255 255 255 / .6); }
.vt-btn--contorno:hover { background: rgb(255 255 255 / .12); border-color: #fff; color: #fff; }

.vt-btn--leve { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.vt-btn--leve:hover { background: color-mix(in srgb, var(--color-primary) 9%, transparent); color: var(--color-primary); }

/* Verde escurecido: o #25D366 do WhatsApp tem 1,9:1 com texto branco. */
.vt-btn--zap { background: #0F7A3F; color: #fff; }
.vt-btn--zap:hover { background: #0B6433; color: #fff; }

.vt-btn--largo { width: 100%; }

/* O giro no próprio botão. Só na ação que NÃO repinta região (CLAUDE.md). */
.vt-giro {
  width: 1.05em;
  height: 1.05em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: vt-gira .7s linear infinite;
}
@keyframes vt-gira { to { transform: rotate(360deg); } }


/* ============================================================================
 * SEÇÕES
 * ============================================================================ */

.vt-secao { padding-block: clamp(3.75rem, 8vw, 6.5rem); scroll-margin-top: 4.5rem; }
.vt-secao--cartao { background: var(--color-bg-card); border-block: 1px solid var(--color-border-subtle); }
/* Faixa curta logo depois do hero com formulário: lá os números não sobem por
   cima da foto, porque o cartão do formulário está justo ali embaixo. */
.vt-secao--curta { padding-block: clamp(2rem, 4vw, 3rem) 0; }

.vt-cabeca { max-width: 46rem; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.vt-cabeca--centro { margin-inline: auto; text-align: center; }
.vt-cabeca--centro .vt-kicker::before { display: none; }

.vt-titulo {
  margin: 0 0 .9rem;
  font-family: var(--font-marca);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.8vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -.028em;
  color: var(--color-text);
  text-wrap: balance;
}
.vt-sub { max-width: 42rem; margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--color-text-muted); }
.vt-cabeca--centro .vt-sub { margin-inline: auto; }

/* ---- os números que sobem por cima do hero ------------------------------ */
.vt-numeros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 1.1rem;
  box-shadow: 0 30px 60px -40px rgb(0 0 0 / .45);
}
@media (min-width: 60rem) {
  .vt-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* O conteúdo SOBE sobre a foto: a primeira faixa depois do hero encosta
     nele, e é o que costura as duas. */
  .vt-sobe { position: relative; z-index: 2; margin-top: -4rem; }
}
.vt-numero { margin: 0; padding: 1.35rem 1.3rem; background: var(--color-bg-card); }
.vt-numero strong {
  display: block;
  font-family: var(--font-marca);
  font-weight: 800;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.vt-numero span { display: block; margin-top: .35rem; font-size: .925rem; line-height: 1.4; color: var(--color-text-muted); }

/* ---- duas colunas: frase grande + texto --------------------------------- */
.vt-dupla { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 60rem) { .vt-dupla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; } }
.vt-frase {
  margin: 0;
  font-family: var(--font-marca);
  font-weight: 800;
  font-size: clamp(1.65rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.vt-frase em { font-style: normal; color: var(--color-primary); }
.vt-prosa p { margin: 0 0 1rem; font-size: 1.075rem; line-height: 1.65; color: var(--color-text-muted); }
.vt-prosa p:last-child { margin-bottom: 0; }
.vt-prosa strong { color: var(--color-text); }

/* ---- cards ---------------------------------------------------------------- */
.vt-grade {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.vt-card {
  margin: 0;
  padding: 1.5rem 1.5rem 1.4rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.vt-card:hover { transform: translateY(-3px); border-color: var(--color-border-strong); box-shadow: 0 20px 44px -28px rgb(0 0 0 / .4); }
.vt-card__icone {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  margin-bottom: 1rem;
  border-radius: .8rem;
  background: color-mix(in srgb, var(--color-primary) 11%, var(--color-bg-card));
  color: var(--color-primary);
}
.vt-card h3 { margin: 0 0 .45rem; font-size: 1.075rem; line-height: 1.3; color: var(--color-text); }
.vt-card p { margin: 0; font-size: .975rem; line-height: 1.55; color: var(--color-text-muted); }
.vt-card__selo {
  display: inline-block;
  margin-top: .8rem;
  padding: .15rem .55rem;
  border-radius: 2rem;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card));
  color: var(--color-primary);
  font-size: .75rem;
  font-weight: 700;
}

/* ---- passos --------------------------------------------------------------- */
.vt-passos {
  list-style: none;
  counter-reset: passo;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr));
}
.vt-passo {
  counter-increment: passo;
  margin: 0;
  padding: 1.45rem 1.4rem 1.35rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
}
.vt-passo::before {
  content: counter(passo);
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  margin-bottom: .95rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-family: var(--font-marca);
  font-weight: 800;
}
.vt-passo h3 { margin: 0 0 .35rem; font-size: 1.05rem; color: var(--color-text); }
.vt-passo p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--color-text-muted); }


/* ============================================================================
 * PACOTES
 * ============================================================================ */

.vt-pacotes { display: grid; gap: 1.25rem; align-items: stretch; }
@media (min-width: 60rem) { .vt-pacotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; } }

.vt-pacote {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.85rem 1.6rem 1.6rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  scroll-margin-top: 6rem;
}
.vt-pacote--destaque {
  border: 2px solid var(--color-primary);
  box-shadow: 0 28px 56px -32px color-mix(in srgb, var(--color-primary) 70%, transparent);
}
@media (min-width: 60rem) { .vt-pacote--destaque { transform: translateY(-.65rem); } }

.vt-pacote__selo {
  position: absolute;
  top: -.8rem;
  left: 1.6rem;
  padding: .28rem .75rem;
  border-radius: 2rem;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vt-pacote__nome {
  margin: 0;
  font-family: var(--font-marca);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--color-text);
}
.vt-pacote__para { margin: .5rem 0 1.2rem; min-height: 3em; font-size: .95rem; line-height: 1.5; color: var(--color-text-muted); }
.vt-pacote__preco { display: flex; align-items: baseline; gap: .35rem; margin: 0; }
.vt-pacote__valor {
  font-family: var(--font-marca);
  font-weight: 800;
  font-size: 2.7rem;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.vt-pacote__mes { font-weight: 600; color: var(--color-text-muted); }
.vt-pacote__conta { margin: .55rem 0 1.3rem; font-size: .875rem; color: var(--color-text-muted); }
.vt-pacote__itens {
  flex: 1;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin: 0 0 1.5rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--color-border-subtle);
}
.vt-pacote__itens li { display: flex; gap: .6rem; margin: 0; font-size: .95rem; line-height: 1.45; }
.vt-pacote__itens svg { flex: none; margin-top: .12rem; color: var(--color-success); }
.vt-pacotes-nota { margin: 1.75rem auto 0; max-width: 44rem; text-align: center; font-size: .925rem; color: var(--color-text-muted); }

/* ---- o produto em destaque, na home ------------------------------------- */
.vt-produto {
  display: grid;
  overflow: hidden;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 1.5rem;
  box-shadow: 0 40px 80px -56px rgb(0 0 0 / .5);
}
@media (min-width: 60rem) { .vt-produto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.vt-produto__foto {
  min-height: 16rem;
  background: #2A0F1A var(--vt-foto) var(--vt-foco, center) / cover no-repeat;
}
.vt-produto__corpo { padding: clamp(1.5rem, 4vw, 2.75rem); }
.vt-produto__corpo .vt-titulo { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.vt-produto__linhas { list-style: none; margin: 1.5rem 0 1.75rem; padding: 0; border-top: 1px solid var(--color-border-subtle); }
.vt-produto__linhas li {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .9rem;
  margin: 0;
  padding: .85rem 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.vt-produto__linhas strong { font-family: var(--font-marca); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.vt-produto__linhas span { font-size: .95rem; color: var(--color-text-muted); }
.vt-produto__linhas b { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* No celular a linha vira duas: pacote e preço em cima, o que inclui embaixo, na
   largura toda. Em três colunas o meio ficava com ~90px e quebrava em quatro
   linhas ("4 vídeos + / até 20 / imagens por / mês"). */
@media (max-width: 30rem) {
  .vt-produto__linhas li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome preco" "inclui inclui"; row-gap: .2rem; }
  .vt-produto__linhas strong { grid-area: nome; }
  .vt-produto__linhas b { grid-area: preco; }
  .vt-produto__linhas span { grid-area: inclui; }
}


/* ============================================================================
 * PERGUNTAS FREQUENTES — <details>: o texto está no HTML para o buscador e
 * para as IAs, aberto ou fechado.
 * ============================================================================ */

.vt-faq { max-width: 52rem; margin: 0 auto; border-top: 1px solid var(--color-border); }
.vt-faq details { border-bottom: 1px solid var(--color-border); }
.vt-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem .25rem;
  list-style: none;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 650;
}
.vt-faq summary::-webkit-details-marker { display: none; }
.vt-faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-primary);
  transition: transform .2s ease;
}
.vt-faq details[open] summary::after { transform: rotate(45deg); }
.vt-faq summary:hover { color: var(--color-primary); }
.vt-faq__resposta { padding: 0 .25rem 1.3rem; color: var(--color-text-muted); line-height: 1.65; }
.vt-faq__resposta p { margin: 0 0 .8rem; }
.vt-faq__resposta p:last-child { margin: 0; }


/* ============================================================================
 * BANDA FINAL — a mesma foto, parada, com véu mais denso
 * ============================================================================ */

.vt-banda {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4.5rem, 12vw, 8rem);
  text-align: center;
  color: #fff;
  background-color: #2A0F1A;
  background-image: var(--vt-foto);
  background-size: cover;
  background-position: var(--vt-foco, center);
  background-repeat: no-repeat;
}
.vt-banda::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(46 4 19 / .86), rgb(20 6 12 / .92));
}
.vt-banda .vt-titulo { color: #fff; }
.vt-banda .vt-sub { color: rgb(255 255 255 / .86); margin-inline: auto; }
.vt-banda .vt-acoes { justify-content: center; margin-top: 2rem; }


/* ============================================================================
 * FORMULÁRIO INTELIGENTE — duas etapas, e o fim é o WhatsApp
 * ============================================================================ */

.vt-form-area { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 60rem) { .vt-form-area { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4.5rem; } }

.vt-form-lista { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .9rem; }
.vt-form-lista li { display: flex; gap: .7rem; margin: 0; font-size: 1rem; line-height: 1.5; }
.vt-form-lista svg { flex: none; margin-top: .15rem; color: var(--color-primary); }

.vt-form-card {
  position: relative;
  padding: clamp(1.35rem, 3.5vw, 2.1rem);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 1.35rem;
  box-shadow: 0 40px 80px -52px rgb(0 0 0 / .45);
  scroll-margin-top: 6rem;
}

/* O trilho: mostra que são poucos passos e que um já andou. */
.vt-trilho { display: flex; gap: .4rem; margin: 0 0 1.4rem; }
.vt-trilho span { flex: 1; height: .35rem; border-radius: 1rem; background: var(--color-border); transition: background-color .35s ease; }
.vt-trilho span.feito { background: var(--color-primary); }

.vt-etapa-rotulo { margin: 0 0 .3rem; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.vt-etapa-titulo { margin: 0 0 1.25rem; font-family: var(--font-marca); font-weight: 800; font-size: 1.45rem; line-height: 1.2; letter-spacing: -.02em; color: var(--color-text); }

.vt-campo { margin: 0 0 1.1rem; }
.vt-campo > label, .vt-grupo > legend { display: block; margin: 0 0 .45rem; padding: 0; font-size: .95rem; font-weight: 650; color: var(--color-text); }
.vt-opcional { font-weight: 400; color: var(--color-text-subtle); }

.vt-input {
  width: 100%;
  min-height: 3.05rem;
  padding: .7rem .95rem;
  font: inherit;
  font-size: 1rem;           /* 16px: abaixo disso o iOS dá zoom ao focar */
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: .75rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.vt-input::placeholder { color: var(--color-text-subtle); }
.vt-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); }
.vt-input[aria-invalid="true"] { border-color: var(--color-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 14%, transparent); }
textarea.vt-input { min-height: 5.5rem; resize: vertical; }
.vt-erro-campo { margin: .4rem 0 0; font-size: .875rem; font-weight: 600; color: var(--color-danger); }

.vt-linha { display: grid; gap: .9rem; }
@media (min-width: 30rem) { .vt-linha--uf { grid-template-columns: 8.5rem minmax(0, 1fr); } }

.vt-grupo { min-width: 0; margin: 0 0 1.15rem; padding: 0; border: 0; }
.vt-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.vt-chip { position: relative; display: block; }
.vt-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vt-chip span {
  display: flex;
  align-items: center;
  min-height: 2.65rem;
  padding: .45rem 1rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 2rem;
  background: var(--color-bg);
  font-size: .94rem;
  font-weight: 600;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.vt-chip:hover span { border-color: var(--color-primary); }
.vt-chip input:checked + span {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card));
  color: var(--color-primary);
}
.vt-chip input:focus-visible + span { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

.vt-escolha { display: grid; gap: .55rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vt-escolha .vt-chip span {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  padding: .65rem .9rem;
  border-radius: .85rem;
  line-height: 1.25;
}
.vt-escolha small { margin-top: .15rem; font-size: .8rem; font-weight: 500; color: var(--color-text-muted); }

.vt-combobox { position: relative; }
.vt-lista {
  position: absolute;
  z-index: 30;
  inset-inline: 0;
  top: calc(100% + .3rem);
  max-height: 15rem;
  overflow-y: auto;
  margin: 0;
  padding: .3rem 0;
  list-style: none;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: .75rem;
  box-shadow: 0 20px 44px -22px rgb(0 0 0 / .45);
}
.vt-lista li { margin: 0; padding: .6rem .95rem; font-size: .95rem; cursor: pointer; }
.vt-lista li[aria-selected="true"] { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)); color: var(--color-primary); font-weight: 650; }

.vt-honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.vt-form-nota { margin: .9rem 0 0; font-size: .85rem; line-height: 1.5; text-align: center; color: var(--color-text-muted); }

.vt-pronto { padding: .5rem 0; text-align: center; }
.vt-pronto__icone {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-success) 14%, var(--color-bg-card));
  color: var(--color-success);
}
.vt-pronto p { color: var(--color-text-muted); }

/* ---- o esqueleto da próxima etapa (CLAUDE.md, "Espera") -------------------
   O clique que manda a etapa REPINTA a região do cartão: aí quem avisa é o
   esqueleto com a forma da etapa seguinte, e o botão só fica desabilitado. */
.esqueleto { position: relative; overflow: hidden; border-radius: .5rem; background: var(--color-bg-hover); }
.esqueleto::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: esqueleto-brilho 1.4s infinite;
}
html.dark .esqueleto::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent); }
@keyframes esqueleto-brilho { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .esqueleto::after { animation: none; } }
.esqueleto--rotulo { width: 32%; height: .8rem; margin: 0 0 .55rem; }
.esqueleto--titulo { width: 62%; height: 1.5rem; margin: 0 0 1.4rem; }
.esqueleto--campo  { height: 3.05rem; margin: 0 0 1.1rem; border-radius: .75rem; }
.esqueleto--chips  { width: 84%; height: 2.65rem; margin: 0 0 1.1rem; border-radius: 2rem; }
.esqueleto--botao  { height: 3.1rem; margin-top: .4rem; border-radius: .8rem; }


/* ============================================================================
 * TOAST — rodapé, centralizado (CLAUDE.md: "previsível vence perto")
 * ============================================================================ */

.vt-toast {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  width: max-content;
  max-width: min(34rem, calc(100vw - 2rem));
  padding: .85rem 1rem .85rem 1.15rem;
  border-radius: .85rem;
  background: #1A1A1A;
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: 0 22px 44px -20px rgb(0 0 0 / .6);
  opacity: 0;
  transform: translate(-50%, 1rem);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.vt-toast--visivel { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
/* No celular o toast ocupa a largura toda e cairia em cima da bolha do
   WhatsApp; sobe acima dela. */
@media (max-width: 47.9rem) { .vt-toast { bottom: calc(60px + 2rem); } }
.vt-toast--erro { background: #B3261E; }
.vt-toast button { flex: none; padding: 0 .2rem; border: 0; background: none; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }


/* ============================================================================
 * HERO COM FORMULÁRIO — a landing já abre pedindo a proposta
 * ============================================================================
 * Marcos, 14/09: *"na página das ofertas, da LP, já meta o formulário no
 * hero"*. Texto à esquerda, cartão do formulário à direita; no celular, o
 * cartão vem logo depois do texto.
 *
 * ⚠️ O CARTÃO VOLTA A TER COR DE TEXTO. O hero pinta tudo de branco (texto
 *    sobre foto), e o cartão é branco: sem isto, rótulos e opções sumiriam.
 * ⚠️ O VÉU FICA MAIS DENSO À DIREITA. No hero comum a direita é a foto limpa;
 *    aqui é o cartão, e a foto passa a ser ambiente, não assunto. */
.vt-hero--form { align-items: flex-start; padding-block: 6.5rem 3rem; }
.vt-hero__grade { display: grid; gap: 2rem; align-items: center; }
.vt-hero--form .vt-hero__texto { max-width: 36rem; }
.vt-hero--form h1 { font-size: clamp(2.05rem, 4.6vw, 3.35rem); }
.vt-hero .vt-form-card { color: var(--color-text); box-shadow: 0 40px 90px -40px rgb(0 0 0 / .8); }
@media (min-width: 60rem) {
  .vt-hero--form { align-items: center; padding-block: 7rem 4.5rem; }
  .vt-hero__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: 3.5rem; }
  .vt-hero--form::before {
    background:
      linear-gradient(180deg, rgb(20 6 12 / .45) 0%, rgb(20 6 12 / 0) 22%),
      linear-gradient(90deg, rgb(20 6 12 / .9) 0%, rgb(20 6 12 / .72) 45%, rgb(20 6 12 / .5) 100%);
  }
}


/* ============================================================================
 * VÍDEOS NO AR — o trabalho real, em pares de semana
 * ============================================================================
 * Cada semana é um par: o educativo e a oferta. É assim que o pacote funciona
 * de verdade, e mostrar em par ensina isso sem precisar de parágrafo.
 *
 * ⚠️ `preload="none"` + capa: quatro vídeos na página baixariam ~15 MB antes
 *    de alguém apertar play. Com a capa, o celular baixa só a imagem. */
.vt-semanas { display: grid; gap: 1.5rem; }
@media (min-width: 60rem) { .vt-semanas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
.vt-semana {
  padding: 1.25rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
}
.vt-semana__titulo { margin: 0 0 1rem; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.vt-semana__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.vt-video { margin: 0; }
.vt-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: .9rem;
  background: #1A1A1A;
}
.vt-video figcaption { margin-top: .6rem; font-size: .9rem; line-height: 1.35; }
.vt-video figcaption strong { display: block; color: var(--color-text); }
.vt-video figcaption span { display: block; margin-top: .15rem; font-size: .82rem; color: var(--color-text-muted); }

/* ---- o carrossel dos posts 4:5 de cada semana -----------------------------
   Marcos, 14/09: *"crie aquele sistema com a setinha pros lados que avança"*.
   A base é uma faixa com `scroll-snap`: rola de lado e desliza no dedo mesmo
   sem JavaScript. O script só acrescenta as setas e o contador.

   Dois posts por vez dentro do cartão da semana (um só em tela estreita): o
   cartão tem meia largura no desktop, e três ali ficariam do tamanho de selo. */
.vt-carrossel { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--color-border-subtle); }
.vt-carrossel__titulo { margin: 0 0 .75rem; font-size: .92rem; font-weight: 650; color: var(--color-text); }
.vt-carrossel__titulo span { font-weight: 500; color: var(--color-text-muted); }
.vt-carrossel__janela { position: relative; }
.vt-carrossel__trilho {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: .75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: .9rem;
}
.vt-carrossel__trilho::-webkit-scrollbar { display: none; }
.vt-carrossel__trilho:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }
@media (min-width: 30rem) { .vt-carrossel__trilho { grid-auto-columns: calc((100% - .75rem) / 2); } }
@media (prefers-reduced-motion: reduce) { .vt-carrossel__trilho { scroll-behavior: auto; } }
.vt-carrossel__item { margin: 0; scroll-snap-align: start; }
.vt-carrossel__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: .9rem;
  background: var(--color-bg-hover);
}

/* As setas nos dois lados, por cima da faixa. Branca com sombra: os posts são
   fotos escuras e claras misturadas, e só um disco sólido se lê sobre as duas.
   Na ponta da faixa a seta daquele lado some (e sai do tab) em vez de ficar
   clicável sem fazer nada. */
.vt-seta {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .96);
  color: #1A1A1A;
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / .55);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity .2s ease, transform .2s ease;
}
.vt-seta--esq { left: .5rem; }
.vt-seta--dir { right: .5rem; }
.vt-seta:hover { transform: translateY(-50%) scale(1.07); }
.vt-seta:disabled { opacity: 0; pointer-events: none; }
.vt-carrossel__contador { margin: .55rem 0 0; font-size: .8rem; text-align: center; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ---- a técnica, antes das semanas ---------------------------------------- */
.vt-tecnica {
  margin: 0 0 1.75rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  border-left: 4px solid var(--color-primary);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-card));
}
.vt-tecnica__rotulo {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .45rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.vt-tecnica p:last-child { margin: 0; max-width: 62rem; line-height: 1.65; }

/* ---- as legendas, em cartão --------------------------------------------------
   A legenda inteira fica no HTML (o buscador e as IAs leem), mas o cartão tem
   altura contada e rola por dentro: uma lista de dez preços não pode empurrar o
   carrossel para longe dos vídeos. `pre-line` respeita as quebras da legenda
   como ela foi postada. */
.vt-legendas { display: grid; gap: .75rem; margin-top: 1.1rem; }
@media (min-width: 30rem) { .vt-legendas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vt-legenda {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: .9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: .9rem;
  background: var(--color-bg);
}
.vt-legenda__rotulo {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .55rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.vt-legenda__texto {
  max-height: 14rem;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  white-space: pre-line;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--color-text);
}
.vt-legenda__texto:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; border-radius: .25rem; }


/* ============================================================================
 * REVELAR AO ROLAR — só com JS, e só para quem não pediu menos movimento
 * ============================================================================
 * ⚠️ A classe `js` vem de uma linha inline no começo do `<main>`. Sem ela nada
 *    é escondido: sem JS a página aparece inteira. Esconder no CSS e revelar
 *    no JS deixaria a página em branco no dia em que o script falhar. */
.js .vt-revela { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .vt-revela.vt-revela--visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .vt-revela { opacity: 1; transform: none; transition: none; }
}