/* =========================================================
   Viguma — camada "clean tech"
   Carregada depois de style.css. Para voltar ao visual anterior,
   basta remover o <link> deste arquivo no index.html e no 404.html.
   Hero e diferenciais ficam claros; CTA e rodapé seguem escuros como âncora.
   ========================================================= */

:root{
  --hair:rgba(14,92,118,.12);      /* linha fina de grid */
  --hair-strong:rgba(14,92,118,.22);
  --glow:rgba(59,187,230,.28);
}

/* ---------- botões ---------- */
.btn--primary{
  background:linear-gradient(135deg,var(--cyan-400),var(--cyan-500));
  color:var(--teal-950);
  box-shadow:0 8px 24px rgba(59,187,230,.30),inset 0 1px 0 rgba(255,255,255,.45);
}
.btn--primary:hover{background:linear-gradient(135deg,var(--cyan-300),var(--cyan-400))}
.hero .btn--ghost,.section .btn--ghost{
  color:var(--teal-800);border-color:var(--hair-strong);background:rgba(255,255,255,.6);
}
.hero .btn--ghost:hover{background:#fff;border-color:var(--cyan-500);color:var(--teal-900)}

/* ---------- eyebrow com marcador técnico ---------- */
.eyebrow::before{width:8px;height:8px;border-radius:2px;background:var(--cyan-500);
  box-shadow:0 0 0 4px rgba(59,187,230,.16);transform:rotate(45deg)}

/* ---------- header sobre o hero claro ---------- */
.site-header:not(.is-stuck) .brand__mark--inv{opacity:0}
.site-header:not(.is-stuck) .brand__mark--dark{opacity:1}
.site-header:not(.is-stuck) .brand__text strong{color:var(--teal-900)}
.site-header:not(.is-stuck) .brand__text small{color:var(--ink-mute)}
.site-header:not(.is-stuck) .nav>a:not(.btn){color:var(--ink-soft)}
.site-header:not(.is-stuck) .nav>a:not(.btn):hover{color:var(--teal-800)}
.site-header:not(.is-stuck) .burger span{background:var(--teal-900)}
.site-header.is-stuck{border-bottom-color:var(--hair)}

/* ---------- HERO claro ---------- */
.hero{
  background:
    radial-gradient(60% 70% at 85% 10%,rgba(95,203,240,.22),transparent 70%),
    radial-gradient(50% 60% at 0% 100%,rgba(20,116,143,.10),transparent 70%),
    linear-gradient(180deg,#FFFFFF 0%,var(--bg-tint) 100%);
  color:var(--ink);
}
.hero__grid{
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),
                   linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:56px 56px;
}
.hero__glow{opacity:.35}
.hero__glow--b{display:none}
.hero__title{color:var(--teal-900)}
.hero__title em{background:linear-gradient(94deg,var(--teal-600),var(--cyan-500));
  -webkit-background-clip:text;background-clip:text}
.hero__lead{color:var(--ink-soft)}
.hero__note{color:var(--ink-mute)}
.hero .eyebrow--light{color:var(--teal-600)}

/* painel */
.panel{
  background:rgba(255,255,255,.82);
  border:1px solid var(--hair-strong);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 24px 60px rgba(7,60,78,.14),0 0 0 6px rgba(255,255,255,.5);
}
.panel__top{border-bottom-color:var(--line)}
.panel__label{color:var(--teal-900)}
.panel__dot{background:var(--cyan-500);box-shadow:0 0 0 4px rgba(59,187,230,.2)}
.panel__live{color:var(--teal-700);border-color:var(--hair-strong);background:var(--cyan-100)}
.kpi{background:var(--bg-tint);border-color:var(--line-soft)}
.kpi__v{color:var(--teal-900)}
.kpi__l{color:var(--ink-soft)}
.chart__grid line{stroke:var(--line)}
.panel__foot{border-top-color:var(--line)}
.tag{color:var(--teal-700);background:var(--cyan-100);border-color:transparent}
.scrollcue{border-color:var(--hair-strong)}
.scrollcue span{background:var(--cyan-500)}

/* ---------- números ---------- */
.numeros{background:#fff;border-bottom:1px solid var(--hair)}
.stat+.stat::before{background:linear-gradient(180deg,transparent,var(--hair-strong),transparent)}
.stat__n{background:linear-gradient(180deg,var(--teal-600),var(--teal-900));
  -webkit-background-clip:text;background-clip:text}

/* ---------- seções com malha de pontos ---------- */
.section--tint{
  background:
    radial-gradient(var(--hair) 1px,transparent 1.4px) 0 0/28px 28px,
    var(--bg-tint);
}

/* ---------- cards: borda fina + brilho no hover ---------- */
.card,.svc,.member,.quote{border-color:var(--hair);box-shadow:none}
.card:hover,.svc:hover,.member:hover,.quote:hover{
  border-color:var(--cyan-400);
  box-shadow:0 0 0 4px rgba(59,187,230,.10),0 18px 40px rgba(7,60,78,.10);
}
.svc::before{
  content:'';position:absolute;top:0;left:0;width:28px;height:28px;
  border-top:2px solid var(--cyan-400);border-left:2px solid var(--cyan-400);
  border-top-left-radius:var(--r);opacity:.0;transition:opacity var(--t);
}
.svc:hover::before{opacity:1}
.svc__n{color:var(--cyan-500)}
.chips li{background:var(--cyan-100);color:var(--teal-700)}

/* ---------- diferenciais: de escuro para claro ---------- */
.section--dark{background:#fff;color:var(--ink)}
.section--dark::before{
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),
                   linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:56px 56px;
}
.section--dark .eyebrow--light{color:var(--teal-600)}
.section--dark .h2--light{color:var(--teal-900)}
.section--dark .lead--light{color:var(--ink-soft)}
.section--dark .pillar{
  background:rgba(255,255,255,.9);border-color:var(--hair);
}
.section--dark .pillar:hover{
  background:#fff;border-color:var(--cyan-400);
  box-shadow:0 0 0 4px rgba(59,187,230,.10),0 18px 40px rgba(7,60,78,.10);
}
.section--dark .pillar__n{color:var(--cyan-500)}
.section--dark .pillar h3{color:var(--teal-900)}
.section--dark .pillar p{color:var(--ink-soft)}

/* ---------- processo ---------- */
.steps::before{background:repeating-linear-gradient(90deg,var(--cyan-500) 0 6px,transparent 6px 12px);opacity:.5;height:2px}
.step__n{border-color:var(--cyan-500);box-shadow:0 0 0 6px rgba(59,187,230,.12)}

/* ---------- equipe ---------- */
.member__ava{background:linear-gradient(145deg,var(--teal-700),var(--cyan-500))}

/* ---------- CTA: âncora escura, com malha ---------- */
.cta{
  background:
    radial-gradient(60% 80% at 90% 0%,rgba(59,187,230,.25),transparent 70%),
    linear-gradient(150deg,var(--teal-800),var(--teal-950) 70%);
}
.cta::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(100% 90% at 80% 10%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(100% 90% at 80% 10%,#000,transparent 75%);
}

/* ---------- 404 claro ---------- */
.err{
  color:var(--ink);
  background:
    linear-gradient(var(--hair) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,var(--hair) 1px,transparent 1px) 0 0/56px 56px,
    radial-gradient(60% 70% at 85% 10%,rgba(95,203,240,.22),transparent 70%),
    var(--bg-tint);
}
.err__code{background:linear-gradient(94deg,var(--teal-600),var(--cyan-500));
  -webkit-background-clip:text;background-clip:text}
.err__text{color:var(--ink-soft)}
.err .btn--ghost{color:var(--teal-800);border-color:var(--hair-strong)}