/* Pagina "Vender para a loja" (/trabalhe-conosco).
   Mesmo azul e ciano do resto da loja, com profundidade (brilho, grade, linha de luz) e movimento de ritmo
   "premium": entrada em 0,6 a 0,7 s com desaceleracao suave, escalonada; revelacao ao rolar; luz que segue o
   mouse nos cartoes. So transform e opacity se movem. "Reduzir movimento" desliga tudo (fim do arquivo). */

.trabalhe{--suave:cubic-bezier(.2,0,0,1);display:grid;gap:22px}

/* ------------------------------------------------------------------ entrada */
.trab-hero{position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--borda);
  border-radius:22px;padding:clamp(30px,5vw,56px) clamp(20px,5vw,56px) clamp(28px,4.5vw,46px);text-align:center;
  background:linear-gradient(180deg,rgba(30,123,255,.11),rgba(7,11,20,0) 72%),var(--fundo-2)}
/* grade fina que some para os lados */
.trab-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(89,160,255,.08) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(89,160,255,.08) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 90% at 50% 0%,#000 0,transparent 72%);
  mask-image:radial-gradient(ellipse 80% 90% at 50% 0%,#000 0,transparent 72%)}
/* linha de luz no topo, a mesma dos cartoes da vitrine */
.trab-hero::after{content:"";position:absolute;top:-1px;left:14%;right:14%;height:2px;border-radius:2px;
  pointer-events:none;opacity:.75;
  background:linear-gradient(90deg,transparent,var(--azul-claro),var(--ciano),transparent)}
/* dois brilhos grandes que derivam devagar (ambiente) */
.trab-brilho i{position:absolute;z-index:-1;border-radius:50%;filter:blur(54px);pointer-events:none;
  will-change:transform}
.trab-brilho i:nth-child(1){width:380px;height:380px;right:-90px;top:-150px;opacity:.55;
  background:radial-gradient(closest-side,rgba(56,214,224,.6),transparent);
  animation:trab-deriva 15s ease-in-out infinite alternate}
.trab-brilho i:nth-child(2){width:320px;height:320px;left:-110px;bottom:-170px;opacity:.5;
  background:radial-gradient(closest-side,rgba(30,123,255,.6),transparent);
  animation:trab-deriva 19s ease-in-out infinite alternate-reverse}
@keyframes trab-deriva{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-42px,34px,0) scale(1.14)}
}

.trab-pilula{display:inline-flex;align-items:center;gap:9px;padding:6px 15px 6px 12px;border-radius:99px;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ciano);
  background:var(--ciano-fundo);border:1px solid rgba(56,214,224,.32)}
.trab-pilula i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--ciano)}
.trab-pilula i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ciano);
  animation:trab-pulso 2.4s ease-out infinite}
@keyframes trab-pulso{from{transform:scale(1);opacity:.65}to{transform:scale(3.2);opacity:0}}

.trab-hero h1{margin:16px auto 12px;font-size:clamp(26px,4.2vw,42px);line-height:1.08;font-weight:900;
  letter-spacing:-.025em;text-wrap:balance;max-width:24ch;
  background:linear-gradient(96deg,#fff 6%,#cfe3ff 36%,var(--azul-claro) 66%,var(--ciano));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.trab-sub{margin:0 auto;max-width:56ch;color:var(--txt-2);font-size:clamp(14.5px,1.8vw,16.5px);line-height:1.6;
  text-wrap:pretty}

.trab-fatos{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.trab-fatos li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;
  font-size:13.5px;font-weight:700;color:var(--txt);background:rgba(16,26,46,.72);
  border:1px solid var(--borda-viva);backdrop-filter:blur(6px)}
.trab-fatos svg{fill:none;stroke:var(--verde);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* entrada escalonada do que esta no alto da pagina (sem JavaScript) */
.trab-hero>:not(.trab-brilho){animation:trab-entra .7s var(--suave) both}
.trab-hero>.trab-pilula{animation-delay:.05s}
.trab-hero>h1{animation-delay:.14s}
.trab-hero>.trab-sub{animation-delay:.24s}
.trab-hero>.trab-fatos{animation-delay:.34s}
@keyframes trab-entra{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}

/* --------------------------------------------------------- caminhos rapidos */
.trab-caminhos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
.trab-caminho{--tom:var(--azul);--tom-claro:var(--azul-claro);--luz:rgba(30,123,255,.20);
  position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:14px;
  padding:24px;border-radius:20px;border:1px solid color-mix(in srgb,var(--tom) 38%,var(--borda));
  background:linear-gradient(165deg,color-mix(in srgb,var(--tom) 13%,transparent),var(--cartao) 58%);
  transition:transform .35s var(--suave),border-color .35s,box-shadow .35s}
.trab-caminho.trab-zap{--tom:var(--verde);--tom-claro:#7ff0b8;--luz:rgba(37,208,125,.20)}
.trab-caminho.trab-discord{--tom:var(--azul);--tom-claro:var(--azul-claro)}
/* luz que acompanha o mouse (posicao vem do JavaScript) */
.trab-caminho::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),var(--luz),transparent 70%);
  transition:opacity .3s}
