/* =========================================================================
   StarkPay — camada de polimento visual/UX.
   Carrega DEPOIS de post-53.css: seletores espelham a especificidade do
   Elementor e vencem por ordem, sem precisar de !important.
   ========================================================================= */

:root{
  --sp-cyan:#00DEFB;
  --sp-blue:#005EAE;
  --sp-sy:96px;          /* ritmo vertical entre secoes */
  --sp-head:78px;        /* altura aproximada do header fixo */
}

/* ---------- 1. RITMO VERTICAL PADRONIZADO ---------- */
.elementor-53 .elementor-element.elementor-element-e862bf8,
.elementor-53 .elementor-element.elementor-element-76a81a3{
  --padding-top:var(--sp-sy);
  --padding-bottom:var(--sp-sy);
}
/* cb45a8e precisa de vao maior embaixo: o grafico do carro (f791a7c) sobe sobre
   essa area. Padronizar em 96px fazia a imagem invadir os cards. */
.elementor-53 .elementor-element.elementor-element-cb45a8e{
  --padding-top:var(--sp-sy);
  --padding-bottom:180px;
}
.elementor-53 .elementor-element.elementor-element-f099356{
  --padding-bottom:var(--sp-sy);
}
.sp-nichos-sec{ padding-top:var(--sp-sy); padding-bottom:var(--sp-sy); }

/* ---------- 2. DIVISORES EM GRADIENTE ----------
   border-image em vez de ::before: o Elementor usa ::before dos containers
   para a camada de background overlay. */
.elementor-53 .elementor-element.elementor-element-cb45a8e,
.elementor-53 .elementor-element.elementor-element-e862bf8,
.elementor-53 .elementor-element.elementor-element-76a81a3,
.sp-nichos-sec{
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent 0%,rgba(0,222,251,.32) 50%,transparent 100%) 1;
}

/* ---------- 3. HEADER FIXO ---------- */
/* scroll-behavior fica DESLIGADO ate' a pagina terminar de carregar. Com ele
   ligado desde o inicio, a restauracao de rolagem do navegador no reload vira
   animacao e a pagina 'desce' sozinha na frente do usuario. */
html{ scroll-padding-top:calc(var(--sp-head) + 18px); }
html.sp-ready{ scroll-behavior:smooth; }
#diferenciais,#pagamentos,#integracoes,#nichos{ scroll-margin-top:calc(var(--sp-head) + 18px); }

.elementor-53 .elementor-element.elementor-element-8302b5b{
  position:sticky; top:0; z-index:9000;
  transition:background-color .32s ease, box-shadow .32s ease, padding .32s ease;
}
body.sp-scrolled .elementor-53 .elementor-element.elementor-element-8302b5b{
  background-color:rgba(0,0,0,.86);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 10px 34px rgba(0,0,0,.5);
}
/* a pilula clara do menu fica discreta quando o header ganha fundo */
body.sp-scrolled .elementor-53 .elementor-element.elementor-element-f49ed0f{
  background-color:rgba(255,255,255,.06);
}

/* ---------- 4. LINK ATIVO NO MENU ---------- */
.elementor-53 .elementor-element.elementor-element-ad3f533 a{
  position:relative; transition:color .25s ease;
}
.elementor-53 .elementor-element.elementor-element-ad3f533 a::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--sp-cyan),var(--sp-blue));
  transform:scaleX(0); transform-origin:center; transition:transform .28s ease;
}
.elementor-53 .elementor-element.elementor-element-ad3f533 a:hover::after,
.elementor-53 .elementor-element.elementor-element-ad3f533 a.sp-active::after{ transform:scaleX(1); }
.elementor-53 .elementor-element.elementor-element-ad3f533 a.sp-active{ color:var(--sp-cyan); }

/* ---------- 4b. MENU DO HEADER: caber 5 itens ----------
   O Elementor estiliza cada item do menu por data-id. O item "O que voce
   recebe" foi adicionado depois e nao tem regra propria, entao herdava o h2
   grande do tema e estourava a largura. Aqui a tipografia e' aplicada ao
   container, valendo para todos os itens - atuais e futuros. */
