/* ==========================================================================
   KWC INDUSTRIAL TECH - CORES E EFEITOS NOS CARDS
   Mesma técnica do Painel ADM KWC: barra de 3px no topo + mancha (circulo
   desfocado) no canto superior direito, uma cor por card em ciclo.
   ========================================================================== */

:root{
  --c-1:#39FF6A;  --c-1b:#16A34A;   /* verde da marca KWC */
  --c-2:#22D3EE;  --c-2b:#4D9FFF;   /* ciano  */
  --c-3:#4D9FFF;  --c-3b:#A78BFA;   /* azul   */
  --c-4:#A78BFA;  --c-4b:#F472B6;   /* roxo   */
  --c-5:#F472B6;  --c-5b:#FF4D5E;   /* rosa   */
  --c-6:#FFB020;  --c-6b:#FF8A3D;   /* ambar  */
}

/* ------------------------------------------------------------ base do card */
.card,.sys,.prc,.dest,.av-card,.stat-item,.acesso__cartao{
  position:relative;overflow:hidden;
  transition:transform .35s var(--e),border-color .35s var(--e),box-shadow .35s var(--e);
}

/* MANCHA: circulo desfocado no canto superior direito (como no painel) */
.card::before,.sys::before,.prc::before,.dest::before,.stat-item::before{
  content:"";position:absolute;right:-26px;top:-26px;
  width:88px;height:88px;border-radius:50%;
  background:var(--cc-g);filter:blur(6px);pointer-events:none;z-index:0;
  transition:transform .45s var(--e),filter .45s var(--e);
}

/* BARRA: 3px no topo, num degrade entre duas cores */
.card::after,.prc::after,.stat-item::after{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--cc),var(--cc-b));
}
.card > *,.sys > *,.prc > *,.dest > *{position:relative;z-index:2}

/* --------------------------------------------------- ciclo de cores por card */
.card,.sys,.prc,.dest,.av-card,.stat-item,.acesso__cartao{
  --cc:var(--c-1);--cc-b:var(--c-1b);--cc-g:rgba(57,255,106,.15);
}
/* a cor precisa ser setada NO card: .card declara --cc em si mesmo,
   e declaracao propria sempre ganha da heranca do wrapper .brk */
.g3 > :nth-child(6n+1),.g4 > :nth-child(6n+1),
.cards > :nth-child(6n+1),
.g3 > :nth-child(6n+1) > .card,.g4 > :nth-child(6n+1) > .card,
.cards > :nth-child(6n+1) > .card{--cc:var(--c-1);--cc-b:var(--c-1b);--cc-g:rgba(57,255,106,.15)}
.g3 > :nth-child(6n+2),.g4 > :nth-child(6n+2),
.cards > :nth-child(6n+2),
.g3 > :nth-child(6n+2) > .card,.g4 > :nth-child(6n+2) > .card,
.cards > :nth-child(6n+2) > .card{--cc:var(--c-6);--cc-b:var(--c-6b);--cc-g:rgba(255,176,32,.15)}
.g3 > :nth-child(6n+3),.g4 > :nth-child(6n+3),
.cards > :nth-child(6n+3),
.g3 > :nth-child(6n+3) > .card,.g4 > :nth-child(6n+3) > .card,
.cards > :nth-child(6n+3) > .card{--cc:var(--c-3);--cc-b:var(--c-3b);--cc-g:rgba(77,159,255,.16)}
.g3 > :nth-child(6n+4),.g4 > :nth-child(6n+4),
.cards > :nth-child(6n+4),
.g3 > :nth-child(6n+4) > .card,.g4 > :nth-child(6n+4) > .card,
.cards > :nth-child(6n+4) > .card{--cc:var(--c-4);--cc-b:var(--c-4b);--cc-g:rgba(167,139,250,.15)}
.g3 > :nth-child(6n+5),.g4 > :nth-child(6n+5),
.cards > :nth-child(6n+5),
.g3 > :nth-child(6n+5) > .card,.g4 > :nth-child(6n+5) > .card,
.cards > :nth-child(6n+5) > .card{--cc:var(--c-5);--cc-b:var(--c-5b);--cc-g:rgba(244,114,182,.15)}
.g3 > :nth-child(6n+6),.g4 > :nth-child(6n+6),
.cards > :nth-child(6n+6),
.g3 > :nth-child(6n+6) > .card,.g4 > :nth-child(6n+6) > .card,
.cards > :nth-child(6n+6) > .card{--cc:var(--c-2);--cc-b:var(--c-2b);--cc-g:rgba(34,211,238,.14)}

