/* Página pública de apresentação do ads hero (docs/estrategia/LP-E-ACESSO-ANTECIPADO.md).
   Identidade de docs/design/IDENTIDADE-VISUAL.md: azul da logo, bloco azul, selo dividido, cantos
   retos, marinho para dar ritmo. Movimento remodelado a partir do estudo de 2026-10-02
   (docs/design/pesquisa/2026-10-02-motion-jitter.md): nada de código de terceiros.

   Regras da casa:
   - CSP style-src 'self': nenhum style= no HTML. O que varia por elemento (ordem da escada,
     posição do ponteiro, progresso da rolagem) chega por propriedade CSS posta pelo vitrine.js.
   - Sem JS, tudo aparece: o estado "escondido antes de surgir" só vale com html.mov, classe que o
     vitrine.js põe quando roda e quando a pessoa não pediu menos movimento.
   - prefers-reduced-motion desliga todo movimento, no fim do arquivo.
   Tokens iguais aos de docs/design/tokens.css e painel.css; ao mudar um, mude os outros. */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/static/tipografia/open-sans-latin-wght-normal-5.3.0.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("/static/tipografia/open-sans-latin-wght-italic-5.3.0.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/tipografia/geist-mono-latin-wght-normal-5.3.0.woff2") format("woff2");
}

:root {
  --azul-marca: #3c7fd2;
  --azul-bloco: #2f6ec0;
  --azul-acao: #2563b8;
  --azul-acao-hover: #1f57a3;
  --azul-claro: #8bb8f2;
  --azul-tinta: #e8f1fc;
  --azul-tinta-2: #f2f6fc;

  --fundo: #f7f9fc;
  --superficie: #ffffff;
  --superficie-alt: #eef3f9;
  --linha: #e1e7ef;
  --linha-forte: #c9d6e6;
  --marinho: #0b1f3d;
  --marinho-2: #12294b;
  --marinho-3: #071730;

  --tinta: #0e1a2b;
  --tinta-2: #44546a;
  --tinta-3: #5e6c80;
  --tinta-decor: #94a1b3;
  --tinta-marinho: #e8eef7;
  --tinta-marinho-2: #a9b8ce;
  --rotulo-marinho: #8597b0;

  --ok: #1e8a5a;
  --ok-texto: #177049;
  --ok-fundo: #e6f4ec;
  --aviso: #d19a1a;
  --aviso-texto: #8a5f00;
  --aviso-fundo: #fbf1dc;
  --critico: #a8282f;

  --fonte: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-numero: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --raio-selo: 4px;
  --raio: 8px;
  --raio-cartao: 16px;
  --sombra-elevada: 0 30px 60px -36px rgba(17, 52, 104, 0.35);
  --sombra-flutua: 0 40px 80px -40px rgba(11, 31, 61, 0.45), 0 2px 6px rgba(11, 31, 61, 0.06);

  /* Curvas. As molas são respostas de um oscilador amortecido, amostradas em linear():
     suave (ζ 0,82, passa 1%), padrão (ζ 0,68, passa 5%) e viva (ζ 0,5, passa 16%, só em peça
     pequena). Navegador sem linear() fica com a cubic-bezier de antes. */
  --curva: cubic-bezier(0.2, 0.7, 0.1, 1);
  --curva-bloco: cubic-bezier(0.7, 0, 0.2, 1);
  --curva-saida: cubic-bezier(0.4, 0, 0.2, 1);
  --mola-suave: var(--curva);
  --mola: var(--curva);
  --mola-viva: cubic-bezier(0.34, 1.56, 0.64, 1);

  --largura: 1200px;
  --margem: 24px;
  --altura-topo: 72px;
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --mola-suave: linear(0, 0.0152, 0.055, 0.1118, 0.1796, 0.2536, 0.3299, 0.4059, 0.4793, 0.5487, 0.6132, 0.6721, 0.7252, 0.7725, 0.8141, 0.8503, 0.8814, 0.9079, 0.9301, 0.9486, 0.9638, 0.9761, 0.9859, 0.9935, 0.9994, 1.0037, 1.0069, 1.009, 1.0103, 1.0109, 1.0111, 1.0109, 1.0104, 1.0098, 1.009, 1.0082, 1.0074, 1.0065, 1.0057, 1.005, 1.0042, 1.0036, 1.003, 1.0025, 1.002, 1.0016, 1.0013, 1);
    --mola: linear(0, 0.022, 0.0791, 0.16, 0.255, 0.3566, 0.4587, 0.5571, 0.6485, 0.7309, 0.8032, 0.865, 0.9164, 0.9581, 0.9907, 1.0152, 1.0327, 1.0444, 1.0511, 1.054, 1.0539, 1.0515, 1.0476, 1.0428, 1.0374, 1.0318, 1.0263, 1.0212, 1.0165, 1.0123, 1.0087, 1.0057, 1.0032, 1.0012, 0.9997, 0.9986, 0.9978, 0.9974, 0.9971, 0.9971, 0.9971, 0.9973, 0.9976, 0.9978, 0.9981, 0.9984, 0.9987, 1);
    --mola-viva: linear(0, 0.0332, 0.1201, 0.2423, 0.3838, 0.531, 0.6731, 0.8024, 0.9136, 1.004, 1.0727, 1.1206, 1.1494, 1.1619, 1.1612, 1.1503, 1.1325, 1.1105, 1.0867, 1.063, 1.0409, 1.0214, 1.0052, 0.9925, 0.9833, 0.9773, 0.9742, 0.9734, 0.9746, 0.9771, 0.9804, 0.9842, 0.9881, 0.9919, 0.9952, 0.9981, 1.0004, 1.0022, 1.0034, 1.004, 1.0043, 1.0043, 1.0039, 1.0034, 1.0028, 1.0022, 1.0016, 1);
  }
}

/* ── Base ─────────────────────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-topo) + 16px);
}

body.vitrine {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.vitrine ::selection {
  background: var(--azul-marca);
  color: #fff;
}

/* Resets com especificidade zero (:where), para qualquer classe de componente vencer. */
:where(.vitrine) img {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(.vitrine) a {
  color: var(--azul-acao);
  text-decoration: none;
}

:where(.vitrine) :where(h1, h2, h3) {
  margin: 0;
  font-weight: 800;
  color: inherit;
}

:where(.vitrine) p {
  margin: 0;
}

.vitrine :focus-visible {
  outline: 3px solid var(--azul-marca);
  outline-offset: 3px;
  border-radius: 4px;
}

.v-mono {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.v-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--marinho);
  color: #fff !important;
  border-radius: var(--raio);
  font-weight: 700;
  transition: top 0.3s var(--curva);
}

.pular:focus {
  top: 12px;
}

/* ── Barra de progresso da rolagem ────────────────────────────────────────────────────────── */

.v-progresso {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}

.v-progresso span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--azul-bloco), var(--azul-marca));
  transform-origin: 0 50%;
  transform: scaleX(var(--rolagem, 0));
}

