/* ===========================================================================
   A TELA INICIAL, na direção que o Bianchi desenhou e mandou em 2 de outubro de
   2026 (o "Novo site Destrave Giro").

   Este arquivo é o estilo dele, portado para cá sem reescrever: o que mudou foi
   o lugar, porque a nossa política de segurança não aceita script em linha, e
   folha separada ainda ganha cache e o carimbo de versão.

   O que ficou de fora do porte, e por quê:

   · o preâmbulo e o runtime do artifact, que são encanamento da plataforma e não
     do site;
   · o estilo de moldura do artifact, que só acertava a margem dentro do visor;
   · o three.js vindo de CDN, que era carregado e **nunca usado**: a abertura
     chamada de 3D é canvas 2D, e a política de segurança não aceitaria o CDN.

   As oito áreas de vídeo das dobras estão no HTML sem arquivo de origem, como
   vieram: sem o vídeo elas não mostram nada, e isso é para resolver com os
   arquivos, não com código.
   =========================================================================== */

/* Tema único e claro, como as seções claras da referência: papel-luz na abertura e no fechamento, papel cinza-quente nas fases.
   Layout: página de rolagem em três palcos fixos (a dor, a solução, o valor), cada um com etapas
   que a rolagem avança como um vídeo; seções claras e noturnas se alternam, como no sistema de referência. */
:root{
  /* Paleta Destravegiro (claro) */
  --canvas:#E9ECEA; --papel:#EFF2F0; --papel-2:#E3E7E5; --papel-luz:#F7F9F8;
  --linha:#C3C9C6; --linha-forte:#A9B1AD;
  --tinta:#16233A; --corpo:#3E4A5C; --suave:#5E6874; --apagado:#6E7885;
  --ultramar:#123C93; --ultramar-vivo:#2150C8; --ultramar-claro:#7FA0F2; --ultramar-lavado:#E2E8F6;
  --ouro:#7A5B34; --ouro-barra:#B9915B;
  --coral:#C8362B; --coral-texto:#B93226; --coral-lavado:#F7E7E5;
  --grade:rgba(22,35,58,.055);
  --btn-bg:#2150C8; --btn-fg:#FFFFFF;
  /* Seções noturnas (ardósia-noite) */
  --noite:#07173A; --noite-painel:rgba(255,255,255,.035); --noite-painel-2:rgba(255,255,255,.06);
  --sobre-noite:#E9ECEA; --sobre-noite-2:#B4BDCA; --sobre-noite-3:#8E99A6;
  --noite-acento:#7FA0F2; --noite-ouro:#E3C39D; --noite-ouro-barra:#C9A574;
  --noite-coral:#FF8C7E; --noite-coral-barra:#D9603A;
  --filete-noite:rgba(255,255,255,.14); --filete-noite-forte:rgba(255,255,255,.26);
  --noite-grade:rgba(255,255,255,.05);
  --noite-btn-bg:#7FA0F2; --noite-btn-fg:#061838;
  --bola-x:0px;
  /* Tipo */
  --display:"Bricolage Grotesque","Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --sans:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  /* Movimento (curva padrão do sistema de referência) */
  --curva:cubic-bezier(.65,.05,0,1);
  --curva-saida:cubic-bezier(.22,.61,.36,1);
  --nav-h:64px; --lt-h:64px;
  color-scheme:light;
}
/* Cada seção declara o seu tom; os componentes só leem estes nomes */
.claro{
  --fundo:var(--canvas); --t:var(--tinta); --t2:var(--suave); --t3:var(--apagado);
  --acc:var(--ultramar-vivo); --acc-t:var(--ultramar); --acc-lavado:var(--ultramar-lavado);
  --ok:var(--ouro); --ok-barra:var(--ouro-barra); --mal:var(--coral-texto); --mal-barra:var(--coral); --mal-lavado:var(--coral-lavado);
  --fil:var(--linha); --fil-forte:var(--linha-forte); --pl:var(--papel-luz); --pl2:var(--papel-2); --grd:var(--grade);
  --b-bg:var(--btn-bg); --b-fg:var(--btn-fg);
}
.escuro{
  --fundo:var(--noite); --t:var(--sobre-noite); --t2:var(--sobre-noite-2); --t3:var(--sobre-noite-3);
  --acc:var(--noite-acento); --acc-t:var(--noite-acento); --acc-lavado:rgba(127,160,242,.14);
  --ok:var(--noite-ouro); --ok-barra:var(--noite-ouro-barra); --mal:var(--noite-coral); --mal-barra:var(--noite-coral-barra); --mal-lavado:rgba(255,140,126,.14);
  --fil:var(--filete-noite); --fil-forte:var(--filete-noite-forte); --pl:var(--noite-painel); --pl2:var(--noite-painel-2); --grd:var(--noite-grade);
  --b-bg:var(--noite-btn-bg); --b-fg:var(--noite-btn-fg);
}
.luz{--fundo:var(--papel-luz)}
.claro,.escuro{background-color:var(--fundo); color:var(--t);
  background-image:radial-gradient(var(--grd) 1px,transparent 1px); background-size:26px 26px;}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--canvas); color:var(--tinta); font-family:var(--sans); font-size:16.5px; line-height:1.55; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display); margin:0; font-weight:800; letter-spacing:-.03em; line-height:.95; text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--acc,var(--ultramar-vivo)); outline-offset:3px; border-radius:6px}
.env{max-width:1240px; margin:0 auto; padding-inline:16px}
@media (min-width:900px){.env{padding-inline:32px}}
.num{font-variant-numeric:tabular-nums}

/* ---------- Navegação: o tom segue a seção embaixo dela ---------- */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; height:var(--nav-h);
  background:color-mix(in srgb,var(--fundo) 86%,transparent); color:var(--t);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--fil); transition:background-color .75s var(--curva),color .75s var(--curva),border-color .75s var(--curva)}
.nav-in{height:100%; display:flex; align-items:center; justify-content:space-between; gap:12px}
.marca{display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.02em; white-space:nowrap}
.selo{width:28px; height:28px; border-radius:7px; background:var(--noite); color:var(--ultramar-claro); display:grid; place-items:center; flex-shrink:0}
.escuro .selo{background:var(--acc); color:var(--noite)}
.nav-links{display:flex; gap:26px; font-size:14.5px; font-weight:600; color:var(--t2)}
.nav-links a:hover{color:var(--t)}
.nav-dir{display:flex; align-items:center; gap:10px}
.chip-btn{appearance:none; border:1px solid var(--fil-forte); background:transparent; border-radius:8px; height:38px; padding:0 12px; font-size:13.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; color:var(--t)}
.chip-btn:hover{border-color:var(--t)}
.chip-btn[aria-pressed="true"]{background:var(--acc); border-color:var(--acc); color:var(--b-fg)}
.chip-btn svg{width:15px; height:15px}
.toggle{width:52px; height:30px; border-radius:999px; border:1px solid var(--fil-forte); background:var(--pl2); position:relative; cursor:pointer; padding:0; flex-shrink:0}
.toggle .bola{position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:999px; background:var(--acc); color:var(--b-fg); display:grid; place-items:center; transform:translateX(var(--bola-x)); transition:transform .25s var(--curva-saida)}
.toggle svg{width:13px; height:13px}