/* faixa de luz que cruza o cartao uma vez ao pousar o mouse */
.trab-caminho::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:40%;z-index:-1;
  pointer-events:none;transform:skewX(-20deg);opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent)}
.trab-caminho:hover{transform:translateY(-4px);border-color:var(--tom);
  box-shadow:0 26px 48px -28px color-mix(in srgb,var(--tom) 70%,transparent)}
.trab-caminho:hover::before{opacity:1}
.trab-caminho:hover::after{opacity:1;left:130%;transition:left .9s var(--suave)}

.trab-icone{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;flex:none;
  color:var(--tom-claro);background:color-mix(in srgb,var(--tom) 16%,var(--fundo-2));
  border:1px solid color-mix(in srgb,var(--tom) 36%,transparent);
  transition:transform .4s var(--suave)}
.trab-icone.trab-logo{width:56px;height:56px;background:none;border:0;border-radius:50%;
  box-shadow:0 10px 26px -10px rgba(88,101,242,.8)}
.trab-icone img{display:block;width:100%;height:100%;border-radius:50%}
/* o logo do WhatsApp e um quadrado arredondado, nao um circulo */
.trab-zap .trab-icone.trab-logo{border-radius:15px;box-shadow:0 10px 26px -10px rgba(37,208,125,.75)}
.trab-zap .trab-icone img{border-radius:15px}
.trab-icone svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trab-caminho:hover .trab-icone{transform:translateY(-2px) rotate(-5deg) scale(1.06)}
.trab-caminho b{display:block;font-size:18px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px}
.trab-caminho span:not(.trab-icone){display:block;color:var(--txt-2);font-size:14px;line-height:1.55}
/* o botao fica sempre na base do cartao, mesmo com textos de tamanhos diferentes */
.trab-caminho .btn{margin-top:auto;text-align:center;width:100%;white-space:normal}
.trab-caminho .btn:active{transform:translateY(1px) scale(.99)}
.trab-caminho .btn-zap{background:var(--verde);color:#06240f;font-weight:800}

/* ------------------------------------------------------------ como funciona */
.trab-bloco{padding:6px 2px 0}
.trab-rotulo{text-align:center;margin:0 0 22px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-3)}
.trab-passos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  counter-reset:passo;position:relative}
/* linha que liga os tres passos e se desenha quando entra na tela */
.trab-passos::before{content:"";position:absolute;top:23px;left:calc((100% - 40px) / 6);right:calc((100% - 40px) / 6);height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--azul),var(--ciano));opacity:.38;
  transform-origin:left center;transform:scaleX(0);
  transition:transform 1.1s var(--suave) .25s}
.trab-bloco.visto .trab-passos::before,
.trabalhe:not(.trab-js) .trab-passos::before{transform:scaleX(1)}
.trab-passos li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:0 8px}
.trab-passos b{font-size:16px;font-weight:800;margin-top:6px}
.trab-passos li>span:not(.trab-num){color:var(--txt-2);font-size:14px;line-height:1.55;max-width:32ch}
.trab-num{counter-increment:passo;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  font-weight:900;font-size:17px;color:#04101f;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--azul-claro),var(--ciano));
  box-shadow:0 0 0 6px var(--fundo),0 0 24px -4px rgba(56,214,224,.55);
  position:relative;z-index:1}
