/* ================================================================
   home.css — KLK Web  v3.0
   Design novo: seções com personalidade, quebras visuais,
   elementos que "conversam" entre si, não tudo reto e igual.
================================================================ */


/* ════════════════════════════════════════════════════════════════
   HERO
   ★ TÍTULO: edite .hero-titulo | SUBTÍTULO: .hero-sub
   ★ STATS: data-alvo="100" data-sufixo="%" ou data-texto="SEO"
════════════════════════════════════════════════════════════════ */
#hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 54% 46%;
  align-items: center;
  padding: clamp(110px,14vh,155px) var(--px) clamp(60px,8vh,90px);
  overflow: hidden;
  z-index: 1;
}

/* grade de pontos no fundo */
.hero-grid {
  position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
  background:
    linear-gradient(rgba(5,37,232,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(5,37,232,.04) 1px,transparent 1px);
  background-size: 72px 72px;
  transform: perspective(500px) rotateX(58deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top,rgba(0,0,0,.7),transparent);
  pointer-events: none;
}

.hero-glow-l { position:absolute;top:-10%;left:-18%;width:62vw;height:62vw;background:radial-gradient(circle,rgba(5,37,232,.24),transparent 62%);pointer-events:none;animation:hpulsar 9s ease-in-out infinite; }
.hero-glow-r { position:absolute;bottom:-18%;right:-8%;width:52vw;height:52vw;background:radial-gradient(circle,rgba(0,242,255,.07),transparent 62%);pointer-events:none;animation:hpulsar 12s 3s ease-in-out infinite; }
@keyframes hpulsar { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.07)} }

/* ── Texto ── */
.hero-texto { position:relative;z-index:2; }

.hero-badge { display:inline-flex;align-items:center;gap:10px;background:rgba(5,37,232,.15);border:1px solid rgba(56,200,255,.22);border-radius:100px;padding:7px 18px;margin-bottom:26px;animation:heroUp .9s var(--ease) both; }
.badge-dot  { width:7px;height:7px;border-radius:50%;background:var(--bn);box-shadow:0 0 12px var(--bn);animation:piscar 1.6s ease-in-out infinite;flex-shrink:0; }
@keyframes piscar { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.2;transform:scale(.5)} }
.hero-badge span { font-size:.62rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--bl); }
@keyframes heroUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }

.hero-titulo { font-family:var(--T);font-size:clamp(3.4rem,7.8vw,8rem);line-height:.88;letter-spacing:2px;margin-bottom:22px;animation:heroUp .9s .08s var(--ease) both; }
.hero-titulo em { font-style:normal;color:var(--bl);position:relative;display:inline-block; }
.hero-titulo em::after { content:'';position:absolute;bottom:-6px;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--bd),var(--bn));transform:scaleX(0);transform-origin:left;animation:underline 1.1s 1.1s var(--ease) both; }
@keyframes underline { from{transform:scaleX(0)} to{transform:scaleX(1)} }

.hero-sub   { font-size:clamp(.88rem,1.8vw,1rem);line-height:1.85;color:var(--gr);max-width:480px;margin-bottom:36px;animation:heroUp .9s .16s var(--ease) both; }
.hero-botoes{ display:flex;gap:14px;flex-wrap:wrap;animation:heroUp .9s .24s var(--ease) both; }

.hero-stats { display:flex;gap:clamp(22px,5vw,52px);margin-top:44px;animation:heroUp .9s .32s var(--ease) both; }
.stat-item  { display:flex;flex-direction:column;gap:3px; }
.stat-numero{ font-family:var(--T);font-size:clamp(1.8rem,2.8vw,2.6rem);line-height:.88;letter-spacing:2px;color:var(--bl);text-shadow:0 0 28px rgba(56,200,255,.5); }
.stat-label { font-size:.6rem;color:var(--gr);letter-spacing:2px;text-transform:uppercase;font-weight:600;margin-top:4px; }