/* ---------- Botões com rolagem de texto (text roll) ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 20px; border-radius:8px; font-family:var(--sans); font-weight:800; font-size:15.5px; letter-spacing:-.005em; cursor:pointer; border:1px solid transparent; transition:transform .12s var(--curva-saida), border-color .2s}
.btn:active{transform:scale(.98)}
.btn-pri{background:var(--b-bg); color:var(--b-fg); border-color:var(--b-bg)}
.btn-sec{background:transparent; color:var(--t); border-color:var(--fil-forte)}
.btn-sec:hover{border-color:var(--t)}
.btn .rotulo{display:inline-flex; overflow:hidden; line-height:1.35; height:1.35em}
.btn .ch{display:inline-block; white-space:pre; text-shadow:0 1.35em currentColor; transition:transform .6s cubic-bezier(.215,.61,.355,1); transition-delay:calc(var(--i) * .018s)}
@media (hover:hover){ .btn:hover .ch{transform:translateY(-1.35em)} }
.btn .seta{width:18px; height:18px; transition:transform .75s var(--curva)}
@media (hover:hover){ .btn:hover .seta{transform:translateX(3px)} }
.btn-p{min-height:40px; font-size:14px; padding:0 14px}

/* ---------- Revelação por linha (line highlight reveal) ---------- */
.ln{display:block; position:relative; width:fit-content; max-width:100%}
.ln > span{display:inline-block}
.ln::after{content:""; position:absolute; left:-.03em; right:-.03em; top:.1em; bottom:.04em; background:var(--acc); transform:scaleX(0); transform-origin:left; pointer-events:none}
.acento{font-weight:420; letter-spacing:-.035em; color:var(--acc)}
.acento.mal{color:var(--mal)} .acento.ok{color:var(--ok)}
@media (prefers-reduced-motion:no-preference){
  .revela .ln > span{opacity:0}
  .revela.ativo .ln > span{animation:ln-texto .9s var(--curva) both; animation-delay:calc(var(--d,0) * .12s + .08s)}
  .revela.ativo .ln::after{animation:ln-bloco .9s var(--curva) both; animation-delay:calc(var(--d,0) * .12s + .08s)}
}
@keyframes ln-texto{0%,46%{opacity:0}47%,100%{opacity:1}}
@keyframes ln-bloco{0%{transform:scaleX(0); transform-origin:left}46%{transform:scaleX(1); transform-origin:left}47%{transform:scaleX(1); transform-origin:right}100%{transform:scaleX(0); transform-origin:right}}

/* ---------- Abertura ---------- */
.hero{position:relative; padding-block:clamp(36px,6vw,72px) clamp(40px,6vw,80px); overflow:hidden}
.olho{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--acc-t); background:var(--acc-lavado); border-radius:999px; padding:6px 13px}
.impacto{font-size:clamp(44px,8vw,120px); line-height:.9; letter-spacing:-.045em; margin-top:22px}
.hero-pe{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:28px 56px; margin-top:clamp(28px,4vw,52px); align-items:end}
.hero-dir{display:grid; gap:18px; min-width:0}
.intro{font-size:clamp(18px,1.65vw,23px); line-height:1.45; color:var(--t2); max-width:40ch; letter-spacing:-.005em}
.intro b{color:var(--t); font-weight:600}
.acoes{display:flex; gap:10px; flex-wrap:wrap}
.confia{font-size:14px; color:var(--t3); max-width:52ch}
.confia b{color:var(--t2); font-weight:600}

/* Moldura com recorte (helmet card) */
.recorte{--c:16px; --nw:210px; --nd:28px;
  clip-path:polygon(var(--c) 0, calc(50% - var(--nw)/2) 0, calc(50% - var(--nw)/2 + var(--nd)*.7) var(--nd), calc(50% + var(--nw)/2 - var(--nd)*.7) var(--nd), calc(50% + var(--nw)/2) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c))}
.borda{background:var(--fil-forte); padding:1.5px}
.borda > .dentro{background:var(--fundo); height:100%}
.borda > .dentro.pl{background-color:var(--fundo); background-image:linear-gradient(var(--pl),var(--pl))}
.entalhe{position:absolute; left:50%; transform:translateX(-50%); height:28px; display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--t2); white-space:nowrap; z-index:2}
.entalhe i{width:7px; height:7px; border-radius:2px; background:var(--acc); transform:rotate(45deg)}

.hero-card{position:relative}
.hero-card .entalhe{top:0}
.hero-card .dentro{padding:44px 22px 18px}
.fases-mini{display:grid; gap:0}
.fases-mini a{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:12px; align-items:baseline; padding:12px 2px; border-top:1px solid var(--fil)}
.fases-mini a:first-child{border-top:0}
.fases-mini .n{font-family:var(--display); font-weight:800; font-size:15px; color:var(--acc-t)}
.fases-mini b{font-family:var(--display); font-size:19px; letter-spacing:-.02em; display:block; line-height:1.15}
.fases-mini span.d{font-size:14px; color:var(--t2); display:block; margin-top:2px; line-height:1.4}
.fases-mini .e{font-size:12.5px; font-weight:700; color:var(--t3); white-space:nowrap}
.fases-mini a:hover b{color:var(--acc-t)}

