/* Homepage: seções e efeitos. A base (cores, fontes, botões, topo, hero, FAQ,
   final, rodapé) está em site.css. Toda animação para com prefers-reduced-motion. */

/* ---------- entrada e revelação ao rolar ---------- */
.surge{animation:surge .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
@keyframes surge{from{opacity:0;transform:translateY(18px)}}
.js .revela{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .revela.visto{opacity:1;transform:none}

/* ---------- topo encolhe ao rolar ---------- */
.topo{transition:box-shadow .3s,background .3s}
.topo .faixa{transition:height .3s}
.topo.rolou{box-shadow:0 10px 30px rgba(15,23,42,.06)}
.topo.rolou .faixa{height:58px}

/* ---------- hero ---------- */
.home .hero{position:relative}
.home main{overflow-x:clip}
.home .hero::before{content:"";position:absolute;inset:-120px 0 auto auto;width:min(720px,100vw);height:720px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(167,139,250,.22),rgba(244,114,182,.10) 50%,transparent 72%);filter:blur(10px);animation:respira 9s ease-in-out infinite}
@keyframes respira{50%{transform:scale(1.08) translate(-20px,10px)}}
.garantias{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:18px 0 0 6px;padding:0;color:var(--muted);font-size:14px}
.garantias li{display:flex;align-items:center;gap:7px}
.garantias li::before{content:"";width:16px;height:16px;border-radius:50%;flex:none;
  background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-5' fill='none' stroke='%237C3AED' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.cola .btn span{transition:transform .2s}
.cola .btn:hover span{transform:translateX(3px)}

/* celular: flutua, enquadra o rosto e canta a legenda */
.flutua{animation:flutua 6s ease-in-out infinite;animation-delay:var(--f,0s)}
@keyframes flutua{50%{transform:translateY(-10px)}}
.tela .enquadra{position:absolute;left:50%;top:26%;width:132px;height:156px;transform:translateX(-50%)}
.tela .enquadra::before{content:"";position:absolute;inset:14px 10px;border-radius:50%;background:#c9a48a}
.tela .enquadra i{position:absolute;inset:0;border:2px solid rgba(255,255,255,.7);border-radius:14px;animation:mira 4s ease-in-out infinite}
.tela .enquadra i::before,.tela .enquadra i::after{content:"";position:absolute;width:14px;height:14px;border:3px solid #fff}
.tela .enquadra i::before{left:-3px;top:-3px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.tela .enquadra i::after{right:-3px;bottom:-3px;border-left:0;border-top:0;border-radius:0 0 6px 0}
@keyframes mira{0%,100%{transform:translate(0,0)}30%{transform:translate(-8px,4px)}65%{transform:translate(7px,-3px)}}
.legenda b{display:inline-block;animation:pula .35s ease}
@keyframes pula{from{transform:scale(1.25)}}
.nota strong{font-variant-numeric:tabular-nums}
.medidor i{width:0;transition:width 1.6s cubic-bezier(.2,.7,.2,1)}
.nota.cheia .medidor i{width:92%}

/* ---------- faixa de plataformas ---------- */
.plataformas{padding:8px 0 24px;text-align:center}
.plataformas p{margin:0 0 16px;color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.trilho{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.corre{display:flex;gap:56px;width:max-content;animation:corre 28s linear infinite}
.corre span{font:400 30px/1 var(--serif);color:#64748B;white-space:nowrap}
.trilho:hover .corre,.trilho:focus-within .corre{animation-play-state:paused}
@keyframes corre{to{transform:translateX(-50%)}}

/* ---------- títulos de seção ---------- */
.titulo-secao{max-width:760px;margin-bottom:44px}
.rotulo{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.titulo-secao h2{margin-bottom:0}
.intro{color:var(--muted);font-size:18px;margin:18px 0 0;max-width:640px}
section h2{font-size:clamp(36px,4.8vw,60px)}

/* ---------- linha do tempo ---------- */
.tempo{padding-top:112px}
.linha{position:relative;height:150px;border-radius:var(--raio-lg);background:var(--bg-1);border:1px solid var(--border);margin-bottom:56px;overflow:hidden;box-shadow:var(--brilho)}
.onda{position:absolute;left:24px;right:24px;top:32px;height:62px;
  background:repeating-linear-gradient(90deg,#CBD5E1 0 3px,transparent 3px 7px);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q10 8 20 30 T40 30 T60 18 T80 40 T100 22 T120 34 T140 10 T160 44 T180 26 T200 30 T220 14 T240 42 T260 24 T280 36 T300 12 T320 40 T340 28 T360 20 T380 38 T400 30 V60 H0Z' fill='black'/%3E%3C/svg%3E") 0 0/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q10 8 20 30 T40 30 T60 18 T80 40 T100 22 T120 34 T140 10 T160 44 T180 26 T200 30 T220 14 T240 42 T260 24 T280 36 T300 12 T320 40 T340 28 T360 20 T380 38 T400 30 V60 H0Z' fill='black'/%3E%3C/svg%3E") 0 0/100% 100%}
.trecho{position:absolute;top:24px;height:78px;border-radius:10px;background:linear-gradient(180deg,rgba(167,139,250,.28),rgba(244,114,182,.18));border:1.5px solid rgba(124,58,237,.55);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.3,1.4,.5,1);transition-delay:calc(.25s + var(--i) * .22s)}
.trecho b{position:absolute;left:50%;top:-1px;transform:translate(-50%,-115%);font-size:12px;font-weight:700;color:#fff;background:var(--accent);border-radius:999px;padding:2px 8px;opacity:0;transition:opacity .3s;transition-delay:calc(.55s + var(--i) * .22s)}
.linha.visto .trecho{transform:scaleY(1)}
.linha.visto .trecho b{opacity:1}
.linha .trecho{top:36px;height:66px}
.agulha{position:absolute;top:18px;bottom:36px;left:24px;width:2px;background:var(--ink);border-radius:2px;opacity:0}
.linha.visto .agulha{opacity:1;animation:varre 4.5s cubic-bezier(.45,0,.55,1) .2s 1 both}
@keyframes varre{from{left:24px}to{left:calc(100% - 26px)}}
.marcas-tempo{position:absolute;left:24px;right:24px;bottom:10px;display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}

.passos-novos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.passos-novos li{padding:24px;border-radius:var(--raio-lg);border:1px solid var(--border);background:var(--surface);box-shadow:var(--brilho)}
.passos-novos p{color:var(--muted);margin:8px 0 0;font-size:15px}

/* ---------- agentes ---------- */
.agentes{margin-top:120px;padding:104px 0;background:#0B1120 radial-gradient(800px 400px at 20% 0%,rgba(124,58,237,.25),transparent 70%) no-repeat;color:#E2E8F0}
.agentes h2{color:#F8FAFC}
.agentes em{background:linear-gradient(90deg,#C4B5FD,#F9A8D4 50%,#FDBA74);-webkit-background-clip:text;background-clip:text;color:transparent}
.agentes .rotulo{color:#C4B5FD}
.agentes .intro{color:#94A3B8}
.funil{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:a}
.agente{position:relative;padding:22px 20px;border-radius:var(--raio-lg);background:rgba(15,23,42,.72);border:1px solid rgba(148,163,184,.16);display:flex;flex-direction:column}
.agente:not(:last-child)::after{content:"";position:absolute;right:-10px;top:42px;width:8px;height:8px;border-top:2px solid rgba(196,181,253,.6);border-right:2px solid rgba(196,181,253,.6);transform:rotate(45deg)}
.agente .ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:13px;color:#0B1120;background:linear-gradient(135deg,#C4B5FD,#F9A8D4)}
.agente h3{margin:16px 0 6px;color:#F8FAFC;font-size:18px}
.agente p{margin:0;color:#94A3B8;font-size:14px;flex:1}
.agente .conta{margin-top:18px;padding-top:14px;border-top:1px solid rgba(148,163,184,.16);color:#94A3B8;font-size:13px}
.agente .conta b{font:400 34px/1 var(--serif);color:#F8FAFC;margin-right:4px;font-variant-numeric:tabular-nums}
.nota-rodape{margin:22px 0 0;color:#94A3B8;font-size:13px}

/* ---------- bento de recursos ---------- */
.recursos-novos{padding-top:112px}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bloco-r{position:relative;overflow:hidden;padding:24px;border-radius:var(--raio-lg);border:1px solid var(--border);background:var(--surface);box-shadow:var(--brilho);transition:transform .25s,box-shadow .25s}
.bloco-r:hover{transform:translateY(-4px);box-shadow:var(--sombra-card)}
.bloco-r.grande{grid-row:span 2}
.bloco-r.largo{grid-column:1 / -1}
.bloco-r.largo .mini{height:120px}
.bloco-r p{color:var(--muted);margin:8px 0 0;font-size:15px}
.luz::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(360px circle at var(--x,50%) var(--y,50%),rgba(167,139,250,.16),transparent 60%)}
.luz:hover::before{opacity:1}
.mini{height:150px;border-radius:16px;background:var(--bg-1);border:1px solid var(--border);margin-bottom:20px;position:relative;overflow:hidden;display:grid;place-items:center}
.bloco-r.grande .mini{height:calc(100% - 140px);min-height:220px}
.rosto-mini{background:linear-gradient(180deg,#334155,#0F172A)}
.rosto-mini .quadro{position:relative;width:38%;aspect-ratio:9/16;border:2px solid #fff;border-radius:12px;box-shadow:0 0 0 999px rgba(15,23,42,.45);animation:segue 5s ease-in-out infinite}
.rosto-mini .quadro i{position:absolute;left:50%;top:36%;width:56%;aspect-ratio:1/1.15;transform:translate(-50%,-50%);border-radius:50%;background:#c9a48a}
@keyframes segue{0%,100%{transform:translateX(-30%)}45%,55%{transform:translateX(30%)}}
.karaoke-mini{font:900 26px/1 var(--sans);text-transform:uppercase;color:var(--ink);gap:0;display:flex;justify-content:center;align-items:center;column-gap:8px}
.karaoke-mini span,.karaoke-mini b{animation:canta 2.4s steps(1) infinite}
.karaoke-mini span:first-child{animation-delay:0s}.karaoke-mini b{animation-delay:.8s}.karaoke-mini span:last-child{animation-delay:1.6s}
@keyframes canta{0%{color:var(--accent);transform:scale(1.1)}33%,100%{color:var(--ink);transform:none}}
.nota-mini{display:flex;flex-direction:column;gap:10px;justify-content:center;align-items:center}
.nota-mini b{font:400 64px/1 var(--serif);background:var(--gradiente-texto);-webkit-background-clip:text;background-clip:text;color:transparent}
.nota-mini span{width:60%;height:8px;border-radius:8px;background:#E2E8F0;overflow:hidden}
.nota-mini i{display:block;height:100%;width:0;background:var(--gradiente);border-radius:8px;transition:width 1.4s .3s cubic-bezier(.2,.7,.2,1)}
.visto .nota-mini i{width:92%}
.titulo-mini{display:flex;flex-direction:column;gap:12px;padding:0 18px;justify-content:center;align-items:center}
.titulo-mini .fx{background:#e8141c;color:#fff;font-weight:800;font-size:13px;padding:8px 12px;border-radius:6px;text-align:center}
.titulo-mini .gc{font:italic 400 20px/1.2 var(--serif);color:var(--ink);text-align:center}
.tpl-mini{display:grid;grid-template-columns:repeat(4,44px);justify-content:center;align-content:center;place-items:stretch;gap:12px;padding:18px}
.tpl-mini i{aspect-ratio:9/16;border-radius:8px;background:linear-gradient(180deg,#334155,#0F172A);position:relative;transition:transform .3s}
.tpl-mini i:nth-child(2){background:linear-gradient(180deg,#fff 0 22%,#334155 22% 78%,#fff 78%)}
.tpl-mini i:nth-child(3){background:linear-gradient(180deg,#0F172A 0 24%,#475569 24% 76%,#0F172A 76%)}
.tpl-mini i:nth-child(4){background:linear-gradient(180deg,#e8141c 0 16%,#334155 16%)}
.bloco-r:hover .tpl-mini i:nth-child(odd){transform:translateY(-6px)}
.bloco-r:hover .tpl-mini i:nth-child(even){transform:translateY(6px)}
.ajuste-mini .regua{position:relative;width:86%;height:44px;border-radius:10px;background:repeating-linear-gradient(90deg,#CBD5E1 0 2px,transparent 2px 9px)}
.ajuste-mini .sel{position:absolute;top:-4px;bottom:-4px;left:30%;width:34%;border-radius:10px;background:rgba(124,58,237,.14);border:2px solid var(--accent);animation:ajusta 5s ease-in-out infinite}
@keyframes ajusta{0%,100%{left:30%;width:34%}50%{left:24%;width:44%}}

/* ---------- antes e depois ---------- */
.comparar{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:112px}
.comparar .lado{border-radius:var(--raio-lg);padding:32px;border:1px solid var(--border)}
.comparar ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:17px}
.comparar li{display:flex;gap:12px;align-items:flex-start}
.comparar li::before{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;margin-top:2px}
.ruim{background:var(--bg-1);color:var(--muted)}
.ruim .rotulo{color:var(--muted)}
.ruim li::before{content:"×";background:#E2E8F0;color:#64748B}
.bom{background:var(--surface);box-shadow:var(--sombra-card);border-color:rgba(124,58,237,.25)}
.bom li::before{content:"✓";background:var(--accent);color:#fff}

/* ---------- planos ---------- */
.planos{padding-top:112px}
.cards-planos{display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:16px}
.plano{position:relative;padding:32px;border-radius:var(--raio-lg);border:1px solid var(--border);background:var(--surface);box-shadow:var(--brilho);display:flex;flex-direction:column}
.plano h3{font-size:20px}
.preco{margin:14px 0 22px;display:flex;flex-direction:column}
.preco b{font:400 52px/1 var(--serif)}
.preco span{color:var(--muted);font-size:14px;margin-top:6px}
.plano ul{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px;flex:1}
.plano li{display:flex;gap:10px;align-items:center;font-size:15px}
.plano li::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;
  background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-5' fill='none' stroke='%237C3AED' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.plano .btn{width:100%}
.plano.destaque{background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--gradiente) border-box;border:1.5px solid transparent}
.etiqueta{position:absolute;top:22px;right:22px;font-size:12px;font-weight:700;color:#6D28D9;background:var(--accent-soft);border-radius:999px;padding:4px 10px}

.home .perguntas{padding-top:112px}

/* ---------- responsivo ---------- */
@media (max-width:1100px){
  .funil{grid-template-columns:repeat(3,1fr)}
  .agente:nth-child(3)::after{display:none}
  .passos-novos{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .bento{grid-template-columns:1fr 1fr}
  .bloco-r.grande{grid-row:auto;grid-column:span 2}
  .bloco-r.grande .mini{height:220px}
  .comparar{grid-template-columns:1fr}
  .cards-planos{grid-template-columns:1fr}
  .funil{grid-template-columns:1fr 1fr}
  .agente::after{display:none}
  .agente:last-child{grid-column:1/-1}
  .linha{height:132px}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .bloco-r.grande,.bloco-r.largo{grid-column:auto}
  .passos-novos,.funil{grid-template-columns:1fr}
  .tempo,.recursos-novos,.comparar,.planos,.home .perguntas{padding-top:72px}
  .agentes{margin-top:72px;padding:72px 0}
  .marcas-tempo span:nth-child(even){visibility:hidden}
  .corre span{font-size:24px}
  .comparar .lado,.plano{padding:24px}
}
@media (prefers-reduced-motion:reduce){
  .surge,.flutua,.corre,.home .hero::before,.tela .enquadra i,.rosto-mini .quadro,.karaoke-mini *,.ajuste-mini .sel,.linha.visto .agulha{animation:none!important}
  .js .revela{opacity:1;transform:none;transition:none}
  .legenda b{animation:none!important}.bloco-r,.bloco-r:hover,.tpl-mini i{transition:none;transform:none!important}.topo .faixa{transition:none}
  .palco .celular,.pilha i{transform:none!important}
  .trecho,.trecho b,.medidor i,.nota-mini i{transition:none}
}

/* ---------- gradiente só onde importa: hero, final e seção escura ---------- */
section:not(.hero):not(.final):not(.agentes) h2 em{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--accent)}
.num{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--accent)}

/* ---------- 3D: palco em perspectiva que segue o mouse ---------- */
.palco{perspective:1200px}
.palco .celular,.palco .cartao{transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.palco .celular{transform:rotateY(var(--ry,-12deg)) rotateX(var(--rx,6deg))}
.palco .nota{transform:translateZ(60px) rotateY(var(--ry,-12deg)) rotateX(var(--rx,6deg))}
.palco .lista{transform:translateZ(40px) rotateY(var(--ry,-12deg)) rotateX(var(--rx,6deg))}
.palco .flutua{animation:none}
.pilha{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d;pointer-events:none}
.pilha i{position:absolute;width:200px;height:400px;border-radius:30px;background:linear-gradient(180deg,#334155,#0F172A);box-shadow:0 30px 60px -20px rgba(15,23,42,.45);border:1px solid rgba(255,255,255,.08);
  transform:rotateY(var(--ry,-12deg)) rotateX(var(--rx,6deg)) translateX(var(--x)) translateZ(var(--z)) rotateZ(var(--r));transition:transform .7s cubic-bezier(.2,.7,.2,1);opacity:.9}
.pilha i b{position:absolute;top:14px;left:14px;font:600 12px var(--sans);color:#fff;background:var(--accent);border-radius:999px;padding:2px 8px}
.pilha .p1{--x:-150px;--z:-120px;--r:-9deg}
.pilha .p2{--x:150px;--z:-160px;--r:8deg;background:linear-gradient(180deg,#4C1D95,#0F172A)}
.pilha .p3{--x:-60px;--z:-260px;--r:-3deg;background:linear-gradient(180deg,#9D174D,#0F172A)}
.palco:hover .pilha .p1{--x:-190px}.palco:hover .pilha .p2{--x:190px}
/* blocos de recurso inclinam em 3D com o mouse */
.bento{perspective:1400px}
.bloco-r{transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transform-style:preserve-3d}
.bloco-r:hover{transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(-4px)}
.bloco-r .mini{transform:translateZ(30px)}

/* ---------- menu no celular ---------- */
.menu-cel{display:none}
@media (max-width:860px){
  .menu-cel{display:block;position:relative}
  .menu-cel summary{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;border:1px solid var(--border-strong);list-style:none;cursor:pointer}
  .menu-cel summary::-webkit-details-marker{display:none}
  .menu-cel summary::after{content:none}
  .menu-cel summary span,.menu-cel summary span::before,.menu-cel summary span::after{display:block;width:16px;height:2px;border-radius:2px;background:var(--ink);position:relative;transition:transform .2s}
  .menu-cel summary span::before,.menu-cel summary span::after{content:"";position:absolute;left:0}
  .menu-cel summary span::before{top:-5px}.menu-cel summary span::after{top:5px}
  .menu-cel[open] summary span{background:transparent}
  .menu-cel[open] summary span::before{transform:translateY(5px) rotate(45deg)}
  .menu-cel[open] summary span::after{transform:translateY(-5px) rotate(-45deg)}
  .menu-cel nav{position:absolute;right:0;top:54px;display:grid;min-width:230px;padding:8px;background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--sombra-card);animation:surge .2s ease-out}
  .menu-cel nav a{padding:12px 14px;border-radius:12px;text-decoration:none;font-weight:500}
  .menu-cel nav a:hover{background:var(--bg-1)}
  .pilha{display:none}
}
@media (max-width:560px){
  .topo #topoEntrar{display:none}
  .topo .btn:not(.fantasma){padding:0 14px;height:40px;font-size:14px}
}
@media (min-width:561px){.entrar-cel{display:none}}

/* ---------- final e rodapé ---------- */
.final .cola-final{margin:0 auto 18px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);box-shadow:none}
.final .cola-final input{color:#F8FAFC}
.final .cola-final input::placeholder{color:#94A3B8}
.final .garantias{justify-content:center;color:#CBD5E1;margin:0}
.final .garantias li::before{background-color:rgba(196,181,253,.2)}
.rodape .grade-r{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding-top:56px;padding-bottom:32px}
.rodape .col-marca p{color:#94A3B8;max-width:320px;margin:14px 0 0;font-size:14px}
.rodape .col-marca .marca{color:#F8FAFC}
.rodape nav{display:flex;flex-direction:column;gap:10px}
.rodape nav b{color:#F8FAFC;font-size:14px;margin-bottom:4px}
.rodape nav a{color:#94A3B8;text-decoration:none;font-size:14px}
.rodape nav a:hover{color:#F8FAFC}
.rodape .base-r{border-top:1px solid rgba(148,163,184,.12);padding-top:20px;padding-bottom:28px;display:block}
@media (max-width:860px){.rodape .grade-r{grid-template-columns:1fr 1fr}.rodape .col-marca{grid-column:1/-1}}
/* a revelação ao rolar não pode apagar a inclinação 3D */
.js .bloco-r.revela.visto{transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))}
.js .bloco-r.revela.visto:hover{transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(-4px)}
.js .bloco-r.revela.visto{transition:opacity .8s,transform .25s ease-out,box-shadow .25s}
@media (prefers-reduced-motion:reduce){.js .bloco-r.revela.visto,.js .bloco-r.revela.visto:hover{transform:none}}
/* bloco "segue o rosto": a mesma cena do celular, em 16:9, com o quadro 9:16 acompanhando quem fala */
.rosto-mini{background:url(/site/cena.svg) center 35%/cover,#120E1C}
.rosto-mini .quadro{width:34%;border:2px solid #fff;box-shadow:0 0 0 999px rgba(15,23,42,.55)}
.rosto-mini .quadro::before,.rosto-mini .quadro::after{content:"";position:absolute;width:14px;height:14px;border:3px solid #fff}
.rosto-mini .quadro::before{left:-3px;top:-3px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.rosto-mini .quadro::after{right:-3px;bottom:-3px;border-left:0;border-top:0;border-radius:0 0 6px 0}
@keyframes segue{0%,100%{transform:translateX(-8%)}45%,55%{transform:translateX(8%)}}
.acoes{align-items:center}
@media (max-width:860px){.palco .nota{right:auto;left:calc(50% - 300px);top:150px}}
@media (max-width:560px){.palco .nota{display:none}}

/* ======================================================================
   Carrossel 3D do topo (carrossel.js). Anel de 6 celulares, raio --raio.
   ====================================================================== */
.palco.com-anel .celular,.palco.com-anel .pilha{display:none}
.palco.com-anel::before{width:520px;height:520px;background:radial-gradient(closest-side,rgba(167,139,250,.45),rgba(244,114,182,.22) 55%,rgba(251,146,60,.08) 75%,transparent)}
.anel-cena{--larg:200px;--raio:255px;position:absolute;inset:0;display:grid;place-items:center;perspective:1500px;perspective-origin:50% 40%;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.anel-cena.pegando{cursor:grabbing}
.anel{position:relative;width:var(--larg);height:calc(var(--larg) * 2);transform-style:preserve-3d;transform:translateZ(calc(var(--raio) * -1)) rotateX(-7deg) rotateY(var(--giro,0deg))}
.cel3d{position:absolute;inset:0;border-radius:32px;padding:7px;background:#0B1120;transform-style:preserve-3d;
  transform:rotateY(calc(var(--i) * 60deg)) translateZ(var(--raio));
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px -20px rgba(15,23,42,.55);
  filter:brightness(var(--luz,1)) saturate(calc(.4 + var(--luz,1) * .6));transition:box-shadow .4s}
.cel3d.na-frente{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 80px -24px rgba(124,58,237,.55),0 0 60px -10px rgba(244,114,182,.35)}
.cel3d .tela-v{border-radius:26px}
/* reflexo no chão: dá peso ao anel */
.anel-cena::after{content:"";position:absolute;left:50%;bottom:4%;width:70%;height:40px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(15,23,42,.28),transparent);filter:blur(6px)}
.fundo-v{position:absolute;inset:0;z-index:0!important;background:url(/site/cena.svg) center/cover}
.tela-v>.fundo-v~*{z-index:1}

/* variações de template em cada celular */
.tpl-preto .faixa-v{top:0;left:0;right:0;border-radius:0;background:#000;padding:16cqw 6cqw 4cqw;font-size:5cqw}
.tpl-preto .topo-v{z-index:3}
.tpl-branco .faixa-v{top:0;left:0;right:0;border-radius:0;background:#fff;color:#0F172A;padding:16cqw 6cqw 4cqw;font-size:5cqw}
.tpl-branco .topo-v{color:#0F172A;text-shadow:none;z-index:3}.tpl-branco .topo-v b::after{background:#0F172A}
.tpl-elegante .faixa-v{background:none;box-shadow:none;color:#E8C766;font:italic 400 8cqw/1 var(--serif);text-shadow:0 1cqw 3cqw rgba(0,0,0,.6);top:20cqw}
.tpl-gigante .legenda-v{top:96cqw;font-size:13cqw;right:16cqw}
.palco .nota{z-index:5}
.palco .medidor i{transition:width .6s cubic-bezier(.2,.7,.2,1)}
@media (max-width:1100px){.anel-cena{--larg:180px;--raio:230px}}
@media (max-width:560px){.anel-cena{--larg:150px;--raio:190px}.palco.com-anel{height:400px}}

/* ======================================================================
   Linha do tempo em perspectiva: os trechos bons saltam para fora.
   ====================================================================== */
.tempo .linha{transform:perspective(1100px) rotateX(24deg);transform-origin:50% 100%;transform-style:preserve-3d;box-shadow:0 40px 60px -30px rgba(15,23,42,.25)}
.js .tempo .linha.revela.visto{transform:perspective(1100px) rotateX(24deg)}
.linha.visto .trecho{transform:scaleY(1) translateZ(26px);box-shadow:0 14px 24px -8px rgba(124,58,237,.45)}

/* agentes também inclinam com o mouse */
.funil{perspective:1200px}
.agente{transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transform-style:preserve-3d;transition:transform .25s ease-out,border-color .25s}
.js .agente.revela.visto{transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))}
.agente:hover{border-color:rgba(196,181,253,.45)}
.agente .ic{transform:translateZ(24px)}
@media (prefers-reduced-motion:reduce){.tempo .linha,.js .tempo .linha.revela.visto,.agente,.js .agente.revela.visto{transform:none}}
/* ajustes do carrossel */
.cel3d{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.luz-v{position:absolute;inset:0 0 50% 0;z-index:0!important;pointer-events:none;background:radial-gradient(70% 90% at 70% 10%,var(--tom),transparent 70%);mix-blend-mode:soft-light;opacity:.9}
.palco.com-anel .nota{right:auto;left:-40px;top:auto;bottom:60px;transform:none}
@media (max-width:860px){.palco.com-anel .nota{left:calc(50% - 300px);bottom:20px}}

/* ---------- quarta revisão: responsivo ---------- */
.topo details.menu-cel{padding:0;border:0}
.perguntas details{padding:0}
.perguntas summary{padding:20px 0}
.perguntas details p{margin:0 0 20px}
.agulha{top:36px}
.rosto-mini .quadro{width:auto;height:88%}
@media (min-width:561px) and (max-width:860px){.bloco-r.grande .mini{height:auto;aspect-ratio:16/9}}
@media (min-width:861px) and (max-width:1100px){
  .hero{grid-template-columns:1fr 1fr;gap:24px}
  .anel-cena{--larg:150px;--raio:180px}
  .palco.com-anel{height:480px}
  .palco.com-anel .nota{left:-8px;bottom:0;width:150px}
  .funil{grid-template-columns:repeat(6,1fr)}
  .agente{grid-column:span 2}
  .agente:nth-child(4){grid-column:2 / span 2}
}