@supports (animation-timeline: scroll()) {
  .v-progresso span {
    animation: v-encher linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes v-encher {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ── Topo ─────────────────────────────────────────────────────────────────────────────────── */

.v-topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--altura-topo);
  transition:
    background 0.5s var(--curva),
    box-shadow 0.5s var(--curva),
    transform 0.6s var(--mola-suave);
}

.v-topo[data-rolou] {
  background: rgba(247, 249, 252, 0.82);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 1px 0 var(--linha);
}

.v-topo[data-escondido] {
  transform: translateY(-100%);
}

.v-topo-dentro {
  max-width: calc(var(--largura) + 2 * var(--margem));
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--margem);
  display: flex;
  align-items: center;
  gap: 32px;
}

.v-marca img {
  width: 142px;
  height: auto;
}

.v-nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
}

.v-nav a,
.v-link-entrar {
  position: relative;
  color: var(--tinta-2);
  font-size: 15px;
  font-weight: 600;
  transition: color 0.3s;
}

.v-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--azul-marca);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.45s var(--curva);
}

.v-nav a:hover,
.v-link-entrar:hover {
  color: var(--tinta);
}

.v-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.v-topo-acoes {
  display: flex;
  align-items: center;
  gap: 20px;
}

.v-menu {
  display: none;
  margin-left: auto;
}

.v-menu summary {
  list-style: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 6px;
  cursor: pointer;
  border-radius: var(--raio);
}

.v-menu summary::-webkit-details-marker {
  display: none;
}

.v-menu summary span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--tinta);
  border-radius: 2px;
  transition: transform 0.45s var(--mola);
}

.v-menu[open] summary span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.v-menu[open] summary span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

.v-menu-gaveta {
  position: absolute;
  top: var(--altura-topo);
  left: 12px;
  right: 12px;
  display: grid;
  gap: 4px;
  padding: 16px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-flutua);
  animation: v-gaveta 0.5s var(--mola) both;
}

.v-menu-gaveta a {
  padding: 12px 10px;
  color: var(--tinta);
  font-weight: 600;
  border-radius: var(--raio);
}

.v-menu-gaveta a.v-botao {
  margin-top: 8px;
  justify-content: center;
  color: #fff;
}

@keyframes v-gaveta {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

/* ── Botões ───────────────────────────────────────────────────────────────────────────────── */

.v-botao {
  --mx: 0px;
  --my: 0px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--azul-acao);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  border-radius: var(--raio);
  white-space: nowrap;
  transform: translate(var(--mx), var(--my));
  transition:
    background 0.35s,
    box-shadow 0.5s var(--curva),
    transform 0.7s var(--mola);
  will-change: transform;
}

.v-botao svg {
  transition: transform 0.6s var(--mola-viva);
}

.v-botao:hover {
  background: var(--azul-acao-hover);
  box-shadow: 0 18px 36px -16px rgba(37, 99, 184, 0.65);
}

.v-botao:hover svg {
  transform: translateX(4px);
}

.v-botao:active {
  transform: translate(var(--mx), var(--my)) scale(0.97);
}

.v-botao-pequeno {
  padding: 11px 16px;
  font-size: 14px;
}

.v-botao-grande {
  padding: 19px 28px;
  font-size: 17px;
}

.v-botao-claro {
  background: #fff;
  color: var(--marinho) !important;
}

.v-botao-claro:hover {
  background: var(--azul-tinta);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5);
}

.v-botao-linha {
  display: inline-flex;
  align-items: center;
  padding: 18px 24px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  color: var(--tinta) !important;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  transition:
    border-color 0.35s,
    background 0.35s;
}

.v-botao-linha:hover {
  border-color: var(--azul-marca);
  background: var(--azul-tinta-2);
}

.v-botao-linha-claro {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff !important;
}

.v-botao-linha-claro:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* ── Selo dividido, título e texto ────────────────────────────────────────────────────────── */

.v-selo {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-selo);
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-2);
  background: var(--superficie);
}

.v-selo > span {
  padding: 6px 10px;
}

.v-selo .v-selo-num {
  background: var(--azul-bloco);
  color: #fff;
  font-family: var(--fonte-numero);
  letter-spacing: 0.04em;
}

.v-selo-escuro {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: var(--tinta-marinho-2);
}

.v-titulo {
  font-size: clamp(44px, 5.6vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin-top: 26px;
}

.v-titulo em {
  display: block;
}

:where(.vitrine) h2 {
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin-top: 20px;
  text-wrap: balance;
}

.vitrine h1 em,
.vitrine h2 em,
.v-frase em {
  font-style: italic;
  color: var(--azul-marca);
}

:where(.vitrine) h3 {
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.v-lead {
  margin-top: 34px;
  max-width: 560px;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--tinta-2);
}

.v-lead strong {
  color: var(--tinta);
}

.v-secao-lead {
  margin-top: 30px;
  max-width: 640px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--tinta-2);
}

.v-exemplo {
  margin-top: 14px;
  font-family: var(--fonte-numero);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-decor);
}

/* O bloco azul: a assinatura da marca (o "ads" da logo), abrindo da esquerda. */
.bloco {
  position: relative;
  display: inline-block;
  padding: 0 0.16em 0.04em;
  margin: 0 0.04em;
  color: #fff;
  font-style: italic;
}

.bloco-fundo {
  position: absolute;
  inset: 0.06em 0 0;
  background: var(--azul-bloco);
  transform-origin: 0 50%;
}

.bloco-texto {
  position: relative;
}

/* ── Palavra a palavra: cada palavra sobe de dentro de uma máscara ───────────────────────── */

.v-p {
  display: inline-block;
  overflow: clip;
  overflow-clip-margin: 0.12em;
  vertical-align: top;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}

.v-p > span {
  display: inline-block;
}

/* ── Herói ────────────────────────────────────────────────────────────────────────────────── */

.v-heroi {
  --x: 70%;
  --y: 30%;
  position: relative;
  isolation: isolate;
  min-height: min(100svh, 980px);
  padding: calc(var(--altura-topo) + 44px) var(--margem) 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: clip;
}

.v-grade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(11, 31, 61, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 31, 61, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
}

.v-halo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    600px circle at var(--x) var(--y),
    rgba(60, 127, 210, 0.16),
    transparent 65%
  );
  transition: background-position 0.2s;
}

.v-heroi-dentro {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 64px;
  align-items: center;
}

.v-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
}

.v-cta-centro {
  justify-content: center;
}

.v-garantias {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--tinta-3);
}

.v-garantias li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.v-garantias li::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ok-fundo)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23177049' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 16px no-repeat;
}

.v-heroi-cena {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 460px;
}

.v-orbita {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.v-chip {
  position: absolute;
  padding: 9px 14px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-elevada);
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta-2);
  white-space: nowrap;
}

.v-chip::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 2px;
  background: var(--azul-marca);
  vertical-align: 1px;
}

.v-chip-1 {
  top: 22%;
  left: 0;
}

.v-chip-2 {
  top: 2%;
  right: 12%;
}

.v-chip-3 {
  bottom: 16%;
  left: 0;
}

.v-venda {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  justify-self: end;
  width: min(400px, 100%);
  padding: 26px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-flutua);
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.9s var(--mola-suave);
  will-change: transform;
}

.v-venda-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.v-venda-rotulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta-2);
}

.v-estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: var(--raio-selo);
  font-size: 12px;
  font-weight: 700;
}

