/* ============================================================
   Home do Brasil Quer Mais — "Vencemos! O fim da 6x1 é uma realidade"
   (em vigor desde 21/10/2026, depois da aprovação no Senado)
   Herda de ../styles.css: fontes, paleta, reset e rodapé.
   Escala do design.md: 1rem = 100px do artboard de 1920px.
   Ordem das camadas: cada seção fica POR CIMA da seguinte; a de
   baixo sobe 1rem (margin-top negativo) e aparece nas curvas.
   ============================================================ */

:root {
  --verde-placar: #1c8c2e;
  --wa: #1fa855;
  --header-h: 1.15rem;
  --titulo-secao: 1.7rem;
  --titulo-apoio: 0.95rem;
  --texto-secao: 0.4rem;
}

/* títulos, botões, badges: Anybody (o resto herda PP Neue Machina do body) */
.vt-nav a, .vt-btn-grupo, .vt-selo, .vt-hero-titulo, .vt-btn-hero, .vt-video-play,
.vt-sticker, .vt-faixa, .vt-titulo, .vt-kicker, .vt-muda-sub, .vt-numero strong,
.vt-numero > span, .vt-quando-titulo, .vt-etapa-quando, .vt-etapa-horas, .vt-aviso h3,
.vt-semana b, .vt-semana-legenda, .vt-conquista-lead, .vt-jogo-titulo,
.vt-acao strong, .vt-cta-grupo-t, .vt-btn-wa, .vt-pular, .vt-muda-cta, .vt-btn-duvida,
.vt-boatos li, .vt-garantias li {
  font-family: 'Anybody', sans-serif;
}

::selection { background: var(--amarelo); color: var(--preto); }

.vt a,
.vt button { -webkit-tap-highlight-color: transparent; }

.vt {
  accent-color: var(--azul);
}

/* foco: azul nos fundos claros, amarelo nos escuros */
.vt :focus-visible {
  outline: 0.035rem solid var(--azul);
  outline-offset: 0.05rem;
}

.vt-header :focus-visible,
.vt-hero :focus-visible,
.vt-conquista :focus-visible,
.vt-cta-grupo :focus-visible,
.vt-duvidas-texto :focus-visible {
  outline-color: var(--amarelo);
}

.vt-wrap {
  position: relative;
  width: min(19.2rem, 100%);
  margin: 0 auto;
  padding: 0 1.2rem;
}

section[id] { scroll-margin-top: 1.2rem; }

.vt-pular {
  position: fixed;
  left: 0.3rem;
  top: -2rem;
  z-index: 100;
  background: var(--amarelo);
  color: var(--preto);
  padding: 0.12rem 0.3rem;
  border-radius: 2rem;
  font-size: 0.28rem;
  font-weight: 900;
}

.vt-pular:focus { top: 0.3rem; }

/* faixa amarela com pincel atrás da palavra (6X1) */
.vt-fita {
  position: relative;
  display: inline-block;
  z-index: 0;
  color: var(--preto);
  padding: 0 0.14em;
}

.vt-fita::before {
  content: '';
  position: absolute;
  inset: 0.08em -0.06em 0 -0.08em;
  background: url('../assets/asset-sessao-2.png') center / 100% 100% no-repeat;
  z-index: -1;
}

/* ---------- Títulos de seção (verde menor + azul maior, design.md §3) ---------- */

.vt-titulo { line-height: 1; text-transform: uppercase; }

.vt-titulo-apoio {
  display: block;
  color: var(--verde);
  font-size: var(--titulo-apoio);
  font-weight: 900;
  font-stretch: 63.5%;
  line-height: 0.9;
}

.vt-titulo-grande {
  display: block;
  color: var(--azul);
  font-size: var(--titulo-secao);
  font-weight: 900;
  font-stretch: 64%;
  line-height: 0.92;
}

.vt-titulo--centro { text-align: center; }

/* palavra que troca de linha entre computador e celular */
.vt-so-cel { display: none; }
.vt-titulo--claro .vt-titulo-apoio { color: var(--amarelo); }
.vt-titulo--claro .vt-titulo-grande { color: var(--creme); }

/* pincel amarelo que se pinta quando a seção entra na tela */
.vt-pincel {
  position: relative;
  display: inline-block;
  z-index: 0;
  padding: 0 0.3rem;
}

.vt-pincel::before {
  content: '';
  position: absolute;
  inset: 0.12rem -0.2rem -0.04rem;
  background: url('../assets/asset-sessao-2.png') center / 100% 100% no-repeat;
  z-index: -1;
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.7, 0, 0.2, 1) 0.15s;
}

.js .vt-pincel:not(.is-in)::before { transform: scaleX(0); }

