/* ==================================================================
   Zera Nome — design system da v4
   Palco cinematográfico (inspirado no Otto Cinematic) com as cores do
   logo: amarelo-sol, verde-check e azul-tinta. Tipografia arredondada
   (Nunito) como o logotipo, corpo grande e contraste alto para leitura
   no celular, em qualquer tela.
   ================================================================== */
:root {
  --sol: #ffc83d;        /* amarelo do logo: palco, CTA, destaques */
  --sol-escuro: #d99a12; /* sombra "pressionável" do botão amarelo */
  --verde: #16a564;      /* check do logo: sucesso, confiança */
  --verde-escuro: #0f7d4b;
  --tinta: #0f2a3d;      /* azul do logo: texto e palco escuro */
  --tinta-2: #183a52;
  --creme: #fff8e8;      /* fundo editorial */
  --papel: #fffdf7;      /* cards sobre o creme */
  --texto: #0f2a3d;
  --texto-2: #4b6070;
  --linha: rgba(15, 42, 61, .14);
  --erro: #d92d20;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sans: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sombra-card: 0 10px 0 rgba(15, 42, 61, .07), 0 24px 48px rgba(15, 42, 61, .08);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font: 500 17px/1.55 var(--sans); color: var(--texto); background: var(--creme); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--sol); color: var(--tinta); }
a { color: var(--verde-escuro); text-decoration: none; }
img { max-width: 100%; display: block; }
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { width: min(1180px, 100% - 32px); margin: 0 auto; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 4px; border-radius: 8px; }

/* barra de progresso do scroll */
.rail { position: fixed; inset: 0 0 auto; height: 4px; z-index: 60; background: var(--sol); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ---------- botões: amarelo "pressionável", fácil de achar e de tocar ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; cursor: pointer;
  font: 800 18px/1.1 var(--sans); color: var(--tinta); background: var(--sol); border-radius: 18px;
  padding: 18px 26px; min-height: 62px; text-decoration: none; letter-spacing: -.01em;
  box-shadow: 0 6px 0 var(--sol-escuro); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
  -webkit-tap-highlight-color: transparent; }
.btn .ic { font-size: 22px; transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--sol-escuro); }
.btn:hover .ic { transform: translateX(4px); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--sol-escuro); }
.btn[disabled] { opacity: .65; cursor: progress; transform: none; }
.btn-block { width: 100%; }
.btn-tinta { background: var(--tinta); color: #fff; box-shadow: 0 6px 0 #051521; }
.btn-tinta:hover { box-shadow: 0 8px 0 #051521; }
.btn-tinta:active { box-shadow: 0 2px 0 #051521; }
.btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px #fff; transform: none; }
.btn-ghost:active { transform: none; box-shadow: inset 0 0 0 2px #fff; }
.btn-sm { min-height: 46px; padding: 11px 18px; font-size: 15px; border-radius: 14px; box-shadow: 0 4px 0 var(--sol-escuro); }

/* ---------- tipografia ---------- */
h1, h2, h3 { font-weight: 900; letter-spacing: -.035em; line-height: .98; }
h2 { font-size: clamp(38px, 6.2vw, 76px); }
h3 { font-size: 23px; letter-spacing: -.02em; line-height: 1.15; font-weight: 800; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(22, 165, 100, .18); }
.hl { color: var(--verde); }
.body { color: var(--texto-2); font-size: 18px; }

/* ---------- cabeçalho: transparente no palco, creme depois ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, box-shadow .3s, backdrop-filter .3s; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; transition: height .3s var(--ease); }
.top .logo { position: relative; height: 46px; width: 106px; transition: height .3s var(--ease), width .3s var(--ease); }
.top .logo img { position: absolute; inset: 0; height: 100%; width: auto; transition: opacity .3s; }
.top .logo .l-claro { opacity: 0; }
.top .btn-sm { opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .3s, transform .3s var(--ease); }
.top.solid { background: rgba(255, 248, 232, .94); box-shadow: 0 1px 0 var(--linha); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.top.solid .wrap { height: 64px; }
.top.solid .logo { height: 38px; width: 88px; }
.top.solid .logo .l-escuro { opacity: 0; }
.top.solid .logo .l-claro { opacity: 1; }
.top.solid .btn-sm { opacity: 1; pointer-events: auto; transform: none; }

/* ==================================================================
   PALCO (hero): trilho de scroll + palco fixo de 100svh.
   --p (0→1) é o progresso do scroll dentro do trilho, escrito pelo JS.
   ================================================================== */
.track { position: relative; height: 230svh; --p: 0; }
.stage { position: sticky; top: 0; height: 100svh; min-height: 600px; overflow: hidden; color: #fff; background: var(--tinta); isolation: isolate; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 55% at 72% 44%, rgba(255, 200, 61, .26), transparent 70%),
    radial-gradient(45% 50% at 10% 100%, rgba(22, 165, 100, .22), transparent 70%),
    linear-gradient(180deg, #0f2a3d 0%, #0b2233 100%); }
.stage::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* objeto 3D (canvas) e o fallback em imagem */
.scene { position: absolute; inset: 0; z-index: 1; }
.scene canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .7s var(--ease); touch-action: pan-y; }
.scene.live canvas { opacity: 1; }
.scene .art { position: absolute; left: var(--cx, 72%); top: var(--cy, 46%); width: min(38vw, 440px); height: auto; aspect-ratio: 1; translate: -50% -50%;
  transform: perspective(900px) rotateY(calc(var(--p) * 360deg)) scale(calc(1 + var(--p) * .25));
  animation: boia 5s ease-in-out infinite; transition: opacity .7s var(--ease); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); }
.scene.live .art { opacity: 0; }
@keyframes boia { 50% { margin-top: -14px; } }

/* órbitas em volta da moeda */
.orbits { position: absolute; left: var(--cx, 72%); top: var(--cy, 46%); width: min(46vw, 640px); aspect-ratio: 1; translate: -50% -50%; z-index: 0; pointer-events: none;
  transform: rotate(calc(var(--p) * 140deg)); }
.orbits i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255, 248, 232, .16); }
.orbits i:nth-child(2) { inset: 13%; border-color: rgba(255, 248, 232, .1); border-style: dashed; }
.orbits b { position: absolute; top: 50%; left: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--sol); box-shadow: 0 0 18px var(--sol); }
.orbits b + b { left: auto; right: 13%; top: 14%; width: 9px; height: 9px; background: var(--verde); box-shadow: 0 0 14px var(--verde); }

/* texto do palco */
.stage-copy { position: absolute; z-index: 2; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; pointer-events: none;
  opacity: calc(1 - var(--p) * 3.2); transform: translateY(calc(var(--p) * -60px)); }
.stage-copy .wrap { pointer-events: auto; }
.stage-copy .inner { max-width: 620px; }
.stage .eyebrow { color: rgba(255, 248, 232, .78); margin-bottom: 22px; }
.stage .eyebrow::before { background: var(--sol); box-shadow: 0 0 0 4px rgba(255, 200, 61, .22); }
.stage h1 { font-size: clamp(54px, 8.6vw, 132px); line-height: .92; letter-spacing: -.045em; margin-bottom: 26px; }
.stage h1 span { display: block; color: var(--sol); }
.stage .lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: rgba(255, 248, 232, .86); max-width: 33ch; margin-bottom: 34px; }
.stage .ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* entrada no carregamento: o título sobe recortado */
.slice { display: block; animation: slice .9s var(--ease) both; }
.slice.d1 { animation-delay: .08s; } .slice.d2 { animation-delay: .18s; } .slice.d3 { animation-delay: .3s; } .slice.d4 { animation-delay: .42s; }
@keyframes slice { from { clip-path: inset(0 0 100%); transform: translateY(28px); } to { clip-path: inset(0 0 -6%); transform: none; } }