/* ------------------------------------------------------------- no hover */
.card:hover::before,.sys:hover::before,.prc:hover::before,
.dest:hover::before,.stat-item:hover::before{
  transform:scale(1.5);filter:blur(10px);
}
.card:hover,.prc:hover,.stat-item:hover{
  transform:translateY(-7px);
  border-color:var(--cc) !important;
  box-shadow:0 24px 52px -26px var(--cc),0 0 0 1px var(--cc-g) !important;
}
.sys:hover,.dest:hover{
  transform:translateY(-7px);
  border-color:var(--cc) !important;
  box-shadow:0 24px 52px -26px var(--cc),0 0 0 1px var(--cc-g) !important;
}

/* ------------------------------------------------- etiqueta numerada com cor */
.card__i{
  color:var(--cc) !important;
  background:linear-gradient(135deg,var(--cc-g),transparent) !important;
  border:1px solid var(--cc) !important;
  transition:transform .35s var(--e),box-shadow .35s var(--e);
}
.card:hover .card__i{
  transform:scale(1.07) rotate(-4deg);
  box-shadow:0 0 22px -6px var(--cc) !important;
}

/* --------------------------------------- titulo, icones e chips na cor do card */
.card h4{transition:color .3s var(--e)}
.card:hover h4{color:var(--cc) !important}
.card:hover .checks svg{stroke:var(--cc) !important}
.chips span{transition:.3s var(--e)}
.card:hover .chips span{
  border-color:var(--cc) !important;color:var(--cc) !important;background:var(--cc-g) !important;
}

/* ------------------------------------------------- cartoes de sistema */
.sys{--cc:var(--c-1);--cc-b:var(--c-1b);--cc-g:rgba(57,255,106,.15)}
#mechanical{--cc:var(--c-3);--cc-b:var(--c-3b);--cc-g:rgba(77,159,255,.16)}
.sys:hover .checks svg{stroke:var(--cc) !important}
.sys__b{
  background:linear-gradient(135deg,var(--cc-g),transparent) !important;
  border:1px solid var(--cc) !important;color:var(--cc) !important;
}
.sys .chips span:hover{border-color:var(--cc) !important;color:var(--cc) !important}

/* --------------------------------- seletor de sistema e cards de destino */
.acesso__sel .app{--cc:var(--c-2);--cc-b:var(--c-2b);--cc-g:rgba(34,211,238,.14)}
.acesso__sel .app[data-sys="axon"]{--cc:var(--c-1);--cc-b:var(--c-1b);--cc-g:rgba(57,255,106,.15)}
.acesso__sel .app[data-sys="pulse"]{--cc:var(--c-3);--cc-b:var(--c-3b);--cc-g:rgba(77,159,255,.16)}
.acesso__sel .app:hover{box-shadow:0 24px 52px -26px var(--cc) !important}
.acesso__sel .app:hover .app__t{color:var(--cc) !important}
.acesso__lista svg{stroke:var(--cc) !important}
.acesso__rot{color:var(--cc) !important}

.dest{--cc:var(--c-4);--cc-b:var(--c-4b);--cc-g:rgba(167,139,250,.15)}
.dest:nth-of-type(1){--cc:var(--c-1);--cc-b:var(--c-1b);--cc-g:rgba(57,255,106,.15)}
.dest:nth-of-type(2){--cc:var(--c-3);--cc-b:var(--c-3b);--cc-g:rgba(77,159,255,.16)}
.dest:nth-of-type(3){--cc:var(--c-4);--cc-b:var(--c-4b);--cc-g:rgba(167,139,250,.15)}
.dest:nth-of-type(4){--cc:var(--c-5);--cc-b:var(--c-5b);--cc-g:rgba(244,114,182,.15)}
.dest:hover{box-shadow:0 24px 52px -26px var(--cc) !important}
.dest__tag{
  color:var(--cc) !important;border-color:var(--cc) !important;background:var(--cc-g) !important;
}
.dest:hover .dest__t{color:var(--cc) !important}
.dest__t{transition:color .3s var(--e)}

/* --------------------------------------------------------- efeitos de fundo */
body{
  background-image:
    radial-gradient(1000px 560px at 8% -6%,rgba(57,255,106,.085),transparent 62%),
    radial-gradient(860px 520px at 26% 4%,rgba(34,211,238,.075),transparent 62%),
    radial-gradient(880px 540px at 62% -4%,rgba(77,159,255,.07),transparent 60%),
    radial-gradient(820px 560px at 92% 8%,rgba(167,139,250,.075),transparent 60%),
    radial-gradient(900px 620px at 78% 46%,rgba(244,114,182,.05),transparent 62%),
    radial-gradient(820px 620px at 18% 62%,rgba(255,176,32,.045),transparent 62%),
    linear-gradient(var(--mesh) 1px,transparent 1px),
    linear-gradient(90deg,var(--mesh) 1px,transparent 1px);
  background-size:auto,auto,auto,auto,auto,auto,58px 58px,58px 58px;
  background-attachment:fixed;
}
body::after{
  background:
    linear-gradient(to bottom,transparent 60%,var(--bg) 100%),
    linear-gradient(105deg,transparent 38%,rgba(57,255,106,.05) 48%,rgba(34,211,238,.06) 52%,transparent 62%);
  background-size:100% 100%,220% 100%;
  background-repeat:no-repeat;
  animation:varredura 26s linear infinite;
}
@keyframes varredura{
  0%{background-position:0 0,-120% 0}
  100%{background-position:0 0,220% 0}
}
@media (prefers-reduced-motion:reduce){ body::after{animation:none} }

