/* =========================================================
   WKELNIOR · BASE DO DIAGNÓSTICO
   Recorte do assets/css/site.css do site principal: só o que o
   formulário e o painel usam (cores, tipografia, botões, cabeçalho,
   fundo de rede e rodapé). Se a marca mudar no site, repita aqui.
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --ink-900:#04080F;
  --ink-850:#070D18;
  --ink-800:#0A1220;
  --ink-750:#0D1727;
  --ink-700:#111D30;

  --line:rgba(150,172,205,.13);
  --line-2:rgba(150,172,205,.24);
  --line-3:rgba(150,172,205,.40);

  --text:#E9EFF8;
  --text-2:#A7B5CB;
  --text-3:#6E8099;

  --accent:#04B2D9;
  --accent-2:#0389AD;
  --accent-3:#045F78;
  --accent-soft:rgba(4,178,217,.11);
  --accent-line:rgba(4,178,217,.32);

  --silver:linear-gradient(135deg,#FFFFFF 0%,#D3DDEB 24%,#8B9BB3 48%,#F0F5FC 70%,#A9B8CD 100%);

  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:28px;

  --pad:clamp(20px,5vw,40px);
  --maxw:1220px;

  --font-display:'Sora','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,sans-serif;

  --rede-forca:.8;

  color-scheme:dark;
}
@media (max-width:760px){
  :root{--rede-forca:.9}
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--text-2);
  background:var(--ink-850);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
[hidden]{display:none!important}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--text);
  line-height:1.14;
  letter-spacing:-.022em;
  margin:0;
  font-weight:600;
  text-wrap:balance;
}
p{margin:0;text-wrap:pretty}
::selection{background:rgba(4,178,217,.3);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ink-900)}
::-webkit-scrollbar-thumb{background:#1E2F49;border-radius:99px;border:3px solid var(--ink-900)}

/* Fundo de rede animado (base.js): canvas fixo atrás de tudo */
.fundo-rede{
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  display:block;
  width:100%;
  height:100vh;
  height:100lvh;
  pointer-events:none;
  opacity:var(--rede-forca,.8);
}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-display);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}

.metal{
  background:var(--silver);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 26px;
  border-radius:99px;
  border:1px solid var(--line-2);
  background:transparent;
  font-family:var(--font-display);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--text);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s,background-color .28s;
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{
  border-color:transparent;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
  color:#fff;
  box-shadow:0 10px 30px -12px rgba(4,178,217,.75);
}
.btn--primary::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.34) 48%,transparent 62%);
  transform:translateX(-130%);
  transition:transform .75s cubic-bezier(.2,.7,.3,1);
}
.btn--primary:hover::after{transform:translateX(130%)}
.btn--primary:hover{box-shadow:0 18px 44px -14px rgba(4,178,217,.9)}
.btn--ghost{background:rgba(255,255,255,.035);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn--ghost:hover{border-color:var(--line-3);background:rgba(255,255,255,.075)}
.btn--wa{
  border-color:transparent;
  background:linear-gradient(135deg,#2BC468 0%,#12924A 100%);
  color:#fff;
  box-shadow:0 10px 30px -12px rgba(43,196,104,.7);
}
.btn--wa:hover{box-shadow:0 18px 44px -14px rgba(43,196,104,.85)}
.btn--sm{padding:10px 19px;font-size:13.5px}
.btn--lg{padding:17px 34px;font-size:15.5px}

/* ---------- Cabeçalho ---------- */
.header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:900;
  transition:background-color .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:rgba(7,13,24,.82);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom-color:var(--line);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:22px;height:74px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand__mark{
  width:40px;
  height:40px;
  border-radius:50%;
  box-shadow:0 0 0 1px var(--line-2),0 6px 18px -6px rgba(0,0,0,.9);
  transition:box-shadow .3s,transform .3s;
}
.brand:hover .brand__mark{box-shadow:0 0 0 1px var(--accent-line),0 8px 26px -6px rgba(4,178,217,.55);transform:scale(1.04)}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__name{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:.01em;color:var(--text)}
.brand__tag{font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--text-3);font-weight:500}
.voltar-site{
  display:inline-flex;
  align-items:center;
  padding:9px 16px;
  border-radius:99px;
  border:1px solid var(--line-2);
  font-size:13.5px;
  font-weight:600;
  color:var(--text-2);
  transition:border-color .2s,color .2s;
}
.voltar-site:hover{border-color:var(--accent-line);color:var(--text)}

/* ---------- Rodapé ---------- */
.footer{position:relative}
.footer__bottom{
  display:flex;
  flex-wrap:wrap;
  gap:12px 20px;
  align-items:center;
  justify-content:space-between;
  font-size:12.8px;
  color:var(--text-3);
}
.footer__bottom a:hover{color:var(--text)}

/* ---------- Campos (entrada do painel) ---------- */
.campo{display:flex;flex-direction:column;gap:7px;margin:0 0 16px;padding:0;border:0;min-width:0}
.campo > span{font-size:13.5px;font-weight:600;color:var(--text)}
.campo input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line-2);
  background:rgba(4,8,15,.7);
  font:inherit;
  font-size:16px;
  color:var(--text);
}
.campo input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(4,178,217,.2)}

/* Isca para robôs: fora da tela, pessoa de verdade não vê */
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:700px){
  .brand__tag{display:none}
  .footer__bottom{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .btn,.btn--primary::after{transition:none}
}