/* Imagens de contexto com degradê de transparência (17/09/2026).
   Regra: a foto nunca compete com o texto — entra escura, com máscara que a dissolve no fundo do site. */

/* Hero: foto ao fundo, presa à direita, dissolvendo para a esquerda (onde está o texto) e para baixo */
.hero__foto{position:absolute;inset:0;z-index:0;pointer-events:none;background:url(/assets/img/hero.jpg) right center/cover no-repeat;opacity:.62;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 38%,#000 62%,#000 100%),linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 38%,#000 62%,#000 100%),linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.hero__inner{z-index:1}
@media (max-width:900px){.hero__foto{opacity:.42;background-position:70% center;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 45%,transparent 85%);mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 45%,transparent 85%)}}

/* Cards do problema: foto no topo, dissolvendo no fundo do card */
.card--problem{position:relative;overflow:hidden}
.card--problem .card__foto{display:block;width:calc(100% + 64px);margin:-32px -32px 18px;aspect-ratio:3/2;object-fit:cover;opacity:.85;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 100%)}
.card--problem .card__num{position:relative}

/* Faixa "como funciona": foto larga acima dos passos, dissolvendo nas bordas */
.passos__foto{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:16px 16px 0 0;opacity:.8;margin-top:40px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
.passos__foto+.steps{margin-top:-60px;position:relative;border-radius:0 0 16px 16px;background:var(--surface-1,#0a0d12)}

/* Investimento: foto ao fundo, presa à direita, dissolvendo para a esquerda */
.invest{position:relative;overflow:hidden}
.invest__foto{position:absolute;inset:0;z-index:0;pointer-events:none;background:url(/assets/img/invest.jpg) right center/cover no-repeat;opacity:.38;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 35%,#000 75%);mask-image:linear-gradient(90deg,transparent 0%,transparent 35%,#000 75%)}
.invest__grid{position:relative;z-index:1}
@media (max-width:900px){.invest__foto{opacity:.25;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 60%);mask-image:linear-gradient(180deg,transparent 0%,#000 60%)}}

/* ===== Hero: o painel vira um GLOBO flutuando sobre uma mão (robótica virando humana) ===== */
.hero__foto{display:none}
.core{border:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible}
.core__head,.core__stream,.core__note,.core__viz-grid{display:none}
.core__viz{position:relative;height:540px;display:block;perspective:900px}
.core__viz>.core__ring,.core__viz>.core__ring-arc,.core__viz>.core__ring-inner,.core__viz>.core__svg,.core__viz>.core__nucleus{position:absolute;inset:0 0 200px;margin:auto;z-index:2}
.core__viz::before{content:"";position:absolute;inset:0 0 200px;margin:auto;width:300px;height:300px;border-radius:50%;z-index:1;
  background:radial-gradient(circle at 38% 32%,rgba(95,227,240,.42),rgba(182,166,255,.16) 48%,rgba(5,7,10,.35) 72%,transparent 74%);
  box-shadow:inset -26px -36px 70px rgba(0,0,0,.7),0 0 90px rgba(95,227,240,.22);animation:acFloat 6s ease-in-out infinite}
.core__viz>.core__ring,.core__viz>.core__ring-arc,.core__viz>.core__ring-inner,.core__viz>.core__svg,.core__viz>.core__nucleus{animation-name:acFloat;animation-duration:6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.core__ring{border-color:rgba(95,227,240,.35);transform-style:preserve-3d}
.core__ring::before,.core__ring::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(182,166,255,.3);animation:globoGira 16s linear infinite}
.core__ring::after{border-color:rgba(95,227,240,.28);animation-duration:22s;animation-direction:reverse}
.core__ring-arc{animation:acSpin 4.5s linear infinite,acFloat 6s ease-in-out infinite}
.core__ring-inner{animation:acSpinSlow 18s linear infinite,acFloat 6s ease-in-out infinite}
.core__nucleus{z-index:3}
.core__node{z-index:4;animation:acFloat 6s ease-in-out infinite}
.core__node--top{top:6px}.core__node--bottom{bottom:auto;top:312px}.core__node--right,.core__node--left{top:170px;transform:none}
.core__mao{position:absolute;left:50%;top:190px;width:430px;max-width:100%;transform:translateX(-50%);z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 52% 50% at 50% 48%,#000 38%,transparent 72%);mask-image:radial-gradient(ellipse 52% 50% at 50% 48%,#000 38%,transparent 72%)}
.core__counters{border-top:0;gap:8px;margin-top:8px}
.counter{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:12px}
@keyframes globoGira{from{transform:rotateY(0deg) rotateX(62deg)}to{transform:rotateY(360deg) rotateX(62deg)}}
@media (max-width:900px){.core__viz{height:460px}.core__viz::before,.core__viz>.core__ring,.core__viz>.core__ring-arc,.core__viz>.core__ring-inner,.core__viz>.core__svg,.core__viz>.core__nucleus{inset:0 0 160px}.core__mao{top:170px;width:360px}.core__node--bottom{top:290px}}
/* Celular estreito (<=640px): o site original encolhe o painel para 124px ao lado do título.
   Aqui o globo vira plano e fica preso ao centro por translate (não por transform, que as animações de giro usam):
   sem anéis 3D, sem flutuação em camadas — era isso que desalinhava no celular. */
@media (max-width:640px){
  .hero__inner .core{width:124px;justify-self:end}
  .core__viz{position:relative;width:124px;height:124px;margin:0 auto;display:block;perspective:none}
  .core__viz::before{inset:auto;left:50%;top:50%;translate:-50% -50%;margin:0;width:120px;height:120px;animation:none;
    box-shadow:inset -10px -14px 26px rgba(0,0,0,.7),0 0 40px rgba(95,227,240,.22)}
  .core__viz>.core__ring,.core__viz>.core__ring-arc,.core__viz>.core__ring-inner,.core__viz>.core__svg,.core__viz>.core__nucleus{inset:auto;left:50%;top:50%;translate:-50% -50%;margin:0;animation:none}
  .core__viz>.core__ring-arc{animation:acSpin 4.5s linear infinite}
  .core__viz>.core__ring-inner{animation:acSpinSlow 18s linear infinite}
  .core__ring::before,.core__ring::after{display:none}
  .core__mao,.core__node{display:none}
  .core__counters{display:none}
}
@media (max-width:380px){
  .hero__inner .core{width:104px}
  .core__viz{width:104px;height:104px}
  .core__viz::before{width:100px;height:100px}
}

/* Ícones da seção do Hub: maiores, linha fina com o gradiente da marca, flutuando devagar e acendendo ao passar o mouse */
.step__icone{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:18px;border-radius:18px;position:relative;
  background:linear-gradient(135deg,rgba(95,227,240,.16),rgba(182,166,255,.12));border:1px solid rgba(95,227,240,.3);
  box-shadow:0 0 0 1px rgba(182,166,255,.08) inset,0 14px 36px -18px rgba(95,227,240,.7);animation:iconeFlutua 5s ease-in-out infinite;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.step:nth-child(2) .step__icone{animation-delay:-1.2s}.step:nth-child(3) .step__icone{animation-delay:-2.4s}.step:nth-child(4) .step__icone{animation-delay:-3.6s}
.step__icone::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:radial-gradient(circle at 30% 20%,rgba(95,227,240,.35),transparent 60%);opacity:0;transition:opacity .25s ease}
.step__icone svg{width:32px;height:32px;stroke-dasharray:80;stroke-dashoffset:0;animation:iconeTraco 6s ease-in-out infinite}
.step:nth-child(2) .step__icone svg{animation-delay:-1.5s}.step:nth-child(3) .step__icone svg{animation-delay:-3s}.step:nth-child(4) .step__icone svg{animation-delay:-4.5s}
.step:hover .step__icone{transform:translateY(-4px) scale(1.06);border-color:rgba(95,227,240,.7);box-shadow:0 0 0 1px rgba(182,166,255,.15) inset,0 18px 40px -16px rgba(95,227,240,.9)}
.step:hover .step__icone::after{opacity:1}
@keyframes iconeFlutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes iconeTraco{0%,70%,100%{stroke-dashoffset:0;opacity:1}80%{stroke-dashoffset:80;opacity:.35}90%{stroke-dashoffset:0;opacity:1}}
@media (prefers-reduced-motion:reduce){.step__icone,.step__icone svg{animation:none}}

/* Celular: ícone e texto da seção do Hub centralizados */
@media (max-width:640px){
  #plataforma .step{text-align:center}
  #plataforma .step__icone{margin:0 auto 16px}
  #plataforma .step__title,#plataforma .step__text,#plataforma .step__label{text-align:center}
}