/* ---------- Cenas (palcos fixos controlados pela rolagem) ---------- */
.cena{position:relative; height:auto}
.palco-wrap{position:relative; height:max(640px, calc(100svh - var(--nav-h) - env(safe-area-inset-top,0px))); max-height:980px; padding-block:14px calc(var(--lt-h) + 22px + env(safe-area-inset-bottom,0px))}
.palco-wrap > .env{height:100%; position:relative}
.palco-wrap .entalhe{top:0}
.palco-wrap .borda{height:100%}
.palco-wrap .dentro{position:relative}
.palco{height:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(20px,4vw,56px); align-items:center; padding:clamp(46px,5vw,58px) clamp(18px,3.4vw,44px) clamp(18px,3vw,34px)}
.cena.espelho .palco{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.cena.espelho .texto{order:2}
.texto{display:grid; min-width:0; align-self:center}
.passo{grid-area:1/1; position:relative; opacity:0; visibility:hidden; transform:translateY(22px); transition:opacity .45s var(--curva-saida), transform .75s var(--curva), visibility 0s .45s}
.passo.foi{transform:translateY(-16px)}
.passo.ativo{opacity:1; visibility:visible; transform:none; transition-delay:.05s,.05s,0s}
.etiqueta{display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:700; color:var(--t2)}
.etiqueta .n{font-family:var(--display); font-weight:800; color:var(--acc-t); font-size:15px}
.etiqueta .de{color:var(--t3); font-weight:600}
.passo h2{font-size:clamp(32px,3.9vw,56px); margin-top:14px; line-height:.95; letter-spacing:-.04em}
.passo p{font-size:clamp(15px,1.25vw,17.5px); color:var(--t2); margin-top:18px; max-width:40ch; line-height:1.55}
.specs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:24px; border:1px solid var(--fil); border-radius:10px; overflow:hidden}
.specs > div{padding:10px 12px; border-left:1px solid var(--fil); min-width:0}
.specs > div:first-child{border-left:0}
.specs dt{font-size:12px; font-weight:600; color:var(--t2)}
.specs dd{margin:3px 0 0; font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-.01em; line-height:1.2}
.specs dd.num{font-size:18px}
.specs dd.mal{color:var(--mal)} .specs dd.ok{color:var(--ok)}

.visual{position:relative; height:100%; min-height:0; min-width:0}
.quadro{position:absolute; inset:0 0 32px 0; display:grid; place-items:center; opacity:0; visibility:hidden; transform:scale(.965); transition:opacity .5s var(--curva-saida), transform .9s var(--curva), visibility 0s .5s}
.quadro.ativo{opacity:1; visibility:visible; transform:none; transition-delay:.04s,.04s,0s}
.quadro > svg{width:100%; height:100%; max-height:430px; display:block; overflow:visible}
.tag-ex{position:absolute; right:0; bottom:0; font-size:12px; font-weight:700; color:var(--t2); border:1px solid var(--fil); border-radius:999px; padding:3px 10px; background:var(--fundo)}

/* SVG: cores só por tokens da seção */
.q text{font-family:var(--sans)}
.q .dsp{font-family:var(--display); letter-spacing:-.01em}
.q .t{fill:var(--t)} .q .t2{fill:var(--t2)} .q .t3{fill:var(--t3)}
.q .acc{fill:var(--acc)} .q .ok{fill:var(--ok)} .q .mal{fill:var(--mal)}
.q .b-acc{fill:var(--acc)} .q .b-ok{fill:var(--ok-barra)} .q .b-mal{fill:var(--mal-barra)}
.q .trilho{fill:var(--fil)} .q .folha{fill:var(--pl2); stroke:var(--fil)} .q .folha-cab{fill:var(--acc-lavado)}
.q .cel{fill:var(--fil-forte)} .q .cel.lendo{fill:var(--acc)} .q .cel.lido{fill:var(--t3)}
.q .zero{stroke:var(--fil-forte); stroke-width:1.5; stroke-dasharray:3 5; fill:none}
.q .pont{stroke:var(--fil-forte); stroke-width:1.4; stroke-dasharray:2 4; fill:none}
.q .traco-mal{fill:none; stroke:var(--mal-barra); stroke-width:3.6; stroke-linecap:round; stroke-linejoin:round}
.q .traco-acc{fill:none; stroke:var(--acc); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.q .cartao{fill:var(--pl); stroke:var(--fil)}
.q .fantasma{fill:none; stroke:var(--fil-forte); stroke-width:2; stroke-dasharray:3 3}
.q .botao{fill:var(--fundo); stroke:var(--acc); stroke-width:3.5}
.q .botao-o{fill:var(--fundo); stroke:var(--ok-barra); stroke-width:3.5}
.q .balao{fill:var(--t)} .q .balao-t{fill:var(--fundo)}
.q .ponto-mal{fill:var(--fundo); stroke:var(--mal-barra); stroke-width:3}
.q .ponto-ok{fill:var(--ok-barra)}
.q .seta{fill:none; stroke:var(--acc); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}

/* Animações ligadas à rolagem: --l vai de 0 a 1 dentro de cada etapa */
.cresce{transform-box:fill-box; transform-origin:50% 100%; transform:scaleY(clamp(0, calc(var(--l,1) * 1.6 - var(--k) * .06), 1))}
.surge{opacity:clamp(0, calc(var(--l,1) * 8 - var(--k)), 1)}
.estica{transform-box:fill-box; transform:scaleX(clamp(0, calc(var(--l,1) * 8 - var(--k)), 1))}
.estica.dir{transform-origin:100% 50%} .estica.esq{transform-origin:0 50%}
.tarde{opacity:clamp(0, calc(var(--l,1) * 5 - 3.2), 1)}
.meio{opacity:clamp(0, calc(var(--l,1) * 5 - 1.8), 1)}

/* Quadros em HTML */
.painel{width:100%; max-width:560px; display:grid; gap:0}
.linha-res{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:15px 4px; border-top:1px solid var(--fil)}
.linha-res:first-child{border-top:0}
.linha-res .quem{font-family:var(--display); font-weight:700; font-size:clamp(17px,1.6vw,22px); letter-spacing:-.02em}
.pilula{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--fil-forte); border-radius:6px; padding:5px 10px; font-size:13.5px; font-weight:700; color:var(--t2); white-space:nowrap}
.pilula.mal{border-color:var(--mal); color:var(--mal); background:var(--mal-lavado)}
.linha-res.pergunta .quem{color:var(--mal)}
.separa{height:1px; background:var(--fil-forte); margin:6px 0}

.retrato{width:100%; max-width:560px}
.retrato .cab{font-size:14px; font-weight:700; color:var(--t2)}
.retrato .grande{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:8px; padding-bottom:16px; border-bottom:1px solid var(--fil)}
.retrato .grande b{white-space:nowrap; font-family:var(--display); font-weight:800; font-size:clamp(36px,4.6vw,68px); letter-spacing:-.045em; line-height:1; color:var(--mal)}
.retrato .grande span{font-size:14px; color:var(--t2); text-align:right; max-width:16ch; line-height:1.35}
.barra-t{height:6px; border-radius:3px; background:var(--fil); margin-top:12px; overflow:hidden}
.barra-t i{display:block; height:100%; border-radius:3px; background:var(--mal-barra); transform-origin:left; transform:scaleX(calc(var(--l,1) * .8))}
.tres{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:4px}
.tres > div{padding:14px 12px 4px; border-left:1px solid var(--fil)}
.tres > div:first-child{border-left:0; padding-left:0}
.tres dt{font-size:13px; font-weight:600; color:var(--t2)}
.tres dd{white-space:nowrap; margin:4px 0 0; font-family:var(--display); font-weight:800; font-size:clamp(19px,2vw,28px); letter-spacing:-.03em; line-height:1.05}
.tres dd.ok{color:var(--ok)}