/* notas flutuantes */
.note { position: absolute; z-index: 3; display: flex; gap: 12px; align-items: center; background: var(--creme); color: var(--tinta);
  border-radius: 16px; padding: 12px 18px 12px 12px; box-shadow: 0 10px 34px rgba(0, 0, 0, .25); pointer-events: none;
  opacity: calc(1 - var(--p) * 4); animation: boia 6s ease-in-out infinite; }
.note .ok { width: 34px; height: 34px; border-radius: 50%; background: var(--verde); color: #fff; display: grid; place-items: center; font-size: 18px; flex: none; }
.note strong { display: block; font-weight: 900; font-size: 16px; line-height: 1.15; }
.note span { display: block; font-size: 13px; color: var(--texto-2); line-height: 1.2; }
.note.n1 { left: 53%; top: 21%; transform: translateX(calc(var(--p) * -75px)); }
.note.n2 { right: 4.5%; top: 63%; transform: translateX(calc(var(--p) * 75px)); animation-delay: -3s; }

/* rodapé do palco: capítulos e dica de scroll */
.stage-foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; }
.stage-foot .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0 22px; border-top: 1px solid rgba(255, 248, 232, .14);
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 248, 232, .7); }
.ticks { display: flex; align-items: center; gap: 14px; }
.ticks .bars { display: flex; gap: 6px; }
.ticks .bars i { width: 30px; height: 3px; border-radius: 3px; background: rgba(255, 248, 232, .22); overflow: hidden; }
.ticks .bars b { display: block; height: 100%; background: var(--sol); transform-origin: 0 50%; transform: scaleX(0); }
.scroll-hint { display: flex; align-items: center; gap: 8px; }
.scroll-hint .ic { animation: desce 1.6s ease-in-out infinite; }
@keyframes desce { 50% { transform: translateY(4px); } }