/* ── Globo ── */
.hero-globo {
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  height:100%;min-height:400px;
  animation:heroUp .9s .35s var(--ease) both;
}
.globo-glow { position:absolute;width:66%;height:66%;background:radial-gradient(circle,rgba(5,37,232,.42),transparent 70%);border-radius:50%;animation:hpulsar 6s ease-in-out infinite;filter:blur(24px); }
.gring { position:absolute;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%); }
.gr1 { width:108%;height:108%;border:1px solid rgba(56,200,255,.18);animation:girar 18s linear infinite; }
.gr2 { width:128%;height:128%;border:1px dashed rgba(0,242,255,.1);animation:girar 28s linear infinite reverse; }
.gr3 { width:150%;height:150%;border:1px dotted rgba(5,37,232,.1);animation:girar 40s linear infinite; }
.gr4 { width:172%;height:172%;border:1px solid rgba(56,200,255,.06);animation:girar 55s linear infinite reverse; }
.gr5 { width:196%;height:196%;border:1px dashed rgba(5,37,232,.05);animation:girar 70s linear infinite; }
@keyframes girar { to{transform:translate(-50%,-50%) rotate(360deg)} }
.gdot { position:absolute;border-radius:50%;top:50%;left:50%;transform-origin:0 0; }
.gd1 { width:9px;height:9px;background:var(--bn);box-shadow:0 0 14px var(--bn),0 0 28px rgba(0,242,255,.5);animation:orbita1 9s linear infinite; }
.gd2 { width:6px;height:6px;background:var(--bl);box-shadow:0 0 10px var(--bl);animation:orbita2 15s linear infinite; }
.gd3 { width:5px;height:5px;background:rgba(255,255,255,.7);box-shadow:0 0 8px #fff;animation:orbita1 6s linear infinite reverse; }
@keyframes orbita1 { from{transform:rotate(0deg) translateX(clamp(110px,16vw,200px))} to{transform:rotate(360deg) translateX(clamp(110px,16vw,200px))} }
@keyframes orbita2 { from{transform:rotate(80deg) translateX(clamp(140px,20vw,240px))} to{transform:rotate(440deg) translateX(clamp(140px,20vw,240px))} }
.globo-svg { width:clamp(240px,36vw,460px);position:relative;z-index:1;filter:drop-shadow(0 0 36px rgba(5,37,232,.65)) drop-shadow(0 0 70px rgba(56,200,255,.18)); }
.globo-logo { position:absolute;text-align:center;z-index:2;pointer-events:none; }
.globo-texto{ font-family:var(--T);font-size:clamp(1.6rem,2.8vw,2.4rem);line-height:.88;letter-spacing:4px;color:rgba(255,255,255,.88);text-shadow:0 0 32px rgba(56,200,255,.7); }
.globo-sub  { font-size:.56rem;letter-spacing:4px;text-transform:uppercase;color:rgba(56,200,255,.65);margin-top:5px;font-weight:700; }

.scroll-ind { position:absolute;bottom:24px;left:var(--px);display:flex;align-items:center;gap:10px;font-size:.58rem;color:var(--gr2);letter-spacing:3px;text-transform:uppercase;font-weight:700;animation:heroUp 1s .9s both;z-index:2; }
.scroll-linha { width:1px;height:38px;background:linear-gradient(to bottom,var(--bl),transparent);animation:scrollAnim 2.2s ease-in-out infinite; }
@keyframes scrollAnim { 0%{transform:scaleY(0);transform-origin:top;opacity:0} 30%{opacity:1} 60%{transform:scaleY(1);transform-origin:top} 61%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom;opacity:0} }

@media (max-width:900px) {
  #hero { grid-template-columns:1fr;text-align:center;padding-top:120px;gap:44px; }
  .hero-botoes,.hero-stats { justify-content:center; }
  .hero-sub { margin-left:auto;margin-right:auto; }
  .hero-globo { order:-1;min-height:260px; }
  .globo-svg  { width:clamp(220px,55vw,320px); }
  .scroll-ind { display:none; }
}