/* kicker com régua (design.md §4.9) */
.vt-kicker {
  display: flex;
  align-items: center;
  gap: 0.16rem;
  color: var(--preto);
  font-size: 0.28rem;
  font-weight: 900;
  font-stretch: 90%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.vt-kicker svg {
  width: 0.3rem;
  height: 0.3rem;
  color: var(--azul);
  flex: none;
}

.vt-kicker::after {
  content: '';
  flex: 1;
  border-top: 0.018rem solid var(--preto);
  opacity: 0.45;
  margin-left: 0.12rem;
}

/* ============================================================
   HEADER — pílula fixa
   ============================================================ */

.vt-header {
  position: fixed;
  top: 0.26rem;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.vt-header-pilula {
  position: relative;
  pointer-events: auto;
  width: min(17.6rem, calc(100% - 0.6rem));
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.13rem 0 0.4rem;
  background: rgba(23, 1, 151, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 0.022rem solid rgba(251, 248, 234, 0.2);
  border-radius: 2rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.vt-header.is-rolado .vt-header-pilula {
  border-color: var(--preto);
  box-shadow: 0.08rem 0.1rem 0 var(--preto);
}

.vt-header-logo img {
  height: 0.78rem;
  width: auto;
}

.vt-nav {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
}

.vt-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--creme);
  font-size: 0.28rem;
  font-weight: 900;
  font-stretch: 82%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.vt-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1rem;
  height: 0.035rem;
  border-radius: 1rem;
  background: var(--amarelo);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.vt-nav a:hover,
.vt-nav a[aria-current="true"] { color: var(--amarelo); }

.vt-nav a:hover::after,
.vt-nav a[aria-current="true"]::after { transform: scaleX(1); }

.vt-btn-grupo {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  height: 0.84rem;
  padding: 0 0.36rem 0 0.28rem;
  background: var(--amarelo);
  color: var(--preto);
  border: 0.022rem solid var(--preto);
  border-radius: 2rem;
  font-size: 0.29rem;
  font-weight: 900;
  font-stretch: 78%;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.vt-btn-grupo svg { width: 0.34rem; height: 0.34rem; }

.vt-btn-grupo:hover {
  background: var(--creme);
  transform: translateY(-0.02rem);
}

/* no topo, sobre o hero, o botão do grupo fica em contorno: o amarelo é do CTA do hero */
.vt-header:not(.is-rolado) .vt-btn-grupo {
  background: transparent;
  color: var(--creme);
  border-color: rgba(251, 248, 234, 0.55);
}

.vt-header:not(.is-rolado) .vt-btn-grupo:hover {
  background: var(--amarelo);
  border-color: var(--preto);
  color: var(--preto);
}

.vt-menu { display: none; }

/* ============================================================
   SEÇÃO 1 — HERO (azul, ocupa a primeira tela)
   --u encolhe em janelas baixas para tudo caber na dobra (design.md §5)
   ============================================================ */

.vt-hero {
  --u: min(1rem, calc(100vh / 11.6));
  --u: min(1rem, calc(100svh / 11.6));
  position: relative;
  z-index: 5;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 0.6rem) 0 calc(var(--u) * 0.9);
  background: var(--azul);
  color: var(--creme);
  overflow: hidden;
  isolation: isolate;
}

/* profundidade: brilho atrás do vídeo + pontos */
.vt-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 45% 60% at 74% 52%, rgba(76, 52, 255, 0.55), transparent 70%),
    radial-gradient(rgba(251, 248, 234, 0.08) 0.018rem, transparent 0.022rem) 0 0 / 0.3rem 0.3rem;
}

/* raios de sol girando devagar atrás do vídeo */
.vt-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: calc(50% - 9.6rem + 0.9rem);
  top: 50%;
  width: calc(var(--u) * 15);
  height: calc(var(--u) * 15);
  margin: calc(var(--u) * -7.5) calc(var(--u) * -5.4) 0 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(231, 194, 78, 0.13) 0deg 7deg, transparent 7deg 22.5deg);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 100%);
  mask: radial-gradient(closest-side, #000 30%, transparent 100%);
  animation: vt-gira 90s linear infinite;
}

@keyframes vt-gira { to { transform: rotate(1turn); } }

.vt-hero-in {
  width: min(19.2rem, 100%);
  margin: 0 auto;
  padding: 0 1.2rem 0 1.3rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
}

.vt-selo {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  padding: calc(var(--u) * 0.08) calc(var(--u) * 0.26) calc(var(--u) * 0.08) calc(var(--u) * 0.18);
  border: 0.018rem solid rgba(251, 248, 234, 0.35);
  border-radius: 2rem;
  background: rgba(251, 248, 234, 0.06);
  font-size: calc(var(--u) * 0.26);
  font-weight: 900;
  font-stretch: 85%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.vt-selo svg {
  width: calc(var(--u) * 0.28);
  height: calc(var(--u) * 0.28);
  color: var(--amarelo);
}

.vt-hero-titulo {
  margin-top: calc(var(--u) * 0.3);
  text-transform: uppercase;
  font-weight: 900;
}

.vt-hero-l1 {
  display: block;
  color: var(--amarelo);
  font-size: calc(var(--u) * 2.7);
  font-stretch: 58%;
  line-height: 0.86;
  letter-spacing: -0.005em;
  /* sombra dura do sistema, sobre azul vira preta translúcida */
  text-shadow: calc(var(--u) * 0.07) calc(var(--u) * 0.08) 0 rgba(0, 0, 0, 0.35);
}

.vt-hero-l2,
.vt-hero-l3 {
  display: block;
  font-size: calc(var(--u) * 1.08);
  font-stretch: 62%;
  line-height: 0.95;
  white-space: nowrap;
}

.vt-hero-l2 { margin-top: calc(var(--u) * 0.12); }
.vt-hero-l2 .vt-fita { margin: 0 0.04em; }

.vt-hero-sub {
  margin-top: calc(var(--u) * 0.34);
  max-width: calc(var(--u) * 9.2);
  font-size: calc(var(--u) * 0.42);
  line-height: 1.28;
}

.vt-hero-sub strong { color: var(--amarelo); font-weight: 800; }

.vt-hero-ctas { margin-top: calc(var(--u) * 0.48); }

.vt-btn-hero {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.24);
  height: calc(var(--u) * 1.08);
  padding: 0 calc(var(--u) * 0.14) 0 calc(var(--u) * 0.5);
  background: var(--amarelo);
  color: var(--preto);
  border: 0.03rem solid var(--preto);
  border-radius: 2rem;
  box-shadow: calc(var(--u) * 0.1) calc(var(--u) * 0.12) 0 rgba(0, 0, 0, 0.4);
  font-size: calc(var(--u) * 0.44);
  font-weight: 900;
  font-stretch: 72%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vt-btn-hero:hover {
  transform: translate(-0.03rem, -0.03rem);
  box-shadow: calc(var(--u) * 0.13) calc(var(--u) * 0.15) 0 rgba(0, 0, 0, 0.4);
}

.vt-btn-hero-ico {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 0.78);
  height: calc(var(--u) * 0.78);
  border-radius: 50%;
  background: var(--azul);
  color: var(--amarelo);
}

.vt-btn-hero-ico svg {
  width: calc(var(--u) * 0.36);
  height: calc(var(--u) * 0.36);
  animation: vt-quica 1.8s ease-in-out infinite;
}

@keyframes vt-quica {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(calc(var(--u) * 0.06)); }
}

/* --- vídeo vertical (9:16) com um cartão amarelo inclinado atrás --- */
.vt-hero-visual {
  position: relative;
  height: calc(var(--u) * 8.7);
  aspect-ratio: 9 / 16;
}

.vt-video-fundo {
  position: absolute;
  inset: 0;
  background: var(--amarelo);
  border: 0.03rem solid var(--preto);
  border-radius: calc(var(--u) * 0.42);
  transform: rotate(6deg) translate(4%, 1%);
}