.conta{width:100%; max-width:580px}
.conta .res{font-family:var(--display); font-weight:800; font-size:clamp(24px,2.5vw,34px); letter-spacing:-.03em}
.eq{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:12px}
.termo{border:1px solid var(--fil-forte); border-radius:8px; padding:8px 12px; font-weight:700; font-size:15px; background:var(--pl)}
.op{font-family:var(--display); font-weight:700; font-size:22px; color:var(--t2)}
.origens{margin-top:22px; display:grid; border-top:1px solid var(--fil)}
.origem{display:grid; grid-template-columns:118px minmax(0,1fr); gap:14px; padding:12px 0; border-bottom:1px solid var(--fil); align-items:baseline}
.origem .ch{justify-self:start; font-size:12.5px; font-weight:800; border-radius:6px; padding:4px 9px; background:var(--acc-lavado); color:var(--acc-t)}
.origem p{font-size:14.5px; color:var(--t2); line-height:1.45}
.confere{margin-top:16px; display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px dashed var(--fil-forte); border-radius:10px; font-size:14.5px; color:var(--t2)}
.confere svg{width:20px; height:20px; flex-shrink:0; color:var(--acc); margin-top:1px}
.confere b{color:var(--t)}

.trava{position:relative; width:100%; max-width:560px}
.trava .fundo-sim{filter:blur(calc(var(--l,1) * 3.5px)); opacity:calc(1 - var(--l,1) * .45)}
.trava .selo-trava{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; text-align:center; gap:10px; opacity:clamp(0, calc(var(--l,1) * 3 - .6), 1); transform:translateY(calc((1 - clamp(0, var(--l,1) * 2, 1)) * 14px))}
.selo-trava .cad{width:64px; height:64px; border-radius:16px; background:var(--acc); color:var(--b-fg); display:grid; place-items:center}
.selo-trava .cad svg{width:28px; height:28px}
.selo-trava b{font-family:var(--display); font-size:clamp(22px,2.4vw,30px); letter-spacing:-.03em; line-height:1.05}
.selo-trava span{font-size:14.5px; color:var(--t2); max-width:30ch}

.recusas{width:100%; max-width:580px; display:grid}
.recusa{padding:18px 0; border-top:1px solid var(--fil); display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; align-items:start}
.recusa:last-child{border-bottom:1px solid var(--fil)}
.recusa .x{width:36px; height:36px; border-radius:9px; border:1.5px solid var(--fil-forte); display:grid; place-items:center; color:var(--t)}
.recusa .x svg{width:16px; height:16px}
.recusa b{font-family:var(--display); font-size:clamp(20px,2vw,27px); letter-spacing:-.025em; line-height:1.1; display:block}
.recusa p{font-size:14.5px; color:var(--t2); margin-top:6px}