.v-estado i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.v-estado-ok {
  background: var(--ok-fundo);
  color: var(--ok-texto);
}

/* Trilho do clique ao lucro: o fio enche e cada etapa acende quando ele passa. */
.v-trilho {
  --duracao: 7s;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 26px 0 22px;
  padding: 0;
  list-style: none;
}

.v-trilho::before,
.v-trilho::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--linha);
}

.v-trilho::after {
  background: var(--azul-marca);
  transform-origin: 0 50%;
  transform: scaleX(1);
}

.v-trilho li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tinta-3);
}

.v-trilho li::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--azul-marca);
  box-shadow: 0 0 0 4px var(--superficie);
}

.v-venda-conta {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px dashed var(--linha-forte);
}

.v-venda-conta div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.v-venda-conta dt {
  color: var(--tinta-2);
  font-size: 14px;
}

.v-venda-conta dd {
  margin: 0;
  font-size: 15px;
}

.v-venda-conta .v-menos dd {
  color: var(--tinta-3);
}

.v-venda-conta .v-sobra {
  padding: 12px 14px;
  margin: 4px -14px 0;
  border-radius: var(--raio);
  background: var(--azul-tinta-2);
}

.v-venda-conta .v-sobra dt {
  color: var(--tinta);
  font-weight: 700;
}

.v-venda-conta .v-sobra dd {
  font-size: 22px;
  font-weight: 600;
  color: var(--azul-acao);
}

.v-venda-origem {
  margin-top: 16px;
  font-size: 13px;
  color: var(--tinta-3);
}

.v-venda-origem strong {
  color: var(--tinta-2);
}

.v-rolar {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border: 2px solid var(--linha-forte);
  border-radius: 14px;
}

.v-rolar span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--azul-marca);
}

/* ── Faixa: para quem é ───────────────────────────────────────────────────────────────────── */

.v-faixa {
  padding: 24px 0 16px;
  text-align: center;
}

.v-faixa-titulo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
  padding: 0 var(--margem);
}

.v-letreiro {
  margin-top: 22px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.v-letreiro-trilho {
  display: flex;
  width: max-content;
  gap: 56px;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tinta-decor);
}

.v-letreiro-trilho span {
  display: inline-flex;
  align-items: center;
  gap: 56px;
}

.v-letreiro-trilho span::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--azul-claro);
}

/* ── Seções ───────────────────────────────────────────────────────────────────────────────── */

.v-secao {
  padding: 128px var(--margem);
}

.vitrine .v-secao > *,
.vitrine .v-perguntas-dentro,
.vitrine .v-controle-dentro {
  max-width: var(--largura);
  margin-left: auto;
  margin-right: auto;
}

.v-faixa + .v-secao {
  padding-top: 80px;
}

.v-secao-alt {
  background: var(--superficie);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}

.v-secao-cabeca {
  margin-bottom: 64px;
}

.v-secao-cabeca h2 {
  max-width: 860px;
}

.v-centro {
  text-align: center;
}

.v-centro h2,
.v-centro .v-secao-lead {
  margin-left: auto;
  margin-right: auto;
}

/* Cartões com luz que segue o ponteiro (data-luz põe --x e --y). */
.v-dor,
.v-recurso,
.v-cofres li {
  --x: 50%;
  --y: 0%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 30px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  transition:
    transform 0.7s var(--mola),
    box-shadow 0.7s var(--curva),
    border-color 0.5s;
}

.v-dor::before,
.v-recurso::before,
.v-cofres li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    420px circle at var(--x) var(--y),
    rgba(60, 127, 210, 0.11),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.5s;
}

.v-dor:hover,
.v-recurso:hover,
.v-cofres li:hover {
  transform: translateY(-6px);
  border-color: #b9d1f1;
  box-shadow: var(--sombra-elevada);
}

.v-dor:hover::before,
.v-recurso:hover::before,
.v-cofres li:hover::before {
  opacity: 1;
}

.v-dor p,
.v-recurso p,
.v-cofres p {
  margin-top: 10px;
  color: var(--tinta-2);
  font-size: 15px;
  line-height: 1.6;
}

/* ── Dor ──────────────────────────────────────────────────────────────────────────────────── */

.v-dores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.v-dor-arte {
  position: relative;
  height: 88px;
  margin-bottom: 24px;
  border-radius: var(--raio);
  background: var(--fundo);
  border: 1px solid var(--linha);
  overflow: hidden;
}

/* Gerenciador e caixa: duas barras que deviam andar juntas e não andam. */
.v-arte-diverge span {
  position: absolute;
  left: 16px;
  height: 14px;
  border-radius: 3px;
  transform-origin: 0 50%;
}

.v-arte-diverge span::after {
  position: absolute;
  left: calc(100% + 8px);
  top: -1px;
  font-size: 11px;
  font-weight: 700;
  color: var(--tinta-3);
  white-space: nowrap;
}

.v-barra-a {
  top: 22px;
  width: 62%;
  background: var(--azul-claro);
}

.v-barra-a::after {
  content: "gerenciador";
}

.v-barra-b {
  top: 50px;
  width: 30%;
  background: var(--azul-bloco);
}

.v-barra-b::after {
  content: "caixa";
}

/* Faturamento que encolhe quando os custos saem. */
.v-arte-encolhe span {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 36px;
  height: 16px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--azul-bloco) 0 52%, rgba(168, 40, 47, 0.28) 52% 100%);
}

.v-arte-encolhe span::before,
.v-arte-encolhe span::after {
  position: absolute;
  top: -20px;
  font-size: 11px;
  font-weight: 700;
  color: var(--tinta-3);
}

.v-arte-encolhe span::before {
  content: "sobra";
  left: 0;
}

.v-arte-encolhe span::after {
  content: "custos";
  right: 0;
}

/* Interruptor que desliga cedo demais. */
.v-arte-desliga span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 34px;
  margin: -17px 0 0 -32px;
  border-radius: 17px;
  background: var(--linha-forte);
}

.v-arte-desliga span::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(11, 31, 61, 0.2);
}

/* ── Como funciona: a história presa na rolagem ───────────────────────────────────────────── */

.v-historia {
  position: relative;
  background: var(--marinho);
  color: var(--tinta-marinho);
}

.v-historia-fixa {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: 120px var(--margem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.v-historia h2 {
  color: #fff;
  font-size: clamp(32px, 3.8vw, 52px);
}

.v-historia h2 em,
.v-controle h2 em,
.v-final h2 em,
.v-honestidade em {
  color: var(--azul-claro);
}

.v-passos {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.v-passo {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 18px 18px 18px 14px;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition:
    opacity 0.5s var(--curva),
    border-color 0.5s,
    background 0.5s;
}

.v-passo-num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--raio);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--fonte-numero);
  font-size: 14px;
  color: var(--tinta-marinho-2);
  transition:
    background 0.5s,
    color 0.5s,
    border-color 0.5s,
    transform 0.6s var(--mola-viva);
}

.v-passo h3 {
  color: #fff;
  font-size: 18px;
}

.v-passo p {
  margin-top: 6px;
  color: var(--tinta-marinho-2);
  font-size: 15px;
  line-height: 1.6;
}

.v-historia-palco {
  position: relative;
  min-height: 440px;
  display: grid;
  gap: 20px;
}