/* portal creme: abre em círculo a partir da moeda no fim do trilho */
.portal { position: absolute; inset: 0; z-index: 4; background: var(--creme); color: var(--tinta);
  clip-path: circle(calc(var(--open, 0) * 125%) at var(--cx, 72%) var(--cy, 46%)); display: flex; align-items: center; }
.portal .inner { text-align: center; opacity: var(--pc, 0); transform: translateY(calc((1 - var(--pc, 0)) * 45px)); }
.portal h2 { font-size: clamp(48px, 8.5vw, 124px); letter-spacing: -.05em; margin: 18px 0 22px; }
.portal h2 span { color: var(--verde); }
.portal .body { max-width: 36ch; margin: 0 auto; }

@media (max-width: 860px) {
  .track { height: 190svh; }
  .stage { --cx: 50%; --cy: 74%; }
  .stage-copy { align-items: flex-start; padding-top: 92px; }
  .stage h1 { font-size: clamp(48px, 13.5vw, 84px); margin-bottom: 16px; }
  .stage .eyebrow { margin-bottom: 16px; font-size: 12px; }
  .stage .lead { font-size: 17px; margin-bottom: 22px; }
  .stage .ctas .btn-ghost { display: none; }
  .stage .ctas .btn { width: 100%; }
  .scene .art { width: min(62vw, 300px); }
  .orbits { width: min(86vw, 420px); }
  .note { padding: 9px 14px 9px 9px; border-radius: 14px; }
  .note .ok { width: 28px; height: 28px; font-size: 15px; }
  .note strong { font-size: 14px; }
  .note span { font-size: 12px; }
  .note.n1 { left: 4%; top: auto; bottom: 22%; }
  .note.n2 { right: 4%; top: auto; bottom: 10%; }
  .stage-foot .wrap { padding: 12px 0 14px; }
  .stage-foot .ticks em, .scroll-hint span { display: none; }
}
@media (max-height: 700px) and (max-width: 860px) {
  .stage { --cy: 79%; }
  .stage .lead { display: none; }
  .note { display: none; }
}

/* ==================================================================
   Seções editoriais
   ================================================================== */