.elementor-53 .elementor-element.elementor-element-ad3f533 .elementor-heading-title{
  font-family:"Sora",sans-serif; font-size:16px; font-weight:500; color:#FFFFFF;
  line-height:1.2; margin:0; white-space:nowrap;
}
.elementor-53 .elementor-element.elementor-element-ad3f533 .elementor-heading-title a{
  color:inherit; text-decoration:none;
}
@media(min-width:1025px){
  /* menu ocupa so' o que precisa; logo a esquerda, menu no meio, CTA a direita */
  .elementor-53 .elementor-element.elementor-element-f49ed0f{
    --flex-direction:row; --justify-content:space-between; --align-items:center;
    --flex-wrap:nowrap;
  }
  .elementor-53 .elementor-element.elementor-element-ad3f533{
    --width:auto; --gap:0px 30px; --column-gap:30px; --row-gap:0px;
    --flex-wrap:nowrap; --container-widget-flex-grow:0; --container-widget-width:auto;
  }
  .elementor-53 .elementor-element.elementor-element-ad3f533 .elementor-widget{
    flex:0 0 auto; width:auto;
  }
}
@media(min-width:1025px) and (max-width:1300px){
  .elementor-53 .elementor-element.elementor-element-ad3f533{ --gap:0px 20px; --column-gap:20px; }
  .elementor-53 .elementor-element.elementor-element-ad3f533 .elementor-heading-title{ font-size:15px; }
}

/* ---------- 5. HOVER NOS CARDS ---------- */
.frosted-glass,.frosted-glassa{
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, background-color .3s ease;
}
/* box-shadow em vez de border: nao desloca o layout em 1px */
.frosted-glass:hover,.frosted-glassa:hover{
  transform:translateY(-5px);
  box-shadow:0 0 0 1px rgba(0,222,251,.4), 0 18px 44px rgba(0,0,0,.45), 0 0 46px rgba(0,222,251,.1);
}
.frosted-glass:hover .elementor-image-box-img img{ transform:scale(1.07); }
.frosted-glass .elementor-image-box-img img{ transition:transform .35s cubic-bezier(.22,.61,.36,1); }

/* botoes com gradiente ganham leve elevacao */
.elementor-button{ transition:transform .25s ease, box-shadow .25s ease, filter .25s ease; }
.elementor-button:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,222,251,.28); filter:saturate(1.08); }

/* itens de lista com check acendem no hover do bloco */
.elementor-icon-list-item{ transition:transform .22s ease; }
.elementor-icon-list-item:hover{ transform:translateX(3px); }