.v-cena {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  padding: 28px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.v-cena-legenda {
  font-family: var(--fonte-numero);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rotulo-marinho);
}

.v-historia-barra {
  display: none;
}

/* Cena 1: o link com a marca própria. */
.v-link-pilula {
  display: flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--raio);
  background: #fff;
  color: var(--tinta);
  font-family: var(--fonte-numero);
  font-size: 14px;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
}

.v-link-dominio {
  padding: 14px 16px;
  white-space: nowrap;
}

.v-link-marca {
  padding: 14px 16px;
  background: var(--azul-bloco);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

.v-link-pulsos {
  position: relative;
  width: 140px;
  height: 140px;
}

.v-link-pulsos span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--azul-marca);
  opacity: 0;
}

.v-link-pulsos::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--azul-marca);
  box-shadow: 0 0 24px var(--azul-marca);
}

/* Cena 2: o recibo que vira sobra. */
.v-recibo {
  width: min(340px, 100%);
  padding: 22px;
  background: #fff;
  color: var(--tinta);
  border-radius: 14px;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
}

.v-recibo-linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px dashed var(--linha);
}

.v-recibo-linha.v-menos {
  color: var(--tinta-3);
}

.v-recibo-linha.v-sobra {
  border-bottom: 0;
  margin-top: 6px;
  font-weight: 700;
}

.v-recibo-linha.v-sobra b {
  color: var(--azul-acao);
  font-size: 18px;
}

/* Cena 3: a venda volta para as plataformas. */
.v-devolve {
  position: relative;
  width: min(320px, 100%);
  aspect-ratio: 32 / 20;
}

.v-devolve-fios {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.v-devolve-fios path {
  fill: none;
  stroke: var(--azul-marca);
  stroke-width: 2;
  stroke-dasharray: 260;
  stroke-dashoffset: 0;
}

.v-devolve-centro,
.v-devolve-alvo {
  position: absolute;
  z-index: 1;
  padding: 10px 14px;
  border-radius: var(--raio);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.v-devolve-centro {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--azul-bloco);
  color: #fff;
}

.v-devolve-alvo {
  background: #fff;
  color: var(--marinho);
}

.v-alvo-meta {
  left: 0;
  top: 20%;
  transform: translate(-30%, -50%);
}

.v-alvo-google {
  right: 0;
  top: 80%;
  transform: translate(30%, -50%);
}

/* Cena 4: a sugestão com o motivo. */
.v-sugestao {
  width: min(360px, 100%);
  padding: 22px;
  background: #fff;
  color: var(--tinta);
  border-radius: 14px;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
}

.v-sugestao-titulo {
  font-weight: 800;
  font-size: 16px;
}

.v-sugestao-alvo {
  margin-top: 4px;
  font-size: 13px;
  color: var(--tinta-3);
}

.v-sugestao ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.v-sugestao li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--linha);
  font-size: 14px;
  color: var(--tinta-2);
}

.v-sugestao li b {
  color: var(--tinta);
}

.v-sugestao-botoes {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.v-falso-botao {
  padding: 10px 16px;
  border-radius: var(--raio);
  background: var(--azul-acao);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.v-falso-linha {
  background: transparent;
  color: var(--tinta);
  border: 1px solid var(--linha-forte);
}

/* ── Antes e depois ───────────────────────────────────────────────────────────────────────── */

.v-antes-depois {
  max-width: 760px !important;
  padding: 36px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 20px;
  box-shadow: var(--sombra-elevada);
}

.v-alternador {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 10px;
  background: var(--superficie-alt);
}

.v-alternador button {
  position: relative;
  z-index: 1;
  min-height: 46px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  color: var(--tinta-2);
  cursor: pointer;
  border-radius: var(--raio);
  transition: color 0.4s;
}

.v-alternador button[aria-pressed="true"] {
  color: #fff;
}

.v-alternador-marca {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--raio);
  background: var(--azul-bloco);
  transition: transform 0.7s var(--mola);
}

[data-estado="com"] .v-alternador-marca {
  transform: translateX(100%);
}

[data-estado="sem"] .v-alternador-marca {
  background: var(--tinta-2);
}

.v-rotinas {
  display: grid;
  margin-top: 26px;
}

.v-rotina {
  grid-area: 1 / 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.v-rotina li {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--raio);
  font-size: 16px;
  transition:
    opacity 0.5s var(--curva),
    transform 0.7s var(--mola),
    filter 0.5s;
}

.v-rotina-hora {
  font-size: 13px;
  color: var(--tinta-3);
}

.v-rotina-sem li {
  color: var(--tinta-2);
  background: repeating-linear-gradient(-45deg, transparent 0 8px, rgba(11, 31, 61, 0.025) 8px 16px);
}

.v-rotina-com li {
  color: var(--tinta);
  font-weight: 600;
  background: var(--azul-tinta-2);
}

[data-estado="com"] .v-rotina-sem li,
[data-estado="sem"] .v-rotina-com li {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(4px);
  pointer-events: none;
}

.v-rotina li:nth-child(2) {
  transition-delay: 0.06s;
}

.v-rotina li:nth-child(3) {
  transition-delay: 0.12s;
}

.v-rotina li:nth-child(4) {
  transition-delay: 0.18s;
}

/* ── Recursos ─────────────────────────────────────────────────────────────────────────────── */

.v-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.v-filtro button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta-2);
  cursor: pointer;
  transition:
    background 0.35s,
    color 0.35s,
    border-color 0.35s,
    transform 0.5s var(--mola-viva);
}

.v-filtro button:hover {
  border-color: var(--azul-marca);
}

.v-filtro button:active {
  transform: scale(0.96);
}

.v-filtro button[aria-pressed="true"] {
  background: var(--marinho);
  border-color: var(--marinho);
  color: #fff;
}

.v-ponto {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.v-ponto-ok {
  background: var(--ok);
}

.v-ponto-chegando {
  background: var(--azul-marca);
}

.v-ponto-roadmap {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--tinta-decor);
}

.v-recursos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v-recurso {
  padding: 26px;
}

.v-recurso[hidden] {
  display: none;
}

.v-recurso-estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  padding: 5px 9px;
  border-radius: var(--raio-selo);
  font-size: 12px;
  font-weight: 700;
}

.v-recurso-no-ar {
  background: var(--ok-fundo);
  color: var(--ok-texto);
}

.v-recurso-chegando {
  background: var(--azul-tinta);
  color: var(--azul-acao);
}

.v-recurso-roadmap {
  background: var(--superficie-alt);
  color: var(--tinta-2);
}

.v-recurso-roadmap .v-ponto {
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}

/* ── Controle ─────────────────────────────────────────────────────────────────────────────── */

.v-controle {
  background: var(--marinho);
  color: var(--tinta-marinho);
}

.v-controle-dentro {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
}

.v-controle h2 {
  color: #fff;
}

.v-controle .v-secao-cabeca {
  margin-bottom: 0;
}

.v-controle .v-secao-lead {
  color: var(--tinta-marinho-2);
}

.v-checklist {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.v-checklist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--tinta-marinho);
}

.v-checklist li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 6px;
  background: var(--azul-bloco)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 18px no-repeat;
}