/* ════════════════════════════════════════════════════════════════
   MARQUEE
════════════════════════════════════════════════════════════════ */
.marquee-wrap { overflow:hidden;padding:11px 0;position:relative;z-index:1;background:rgba(5,10,24,.55);border-top:1px solid rgba(56,200,255,.07);border-bottom:1px solid rgba(56,200,255,.07); }
.marquee-track { display:flex;width:max-content;animation:marqRun 38s linear infinite; }
.marquee-track.reverso { animation-direction:reverse; }
@keyframes marqRun { to{transform:translateX(-50%)} }
.marquee-item { font-size:.62rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gr2);padding:0 28px;white-space:nowrap;display:flex;align-items:center;gap:28px; }
.marquee-item::after { content:'✦';font-size:.42rem;color:var(--bl);opacity:.4; }
.marquee-item.destaque { color:var(--bl);opacity:.7; }


/* ════════════════════════════════════════════════════════════════
   SERVIÇOS
   Quebra o grid reto: 3 colunas, mas o 4º card tem visual diferente
   ★ PARA ADICIONAR: copie um .card-servico
════════════════════════════════════════════════════════════════ */
#servicos {
  position: relative; z-index:1;
  padding: var(--py) var(--px);
  /* Fundo com gradiente diagonal — não é todo preto */
  background: linear-gradient(135deg, var(--bk) 0%, var(--dk) 60%, #060a16 100%);
  /* Elemento decorativo de canto */
  overflow: hidden;
}
/* Círculo decorativo de canto superior direito */
#servicos::after {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(5,37,232,.14), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}

.grid-servicos {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: rgba(56,200,255,.06);
  border: 1px solid rgba(56,200,255,.06);
  border-radius: var(--r2);
  overflow: hidden;
  margin-top: 48px;
  position: relative; z-index:1;
}
.card-servico { background:var(--card);padding:36px 30px;position:relative;cursor:none;overflow:hidden;transition:background .4s; }
.card-servico::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(5,37,232,.09),transparent);opacity:0;transition:opacity .4s; }
.card-servico::after  { content:'';position:absolute;top:0;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--bd),var(--bn));transition:width .5s var(--ease); }
.card-servico:hover { background: var(--nv); }
.card-servico:hover::before { opacity:1; }
.card-servico:hover::after  { width:100%; }
.servico-num   { font-family:var(--T);font-size:2.8rem;letter-spacing:2px;color:rgba(56,200,255,.05);line-height:.88;margin-bottom:12px;transition:color .4s; }
.card-servico:hover .servico-num { color:rgba(56,200,255,.12); }
.servico-ico   { width:44px;height:44px;background:rgba(5,37,232,.18);border:1px solid rgba(56,200,255,.14);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;transition:background .4s,box-shadow .4s,transform .3s; }
.card-servico:hover .servico-ico { background:rgba(5,37,232,.38);box-shadow:0 0 22px rgba(56,200,255,.2);transform:scale(1.05); }
.servico-titulo{ font-family:var(--T);font-size:1.3rem;letter-spacing:1px;color:var(--wh);margin-bottom:8px;line-height:.88; }
.servico-desc  { font-size:.82rem;color:var(--gr);line-height:1.75; }
@media (max-width:860px) { .grid-servicos { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px)  { .grid-servicos { grid-template-columns:1fr; } }


/* ════════════════════════════════════════════════════════════════
   NÚMEROS
   Faixa de cor diferente — azul escuro profundo
   Corta a monotonia do preto
════════════════════════════════════════════════════════════════ */
#numeros {
  position: relative; z-index:1;
  padding: clamp(60px,8vw,100px) var(--px);
  /* Fundo de cor diferente — destaca visualmente */
  background: linear-gradient(90deg, #040a1c 0%, #060c24 50%, #040a1c 100%);
  border-top: 1px solid rgba(56,200,255,.1);
  border-bottom: 1px solid rgba(56,200,255,.1);
  overflow: hidden;
}
/* Listras diagonais sutis no fundo */
#numeros::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 60px,
    rgba(56,200,255,.015) 60px,
    rgba(56,200,255,.015) 61px
  );
  pointer-events: none;
}
.grid-numeros { display:grid;grid-template-columns:repeat(4,1fr);gap:2px;position:relative;z-index:1; }
.num-item {
  padding: 44px 24px; text-align:center; position:relative; overflow:hidden;
  background: rgba(4,8,22,.7); border-radius:var(--r);
  transition: background .35s, transform .35s var(--ease);
}
.num-item:hover { background:rgba(5,15,40,.9); transform:translateY(-4px); }
.num-item::before { content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:40%;height:1px;background:linear-gradient(90deg,transparent,var(--bl),transparent); }
.num-valor { font-family:var(--T);font-size:clamp(2.4rem,4.2vw,4.2rem);line-height:.88;letter-spacing:2px;color:var(--bl);margin-bottom:12px; }
.num-label { font-size:.63rem;color:var(--gr);letter-spacing:2.5px;text-transform:uppercase;font-weight:600; }
@media (max-width:700px) { .grid-numeros { grid-template-columns:repeat(2,1fr); } }