.trab-num::before{content:counter(passo)}
.trab-bloco .trab-passos li .trab-num{transform:scale(.7);opacity:0;
  transition:transform .6s var(--suave),opacity .6s var(--suave)}
.trab-bloco.visto .trab-passos li .trab-num,
.trabalhe:not(.trab-js) .trab-passos li .trab-num{transform:none;opacity:1}
.trab-passos li:nth-child(2) .trab-num{transition-delay:.18s}
.trab-passos li:nth-child(3) .trab-num{transition-delay:.36s}

/* ----------------------------------------------------------------- formulario */
.trab-form{position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--borda-viva);
  border-top:1px solid var(--borda-viva);padding:clamp(22px,4vw,36px);
  background:linear-gradient(180deg,rgba(22,35,60,.78),var(--cartao) 42%);
  box-shadow:0 34px 64px -44px rgba(30,123,255,.6)}
.trab-form::before{content:"";position:absolute;top:-1px;left:12%;right:12%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--ciano),transparent);opacity:.7}
.trab-form .titulo-forma{margin:0 0 6px;font-size:13px;letter-spacing:.16em}
.trab-form input,.trab-form select,.trab-form textarea{transition:border-color .2s,box-shadow .2s,background .2s}
.trab-form input:hover,.trab-form select:hover,.trab-form textarea:hover{border-color:var(--borda-viva)}
.trab-form input:focus,.trab-form select:focus,.trab-form textarea:focus{border-color:var(--ciano);
  box-shadow:0 0 0 3px var(--ciano-fundo);background:#0c1527}
/* "Enviar": respira de leve e a luz passa ao pousar o mouse */
.trab-form .btn{position:relative;overflow:hidden;animation:trab-respira 3.6s ease-in-out infinite;
  transition:transform .15s,filter .2s}
.trab-form .btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:36%;pointer-events:none;
  transform:skewX(-20deg);background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transition:left .8s var(--suave)}
.trab-form .btn:hover::after{left:135%}
.trab-form .btn:active{transform:translateY(1px) scale(.99)}
@keyframes trab-respira{
  0%,100%{box-shadow:0 0 0 rgba(56,214,224,0)}
  50%{box-shadow:0 0 22px rgba(56,214,224,.36)}
}

/* ------------------------------------------------- revelacao ao rolar (JS liga) */
.trab-js [data-revela]{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .7s var(--suave),transform .7s var(--suave)}
.trab-js [data-revela].visto{opacity:1;transform:none}
/* ao terminar de aparecer, o cartao volta a responder ao hover sem atraso */
.trab-js .trab-caminho.visto{transition:transform .35s var(--suave),border-color .35s,box-shadow .35s,opacity .7s}
.trab-js .trab-caminhos>[data-revela]:nth-child(2){transition-delay:.1s}
.trab-js .trab-caminhos>[data-revela]:nth-child(3){transition-delay:.2s}

/* -------------------------------------------------------------------- celular */
@media (max-width:760px){
  .trab-hero{border-radius:18px}
  .trab-passos{grid-template-columns:1fr;gap:22px}
  .trab-passos::before{top:23px;bottom:23px;left:22px;right:auto;width:2px;height:auto;
    transform-origin:center top;transform:scaleY(0)}
  .trab-bloco.visto .trab-passos::before,
  .trabalhe:not(.trab-js) .trab-passos::before{transform:scaleY(1)}
  .trab-rotulo{text-align:left}
  .trab-passos li{padding:0 0 0 64px;align-items:flex-start;text-align:left}
  .trab-passos li .trab-num{position:absolute;left:0;top:0}
  .trab-passos b{margin-top:0}
  .trab-form .dupla{grid-template-columns:1fr}
}

/* ------------------------------------------------------ reduzir movimento */
@media (prefers-reduced-motion:reduce){
  .trabalhe *,.trabalhe *::before,.trabalhe *::after{animation:none!important;transition:none!important}
  .trab-js [data-revela],.trab-bloco .trab-passos li .trab-num{opacity:1!important;transform:none!important}
  .trab-passos::before{transform:none!important}
}