.v-proposta {
  --rx: 0deg;
  --ry: 0deg;
  padding: 28px;
  background: #fff;
  color: var(--tinta);
  border-radius: 18px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.9s var(--mola-suave);
}

.v-proposta-topo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 16px;
}

.v-proposta-topo .v-recurso-estado {
  margin: 0;
}

.v-proposta-alvo {
  margin-top: 6px;
  font-size: 14px;
  color: var(--tinta-3);
}

.v-medidor {
  margin-top: 24px;
}

.v-medidor-trilho {
  position: relative;
  height: 12px;
  border-radius: 3px;
  background: var(--superficie-alt);
}

.v-medidor-valor {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 38.75%;
  border-radius: 3px;
  background: var(--aviso);
  transform-origin: 0 50%;
}

.v-medidor-limite {
  position: absolute;
  left: 62.5%;
  top: -6px;
  bottom: -6px;
  width: 2px;
  background: var(--tinta);
}

.v-medidor-legenda {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 13px;
  color: var(--tinta-2);
}

.v-proposta-motivos {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.v-proposta-motivos li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--linha);
  font-size: 14px;
  color: var(--tinta-2);
}

.v-proposta-motivos b {
  color: var(--tinta);
}

/* ── Segurança ────────────────────────────────────────────────────────────────────────────── */

.v-cofres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v-cofre-icone {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--azul-tinta);
  transition: transform 0.7s var(--mola-viva), background 0.4s;
}

.v-cofre-icone::before {
  content: "";
  width: 26px;
  height: 26px;
  background: var(--azul-bloco);
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
  transition: background 0.4s;
}

.v-cofres li:hover .v-cofre-icone {
  transform: rotate(-6deg) scale(1.08);
  background: var(--azul-bloco);
}

.v-cofres li:hover .v-cofre-icone::before {
  background: #fff;
}

.v-icone-digital {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M5.6 6.2A9 9 0 0 1 21 12.5M3.2 10.4A9 9 0 0 0 3 12.5c0 1.6.3 3.2 1 4.6'/%3E%3Cpath d='M7 18.6a12 12 0 0 1-1-6.1 6 6 0 0 1 12 0c0 1.4-.1 2.8-.4 4.1'/%3E%3Cpath d='M9.5 20.2A13 13 0 0 1 9 12.5a3 3 0 0 1 6 0c0 2.9-.4 5.6-1.3 8'/%3E%3Cpath d='M12 12.5c0 3-.4 5.8-1.3 8.3'/%3E%3C/svg%3E");
}

.v-icone-chave {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M10.8 12.2L20 3M16 7l3 3M14 9l2 2'/%3E%3C/svg%3E");
}

.v-icone-mapa {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
}

.v-icone-escudo {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.3-8 9-4.6-.7-8-4.5-8-9V6l8-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

.v-icone-trilha {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14v16H5zM9 9h6M9 13h6M9 17h3'/%3E%3C/svg%3E");
}

.v-icone-pessoas {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18 14.5a6.5 6.5 0 0 1 3.5 5.5'/%3E%3C/svg%3E");
}

/* ── Contraste ────────────────────────────────────────────────────────────────────────────── */

.v-contraste {
  border: 1px solid var(--linha);
  border-radius: 18px;
  overflow: hidden;
  background: var(--superficie);
}

.v-contraste-cabeca,
.v-contraste-linha {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1.2fr;
}

.v-contraste-cabeca span {
  padding: 16px 24px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
  background: var(--fundo);
}

.v-contraste-cabeca span:last-child {
  background: var(--azul-bloco);
  color: #fff;
}

.v-contraste-linha {
  border-top: 1px solid var(--linha);
}

.v-contraste-linha > span {
  padding: 22px 24px;
  font-size: 15px;
  line-height: 1.5;
}

.v-contraste-tema {
  font-weight: 700;
}

.v-contraste-mercado {
  color: var(--tinta-3);
  display: flex;
  gap: 10px;
}

.v-contraste-mercado::before,
.v-contraste-nosso::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
}

.v-contraste-mercado::before {
  background: var(--superficie-alt)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5l5 5M10.5 5.5l-5 5' stroke='%235E6C80' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 16px no-repeat;
}

.v-contraste-nosso {
  display: flex;
  gap: 10px;
  font-weight: 600;
  background: var(--azul-tinta-2);
}

.v-contraste-nosso::before {
  background: var(--azul-bloco)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 16px no-repeat;
}

/* ── Honestidade ──────────────────────────────────────────────────────────────────────────── */

.v-honestidade {
  padding: 140px var(--margem);
  background: var(--marinho-2);
  color: var(--tinta-marinho-2);
  text-align: center;
}

.v-honestidade-dentro {
  max-width: 980px;
  margin: 0 auto;
}

.v-frase {
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #fff;
  text-wrap: balance;
}

.v-honestidade .v-secao-lead {
  margin: 28px auto 0;
  color: var(--tinta-marinho-2);
}

/* ── Perguntas ────────────────────────────────────────────────────────────────────────────── */

.v-perguntas-dentro {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
  align-items: start;
}

.v-perguntas-dentro .v-secao-cabeca {
  position: sticky;
  top: calc(var(--altura-topo) + 32px);
  margin-bottom: 0;
}

.v-faq {
  display: grid;
  gap: 10px;
}

.v-pergunta {
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--superficie);
  transition:
    border-color 0.4s,
    box-shadow 0.6s var(--curva);
  interpolate-size: allow-keywords;
}

.v-pergunta[open] {
  border-color: #b9d1f1;
  box-shadow: var(--sombra-elevada);
}

.v-pergunta summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 18px 22px;
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
}

.v-pergunta summary::-webkit-details-marker {
  display: none;
}

.v-pergunta summary i {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--raio);
  background: var(--superficie-alt);
  transition:
    transform 0.6s var(--mola-viva),
    background 0.4s;
}

.v-pergunta summary i::before,
.v-pergunta summary i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--tinta);
  transition: background 0.4s;
}

.v-pergunta summary i::after {
  transform: rotate(90deg);
}

.v-pergunta[open] summary i {
  transform: rotate(45deg);
  background: var(--azul-bloco);
}

.v-pergunta[open] summary i::before,
.v-pergunta[open] summary i::after {
  background: #fff;
}

.v-resposta {
  padding: 0 22px 22px;
  color: var(--tinta-2);
  line-height: 1.65;
}

.v-pergunta::details-content {
  height: 0;
  overflow: clip;
  transition:
    height 0.55s var(--mola-suave),
    content-visibility 0.55s allow-discrete;
}

.v-pergunta[open]::details-content {
  height: auto;
}

/* ── Chamada final ────────────────────────────────────────────────────────────────────────── */

.v-final {
  --x: 50%;
  --y: 40%;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 160px var(--margem);
  background: var(--marinho);
  color: var(--tinta-marinho-2);
  text-align: center;
}

.v-final .v-grade {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
}

.v-final::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(640px circle at var(--x) var(--y), rgba(60, 127, 210, 0.28), transparent 65%);
}

.v-final-dentro {
  max-width: 900px;
  margin: 0 auto;
}

.v-final h2 {
  color: #fff;
  font-size: clamp(36px, 4.8vw, 66px);
}