/* ════════════════════════════════════════════════════════════════
   SOBRE
   Layout diagonal: imagem à esquerda sai levemente do grid
   Linha divisória com gradiente dá dinamismo
════════════════════════════════════════════════════════════════ */
#sobre {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 72px;
  position: relative; z-index:1;
  padding: var(--py) var(--px);
  background: var(--bk);
  overflow: hidden;
}
/* Linha diagonal decorativa */
#sobre::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(56,200,255,.12) 30%, rgba(56,200,255,.12) 70%, transparent);
  pointer-events: none;
}
.sobre-visual { position:relative;display:flex;align-items:center;justify-content:center;height:400px; }
.sobre-orbe { width:190px;height:190px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--bm),var(--bd));display:flex;align-items:center;justify-content:center;box-shadow:0 0 70px rgba(5,37,232,.5),0 0 140px rgba(56,200,255,.08);animation:respirar 6s ease-in-out infinite; }
@keyframes respirar { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.orbe-texto { font-family:var(--T);font-size:2rem;letter-spacing:3px;color:rgba(255,255,255,.9);text-align:center;line-height:.88; }
.float-card { position:absolute;background:rgba(6,10,22,.92);backdrop-filter:blur(16px);border:1px solid rgba(56,200,255,.15);border-radius:var(--r);padding:11px 16px;text-align:center;animation:flotar 4s ease-in-out infinite; }
.float-card:nth-child(2){top:8%;right:4%;animation-delay:0s}
.float-card:nth-child(3){top:8%;left:4%;animation-delay:1s}
.float-card:nth-child(4){bottom:8%;right:4%;animation-delay:2s}
.float-card:nth-child(5){bottom:8%;left:4%;animation-delay:.5s}
@keyframes flotar { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.float-valor { font-family:var(--T);font-size:1.4rem;letter-spacing:1px;color:var(--bl);line-height:.88; }
.float-label { font-size:.6rem;color:var(--gr);letter-spacing:1.5px;text-transform:uppercase; }
.sobre-lista { list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:12px; }
.sobre-lista li { display:flex;align-items:flex-start;gap:12px;font-size:.86rem;color:var(--gr);line-height:1.65; }
.sobre-lista li strong { display:block;color:var(--wh);font-weight:700;margin-bottom:1px; }
.check-ico { width:24px;height:24px;background:rgba(5,37,232,.18);border:1px solid rgba(56,200,255,.18);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px; }
@media (max-width:860px) { #sobre { grid-template-columns:1fr;gap:44px; } .sobre-visual { height:300px; } #sobre::before { display:none; } }


/* ════════════════════════════════════════════════════════════════
   TECNOLOGIAS
   Fundo diferente: gradiente de cima para baixo
   Cards em grid centralizado
   ★ ADICIONAR: copie .tech-card, troque img e textos
════════════════════════════════════════════════════════════════ */
#tecnologias {
  position: relative; z-index:1;
  padding: var(--py) var(--px);
  text-align: center;
  background: linear-gradient(180deg, var(--dk) 0%, var(--nv) 100%);
  overflow: hidden;
}
/* Ponto luminoso no centro do fundo */
#tecnologias::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 60vw; height: 40vw;
  background: radial-gradient(ellipse, rgba(5,37,232,.1), transparent 65%);
  pointer-events: none;
}
#tecnologias .tag { justify-content:center; }
.grid-tech,.grid-tecnologias { display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:44px;max-width:800px;margin-left:auto;margin-right:auto;position:relative;z-index:1; }
.tech-card { background:rgba(6,10,22,.8);border:1px solid rgba(56,200,255,.08);border-radius:var(--r);padding:20px 24px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:none;min-width:100px;transition:border-color .35s,transform .35s var(--ease),box-shadow .35s,background .35s; }
.tech-card:hover { border-color:rgba(56,200,255,.24);transform:translateY(-7px);box-shadow:0 16px 40px rgba(5,37,232,.22);background:rgba(5,10,28,.95); }
.tech-ico { width:46px;height:46px;background:rgba(5,37,232,.12);border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background .35s; }
.tech-card:hover .tech-ico { background:rgba(5,37,232,.28); }
.tech-ico img { width:30px;height:30px;object-fit:contain; }
.tech-ico-fallback { font-family:var(--T);font-size:.9rem;letter-spacing:1px;color:var(--bl);line-height:1; }
.tech-nome { font-family:var(--T);font-size:1rem;letter-spacing:1px;color:var(--wh);line-height:1; }
.tech-desc { font-size:.62rem;color:var(--gr);letter-spacing:1px;text-transform:uppercase; }


/* ════════════════════════════════════════════════════════════════
   EQUIPE
   Fundo com accent de cor diferente — visual de "palco"
   Cards modernos: foto grande, overlay de gradiente, infos sobrepostas
   ★ FOTO: img/layout/nome.jpeg (400×500px retrato)
════════════════════════════════════════════════════════════════ */
#equipe {
  position: relative; z-index:1;
  padding: var(--py) var(--px);
  text-align: center;
  /* Fundo com tom azul mais escuro — cria quebra visual */
  background: linear-gradient(180deg, var(--nv) 0%, #050a1c 60%, var(--dk) 100%);
  overflow: hidden;
}
/* Reflexo de luz na base da seção */
#equipe::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0; height: 120px;
  background: linear-gradient(to top, var(--bk), transparent);
  pointer-events: none;
}