/* brilho colorido nos blocos de topo e de chamada */
.phead,.decl{position:relative;overflow:hidden}
.phead::before,.decl::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 300px at 50% -30%,rgba(34,211,238,.10),transparent 68%);
}
.decl::before{background:radial-gradient(760px 300px at 50% -30%,rgba(57,255,106,.10),transparent 68%)}

.btn:hover{box-shadow:0 22px 50px -18px rgba(34,211,238,.45)}
.btn--o:hover{box-shadow:0 14px 34px -18px rgba(167,139,250,.5)}

body > .kwc-fita{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:95;pointer-events:none;
  background:linear-gradient(90deg,var(--c-1),var(--c-2),var(--c-3),var(--c-4),var(--c-5),var(--c-6));
  opacity:.85;
}

/* ==========================================================================
   MENU SUPERIOR — mais presença e navegação mais clara
   ========================================================================== */

.nav{
  min-height:var(--nav);
  background:linear-gradient(180deg,rgba(14,16,20,.94),rgba(10,10,10,.86)) !important;
  border-bottom:1px solid var(--line-2) !important;
  box-shadow:0 14px 40px -26px rgba(0,0,0,.9) !important;
}
.nav .w{gap:26px}

/* faixa de luz verde bem suave logo abaixo da barra */
.nav::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--grn) 22%,rgba(34,211,238,.55) 55%,transparent);
  opacity:.5;pointer-events:none;
}

/* logo maior */
.brand img{height:66px}
.nav .brand{align-self:center}

/* ------------------------------------------------------------- links do menu */
.menu{gap:4px}
.menu a{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:12px 17px;border-radius:9px;
  font-family:var(--ff-display);font-size:14px;font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;color:var(--ink-2);
  transition:color .22s var(--e),background .22s var(--e),transform .22s var(--e);
}
.menu a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:5px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,var(--grn),rgba(34,211,238,.8));
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e);
}
.menu a:hover{
  color:var(--ink);background:var(--grn-a);transform:translateY(-1px);
}
.menu a:hover::after{transform:scaleX(1)}
.menu a.on{
  color:var(--grn);background:rgba(57,255,106,.10);
  box-shadow:inset 0 0 0 1px rgba(57,255,106,.22);
}
.menu a.on::after{transform:scaleX(1)}

/* ------------------------------------------------ botao de acesso a sistemas */
.nav__r{gap:12px;margin-left:auto}
.nav-acesso{
  padding:12px 20px !important;font-size:12.5px;letter-spacing:.09em;
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
}
.nav-acesso svg{width:17px;height:17px;stroke-width:2.1}
.nav-acesso:hover{box-shadow:0 18px 40px -18px rgba(57,255,106,.65) !important}

/* alternador de tema e burger um pouco maiores */
.tgl{width:42px;height:42px}
.burger{width:44px;height:42px}

/* --------------------------------------------------------------- responsivo */
@media(max-width:1180px){
  .menu a{font-size:13px;padding:10px 12px;letter-spacing:.07em}
  }
@media(max-width:880px){
  .brand img{height:52px}
  .nav-acesso span{display:none}
  .nav-acesso{padding:12px !important}
}
@media(max-width:640px){
  .nav-acesso{display:none}
}

/* os dois cards de "Quem somos" lado a lado: o ciclo de 6 nao os
   diferencia, entao o segundo usa a cor azul (mesma do Pulse) */
#tecnologia{
  --cc:var(--c-3);--cc-b:var(--c-3b);--cc-g:rgba(77,159,255,.17);
}
#tecnologia .sys__b{color:var(--c-3);border-color:color-mix(in srgb,var(--c-3) 45%,transparent)}
#tecnologia:hover{border-color:var(--c-3) !important;box-shadow:0 24px 52px -26px var(--c-3) !important}

/* ==========================================================================
   APRESENTACAO DA HOME (aba Inicio)
   Mais forte e mais colorida: slogan da KWC, titulo em degrade da marca,
   brilhos radiais no fundo e numeros coloridos um a um.
   ========================================================================== */