.v-final .v-secao-lead {
  margin: 26px auto 0;
  color: var(--tinta-marinho-2);
}

.v-final .v-cta {
  margin-top: 44px;
}

/* ── Rodapé ───────────────────────────────────────────────────────────────────────────────── */

.v-rodape {
  padding: 72px var(--margem) 32px;
  background: var(--marinho-3);
  color: var(--tinta-marinho-2);
}

.v-rodape-dentro {
  max-width: var(--largura);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
}

.v-rodape-marca .v-marca-texto {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
  max-width: none;
  font-size: 24px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1;
}

.v-marca-ads {
  padding: 4px 8px 6px;
  background: var(--azul-marca);
  color: #fff;
}

.v-marca-hero {
  padding: 4px 8px 6px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-left: 0;
  color: var(--azul-claro);
}

.v-rodape-marca p {
  margin-top: 18px;
  max-width: 320px;
  font-size: 14px;
  line-height: 1.6;
}

.v-rodape-col {
  display: grid;
  align-content: start;
  gap: 10px;
}

.v-rodape-titulo {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rotulo-marinho);
}

.v-rodape-col a {
  color: var(--tinta-marinho);
  font-size: 15px;
  transition: color 0.3s;
}

.v-rodape-col a:hover {
  color: #fff;
}

.v-rodape-fim {
  max-width: var(--largura);
  margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
}

/* ══ Movimento ══════════════════════════════════════════════════════════════════════════════
   Tudo daqui para baixo é movimento. Entrada do herói é CSS puro (não espera JS e não atrasa
   o LCP além de 0,6 s); o resto depende de html.mov, que o vitrine.js põe. */

/* Entrada do herói em escada. */
.v-entra {
  animation: v-subir 1.1s var(--mola-suave) both;
  animation-delay: calc(0.12s + var(--ordem, 0) * 0.09s);
}

[data-ordem="0"] {
  --ordem: 0;
}

[data-ordem="1"] {
  --ordem: 1;
}

[data-ordem="2"] {
  --ordem: 2;
}

[data-ordem="3"] {
  --ordem: 3;
}

[data-ordem="4"] {
  --ordem: 4;
}

[data-ordem="5"] {
  --ordem: 5;
}

@keyframes v-subir {
  from {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(8px);
  }
}

/* O título do herói: palavra a palavra, e depois o bloco abre. */
.v-titulo .v-p > span {
  animation: v-palavra 1s var(--mola-suave) both;
  animation-delay: calc(0.18s + var(--i, 0) * 0.07s);
}

[data-i="0"] {
  --i: 0;
}

[data-i="1"] {
  --i: 1;
}

[data-i="2"] {
  --i: 2;
}

[data-i="4"] {
  --i: 4;
}

[data-i="5"] {
  --i: 5;
}

@keyframes v-palavra {
  from {
    transform: translateY(105%) rotate(4deg);
    opacity: 0;
  }
}

.v-titulo .bloco-fundo {
  animation: v-abrir 0.9s var(--curva-bloco) 0.62s both;
}

.v-titulo .bloco-texto {
  animation: v-aparecer 0.6s var(--curva) 1.05s both;
}

@keyframes v-abrir {
  from {
    transform: scaleX(0);
  }
}

@keyframes v-aparecer {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}

/* O trilho do herói enche em laço, e cada etapa acende quando o fio passa. */
.v-trilho::after {
  animation: v-fio var(--duracao) var(--curva) infinite;
}

.v-trilho li::before {
  animation: v-etapa var(--duracao) var(--curva) infinite;
}

.v-trilho li:nth-child(2)::before {
  animation-name: v-etapa-2;
}

.v-trilho li:nth-child(3)::before {
  animation-name: v-etapa-3;
}

.v-trilho li:nth-child(4)::before {
  animation-name: v-etapa-4;
}

.v-trilho li:nth-child(5)::before {
  animation-name: v-etapa-5;
}