.grid-equipe { display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;perspective:1000px; }

/* Card com foto de capa + overlay estilo editorial/magazine */
.card-membro {
  position: relative; border-radius:var(--r2); overflow:hidden; cursor:none;
  background: var(--card); border:1px solid rgba(56,200,255,.09);
  transition: transform .45s var(--ease), box-shadow .45s, border-color .45s;
}
.card-membro:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 44px rgba(5,37,232,.28);
  border-color: rgba(56,200,255,.2);
}

/* Linha de cor no topo */
.membro-barra { height:3px;background:linear-gradient(90deg,var(--bd),var(--bn)); }

/* Avatar circular — foto proporcionada */
.membro-avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nv), var(--card));
  border: 2px solid rgba(56,200,255,.18);
  overflow: hidden; flex-shrink: 0;
  box-shadow: 0 0 18px rgba(5,37,232,.2);
}
.membro-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  display: block;
}

/* Layout: avatar à esquerda + texto à direita */
.membro-topo {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 20px 14px;
}
.membro-topo-texto { flex:1; text-align:left; }
.membro-nome  { font-family:var(--T);font-size:1.25rem;letter-spacing:1.5px;line-height:.88;color:var(--wh);margin-bottom:5px; }
.membro-cargo { font-size:.58rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--bl); }

