/* Fontes próprias (OFL), sem chamada a servidor de terceiros. */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-display: swap;
  font-weight: 100 900; font-stretch: 62% 125%;
  src: url(assets/fontes/archivo-latin-wdth-normal.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Figtree'; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url(assets/fontes/figtree-latin-wght-normal.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 500;
  src: url(assets/fontes/jetbrains-mono-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(assets/fontes/jetbrains-mono-latin-700-normal.woff2) format('woff2');
}

/* Azul e dourado medidos no logo da SBC, levados para a linguagem da referência. */
:root {
  --noite: #071330;
  --noite-2: #0C1C42;
  --noite-3: #12275A;
  --linha-n: #1F386B;
  --linha-n2: #2C4A85;
  --claro: #F5F2EC;
  --linha: #E3DCCF;
  --tinta: #0B1A3A;
  --tinta-2: #4A5570;
  --cinza-n: #AAB6D2;
  --ouro: #F2C25B;
  --ouro-2: #FFD98A;
  --ouro-marca: #D6AC64;
  --ouro-escuro: #9C6F22;
  --verde: #34D399;
  --wa: #25D366;
  --vermelho: #F87171;
  --titulo: 'Archivo', system-ui, sans-serif;
  --corpo: 'Figtree', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --gutter: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.travado { overflow: hidden; }
body {
  background: var(--noite); color: #fff;
  font: 400 17px/1.55 var(--corpo);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 84px;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ouro-2); outline-offset: 3px; border-radius: 8px; }
b { font-weight: 700; color: #fff; }
svg path, svg circle, svg rect { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Topo ---------- */
:root { --topo-h: 56px; }
.topo {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--topo-h); padding: 0 var(--gutter); max-width: 1180px; margin: 0 auto;
}
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.marca img { width: 36px; height: auto; }
.marca span { font: 800 13px/1 var(--titulo); letter-spacing: .16em; text-transform: uppercase; }
.topo-nota { white-space: nowrap; font: 500 11px/1 var(--mono); color: var(--cinza-n); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Textos-base ---------- */
.kicker {
  display: flex; align-items: center; gap: 10px;
  font: 800 12px/1 var(--corpo); letter-spacing: .22em; text-transform: uppercase; color: var(--ouro-marca);
  margin-bottom: 14px;
}
.kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.mega, .titulo, h3 {
  font-family: var(--titulo); font-weight: 900; text-transform: uppercase;
  font-stretch: 66%; letter-spacing: -.035em; line-height: .87;
}
.titulo { font-size: clamp(40px, 10.6vw, 76px); }
em { font-style: normal; color: var(--ouro); }
.sub { color: var(--cinza-n); }
.lead { color: var(--tinta-2); margin-top: 18px; max-width: 36em; }

/* ---------- Herói: exatamente a primeira dobra ----------
   A altura é a da tela menos o topo (svh: a tela com a barra do navegador
   aberta). O celular do vídeo cresce e encolhe com a altura que sobra, e a
   coluna ao lado esconde o que não couber. */
.heroi {
  position: relative; max-width: 1180px; margin: 0 auto;
  height: calc(100vh - var(--topo-h));
  height: calc(100svh - var(--topo-h));
  min-height: 460px;
  display: flex; flex-direction: column; gap: clamp(10px, 1.8svh, 18px);
  padding: 2px var(--gutter) 58px;
}
.heroi::before {
  content: ''; position: absolute; inset: calc(var(--topo-h) * -1) 0 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 70% at 30% 20%, #000 30%, transparent 75%);
          mask-image: radial-gradient(120% 70% at 30% 20%, #000 30%, transparent 75%);
}
/* O brilho fica dentro do topo: um círculo vazando para a direita fazia o
   celular de 320 px reduzir o zoom da página inteira. */
.heroi::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(320px circle at 88% 58%, rgba(214,172,100,.16), transparent 70%);
}
.mega { font-size: clamp(32px, min(13.4vw, 6.6vh), 64px); font-size: clamp(32px, min(13.4vw, 6.6svh), 64px); }
.h-texto .kicker { margin-bottom: clamp(8px, 1.4svh, 14px); }

.h-meio { flex: 1 1 0; min-height: 0; display: flex; gap: 14px; }
.celular { flex: none; height: 100%; aspect-ratio: 9 / 16; max-width: 52%; display: flex; align-items: center; margin: 0; }
.h-lado {
  flex: 1 1 0; min-width: 0; container-type: size;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.h-acao .cta { margin-top: 0; }
.h-acao .garantias { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 12.5px; }

.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; }
.trilha li:not(.seta) {
  border: 1px solid var(--linha-n2); border-radius: 10px; padding: 7px 11px;
  font: 800 13px/1 var(--titulo); font-stretch: 88%; text-transform: uppercase; letter-spacing: .01em;
  background: rgba(18,39,90,.5);
}
.trilha li b { color: var(--ouro); font-size: 17px; margin-right: 2px; }
.trilha li.destaque { background: var(--ouro); color: var(--tinta); border-color: var(--ouro); }
.trilha li.destaque b { color: var(--tinta); font-size: inherit; }
.trilha .seta { display: block; color: var(--cinza-n); }
.trilha .seta svg { width: 14px; height: 14px; }

/* Atrasados: mesmo desenho do bloco de preço da referência. */
.valor { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; max-width: 520px; }
.valor-rot { display: block; font: 700 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--cinza-n); margin-bottom: 8px; }
.valor-num {
  display: block; font: 900 64px/.86 var(--titulo); font-stretch: 66%; letter-spacing: -.03em;
  color: var(--ouro); text-shadow: 0 0 40px rgba(242,194,91,.25); white-space: nowrap;
}
.valor-nota { font: 500 11px/1.45 var(--mono); color: var(--cinza-n); text-align: right; }

/* Coluna ao lado do vídeo, no celular */
.h-lado .valor { flex-direction: column; align-items: flex-start; gap: 6px; }
.h-lado .valor-rot { font-size: 10px; margin-bottom: 5px; }
.h-lado .valor-num { font-size: min(21cqw, 46px); }
.h-lado .valor-nota { text-align: left; font-size: 10px; }
.h-lado .trilha { flex-direction: column; align-items: flex-start; gap: 6px; }
.h-lado .trilha .seta { display: none; }
.h-lado .trilha li:not(.seta) { font-size: 11.5px; padding: 6px 9px; }
.h-lado .trilha li b { font-size: 14px; }
.h-lado .sub { font-size: 13.5px; line-height: 1.4; }
.sub-longa { display: none; }
@container (max-height: 330px) { .h-lado .sub { display: none; } }
@container (max-height: 215px) { .h-lado .trilha { display: none; } }
@container (max-height: 125px) { .h-lado .valor-nota { display: none; } }

.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 62px; padding: 0 28px; margin-top: 26px;
  border-radius: 16px; background: var(--ouro); color: #1A1300;
  font: 900 21px/1 var(--titulo); font-stretch: 88%; letter-spacing: -.01em;
  box-shadow: 0 10px 30px rgba(242,194,91,.22), inset 0 -3px 0 rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  position: relative; overflow: hidden;
}
.h-acao .cta { height: clamp(52px, 8svh, 62px); }
.cta svg { width: 22px; height: 22px; transition: transform .2s ease; }
.cta:hover { background: var(--ouro-2); }
.cta:hover svg { transform: translateX(3px); }
.cta:active { transform: scale(.98); }
.cta::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  animation: brilho 4.5s ease-in-out infinite 1.5s;
}
@keyframes brilho { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.garantias { list-style: none; margin-top: 16px; display: grid; gap: 8px; color: var(--cinza-n); font-size: 14px; }
.garantias li { display: flex; align-items: center; gap: 7px; }
.garantias svg { width: 15px; height: 15px; color: var(--verde); flex: none; }

/* ---------- Vídeo ---------- */
.tela {
  position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; container-type: inline-size;
  background: #000; border: 2px solid var(--linha-n2);
  border-radius: 12% / 6.75%;
  box-shadow: 0 0 0 6px #050c20, 0 0 0 7px var(--linha-n), 0 30px 70px rgba(0,0,0,.55);
}
.tela video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
/* Mudo: véu escuro e o aviso grande no meio, como na referência. */
.tela::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; transition: opacity .3s;
  background: radial-gradient(circle at 50% 50%, rgba(4,10,26,.55), rgba(4,10,26,.12) 70%);
}
.tela:not(.mudo)::after { opacity: 0; }

