/* ==========================================================================
   NextJ — Design System v3
   Paleta oficial extraída de nextj.com.br
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  /* Paleta da marca */
  --deep:#26214D; --deep-2:#15122E; --deep-3:#332C63;
  --purple:#6B60A5; --purple-2:#8A7DC4; --purple-3:#A99BEC;
  --aqua:#8ECFDB; --aqua-2:#B5E3EB; --aqua-deep:#3E8FA3;

  /* Neutros */
  --lav:#DCD9E4; --lav-soft:#F0EFF6;
  --bg:#FFFFFF; --bg-alt:#F8F7FC;
  --ink:#211C42; --ink-soft:#6B6489; --ink-faint:#9A94B0;
  --line:#E7E5F0; --white:#FFF;

  /* Gradientes */
  --grad-brand:linear-gradient(135deg,#26214D 0%,#6B60A5 100%);
  --grad-hero:linear-gradient(155deg,#15122E 0%,#241F4E 34%,#3E3679 68%,#5A4F97 100%);
  --grad-accent:linear-gradient(135deg,#6B60A5 0%,#8ECFDB 100%);
  --grad-text:linear-gradient(100deg,#B5E3EB 0%,#8ECFDB 45%,#A99BEC 100%);

  --display:'Plus Jakarta Sans',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;

  --wrap:1240px;
  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;
  --sh-sm:0 2px 10px rgba(33,28,66,.05);
  --sh:0 20px 44px -26px rgba(33,28,66,.32);
  --sh-lg:0 44px 90px -46px rgba(33,28,66,.5);
  --head-h:76px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:96px;}
body{
  font-family:var(--body); color:var(--ink); background:var(--bg);
  line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none;} img,svg{max-width:100%;display:block;}
ul{list-style:none;} button{font:inherit;cursor:pointer;border:none;background:none;}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.08;letter-spacing:-.028em;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}

/* Textura sutil sobre superfícies escuras */
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

/* ---------- Utilitários ---------- */
.eyebrow{
  font-family:var(--display);font-size:11.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--purple);
  display:inline-flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--grad-accent);border-radius:2px;}
.eyebrow.on-dark{color:var(--aqua);}
.eyebrow.no-rule::before{display:none;}

.section{padding:112px 0;position:relative;}
.section.tight{padding:76px 0;}
.section.alt{background:var(--bg-alt);}
.section.dark{background:var(--deep-2);color:#fff;overflow:hidden;}
.section.dark h2,.section.dark h3{color:#fff;}
.section.dark p{color:rgba(255,255,255,.7);}
.section.dark > .wrap{position:relative;z-index:2;}

/* O título usa a largura da coluna; o parágrafo fica estreito para leitura */
.section-head{max-width:none;margin-bottom:58px;}
.section-head.center{max-width:860px;margin-left:auto;margin-right:auto;text-align:center;}
.section-head.center .eyebrow::before{display:none;}
.section-head.center h2,.section-head.center p{max-width:none;}
.section-head h2{font-size:clamp(29px,3.5vw,45px);margin-top:18px;max-width:none;text-wrap:balance;}
.section-head p{margin-top:18px;font-size:17.5px;color:var(--ink-soft);max-width:74ch;}
.section.dark .section-head p{color:rgba(255,255,255,.66);}

.hl{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hl-aqua{color:var(--aqua);}
.hl-purple{color:var(--purple);}

/* ---------- Botões ---------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.01em;
  padding:14px 26px;border-radius:12px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,background .22s ease,color .22s ease,border-color .22s ease;
  white-space:nowrap;
}
.btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);pointer-events:none;
}
.btn:hover::after{opacity:1;animation:sheen .78s cubic-bezier(.3,.6,.4,1);}
@keyframes sheen{from{left:-60%}to{left:120%}}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.985);}
.btn:focus-visible{outline:3px solid var(--aqua);outline-offset:3px;}
.btn-primary{background:var(--deep);color:#fff;box-shadow:0 14px 28px -16px rgba(38,33,77,.95);}
.btn-primary:hover{background:var(--deep-3);box-shadow:0 20px 38px -16px rgba(38,33,77,.95);}
.btn-accent{background:var(--grad-accent);color:var(--deep);box-shadow:0 16px 34px -16px rgba(107,96,165,.9);}
.btn-light{background:#fff;color:var(--deep);box-shadow:var(--sh-sm);}
.btn-outline{border:1.5px solid var(--line);color:var(--deep);background:#fff;}
.btn-outline:hover{border-color:var(--purple);color:var(--purple);}
.btn-ghost-dark{border:1.5px solid rgba(255,255,255,.26);color:#fff;background:rgba(255,255,255,.04);}
.btn-ghost-dark:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.42);}
.btn-lg{padding:17px 32px;font-size:15.5px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;gap:28px;height:var(--head-h);}
/* marca: simbolo (arquivo) + palavra (tipografia do site) — sem depender de bitmap */
.brand{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.brand img{height:36px;width:36px;transition:transform .3s cubic-bezier(.2,.7,.3,1);}
.brand .brand-word{font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:-.025em;color:var(--deep);line-height:1;}
.brand:hover img{transform:scale(1.05) rotate(-3deg);}
.nav{display:flex;align-items:center;gap:30px;margin-left:auto;}
.nav a{position:relative;font-size:14.5px;font-weight:500;color:var(--ink-soft);padding:6px 0;transition:color .2s ease;}
.nav a:hover,.nav a.is-active{color:var(--deep);}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--grad-accent);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1);}
.header-ctas{display:flex;align-items:center;gap:10px;}
.header-ctas .btn{padding:11px 19px;font-size:13.5px;}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:11px;border:1px solid var(--line);}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--deep);position:relative;}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--deep);}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}