/* Bio e hint */
.membro-info-baixo { padding:0 20px 18px; }
.membro-bio {
  font-size:.8rem; color:var(--gr); line-height:1.7;
  margin-bottom:12px;
  /* Trunca em 2 linhas — o modal mostra completo */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.membro-hint {
  font-size:.6rem; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:rgba(56,200,255,.4);
  display:flex; align-items:center; gap:6px;
  transition:color .3s;
}
.membro-hint::before { content:''; width:14px; height:1px; background:currentColor; }
.card-membro:hover .membro-hint { color:var(--bl); }

/* Legados — ocultos nesse layout */
.membro-email,.membro-sobre-foto,.membro-tag-cargo,.membro-nome-foto { display:none; }

@media (max-width:900px) { .grid-equipe { grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto; } }
@media (max-width:560px) { .grid-equipe { max-width:100%; } }


/* ════════════════════════════════════════════════════════════════
   PROCESSO
   Timeline com linha conectora animada
   ★ ADICIONAR PASSO: copie um .passo
════════════════════════════════════════════════════════════════ */
#processo {
  position:relative;z-index:1;
  padding: var(--py) var(--px);
  text-align: center;
  background: var(--bk);
  overflow: hidden;
}
/* Gradiente de canto no fundo */
#processo::before {
  content:'';position:absolute;bottom:-100px;left:50%;transform:translateX(-50%);
  width:70vw;height:40vw;
  background:radial-gradient(ellipse,rgba(5,37,232,.08),transparent 65%);
  pointer-events:none;
}
.grid-processo {
  display:flex;gap:0;margin-top:52px;position:relative;
}
.grid-processo::before {
  content:'';position:absolute;top:28px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(56,200,255,.14) 20%,rgba(56,200,255,.14) 80%,transparent);
}
.passo { flex:1;text-align:center;padding:16px 10px;cursor:none;position:relative;z-index:1; }
.passo-num {
  width:56px;height:56px;border-radius:50%;
  background:var(--card);border:1px solid rgba(56,200,255,.14);
  font-family:var(--T);font-size:1rem;letter-spacing:1px;color:var(--bl);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;position:relative;z-index:1;
  transition:background .35s,box-shadow .35s,transform .35s var(--ease);
}
.passo:hover .passo-num { background:var(--bd);box-shadow:0 0 28px rgba(5,37,232,.5);transform:scale(1.1); }
.passo-titulo { font-family:var(--T);font-size:1rem;letter-spacing:1px;color:var(--wh);margin-bottom:6px;line-height:.88; }
.passo-desc   { font-size:.78rem;color:var(--gr);line-height:1.6; }
@media (max-width:700px) { .grid-processo{flex-direction:column;align-items:center;gap:16px} .grid-processo::before{display:none} .passo{width:100%;max-width:280px} }


/* ════════════════════════════════════════════════════════════════
   CTA
   Fundo completamente diferente — luz radiante central
   Como uma spotlight, cria foco na conversão
════════════════════════════════════════════════════════════════ */
#cta {
  text-align: center;
  position: relative; overflow: hidden; z-index:1;
  padding: var(--py) var(--px);
  /* Fundo estilo "spotlight" — bem diferente do resto */
  background: radial-gradient(
    ellipse 70% 55% at 50% 50%,
    rgba(5,37,232,.18) 0%,
    rgba(4,8,22,.95) 55%,
    var(--bk) 100%
  );
}
/* Borda suave no topo que separa do processo */
#cta::before {
  content: '';
  position: absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg,transparent,rgba(56,200,255,.2) 50%,transparent);
}
/* Partícula decorativa de canto */
#cta::after {
  content: '';
  position: absolute;
  top: 20%; right: 8%;
  width: 180px; height:180px;
  border: 1px solid rgba(56,200,255,.06);
  border-radius: 50%;
  animation: hpulsar 8s ease-in-out infinite;
  pointer-events: none;
}

