/* DESIGN SYSTEM NAPEL + COMPONENTES REUTILIZÁVEIS
   Cole no <style>. Fontes: <link Archivo+Inter> no <head> (ver hero.html). */

:root{
  --navy-950:#06283d; --navy-900:#082E49; --navy:#0A3C5F; --navy-700:#0F405F;
  --sky:#74A9D7; --sky-700:#2f7cbf; --steel:#7DA4C6; --sky-bg:#EAF3FB;
  --ink:#0c2433; --ink-soft:#33495b; --muted:#62798c; --faint:#93a7b6;
  --bg:#F4F8FB; --card:#fff; --border:#E8EFF4; --border-strong:#D6E4EE;
  --ok:#10B981; --ok-bg:#ECFDF5; --ok-fg:#047857;
  --warn:#F59E0B; --warn-bg:#FEF6E7; --warn-fg:#9a6400;
  --err:#EF4444; --err-bg:#FEF2F2; --err-fg:#c1352f;
  --r:18px; --r-sm:12px;
  --shadow:0 1px 2px rgba(8,46,73,.04),0 10px 26px -14px rgba(8,46,73,.22);
  --shadow-lg:0 24px 60px -22px rgba(8,46,73,.40);
  --ease:cubic-bezier(.16,1,.3,1);
  --font:'Inter',system-ui,sans-serif; --font-d:'Archivo',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.5}
.fd{font-family:var(--font-d);letter-spacing:-.02em}
.tnum{font-variant-numeric:tabular-nums}
::selection{background:var(--sky);color:var(--navy-900)}

/* motivos do hero */
.mesh{background-image:radial-gradient(circle at 16% 24%,rgba(116,169,215,.18),transparent 40%),radial-gradient(circle at 82% 6%,rgba(116,169,215,.12),transparent 38%)}
.dotgrid{background-image:radial-gradient(rgba(116,169,215,.16) 1.1px,transparent 1.1px);background-size:22px 22px}
.accent{background:linear-gradient(120deg,#9fcdf0,#7DA4C6);-webkit-background-clip:text;background-clip:text;color:transparent}

/* header glass (sticky) */
.header{position:sticky;top:0;z-index:50;background:rgba(244,248,251,.85);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.header.scrolled{border-color:var(--border);box-shadow:var(--shadow)}
.nav-link{position:relative}
.nav-link::after{content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--sky-700);transition:width .3s var(--ease);border-radius:2px}
.nav-link:hover::after,.nav-link.active::after{width:100%}

/* card + hover lift */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.lift{transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.lift:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--sky)}

/* KPI */
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow)}
.kpi .lab{font-size:12px;color:var(--muted);font-weight:600}
.kpi .val{font-family:var(--font-d);font-size:27px;font-weight:800;margin:8px 0 4px;color:var(--navy-900)}
.kpi .delta{font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.up{color:var(--ok)}.down{color:var(--err)}.flat{color:var(--muted)}

/* botões */
.btn{border:0;border-radius:11px;padding:11px 18px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;transition:.2s var(--ease)}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 8px 18px -8px rgba(10,60,95,.55)}.btn-primary:hover{background:var(--navy-900);transform:translateY(-1px)}
.btn-ghost{background:#fff;border:1px solid var(--border-strong);color:var(--navy)}.btn-ghost:hover{border-color:var(--sky);background:var(--sky-bg)}
.btn-wa{background:var(--ok);color:#fff;box-shadow:0 8px 18px -6px rgba(16,185,129,.55)}.btn-wa:hover{filter:brightness(1.05);transform:translateY(-1px)}

/* chips / segmented / switch */
.chip{font-size:11px;font-weight:700;padding:4px 11px;border-radius:999px;background:var(--sky-bg);color:var(--sky-700)}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:3px;gap:3px}
.seg button{border:0;background:transparent;padding:7px 14px;border-radius:8px;font-weight:700;font-size:12px;color:var(--muted);cursor:pointer;font-family:inherit}
.seg button.on{background:#fff;color:var(--navy);box-shadow:var(--shadow)}
.switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer;user-select:none}
.switch .tk{width:42px;height:24px;border-radius:999px;background:var(--ok);position:relative;transition:.2s var(--ease);flex:0 0 auto}
.switch .tk::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch.off .tk{background:var(--err)}.switch.off .tk::after{left:21px}

/* inputs */
.inp,textarea{width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:#fff;border:1.5px solid var(--border);border-radius:11px;padding:11px 13px;transition:.18s var(--ease)}
.inp:focus,textarea:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 4px var(--sky-bg)}

/* alerts (ícone SVG, não emoji) */
.alert{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border-radius:var(--r-sm);font-size:13px;line-height:1.5}
.alert .em{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:16px}
.alert.ok{background:var(--ok-bg);color:var(--ok-fg)}.alert.ok .em{background:rgba(16,185,129,.13)}
.alert.warn{background:var(--warn-bg);color:var(--warn-fg)}.alert.warn .em{background:rgba(245,158,11,.16)}
.alert.info{background:var(--sky-bg);color:var(--navy)}.alert.info .em{background:rgba(116,169,215,.22)}
.alert.err{background:var(--err-bg);color:var(--err-fg)}.alert.err .em{background:rgba(239,68,68,.13)}

/* scroll-reveal (par com interactions.js) */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* marquee de logos */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  .marquee-track{animation:none}
}