/* ==========================================================================
   HERO — cabe em uma tela e explica a NextJ de imediato
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;color:#fff;background:var(--grad-hero);
  min-height:calc(100svh - var(--head-h));
  display:flex;align-items:center;
  padding:40px 0 46px;
}
.hero-glow{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0;}
.hero-glow.g1{width:560px;height:560px;top:-190px;right:-110px;background:rgba(142,207,219,.17);}
.hero-glow.g2{width:480px;height:480px;bottom:-220px;left:-150px;background:rgba(107,96,165,.4);}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;gap:60px;align-items:center;width:100%;}

/* Malha técnica de fundo do hero */
.hero-mesh{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(circle at 62% 46%,#000 12%,transparent 68%);
  mask-image:radial-gradient(circle at 62% 46%,#000 12%,transparent 68%);
}

/* ---------- Hero v4: coluna de texto + marca + portas ---------- */
.hero-v4{position:relative;z-index:2;width:100%;display:grid;gap:clamp(22px,3.4vh,38px);}
.hero-top{display:grid;grid-template-columns:1.1fr 1fr;gap:46px;align-items:center;}
.hero-v4 h1{
  font-size:clamp(23px,min(2.55vw,3.5vh),34px);color:#fff;margin-top:16px;
  line-height:1.22;letter-spacing:-.025em;max-width:19ch;text-wrap:balance;
}
.hero-v4 h1 .hl{display:inline-block;margin-top:.3em;}
.hero-v4 .lead{margin-top:18px;font-size:clamp(15px,1.15vw,18px);color:rgba(255,255,255,.76);max-width:46ch;}

/* ---------- Marca NextJ animada ---------- */
/* A altura acompanha a viewport para o hero nunca estourar a tela */
.mark-stage{
  position:relative;margin:0 auto;
  aspect-ratio:1/1;
  height:clamp(290px, 50vh, 520px);
  width:auto;max-width:100%;
  display:flex;align-items:center;justify-content:center;
}
.mark-halo{
  position:absolute;width:78%;height:78%;border-radius:50%;
  background:radial-gradient(circle,rgba(142,207,219,.28),transparent 62%);
  filter:blur(28px);animation:haloPulse 5.5s ease-in-out infinite;
}
@keyframes haloPulse{0%,100%{transform:scale(.94);opacity:.75}50%{transform:scale(1.06);opacity:1}}

/* Anel em degradê que gira */
.mark-ring{
  position:absolute;width:62%;height:62%;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(142,207,219,.9) 65deg,rgba(107,96,165,.85) 140deg,transparent 210deg,transparent 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  animation:spin 9s linear infinite;
}
.mark-ring.slow{width:76%;height:84%;opacity:.5;animation-duration:16s;animation-direction:reverse;}
@keyframes spin{to{transform:rotate(360deg)}}

/* Trilha da órbita — elipse onde os serviços se apoiam */
.mark-track{
  position:absolute;width:76%;height:84%;border-radius:50%;
  border:1px dashed rgba(255,255,255,.16);
  animation:spin 60s linear infinite;
}

/* Ondas que se expandem */
.mark-wave{
  position:absolute;width:44%;height:44%;border-radius:50%;
  border:1px solid rgba(142,207,219,.42);opacity:0;
  animation:wave 4.2s cubic-bezier(.2,.7,.3,1) infinite;
}
.mark-wave.w2{animation-delay:1.4s}
.mark-wave.w3{animation-delay:2.8s}
@keyframes wave{0%{transform:scale(.72);opacity:.85}100%{transform:scale(2.05);opacity:0}}

/* Camada que carrega a marca e os 8 serviços */
.mark-grid{position:absolute;inset:0;z-index:4;}

/* O símbolo, centrado na órbita */
.mark-logo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:clamp(104px,13vw,168px);height:auto;
  filter:drop-shadow(0 26px 48px rgba(20,16,50,.8));
  opacity:0;
  animation:logoIn .9s cubic-bezier(.2,.7,.3,1) forwards,
            floatY 7s ease-in-out 1s infinite;
}
/* animações usam translate/scale — não conflitam com o transform de centragem */
@keyframes logoIn{from{opacity:0;scale:.84;translate:0 14px}to{opacity:1;scale:1;translate:0 0}}
@keyframes floatY{0%,100%{translate:0 -7px}50%{translate:0 7px}}
.mark-stage:hover .mark-logo{animation-play-state:paused,paused;}

/* Chips de serviço distribuídos na elipse */
.orbit{
  position:absolute;left:var(--l);top:var(--t);
  transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:-.005em;color:#fff;
  background:rgba(21,18,46,.86);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:7px 13px 7px 10px;
  box-shadow:0 18px 36px -20px rgba(0,0,0,.92);
  opacity:0;
  animation:chipIn .55s cubic-bezier(.2,.7,.3,1) forwards,
            floatY 6.6s ease-in-out infinite;
  animation-delay:calc(.55s + var(--i) * .12s), calc(1.3s + var(--i) * .3s);
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
@keyframes chipIn{from{opacity:0;scale:.86}to{opacity:1;scale:1}}
.orbit svg{width:13px;height:13px;color:var(--aqua);flex-shrink:0;}
.orbit:hover{
  background:rgba(45,38,92,.97);border-color:rgba(142,207,219,.6);
  box-shadow:0 22px 42px -18px rgba(142,207,219,.45);
  animation-play-state:paused,paused;z-index:6;
}

/* 7 pontos igualmente espaçados numa elipse de raio 38% x 42%.
   A distribuição foi calculada para não haver colisão entre os
   rótulos nem em telas de 1366px — folga mínima de 13px. */
.orbit.p1{--l:50.0%; --t:8.0%;}    /*  90° — topo           */
.orbit.p2{--l:79.7%; --t:23.8%;}   /*  39° — topo-direita   */
.orbit.p3{--l:87.0%; --t:59.3%;}   /* -13° — direita        */
.orbit.p4{--l:66.5%; --t:87.8%;}   /* -64° — base-direita   */
.orbit.p5{--l:33.5%; --t:87.8%;}   /* -116° — base-esquerda */
.orbit.p6{--l:13.0%; --t:59.3%;}   /* -167° — esquerda      */
.orbit.p7{--l:20.3%; --t:23.8%;}   /*  141° — topo-esquerda */

/* Portas dentro do hero */
.doors-hero{margin-top:0;gap:20px;}
.doors-hero .door{
  background:rgba(255,255,255,.055);backdrop-filter:blur(18px);
  border-color:rgba(255,255,255,.14);box-shadow:0 34px 66px -40px rgba(0,0,0,.85);
  padding:22px 26px 20px;border-radius:var(--r-lg);
}
.doors-hero .door::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(142,207,219,.18),transparent 62%);}
.doors-hero .door:hover{transform:translateY(-6px);border-color:rgba(142,207,219,.5);box-shadow:0 44px 80px -40px rgba(0,0,0,.9);}
.doors-hero .door-ico{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.08);margin-bottom:12px;}
.doors-hero .door-ico svg{width:19px;height:19px;}
.doors-hero .door-ico svg [stroke="#26214D"]{stroke:#fff;}
.doors-hero .door-ico svg [stroke="#6B60A5"]{stroke:var(--aqua);}
.doors-hero .door:hover .door-ico{background:linear-gradient(135deg,rgba(107,96,165,.45),rgba(142,207,219,.4));}
.doors-hero .door h3{font-size:18.5px;color:#fff;}
.doors-hero .door:hover h3{color:var(--aqua);}
.doors-hero .door p{color:rgba(255,255,255,.66);font-size:13.5px;margin-top:7px;line-height:1.52;}
.doors-hero .door-link{margin-top:14px;color:#fff;font-size:13px;}
.doors-hero .door:hover .door-link{color:var(--aqua);}

/* ---------- Soluções em Tecnologia ---------- */
.tech{padding:74px 0 0;background:var(--bg-alt);}
.tech-head{text-align:center;max-width:660px;margin:0 auto 34px;padding:0 28px;}
.tech-head h2{font-size:clamp(26px,3.2vw,40px);}
.tech-head h2 span{
  background:linear-gradient(100deg,#26214D 0%,#6B60A5 42%,#3E8FA3 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.tech-head p{margin-top:14px;font-size:16px;color:var(--ink-soft);}
.tech .marquee{background:transparent;border:none;padding:8px 0 22px;}
.tech .marquee + .marquee{padding-top:0;}
.marquee-track a{
  flex-shrink:0;margin-right:11px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--ink-soft);
  background:#fff;border:1px solid var(--line);padding:10px 18px;border-radius:999px;
  transition:color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.marquee-track a svg{width:13px;height:13px;opacity:0;transform:translateX(-4px);transition:opacity .25s ease,transform .25s ease;}
.marquee-track a:hover{color:var(--deep);border-color:var(--purple-2);transform:translateY(-3px);box-shadow:0 14px 26px -14px rgba(33,28,66,.6);}
.marquee-track a:hover svg{opacity:1;transform:none;color:var(--purple);}
.tech-note{text-align:center;font-size:13px;color:var(--ink-faint);padding:0 28px 74px;}

/* ---------- Mural de clientes ---------- */
.clients{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.client{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 18px;min-height:150px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease,border-color .3s ease;
}
.client::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-accent);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.3,1);}
.client:hover::after{transform:scaleX(1);}
.client:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:rgba(142,207,219,.6);}
.client-mark{
  width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:var(--lav-soft);color:var(--purple);
  font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;
  transition:background .3s ease,color .3s ease,transform .35s cubic-bezier(.2,.7,.3,1);
}
.client:hover .client-mark{background:var(--grad-accent);color:#fff;transform:rotate(-6deg) scale(1.08);}
.client-mark img{width:100%;height:100%;object-fit:contain;border-radius:12px;}
.client b{font-family:var(--display);font-weight:700;font-size:15.5px;color:var(--ink);}
.client small{font-size:12px;color:var(--ink-faint);margin-top:-8px;}

.hero h1{
  font-size:clamp(30px,3.35vw,45px);color:#fff;margin-top:18px;
  line-height:1.13;letter-spacing:-.03em;max-width:16ch;
}
.hero .lead{margin-top:20px;font-size:clamp(15px,1.15vw,17.5px);color:rgba(255,255,255,.74);max-width:50ch;}
.hero-ctas{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap;}

/* Prova de confiança no rodapé do hero */
.hero-trust{margin-top:38px;padding-top:24px;border-top:1px solid rgba(255,255,255,.13);}
.hero-trust .lbl{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42);}
.hero-trust .names{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px;}
.hero-trust .names span{
  font-family:var(--display);font-weight:700;font-size:16px;color:rgba(255,255,255,.5);
  transition:color .25s ease,transform .25s ease;
}
.hero-trust .names span:hover{color:#fff;transform:translateY(-2px);}

/* ---------- Diagrama antes → depois ---------- */
.shift{
  position:relative;z-index:2;
  background:rgba(255,255,255,.055);backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-xl);
  padding:26px;box-shadow:var(--sh-lg),inset 0 1px 0 rgba(255,255,255,.14);
}
.shift-block{display:grid;gap:9px;}
.shift-label{
  display:flex;align-items:center;gap:9px;margin-bottom:4px;
  font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.shift-label.before{color:rgba(255,255,255,.44);}
.shift-label.after{color:var(--aqua);}
.shift-label i{flex:1;height:1px;background:currentColor;opacity:.28;}

.sline{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
  border:1px solid transparent;transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.sline-ico{
  flex-shrink:0;width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
}
.sline-ico svg{width:16px;height:16px;}
.sline p{font-size:13.5px;line-height:1.42;margin:0;}
.sline p b{font-family:var(--display);font-weight:700;display:block;font-size:13.5px;}

/* Antes: apagado, cinza */
.shift-block.before .sline{background:rgba(255,255,255,.035);}
.shift-block.before .sline-ico{background:rgba(255,255,255,.06);color:rgba(255,255,255,.42);}
.shift-block.before .sline p{color:rgba(255,255,255,.44);}
.shift-block.before .sline p b{color:rgba(255,255,255,.62);}
.shift-block.before .sline:hover{background:rgba(255,255,255,.06);transform:translateX(3px);}

/* Divisor com a marca */
.shift-mid{display:flex;align-items:center;gap:14px;margin:18px 0;}
.shift-mid .rule{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(142,207,219,.5),transparent);}
.shift-mid .badge{
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--deep);background:var(--grad-accent);
  padding:8px 16px;border-radius:999px;box-shadow:0 12px 26px -12px rgba(142,207,219,.85);
}
.shift-mid .badge svg{width:14px;height:14px;}

/* Depois: vivo, aqua */
.shift-block.after .sline{
  background:rgba(142,207,219,.09);border-color:rgba(142,207,219,.2);
  opacity:0;animation:slineIn .6s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:calc(.5s + var(--i) * .18s);
}
@keyframes slineIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.shift-block.after .sline-ico{background:rgba(142,207,219,.2);color:var(--aqua);}
.shift-block.after .sline p{color:rgba(255,255,255,.72);}
.shift-block.after .sline p b{color:#fff;}
.shift-block.after .sline:hover{
  background:rgba(142,207,219,.17);border-color:rgba(142,207,219,.45);transform:translateX(4px);
}

/* ---------- Faixa de stacks ---------- */
.marquee{
  position:relative;overflow:hidden;padding:24px 0;
  background:var(--bg-alt);border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:slide 46s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track span{
  flex-shrink:0;margin-right:11px;
  font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--ink-soft);
  background:#fff;border:1px solid var(--line);padding:10px 19px;border-radius:999px;
  transition:color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.marquee-track span:hover{color:var(--deep);border-color:var(--purple-2);transform:translateY(-3px);box-shadow:0 12px 22px -14px rgba(33,28,66,.6);}

/* ---------- Grids e cards ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}

.card{
  display:block;position:relative;isolation:isolate;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 30px;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s ease,border-color .32s ease;
}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(142,207,219,.2),transparent 62%);
  transition:opacity .32s ease;
}
.card:hover::before{opacity:1;}
.card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-accent);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.card:hover::after{transform:scaleX(1);}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:rgba(142,207,219,.55);}
.card .ico{
  width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:var(--lav-soft);margin-bottom:22px;
  transition:background .3s ease,transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;
}
.card:hover .ico{
  background:linear-gradient(135deg,rgba(107,96,165,.18),rgba(142,207,219,.34));
  transform:translateY(-2px) rotate(-6deg) scale(1.07);
  box-shadow:0 14px 24px -14px rgba(107,96,165,.8);
}
.card h3{font-size:20px;margin-bottom:10px;transition:color .25s ease;}
.card:hover h3{color:var(--purple);}
.card p{color:var(--ink-soft);font-size:15px;}
.card ul{margin-top:16px;display:grid;gap:9px;}
.card ul li{font-size:14px;color:var(--ink-soft);padding-left:22px;position:relative;}
.card ul li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:3px;background:var(--aqua);transition:transform .3s ease,background .3s ease;}
.card:hover ul li::before{transform:rotate(45deg) scale(1.15);background:var(--purple);}
/* Numeração das frentes */
.card .idx{
  position:absolute;top:26px;right:28px;
  font-family:var(--display);font-weight:800;font-size:38px;line-height:1;
  color:var(--lav);opacity:.55;transition:color .3s ease,opacity .3s ease,transform .3s ease;
}
.card:hover .idx{color:var(--aqua);opacity:.85;transform:translateY(-3px);}
a.card{padding-bottom:58px;}
a.card .go{
  position:absolute;left:30px;bottom:26px;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--purple);
  opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease;
}
a.card:hover .go{opacity:1;transform:none;}
a.card .go svg{transition:transform .3s ease;}
a.card:hover .go svg{transform:translateX(4px);}

/* ---------- Portas (empresa / talento) ---------- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.door{
  position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:38px 36px 32px;
  box-shadow:var(--sh-sm);
  transition:transform .34s cubic-bezier(.2,.7,.3,1),box-shadow .34s ease,border-color .34s ease;
}
.door::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(142,207,219,.22),transparent 62%);
  transition:opacity .34s ease;
}
.door:hover::before{opacity:1;}
.door::after{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad-accent);transform:scaleX(.22);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.door:hover::after{transform:scaleX(1);}
.door:hover{transform:translateY(-8px);box-shadow:var(--sh-lg);border-color:rgba(142,207,219,.6);}
.door-ico{
  width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:var(--lav-soft);margin-bottom:22px;
  transition:background .3s ease,transform .35s cubic-bezier(.2,.7,.3,1);
}
.door:hover .door-ico{background:linear-gradient(135deg,rgba(107,96,165,.2),rgba(142,207,219,.36));transform:rotate(-7deg) scale(1.08);}
.door h3{font-size:23px;transition:color .25s ease;}
.door:hover h3{color:var(--purple);}
.door p{margin-top:11px;color:var(--ink-soft);font-size:15px;}
.door ul{margin-top:20px;display:grid;gap:10px;flex:1;}
.door ul li{font-size:14px;color:var(--ink-soft);padding-left:24px;position:relative;}
.door ul li::before{
  content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;
  border:2px solid var(--aqua);transition:background .25s ease;
}
.door:hover ul li::before{background:var(--aqua);}
.door-link{
  margin-top:26px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--deep);
  transition:color .25s ease,gap .25s ease;
}
.door:hover .door-link{color:var(--purple);gap:12px;}
.door-link svg{transition:transform .25s ease;}
.door:hover .door-link svg{transform:translateX(4px);}

/* ---------- Abas de soluções ---------- */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:38px;}
.tab{
  font-family:var(--display);font-weight:700;font-size:14px;
  padding:13px 22px;border-radius:999px;border:1.5px solid var(--line);
  color:var(--ink-soft);background:#fff;transition:all .22s ease;
}
.tab:hover{border-color:var(--purple-2);color:var(--deep);transform:translateY(-2px);}
.tab[aria-selected="true"]{background:var(--deep);border-color:var(--deep);color:#fff;box-shadow:0 14px 26px -15px rgba(38,33,77,.95);}
.tabpanel{display:none;}
.tabpanel.is-active{display:block;animation:fade .38s ease;}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.solution{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:46px;box-shadow:var(--sh-sm);
  transition:box-shadow .3s ease;
}
.solution:hover{box-shadow:var(--sh);}
.solution h3{font-size:clamp(25px,2.8vw,34px);margin-bottom:16px;}
.solution > div > p{color:var(--ink-soft);font-size:16.5px;}
.solution .feat{margin-top:26px;display:grid;gap:14px;}
.solution .feat li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink);transition:transform .25s ease;}
.solution .feat li:hover{transform:translateX(4px);}
.solution .feat li svg{flex-shrink:0;margin-top:3px;}
.solution .visual{
  border-radius:var(--r);overflow:hidden;padding:26px;min-height:300px;
  background:linear-gradient(140deg,rgba(38,33,77,.05),#fff 52%,rgba(142,207,219,.14));
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
}

/* ---------- Números ---------- */
.stripe{background:var(--grad-brand);color:#fff;padding:60px 0;position:relative;overflow:hidden;}
.stripe > .wrap{position:relative;z-index:2;}
.stripe-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.stat{transition:transform .3s cubic-bezier(.2,.7,.3,1);}
.stat:hover{transform:translateY(-4px);}
.stat strong{display:block;font-family:var(--display);font-weight:800;font-size:clamp(32px,3.8vw,48px);line-height:1;color:#fff;}
.stat span{display:block;margin-top:10px;font-size:13.5px;color:rgba(255,255,255,.72);max-width:210px;}

/* ---------- Processo ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.step{padding:34px 26px;position:relative;border-radius:18px;transition:background .3s ease,transform .3s cubic-bezier(.2,.7,.3,1);}
.step + .step{border-left:1px solid rgba(255,255,255,.13);}
.step::before{content:"";position:absolute;left:26px;right:26px;bottom:0;height:2px;background:var(--grad-accent);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.3,1);}
.step:hover{background:rgba(255,255,255,.05);transform:translateY(-4px);}
.step:hover::before{transform:scaleX(1);}
.step .num{display:block;font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.13em;color:var(--aqua);margin-bottom:18px;transition:transform .3s ease,letter-spacing .3s ease;}
.step:hover .num{transform:translateX(3px);letter-spacing:.17em;}
.step h3{font-size:19px;margin-bottom:10px;}
.step p{font-size:14px;}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh);}
.split-side{padding:56px 48px;}
.split-side.a{background:var(--deep);color:#fff;}
.split-side.b{background:var(--grad-accent);color:var(--deep);}
.split-side h3{font-size:clamp(25px,2.9vw,32px);margin:14px 0 16px;}
.split-side.a p{color:rgba(255,255,255,.74);}
.split-side.b p{color:rgba(38,33,77,.78);}
.split-side ul{margin:26px 0 32px;display:grid;gap:12px;}
.split-side li{font-size:15px;padding-left:26px;position:relative;transition:transform .25s ease;}
.split-side li::before{content:"→";position:absolute;left:0;font-family:var(--display);font-weight:700;transition:transform .25s ease;}
.split-side.a li::before{color:var(--aqua);}
.split-side li:hover{transform:translateX(5px);}

/* ---------- Liderança ---------- */
.team{display:grid;gap:20px;}
.quote-card{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:186px 1fr;gap:42px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:42px 46px;box-shadow:var(--sh-sm);
  transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s ease,border-color .32s ease;
}
.quote-card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(142,207,219,.16),transparent 62%);
  transition:opacity .32s ease;
}
.quote-card:hover::before{opacity:1;}
.quote-card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.quote-card:hover::after{transform:scaleX(1);}
.quote-card:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:rgba(142,207,219,.55);}

.avatar{
  position:relative;overflow:hidden;
  width:186px;height:186px;border-radius:26px;background:var(--grad-accent);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:52px;color:#fff;
  box-shadow:0 20px 42px -24px rgba(33,28,66,.65);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease;
}
.avatar img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  display:block;border-radius:inherit;
  transition:transform .55s cubic-bezier(.2,.7,.3,1),filter .45s ease;
  filter:saturate(1.02);
}
.avatar::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5), inset 0 -60px 70px -50px rgba(33,28,66,.55);
}
.quote-card:hover .avatar{transform:translateY(-3px);box-shadow:0 28px 52px -26px rgba(107,96,165,.75);}
.quote-card:hover .avatar img{transform:scale(1.055);filter:saturate(1.1);}