#cta .h2 { font-size:clamp(2.2rem,5.5vw,4.8rem);position:relative;z-index:1; }
#cta .sub { margin:0 auto 40px;text-align:center;position:relative;z-index:1; }
.cta-botoes { display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1; }
.grid-contato { display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1; }
.card-contato { display:flex;align-items:center;gap:13px;background:rgba(4,8,20,.8);border:1px solid rgba(56,200,255,.1);border-radius:var(--r);padding:14px 20px;transition:border-color .35s,transform .35s var(--ease),box-shadow .35s,background .35s; }
.card-contato:hover { border-color:rgba(56,200,255,.28);transform:translateY(-4px);box-shadow:0 14px 40px rgba(5,37,232,.2);background:rgba(5,12,32,.9); }
.contato-ico { width:38px;height:38px;background:rgba(5,37,232,.2);border-radius:10px;display:flex;align-items:center;justify-content:center; }
.contato-info-nome  { font-weight:700;color:var(--wh);font-size:.85rem; }
.contato-info-email { font-size:.74rem;color:var(--gr); }


/* ================================================================
   MODAL DE MEMBRO DA EQUIPE
   Abre ao clicar no card. Fundo escurecido + caixa centralizada.
================================================================ */
#modal-membro {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
}
#modal-membro.aberto { opacity:1; pointer-events:all; }

.mm-bg {
  position: absolute; inset: 0;
  background: rgba(2,4,13,.85);
  backdrop-filter: blur(14px);
}

.mm-box {
  position: relative; z-index: 1;
  background: var(--card);
  border: 1px solid rgba(56,200,255,.16);
  border-radius: var(--r2);
  padding: 32px;
  max-width: 500px; width: 100%;
  box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(56,200,255,.08);
  transform: translateY(20px);
  transition: transform .4s var(--ease);
}
#modal-membro.aberto .mm-box { transform: translateY(0); }

/* Botão fechar */
.mm-fechar {
  position: absolute; top:16px; right:16px;
  width:32px; height:32px;
  background:rgba(56,200,255,.06); border:1px solid rgba(56,200,255,.12);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:none; color:var(--gr);
  transition: background .3s, color .3s, transform .3s;
}
.mm-fechar:hover { background:rgba(255,55,55,.14); color:#fff; transform:rotate(90deg); }

/* Topo: foto + nome/cargo/tags */
.mm-topo {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 22px;
}
.mm-foto-wrap {
  width: 90px; height: 90px; border-radius: 50%; flex-shrink:0;
  border: 2px solid rgba(56,200,255,.22);
  overflow: hidden; background: var(--nv);
  box-shadow: 0 0 24px rgba(5,37,232,.25);
}
.mm-foto { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }

.mm-topo-info { flex: 1; }
.mm-nome  { font-family:var(--T); font-size:1.7rem; letter-spacing:2px; line-height:.88; color:var(--wh); margin-bottom:6px; }
.mm-cargo { font-size:.62rem; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--bl); margin-bottom:12px; }

/* Tags */
.mm-tags { display:flex; flex-wrap:wrap; gap:6px; }
.mm-tag {
  background: rgba(5,37,232,.2); border:1px solid rgba(56,200,255,.18);
  border-radius:100px; padding:3px 11px;
  font-size:.58rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--bl);
}

/* Linha separadora */
.mm-bio {
  font-size:.87rem; color:var(--gr); line-height:1.85;
  padding-top:18px; margin-top:2px;
  border-top:1px solid rgba(56,200,255,.08);
  margin-bottom:18px;
}

/* Email */
.mm-email {
  display: flex; align-items:center; gap:9px;
  font-size:.8rem; color:var(--gr);
  padding-top:16px; border-top:1px solid rgba(56,200,255,.07);
  transition: color .3s;
}
.mm-email:hover { color:var(--bl); }

@media (max-width:480px) {
  .mm-box { padding:24px 18px; }
  .mm-topo { flex-direction:column; text-align:center; }
  .mm-tags { justify-content:center; }
}