/* Barra de progresso do vídeo, no alto da tela */
.vsl-progresso {
  position: absolute; z-index: 2; top: 3.2cqw; left: 5cqw; right: 5cqw; height: 3px;
  border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden;
}
.vsl-progresso i {
  position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--ouro-marca), var(--ouro-2)); box-shadow: 0 0 10px rgba(242,194,91,.8);
}
.selo-video {
  position: absolute; z-index: 2; top: 7cqw; left: 5cqw; display: flex; align-items: center; gap: 6px;
  padding: 2.6cqw 4cqw; border-radius: 999px; background: rgba(4,10,26,.72); backdrop-filter: blur(6px);
  font: 700 clamp(9px, 5.4cqw, 12px)/1 var(--mono); color: #fff; font-variant-numeric: tabular-nums;
}
.selo-video i { width: 6px; height: 6px; border-radius: 50%; background: var(--vermelho); animation: pisca 1.4s infinite; }
@keyframes pisca { 50% { opacity: .25; } }

.som {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 5cqw;
  font: 900 clamp(11px, 7cqw, 18px)/1 var(--titulo); font-stretch: 88%; text-transform: uppercase; color: #fff;
}
.som i {
  position: relative; display: grid; place-items: center; isolation: isolate;
  width: clamp(48px, 30cqw, 88px); height: clamp(48px, 30cqw, 88px); border-radius: 50%;
  background: var(--ouro); color: #1A1300; box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.som i::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; border: 3px solid var(--ouro); animation: halo 1.8s ease-out infinite; }
@keyframes halo { to { transform: scale(1.6); opacity: 0; } }
.som svg { width: 46%; height: 46%; }
.som span { padding: 2.6cqw 4.6cqw; border-radius: 999px; background: rgba(4,10,26,.88); white-space: nowrap; }
.tela:not(.mudo) .som { left: auto; top: auto; right: 4cqw; bottom: 4cqw; transform: none; }
.tela:not(.mudo) .som i { width: 40px; height: 40px; background: rgba(4,10,26,.78); color: #fff; box-shadow: none; }
.tela:not(.mudo) .som i::after, .tela:not(.mudo) .som span { display: none; }

/* "ROLA": convite para descer, no pé da primeira dobra */
.rolar {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--cinza-n); text-decoration: none; transition: opacity .35s;
  font: 700 10px/1 var(--mono); letter-spacing: .32em; text-transform: uppercase;
}
.rolar i { position: relative; width: 2px; height: 20px; border-radius: 2px; overflow: hidden; background: var(--linha-n2); }
.rolar i::after { content: ''; position: absolute; left: 0; right: 0; top: -45%; height: 45%; background: var(--ouro); animation: desce 1.6s ease-in-out infinite; }
@keyframes desce { to { top: 100%; } }
.rolou .rolar { opacity: 0; pointer-events: none; }

/* Entrada do topo ao carregar a página */
.js .entra { animation: surge .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes surge { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Seções ---------- */
.miolo { max-width: 1120px; margin: 0 auto; padding: 72px var(--gutter); }
.miolo.estreito { max-width: 760px; }
.claro { background: var(--claro); color: var(--tinta); }
.claro b { color: var(--tinta); }
.claro .kicker { color: var(--ouro-escuro); }
.claro em { color: var(--ouro-escuro); }

.situacoes { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.situacoes li {
  background: #fff; border: 1px solid var(--linha); border-radius: 16px; padding: 14px;
  font-size: 13.5px; line-height: 1.35; color: var(--tinta-2);
}
.situacoes span { display: block; font-size: 26px; margin-bottom: 8px; }
.situacoes b { display: block; font: 800 17px/1.1 var(--titulo); font-stretch: 88%; color: var(--tinta); margin-bottom: 4px; }
.aviso {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 18px;
  background: var(--tinta); color: #fff; border-radius: 16px; padding: 18px;
}
.aviso b { color: var(--ouro); }
.aviso svg { width: 26px; height: 26px; color: var(--ouro); flex: none; }

/* ---------- Como funciona: história fixada ----------
   A seção é alta; o palco fica preso na tela e a rolagem só troca a cena. */
.historia { position: relative; height: 330vh; height: 330svh; }
.palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.palco-miolo {
  height: 100%; max-width: 1120px; margin: 0 auto; padding: clamp(14px, 3svh, 40px) var(--gutter);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(12px, 2.4svh, 26px);
}
.hist-cabeca .kicker { margin-bottom: 10px; }
.hist-cabeca .titulo { font-size: clamp(32px, min(9.4vw, 5.8svh), 64px); }
.contador { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 300px; margin-top: clamp(10px, 2svh, 18px); }
.contador b { position: relative; height: 4px; border-radius: 2px; background: var(--linha-n); overflow: hidden; }
.contador b::after {
  content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0));
  background: var(--ouro); box-shadow: 0 0 10px rgba(242,194,91,.6);
}

.hist-tela { position: relative; min-height: 0; display: grid; place-items: center; }
.mock {
  grid-area: 1 / 1; width: min(330px, 92%);
  transform: scale(var(--s, 1)); transform-origin: center;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.hist-tela.cena-0 .mock-zap,
.hist-tela:not(.cena-0) .mock-quiz { opacity: 0; transform: translateY(24px) scale(calc(var(--s, 1) * .94)); pointer-events: none; }

.mock-quiz {
  background: radial-gradient(90% 50% at 50% 0%, rgba(214,172,100,.14), transparent 70%), var(--noite-2);
  border: 1px solid var(--linha-n2); border-radius: 24px; padding: 20px 18px 22px;
  display: grid; gap: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.mq-barra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.mq-barra i { height: 5px; border-radius: 3px; background: var(--linha-n); }
.mq-barra i.feito { background: var(--ouro); box-shadow: 0 0 10px rgba(242,194,91,.6); }
.mq-meta { font: 700 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--cinza-n); }
.mq-titulo { font: 900 30px/.92 var(--titulo); font-stretch: 72%; text-transform: uppercase; letter-spacing: -.03em; }
.mq-ano {
  display: flex; align-items: center; justify-content: center; gap: 4px; height: 76px; border-radius: 16px;
  border: 2px solid var(--ouro); background: var(--noite); box-shadow: 0 0 0 5px rgba(242,194,91,.12);
  font: 900 48px/1 var(--titulo); font-stretch: 80%; letter-spacing: .08em;
}
.mq-ano i { width: 3px; height: 42px; background: var(--ouro); animation: pisca 1s steps(1) infinite; }
.mq-botao {
  display: grid; place-items: center; height: 50px; border-radius: 14px; background: var(--ouro); color: #1A1300;
  font: 900 19px/1 var(--titulo); font-stretch: 88%;
}

.mock-zap {
  position: relative; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--linha-n2); background: #0B141A; box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.zap-topo { display: flex; align-items: center; gap: 10px; background: #1F2C34; padding: 10px 14px; }
.zap-topo img { width: 30px; height: auto; background: var(--noite); border-radius: 50%; padding: 4px; }
.zap-topo span { display: grid; font-size: 12px; color: #8696A0; line-height: 1.2; }
.zap-topo b { font-size: 14px; color: #E9EDEF; }
.zap-corpo {
  padding: 16px 14px 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-height: 290px;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.03) 0 2px, transparent 3px) 0 0 / 22px 22px, #0B141A;
}
.balao {
  max-width: 88%; background: #005C4B; color: #E9EDEF; border-radius: 12px 0 12px 12px;
  padding: 9px 11px 20px; font-size: 13.5px; line-height: 1.4; position: relative;
}
.balao .hora { position: absolute; right: 9px; bottom: 5px; font-size: 10.5px; color: #8FD3C4; }
.balao.entrada { align-self: flex-start; background: #202C33; border-radius: 0 12px 12px 12px; }
.balao.entrada .hora { color: #8696A0; }
.digitando {
  align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 0 12px 12px 12px; background: #202C33;
}
.digitando i { width: 7px; height: 7px; border-radius: 50%; background: #8696A0; animation: pula 1s infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pula { 30% { transform: translateY(-4px); opacity: 1; } 60%, 100% { transform: none; opacity: .5; } }
.zap-rotulo {
  position: absolute; top: 10px; right: 10px; font: 700 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ouro-2); border: 1px solid rgba(255,217,138,.4); border-radius: 6px; padding: 4px 6px;
}
/* Cena 2: a mensagem sai; cena 3: "digitando…" e a resposta chega */
.digitando, .balao.entrada { display: none; }
.hist-tela.cena-1 .mock-zap .balao:not(.entrada) { animation: envia .45s cubic-bezier(.2,.8,.2,1) .15s both; }
.hist-tela.cena-2 .digitando { display: flex; animation: some .2s ease 1s forwards; }
.hist-tela.cena-2 .balao.entrada { display: block; animation: chega .4s cubic-bezier(.2,.8,.2,1) 1.1s both; }
@keyframes envia { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes chega { from { opacity: 0; transform: translateY(10px); } }
@keyframes some { to { opacity: 0; height: 0; padding: 0; margin-top: -10px; } }

.legendas { position: relative; display: grid; }
.leg { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.leg.on { opacity: 1; transform: none; pointer-events: auto; }
.leg .num { font: 700 13px/1 var(--mono); color: var(--ouro-marca); letter-spacing: .06em; }
.leg h3 { font-size: clamp(28px, min(8.4vw, 4.8svh), 52px); margin: 10px 0; }
.leg p { color: var(--cinza-n); max-width: 30em; font-size: clamp(14.5px, 2.1svh, 17px); }

/* ---------- Revelação ao rolar ---------- */
.js .rv {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js .rv.in { opacity: 1; transform: none; }

/* ---------- Trilho de progresso da página (só no computador) ---------- */
.rota { display: none; }

.cartao-oferta {
  position: relative; background: var(--noite-2); border: 1px solid var(--linha-n); border-radius: 28px;
  padding: 28px 22px 26px; overflow: hidden;
}
.cartao-oferta::before {
  content: ''; position: absolute; width: 360px; height: 360px; right: -160px; top: -160px; border-radius: 50%;
  border: 1.5px dashed var(--linha-n2); pointer-events: none;
}
.itens { list-style: none; }
.itens li { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--linha-n); }
.itens .icone {
  flex: none; width: 54px; height: 54px; border-radius: 15px; background: var(--noite-3);
  display: grid; place-items: center; color: var(--ouro);
}
.itens .icone svg { width: 26px; height: 26px; }
.itens h3 { font-size: 26px; font-stretch: 80%; letter-spacing: -.02em; line-height: .95; text-transform: none; }
.itens p { color: var(--cinza-n); font-size: 15px; margin-top: 6px; }
.etiqueta {
  display: inline-block; margin-top: 10px; font: 700 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--verde); background: rgba(52,211,153,.12); border-radius: 6px; padding: 5px 7px;
}

.faq { margin-top: 30px; border-top: 1px solid var(--linha-n); }
.faq details { border-bottom: 1px solid var(--linha-n); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0; font: 800 18px/1.25 var(--titulo); font-stretch: 92%;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 16px; height: 16px; transition: transform .2s ease;
  background: linear-gradient(var(--ouro), var(--ouro)) center / 16px 2px no-repeat,
              linear-gradient(var(--ouro), var(--ouro)) center / 2px 16px no-repeat;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--cinza-n); padding: 0 0 20px; max-width: 40em; }

.final { text-align: center; padding: 70px var(--gutter) 90px; max-width: 820px; margin: 0 auto; }
.final .cta { max-width: 420px; margin-top: 34px; }

.rodape {
  border-top: 1px solid var(--linha-n); padding: 40px var(--gutter) 30px; max-width: 1120px; margin: 0 auto;
  color: var(--cinza-n); font-size: 13.5px; display: grid; gap: 12px;
}
.rodape img { width: 180px; height: auto; margin-bottom: 8px; }

/* ---------- Barra fixa ---------- */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: rgba(7,19,48,.92); backdrop-filter: blur(12px); border-top: 1px solid var(--linha-n);
  transform: translateY(110%); transition: transform .3s ease;
}
.barra.visivel { transform: none; }
.barra b { display: block; font: 900 21px/1 var(--titulo); font-stretch: 80%; text-transform: uppercase; color: var(--ouro); }
.barra span { font: 500 11px/1 var(--mono); color: var(--cinza-n); }
.barra .cta { width: auto; height: 52px; margin: 0; font-size: 19px; padding: 0 20px; }

/* ---------- Quiz ---------- */
.quiz {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(3,8,22,.7); backdrop-filter: blur(8px);
}
.quiz[hidden] { display: none; }
.quiz-caixa {
  position: relative; width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain;
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(214,172,100,.14), transparent 70%),
    var(--noite);
  padding: max(14px, env(safe-area-inset-top)) var(--gutter) calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  animation: sobe .32s cubic-bezier(.2,.8,.2,1);
}
@keyframes sobe { from { transform: translateY(24px); opacity: 0; } }
.quiz-topo { display: flex; align-items: center; gap: 12px; }
.icone-btn {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--noite-2); border: 1px solid var(--linha-n); color: #fff;
}
.icone-btn svg { width: 20px; height: 20px; }
.icone-btn[disabled] { opacity: .3; cursor: default; }
.progresso { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.progresso i { height: 7px; border-radius: 4px; background: var(--linha-n); overflow: hidden; position: relative; }
.progresso i::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ouro-marca), var(--ouro-2));
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 12px rgba(242,194,91,.6);
}
.progresso i.feito::after { transform: scaleX(1); }
.quiz-meta { display: flex; justify-content: space-between; margin-top: 16px; font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--cinza-n); }
#q-pct { color: var(--ouro); }
.toast {
  height: 26px; margin-top: 10px; font: 800 14px/26px var(--corpo); color: var(--verde);
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.toast.mostra { opacity: 1; transform: none; }

.quiz-palco { flex: 1; display: flex; flex-direction: column; }
.etapa { display: flex; flex-direction: column; animation: entra .35s cubic-bezier(.2,.8,.2,1); }
.etapa.volta { animation-name: entraVolta; }
@keyframes entra { from { opacity: 0; transform: translateX(40px); } }
@keyframes entraVolta { from { opacity: 0; transform: translateX(-40px); } }
.etapa h2 { font: 900 clamp(34px, 9.6vw, 46px)/.92 var(--titulo); font-stretch: 72%; text-transform: uppercase; letter-spacing: -.03em; margin-top: 8px; }
.etapa h2:focus { outline: none; }
.etapa .dica { color: var(--cinza-n); margin-top: 12px; font-size: 15.5px; }
.opcoes { display: grid; gap: 12px; margin-top: 26px; }
.opcao {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 70px; padding: 12px 16px 12px 12px;
  border-radius: 18px; background: var(--noite-2); border: 1.5px solid var(--linha-n2); text-align: left;
  font: 800 19px/1.15 var(--titulo); font-stretch: 92%;
  transition: border-color .15s, background .15s, transform .12s;
}
.opcao:hover { border-color: var(--ouro-marca); }
.opcao:active { transform: scale(.98); }
.opcao .emo { flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--noite-3); display: grid; place-items: center; font-size: 25px; }
.opcao .marca-ok { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linha-n2); display: grid; place-items: center; flex: none; }
.opcao .marca-ok svg { width: 14px; height: 14px; color: var(--tinta); opacity: 0; }
.opcao.escolhida { border-color: var(--ouro); background: #16295A; animation: pop .35s ease; }
.opcao.escolhida .marca-ok { background: var(--ouro); border-color: var(--ouro); }
.opcao.escolhida .marca-ok svg { opacity: 1; }
@keyframes pop { 40% { transform: scale(1.03); } }

.ano-campo {
  margin-top: 26px; width: 100%; height: 96px; border-radius: 20px; text-align: center;
  background: var(--noite-2); border: 2px solid var(--linha-n2); color: #fff;
  font: 900 64px/1 var(--titulo); font-stretch: 80%; letter-spacing: .08em;
  transition: border-color .15s, box-shadow .15s;
}
.ano-campo::placeholder { color: #3A4F80; }
.ano-campo:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 5px rgba(242,194,91,.15); }
.ano-campo.erro { border-color: var(--vermelho); animation: treme .3s; }
@keyframes treme { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.erro-msg { min-height: 22px; margin-top: 10px; color: var(--vermelho); font-size: 14.5px; font-weight: 700; }
.link-sec {
  align-self: center; margin-top: 12px; padding: 10px; color: var(--cinza-n); font-weight: 700; font-size: 15px;
  text-decoration: underline; text-underline-offset: 4px;
}
.etapa .cta { margin-top: 18px; }
.cta[disabled] { opacity: .35; cursor: default; box-shadow: none; }
.cta[disabled]::after { display: none; }

.sequela-campo {
  width: 100%; margin-top: 22px; min-height: 108px; resize: none; border-radius: 18px; padding: 16px;
  background: var(--noite-2); border: 2px solid var(--linha-n2); color: #fff; font: 600 17px/1.45 var(--corpo);
}
.sequela-campo:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 5px rgba(242,194,91,.15); }
.contador { align-self: flex-end; margin-top: 6px; font: 500 11px/1 var(--mono); color: var(--cinza-n); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  padding: 9px 13px; border-radius: 999px; border: 1.5px solid var(--linha-n2); background: var(--noite-2);
  font: 700 14px/1 var(--corpo); color: var(--cinza-n); transition: all .15s;
}
.chip.ativo { border-color: var(--ouro); color: var(--tinta); background: var(--ouro); }

/* Resultado */
.resultado { text-align: center; align-items: center; padding-top: 10px; }
.selo-res {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto;
  background: var(--ouro); color: var(--tinta); box-shadow: 0 0 0 10px rgba(242,194,91,.15), 0 0 60px rgba(242,194,91,.5);
  animation: carimbo .5s cubic-bezier(.2,1.6,.4,1);
}
.selo-res svg { width: 38px; height: 38px; stroke-width: 3; }
.selo-res.nao { background: var(--noite-3); color: var(--ouro-2); box-shadow: 0 0 0 10px rgba(31,56,107,.5); }
@keyframes carimbo { from { transform: scale(2.2) rotate(-12deg); opacity: 0; } }
.resultado h2 { margin-top: 18px; }
.resultado .cta.zap { margin-top: 20px; }
.resultado .dica { max-width: 30em; margin-left: auto; margin-right: auto; }
.resumo { width: 100%; margin-top: 20px; border-radius: 18px; background: var(--noite-2); border: 1px solid var(--linha-n); text-align: left; }
.resumo div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linha-n); font-size: 15px; }
.resumo div:last-child { border-bottom: 0; }
.resumo dt { font: 700 11px/1.5 var(--mono); text-transform: uppercase; color: var(--cinza-n); letter-spacing: .04em; }
.resumo dd { font-weight: 700; overflow-wrap: anywhere; }
.cta.zap { background: var(--wa); color: #04260F; box-shadow: 0 10px 30px rgba(37,211,102,.25); text-decoration: none; }
.cta.zap:hover { background: #4BE07F; }
.cta.zap svg path { stroke-width: 0; fill: currentColor; }
.contagem { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; color: var(--cinza-n); font-weight: 700; font-size: 15px; }
.contagem svg { width: 26px; height: 26px; transform: rotate(-90deg); }
.contagem circle { stroke-width: 3; }
.contagem .anel-fundo { stroke: var(--linha-n); }
.contagem .anel { stroke: var(--wa); stroke-dasharray: 62.8; stroke-dashoffset: 0; }
.nota { margin-top: 18px; font-size: 13px; color: var(--cinza-n); max-width: 30em; }
.motivos { list-style: none; width: 100%; margin-top: 22px; display: grid; gap: 10px; text-align: left; }
.motivos li { display: flex; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--noite-2); border: 1px solid var(--linha-n); font-size: 15.5px; color: #DCE3F2; }
.motivos svg { width: 22px; height: 22px; flex: none; color: var(--vermelho); margin-top: 1px; }
.botoes-res { display: grid; gap: 10px; width: 100%; margin-top: 22px; }
.cta.sec { background: transparent; color: #fff; border: 1.5px solid var(--linha-n2); box-shadow: none; }
.cta.sec::after { display: none; }

#confete { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  :root { --gutter: 40px; }
  body { padding-bottom: 0; }
  .barra { display: none; }
  :root { --topo-h: 66px; }
  .marca img { width: 40px; }
  .heroi {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "texto video" "lado video" "acao video";
    align-content: center; column-gap: clamp(32px, 5vw, 72px); row-gap: 0;
    min-height: 520px; padding: 0 var(--gutter) 56px;
  }
  .h-meio { display: contents; }
  .h-texto { grid-area: texto; }
  .h-lado { grid-area: lado; container-type: normal; display: flex; flex-direction: column; gap: 0; }
  .h-acao { grid-area: acao; }
  .celular { grid-area: video; align-self: center; height: min(calc(100svh - var(--topo-h) - 76px), 760px); max-width: none; }
  .mega { font-size: clamp(52px, min(6.4vw, 10.5vh), 104px); font-size: clamp(52px, min(6.4vw, 10.5svh), 104px); }
  .sub-longa { display: inline; }
  .sub-curta { display: none; }
  .h-lado .sub { order: -2; font-size: 17px; line-height: 1.55; max-width: 34em; margin-top: clamp(12px, 2.2svh, 22px); }
  .h-lado .trilha { order: -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: clamp(12px, 2.2svh, 22px); }
  .h-lado .trilha .seta { display: block; }
  .h-lado .trilha li:not(.seta) { font-size: 13px; padding: 7px 11px; }
  .h-lado .trilha li b { font-size: 17px; }
  .h-lado .valor { flex-direction: row; align-items: flex-end; gap: 16px; margin-top: clamp(12px, 2.4svh, 26px); }
  .h-lado .valor-rot { font-size: 11px; }
  .h-lado .valor-num { font-size: clamp(48px, 8svh, 72px); }
  .h-lado .valor-nota { text-align: right; font-size: 11px; }
  .h-acao { margin-top: clamp(14px, 2.6svh, 28px); }
  .h-acao .cta { width: auto; min-width: 360px; height: 62px; }
  .h-acao .garantias { justify-content: flex-start; font-size: 14px; gap: 6px 22px; }
  .tela { border-radius: 38px; box-shadow: 0 0 0 10px #050c20, 0 0 0 11px var(--linha-n), 0 40px 90px rgba(0,0,0,.55); }

  .palco-miolo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
    grid-template-areas: "cabeca tela" "legendas tela"; align-items: center; column-gap: 64px;
  }
  .hist-cabeca { grid-area: cabeca; align-self: end; }
  .hist-tela { grid-area: tela; height: 100%; }
  .legendas { grid-area: legendas; align-self: start; }
  .mock { width: min(360px, 100%); }

  .rota { display: block; position: fixed; left: 18px; top: 92px; bottom: 44px; width: 14px; z-index: 30; pointer-events: none; }
  .rota::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; border-left: 2px dotted var(--linha-n2); }
  .rota .feito { position: absolute; left: 6px; top: 0; width: 2px; height: 0; background: var(--ouro); }
  .rota .eu {
    position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; transform: translateY(-50%);
    background: var(--noite); border: 3px solid var(--ouro); animation: radar 1.8s ease-out infinite;
  }
  .rota .fim { position: absolute; left: -3px; bottom: -10px; width: 20px; height: 20px; color: var(--ouro); }
  @keyframes radar { from { box-shadow: 0 0 0 0 rgba(242,194,91,.5); } to { box-shadow: 0 0 0 12px rgba(242,194,91,0); } }
  .situacoes { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .situacoes li { padding: 18px; font-size: 14.5px; }
  .cartao-oferta { padding: 44px 48px; }
  .cartao-oferta .itens { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
  .cartao-oferta .cta { width: auto; min-width: 380px; }
  .quiz-caixa { width: min(560px, 94vw); height: auto; max-height: min(860px, 94vh); border-radius: 28px; border: 1px solid var(--linha-n); padding: 22px 30px 30px; }
}

/* ---------- Aviso de medição de anúncios ---------- */
/* Fica abaixo do teste (z 50) e acima da barra fixa (z 20). Aceitar e Recusar
   têm o mesmo peso visual: a escolha precisa ser livre. */
.aviso-medicao {
  position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  max-width: 440px; margin-left: auto; padding: 18px; border-radius: 18px;
  background: var(--noite-2); border: 1px solid var(--linha-n2); box-shadow: 0 24px 60px rgba(0,0,0,.55);
  animation: sobe .3s cubic-bezier(.2,.8,.2,1);
}
.aviso-medicao h2 { font: 900 20px/1 var(--titulo); font-stretch: 80%; text-transform: uppercase; }
.aviso-medicao p { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--cinza-n); }
.aviso-medicao .nota { font-size: 12.5px; }
.aviso-medicao .botoes { display: flex; gap: 10px; margin-top: 14px; }
.aviso-medicao button {
  flex: 1; min-height: 46px; border-radius: 12px; border: 1.5px solid var(--linha-n2); background: var(--noite-3);
  font: 800 16px/1 var(--titulo); font-stretch: 92%; color: #fff;
}
.aviso-medicao button:hover { border-color: var(--ouro-marca); }
.link-rodape { justify-self: start; padding: 6px 0; font-size: 13.5px; color: var(--cinza-n); text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Ajustes finos da primeira dobra ---------- */
/* Selo curto nas telas estreitas: sem isso ele quebra e deixa um "S" sozinho. */
@media (max-width: 419px) { .kicker-extra { display: none; } }
.h-lado .trilha li { white-space: nowrap; }
@container (max-width: 150px) {
  .h-lado .trilha li:not(.seta) { font-size: 10.5px; padding: 5px 7px; }
  .h-lado .trilha li b { font-size: 12.5px; }
}
/* Tablet em pé: mesma montagem do celular, com letra maior ao lado do vídeo. */
@media (min-width: 600px) and (max-width: 899px) {
  .mega { font-size: clamp(32px, min(13.4vw, 6.6svh), 80px); }
  .h-lado { gap: 18px; }
  .h-lado .valor-num { font-size: min(18cqw, 70px); }
  .h-lado .valor-rot, .h-lado .valor-nota { font-size: 12px; }
  .h-lado .trilha li:not(.seta) { font-size: 14px; padding: 8px 12px; }
  .h-lado .trilha li b { font-size: 18px; }
  .h-lado .sub { font-size: 16.5px; }
}
/* No celular a barra fixa de CTA ocupa o pé da tela: a história não pode ficar embaixo dela. */
@media (max-width: 899px) {
  .palco-miolo { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
}