@keyframes v-fio {
  0%,
  6% {
    transform: scaleX(0);
  }
  70%,
  92% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

@keyframes v-etapa {
  0%,
  92% {
    background: var(--azul-marca);
    transform: scale(1);
  }
  100% {
    background: var(--linha-forte);
  }
}

@keyframes v-etapa-2 {
  0%,
  22% {
    background: var(--linha-forte);
    transform: scale(1);
  }
  26% {
    background: var(--azul-marca);
    transform: scale(1.25);
  }
  30%,
  92% {
    background: var(--azul-marca);
    transform: scale(1);
  }
  100% {
    background: var(--linha-forte);
  }
}

@keyframes v-etapa-3 {
  0%,
  38% {
    background: var(--linha-forte);
    transform: scale(1);
  }
  42% {
    background: var(--azul-marca);
    transform: scale(1.25);
  }
  46%,
  92% {
    background: var(--azul-marca);
    transform: scale(1);
  }
  100% {
    background: var(--linha-forte);
  }
}

@keyframes v-etapa-4 {
  0%,
  54% {
    background: var(--linha-forte);
    transform: scale(1);
  }
  58% {
    background: var(--azul-marca);
    transform: scale(1.25);
  }
  62%,
  92% {
    background: var(--azul-marca);
    transform: scale(1);
  }
  100% {
    background: var(--linha-forte);
  }
}

@keyframes v-etapa-5 {
  0%,
  68% {
    background: var(--linha-forte);
    transform: scale(1);
  }
  72% {
    background: var(--ok);
    transform: scale(1.35);
  }
  78%,
  92% {
    background: var(--ok);
    transform: scale(1);
  }
  100% {
    background: var(--linha-forte);
  }
}

/* A sobra pulsa quando o fio chega no lucro. */
.v-venda-conta .v-sobra {
  animation: v-sobra 7s var(--curva) infinite;
}

@keyframes v-sobra {
  0%,
  68% {
    box-shadow: 0 0 0 0 rgba(60, 127, 210, 0);
  }
  74% {
    box-shadow: 0 0 0 6px rgba(60, 127, 210, 0.18);
  }
  86%,
  100% {
    box-shadow: 0 0 0 0 rgba(60, 127, 210, 0);
  }
}

.v-chip {
  animation: v-flutuar 7s ease-in-out infinite alternate;
}

.v-chip-2 {
  animation-duration: 8.5s;
  animation-delay: -2s;
}

.v-chip-3 {
  animation-duration: 6.2s;
  animation-delay: -4s;
}

@keyframes v-flutuar {
  from {
    transform: translate3d(0, -8px, 0) rotate(-1.5deg);
  }
  to {
    transform: translate3d(0, 10px, 0) rotate(1.5deg);
  }
}

.v-rolar span {
  animation: v-rolar 2.2s var(--curva) infinite;
}

@keyframes v-rolar {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80%,
  100% {
    transform: translateY(14px);
    opacity: 0;
  }
}

.v-letreiro-trilho {
  animation: v-letreiro 46s linear infinite;
}

.v-letreiro:hover .v-letreiro-trilho {
  animation-play-state: paused;
}

@keyframes v-letreiro {
  to {
    transform: translateX(-50%);
  }
}

/* Rolagem: o que tem data-surgir chega quando entra na tela. */
.mov [data-surgir] {
  opacity: 0;
  transform: translateY(32px) scale(0.985);
  filter: blur(6px);
  transition:
    opacity 0.9s var(--curva),
    transform 1.2s var(--mola-suave),
    filter 0.9s var(--curva);
  transition-delay: calc(var(--i, 0) * 0.08s);
}

.mov [data-surgir].surgiu {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Desfoque custa caro em área grande: cartão, linha e pergunta sobem sem ele. */
.mov :is(.v-dor, .v-recurso, .v-cofres li, .v-contraste-linha, .v-pergunta, .v-checklist li, .v-proposta-motivos li, .v-antes-depois, .v-proposta)[data-surgir] {
  filter: none;
}

/* Depois de chegar, o cartão volta a responder ao hover sem esperar a escada. */
.mov .v-dor.surgiu,
.mov .v-recurso.surgiu,
.mov .v-cofres li.surgiu {
  transition:
    opacity 0.9s var(--curva),
    transform 0.7s var(--mola),
    filter 0.9s var(--curva),
    box-shadow 0.7s var(--curva),
    border-color 0.5s;
  transition-delay: 0s;
}

/* Títulos de seção: as palavras sobem de dentro da máscara quando a cabeça chega. */
.mov [data-surgir] [data-palavras] .v-p > span,
.mov [data-palavras][data-surgir] .v-p > span {
  transform: translateY(105%) rotate(3deg);
  transition: transform 1s var(--mola-suave);
  transition-delay: calc(0.08s + var(--i, 0) * 0.045s);
}

.mov .surgiu [data-palavras] .v-p > span,
.mov [data-palavras].surgiu .v-p > span {
  transform: none;
}

/* Artes da dor: cada uma conta sua história quando chega. */
.mov .v-dor .v-barra-a,
.mov .v-dor .v-barra-b {
  transform: scaleX(0);
  transition: transform 1.4s var(--mola-suave) 0.3s;
}

.mov .v-dor .v-barra-b {
  transition-delay: 0.55s;
}

.mov .v-dor.surgiu .v-barra-a,
.mov .v-dor.surgiu .v-barra-b {
  transform: scaleX(1);
}

.mov .v-arte-encolhe span {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.2s var(--curva-bloco) 0.6s;
}

.mov .v-dor.surgiu .v-arte-encolhe span {
  clip-path: inset(0 48% 0 0);
}

.mov .v-arte-desliga span {
  background: var(--ok);
  transition: background 0.4s 0.9s;
}

.mov .v-arte-desliga span::after {
  transform: translateX(30px);
  transition: transform 0.6s var(--mola-viva) 0.9s;
}

.mov .v-dor.surgiu .v-arte-desliga span {
  background: var(--linha-forte);
}

.mov .v-dor.surgiu .v-arte-desliga span::after {
  transform: none;
}

/* História presa na rolagem (só em tela larga e com JS: o vitrine.js põe data-presa). */
.v-historia[data-presa] {
  height: 420vh;
}

.v-historia[data-presa] .v-historia-fixa {
  position: sticky;
  top: 0;
  min-height: 100vh;
  padding-top: calc(var(--altura-topo) + 24px);
  padding-bottom: 40px;
}

/* Presa ou em ciclo, só o passo atual mostra o texto: os quatro cabem numa tela de notebook, e
   no celular o palco aparece logo abaixo da lista. */
.v-historia[data-passo] .v-passo > div {
  display: grid;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows 0.7s var(--mola-suave);
}

.v-historia[data-passo] .v-passo p {
  overflow: hidden;
  min-height: 0;
  margin-top: 0;
  padding-top: 6px;
}

.v-historia[data-passo="0"] .v-passo[data-passo="0"] > div,
.v-historia[data-passo="1"] .v-passo[data-passo="1"] > div,
.v-historia[data-passo="2"] .v-passo[data-passo="2"] > div,
.v-historia[data-passo="3"] .v-passo[data-passo="3"] > div {
  grid-template-rows: auto 1fr;
}

.v-historia:is([data-presa], [data-ciclo]) .v-historia-palco {
  display: block;
  min-height: 440px;
}

.v-historia:is([data-presa], [data-ciclo]) .v-cena {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  filter: blur(10px);
  transition:
    opacity 0.6s var(--curva),
    transform 0.9s var(--mola),
    filter 0.6s var(--curva);
  pointer-events: none;
}

.v-historia[data-passo="0"] .v-cena-0,
.v-historia[data-passo="1"] .v-cena-1,
.v-historia[data-passo="2"] .v-cena-2,
.v-historia[data-passo="3"] .v-cena-3 {
  opacity: 1;
  transform: none;
  filter: none;
}

.v-historia[data-passo] .v-passo {
  opacity: 0.58;
}

.v-historia[data-passo="0"] .v-passo[data-passo="0"],
.v-historia[data-passo="1"] .v-passo[data-passo="1"],
.v-historia[data-passo="2"] .v-passo[data-passo="2"],
.v-historia[data-passo="3"] .v-passo[data-passo="3"] {
  opacity: 1;
  border-left-color: var(--azul-marca);
  background: linear-gradient(90deg, rgba(60, 127, 210, 0.12), transparent 80%);
}

.v-historia[data-passo="0"] .v-passo[data-passo="0"] .v-passo-num,
.v-historia[data-passo="1"] .v-passo[data-passo="1"] .v-passo-num,
.v-historia[data-passo="2"] .v-passo[data-passo="2"] .v-passo-num,
.v-historia[data-passo="3"] .v-passo[data-passo="3"] .v-passo-num {
  background: var(--azul-bloco);
  border-color: var(--azul-bloco);
  color: #fff;
  transform: scale(1.08);
}

.v-historia:is([data-presa], [data-ciclo]) .v-historia-barra {
  display: block;
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: -28px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.v-historia-barra span {
  display: block;
  height: 100%;
  background: var(--azul-marca);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}

/* Dentro de cada cena, o detalhe chega depois da cena. */
.v-historia[data-passo] .v-link-pulsos span {
  animation: v-pulso 2.4s var(--curva-saida) infinite;
}

.v-link-pulsos span:nth-child(2) {
  animation-delay: 0.8s !important;
}

.v-link-pulsos span:nth-child(3) {
  animation-delay: 1.6s !important;
}

@keyframes v-pulso {
  from {
    transform: scale(0.15);
    opacity: 0.9;
  }
  to {
    transform: scale(1);
    opacity: 0;
  }
}

.v-historia[data-passo] .v-recibo-linha {
  opacity: 0;
  transform: translateX(-10px);
  transition:
    opacity 0.4s var(--curva),
    transform 0.6s var(--mola);
}

.v-historia[data-passo="1"] .v-recibo-linha {
  opacity: 1;
  transform: none;
}

.v-historia[data-passo="1"] .v-recibo-linha:nth-child(2) {
  transition-delay: 0.25s;
}

.v-historia[data-passo="1"] .v-recibo-linha:nth-child(3) {
  transition-delay: 0.4s;
}

.v-historia[data-passo="1"] .v-recibo-linha:nth-child(4) {
  transition-delay: 0.55s;
}

.v-historia[data-passo="1"] .v-recibo-linha:nth-child(5) {
  transition-delay: 0.7s;
}

.v-historia[data-passo="1"] .v-recibo-linha:nth-child(6) {
  transition-delay: 1s;
}

.v-historia[data-passo] .v-devolve-fios path {
  stroke-dashoffset: 260;
  transition: stroke-dashoffset 1.2s var(--curva-bloco) 0.3s;
}

.v-historia[data-passo="2"] .v-devolve-fios path {
  stroke-dashoffset: 0;
}

.v-historia[data-passo] .v-devolve-alvo {
  opacity: 0;
  transition: opacity 0.5s var(--curva) 1.2s;
}

.v-historia[data-passo="2"] .v-devolve-alvo {
  opacity: 1;
}

.v-historia[data-passo] .v-sugestao li,
.v-historia[data-passo] .v-sugestao-botoes {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s var(--curva),
    transform 0.6s var(--mola);
}

.v-historia[data-passo="3"] .v-sugestao li,
.v-historia[data-passo="3"] .v-sugestao-botoes {
  opacity: 1;
  transform: none;
}

.v-historia[data-passo="3"] .v-sugestao li:nth-child(1) {
  transition-delay: 0.3s;
}

.v-historia[data-passo="3"] .v-sugestao li:nth-child(2) {
  transition-delay: 0.42s;
}

.v-historia[data-passo="3"] .v-sugestao li:nth-child(3) {
  transition-delay: 0.54s;
}

.v-historia[data-passo="3"] .v-sugestao-botoes {
  transition-delay: 0.8s;
}

/* Medidor da proposta enche quando chega. */
.mov .v-proposta .v-medidor-valor {
  transform: scaleX(0);
  transition: transform 1.4s var(--mola-suave) 0.4s;
}

.mov .v-proposta.surgiu .v-medidor-valor {
  transform: scaleX(1);
}

/* Contraste: a coluna nossa entra um instante depois da do mercado. */
.mov .v-contraste-linha .v-contraste-nosso {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity 0.6s var(--curva) 0.25s,
    transform 0.9s var(--mola) 0.25s;
}

.mov .v-contraste-linha.surgiu .v-contraste-nosso {
  opacity: 1;
  transform: none;
}

/* Honestidade: o destaque ganha um sublinhado que se desenha. */
.v-frase em {
  background: linear-gradient(var(--azul-marca), var(--azul-marca)) 0 92% / 0% 3px no-repeat;
  transition: background-size 1.2s var(--curva-bloco) 0.9s;
}

.surgiu .v-frase em,
.v-frase.surgiu em {
  background-size: 100% 3px;
}

/* A frase acende palavra a palavra com a rolagem (vitrine.js põe .acesa). O estado apagado,
   #6F82A0 sobre o marinho, fica em 3,7:1: legível em título grande, e não 1,35:1 como na
   referência estudada. */
.mov .v-frase .v-a {
  color: #6f82a0;
  transition: color 0.18s linear;
}

.mov .v-frase .v-a.acesa {
  color: #fff;
}

.mov .v-frase em .v-a.acesa {
  color: var(--azul-claro);
}

/* O herói se despede ao sair por cima: desce um pouco e esmaece, preso à rolagem. */
@supports (animation-timeline: view()) {
  @media (min-width: 1025px) {
    .mov .v-heroi-dentro {
      animation: v-despedir linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 80%;
    }
  }
}

@keyframes v-despedir {
  to {
    transform: translateY(40px);
    opacity: 0.35;
  }
}

/* Pausar movimento (WCAG 2.2.2): o que roda em laço para; o herói fora da tela também. */
.v-pausar {
  margin-top: 18px;
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.v-pausar:hover {
  color: var(--tinta);
}

.pausado *,
.pausado *::before,
.pausado *::after,
.v-quieto *,
.v-quieto *::before,
.v-quieto *::after {
  animation-play-state: paused !important;
}

/* ── Telas menores ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .v-nav {
    display: none;
  }

  .v-topo-acoes {
    margin-left: auto;
  }
}

@media (max-width: 980px) {
  .v-heroi-dentro,
  .v-historia-fixa,
  .v-controle-dentro,
  .v-perguntas-dentro {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .v-heroi-cena {
    min-height: 420px;
  }

  .v-dores,
  .v-cofres {
    grid-template-columns: 1fr 1fr;
  }

  .v-perguntas-dentro .v-secao-cabeca {
    position: static;
  }

  .v-rodape-dentro {
    grid-template-columns: 1fr 1fr;
  }

  .v-rodape-marca {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  :root {
    --margem: 16px;
    --altura-topo: 64px;
  }

  .v-topo-acoes {
    display: none;
  }

  .v-menu {
    display: block;
  }

  .v-marca img {
    width: 124px;
  }

  .v-heroi {
    min-height: auto;
    padding-top: calc(var(--altura-topo) + 40px);
    padding-bottom: 72px;
  }

  .v-cta .v-botao-grande,
  .v-cta .v-botao-linha {
    width: 100%;
    justify-content: center;
  }

  .v-heroi-cena {
    min-height: 0;
    padding: 36px 0 12px;
  }

  .v-chip-1 {
    top: 0;
    left: 0;
  }

  .v-chip-2 {
    top: 6px;
    right: 0;
  }

  .v-chip-3 {
    display: none;
  }

  .v-venda {
    padding: 20px;
  }

  .v-link-pilula {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .v-trilho li {
    font-size: 10px;
  }

  .v-rolar {
    display: none;
  }

  .v-secao {
    padding: 88px var(--margem);
  }

  .v-secao-cabeca {
    margin-bottom: 40px;
  }

  .v-dores,
  .v-cofres {
    grid-template-columns: 1fr;
  }

  .v-faixa + .v-secao {
    padding-top: 56px;
  }

  .v-recursos {
    gap: 10px;
  }

  .v-recurso {
    padding: 20px;
  }

  .v-recurso-estado {
    margin-bottom: 10px;
  }

  .v-historia:is([data-presa], [data-ciclo]) .v-historia-palco {
    min-height: 380px;
  }

  .v-historia-fixa {
    padding: 88px var(--margem);
  }

  .v-antes-depois {
    padding: 20px;
  }

  .v-rotina li {
    grid-template-columns: 58px 1fr;
    font-size: 15px;
  }

  .v-contraste-cabeca {
    display: none;
  }

  .v-contraste-linha {
    grid-template-columns: 1fr;
  }

  .v-contraste-linha > span {
    padding: 12px 18px;
  }

  .v-contraste-tema {
    padding-top: 20px !important;
  }

  .v-contraste-nosso {
    padding-bottom: 20px !important;
  }

  .v-honestidade,
  .v-final {
    padding: 96px var(--margem);
  }

  .v-rodape-dentro {
    grid-template-columns: 1fr;
  }

  .v-rodape-fim {
    flex-direction: column;
  }
}

/* ── Menos movimento ──────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .vitrine *,
  .vitrine *::before,
  .vitrine *::after {
    animation: none !important;
    transition: none !important;
  }

  .mov [data-surgir],
  .mov [data-palavras] .v-p > span {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .v-letreiro-trilho {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }

  .v-letreiro-trilho span:nth-child(n + 10) {
    display: none;
  }

  .v-pausar {
    display: none;
  }
}

:root:not(.mov) .v-pausar {
  display: none;
}