/* ---------- Abertura 3D: a planilha em relevo, lida pela lente do cursor ---------- */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.nav3{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.marca2{display:grid; line-height:.86; font-family:var(--display); letter-spacing:-.035em; justify-self:start}
.marca2 span{font-weight:450; font-size:19px}
.marca2 b{font-weight:800; font-size:25px}
.nav-selo{justify-self:center}
.selo.g{width:38px; height:38px; border-radius:9px}
.nav3 .nav-dir{justify-self:end}
.hero3d{position:relative; height:max(660px, min(calc(100svh - var(--nav-h)), 960px)); overflow:hidden; border-bottom:1px solid var(--linha); isolation:isolate}
.hero3d .gut{padding-inline:16px}
@media (min-width:900px){.hero3d .gut{padding-inline:32px}}
#topoLinhas{position:absolute; left:-24px; top:-24px; width:calc(100% + 48px); height:calc(100% + 48px); z-index:0; transform:translate3d(var(--tx,0px),var(--ty,0px),0); transition:transform 1.2s var(--curva-saida)}
#cena3d{position:absolute; inset:0; width:100%; height:100%; z-index:1; display:block; touch-action:pan-y}
.h3-fundo{position:absolute; inset:0; z-index:0; pointer-events:none; padding-top:clamp(22px,3.4vw,44px)}
.h3-fundo .t1{font-family:var(--display); font-weight:800; font-size:clamp(54px,10.2vw,156px); letter-spacing:-.05em; line-height:.86; margin-top:14px; color:var(--tinta)}
.h3-frente{position:absolute; inset:0; z-index:2; pointer-events:none; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:calc(var(--lt-h) + 30px + env(safe-area-inset-bottom,0px))}
.h3-frente a,.h3-frente button,.h3-card{pointer-events:auto}
.h3-dir{display:grid; justify-items:end; text-align:right; gap:16px; max-width:min(620px,58%)}
.h3-dir .t2{font-family:var(--display); font-weight:800; font-size:clamp(40px,6.6vw,104px); letter-spacing:-.05em; line-height:.88}
.h3-dir .intro{max-width:36ch; font-size:clamp(16px,1.35vw,19px)}
.h3-dir .acoes{justify-content:flex-end}
.h3-card{position:relative; width:188px; flex-shrink:0}
.h3-card .tab{position:absolute; left:10px; top:0; height:20px; display:flex; align-items:center; font-size:11.5px; font-weight:700; color:var(--suave); z-index:1}
.aba{clip-path:polygon(0 0, 58% 0, calc(58% + 18px) 18px, 100% 18px, 100% 100%, 0 100%)}
.h3-card .borda{background:var(--linha-forte)}
.h3-card .dentro{background:var(--papel-luz); padding:32px 14px 14px; display:grid; gap:12px; justify-items:center; text-align:center}
.h3-card svg{width:58px; height:40px; color:var(--tinta)}
.h3-card b{display:block; font-family:var(--display); font-size:21px; letter-spacing:-.03em; line-height:1}
.h3-card .d{display:block; font-size:12px; color:var(--suave); margin-top:4px; line-height:1.3}
.h3-card hr{border:0; border-top:1px solid var(--linha); width:100%; margin:0}
.h3-card .mal{color:var(--coral-texto)}
.lente-rot{position:absolute; z-index:3; left:0; top:0; pointer-events:none; transform:translate(-50%,-100%); background:var(--tinta); color:var(--papel-luz); border-radius:8px; padding:7px 11px 8px; white-space:nowrap; opacity:0; transition:opacity .25s}
.lente-rot b{display:block; font-family:var(--display); font-size:15px; letter-spacing:-.015em; line-height:1.15}
.lente-rot span{display:block; font-size:12px; opacity:.78}
.lente-rot::after{content:""; position:absolute; left:50%; bottom:-5px; width:10px; height:10px; background:inherit; transform:translateX(-50%) rotate(45deg); border-radius:2px}
.lente-rot.on{opacity:1}
.h3-dica{position:absolute; z-index:2; left:50%; top:clamp(22px,3.4vw,44px); transform:translateX(-50%); font-size:12.5px; font-weight:700; color:var(--suave); display:flex; gap:8px; align-items:center; pointer-events:none; white-space:nowrap}
.h3-dica i{width:16px; height:16px; border:1.5px solid var(--ultramar-vivo); border-radius:50%}
@media (max-width:900px){
  .hero3d{height:max(700px, calc(100svh - var(--nav-h)))}
  .h3-card{display:none}
  .h3-dir{max-width:100%; justify-items:start; text-align:left}
  .h3-dir .acoes{justify-content:flex-start}
  .h3-frente{padding-bottom:calc(var(--lt-h) + 22px + env(safe-area-inset-bottom,0px))}
  .h3-dica{display:none}
}
@media (max-width:560px){
  .marca2 span{font-size:16px} .marca2 b{font-size:21px}
  .nav3 .btn-sec{display:none}
  .selo.g{width:32px; height:32px}
}

/* ---------- Transições roladas (tema claro) ---------- */
/* O texto das etapas gira como um letreiro: cada linha sai por cima da sua própria máscara e a próxima entra por baixo, no compasso da rolagem */
.rola .passo{transition:none; visibility:visible; transform:translateY(calc(var(--rel,0) * 26px)); opacity:var(--op,1)}
.rola .passo.foi{transform:translateY(calc(var(--rel,0) * 26px))}
.rola .passo .ln{overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.rola .passo .ln::after{display:none}
.rola .passo .ln > span{transform:translateY(calc(var(--rel,0) * (108% + var(--d,0) * 34%)))}
.rola .passo .etiqueta,.rola .passo p,.rola .passo .specs{transform:translateY(calc(var(--rel,0) * 40px))}
/* A moldura avança como se a câmera se aproximasse */
.entra{transform:translateY(calc((1 - var(--ent,1)) * 70px)) scale(calc(.9 + var(--ent,1) * .1)); transform-origin:50% 0; opacity:calc(.35 + var(--ent,1) * .65)}
.morfo{position:absolute; inset:0 0 32px 0; display:grid; place-items:center}
.morfo > svg{width:100%; height:100%; max-height:430px; display:block; overflow:visible}
#tudo{transform-box:view-box; transform-origin:50% 40%}
.sobre{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(560px,100%)}
.sobre .linha-res,.sobre .separa{opacity:0}
.hero{border-bottom:1px solid var(--linha)}
.cena{border-bottom:1px solid var(--linha)}


/* ---------- Etapas em trilho horizontal: correm da direita para a esquerda ---------- */
.palco{position:relative; display:block; padding:clamp(46px,5vw,58px) 0 clamp(30px,3.4vw,40px)}
.pista{height:100%; overflow:hidden; position:relative}
.faixa{display:flex; height:100%; gap:var(--hg,40px); padding-left:var(--hp,32px); will-change:transform}
.etapa-h{flex:0 0 var(--pw,88%); height:100%; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(20px,4vw,56px); align-items:center; position:relative; opacity:var(--op,1)}
.espelho .etapa-h{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.espelho .etapa-h .texto{order:2}
.etapa-h + .etapa-h::before{content:""; position:absolute; top:6%; bottom:6%; left:calc(var(--hg,40px) / -2); border-left:1.5px dashed var(--fil-forte)}
.etapa-h .passo{grid-area:auto; opacity:1; visibility:visible; transform:none; transition:none}
.etapa-h .texto{transform:translateX(calc(var(--rel,0) * 90px))}
.etapa-h .visual{transform:translateX(calc(var(--rel,0) * -30px)) scale(calc(1 - var(--abs,0) * .06))}
.etapa-h .quadro{opacity:1; visibility:visible; transform:none; transition:none}
.etapa-h .passo h2 .ln > span{display:inline-block; transform:translateX(calc(var(--rel,0) * (40px + var(--d,0) * 36px)))}
.seguir{position:absolute; right:14px; top:50%; transform:translateY(-50%); z-index:4; width:44px; height:44px; border-radius:50%; border:1px solid var(--fil-forte); background:var(--fundo); display:grid; place-items:center; color:var(--t); pointer-events:none; opacity:var(--seg,1); transition:opacity .3s}
.seguir svg{width:18px; height:18px}
@media (max-width:900px){
  .etapa-h,.espelho .etapa-h{grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); align-items:stretch; gap:12px}
  .espelho .etapa-h .texto{order:0}
  .seguir{width:34px; height:34px; right:6px; top:auto; bottom:52px}
}


/* ---------- Interação por cursor e toque ---------- */
.cursor{position:fixed; left:0; top:0; z-index:80; pointer-events:none; opacity:0; transition:opacity .3s}
.cursor.on{opacity:1}
.c-anel{position:absolute; left:0; top:0; width:34px; height:34px; margin:-17px 0 0 -17px; border:1.5px solid var(--ultramar-vivo); border-radius:999px; display:grid; place-items:center; transition:width .35s var(--curva), height .35s var(--curva), margin .35s var(--curva), background-color .3s, border-radius .35s var(--curva)}
.c-ponto{position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%; background:var(--ultramar-vivo); transition:width .25s, height .25s, left .25s, top .25s}
.cursor.link .c-ponto{width:16px; height:16px; left:-8px; top:-8px; background:transparent; border:2px solid var(--ultramar-vivo)}
.c-rot{font-size:11.5px; font-weight:800; color:var(--btn-fg); white-space:nowrap; opacity:0; transition:opacity .2s}
.cursor.link .c-ponto{transform-origin:center} .cursor.link .c-anel{width:58px; height:58px; margin:-29px 0 0 -29px; background:color-mix(in srgb,var(--ultramar-vivo) 12%,transparent)}
.cursor.scrub .c-anel,.cursor.soltar .c-anel{width:104px; height:34px; margin:-17px 0 0 -52px; background:var(--ultramar-vivo)}
.cursor.scrub .c-rot,.cursor.soltar .c-rot{opacity:1}
.cursor.lente{opacity:0}
.cursor.scrub .c-ponto,.cursor.soltar .c-ponto{opacity:0}
@media (hover:none),(pointer:coarse){.cursor{display:none}}
.tip{position:fixed; left:0; top:0; z-index:81; pointer-events:none; max-width:min(280px,calc(100vw - 32px)); background:var(--tinta); color:var(--papel-luz); font-size:13.5px; line-height:1.4; padding:8px 11px 9px; border-radius:8px; opacity:0; transform:translate(-50%,calc(-100% - 16px)); transition:opacity .2s}
.tip b{display:block; font-family:var(--display); font-size:14.5px; letter-spacing:-.01em; margin-bottom:2px}
.tip.on{opacity:1}
[data-tip]{cursor:help}
.scrub{touch-action:pan-y; cursor:ew-resize}
.q .insp{pointer-events:none; transition:opacity .25s}
.q .insp-rot{fill:var(--t)} .q .insp-rot-t{fill:var(--fundo)}
.q .insp-linha{stroke:var(--t); stroke-width:1.2; stroke-dasharray:3 4}
.q .insp-vao{stroke:var(--mal-barra); stroke-width:4; stroke-linecap:round}
.q .dica-svg{fill:var(--t3)}
.termo{transition:background-color .2s, border-color .2s, transform .35s var(--curva)}
.termo:hover,.termo.aceso{border-color:var(--acc); background-color:var(--acc-lavado); transform:translateY(-2px)}
#mPedacos > g{transition:opacity .25s}
#mPedacos.foco > g{opacity:.3} #mPedacos.foco > g.aceso{opacity:1}
.btn{transition:transform .12s var(--curva-saida), border-color .2s, translate .5s var(--curva)}
.letra{display:inline-block; transition:transform .7s cubic-bezier(.34,1.56,.64,1); will-change:transform}
#fechoTit{touch-action:pan-y}


/* ---------- Dinamismo na troca de etapas ---------- */
/* A etapa gira como uma porta ao sair e ao entrar, o trilho inclina com a velocidade, e barras de etapa mostram quando a próxima vem */
.pista{perspective:1800px}
.etapa-h{transform:rotateY(calc(var(--rel,0) * 22deg)) scale(calc(1 - var(--abs,0) * .08)); transform-origin:var(--orig,50% 50%); backface-visibility:hidden}
.etapa-h .visual{transform:translateX(calc(var(--rel,0) * -60px)) scale(calc(1 - var(--abs,0) * .1)) rotate(calc(var(--rel,0) * -2deg))}
.etapa-h .etiqueta{transform:translateX(calc(var(--rel,0) * 160px))}
.etapa-h .passo p,.etapa-h .passo .specs{transform:translateX(calc(var(--rel,0) * 120px)); opacity:calc(1 - var(--abs,0) * 1.4)}
.historias{position:absolute; left:var(--hp,32px); right:var(--hp,32px); bottom:10px; display:flex; gap:6px; z-index:3}
.historias button{flex:1 1 0; height:18px; padding:0; border:0; background:none; cursor:pointer; position:relative}
.historias button::before,.historias button::after{content:""; position:absolute; left:0; top:7px; height:3px; border-radius:2px}
.historias button::before{right:0; background:var(--fil)}
.historias button::after{width:calc(var(--f,0) * 100%); background:var(--acc)}
.historias button.agora::before{background:var(--fil-forte)}
@media (max-width:900px){.historias{bottom:6px}}


/* ---------- Dobras em vídeo: o cartão desdobra ao entrar e dobra ao sair ---------- */
.dobra{position:relative; height:190svh; border-bottom:1px solid var(--linha)}
.dobra-fixa{position:sticky; top:calc(var(--nav-h) + env(safe-area-inset-top,0px)); height:calc(100svh - var(--nav-h) - env(safe-area-inset-top,0px)); padding-block:clamp(18px,3vw,36px) calc(var(--lt-h) + 26px + env(safe-area-inset-bottom,0px)); overflow:hidden}
.dobra-env{height:100%; display:grid; grid-template-rows:auto minmax(0,1fr); gap:clamp(14px,2.2vw,26px)}
.dobra-leg{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:10px 48px; align-items:end}
.dobra-leg .olho{grid-column:1/-1; justify-self:start; gap:7px}
.dobra-tit{font-size:clamp(28px,3.8vw,56px); letter-spacing:-.04em; line-height:.98; max-width:20ch; transform:translateY(calc((1 - var(--u1,1)) * 40px)); opacity:calc(.2 + var(--u1,1) * .8)}
.dobra-leg p{color:var(--suave); font-size:clamp(15px,1.25vw,17.5px); max-width:44ch; opacity:var(--u1,1)}
.dobra-cartao{position:relative; margin:0; justify-self:center; align-self:start; aspect-ratio:16/9; width:min(100%, calc((100svh - var(--nav-h) - var(--lt-h) - 250px) * 1.778)); perspective:1800px;
  transform:translateY(calc(var(--sai,0) * -40px)) scale(calc(.8 + var(--u1,1) * .2 - var(--sai,0) * .08))}
.meia{position:absolute; left:0; right:0; height:50%; overflow:hidden; background:#07173A; backface-visibility:hidden}
.meia video{position:absolute; left:0; width:100%; height:200%; object-fit:cover; display:block}
.cima{top:0; border-radius:26px 26px 0 0; transform-origin:50% 100%; transform:rotateX(calc(var(--a1,0) * 1deg))}
.cima video{top:0}
.baixo{bottom:0; border-radius:0 0 26px 26px; transform-origin:50% 0; transform:rotateX(calc(var(--a2,0) * 1deg))}
.baixo video{top:-100%}
.sombra{position:absolute; inset:0; background:#050E1D; pointer-events:none}
.cima .sombra{opacity:calc(var(--a1,0) / 110)}
.baixo .sombra{opacity:calc(var(--a2,0) / -110)}
.vinco{position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(255,255,255,.14); opacity:calc(1 - var(--u1,1) + var(--sai,0)); pointer-events:none}
.dobra-pausa{position:absolute; right:14px; bottom:14px; z-index:2; opacity:calc(var(--u1,1) * 1.6 - .6 - var(--sai,0) * 2); display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px 0 10px; border-radius:8px; border:1px solid rgba(255,255,255,.26); background:rgba(7,23,58,.55); color:#E9ECEA; font:700 13px/1 var(--sans); cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.dobra-pausa svg{width:14px; height:14px}
.dobra-pausa .i-play{display:none}
.dobra-pausa[aria-pressed="true"] .i-play{display:inline}
.dobra-pausa[aria-pressed="true"] .i-pausa{display:none}
@media (max-width:900px){
  .dobra{height:175svh}
  .dobra-leg{grid-template-columns:1fr}
  .dobra-leg p{display:none}
  .dobra-cartao{aspect-ratio:3/4; width:min(100%, calc((100svh - var(--nav-h) - var(--lt-h) - 170px) * .75))}
}


/* ---------- Próximo passo: cadastro ou consultoria ---------- */
.caminhos{position:relative; padding-block:clamp(56px,8vw,112px) clamp(56px,8vw,104px); border-bottom:1px solid var(--linha)}
.cam-cab{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:14px 56px; align-items:end}
.cam-cab .olho{grid-column:1/-1; justify-self:start}
.cam-tit{font-size:clamp(38px,5.4vw,80px); letter-spacing:-.045em; line-height:.92}
.cam-cab p{color:var(--suave); font-size:clamp(16px,1.3vw,18px); max-width:40ch}
.cam-grade{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(18px,2.4vw,32px); margin-top:clamp(28px,4vw,52px); align-items:stretch}
.cam{position:relative; transition:transform .6s var(--curva)}
.cam .entalhe{top:0}
.cam .borda{height:100%}
.cam .dentro{height:100%; padding:52px clamp(20px,2.6vw,36px) clamp(22px,2.6vw,32px); display:flex; flex-direction:column; gap:18px}
.cam-pri .borda{background:var(--ultramar-vivo); padding:2px}
.cam-pri .dentro{background:var(--papel)}
.cam-sec .dentro{background:var(--papel-luz)}
.cam h3{font-size:clamp(26px,2.7vw,40px); letter-spacing:-.035em; line-height:1}
.cam-lista{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.cam-lista li{position:relative; padding-left:22px; color:var(--corpo); font-size:15.5px; line-height:1.5}
.cam-lista li::before{content:""; position:absolute; left:2px; top:.55em; width:8px; height:8px; border-radius:2px; background:var(--acc); transform:rotate(45deg)}
.cam-sec .cam-lista li::before{background:var(--ouro-barra)}
.cam-lista b{color:var(--tinta); font-weight:600}
.cam-acao{margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding-top:8px}
.cam-acao > span{font-size:14px; color:var(--suave)}
.cam-acao > span a{color:var(--ultramar); font-weight:700; border-bottom:1.5px solid}
@media (hover:hover){ .cam:hover{transform:translateY(-6px)} }
@media (max-width:900px){ .cam-cab,.cam-grade{grid-template-columns:1fr} }


/* ---------- Etapas por setas, deslize ou barras; a rolagem vertical segue a página ---------- */
.pista{touch-action:pan-y}
.nav-etapa{position:absolute; top:50%; z-index:5; transform:translateY(-50%); height:48px; min-width:48px; padding:0; border-radius:999px; border:1px solid var(--fil-forte); background:var(--fundo); color:var(--t); display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 10px 24px -14px rgba(7,23,58,.5); transition:opacity .3s, background-color .2s, border-color .2s, min-width .4s var(--curva), padding .4s var(--curva)}
.nav-etapa svg{width:20px; height:20px; flex-shrink:0}
.nav-etapa:hover{border-color:var(--t)}
.nav-etapa.ant{left:10px}
.nav-etapa.prox{right:10px; background:var(--acc); border-color:var(--acc); color:var(--b-fg)}
.nav-etapa.prox span{display:none; font-weight:800; font-size:14px; white-space:nowrap}
.nav-etapa .i-baixo{display:none}
.nav-etapa.prox span{display:none !important}
.nav-etapa.prox.fim .i-dir{display:none}
.nav-etapa.prox.fim .i-baixo{display:inline}
.nav-etapa[disabled]{opacity:0; pointer-events:none}
.dica-etapas{position:absolute; right:var(--hp,32px); top:16px; z-index:3; margin:0; font-size:12.5px; font-weight:600; color:var(--t3); max-width:min(460px,70%); text-align:right; pointer-events:none}
@media (max-width:900px){
  .nav-etapa{top:6px; transform:none; height:32px; min-width:32px}
  .nav-etapa svg{width:16px; height:16px}
  .nav-etapa.prox{right:8px}
  .nav-etapa.ant{left:auto; right:46px}
  .dica-etapas{display:none}
}

/* ---------- Linha do tempo (capítulos como num vídeo) ---------- */
.lt{position:fixed; z-index:45; left:50%; transform:translateX(-50%); bottom:calc(12px + env(safe-area-inset-bottom,0px)); width:min(820px, calc(100% - 24px)); height:var(--lt-h);
  background:color-mix(in srgb,var(--papel) 90%,transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--linha); border-radius:14px; box-shadow:0 18px 40px -22px rgba(7,23,58,.45);
  display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr); gap:16px; align-items:center; padding:0 16px; color:var(--tinta)}
.lt-rot{min-width:0; line-height:1.2}
.lt-rot span{display:block; font-size:12px; font-weight:700; color:var(--suave); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lt-rot b{display:block; font-family:var(--display); font-size:15.5px; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lt-fases{display:flex; gap:10px; min-width:0}
.lt-fase{flex:var(--n) 1 0; min-width:0; display:grid; gap:6px}
.lt-nome{font-size:12px; font-weight:700; color:var(--suave); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left}
.lt-fase.agora .lt-nome{color:var(--tinta)}
.lt-marcas{display:flex; gap:3px}
/* O capítulo desenha um filete de 4px e recebe o toque em 44px (10/10/2026): o botão
   cresce 15px para cima e para baixo e a margem negativa devolve o espaço, então a
   barra não muda de tamanho nem de desenho. Eram 14px de alvo, abaixo dos 44px que o
   DESIGN.md pede, e a conferência de celular reprovava os onze capítulos. Para cima,
   a área cobre a parte de baixo do nome da fase, que por isso deixou de ser botão:
   tocar no nome leva à etapa que está debaixo do dedo. */
.lt-marcas button{flex:1 1 0; height:44px; margin:-15px 0; padding:0; border:0; background:none; cursor:pointer; position:relative}
.lt-marcas button::before{content:""; position:absolute; left:0; right:0; top:20px; height:4px; border-radius:2px; background:var(--linha)}
.lt-marcas button::after{content:""; position:absolute; left:0; top:20px; height:4px; border-radius:2px; background:var(--ultramar-vivo); width:calc(var(--f,0) * 100%)}
.lt-marcas button:hover::before{background:var(--linha-forte)}

/* ---------- Perguntas (as contas) ---------- */
.contas{position:relative; padding-block:clamp(64px,9vw,120px) clamp(40px,6vw,72px)}
.sec-tit{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:20px 56px; align-items:end}
.sec-tit h2{font-size:clamp(38px,5.6vw,84px); letter-spacing:-.045em; line-height:.92}
.sec-tit p{color:var(--t2); font-size:clamp(16px,1.3vw,18px); max-width:44ch}
.perguntas{margin-top:clamp(28px,4vw,48px); border-top:1px solid var(--fil)}
.perg{border-bottom:1px solid var(--fil)}
.perg button{appearance:none; width:100%; background:none; border:0; text-align:left; cursor:pointer; padding:18px 0; display:grid; grid-template-columns:minmax(0,1fr) 36px; gap:16px; align-items:center}
.perg .q-t{font-family:var(--display); font-weight:700; font-size:clamp(20px,2.3vw,32px); letter-spacing:-.03em; line-height:1.1; color:var(--t2); transition:color .3s}
.perg .mais{width:34px; height:34px; border-radius:8px; border:1px solid var(--fil-forte); display:grid; place-items:center; transition:transform .5s var(--curva), background .3s}
.perg .mais svg{width:14px; height:14px}
.perg button:hover .q-t,.perg.aberta .q-t{color:var(--t)}
.perg.aberta .mais{transform:rotate(45deg); background:var(--acc); border-color:var(--acc); color:var(--b-fg)}
.perg .resp{display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--curva)}
.perg.aberta .resp{grid-template-rows:1fr}
.perg .resp > div{overflow:hidden}
.perg .resp p{padding:0 52px 22px 0; font-size:clamp(16px,1.4vw,19px); color:var(--t2); max-width:62ch}
.perg .resp p b{color:var(--t); font-weight:600}

/* ---------- Fechamento e rodapé ---------- */
.fecho{position:relative; padding-block:clamp(40px,7vw,96px) clamp(72px,10vw,140px); text-align:center}
.fecho .impacto-s{font-size:clamp(40px,7vw,104px); letter-spacing:-.045em; line-height:.92; margin:0 auto; max-width:12ch}
.fecho p{margin:22px auto 0; color:var(--t2); max-width:44ch; font-size:clamp(16px,1.35vw,19px)}
.fecho .acoes{justify-content:center; margin-top:26px}
.rodape{position:relative; padding-block:0 calc(var(--lt-h) + 40px + env(safe-area-inset-bottom,0px))}
.rodape .borda{--nw:260px}
.rodape .dentro{padding:56px clamp(20px,3vw,40px) 26px; display:grid; gap:36px}
.rodape .entalhe{top:0}
.rod-grid{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)); gap:28px}
.rod-grid h3{font-size:clamp(28px,3.4vw,46px); letter-spacing:-.04em; line-height:.95; max-width:14ch}
.rod-col span{display:block; font-size:13px; font-weight:700; color:var(--t3); margin-bottom:10px}
.rod-col a{display:block; font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.02em; padding:4px 0; color:var(--t)}
.rod-col a:hover{color:var(--acc)}
.legal{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; padding-top:18px; border-top:1px solid var(--fil); font-size:13.5px; color:var(--t2)}
.legal b{color:var(--t)}

/* ---------- Camadas: anotações do desenho ---------- */
body.camadas [data-camada]{outline:1.5px dashed var(--ultramar-vivo); outline-offset:-2px}
body.camadas [data-camada]::before{content:attr(data-camada); position:absolute; z-index:30; top:6px; left:6px; max-width:calc(100% - 12px); font:700 11.5px/1.3 var(--sans); letter-spacing:0; background:var(--btn-bg); color:var(--btn-fg); padding:4px 8px; border-radius:6px; pointer-events:none}
body.camadas .passo[data-camada]::before{top:-30px; left:0}
.mapa{position:fixed; z-index:60; top:calc(var(--nav-h) + 10px + env(safe-area-inset-top,0px)); right:12px; width:min(430px, calc(100% - 24px)); max-height:calc(100svh - var(--nav-h) - var(--lt-h) - 48px); overflow:auto;
  background:var(--papel); color:var(--tinta); border:1px solid var(--linha-forte); border-radius:14px; box-shadow:0 30px 60px -30px rgba(7,23,58,.5); padding:20px 20px 8px}
.mapa-cab{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.mapa h3{font-size:24px; letter-spacing:-.03em; line-height:1}
.mapa .fechar{appearance:none; border:1px solid var(--linha-forte); background:transparent; border-radius:8px; width:34px; height:34px; cursor:pointer; display:grid; place-items:center; flex-shrink:0}
.mapa .fechar svg{width:14px; height:14px}
.mapa p.sub{font-size:14px; color:var(--suave); margin-top:8px}
.camada{padding:14px 0; border-top:1px solid var(--linha); margin-top:14px}
.camada h4{margin:0; font-family:var(--display); font-size:16.5px; letter-spacing:-.015em; display:flex; gap:8px; align-items:baseline}
.camada h4 span{font-size:12.5px; color:var(--ultramar); font-weight:800}
.camada ul{margin:8px 0 0; padding-left:18px; font-size:14px; color:var(--corpo); display:grid; gap:5px; line-height:1.45}
.camada li b{color:var(--tinta); font-weight:600}
.camada .de-para{display:grid; grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr); gap:6px 8px; margin-top:8px; font-size:13.5px; color:var(--corpo); align-items:baseline}
.camada .de-para .seta{color:var(--apagado)}
.camada .de-para .ref{color:var(--suave)}
.amostras{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.amostras span{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--corpo); border:1px solid var(--linha); border-radius:6px; padding:3px 8px 3px 4px}
.amostras i{width:14px; height:14px; border-radius:4px; border:1px solid var(--linha)}

/* ---------- Telas estreitas ---------- */
@media (max-width:900px){
  :root{--lt-h:58px}
  .nav-links{display:none}
  .so-largo{display:none !important}
  .hero-pe{grid-template-columns:1fr}
  .hero-card{order:2}
  .palco,.cena.espelho .palco{grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); align-items:stretch; gap:14px}
  .cena.espelho .texto{order:0}
  .passo h2{font-size:clamp(30px,8.4vw,44px); margin-top:8px}
  .passo p{margin-top:10px; font-size:14.5px}
  .specs{display:none}
  .sec-tit{grid-template-columns:1fr}
  .rod-grid{grid-template-columns:1fr 1fr}
  .rod-grid > :first-child{grid-column:1/-1}
  .lt{grid-template-columns:minmax(0,1fr); gap:4px; padding:8px 12px; height:auto}
  .lt-rot{display:flex; gap:8px; align-items:baseline}
  .lt-rot span{flex-shrink:0}
  .lt-nome{display:none}
  .origem{grid-template-columns:96px minmax(0,1fr)}
  .perg .resp p{padding-right:0}
}
@media (max-width:560px){
  .nav-dir .btn-pri{display:none}
  .chip-btn .txt{display:none}
  .chip-btn{padding:0 10px}
  .tres > div{padding-inline:8px}
  .recusa{grid-template-columns:36px minmax(0,1fr); padding:13px 0}
  .recusa p{font-size:13.5px}
  .origem p{font-size:13.5px}
  .origens .origem{padding:9px 0}
  .confere{font-size:13.5px; padding:9px 11px; margin-top:10px}
  .conta .res{font-size:22px}
  .termo{padding:5px 9px; font-size:13.5px}
  .op{font-size:18px}
  .origens{margin-top:12px}
  .tres dd{font-size:18px}
  .palco{padding-top:42px}
}
@media (max-height:700px) and (max-width:900px){
  .passo p{display:none}
}
@media (prefers-reduced-motion:reduce){
  .passo,.quadro,.btn .ch,.perg .resp,.perg .mais,.toggle .bola,.nav{transition:none !important}
}