/* linha de apoio acima do titulo */
.hero__rot{
  margin:0 0 clamp(16px,2.2vw,24px);
  font-family:var(--ff-display);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-1);
}
.hero__rot span{
  font-weight:500;
  letter-spacing:.1em;
  color:var(--ink-3);
  text-transform:none;
}

/* slogan da KWC vira o proprio titulo: 3 linhas, com a parte colorida */
.hero h1.h-xl{
  font-size:clamp(31px,5vw,62px);
  line-height:1.04;
  letter-spacing:-.028em;
  margin-bottom:0;
}
.hero h1 em{
  font-style:normal;
  white-space:nowrap;
  background:linear-gradient(96deg,var(--c-1) 0%,var(--c-2) 55%,var(--c-3) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 32px rgba(57,255,106,.26));
}

/* segundo bloco de texto, mais discreto */
.hero__sub--2{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:17px;
  color:var(--ink-3);
}
.hero__sub--2 b{color:var(--ink-2);font-weight:600}

/* brilhos radiais no fundo da apresentacao, como no painel KWC */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 8% -6%, rgba(57,255,106,.13), transparent 62%),
    radial-gradient(760px 460px at 96% 4%, rgba(77,159,255,.12), transparent 60%),
    radial-gradient(700px 480px at 52% 116%, rgba(167,139,250,.09), transparent 60%);
}
.hero .w{position:relative;z-index:1}

/* numeros: um card colorido por numero */
.nums div{
  position:relative;overflow:hidden;
  background:var(--bg);
  --cc:var(--c-1);--cc-b:var(--c-1b);--cc-g:rgba(57,255,106,.16);
}
.nums div::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--cc),var(--cc-b));
}
.nums div::after{
  content:"";position:absolute;right:-30px;top:-30px;
  width:110px;height:110px;border-radius:50%;
  background:var(--cc-g);filter:blur(7px);pointer-events:none;
}
.nums b{color:var(--cc);text-shadow:0 0 34px var(--cc-g)}
.nums > div:nth-child(1){--cc:var(--c-1);--cc-b:var(--c-1b);--cc-g:rgba(57,255,106,.16)}
.nums > div:nth-child(2){--cc:var(--c-6);--cc-b:var(--c-6b);--cc-g:rgba(255,176,32,.16)}
.nums > div:nth-child(3){--cc:var(--c-3);--cc-b:var(--c-3b);--cc-g:rgba(77,159,255,.17)}
.nums > div:nth-child(4){--cc:var(--c-4);--cc-b:var(--c-4b);--cc-g:rgba(167,139,250,.16)}
.nums b,.nums span{position:relative;z-index:1}

@media (max-width:640px){
  .hero h1.h-xl{ font-size:clamp(25px,6.8vw,34px); }
  .hero__rot{ font-size:9.5px; letter-spacing:.12em; }
  .hero__rot span{ display:block; margin-top:2px; }
  .hero h1 em{ white-space:normal; }
}

/* ==========================================================================
   CARDS COM THUMB (pagina Projetos) - mesma identidade colorida
   dos cards de ecossistema: cada card com a sua cor, mancha,
   barra superior, etiqueta e hover na cor.
   ========================================================================== */
/* a mancha aparece no canto inferior, acima do thumb */
.card--t::before{
  right:auto;top:auto;left:-24px;bottom:-24px;
  width:104px;height:104px;
}

/* o thumb herda a cor do card */
.thumb{
  background:
    linear-gradient(var(--mesh) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg,var(--mesh) 1px,transparent 1px) 0 0/22px 22px,
    var(--surf-2);
  border-bottom:1px solid var(--line);
}
.thumb::after{background:radial-gradient(60% 70% at 50% 118%,var(--cc-g),transparent 70%)}
.thumb svg *{stroke:var(--cc) !important;transition:stroke .3s var(--e)}
.thumb svg .fl{fill:var(--cc) !important}
.thumb__t{
  background:rgba(10,10,10,.72);border-color:var(--cc);color:var(--cc);
}

/* etiqueta numerada no card com thumb */
.card--t .card__i{
  color:var(--cc) !important;
  background:linear-gradient(135deg,var(--cc-g),transparent) !important;
  border:1px solid var(--cc) !important;
  box-shadow:0 0 20px -6px var(--cc) !important;
}
.card--t .card__tag{
  color:var(--cc) !important;border-color:var(--cc) !important;
  background:var(--cc-g) !important;
}
.card--t:hover h4{color:var(--cc) !important}
.card--t:hover{border-color:var(--cc) !important}
.card--t .chips span:hover{
  border-color:var(--cc) !important;color:var(--cc) !important;
}