.vt-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--preto);
  border: 0.03rem solid var(--preto);
  border-radius: calc(var(--u) * 0.42);
  box-shadow: calc(var(--u) * 0.12) calc(var(--u) * 0.14) 0 rgba(0, 0, 0, 0.4);
  transform: rotate(-2deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.vt-hero-visual:hover .vt-video,
.vt-video.is-completo { transform: rotate(0deg); }

.vt-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* véu embaixo para o botão ler bem sobre qualquer quadro */
.vt-video::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  background: linear-gradient(transparent, rgba(19, 19, 18, 0.7));
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.vt-video.is-completo::after { opacity: 0; }

.vt-video-play {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(var(--u) * 0.36);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.14);
  height: calc(var(--u) * 0.84);
  padding: 0 calc(var(--u) * 0.26) 0 calc(var(--u) * 0.1);
  background: var(--amarelo);
  color: var(--preto);
  border: 0.025rem solid var(--preto);
  border-radius: 2rem;
  box-shadow: calc(var(--u) * 0.06) calc(var(--u) * 0.08) 0 rgba(0, 0, 0, 0.45);
  font-size: calc(var(--u) * 0.32);
  font-weight: 900;
  font-stretch: 76%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(-50%);
  transition: transform 0.2s ease, opacity 0.3s ease, visibility 0.3s;
}

.vt-video-play:hover { transform: translateX(-50%) scale(1.04); }

.vt-video-play-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 0.62);
  height: calc(var(--u) * 0.62);
  border-radius: 50%;
  background: var(--azul);
  color: var(--amarelo);
}

/* anel pulsando: convida ao toque */
.vt-video-play-ico::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 0.025rem solid var(--azul);
  animation: vt-pulso 1.8s ease-out infinite;
}

@keyframes vt-pulso {
  from { transform: scale(1); opacity: 0.8; }
  to   { transform: scale(1.9); opacity: 0; }
}

.vt-video-play-ico svg {
  width: calc(var(--u) * 0.28);
  height: calc(var(--u) * 0.28);
  margin-left: calc(var(--u) * 0.03);
}

.vt-video-play-som {
  width: calc(var(--u) * 0.32);
  height: calc(var(--u) * 0.32);
}

.vt-video.is-completo .vt-video-play {
  opacity: 0;
  visibility: hidden;
}

.vt-sticker {
  position: absolute;
  z-index: 3;
  top: calc(var(--u) * 0.55);
  left: calc(var(--u) * -0.9);
  padding: calc(var(--u) * 0.14) calc(var(--u) * 0.24);
  background: var(--verde);
  color: var(--creme);
  border: 0.025rem solid var(--preto);
  border-radius: calc(var(--u) * 0.14);
  box-shadow: calc(var(--u) * 0.07) calc(var(--u) * 0.08) 0 var(--preto);
  font-size: calc(var(--u) * 0.36);
  font-weight: 900;
  font-stretch: 66%;
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-9deg);
  pointer-events: none;
  animation: vt-sticker 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s backwards;
  transition: opacity 0.3s ease;
}

.vt-video.is-completo ~ .vt-sticker { opacity: 0; }

@keyframes vt-sticker {
  from { transform: rotate(-30deg) scale(0); }
}

/* --- confete: cai uma vez ao abrir a página (o JS cria os pedaços) --- */
.vt-confete {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.vt-confete i {
  position: absolute;
  top: -0.4rem;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  background: var(--c);
  border-radius: var(--r);
  opacity: 0;
  animation: vt-cai var(--d) cubic-bezier(0.25, 0.4, 0.45, 1) var(--a) forwards;
}

@keyframes vt-cai {
  0%   { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) rotateY(0deg); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx), 110vh, 0) rotate(var(--g)) rotateY(720deg); }
}

/* ---------- Faixa entre o hero e "O que muda" ---------- */

.vt-faixa {
  --faixa-h: 0.82rem;
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  height: var(--faixa-h);
  margin: calc(var(--faixa-h) / -2) -0.4rem calc(var(--faixa-h) / -2);
  background: var(--amarelo);
  border-block: 0.03rem solid var(--preto);
  transform: rotate(-1deg);
  overflow: hidden;
  box-shadow: 0 0.1rem 0 rgba(19, 19, 18, 0.12);
}

.vt-faixa-trilho {
  display: flex;
  width: max-content;
  animation: vt-faixa 46s linear infinite;
}

.vt-faixa span {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  padding-right: 0.36rem;
  color: var(--preto);
  font-size: 0.4rem;
  font-weight: 900;
  font-stretch: 70%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vt-faixa span::after {
  content: '✦';
  color: var(--azul);
  font-size: 0.3rem;
}

@keyframes vt-faixa {
  to { transform: translateX(-50%); }
}

/* ============================================================
   SEÇÃO 2 — O QUE MUDA NA SUA VIDA (creme pontilhado)
   ============================================================ */

.vt-muda {
  position: relative;
  z-index: 4;
  margin-top: -1rem;
  padding: 2.2rem 0 1.5rem;
  background-color: var(--creme);
  background-image: radial-gradient(rgba(19, 19, 18, 0.07) 0.018rem, transparent 0.02rem);
  background-size: 0.26rem 0.26rem;
  border-radius: 0 0 1rem 1rem;
}

.vt-muda-sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.1rem 0.3rem;
  margin-top: 0.34rem;
  color: var(--preto);
  font-size: 0.5rem;
  font-weight: 900;
  font-stretch: 70%;
  text-transform: uppercase;
  line-height: 1.1;
}

.vt-muda-sub strong {
  color: var(--verde);
  font-weight: 900;
}

/* --- os três números --- */
.vt-numeros {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  max-width: 15.4rem;
  margin: 0.8rem auto 0;
}

