/* "Como funciona": túnel em perspectiva. A seção é alta e o palco fica preso na tela enquanto a página rola.
   Sem JavaScript, ou com "reduzir movimento", vira um layout estático com os três passos lado a lado. */
/* o quadro da página recorta com clip: hidden criaria um contêiner de rolagem e o palco não ficaria preso */
@supports (overflow:clip){.site-frame{overflow:clip}}
.tunnel-section{padding:0!important;background:#f3f0fb!important}
.tunnel-section>.sphere{display:none}
.tunnel{position:relative;height:260vh}
.tunnel-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;perspective:1200px;transform-style:preserve-3d;background:#f3f0fb}
.tunnel-dots{position:absolute;inset:0;pointer-events:none;background:radial-gradient(#c9bfe6 1.2px,transparent 1.2px) 0 0/28px 28px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 55%,transparent 100%);opacity:.7}
.tunnel-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center,#7569de2e 0%,transparent 62%)}
.tunnel-ring{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;pointer-events:none}
.tunnel-ring-a{width:48vmin;height:48vmin;border:1px solid #7569de30}
.tunnel-ring-b{width:78vmin;height:78vmin;border:1px dashed #9d8fd060}

/* título central: cresce e some conforme o túnel avança (--title-scale, --title-opacity vêm do tunnel.js) */
.tunnel-title{position:relative;z-index:0;max-width:640px;padding:0 24px;text-align:center;pointer-events:none;scale:var(--title-scale,1);opacity:var(--title-opacity,1);will-change:scale,opacity;translate:0 -6vh}
.tunnel-title .eyebrow{color:#5b47b8}
.tunnel-title h2{font-size:clamp(38px,5.4vw,72px);font-weight:1000;letter-spacing:-1.8px;line-height:1;margin:14px 0 18px;color:#24203a}
.tunnel-title h2 em{font-style:normal;color:#5b47b8}
.tunnel-lede{font-size:16px;line-height:1.6;color:#5f5770;max-width:46ch;margin:0 auto}

/* cards no espaço 3D (transform e opacity vêm do tunnel.js) */
.tunnel-space{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d}
.tunnel-card{position:absolute;left:50%;top:50%;margin:0;width:var(--card-w,220px);aspect-ratio:4/5;border-radius:22px 40px 22px 22px;background:var(--card-bg,#fff);box-shadow:0 30px 60px -24px #3e315066,0 0 0 1px #3e31501a;overflow:hidden;opacity:0;will-change:transform,opacity;display:flex;flex-direction:column;justify-content:flex-end;transform:translate3d(-50%,-50%,-1700px)}
.tunnel-card img{position:absolute;inset:6% 4% 18%;width:92%;height:76%;object-fit:contain}
.tunnel-card figcaption{position:relative;margin:0 10px 10px;padding:9px 12px;border-radius:12px;background:#ffffffe6;font-size:13px;font-weight:900;color:#29273d;letter-spacing:.01em;text-align:center}

/* passos: barra fixa no rodapé do palco, o passo atual acende */
.tunnel-steps{position:absolute;left:50%;bottom:26px;translate:-50% 0;z-index:3;list-style:none;margin:0;padding:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(1100px,calc(100% - 40px));background:#ffffffd9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #e3dcf0;border-radius:22px;box-shadow:0 18px 40px -24px #3e315055}
.tunnel-steps li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;padding:12px 14px;border-radius:16px;opacity:.5;transition:opacity .35s,background-color .35s}
.tunnel-steps li.is-active{opacity:1;background:#f4f0fd}
.tunnel-steps .step-no{width:40px;height:40px;margin:0;font-size:13px;display:grid;place-items:center;border-radius:14px 14px 14px 4px;background:#ece7fa;color:#5b47b8;font-weight:950}
.tunnel-steps li:nth-child(2) .step-no{background:#ffe6d3;color:#8c4726}
.tunnel-steps li:nth-child(3) .step-no{background:#e5efd4;color:#466330}
.tunnel-steps li.is-active .step-no{transform:scale(1.08);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.tunnel-steps h3{font-size:16px;font-weight:950;margin:2px 0 4px;color:#24203a}
.tunnel-steps p{font-size:13px;line-height:1.5;color:#5f5770;margin:0}

.tunnel-prompt{position:absolute;top:22px;left:50%;translate:-50% 0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:900;letter-spacing:.24em;text-transform:uppercase;color:#6c5c7a;opacity:var(--prompt-opacity,1);pointer-events:none}
.tunnel-prompt i{width:1px;height:24px;background:linear-gradient(#5b47b8,transparent)}
.tunnel-after{padding:10px 0 70px}
.tunnel-after .ia-strip{margin-top:0}

@media(max-width:767px){
  .tunnel{height:230vh}
  .tunnel-title{translate:0 -14vh}
  .tunnel-title .eyebrow{white-space:normal;line-height:1.6;letter-spacing:.14em}
  .tunnel-title h2{font-size:clamp(32px,9vw,44px);letter-spacing:-1px}
  .tunnel-lede{font-size:14px}
  .tunnel-card figcaption{font-size:11px;padding:7px 8px}
  .tunnel-steps{bottom:14px;grid-template-columns:1fr;gap:0;padding:6px}
  .tunnel-steps li{display:none;grid-template-columns:36px 1fr;padding:10px}
  .tunnel-steps li.is-active{display:grid}
  .tunnel-steps .step-no{width:36px;height:36px}
  .tunnel-prompt{top:14px}
  .tunnel-after{padding-bottom:50px}
}

/* sem JavaScript ou com menos movimento: seção estática e legível */
.tunnel-static .tunnel{height:auto}
.tunnel-static .tunnel-stage{position:relative;height:auto;display:block;padding:80px 0 40px;perspective:none}
.tunnel-static .tunnel-title{scale:1;opacity:1;translate:none;margin:0 auto 28px}
.tunnel-static .tunnel-space,.tunnel-static .tunnel-prompt,.tunnel-static .tunnel-ring{display:none}
.tunnel-static .tunnel-steps{position:relative;left:auto;bottom:auto;translate:none;margin:0 auto}
.tunnel-static .tunnel-steps li{display:grid;opacity:1}
@media(max-width:767px){.tunnel-static .tunnel-steps{grid-template-columns:1fr}.tunnel-static .tunnel-stage{padding-top:50px}}