.quote-card blockquote{font-family:var(--display);font-weight:700;font-size:clamp(17.5px,1.85vw,22px);line-height:1.42;letter-spacing:-.018em;}
.quote-card .who{margin-top:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--ink-soft);}
.quote-card .who strong{color:var(--deep);font-weight:700;font-family:var(--display);font-size:15px;}
.quote-card .role{
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--purple);background:var(--lav-soft);border:1px solid var(--line);
  padding:5px 11px;border-radius:999px;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.quote-card:hover .role{background:var(--grad-accent);color:var(--deep);border-color:transparent;}

/* ---------- Logos ---------- */
.logos{display:flex;flex-wrap:wrap;gap:13px;align-items:center;}
.logos span{
  font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink-soft);
  background:#fff;border:1px solid var(--line);padding:12px 21px;border-radius:12px;
  transition:color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.logos span:hover{color:var(--deep);border-color:var(--purple-2);transform:translateY(-3px);box-shadow:0 12px 22px -14px rgba(33,28,66,.55);}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:880px;margin:0 auto;}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 26px;transition:border-color .25s ease,box-shadow .25s ease;}
.faq details[open]{border-color:var(--purple-2);box-shadow:var(--sh-sm);}
.faq summary{font-family:var(--display);font-weight:700;font-size:16.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;transition:color .25s ease;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-size:24px;color:var(--purple);font-weight:400;line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq details:hover summary{color:var(--purple);}
.faq details p{margin-top:14px;color:var(--ink-soft);font-size:15px;}

/* ---------- Formulários ---------- */
.form{display:grid;gap:18px;}
.field{display:grid;gap:8px;}
.field label{font-family:var(--display);font-weight:700;font-size:13.5px;}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:15px;color:var(--ink);
  padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:#fff;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px rgba(107,96,165,.14);}
.field textarea{min-height:130px;resize:vertical;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-note{font-size:13px;color:var(--ink-soft);}
.segmented{display:flex;gap:10px;flex-wrap:wrap;}
.segmented input{position:absolute;opacity:0;width:0;height:0;}
.segmented label{font-family:var(--display);font-weight:700;font-size:14px;cursor:pointer;padding:13px 22px;border-radius:999px;border:1.5px solid var(--line);color:var(--ink-soft);transition:all .2s ease;}
.segmented input:checked + label{background:var(--deep);border-color:var(--deep);color:#fff;}
.segmented input:focus-visible + label{outline:3px solid var(--aqua);outline-offset:2px;}

/* Opção que leva para outra página, no mesmo visual dos botões do grupo */
.segmented .seg-link{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);font-weight:700;font-size:14px;
  padding:13px 20px;border-radius:999px;border:1.5px solid var(--line);
  color:var(--ink-soft);background:transparent;
  transition:color .22s ease,border-color .22s ease,background .22s ease,transform .22s ease;
}
.segmented .seg-link svg{width:15px;height:15px;transition:transform .25s ease;}
.segmented .seg-link:hover{color:var(--purple);border-color:var(--purple);background:#fff;transform:translateY(-1px);}
.segmented .seg-link:hover svg{transform:translateX(3px);}
.segmented .seg-link:focus-visible{outline:3px solid var(--aqua);outline-offset:2px;}

/* Destaque de chegada: quem vem de outra página vê onde caiu */
@keyframes chegada{
  0%   {box-shadow:0 0 0 0 rgba(142,207,219,0);}
  18%  {box-shadow:0 0 0 8px rgba(142,207,219,.38);}
  100% {box-shadow:0 0 0 0 rgba(142,207,219,0);}
}
.chegou{animation:chegada 2.4s ease-out 1;}
.consent{display:flex;gap:12px;align-items:flex-start;background:var(--bg-alt);border:1px solid var(--line);border-radius:14px;padding:16px 18px;}
.consent input[type="checkbox"]{flex-shrink:0;width:20px;height:20px;margin-top:2px;accent-color:var(--purple);cursor:pointer;}
.consent label{font-size:13.5px;line-height:1.55;color:var(--ink-soft);cursor:pointer;font-family:var(--body);font-weight:400;}
.consent label a{color:var(--purple);font-weight:600;text-decoration:underline;}
.consent.is-invalid{border-color:#C2455E;background:rgba(194,69,94,.05);}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

/* Anexo de currículo */
.upload{position:relative;}
.upload input[type="file"]{position:absolute;opacity:0;width:.1px;height:.1px;overflow:hidden;}
.upload-drop{
  display:flex;align-items:center;gap:14px;cursor:pointer;
  padding:16px 18px;border:1.5px dashed var(--line);border-radius:12px;background:var(--bg-alt);
  transition:border-color .22s ease,background .22s ease,color .22s ease;
  font-family:var(--body);font-weight:400;
}
.upload-drop:hover{border-color:var(--purple-2);background:#fff;}
.upload input:focus-visible + .upload-drop{border-color:var(--purple);box-shadow:0 0 0 4px rgba(107,96,165,.14);}
.upload-drop svg{width:24px;height:24px;flex-shrink:0;color:var(--purple);}
.upload-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.upload-txt b{font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.upload-txt small{font-size:12.5px;color:var(--ink-soft);}
.upload.is-set .upload-drop{border-style:solid;border-color:var(--aqua-deep);background:rgba(142,207,219,.09);}
.upload.is-set .upload-drop svg{color:var(--aqua-deep);}
.upload.is-erro .upload-drop{border-color:#C2455E;background:rgba(194,69,94,.06);}
.upload.is-erro .upload-drop svg{color:#C2455E;}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none!important;}
.form-feedback{min-height:20px;font-size:14px;}
.form-feedback.ok{color:#1E8E77;font-weight:600;}
.form-feedback.erro{color:#C2455E;font-weight:600;}
.form-feedback.enviando{color:var(--ink-soft);}

/* ---------- Documento legal ---------- */
.legal{max-width:840px;margin:0 auto;}
.legal h2{font-size:clamp(22px,2.5vw,29px);margin:44px 0 14px;}
.legal h3{font-size:18px;margin:28px 0 10px;}
.legal p,.legal li{color:var(--ink-soft);font-size:15.5px;}
.legal p{margin-bottom:14px;}
.legal ul{margin:0 0 16px;display:grid;gap:9px;}
.legal ul li{padding-left:22px;position:relative;}
.legal ul li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:3px;background:var(--aqua);}
.legal .updated{font-size:14px;color:var(--ink-soft);padding:14px 18px;background:var(--bg-alt);border-radius:12px;border:1px solid var(--line);}
.legal table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px;}
.legal th,.legal td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top;}
.legal th{font-family:var(--display);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--deep);}
.legal td{color:var(--ink-soft);}

/* ---------- CTA final ---------- */
.cta-band{position:relative;overflow:hidden;text-align:center;background:var(--grad-hero);color:#fff;padding:112px 0;}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(720px 340px at 50% 0%,rgba(142,207,219,.22),transparent 68%);}
.cta-band > .wrap{position:relative;z-index:2;}
.cta-band h2{font-size:clamp(28px,4vw,48px);max-width:800px;margin:0 auto;color:#fff;}
.cta-band p{margin:18px auto 0;color:rgba(255,255,255,.72);font-size:17.5px;max-width:620px;}
.cta-band .hero-ctas{justify-content:center;}

/* ==========================================================================
   Fluxo interativo do topo de Soluções
   Uma demanda percorre as quatro frentes até virar autonomia.
   Sem rótulos fixos: os nomes ficam nos cards logo abaixo.
   ========================================================================== */
.page-hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:50px;align-items:center;}
.page-hero-grid > .page-hero-copy{min-width:0;}

.flow{position:relative;width:100%;max-width:440px;margin:0 auto;aspect-ratio:1/1;}
.flow-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.flow-track{fill:none;stroke:rgba(255,255,255,.16);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* rastro sincronizado com o ponto: dasharray somando o comprimento do caminho (1004) */
.flow-glow{fill:none;stroke:url(#flowGrad);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:120 884;animation:flowTrail 10s linear infinite;}
@keyframes flowTrail{from{stroke-dashoffset:1004}to{stroke-dashoffset:0}}

/* Estações da esteira */
.fnode{
  position:absolute;z-index:3;width:56px;height:56px;
  transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;border-radius:17px;
  background:rgba(21,18,46,.9);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 34px -18px rgba(0,0,0,.95);
  color:rgba(255,255,255,.62);
  transition:border-color .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease;
  animation:acende 10s linear infinite;
  animation-delay:var(--d);
}
.fnode svg{width:25px;height:25px;}
/* pulso de luz quando o ponto passa pela estação */
@keyframes acende{
  0%,4%   {border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.62);box-shadow:0 18px 34px -18px rgba(0,0,0,.95);}
  9%,13%  {border-color:rgba(142,207,219,.85);color:#8ECFDB;box-shadow:0 0 0 6px rgba(142,207,219,.12),0 20px 36px -16px rgba(142,207,219,.5);}
  22%,100%{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.62);box-shadow:0 18px 34px -18px rgba(0,0,0,.95);}
}
.fnode:hover{
  background:rgba(45,38,92,.96);border-color:rgba(142,207,219,.75);color:#8ECFDB;
  box-shadow:0 0 0 7px rgba(142,207,219,.14),0 22px 40px -16px rgba(142,207,219,.55);
  animation-play-state:paused;z-index:6;
}
.fnode:hover svg{transform:scale(1.08);}
.fnode svg{transition:transform .25s ease;}
.fnode::after{max-width:200px;}

/* posições calculadas sobre o caminho; o atraso faz o clarão
   coincidir com a passagem do ponto (pico dos keyframes em 11%) */
.fnode.f1{left:35%;   top:14%;   --d:-0.10s;}  /* 10,0% do caminho */
.fnode.f2{left:78%;   top:37.5%; --d:2.40s;}   /* 35,0%            */
.fnode.f3{left:22%;   top:75%;   --d:5.82s;}   /* 69,2%            */
.fnode.f4{left:75%;   top:88%;   --d:8.30s;}   /* 94,0%            */

/* Extremos do fluxo */
.flow-cap{
  position:absolute;z-index:2;
  font-family:var(--display);font-weight:700;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  padding:7px 13px;border-radius:999px;
}
.flow-cap.start{
  left:1%;top:14%;transform:translateY(-50%);
  color:rgba(255,255,255,.55);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
}
.flow-cap.end{
  right:1%;top:88%;transform:translateY(-50%);
  color:var(--deep);background:var(--grad-accent);
  box-shadow:0 14px 28px -14px rgba(142,207,219,.75);
}

@media (max-width:1024px){
  .page-hero-grid{grid-template-columns:1fr;gap:44px;}
  .flow{max-width:400px;}
}
@media (max-width:560px){
  .flow{max-width:100%;}
  .fnode{width:46px;height:46px;border-radius:14px;}
  .fnode svg{width:21px;height:21px;}
  .flow-cap{font-size:9.5px;padding:6px 10px;}
}
@media (prefers-reduced-motion:reduce){
  .flow-comet,.flow-comet-glow{display:none;}
  .flow-glow{stroke-dasharray:none;opacity:.5;}
}

/* ==========================================================================
   Engrenagens — topo de Para Empresas
   Pessoas e automação girando juntas produzem entrega.
   ========================================================================== */
.gears{position:relative;width:100%;max-width:440px;margin:0 auto;aspect-ratio:1/1;}
.gears-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}

.gear{transform-box:view-box;animation:girar linear infinite;}
.gear.g1{transform-origin:150px 155px;animation-duration:22s;}
.gear.g2{transform-origin:254px 215px;animation-duration:14.7s;animation-direction:reverse;}
.gear.g3{transform-origin:170px 263px;animation-duration:11.6s;animation-direction:reverse;}
@keyframes girar{to{transform:rotate(360deg)}}
.gears:hover .gear{animation-play-state:paused;}

.gear-dentes{fill:none;stroke:rgba(255,255,255,.2);stroke-dasharray:9 14;}
.gear.g1 .gear-dentes{stroke-width:14;}
.gear.g2 .gear-dentes{stroke-width:12;}
.gear.g3 .gear-dentes{stroke-width:10;}
.gear-corpo{fill:rgba(21,18,46,.72);stroke:rgba(255,255,255,.15);stroke-width:1.5;}
.gear-aro{fill:none;stroke:url(#aroGrad);stroke-width:2.5;stroke-dasharray:26 200;
  animation:aroGira 6s linear infinite;transform-box:view-box;}
.gear.g1 .gear-aro{transform-origin:150px 155px;}
.gear.g2 .gear-aro{transform-origin:254px 215px;animation-duration:4.6s;}
.gear.g3 .gear-aro{transform-origin:170px 263px;animation-duration:3.8s;}
@keyframes aroGira{to{transform:rotate(360deg)}}

/* o ícone não gira junto com a engrenagem, para continuar legível */
.gear-ico{color:var(--aqua);}
.gear-ico.contra{animation:girar linear infinite reverse;transform-box:view-box;}
.gear-ico.c1{transform-origin:150px 155px;animation-duration:22s;}
.gear-ico.c2{transform-origin:254px 215px;animation-duration:14.7s;animation-direction:normal;}
.gear-ico.c3{transform-origin:170px 263px;animation-duration:11.6s;animation-direction:normal;}
.gears:hover .gear-ico.contra{animation-play-state:paused;}

.gear-rotulo{
  position:absolute;transform:translate(-50%,-50%);z-index:3;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.72);background:rgba(21,18,46,.82);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 13px;
  transition:color .25s ease,border-color .25s ease;
}
.gears:hover .gear-rotulo{color:#fff;border-color:rgba(142,207,219,.5);}
.gear-rotulo.r1{left:37.5%; top:58%;}
.gear-rotulo.r2{left:63.5%; top:71%;}
.gear-rotulo.r3{left:42.5%; top:87%;}

/* ==========================================================================
   Trajetória — topo de Para Talentos
   O candidato sobe degraus; cada marco acende quando ele passa.
   ========================================================================== */
.climb{position:relative;width:100%;max-width:440px;margin:0 auto;aspect-ratio:1/1;}
.climb-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.climb-trilho{fill:none;stroke:rgba(255,255,255,.17);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.climb-luz{
  fill:none;stroke:url(#climbGrad);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:90 340;animation:climbTrilha 9s linear infinite;
}
@keyframes climbTrilha{from{stroke-dashoffset:430}to{stroke-dashoffset:0}}
.climb-area{fill:url(#climbFill);opacity:.5;}

.climb-marco{
  transform-box:view-box;transform-origin:center;
  animation:marcoAcende 9s linear infinite;animation-delay:var(--d);
}
@keyframes marcoAcende{
  0%,4%   {r:5;  fill:rgba(255,255,255,.3);}
  9%,15%  {r:8;  fill:#B5E3EB;}
  26%,100%{r:5;  fill:rgba(255,255,255,.3);}
}
.climb-topo{transform-box:view-box;transform-origin:320px 135px;animation:topoPulsa 9s ease-out infinite;}
@keyframes topoPulsa{
  0%,84%  {opacity:.45;transform:scale(.9);}
  92%     {opacity:1;  transform:scale(1.12);}
  100%    {opacity:.45;transform:scale(.9);}
}

.climb-cap{
  position:absolute;z-index:3;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:7px 13px;border-radius:999px;
}
.climb-cap.inicio{
  left:2%;top:88.5%;transform:translateY(-50%);
  color:rgba(255,255,255,.55);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
}
.climb-cap.fim{
  right:1%;top:24%;transform:translateY(-50%);
  color:var(--deep);background:var(--grad-accent);
  box-shadow:0 14px 28px -14px rgba(142,207,219,.75);
}

@media (max-width:1024px){
  .gears,.climb{max-width:400px;}
}
@media (max-width:560px){
  .gears,.climb{max-width:100%;}
  .gear-rotulo,.climb-cap{font-size:9.5px;padding:5px 10px;}
}
@media (prefers-reduced-motion:reduce){
  .gear,.gear-aro,.gear-ico.contra,.climb-marco,.climb-topo{animation:none;}
  .climb-luz{stroke-dasharray:none;opacity:.55;}
  .climb-cometa,.climb-cometa-brilho{display:none;}
}

/* ---------- Hero de páginas internas ---------- */
.page-hero{position:relative;overflow:hidden;background:var(--grad-hero);color:#fff;padding:76px 0 88px;}
.page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(820px 400px at 86% 0%,rgba(142,207,219,.17),transparent 66%);}
.page-hero > .wrap{position:relative;z-index:2;}
.page-hero h1{font-size:clamp(31px,4.1vw,50px);color:#fff;margin-top:16px;max-width:none;text-wrap:balance;}
.page-hero p{margin-top:20px;font-size:18px;color:rgba(255,255,255,.74);max-width:64ch;}
/* nas páginas de uma coluna o texto não deve varrer a tela inteira */
.page-hero > .wrap:not(.page-hero-grid) h1{max-width:24ch;}
.page-hero > .wrap:not(.page-hero-grid) p{max-width:60ch;}
.crumb{font-size:13px;color:rgba(255,255,255,.5);}
.crumb a:hover{color:#fff;}

/* ---------- Rodapé ---------- */
.site-footer{background:var(--deep-2);color:rgba(255,255,255,.58);padding:74px 0 32px;}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px;}
.site-footer img{height:36px;margin-bottom:18px;}
.brand-foot{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;}
.brand-foot img{height:34px;width:34px;margin:0;transition:transform .3s cubic-bezier(.2,.7,.3,1);}
.brand-foot span{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.025em;color:#fff;line-height:1;}
.brand-foot:hover img{transform:scale(1.05) rotate(-3deg);}
.site-footer h4{font-family:var(--display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:18px;font-weight:800;}
.site-footer ul{display:grid;gap:11px;}
.site-footer a{font-size:14px;color:rgba(255,255,255,.58);transition:color .2s ease;}
.site-footer a:hover{color:var(--aqua);}
.site-footer .tagline{font-size:14px;max-width:290px;}
.footer-bottom{margin-top:52px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;}

/* ---------- Balão de ajuda ---------- */
[data-tip]{position:relative;}
[data-tip]::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 12px);left:50%;
  width:max-content;max-width:250px;transform:translate(-50%,8px);
  background:#15122E;color:rgba(255,255,255,.9);
  font-family:var(--body);font-size:12.5px;font-weight:400;line-height:1.45;
  letter-spacing:0;text-transform:none;text-align:left;white-space:normal;
  padding:11px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 44px -20px rgba(0,0,0,.85);
  opacity:0;pointer-events:none;z-index:60;
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.7,.3,1);
}
[data-tip]::before{
  content:"";position:absolute;bottom:calc(100% + 6px);left:50%;width:10px;height:10px;background:#15122E;
  border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);
  transform:translate(-50%,8px) rotate(45deg);opacity:0;pointer-events:none;z-index:61;
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.7,.3,1);
}
[data-tip]:hover::after{opacity:1;transform:translate(-50%,0);}
[data-tip]:hover::before{opacity:1;transform:translate(-50%,0) rotate(45deg);}

/* ---------- Revelação ---------- */
.reveal{opacity:0;transform:translateY(24px);}
.reveal.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .shift-block.after .sline{opacity:1;}
}

/* ==========================================================================
   Responsivo — enquadramento em qualquer tela
   ========================================================================== */
@media (max-height:860px) and (min-width:1025px){
  .hero{padding:30px 0 36px;}
  .hero-v4{gap:24px;}
  .hero-v4 h1{font-size:clamp(25px,2.5vw,34px);margin-top:12px;}
  .hero-v4 .lead{font-size:14px;margin-top:13px;}
  .hero-top{gap:40px;}
  .mark-logo{width:clamp(96px,10.5vw,134px);}
  .orbit{font-size:10.5px;padding:6px 12px 6px 9px;gap:6px;}
  .orbit svg{width:12px;height:12px;}
  .doors-hero .door{padding:18px 22px 17px;}
  .doors-hero .door-ico{width:34px;height:34px;margin-bottom:10px;}
  .doors-hero .door-ico svg{width:17px;height:17px;}
  .doors-hero .door h3{font-size:17px;}
  .doors-hero .door p{font-size:12.5px;margin-top:6px;}
  .doors-hero .door-link{margin-top:12px;font-size:12.5px;}
  .hero h1{font-size:clamp(28px,2.9vw,38px);}
  .hero .lead{font-size:15px;margin-top:16px;}
  .hero-ctas{margin-top:24px;}
  .hero-trust{margin-top:26px;padding-top:18px;}
  .shift{padding:20px;}
  .sline{padding:10px 12px;}
  .shift-mid{margin:14px 0;}
}
@media (max-width:1024px){
  .hero-top{grid-template-columns:1fr;gap:40px;}
  .hero-v4 h1{max-width:none;}
  .mark-stage{height:auto;width:min(100%,520px);aspect-ratio:1/1;}
  .clients{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:860px){
  .doors-hero{grid-template-columns:1fr;}
  .clients{grid-template-columns:repeat(2,1fr);}
  /* A órbita vira marca no topo + serviços fluindo abaixo */
  .mark-stage{aspect-ratio:auto;height:auto;width:100%;max-width:520px;padding:14px 0 4px;display:block;}
  .mark-grid{position:static;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:9px;}
  .mark-logo{
    position:static;transform:none;order:-1;flex:0 0 100%;
    margin:0 auto 22px;width:clamp(112px,30vw,150px);
  }
  .orbit{position:static;transform:none;font-size:11px;padding:7px 13px 7px 10px;}
  .mark-halo,.mark-ring,.mark-wave,.mark-track{display:none;}
}
@media (max-width:560px){
  .clients{grid-template-columns:1fr 1fr;}
  .tech-head h2{font-size:26px;}
}
@media (max-width:1180px){
  .wrap{padding:0 28px;}
  .hero-grid{gap:44px;}
}
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .hero{min-height:0;padding:64px 0 72px;}
  .hero-grid{grid-template-columns:1fr;gap:48px;}
  .hero h1{font-size:clamp(30px,5.4vw,42px);max-width:none;}
  .shift{max-width:560px;}
  .solution{grid-template-columns:1fr;padding:32px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  .nav,.header-ctas{display:none;}
  .site-header.open .nav{
    display:flex;flex-direction:column;align-items:flex-start;gap:18px;
    position:absolute;top:var(--head-h);left:0;right:0;background:#fff;
    padding:24px 28px 92px;border-bottom:1px solid var(--line);box-shadow:var(--sh);
  }
  .site-header.open .header-ctas{display:flex;position:absolute;top:calc(var(--head-h) + 212px);left:28px;right:28px;}
  .nav-toggle{display:flex;margin-left:auto;}
  .section{padding:74px 0;}
  .doors,.grid-2,.grid-3{grid-template-columns:1fr;}
  .stripe-grid{grid-template-columns:1fr 1fr;gap:32px 20px;}
  .steps{grid-template-columns:1fr;}
  .step + .step{border-left:none;border-top:1px solid rgba(255,255,255,.13);}
  .split{grid-template-columns:1fr;}
  .split-side{padding:44px 30px;}
  .quote-card{grid-template-columns:1fr;text-align:center;padding:32px 26px;gap:24px;}
  .quote-card .avatar{margin:0 auto;width:132px;height:132px;font-size:40px;border-radius:22px;}
  .quote-card .who{justify-content:center;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .grid-4{grid-template-columns:1fr;}
  .stripe-grid{grid-template-columns:1fr 1fr;}
  .wrap{padding:0 20px;}
  .hero-ctas{flex-direction:column;align-items:stretch;}
  .hero-ctas .btn{width:100%;}
  .shift{padding:18px;border-radius:24px;}
  .sline p,.sline p b{font-size:12.5px;}
  .card .idx{font-size:30px;top:22px;right:22px;}
  [data-tip]::after{left:0;transform:translate(0,8px);max-width:min(250px,72vw);}
  [data-tip]:hover::after{transform:translate(0,0);}
  [data-tip]::before{left:24px;}
}