.vt-numero {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0.42rem 0.46rem 0.46rem;
  background: #fff;
  border: 0.022rem solid var(--preto);
  border-radius: 0.5rem;
  box-shadow: 0.14rem 0.14rem 0 var(--amarelo);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vt-numero:hover {
  transform: translate(-0.04rem, -0.04rem);
  box-shadow: 0.18rem 0.18rem 0 var(--amarelo);
}

.vt-numero-ico {
  position: absolute;
  right: 0.4rem;
  bottom: 0.42rem;
  width: 0.56rem;
  height: 0.56rem;
  opacity: 0.9;
}

.vt-numero strong {
  display: block;
  font-size: 2.5rem;
  font-weight: 900;
  font-stretch: 62%;
  line-height: 0.86;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.vt-numero > span {
  display: block;
  margin-top: 0.12rem;
  padding-right: 0.8rem;
  font-size: 0.42rem;
  font-weight: 900;
  font-stretch: 72%;
  line-height: 1;
  text-transform: uppercase;
}

.vt-numero--azul { background: var(--azul); color: var(--creme); }
.vt-numero--azul strong, .vt-numero--azul .vt-numero-ico { color: var(--amarelo); }

.vt-numero--branco { color: var(--preto); }
.vt-numero--branco strong, .vt-numero--branco .vt-numero-ico { color: var(--azul); }

.vt-numero--verde { background: var(--verde); color: var(--creme); }
.vt-numero--verde strong, .vt-numero--verde .vt-numero-ico { color: var(--amarelo); }

/* --- quando começa --- */
.vt-quando {
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  align-items: center;
  gap: 0.7rem;
  max-width: 15.4rem;
  margin: 1.1rem auto 0;
}

.vt-quando-titulo {
  color: var(--verde);
  font-size: 0.78rem;
  font-weight: 900;
  font-stretch: 63.5%;
  line-height: 0.9;
  text-transform: uppercase;
}

.vt-quando-titulo span {
  display: block;
  color: var(--azul);
  font-size: 1.12rem;
  font-stretch: 64%;
}

.vt-quando-intro p {
  margin-top: 0.22rem;
  font-size: 0.34rem;
  line-height: 1.35;
}

/* a jornada caindo: três paradas numa trilha */
.vt-etapas {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
}

/* trilha atrás dos cards, que se preenche ao entrar na tela */
.vt-etapas::before,
.vt-etapas::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 1rem;
  right: 1rem;
  top: 50%;
  height: 0.08rem;
  border-radius: 1rem;
  background: rgba(19, 19, 18, 0.15);
}

.vt-etapas::after {
  background: var(--verde);
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(0.7, 0, 0.2, 1) 0.2s;
}

.js .vt-etapas:not(.is-in)::after { transform: scaleX(0); }

.vt-etapa {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 0.28rem 0.3rem 0.3rem;
  background: #fff;
  border: 0.022rem solid var(--preto);
  border-radius: 0.4rem;
  box-shadow: 0.1rem 0.1rem 0 var(--amarelo);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.js .vt-etapas:not(.is-in) .vt-etapa { opacity: 0; transform: translateY(0.3rem); }
.vt-etapa:nth-child(2) { transition-delay: 0.35s; }
.vt-etapa:nth-child(3) { transition-delay: 0.7s; }

.vt-etapa-quando {
  align-self: flex-start;
  padding: 0.05rem 0.16rem;
  border-radius: 1rem;
  background: var(--azul);
  color: var(--creme);
  font-size: 0.22rem;
  font-weight: 900;
  font-stretch: 82%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vt-etapa-horas {
  margin-top: 0.12rem;
  color: var(--azul);
  font-size: 1.2rem;
  font-weight: 900;
  font-stretch: 62%;
  line-height: 0.9;
}

.vt-etapa-txt {
  margin-top: 0.06rem;
  font-size: 0.28rem;
  line-height: 1.25;
}

.vt-etapa-txt b { font-weight: 800; }

/* "hoje" fica apagado e riscado: é o que vai acabar */
.vt-etapa--hoje {
  background: #f0ead4;
  box-shadow: none;
}

.vt-etapa--hoje .vt-etapa-quando { background: rgba(19, 19, 18, 0.55); }

.vt-etapa--hoje .vt-etapa-horas {
  position: relative;
  align-self: flex-start;
  color: rgba(19, 19, 18, 0.45);
}

.vt-etapa--hoje .vt-etapa-horas::after {
  content: '';
  position: absolute;
  left: -0.06rem;
  right: -0.06rem;
  top: 48%;
  height: 0.08rem;
  border-radius: 1rem;
  background: #e21b1b;
  transform: rotate(-8deg);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1) 0.1s;
}

.js .vt-etapas:not(.is-in) .vt-etapa--hoje .vt-etapa-horas::after { transform: rotate(-8deg) scaleX(0); }

.vt-etapa--dez .vt-etapa-quando { background: var(--amarelo); color: var(--preto); }

.vt-etapa--fim {
  background: var(--verde);
  color: var(--creme);
  box-shadow: 0.1rem 0.1rem 0 var(--amarelo);
}

.vt-etapa--fim .vt-etapa-quando { background: var(--amarelo); color: var(--preto); }
.vt-etapa--fim .vt-etapa-horas { color: var(--amarelo); }

.vt-etapa-estrela {
  position: absolute;
  top: -0.22rem;
  right: -0.18rem;
  width: 0.62rem;
  height: 0.62rem;
  color: var(--amarelo);
  filter: drop-shadow(0.03rem 0.03rem 0 var(--preto));
  animation: vt-gira 12s linear infinite;
}

/* --- salário e folgas --- */
.vt-avisos {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0.5rem;
  max-width: 15.4rem;
  margin: 0.8rem auto 0;
}

.vt-aviso {
  position: relative;
  padding: 0.4rem 0.44rem 0.42rem 1.3rem;
  background: #fff;
  border: 0.022rem solid var(--preto);
  border-radius: 0.5rem;
  box-shadow: 0.14rem 0.14rem 0 var(--amarelo);
}

.vt-aviso-ico {
  position: absolute;
  top: 0.4rem;
  left: 0.38rem;
  display: grid;
  place-items: center;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--verde);
  color: var(--creme);
}

.vt-aviso-ico svg { width: 0.36rem; height: 0.36rem; }

.vt-aviso--folgas .vt-aviso-ico { background: var(--azul); color: var(--amarelo); }

.vt-aviso h3 {
  color: var(--azul);
  font-size: 0.56rem;
  font-weight: 900;
  font-stretch: 66%;
  line-height: 1;
  text-transform: uppercase;
}

.vt-aviso--salario h3 { color: var(--verde); }

.vt-aviso p {
  margin-top: 0.1rem;
  font-size: 0.32rem;
  line-height: 1.35;
}

.vt-aviso strong { font-weight: 800; }

/* semana com as duas folgas mudando de lugar */
.vt-semana {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.08rem;
  margin-top: 0.26rem;
}

.vt-semana li {
  display: grid;
  place-items: center;
  height: 0.62rem;
  border: 0.018rem solid rgba(19, 19, 18, 0.3);
  border-radius: 0.16rem;
  background: #f4f1e4;
  color: rgba(19, 19, 18, 0.6);
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vt-semana b {
  font-size: 0.24rem;
  font-weight: 900;
  font-stretch: 82%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vt-semana li.is-folga {
  background: var(--amarelo);
  border-color: var(--preto);
  color: var(--preto);
  transform: translateY(-0.06rem);
  box-shadow: 0.04rem 0.05rem 0 var(--preto);
}

.vt-semana-legenda {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-top: 0.14rem;
  color: rgba(19, 19, 18, 0.7);
  font-size: 0.2rem;
  font-weight: 900;
  font-stretch: 85%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vt-semana-legenda i {
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 0.06rem;
  border: 0.018rem solid rgba(19, 19, 18, 0.3);
  background: #f4f1e4;
}

.vt-semana-legenda .vt-leg-folga { margin-left: 0.14rem; background: var(--amarelo); border-color: var(--preto); }

/* "Ainda tem dúvidas?" leva ao chat da seção 5 */
.vt-muda-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.3rem;
  margin-top: 0.9rem;
  color: var(--azul);
  font-size: 0.56rem;
  font-weight: 900;
  font-stretch: 66%;
  text-transform: uppercase;
}

.vt-btn-duvida {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  height: 0.82rem;
  padding: 0 0.34rem 0 0.4rem;
  background: var(--azul);
  color: var(--creme);
  border: 0.025rem solid var(--preto);
  border-radius: 2rem;
  box-shadow: 0.08rem 0.1rem 0 var(--amarelo);
  font-size: 0.34rem;
  font-stretch: 74%;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.vt-btn-duvida svg { width: 0.3rem; height: 0.3rem; }

.vt-btn-duvida:hover {
  background: var(--amarelo);
  color: var(--preto);
  transform: translate(-0.02rem, -0.02rem);
}

/* ============================================================
   SEÇÃO 3 — UMA CONQUISTA DO POVO, COM LULA (verde)
   ============================================================ */

.vt-conquista {
  position: relative;
  z-index: 3;
  margin-top: -1rem;
  padding: 2.2rem 0 1.6rem;
  background: var(--verde);
  color: var(--creme);
  border-radius: 0 0 1rem 1rem;
  overflow: hidden;
  isolation: isolate;
}

/* pontos claros sobre o verde */
.vt-conquista::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(rgba(251, 248, 234, 0.07) 0.018rem, transparent 0.022rem) 0 0 / 0.3rem 0.3rem;
}

.vt-conquista-grade {
  display: grid;
  grid-template-columns: 6.6rem 1fr;
  align-items: center;
  gap: 1.3rem;
}

.vt-foto {
  position: relative;
  transform: rotate(-3deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.vt-foto:hover { transform: rotate(0deg) scale(1.02); }

.vt-foto img {
  width: 100%;
  height: auto;
  border: 0.03rem solid var(--preto);
  border-radius: 0.5rem;
  box-shadow: 0.18rem 0.18rem 0 var(--amarelo);
}

.vt-foto-selo {
  position: absolute;
  top: -0.36rem;
  right: -0.36rem;
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--azul);
  color: var(--amarelo);
  border: 0.03rem solid var(--preto);
  box-shadow: 0.06rem 0.07rem 0 var(--preto);
}

.vt-foto-selo svg {
  width: 0.56rem;
  height: 0.56rem;
  animation: vt-gira 14s linear infinite;
}

.vt-conquista-lead {
  max-width: 9rem;
  margin-top: 0.36rem;
  text-wrap: balance;
  color: var(--amarelo);
  font-size: 0.56rem;
  font-weight: 900;
  font-stretch: 68%;
  line-height: 1.05;
  text-transform: uppercase;
}

.vt-conquista-p {
  max-width: 9.4rem;
  margin-top: 0.2rem;
  font-size: var(--texto-secao);
  line-height: 1.4;
}

/* ============================================================
   SEÇÃO 4 — GUIA DA VITÓRIA (creme pontilhado)
   ============================================================ */

.vt-guia {
  position: relative;
  z-index: 2;
  margin-top: -1rem;
  padding: 2.1rem 0 1.4rem;
  background-color: var(--creme);
  background-image: radial-gradient(rgba(19, 19, 18, 0.07) 0.018rem, transparent 0.02rem);
  background-size: 0.26rem 0.26rem;
  border-radius: 0 0 1rem 1rem;
}

.vt-guia-lead {
  width: min(11rem, 100%);
  margin: 0.34rem auto 0;
  text-align: center;
  font-size: var(--texto-secao);
  line-height: 1.38;
}

.vt-guia-lead strong { color: var(--azul); font-weight: 800; }

/* o que está em jogo: cartão azul */
.vt-jogo {
  position: relative;
  max-width: 15.4rem;
  margin: 0.8rem auto 0;
  padding: 0.5rem 0.7rem 0.54rem 4.6rem;
  background: var(--azul);
  color: var(--creme);
  border: 0.022rem solid var(--preto);
  border-radius: 0.55rem;
  box-shadow: 0.16rem 0.16rem 0 var(--amarelo);
}

.vt-jogo-titulo {
  position: absolute;
  top: 50%;
  left: 0.6rem;
  width: 3.4rem;
  color: var(--creme);
  font-size: 0.52rem;
  font-weight: 900;
  font-stretch: 64%;
  line-height: 0.92;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.vt-jogo-titulo span {
  display: block;
  color: var(--amarelo);
  font-size: 0.86rem;
}

.vt-jogo p {
  padding-left: 0.5rem;
  border-left: 0.022rem solid rgba(251, 248, 234, 0.3);
  font-size: 0.34rem;
  line-height: 1.42;
}

.vt-jogo strong { color: var(--amarelo); font-weight: 800; }

/* como participar */
.vt-guia-kicker {
  max-width: 15.4rem;
  margin: 0.9rem auto 0;
}

.vt-acoes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.36rem;
  max-width: 15.4rem;
  margin: 0.34rem auto 0;
}

.vt-acao {
  padding: 0.36rem 0.34rem 0.4rem;
  background: #fff;
  border: 0.022rem solid var(--preto);
  border-radius: 0.4rem;
  box-shadow: 0.1rem 0.1rem 0 var(--amarelo);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vt-acao:hover {
  transform: translate(-0.03rem, -0.03rem);
  box-shadow: 0.13rem 0.13rem 0 var(--amarelo);
}

.vt-acao-ico {
  display: grid;
  place-items: center;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--azul);
  color: var(--amarelo);
}

.vt-acao-ico svg { width: 0.36rem; height: 0.36rem; }

.vt-acao--grupo .vt-acao-ico { background: var(--wa); color: #fff; }

.vt-acao p {
  margin-top: 0.2rem;
  font-size: 0.3rem;
  line-height: 1.36;
}

.vt-acao strong {
  display: block;
  margin-bottom: 0.04rem;
  color: var(--azul);
  font-size: 0.44rem;
  font-weight: 900;
  font-stretch: 66%;
  line-height: 1;
  text-transform: uppercase;
}

/* CTA final: cartão amarelo com o botão do WhatsApp metade pra fora (design.md §4.4) */
.vt-cta-grupo {
  position: relative;
  max-width: 11rem;
  margin: 1rem auto 0.5rem;
  padding: 0.44rem 0.6rem 0.8rem;
  background: var(--amarelo);
  border: 0.03rem solid var(--preto);
  border-radius: 0.55rem;
  box-shadow: 0.16rem 0.16rem 0 var(--azul);
  text-align: center;
}

.vt-cta-grupo-t {
  color: var(--azul);
  font-size: 0.7rem;
  font-weight: 900;
  font-stretch: 64%;
  line-height: 0.92;
  text-transform: uppercase;
}

.vt-cta-grupo-t span {
  display: block;
  color: var(--preto);
  font-size: 1.18rem;
}

.vt-btn-wa {
  position: absolute;
  left: 50%;
  bottom: -0.48rem;
  display: inline-flex;
  align-items: center;
  gap: 0.14rem;
  height: 0.96rem;
  padding: 0 0.56rem 0 0.4rem;
  background: var(--wa);
  color: #fff;
  border: 0.03rem solid var(--preto);
  border-radius: 2rem;
  box-shadow: 0 0.06rem 0.16rem rgba(19, 19, 18, 0.28);
  font-size: 0.42rem;
  font-weight: 900;
  font-stretch: 72%;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.vt-btn-wa svg { width: 0.44rem; height: 0.44rem; }

.vt-btn-wa:hover {
  background: var(--azul);
  transform: translateX(-50%) translateY(-0.03rem);
}

/* ============================================================
   SEÇÃO 5 — TEM DÚVIDAS? CHAT (azul). O interior do chat fica em chat.css
   ============================================================ */

.vt-duvidas {
  position: relative;
  z-index: 1;
  margin-top: -1rem;
  padding: 2.1rem 0 1.4rem;
  background: var(--azul);
  color: var(--creme);
  border-radius: 0 0 1rem 1rem;
  isolation: isolate;
}

.vt-duvidas::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 40% 55% at 70% 50%, rgba(76, 52, 255, 0.5), transparent 70%),
    radial-gradient(rgba(251, 248, 234, 0.08) 0.018rem, transparent 0.022rem) 0 0 / 0.3rem 0.3rem;
}

.vt-duvidas-grade {
  display: grid;
  grid-template-columns: 7.6rem 1fr;
  align-items: center;
  gap: 1rem;
}

/* título menor que o padrão: divide a largura com a janela do chat */
.vt-duvidas .vt-titulo-apoio { font-size: 0.82rem; }
.vt-duvidas .vt-titulo-grande { font-size: 1.42rem; white-space: nowrap; }

/* o que andam dizendo: balões de conversa */
.vt-boatos {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.14rem;
  margin-top: 0.4rem;
}

.vt-boatos li {
  position: relative;
  padding: 0.12rem 0.26rem;
  background: rgba(251, 248, 234, 0.1);
  border: 0.02rem solid rgba(251, 248, 234, 0.35);
  border-radius: 0.3rem 0.3rem 0.3rem 0.06rem;
  font-size: 0.34rem;
  font-weight: 900;
  font-stretch: 72%;
  line-height: 1.1;
  text-transform: uppercase;
}

.vt-boatos li:nth-child(2) { margin-left: 0.4rem; }
.vt-boatos li:nth-child(3) { margin-left: 0.8rem; }

.vt-duvidas-p {
  margin-top: 0.36rem;
  font-size: var(--texto-secao);
  line-height: 1.4;
}

.vt-duvidas-p strong { color: var(--amarelo); font-weight: 800; }

.vt-garantias {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.36rem;
}

.vt-garantias li {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  color: var(--amarelo);
  font-size: 0.24rem;
  font-weight: 900;
  font-stretch: 85%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vt-garantias svg { width: 0.32rem; height: 0.32rem; flex: none; }

/* janela do chat: altura fixa, a conversa rola por dentro. Ao perguntar, a página
   encaixa a janela logo abaixo do header (vitoria.js), por isso a altura desconta ele */
.vt-chat {
  height: min(11rem, calc(100vh - var(--header-h) - 1rem));
  height: min(11rem, calc(100svh - var(--header-h) - 1rem));
  min-height: 8rem;
  scroll-margin-top: calc(var(--header-h) + 0.5rem);
}

.vt-chat-espera {
  display: grid;
  place-items: center;
  height: 100%;
  background: #fff;
  color: var(--preto);
  border: 0.03rem solid var(--preto);
  border-radius: 0.5rem;
  box-shadow: 0.16rem 0.16rem 0 var(--amarelo);
  font-size: 0.3rem;
}

/* ============================================================
   RODAPÉ — igual ao das outras páginas, com a logo BQM
   ============================================================ */

.vt-rodape { padding-top: 0.8rem; }

.vt-rodape-logo {
  display: block;
  width: max-content;
  margin: 0 auto 0.3rem;
  padding: 0.12rem 0.2rem;
  background: var(--azul);
  border: 0.022rem solid var(--preto);
  border-radius: 0.3rem;
  box-shadow: 0.08rem 0.08rem 0 var(--preto);
  transform: rotate(-3deg);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vt-rodape-logo:hover { transform: rotate(2deg) scale(1.05); }
.vt-rodape-logo img { width: 1.5rem; height: auto; }

/* ============================================================
   Desktop: piso de escala para janelas estreitas
   ============================================================ */

@media (min-width: 721px) {
  html { font-size: max(min(calc(100vw / 24), 100px), 48px); }
}

/* ============================================================
   MOBILE — 720px; tablet em pé usa o mesmo layout (bloco abaixo)
   ============================================================ */

@media (max-width: 720px), (max-width: 1100px) and (orientation: portrait) {
  :root {
    --header-h: 1.24rem;
    --titulo-secao: 1.15rem;
    --titulo-apoio: 0.68rem;
    --texto-secao: 0.36rem;
  }

  .vt-wrap { padding: 0 0.4rem; }

  /* --- header --- */
  .vt-header { top: 0.18rem; }

  .vt-header-pilula {
    width: calc(100% - 0.36rem);
    gap: 0.16rem;
    padding: 0 0.12rem 0 0.3rem;
  }

  .vt-header-logo img { height: 0.86rem; }

  .vt-btn-grupo {
    margin-left: auto;
    height: 0.94rem;
    padding: 0 0.26rem 0 0.2rem;
    font-size: 0.3rem;
  }

  .vt-menu {
    display: grid;
    place-content: center;
    gap: 0.1rem;
    flex: none;
    width: 0.94rem;
    height: 0.94rem;
    border: 0.022rem solid rgba(251, 248, 234, 0.4);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
  }

  .vt-menu span {
    display: block;
    width: 0.36rem;
    height: 0.04rem;
    border-radius: 1rem;
    background: var(--creme);
    transition: transform 0.3s ease;
  }

  .vt-menu[aria-expanded="true"] span:first-child { transform: translateY(0.07rem) rotate(45deg); }
  .vt-menu[aria-expanded="true"] span:last-child { transform: translateY(-0.07rem) rotate(-45deg); }

  .vt-nav {
    position: absolute;
    top: calc(100% + 0.14rem);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0.14rem;
    background: var(--azul);
    border: 0.022rem solid var(--preto);
    border-radius: 0.5rem;
    box-shadow: 0.1rem 0.12rem 0 var(--amarelo);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.2rem);
    transition: opacity 0.25s ease, transform 0.3s ease, visibility 0.3s;
  }

  /* a sombra do menu escurece a página, mas não a logo nem os botões */
  .vt-header-logo,
  .vt-btn-grupo,
  .vt-menu { position: relative; z-index: 2; }
  .vt-nav { z-index: 1; }

  /* menu aberto escurece a página por trás */
  .vt-nav.is-aberto {
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: 0.1rem 0.12rem 0 var(--amarelo), 0 0 0 100vmax rgba(19, 19, 18, 0.5);
  }

  .vt-nav a {
    padding: 0.26rem 0.24rem;
    border-radius: 0.3rem;
    font-size: 0.46rem;
    font-stretch: 72%;
  }

  .vt-nav a + a { border-top: 0.018rem solid rgba(251, 248, 234, 0.15); }
  .vt-nav a::after { display: none; }

  /* --- hero: empilha; o vídeo fica entre o texto e o botão --- */
  .vt-hero {
    --u: 1rem;
    display: block;
    min-height: 0;
    padding: calc(var(--header-h) + 0.56rem) 0 1.3rem;
  }

  .vt-hero::before {
    background:
      radial-gradient(ellipse 80% 40% at 50% 62%, rgba(76, 52, 255, 0.6), transparent 70%),
      radial-gradient(rgba(251, 248, 234, 0.08) 0.018rem, transparent 0.022rem) 0 0 / 0.3rem 0.3rem;
  }

  .vt-hero::after {
    right: 50%;
    top: 10rem;
    width: 12rem;
    height: 12rem;
    margin: -6rem -6rem 0 0;
  }

  .vt-hero-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 0.4rem;
    text-align: center;
  }

  .vt-hero-texto { display: contents; }

  .vt-selo { order: 1; font-size: 0.26rem; padding: 0.08rem 0.24rem 0.08rem 0.18rem; }
  .vt-selo svg { width: 0.28rem; height: 0.28rem; }
  .vt-hero-titulo { order: 2; margin-top: 0.24rem; }
  .vt-hero-l1 { font-size: 1.86rem; }
  .vt-hero-l2, .vt-hero-l3 { font-size: 0.8rem; }
  .vt-hero-sub { order: 3; margin-top: 0.24rem; max-width: 7.2rem; font-size: 0.36rem; }
  .vt-hero-visual { order: 4; height: 7.5rem; margin: 0.5rem 0 0; }
  .vt-hero-ctas { order: 5; margin-top: 0.5rem; }

  .vt-btn-hero { height: 1.06rem; padding: 0 0.12rem 0 0.4rem; font-size: 0.38rem; }
  .vt-btn-hero-ico { width: 0.76rem; height: 0.76rem; }

  .vt-sticker { left: -0.7rem; top: 0.5rem; font-size: 0.34rem; }
  .vt-video-play { font-size: 0.32rem; }

  .vt-faixa { --faixa-h: 0.62rem; margin-left: -0.3rem; margin-right: -0.3rem; transform: rotate(-1.4deg); }
  .vt-faixa span { font-size: 0.3rem; gap: 0.24rem; padding-right: 0.24rem; }
  .vt-faixa span::after { font-size: 0.22rem; }

  /* --- o que muda --- */
  .vt-muda { margin-top: -0.6rem; padding: 1.5rem 0 1.2rem; border-radius: 0 0 0.6rem 0.6rem; }
  .vt-muda-sub { flex-direction: column; align-items: center; gap: 0; margin-top: 0.26rem; font-size: 0.42rem; line-height: 1.08; }

  .vt-numeros { grid-template-columns: 1fr; gap: 0.3rem; margin-top: 0.56rem; }

  /* no celular o número fica à esquerda e o rótulo à direita, numa linha */
  .vt-numero {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.3rem;
    padding: 0.26rem 0.34rem;
    border-radius: 0.4rem;
    box-shadow: 0.1rem 0.1rem 0 var(--amarelo);
  }

  .vt-numero strong { font-size: 1.6rem; min-width: 2.1rem; }
  .vt-numero > span { margin: 0; padding-right: 0.7rem; font-size: 0.4rem; line-height: 1.02; }
  .vt-numero-ico { top: 50%; bottom: auto; right: 0.3rem; width: 0.5rem; height: 0.5rem; transform: translateY(-50%); }

  .vt-quando { grid-template-columns: 1fr; gap: 0.36rem; margin-top: 0.8rem; text-align: center; }
  .vt-quando-titulo { font-size: 0.6rem; }
  .vt-quando-titulo span { font-size: 0.96rem; }
  .vt-quando-intro p { font-size: var(--texto-secao); }

  /* a trilha vira vertical */
  .vt-etapas { grid-template-columns: 1fr; gap: 0.24rem; text-align: left; }

  .vt-etapas::before,
  .vt-etapas::after {
    left: 0.5rem;
    right: auto;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 0.08rem;
    height: auto;
  }

  .vt-etapas::after { transform-origin: center top; }
  .js .vt-etapas:not(.is-in)::after { transform: scaleY(0); }

  /* lê na ordem: quando → quantas horas → o que muda */
  .vt-etapa {
    display: grid;
    grid-template-columns: 1.9rem auto 1fr;
    align-items: center;
    column-gap: 0.24rem;
    padding: 0.2rem 0.3rem 0.2rem 0.26rem;
  }

  .vt-etapas .vt-etapa-quando {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 0.16rem 0 0;
    background: none;
    border-right: 0.018rem solid rgba(19, 19, 18, 0.25);
    border-radius: 0;
    color: var(--azul);
    font-size: 0.27rem;
    line-height: 1.05;
    white-space: normal;
  }

  .vt-etapas .vt-etapa--hoje .vt-etapa-quando { color: rgba(19, 19, 18, 0.6); }
  .vt-etapas .vt-etapa--fim .vt-etapa-quando { color: var(--amarelo); border-color: rgba(251, 248, 234, 0.35); }

  .vt-etapa-horas { margin: 0; font-size: 1.06rem; min-width: 1.5rem; }
  .vt-etapa-txt { margin: 0; padding-right: 0.5rem; font-size: 0.32rem; }
  .vt-etapa-estrela { top: 50%; right: 0.24rem; width: 0.56rem; height: 0.56rem; margin-top: -0.28rem; }

  .vt-avisos { grid-template-columns: 1fr; gap: 0.34rem; margin-top: 0.6rem; }
  /* ícone ao lado do título; o texto ocupa a largura toda do card */
  .vt-aviso { padding: 0.3rem 0.34rem 0.36rem; border-radius: 0.4rem; box-shadow: 0.1rem 0.1rem 0 var(--amarelo); }
  .vt-aviso-ico { top: 0.3rem; left: 0.34rem; width: 0.64rem; height: 0.64rem; }
  .vt-aviso-ico svg { width: 0.34rem; height: 0.34rem; }
  .vt-aviso h3 { display: flex; align-items: center; min-height: 0.64rem; padding-left: 0.84rem; font-size: 0.56rem; }
  .vt-aviso p { margin-top: 0.16rem; font-size: var(--texto-secao); }
  .vt-semana { gap: 0.06rem; margin-top: 0.24rem; }
  .vt-semana li { height: 0.66rem; border-radius: 0.14rem; }
  .vt-semana-legenda { font-size: 0.22rem; }
  .vt-semana b { font-size: 0.24rem; }

  /* --- conquista --- */
  .vt-conquista { margin-top: -0.6rem; padding: 1.4rem 0 1.3rem; border-radius: 0 0 0.6rem 0.6rem; }
  .vt-conquista-grade { grid-template-columns: 1fr; gap: 0.6rem; }
  .vt-conquista-texto { order: -1; text-align: center; }
  .vt-conquista-lead { margin: 0.3rem auto 0; font-size: 0.48rem; }
  .vt-conquista-p { margin: 0.2rem auto 0; }
  .vt-foto { width: 82%; margin: 0.2rem auto 0; }
  .vt-foto-selo { top: -0.3rem; right: -0.3rem; width: 0.96rem; height: 0.96rem; }

  /* --- guia --- */
  .vt-so-cel { display: inline; }
  .vt-so-desk { display: none; }

  .vt-guia { margin-top: -0.6rem; padding: 1.4rem 0 1.2rem; border-radius: 0 0 0.6rem 0.6rem; }
  .vt-kicker { font-size: 0.24rem; letter-spacing: 0.12em; }

  .vt-jogo { margin-top: 0.6rem; padding: 0.4rem 0.4rem 0.44rem; border-radius: 0.45rem; box-shadow: 0.12rem 0.12rem 0 var(--amarelo); }
  .vt-jogo-titulo { position: static; width: auto; font-size: 0.48rem; transform: none; }
  .vt-jogo-titulo span { display: inline; font-size: inherit; }
  .vt-jogo p { margin-top: 0.2rem; padding: 0.2rem 0 0; border-left: 0; border-top: 0.022rem solid rgba(251, 248, 234, 0.3); font-size: var(--texto-secao); }

  .vt-guia-kicker { margin-top: 0.7rem; }
  .vt-acoes { grid-template-columns: 1fr; gap: 0.24rem; margin-top: 0.3rem; }

  .vt-acao {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.24rem;
    padding: 0.24rem 0.3rem 0.26rem 0.24rem;
    border-radius: 0.36rem;
  }

  .vt-acao-ico { width: 0.74rem; height: 0.74rem; }
  .vt-acao-ico svg { width: 0.38rem; height: 0.38rem; }
  .vt-acao p { margin: 0.02rem 0 0; font-size: 0.33rem; line-height: 1.32; }
  .vt-acao strong { margin-bottom: 0.06rem; font-size: 0.46rem; }

  .vt-cta-grupo { margin-top: 0.8rem; padding: 0.4rem 0.4rem 0.76rem; border-radius: 0.45rem; box-shadow: 0.12rem 0.12rem 0 var(--azul); }
  .vt-cta-grupo-t { font-size: 0.56rem; }
  .vt-cta-grupo-t span { font-size: 1.02rem; }
  .vt-btn-wa { height: 1.04rem; font-size: 0.42rem; }

  .vt-muda-cta { flex-direction: column; gap: 0.16rem; margin-top: 0.7rem; font-size: 0.5rem; }
  .vt-btn-duvida { height: 0.96rem; padding: 0 0.4rem 0 0.5rem; font-size: 0.38rem; }

  /* --- dúvidas: texto em cima, chat embaixo --- */
  .vt-duvidas { margin-top: -0.6rem; padding: 1.4rem 0 1.1rem; border-radius: 0 0 0.6rem 0.6rem; }
  .vt-duvidas-grade { grid-template-columns: 1fr; gap: 0.6rem; }
  .vt-duvidas-texto { text-align: center; }
  .vt-duvidas .vt-titulo-apoio { font-size: var(--titulo-apoio); }
  .vt-duvidas .vt-titulo-grande { font-size: var(--titulo-secao); }
  .vt-boatos { align-items: center; margin-top: 0.3rem; }
  .vt-boatos li { font-size: 0.32rem; }
  .vt-boatos li:nth-child(2), .vt-boatos li:nth-child(3) { margin-left: 0; }
  .vt-duvidas-p { max-width: 8rem; margin: 0.3rem auto 0; }
  .vt-garantias { align-items: center; margin-top: 0.3rem; }
  .vt-garantias li { font-size: 0.24rem; letter-spacing: 0.06em; }
  .vt-chat {
    height: calc(100vh - var(--header-h) - 0.7rem);
    height: calc(100svh - var(--header-h) - 0.7rem);
    min-height: 9rem;
    margin: 0 -0.12rem;
    scroll-margin-top: calc(var(--header-h) + 0.36rem);
  }

  .vt-rodape-logo img { width: 1.7rem; }
  .vt-rodape .wrap { width: auto; margin: 0 0.4rem; padding: 0.4rem 0.1rem 0; }
}

/* Tablet em pé: layout do celular numa coluna central, escala travada */
@media (min-width: 721px) and (max-width: 1100px) and (orientation: portrait) {
  html { font-size: 70px; }

  .vt-wrap,
  .vt-hero-in { max-width: 9.4rem; }

  .vt-header-pilula { width: min(9.4rem, calc(100% - 0.36rem)); }
  .vt-rodape .wrap { width: min(9.4rem, 100%); margin: 0 auto; }
}

/* ============================================================
   Movimento reduzido: tudo aparece parado
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }

  .vt-faixa-trilho,
  .vt-hero::after { animation: none; }
  .vt-confete { display: none; }
  html { scroll-behavior: auto; }
}