section.block { padding: 88px 0; position: relative; }
@media (min-width: 960px) { section.block { padding: 128px 0; } }
.sec-head { max-width: 780px; margin-bottom: 52px; }
.sec-head .eyebrow { margin-bottom: 18px; }
.sec-head.center { text-align: center; margin-left: auto; margin-right: auto; }

/* formulário (primeira seção depois do palco, continua o creme do portal) */
.consulta { padding-top: 24px; }
.consulta-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .consulta-grid { grid-template-columns: 1fr 520px; gap: 72px; } .consulta-side { position: sticky; top: 110px; } }
.consulta-side h2 { margin: 16px 0 18px; }
.perks { list-style: none; display: grid; gap: 12px; margin-top: 30px; }
.perks li { display: flex; gap: 14px; align-items: center; font-weight: 700; font-size: 17px; }
.perks .ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; flex: none; }
.perks li:nth-child(4n+1) .ico { background: var(--sol); color: var(--tinta); }
.perks li:nth-child(4n+2) .ico { background: var(--verde); color: #fff; }
.perks li:nth-child(4n+3) .ico { background: var(--tinta); color: var(--sol); }
.perks li:nth-child(4n+4) .ico { background: #ffe7a8; color: var(--tinta); }

.card { background: var(--papel); border-radius: 26px; box-shadow: var(--sombra-card); border: 1px solid var(--linha); }
.form-card { padding: 28px 20px 24px; scroll-margin-top: 90px; position: relative; overflow: hidden; }
.form-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: linear-gradient(90deg, var(--sol) 0 60%, var(--verde) 60%); }
@media (min-width: 480px) { .form-card { padding: 38px 34px 30px; } }
.form-head { margin-bottom: 22px; }
.form-head h3 { font-size: 28px; font-weight: 900; }
.form-head p { color: var(--verde-escuro); font-weight: 800; margin-top: 2px; }
.fld { margin-bottom: 14px; }
.fld label { display: block; font-size: 15px; font-weight: 800; margin: 0 0 6px 2px; }
.fld input { width: 100%; font: 600 18px/1.2 var(--sans); color: var(--texto); background: #fff; border: 2px solid var(--linha); border-radius: 14px;
  padding: 15px 16px; min-height: 58px; outline: none; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.fld input::placeholder { color: #9aa7b1; font-weight: 500; }
.fld input:focus { border-color: var(--verde); box-shadow: 0 0 0 4px rgba(22, 165, 100, .16); }
.fld.invalid input { border-color: var(--erro); }
.fld .err { display: none; font-size: 14px; font-weight: 700; color: var(--erro); margin: 6px 0 0 2px; }
.fld.invalid .err { display: block; }
.row2 { display: grid; gap: 0 12px; }
@media (min-width: 480px) { .row2 { grid-template-columns: 1fr 1fr; } }
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 20px; font-size: 14px; color: var(--texto-2); line-height: 1.45; cursor: pointer; }
.consent input { appearance: none; -webkit-appearance: none; flex: none; width: 26px; height: 26px; margin-top: -1px; border-radius: 8px; border: 2px solid #9aa7b1; background: #fff; display: grid; place-items: center; cursor: pointer; }
.consent input:checked { background: var(--verde); border-color: var(--verde); }
.consent input:checked::after { content: ""; width: 11px; height: 6px; border: 3px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.consent.invalid input { border-color: var(--erro); }
.form-alert { display: none; background: #fdecea; color: var(--erro); font-size: 15px; font-weight: 700; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.form-alert.show { display: block; }
.ts { margin-bottom: 14px; }
.secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--texto-2); text-align: center; }
.secure .ic { color: var(--verde); font-size: 16px; }
.done { display: none; text-align: center; }
.done.show { display: block; }
.done .badge { width: 72px; height: 72px; margin: 4px auto 18px; border-radius: 50%; background: var(--verde); color: #fff; display: grid; place-items: center; font-size: 32px; box-shadow: 0 0 0 8px rgba(22, 165, 100, .16); }
.done h3 { font-size: 28px; margin-bottom: 10px; }
.done .body { max-width: 34ch; margin: 0 auto 22px; }
.done ol { list-style: none; text-align: left; display: grid; gap: 10px; margin-bottom: 22px; }
.done li { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; font-size: 16px; font-weight: 700; }
.done li span { width: 28px; height: 28px; border-radius: 50%; background: var(--sol); display: grid; place-items: center; font-size: 14px; font-weight: 900; flex: none; }

/* faixa amarela em movimento */
.marquee { background: var(--sol); color: var(--tinta); overflow: hidden; padding: 22px 0; border-block: 3px solid var(--tinta); transform: rotate(-1.4deg); margin: 0 -10px; position: relative; z-index: 2; }
.marquee .run { display: flex; width: max-content; animation: corre 32s linear infinite; }
.marquee span { display: inline-flex; align-items: center; gap: 26px; padding-right: 26px; font-weight: 900; font-size: clamp(24px, 3.3vw, 46px); letter-spacing: -.03em; white-space: nowrap; }
.marquee span::after { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; flex: none; }
@keyframes corre { to { transform: translateX(-50%); } }

/* como funciona */
.steps { display: grid; gap: 22px; counter-reset: s; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { padding: 30px 26px 32px; transform: translateY(calc((1 - var(--in, 1)) * (30px + var(--i, 0) * 14px))); }
.step .num { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 900; margin-bottom: 26px; }
.step:nth-child(1) .num { background: var(--sol); color: var(--tinta); }
.step:nth-child(2) .num { background: var(--verde); color: #fff; }
.step:nth-child(3) .num { background: var(--tinta); color: var(--sol); }
.step h3 { margin-bottom: 8px; }
.step .body { font-size: 17px; }

/* o que fazemos: palco verde */
.verde { background: var(--verde); color: #fff; overflow: hidden; }
.verde .eyebrow { color: rgba(255, 255, 255, .85); }
.verde .eyebrow::before { background: var(--sol); box-shadow: 0 0 0 4px rgba(255, 200, 61, .3); }
.verde h2 span { color: var(--sol); }
.verde .body { color: rgba(255, 255, 255, .9); }
.what { display: grid; gap: 40px; align-items: center; position: relative; z-index: 1; }
@media (min-width: 960px) { .what { grid-template-columns: 1fr 1fr; gap: 80px; } }
.what h2 { margin: 18px 0 20px; }
.list { list-style: none; display: grid; gap: 12px; }
.list li { display: flex; gap: 14px; align-items: flex-start; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px; padding: 18px; font-weight: 700; font-size: 17px; }
.list .ic { color: var(--tinta); background: var(--sol); border-radius: 50%; padding: 5px; width: 30px; height: 30px; margin-top: -2px; stroke-width: 26; }
.marca-dagua { position: absolute; right: -8vw; bottom: -18vw; width: 52vw; max-width: 720px; opacity: .1; transform: rotate(20deg); pointer-events: none; }

/* parceiro (prova) */
.partner { background: var(--tinta); color: #fff; border-radius: 28px; padding: 38px 28px; display: grid; gap: 28px; align-items: center; position: relative; overflow: hidden; }
@media (min-width: 860px) { .partner { grid-template-columns: auto 1fr; padding: 52px 60px; gap: 48px; } }
.partner .seal { width: 104px; height: 104px; border-radius: 50%; background: var(--sol); color: var(--tinta); display: grid; place-items: center; font-size: 48px; box-shadow: 0 0 0 10px rgba(255, 200, 61, .18); }
.partner .eyebrow { color: rgba(255, 248, 232, .75); margin-bottom: 12px; }
.partner h2 { font-size: clamp(30px, 4.2vw, 46px); margin-bottom: 8px; }
.partner .oab { color: var(--sol); font-weight: 800; margin-bottom: 12px; }
.partner .body { color: rgba(255, 248, 232, .85); max-width: 52ch; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--papel); border-radius: 20px; border: 1px solid var(--linha); box-shadow: 0 6px 0 rgba(15, 42, 61, .05); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { width: 36px; height: 36px; border-radius: 50%; background: var(--sol); display: grid; place-items: center; flex: none; transition: transform .3s var(--ease), background .3s; }
.faq details[open] summary .pm { transform: rotate(45deg); background: var(--verde); color: #fff; }
.faq details p { padding: 0 22px 22px; color: var(--texto-2); font-size: 17px; }

/* fechamento amarelo + rodapé tinta */
.closing { background: var(--sol); color: var(--tinta); position: relative; overflow: hidden; text-align: center; padding: 110px 0 120px; }
.closing h2 { font-size: clamp(50px, 8.5vw, 130px); letter-spacing: -.05em; margin-bottom: 40px; position: relative; }
.closing h2 span { display: block; color: #fff; -webkit-text-stroke: 0; text-shadow: 0 6px 0 var(--sol-escuro); }
.closing .marca-dagua { left: -10vw; right: auto; top: -14vw; bottom: auto; opacity: .14; }
.foot { background: var(--tinta); color: rgba(255, 248, 232, .7); font-size: 14px; }
.foot .wrap { display: grid; gap: 22px; padding: 46px 0 calc(110px + env(safe-area-inset-bottom)); }
@media (min-width: 960px) { .foot .wrap { grid-template-columns: auto 1fr auto; align-items: center; gap: 48px; padding-bottom: 46px; } }
.foot img { height: 52px; width: auto; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot a { color: #fff; font-weight: 700; }

/* CTA fixo no mobile */
.sticky-cta { position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; transform: translateY(150%); transition: transform .35s var(--ease); }
.sticky-cta.show { transform: none; }
@media (min-width: 960px) { .sticky-cta { display: none; } }
#lunaos-chat-widget { position: fixed; bottom: 0; right: 0; width: 100%; max-width: 400px; height: 100%; max-height: 650px; border: 0; z-index: 9999; }

/* revelação no scroll: título recortado de baixo pra cima */
.js .reveal { clip-path: inset(0 0 100% 0); transform: translateY(32px); transition: clip-path 1s var(--ease), transform 1s var(--ease); }
.js .reveal.in { clip-path: inset(0 0 -10% 0); transform: none; }
.js .steps .reveal { clip-path: none; transform: translateY(calc(40px + var(--i, 0) * 16px)); opacity: 0; transition: transform .9s var(--ease), opacity .9s var(--ease); }
.js .steps .reveal.in { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .steps .reveal { clip-path: none; transform: none; opacity: 1; }
  .track { height: auto; }
  .stage { position: relative; }
  .portal { display: none; }
}

/* garantias: três selos, como na VSL */
.selos { display: grid; gap: 20px; }
@media (min-width: 860px) { .selos { grid-template-columns: repeat(3, 1fr); } }
.selo { text-align: center; padding: 34px 26px; border-radius: 26px; background: var(--papel); border: 2px dashed rgba(15, 42, 61, .2); }
.selo .ico { width: 84px; height: 84px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; font-size: 40px;
  background: var(--sol); color: var(--tinta); box-shadow: 0 0 0 8px rgba(255, 200, 61, .25); }
.selo:nth-child(2) .ico { background: var(--verde); color: #fff; box-shadow: 0 0 0 8px rgba(22, 165, 100, .2); }
.selo:nth-child(3) .ico { background: var(--tinta); color: var(--sol); box-shadow: 0 0 0 8px rgba(15, 42, 61, .12); }
.selo h3 { font-size: 24px; margin-bottom: 8px; }
.nota-legal { text-align: center; margin-top: 26px; font-size: 14px; color: var(--texto-2); }
.nota-legal a { font-weight: 800; }
.portal .eyebrow { color: var(--texto-2); }
.portal .eyebrow::before { background: var(--verde); box-shadow: 0 0 0 4px rgba(22, 165, 100, .18); }
@media (max-width: 860px) { .portal { clip-path: circle(calc(var(--open, 0) * 125%) at 50% 50%); } }
@media (max-width: 860px) { .orbits, .scene .art { top: calc(74% - 24% * min(1, var(--p) * 3)); } }