/* ============================================================================
   GL NEGÓCIOS — design system
   ----------------------------------------------------------------------------
   Base clara (papel) com seções escuras de âncora: hero, ecossistema, GL
   SolutionSS, chamada final e rodapé. O contraste entre as duas superfícies é o
   que dá ritmo à página — por isso toda seção declara a superfície em que está
   (.sup-escura ou .sup-clara) e as cores de texto vêm dela, não do componente.

   A paleta sai do próprio logo: azul-marinho profundo, azul médio e ciano.
   Ciano é acento — marca o que importa. Se tudo brilha, nada brilha.
   ========================================================================== */

:root{
  /* superfícies escuras */
  --ink:#080D1A;
  --ink-2:#0C1322;
  --ink-3:#111B30;
  --navy:#1D264D;

  /* superfícies claras */
  --paper:#FFFFFF;
  --paper-2:#F5F7FB;
  --paper-3:#EAEFF6;

  /* texto */
  --txt-escuro:#0B1220;      /* sobre papel */
  --txt-claro:#EAF0FA;       /* sobre ink   */
  --mut-escuro:#57657E;      /* secundário sobre papel */
  --mut-claro:#8D9BB5;       /* secundário sobre ink   */

  /* linhas */
  --linha-clara:#E3E9F2;
  --linha-escura:rgba(255,255,255,.09);

  /* marca */
  --azul:#2F6FD0;
  --azul-2:#52B1F3;
  --ciano:#78E1FE;
  --grad:linear-gradient(135deg,#2F6FD0 0%,#52B1F3 55%,#78E1FE 100%);
  --grad-texto:linear-gradient(120deg,#5FB6F5 0%,#9BE9FF 100%);
  --ciano-fraco:rgba(120,225,254,.12);
  --azul-fraco:rgba(47,111,208,.10);

  /* SolutionSS — só na seção da marca filha */
  --laranja:#F26B1D;
  --laranja-2:#FF8A3D;

  --maxw:1200px;
  --r:16px;
  --r-sm:10px;
  --transicao:.25s cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------- reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--txt-escuro);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}
::selection{background:var(--azul);color:#fff}

h1,h2,h3,h4{
  font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  margin:0;line-height:1.1;letter-spacing:-.035em;font-weight:800;
}
h1{font-size:clamp(2.1rem,3.6vw,3.15rem);letter-spacing:-.04em}
h2{font-size:clamp(1.85rem,3.9vw,3rem)}
h3{font-size:1.2rem;letter-spacing:-.02em;font-weight:700;line-height:1.3}
h4{font-size:1rem;letter-spacing:-.01em;font-weight:700}

.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ------------------------------------------------------------- layout ------ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:1}
section{padding:110px 0;position:relative}
.sup-escura{background:var(--ink);color:var(--mut-claro)}
.sup-escura h1,.sup-escura h2,.sup-escura h3,.sup-escura h4{color:#fff}
.sup-clara{background:var(--paper);color:var(--mut-escuro)}
.sup-clara-2{background:var(--paper-2);color:var(--mut-escuro);border-top:1px solid var(--linha-clara);border-bottom:1px solid var(--linha-clara)}
.sup-clara h2,.sup-clara-2 h2,.sup-clara h3,.sup-clara-2 h3,
.sup-clara h4,.sup-clara-2 h4{color:var(--txt-escuro)}

/* cabeçalho de seção */
.rotulo{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--azul);margin-bottom:20px;
}
.rotulo::before{content:"";width:22px;height:2px;background:var(--grad);border-radius:2px}
.sup-escura .rotulo{color:var(--ciano)}
.sec-head{max-width:760px;margin-bottom:56px}
.sec-head p{font-size:1.12rem;margin-top:22px}
.centro{margin-left:auto;margin-right:auto;text-align:center}
.centro .rotulo{justify-content:center}

/* -------------------------------------------------------------- botões ----- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--grad);color:#04121F;
  font-weight:700;font-size:.97rem;letter-spacing:-.01em;
  padding:15px 28px;border-radius:var(--r-sm);border:0;
  box-shadow:0 10px 30px rgba(47,111,208,.30);
  transition:transform var(--transicao),box-shadow var(--transicao),filter var(--transicao);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(47,111,208,.42);filter:saturate(1.1)}
.btn:active{transform:translateY(0)}
.btn .seta{transition:transform var(--transicao)}
.btn:hover .seta{transform:translateX(4px)}

.btn-2{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:var(--r-sm);font-weight:600;font-size:.97rem;
  border:1px solid var(--linha-escura);color:var(--txt-claro);background:rgba(255,255,255,.03);
  transition:border-color var(--transicao),transform var(--transicao),background var(--transicao);
  white-space:nowrap;
}
.btn-2:hover{border-color:var(--azul-2);background:rgba(82,177,243,.08);transform:translateY(-2px)}
.sup-clara .btn-2,.sup-clara-2 .btn-2{border-color:var(--linha-clara);color:var(--txt-escuro);background:#fff}
.sup-clara .btn-2:hover,.sup-clara-2 .btn-2:hover{border-color:var(--azul);background:var(--azul-fraco)}
.btn-sm{padding:11px 20px;font-size:.9rem}
.acoes{display:flex;gap:14px;flex-wrap:wrap}

/* --------------------------------------------------------------- header ---- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background var(--transicao),border-color var(--transicao),backdrop-filter var(--transicao);
  border-bottom:1px solid transparent;
}
header.rolou{background:rgba(8,13,26,.82);backdrop-filter:blur(16px) saturate(1.4);border-bottom-color:var(--linha-escura)}
nav{display:flex;align-items:center;justify-content:space-between;height:84px;gap:22px}
.marca{display:flex;align-items:center;gap:14px}
.marca img{height:50px;width:auto;filter:drop-shadow(0 4px 18px rgba(82,177,243,.5))}
.marca .nome{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.16rem;
  letter-spacing:-.02em;color:#fff;line-height:1;
}
.marca .nome small{display:block;white-space:nowrap;font-size:.6rem;font-weight:600;letter-spacing:.11em;color:var(--mut-claro);margin-top:6px}
nav .links{display:flex;gap:26px;align-items:center;font-size:.92rem;font-weight:500;color:var(--mut-claro);white-space:nowrap}
nav .links a{position:relative;transition:color var(--transicao)}
nav .links a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--grad);
  border-radius:2px;transition:width var(--transicao);
}
.btn-mob{display:none}
nav .links a:hover{color:#fff}
nav .links a:hover::after{width:100%}
.menu-btn{display:none;background:none;border:0;padding:8px;color:#fff}
.menu-btn svg{width:26px;height:26px}

/* ----------------------------------------------------------------- hero ---- */
.hero{
  background:var(--ink);color:var(--mut-claro);
  padding:176px 0 110px;overflow:hidden;position:relative;
}
.hero::before{
  content:"";position:absolute;inset:-20% -20% auto -20%;height:900px;pointer-events:none;
  background:
    radial-gradient(48% 46% at 68% 34%,rgba(47,111,208,.30),transparent 68%),
    radial-gradient(38% 42% at 22% 18%,rgba(120,225,254,.12),transparent 70%);
}
.malha{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--linha-escura) 1px,transparent 1px),
                   linear-gradient(90deg,var(--linha-escura) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(75% 62% at 50% 34%,#000,transparent 100%);
          mask-image:radial-gradient(75% 62% at 50% 34%,#000,transparent 100%);
}
.hero h1{color:#fff;margin-bottom:26px}
.hero h1 .destaque{
  background:var(--grad-texto);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.hero .chamada{font-size:1.16rem;max-width:560px;margin-bottom:36px;color:var(--mut-claro)}
.selo{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:28px;
  padding:8px 16px 8px 10px;border-radius:999px;
  background:rgba(120,225,254,.07);border:1px solid rgba(120,225,254,.22);
  font-size:.82rem;font-weight:600;color:var(--ciano);letter-spacing:-.01em;
}
.selo .ponto{width:7px;height:7px;border-radius:50%;background:var(--ciano);box-shadow:0 0 0 4px rgba(120,225,254,.18)}

/* credenciais sob o hero */
.credenciais{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:76px;
  background:var(--linha-escura);border:1px solid var(--linha-escura);border-radius:var(--r);overflow:hidden;
}
.credenciais > div{background:var(--ink);padding:26px 28px}
.credenciais .valor{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:2rem;font-weight:800;color:#fff;
  letter-spacing:-.04em;line-height:1;margin-bottom:8px;
}
.credenciais .valor span{color:var(--ciano)}
.credenciais .desc{font-size:.9rem;line-height:1.5;color:var(--mut-claro)}

/* ------------------------------------------------- hero: órbita (SVG) ------ */
.orbita{position:relative;width:100%;aspect-ratio:1/1;max-width:520px;margin:0 auto}
.orbita svg{width:100%;height:100%;overflow:visible}
.orbita .anel{fill:none;stroke:var(--linha-escura);stroke-width:1}
.orbita .fio{fill:none;stroke:url(#gradFio);stroke-width:1.4;opacity:.55}
.orbita .pulso{
  fill:none;stroke:var(--ciano);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:8 190;animation:correr 4s linear infinite;
}
@keyframes correr{to{stroke-dashoffset:-198}}
.orbita .no circle{fill:var(--ink-3);stroke:rgba(255,255,255,.14);stroke-width:1}
.orbita .no text{
  font-family:'Inter',sans-serif;font-size:11px;font-weight:600;fill:#C9D6EC;
  text-anchor:middle;letter-spacing:.02em;
}
.orbita .no{animation:flutuar 6s ease-in-out infinite}
@keyframes flutuar{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.orbita .centro-marca{filter:drop-shadow(0 8px 30px rgba(82,177,243,.45))}

/* ------------------------------------------------------------- problema ---- */
.desalinho{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:0 0 44px}
.desalinho li{
  border:1px dashed var(--linha-clara);border-radius:var(--r-sm);
  padding:18px 16px;text-align:center;font-weight:600;font-size:.93rem;color:var(--mut-escuro);
  background:#fff;transition:transform var(--transicao),border-color var(--transicao);
}
.desalinho li:hover{transform:translateY(-3px);border-color:var(--azul-2);color:var(--txt-escuro)}
.veredito{
  border-left:3px solid var(--azul);background:var(--paper-2);
  padding:26px 30px;border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.veredito strong{color:var(--txt-escuro)}
.dois{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:56px;align-items:start}

/* ------------------------------------------------------------- soluções ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.card{
  background:#fff;border:1px solid var(--linha-clara);border-radius:var(--r);
  padding:30px;transition:border-color var(--transicao),box-shadow var(--transicao),transform var(--transicao);
}
.card:hover{border-color:#C9D8EC;box-shadow:0 18px 44px rgba(16,35,70,.09);transform:translateY(-3px)}
.card[open]{border-color:var(--azul-2);box-shadow:0 18px 44px rgba(16,35,70,.10)}
.card summary{
  display:flex;align-items:flex-start;gap:16px;cursor:pointer;list-style:none;
}
.card summary::-webkit-details-marker{display:none}
.card .marcador{
  flex:0 0 auto;width:42px;height:42px;border-radius:11px;
  background:var(--azul-fraco);border:1px solid rgba(47,111,208,.18);
  display:grid;place-items:center;color:var(--azul);
}
.card .marcador svg{width:20px;height:20px}
.card .tit{flex:1;min-width:0}
.card .tit h3{margin-bottom:4px}
.card .tit .resumo{font-size:.93rem;color:var(--mut-escuro);line-height:1.5}
.card .mais{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--linha-clara);
  display:grid;place-items:center;color:var(--mut-escuro);transition:transform var(--transicao),background var(--transicao);
  margin-top:6px;
}
.card[open] .mais{transform:rotate(45deg);background:var(--azul);border-color:var(--azul);color:#fff}
.card .corpo{padding:22px 0 0 58px;font-size:.95rem}
.card .corpo ul{display:grid;gap:9px;margin-top:14px}
.card .corpo li{position:relative;padding-left:20px;line-height:1.5}
.card .corpo li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;
  background:var(--grad);
}

/* ---------------------------------------------------------- ecossistema ---- */
.fluxo{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:10px;
}
.etapa{
  position:relative;background:var(--ink-2);border:1px solid var(--linha-escura);
  border-radius:var(--r-sm);padding:20px 16px;text-align:center;
  transition:border-color var(--transicao),transform var(--transicao),background var(--transicao);
}
.etapa:hover{border-color:rgba(120,225,254,.4);transform:translateY(-4px);background:var(--ink-3)}
.etapa .ord{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;color:var(--azul-2);
  display:block;margin-bottom:8px;
}
.etapa .nome{display:block;font-weight:700;color:#fff;font-size:.98rem;letter-spacing:-.01em}
.etapa .que{display:block;font-size:.83rem;color:var(--mut-claro);margin-top:6px;line-height:1.45}
.etapa::after{
  content:"";position:absolute;top:50%;right:-14px;width:14px;height:1px;
  background:linear-gradient(90deg,rgba(120,225,254,.5),rgba(120,225,254,.1));
}
.etapa:nth-child(5n)::after,.etapa:last-child::after{display:none}
.moral{
  margin-top:48px;padding:34px;border-radius:var(--r);text-align:center;
  background:linear-gradient(135deg,rgba(47,111,208,.14),rgba(120,225,254,.05));
  border:1px solid rgba(120,225,254,.18);
}
.moral p{font-size:1.25rem;font-weight:600;color:#fff;letter-spacing:-.02em;max-width:720px;margin:0 auto}
.moral p span{color:var(--ciano)}

/* ---------------------------------------------------------- metodologia ---- */
.trilha{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:20px;position:relative}
.passo{padding:0 22px 0 0;position:relative}
.passo .barra{height:3px;background:var(--linha-clara);border-radius:3px;margin-bottom:22px;overflow:hidden}
.passo .barra i{display:block;height:100%;width:0;background:var(--grad);border-radius:3px;transition:width 1s cubic-bezier(.22,.61,.36,1)}
.passo.ativo .barra i{width:100%}
.passo .ord{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:.9rem;font-weight:800;color:var(--azul);
  letter-spacing:.04em;display:block;margin-bottom:10px;
}
.passo h3{margin-bottom:10px}
.passo p{font-size:.93rem;line-height:1.55}

/* -------------------------------------------------------------- solutionss - */
.solutionss{
  background:
    radial-gradient(60% 60% at 80% 20%,rgba(242,107,29,.14),transparent 70%),
    var(--ink-2);
  border-top:1px solid var(--linha-escura);border-bottom:1px solid var(--linha-escura);
}
.solutionss .rotulo{color:var(--laranja-2)}
.solutionss .rotulo::before{background:linear-gradient(135deg,var(--laranja),var(--laranja-2))}
.ss-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:60px;align-items:center}
.ss-nome{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(2rem,4.4vw,3.2rem);font-weight:800;
  letter-spacing:-.04em;color:#fff;line-height:1;margin-bottom:18px;
}
.ss-nome span{color:var(--laranja)}
.ss-lista{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linha-escura);
  border:1px solid var(--linha-escura);border-radius:var(--r);overflow:hidden}
.ss-lista li{background:var(--ink);padding:18px 20px;font-size:.92rem;font-weight:600;color:#D7DEEC}
.ss-lista li small{display:block;font-weight:400;font-size:.81rem;color:var(--mut-claro);margin-top:3px;line-height:1.45}
.btn-ss{background:linear-gradient(135deg,var(--laranja),var(--laranja-2));color:#fff;box-shadow:0 10px 30px rgba(242,107,29,.28)}
.btn-ss:hover{box-shadow:0 16px 40px rgba(242,107,29,.4)}

/* ------------------------------------------------------------ experiência -- */
.citacao{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(1.4rem,2.9vw,2.1rem);
  font-weight:700;letter-spacing:-.03em;line-height:1.28;color:var(--txt-escuro);
}
/* em fundo claro o gradiente do hero fica lavado — este é mais escuro de propósito */
.citacao em{font-style:normal;background:linear-gradient(120deg,#1B56B0 0%,#2C93D8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.provas{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:48px}
.prova{background:var(--paper-2);border:1px solid var(--linha-clara);border-radius:var(--r);padding:24px}
.prova .rot{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--azul);margin-bottom:10px}
.prova p{font-size:.93rem;margin:0}

/* ----------------------------------------------------------- tecnologias --- */
.tecs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px}
.tec{
  border:1px solid var(--linha-escura);background:rgba(255,255,255,.03);
  border-radius:999px;padding:9px 20px;font-size:.88rem;font-weight:600;color:#C4D0E4;
  transition:border-color var(--transicao),color var(--transicao),transform var(--transicao);
}
.tec:hover{border-color:rgba(120,225,254,.45);color:#fff;transform:translateY(-2px)}

/* ------------------------------------------------------------- para quem --- */
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px}
.check{
  display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--linha-clara);
  border-radius:var(--r-sm);padding:20px 22px;transition:border-color var(--transicao),transform var(--transicao);
}
.check:hover{border-color:var(--azul-2);transform:translateX(3px)}
.check .ic{
  flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:var(--grad);
  display:grid;place-items:center;margin-top:1px;
}
.check .ic svg{width:13px;height:13px;stroke:#04121F;stroke-width:3.2}
.check span{font-size:.97rem;font-weight:500;color:var(--txt-escuro);line-height:1.5}

/* ------------------------------------------------------------- contato ----- */
.contato-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.form-caixa{
  background:var(--ink-2);border:1px solid var(--linha-escura);border-radius:var(--r);padding:34px;
}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo{display:flex;flex-direction:column;gap:7px}
.campo.largo{grid-column:1/-1}
.campo label{font-size:.82rem;font-weight:600;color:#B9C6DC;letter-spacing:-.01em}
.campo input,.campo textarea,.campo select{
  font-family:inherit;font-size:.96rem;color:#fff;
  background:rgba(255,255,255,.04);border:1px solid var(--linha-escura);
  border-radius:var(--r-sm);padding:13px 15px;width:100%;
  transition:border-color var(--transicao),background var(--transicao);
}
.campo textarea{resize:vertical;min-height:104px;line-height:1.55}
.campo input::placeholder,.campo textarea::placeholder{color:#63728C}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;border-color:var(--azul-2);background:rgba(82,177,243,.07);
}
.campo.erro input,.campo.erro textarea{border-color:#E5484D;background:rgba(229,72,77,.06)}
.campo .aviso{font-size:.78rem;color:#FF8A8D;display:none}
.campo.erro .aviso{display:block}
/* honeypot: invisível para gente, preenchido por robô */
.mel{position:absolute;left:-9999px;opacity:0;height:0;width:0}
/* atalho de teclado: some até receber foco */
.pular{
  position:absolute;left:-9999px;top:10px;z-index:200;
  background:var(--ciano);color:#04121F;font-weight:700;font-size:.9rem;
  padding:12px 20px;border-radius:var(--r-sm);
}
.pular:focus{left:20px}
.form-pe{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
.form-pe .obs{font-size:.8rem;color:var(--mut-claro);flex:1;min-width:190px;line-height:1.45}
.recado{
  display:none;margin-top:18px;padding:16px 20px;border-radius:var(--r-sm);font-size:.92rem;line-height:1.55;
}
.recado.ok{display:block;background:rgba(47,179,122,.12);border:1px solid rgba(47,179,122,.35);color:#7FE3B6}
.recado.ruim{display:block;background:rgba(229,72,77,.1);border:1px solid rgba(229,72,77,.32);color:#FFAAAC}
.recado a{color:#fff;text-decoration:underline;font-weight:600}
.btn[disabled]{opacity:.6;pointer-events:none}

.canais{display:grid;gap:12px;margin-top:34px}
.canal{
  display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r-sm);
  border:1px solid var(--linha-escura);background:rgba(255,255,255,.02);
  transition:border-color var(--transicao),transform var(--transicao);
}
.canal:hover{border-color:var(--azul-2);transform:translateX(3px)}
.canal .ic{width:38px;height:38px;border-radius:10px;background:rgba(120,225,254,.1);display:grid;place-items:center;color:var(--ciano);flex:0 0 auto}
.canal .ic svg{width:19px;height:19px}
.canal b{display:block;color:#fff;font-size:.95rem;font-weight:600}
.canal span{font-size:.86rem;color:var(--mut-claro)}

/* --------------------------------------------------------------- rodapé ---- */
footer{background:var(--ink);border-top:1px solid var(--linha-escura);padding:70px 0 30px;color:var(--mut-claro)}
.pe-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px}
.pe-grid h4{color:#fff;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px;font-weight:700}
.pe-grid li{margin-bottom:11px;font-size:.92rem}
.pe-grid li a{transition:color var(--transicao)}
.pe-grid li a:hover{color:var(--ciano)}
.pe-sobre{font-size:.93rem;max-width:340px;margin-top:18px}
/* identificação legal — é o que Meta, TikTok e a LGPD esperam encontrar
   em qualquer página do site, não só na política */
.identificacao{
  margin-top:46px;padding:20px 24px;border:1px solid var(--linha-escura);
  border-radius:var(--r-sm);background:rgba(255,255,255,.02);
}
.identificacao p{font-size:.85rem;line-height:1.75;color:var(--mut-claro);margin:0}
.identificacao b{color:#D7DEEC;font-weight:600}
.identificacao a{color:var(--ciano)}
.identificacao a:hover{text-decoration:underline}
.pe-base{
  margin-top:26px;padding-top:24px;border-top:1px solid var(--linha-escura);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.85rem;
}

/* ------------------------------------------------------------- animação ---- */
.revela{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.revela.visivel{opacity:1;transform:none}
.revela.d1{transition-delay:.08s}.revela.d2{transition-delay:.16s}
.revela.d3{transition-delay:.24s}.revela.d4{transition-delay:.32s}

/* ========================================================== responsivo ===== */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .orbita{max-width:420px}
  .ss-grid,.contato-grid{grid-template-columns:1fr;gap:44px}
  .fluxo{grid-template-columns:repeat(3,1fr)}
  .etapa:nth-child(5n)::after{display:block}
  .etapa:nth-child(3n)::after{display:none}
  .trilha{grid-template-columns:repeat(2,1fr);gap:34px 24px}
  .pe-grid{grid-template-columns:1fr 1fr;gap:34px}
}

@media (max-width:760px){
  body{font-size:16px}
  section{padding:76px 0}
  .wrap{padding:0 20px}
  .hero{padding:112px 0 74px}
  .hero h1{font-size:1.95rem;letter-spacing:-.035em}
  .hero .chamada{font-size:1rem;margin-bottom:28px}
  .selo{font-size:.76rem;padding:7px 14px 7px 9px;margin-bottom:22px}
  .sec-head{margin-bottom:38px}
  .sec-head p{font-size:1.02rem}

  nav{height:70px}
  .marca img{height:42px}
  .marca .nome{font-size:1.04rem}
  nav .links{
    position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    /* opaco de propósito: com fundo translúcido o conteúdo da página
       aparecia atrás dos itens e o menu ficava ilegível */
    background:var(--ink);
    border-bottom:1px solid var(--linha-escura);
    box-shadow:0 22px 40px rgba(0,0,0,.5);
    padding:10px 20px 22px;display:none;
  }
  nav .links.aberto{display:flex}
  nav .links a{display:block;padding:15px 4px;border-bottom:1px solid var(--linha-escura);font-size:1rem}
  nav .links a::after{display:none}
  /* o CTA do topo some só quando existe a gaveta de menu para recebê-lo;
     nas páginas de texto (privacidade, termos) não há gaveta, e ele fica */
  nav .links ~ .btn{display:none}
  nav .links .btn-mob{display:flex;width:100%;margin-top:16px;border-bottom:0;padding:15px 20px}
  .btn-mob{display:inline-flex}
  .menu-btn{display:block}
  header{background:rgba(8,13,26,.9);backdrop-filter:blur(14px);border-bottom-color:var(--linha-escura)}

  .credenciais{grid-template-columns:1fr;margin-top:52px}
  .credenciais .valor{font-size:1.75rem}
  .orbita{max-width:340px}
  .fluxo{grid-template-columns:repeat(2,1fr)}
  .etapa::after{display:none!important}
  .moral p{font-size:1.06rem}
  .trilha{grid-template-columns:1fr;gap:28px}
  .passo{padding-right:0}
  .ss-lista{grid-template-columns:1fr}
  .card{padding:24px}
  .card .corpo{padding-left:0}
  .form-caixa{padding:24px 20px}
  .campos{grid-template-columns:1fr}
  .acoes{gap:10px}
  .acoes .btn,.acoes .btn-2{width:100%}
  .dois{gap:36px}
  .pe-grid{grid-template-columns:1fr;gap:30px}
  .pe-base{flex-direction:column;gap:8px}
  .citacao{font-size:1.28rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .revela{opacity:1;transform:none}
}

/* páginas de texto (privacidade, termos) */
.doc{padding-top:150px}
.doc .wrap{max-width:820px}
.doc h2{font-size:1.5rem;margin:44px 0 14px}
.doc h2:first-of-type{margin-top:34px}
.doc p,.doc li{font-size:1.02rem}
.doc ul{display:grid;gap:10px;margin:14px 0 22px}
.doc li{position:relative;padding-left:20px}
.doc li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--grad)}
.doc .atualizado{font-size:.88rem;color:var(--mut-escuro);border-left:3px solid var(--azul);padding-left:16px}

/* tabelas das páginas legais */
.doc table{width:100%;border-collapse:collapse;margin:18px 0 26px;font-size:.94rem}
.doc th,.doc td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--linha-clara);vertical-align:top}
.doc th{font-weight:700;color:var(--txt-escuro);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.doc td b{color:var(--txt-escuro)}
.doc .caixa{
  border:1px solid var(--linha-clara);background:var(--paper-2);
  border-radius:var(--r-sm);padding:22px 26px;margin:24px 0;
}
.doc .caixa h3{margin-bottom:10px}
.doc .caixa p:last-child{margin-bottom:0}
.doc a[href^="mailto"],.doc a[href^="http"],.doc a[href$=".html"]{color:var(--azul);font-weight:600}
.doc a:hover{text-decoration:underline}
@media (max-width:760px){
  .doc{padding-top:120px}
  .doc table,.doc thead,.doc tbody,.doc tr,.doc th,.doc td{display:block}
  .doc th{border-bottom:0;padding-bottom:0}
  .doc tr{border-bottom:1px solid var(--linha-clara);padding:10px 0}
  .doc td{border-bottom:0;padding:6px 0}
}

/* ============================================================ PERFIS ====== */
/* quem é o cliente da consultoria — cartão simples, sem abrir */
.perfil{
  background:#fff;border:1px solid var(--linha-clara);border-radius:var(--r);
  padding:28px 30px;
  transition:border-color var(--transicao),box-shadow var(--transicao),transform var(--transicao);
}
.perfil:hover{border-color:var(--azul-2);box-shadow:0 18px 44px rgba(16,35,70,.09);transform:translateY(-3px)}
.perfil h3{margin-bottom:10px;position:relative;padding-left:18px}
.perfil h3::before{
  content:"";position:absolute;left:0;top:.28em;width:6px;height:1em;
  background:var(--grad);border-radius:3px;
}
.perfil p{font-size:.95rem;margin:0;line-height:1.6}

/* ============================================================ PLANOS ====== */
.planos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.plano{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--linha-clara);border-radius:var(--r);
  padding:32px 30px;height:100%;
  transition:border-color var(--transicao),box-shadow var(--transicao),transform var(--transicao);
}
.plano:hover{border-color:#C9D8EC;box-shadow:0 18px 44px rgba(16,35,70,.09);transform:translateY(-3px)}
/* o do meio é o que a GL quer vender: ganha peso visual, não cor diferente */
.plano.destaque{
  border-color:var(--azul);box-shadow:0 22px 60px rgba(47,111,208,.16);
  background:linear-gradient(180deg,rgba(47,111,208,.045),#fff 180px);
}
.fita{
  position:absolute;top:-13px;left:30px;
  background:var(--grad);color:#04121F;font-size:.72rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:999px;
  box-shadow:0 8px 20px rgba(47,111,208,.3);
}
.plano-topo{border-bottom:1px solid var(--linha-clara);padding-bottom:22px;margin-bottom:22px}
.plano-para{font-size:.9rem;color:var(--mut-escuro);margin:8px 0 0;line-height:1.5;min-height:2.7em}
.plano-preco{margin-top:18px}
.plano-preco .valor{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:2.1rem;font-weight:800;
  letter-spacing:-.04em;color:var(--txt-escuro);line-height:1;
  font-variant-numeric:tabular-nums;
}
.plano-preco .valor.sob{font-size:1.5rem;color:var(--azul)}
.plano-tese{font-size:.95rem;margin-bottom:20px}
.plano-tese b{color:var(--txt-escuro)}
.plano-lista{display:grid;gap:11px;margin-bottom:28px;flex:1}
.plano-lista li{position:relative;padding-left:26px;font-size:.93rem;line-height:1.5}
.plano-lista li::before{
  content:"";position:absolute;left:0;top:.36em;width:15px;height:8px;
  border-left:2px solid var(--azul);border-bottom:2px solid var(--azul);
  transform:rotate(-45deg);border-radius:1px;
}
.plano.destaque .plano-lista li::before{border-color:var(--azul-2)}
/* botão que ocupa a largura do cartão e fica colado no rodapé dele */
.bloco{width:100%;margin-top:auto}

/* ====================================================== MÉTODO EM 5 ====== */
/* os cinco pilares têm texto mais longo que as etapas curtas do ecossistema */
.fluxo-5 .etapa{text-align:left;padding:24px 20px}
.fluxo-5 .etapa .nome{font-size:1.05rem;margin-bottom:8px}
.fluxo-5 .etapa .que{font-size:.86rem}
.fluxo-5 .etapa::after{top:44px}

/* ====================================================== SELETOR =========== */
.campo select{appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238D9BB5' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
/* a lista aberta é desenhada pelo sistema: sem isto, texto branco em fundo branco */
.campo select option{background:#0C1322;color:#fff}

@media (max-width:1020px){
  .planos{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .plano-para{min-height:0}
  .fluxo-5{grid-template-columns:repeat(2,1fr)}
  .fluxo-5 .etapa::after{display:none}
}
@media (max-width:760px){
  .fluxo-5{grid-template-columns:1fr}
  .plano{padding:26px 22px}
  .perfil{padding:24px 22px}
}

/* =========================================================== WHATSAPP ===== */
/* Verde oficial do WhatsApp. É a única cor fora da paleta da marca no site, e
   é proposital: o reconhecimento do verde vale mais aqui do que a coerência. */
:root{ --zap:#25D366; --zap-escuro:#128C7E; }

/* botão do hero — ao lado do CTA principal */
.btn-zap{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:var(--r-sm);
  font-weight:700;font-size:.97rem;letter-spacing:-.01em;white-space:nowrap;
  color:#04140B;background:var(--zap);
  box-shadow:0 10px 30px rgba(37,211,102,.28);
  transition:transform var(--transicao),box-shadow var(--transicao),filter var(--transicao);
}
.btn-zap:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(37,211,102,.4);filter:brightness(1.06)}
.btn-zap:active{transform:translateY(0)}

/* botão flutuante — acompanha a rolagem em todas as páginas */
.zap{
  position:fixed;right:24px;bottom:24px;z-index:90;
  display:inline-flex;align-items:center;gap:11px;
  background:var(--zap);color:#04140B;
  font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  padding:14px 22px 14px 18px;border-radius:999px;
  box-shadow:0 10px 34px rgba(0,0,0,.34),0 4px 14px rgba(37,211,102,.4);
  transition:transform var(--transicao),box-shadow var(--transicao);
}
.zap svg{width:24px;height:24px;flex:0 0 auto}
.zap:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 44px rgba(0,0,0,.4),0 6px 20px rgba(37,211,102,.5)}
.zap:active{transform:translateY(0)}
/* pulso discreto de entrada, uma vez só — chama o olho sem ficar piscando */
@keyframes zapEntra{
  0%{opacity:0;transform:translateY(16px) scale(.9)}
  100%{opacity:1;transform:none}
}
.zap{animation:zapEntra .5s .9s backwards cubic-bezier(.22,.61,.36,1)}

/* canal de WhatsApp na seção de contato: vira o item de destaque */
.canal-zap{
  background:rgba(37,211,102,.09);border-color:rgba(37,211,102,.38);
}
.canal-zap .ic{background:rgba(37,211,102,.16);color:var(--zap)}
.canal-zap:hover{border-color:var(--zap);background:rgba(37,211,102,.14)}
.canal-zap b{color:#fff}

@media (max-width:760px){
  /* no celular só o ícone, para não cobrir o conteúdo */
  .zap{right:16px;bottom:16px;padding:15px;gap:0}
  .zap span{display:none}
  .zap svg{width:26px;height:26px}
  .btn-zap{width:100%}
}