/* ---------- 6. CONTRASTE E ACESSIBILIDADE ---------- */
.sp-nichos-sub{ color:rgba(255,255,255,.74); }
.sp-nicho p{ color:rgba(255,255,255,.72); }
.sp-nichos-foot span{ color:rgba(255,255,255,.74); }
.elementor-53 .elementor-element.elementor-element-a9285a3 .elementor-image-box-description{ color:#B4B4B4; }

:focus-visible{ outline:2px solid var(--sp-cyan); outline-offset:3px; border-radius:4px; }
a:focus-visible,button:focus-visible{ outline:2px solid var(--sp-cyan); outline-offset:3px; }

.sp-sr{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
        clip:rect(0 0 0 0);white-space:nowrap;border:0; }

/* ---------- 7. HAMBURGUER ---------- */
.sp-burger{
  display:none; width:44px;height:44px;flex:0 0 auto;margin-left:auto;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:12px; cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  transition:background-color .25s ease;
}
.sp-burger:hover{ background:rgba(0,222,251,.16); }
.sp-burger span{ display:block;width:19px;height:2px;border-radius:2px;background:#fff;transition:transform .3s ease,opacity .25s ease; }
.sp-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.sp-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.sp-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- 8. DRAWER MOBILE ---------- */
.sp-drawer-back{
  position:fixed; inset:0; z-index:98000; background:rgba(0,0,0,.66);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .3s ease;
}
.sp-drawer-back.sp-on{ opacity:1; }
.sp-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(320px,86vw); z-index:98500;
  background:linear-gradient(165deg,#050b14 0%,#03121c 60%,#001a26 100%);
  border-left:1px solid rgba(0,222,251,.22);
  padding:26px 22px; overflow-y:auto;
  transform:translateX(100%); transition:transform .34s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column; gap:6px;
}
.sp-drawer.sp-on{ transform:translateX(0); }
/* sem isto o display:flex acima vence o atributo [hidden] e o painel fica
   sempre no layout, fora da tela, gerando rolagem horizontal. */
.sp-drawer[hidden],.sp-drawer-back[hidden]{ display:none; }
.sp-drawer-close{
  align-self:flex-end; width:38px;height:38px;margin-bottom:10px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:10px; color:#fff; font-size:22px; line-height:1; cursor:pointer;
}
.sp-drawer-close:hover{ background:rgba(0,222,251,.16); }
.sp-drawer a{
  display:block; padding:14px 14px; border-radius:12px; text-decoration:none;
  color:#fff; font-family:"Sora",sans-serif; font-size:16px; font-weight:500;
  border:1px solid transparent; transition:background-color .22s ease,border-color .22s ease,color .22s ease;
}
.sp-drawer a:hover,.sp-drawer a.sp-active{
  background:rgba(0,222,251,.1); border-color:rgba(0,222,251,.3); color:var(--sp-cyan);
}
.sp-drawer a.sp-drawer-cta{
  margin-top:12px; text-align:center; font-weight:700; color:#fff;
  background:linear-gradient(90deg,var(--sp-blue) 5%,var(--sp-cyan) 100%); border:0;
}
body.sp-lock{ overflow:hidden; }

/* ---------- 9. VOLTAR AO TOPO ---------- */
.sp-top{
  position:fixed; right:20px; bottom:24px; z-index:9500;
  width:46px;height:46px;border-radius:50%; cursor:pointer;
  background:rgba(0,0,0,.62); border:1px solid rgba(0,222,251,.35); color:var(--sp-cyan);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease, background-color .25s ease;
}
.sp-top.sp-on{ opacity:1; visibility:visible; transform:translateY(0); }
.sp-top:hover{ background:rgba(0,222,251,.18); }

/* ---------- 10. BARRA DE CTA FIXA (MOBILE) ---------- */
.sp-mcta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:9600;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(0,0,0,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid rgba(0,222,251,.22);
  transform:translateY(110%); transition:transform .34s cubic-bezier(.22,.61,.36,1);
}
.sp-mcta.sp-on{ transform:translateY(0); }
.sp-mcta a{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 20px; border-radius:64px; text-decoration:none;
  background:linear-gradient(90deg,var(--sp-blue) 5%,var(--sp-cyan) 100%);
  color:#fff; font-family:"Sora",sans-serif; font-size:16px; font-weight:600; text-transform:uppercase;
}

/* ---------- RESPONSIVO ---------- */
@media(max-width:1024px){
  .sp-burger{ display:flex; }
  /* o Elementor empilha o header em coluna no mobile; aqui volta a ser
     uma linha: logo a esquerda, hamburguer a direita. */
  .elementor-53 .elementor-element.elementor-element-f49ed0f{
    --flex-direction:row;
    --justify-content:space-between;
    --align-items:center;
    --container-widget-width:auto;
    --container-widget-flex-grow:0;
  }
  .elementor-53 .elementor-element.elementor-element-f49ed0f.e-con{ --align-self:auto; }
  .elementor-53 .elementor-element.elementor-element-97d5219.elementor-element{ --align-self:auto; }
  .elementor-53 .elementor-element.elementor-element-97d5219{ margin-bottom:0; }
}
@media(max-width:767px){
  :root{ --sp-sy:64px; --sp-head:70px; }
  .elementor-53 .elementor-element.elementor-element-e862bf8,
  .elementor-53 .elementor-element.elementor-element-76a81a3{
    --padding-top:var(--sp-sy); --padding-bottom:var(--sp-sy);
  }
  .elementor-53 .elementor-element.elementor-element-cb45a8e{
    --padding-top:var(--sp-sy); --padding-bottom:110px;
  }
  .sp-mcta{ display:block; }
  body.sp-has-mcta{ padding-bottom:84px; }
  .sp-top{ bottom:92px; right:16px; }
  .frosted-glass:hover,.frosted-glassa:hover{ transform:none; }  /* sem hover em touch */
  .elementor-icon-list-item:hover{ transform:none; }
}

@media(prefers-reduced-motion:reduce){
  html,html.sp-ready{ scroll-behavior:auto; }
  /* CORRECAO IMPORTANTE: o Elementor marca varios blocos com .elementor-invisible
     (visibility:hidden) e so' os revela dentro do handler de animacao. Esse handler
     e' pulado quando o usuario pede menos movimento, entao as secoes ficavam
     permanentemente invisiveis. Aqui elas aparecem, so' que sem animacao. */
  .elementor-invisible{ visibility:visible !important; }
  .frosted-glass,.frosted-glassa,.elementor-button,.sp-drawer,.sp-mcta,.sp-top{ transition:none; }
  .frosted-glass:hover,.frosted-glassa:hover,.elementor-button:hover{ transform:none; }
}

/* ---------- 11. HERO: grafico do carro sob o CTA ---------- */
.sp-hero-car{ width:100%; display:flex; justify-content:center; margin-top:34px; }
.sp-hero-car img{ width:min(640px,86%); height:auto; display:block; }
@media(max-width:767px){
  .sp-hero-car{ margin-top:24px; }
  .sp-hero-car img{ width:92%; }
}

/* ---------- 12. NICHOS: centralizado como as demais secoes ---------- */
.sp-nichos-wrap{ text-align:center; }
.sp-nichos-sub{ margin-left:auto; margin-right:auto; }
.sp-nicho{ text-align:left; }
.sp-nichos-foot{ text-align:left; }
@media(max-width:600px){ .sp-nichos-foot{ text-align:center; } }

/* ---------- 13. CONTADORES 2x2 NO MOBILE ----------
   Os 4 blocos empilhavam em coluna unica, esticando a pagina. Ambos os
   containers sao e-con-boxed: quem faz o flex e' o .e-con-inner, entao e' nele
   que o wrap tem que entrar (aplicar grid no pai E no inner sobrepunha tudo). */
@media(max-width:767px){
  .elementor-53 .elementor-element.elementor-element-085f3e5 > .e-con-inner,
  .elementor-53 .elementor-element.elementor-element-03940e2 > .e-con-inner{
    flex-direction:row; flex-wrap:wrap; align-items:flex-start;
    gap:30px 8px; justify-content:center;
  }
  .elementor-53 .elementor-element.elementor-element-085f3e5 > .e-con-inner > .e-con,
  .elementor-53 .elementor-element.elementor-element-03940e2 > .e-con-inner > .e-con{
    --width:calc(50% - 4px);
    width:calc(50% - 4px);
    flex:0 0 calc(50% - 4px);
    min-width:0;
  }
  /* "+17Milhoes" e' largo e vazava pra coluna vizinha: o sufixo entra menor e o
     conjunto fica centrado dentro da propria coluna. */
  .elementor-53 .elementor-element .elementor-counter-number-wrapper{
    font-size:27px; display:flex; justify-content:center; align-items:baseline;
    flex-wrap:nowrap; white-space:nowrap;
  }
  .elementor-53 .elementor-element .elementor-counter-number-suffix{ font-size:.6em; }
  .elementor-53 .elementor-element .elementor-counter-number-prefix{ font-size:.8em; }
  .elementor-53 .elementor-element.elementor-element-085f3e5 .elementor-heading-title,
  .elementor-53 .elementor-element.elementor-element-03940e2 .elementor-heading-title{
    font-size:13px; line-height:1.35; text-align:center;
  }
}

/* ---------- 14. SELOS DE CONFIANCA ----------
   O PNG dos selos (Banco Central / PCI DSS / RA1000) tem fundo branco chapado e
   entrava como um retangulo cru no meio da pagina escura. Arredondando e dando
   respiro, vira um cartao intencional em vez de um recorte mal colado. */
.elementor-53 .elementor-element.elementor-element-7b030fa img{
  border-radius:16px;
  box-shadow:0 10px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
}

/* ---------- 15. HERO MAIS COMPACTO ----------
   Havia ~200px de preto entre o header e o titulo. Encurtando, o CTA e as
   estatisticas sobem pra dentro da primeira tela. */
.elementor-53 .elementor-element.elementor-element-f099356{ --padding-top:64px; }
@media(max-width:767px){
  .elementor-53 .elementor-element.elementor-element-f099356{ --padding-top:34px; }
}

/* ---------- 16. PROFUNDIDADE NAS SECOES PRETAS ----------
   #nichos e o bloco dos selos eram preto chapado. Um brilho radial discreto no
   ciano da marca cria hierarquia sem introduzir imagem nova. */
.sp-nichos-sec{
  position:relative;
  background:
    radial-gradient(1100px 420px at 50% -8%, rgba(0,94,174,.22), transparent 68%),
    radial-gradient(760px 320px at 88% 108%, rgba(0,222,251,.10), transparent 70%);
}
.sp-nichos-sec > .e-con-inner{ position:relative; z-index:1; }

/* ---------- 17. NICHOS: cards mais encorpados ---------- */
.sp-nicho{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.11);
}
.sp-nichos-foot{
  background:linear-gradient(90deg, rgba(0,94,174,.20), rgba(0,222,251,.10));
  border-color:rgba(0,222,251,.28);
}

/* ---------- 18. DASHBOARD: remover o rodape de template ----------
   A imagem Group_427318837.webp traz, embutidos, a barra de progresso e os
   rotulos "Step node" do mockup original - texto de template que vazou pro ar.
   Cortamos essa faixa da imagem e desenhamos os passos reais em HTML abaixo. */
.elementor-53 .elementor-element.elementor-element-65b0eb5 img{
  clip-path:inset(0 0 13.5% 0);
  margin-bottom:-6px;
}

.sp-steps{ width:100%; max-width:620px; margin:10px auto 0; padding:0 6px; }
.sp-steps-line{
  position:relative; height:2px; border-radius:2px;
  background:rgba(255,255,255,.12); margin:0 46px 16px;
}
.sp-steps-fill{
  position:absolute; inset:0 auto 0 0; width:52%; border-radius:2px;
  background:linear-gradient(90deg,#00DEFB,#005EAE);
}
.sp-steps-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sp-step{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:3px; }
.sp-step-dot{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; margin-bottom:5px;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.16);
}
.sp-step.is-done .sp-step-dot,.sp-step.is-now .sp-step-dot{
  background:linear-gradient(135deg,#00DEFB,#005EAE); color:#fff; border-color:transparent;
}
.sp-step strong{ font-family:"Sora",sans-serif; font-size:14px; font-weight:600; color:#fff; line-height:1.25; }
.sp-step span:not(.sp-step-dot){ font-family:"Sora",sans-serif; font-size:12px; color:rgba(255,255,255,.62); line-height:1.3; }
@media(max-width:767px){
  .sp-steps-line{ margin:0 30px 14px; }
  .sp-step strong{ font-size:12.5px; }
  .sp-step span:not(.sp-step-dot){ font-size:11px; }
}

/* ---------- 19. NAVBAR: pilula atras dos links + CTA no gradiente ---------- */
@media(min-width:1025px){
  /* card de vidro atras de Inicio / Vantagens / Como funciona / Nichos / O que voce recebe */
  .elementor-53 .elementor-element.elementor-element-ad3f533{
    background-image:linear-gradient(90deg,#005EAE 5%,#00DEFB 100%);
    border:0;
    border-radius:100px;
    padding:12px 32px;
    box-shadow:0 10px 30px rgba(0,94,174,.35);
  }
  /* sobre o gradiente, o sublinhado do link ativo tem que ser branco pra aparecer */
  .elementor-53 .elementor-element.elementor-element-ad3f533 a::after{
    bottom:-5px; background:#FFFFFF;
  }
  .elementor-53 .elementor-element.elementor-element-ad3f533 a.sp-active{ color:#FFFFFF; }
  .elementor-53 .elementor-element.elementor-element-ad3f533 .elementor-heading-title{
    color:#FFFFFF; font-weight:600;
  }
}

/* botao Contato com o mesmo gradiente do "Criar minha conta" */
.elementor-53 .elementor-element.elementor-element-20c792b .elementor-button{
  background-color:transparent;
  background-image:linear-gradient(90deg,#005EAE 5%,#00DEFB 100%);
  border-width:0;
  color:#FFFFFF;
  fill:#FFFFFF;
  padding:16px 42px;
  font-weight:600;
}
.elementor-53 .elementor-element.elementor-element-20c792b .elementor-button:hover,
.elementor-53 .elementor-element.elementor-element-20c792b .elementor-button:focus{
  color:#FFFFFF;
}
.elementor-53 .elementor-element.elementor-element-20c792b .elementor-button:hover svg,
.elementor-53 .elementor-element.elementor-element-20c792b .elementor-button:focus svg{
  fill:#FFFFFF;
}