/* ==========================================================
   NexGuard 2.0 — paleta e tipografia do manual de identidade
   Azul profundo #06142B · Azul elétrico #087CFF
   Ciano tecnológico #00D8F5 · Cinza metálico #B8C7D9
   ========================================================== */
:root{
  color-scheme:light;
  --navy:#06142B;
  --electric:#087CFF;
  --cyan:#00D8F5;
  --metal:#B8C7D9;
  --signal:#087CFF;
  --bg:#FFFFFF;
  --tint:#F3F6FB;
  --tint-strong:#E6EEF9;
  --surface:#FFFFFF;
  --ink:#06142B;
  --ink-2:#45566E;
  --ink-3:#5E728B;
  --line:#DCE4EF;
  --brand:#06142B;
  --brand-hover:#0B2146;
  --on-brand:#FFFFFF;
  --accent:#0064D6;
  --grad-a:#06142B;
  --grad-b:#087CFF;
  --tile-bg:#E6F1FF;
  --tile-ink:#0062D1;
  --plate-line:#CFDBEA;
  --band:#06142B;
  --band-2:#0B2146;
  --state-ok:#00AFF9;
  --state-part:#E3A008;
  --state-no:#D64545;
  --state-empty:#DFE7F2;
  --error:#B42318;
  --shadow-sm:0 1px 2px rgba(6,20,43,.05), 0 6px 18px rgba(6,20,43,.06);
  --shadow-md:0 2px 4px rgba(6,20,43,.05), 0 16px 40px rgba(6,20,43,.12);
  --display:'Inter', system-ui, sans-serif;
  --body:'Inter', system-ui, sans-serif;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --gutter:clamp(16px, 4vw, 40px);
  --header-h:76px;
}

/* Tema escuro: segue o sistema, a menos que a pessoa escolha outro. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --signal:#00D8F5;
    --bg:#06142B;
    --tint:#091A36;
    --tint-strong:#0D2750;
    --surface:#0B2146;
    --ink:#F4F7FB;
    --ink-2:#B8C7D9;
    --ink-3:#94A7BD;
    --line:#173963;
    --brand:#00D8F5;
    --brand-hover:#4CE4F8;
    --on-brand:#06142B;
    --accent:#3FDDF6;
    --grad-a:#00D8F5;
    --grad-b:#087CFF;
    --tile-bg:#0F2E5A;
    --tile-ink:#3FDDF6;
    --plate-line:#1E4372;
    --band:#0B2146;
    --band-2:#0F2C5C;
    --state-ok:#00AFF9;
    --state-empty:#173963;
    --error:#FF9C94;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
    --shadow-md:0 2px 4px rgba(0,0,0,.3), 0 18px 44px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --signal:#00D8F5;
  --bg:#06142B;
  --tint:#091A36;
  --tint-strong:#0D2750;
  --surface:#0B2146;
  --ink:#F4F7FB;
  --ink-2:#B8C7D9;
  --ink-3:#94A7BD;
  --line:#173963;
  --brand:#00D8F5;
  --brand-hover:#4CE4F8;
  --on-brand:#06142B;
  --accent:#3FDDF6;
  --grad-a:#00D8F5;
  --grad-b:#087CFF;
  --tile-bg:#0F2E5A;
  --tile-ink:#3FDDF6;
  --plate-line:#1E4372;
  --band:#0B2146;
  --band-2:#0F2C5C;
  --state-ok:#00AFF9;
  --state-empty:#173963;
  --error:#FF9C94;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
  --shadow-md:0 2px 4px rgba(0,0,0,.3), 0 18px 44px rgba(0,0,0,.45);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.6 var(--body); -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3,p,ul,ol{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img,svg{ display:block; }
img{ max-width:100%; height:auto; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3{ font-family:var(--display); text-wrap:balance; }
p{ text-wrap:pretty; }
h2{ font-size:clamp(30px, 3.5vw, 46px); line-height:1.1; font-weight:700; letter-spacing:-.028em; }
h3{ font-size:20px; line-height:1.25; font-weight:600; letter-spacing:-.012em; }
::selection{ background:var(--cyan); color:var(--navy); }
:focus-visible{ outline:3px solid var(--signal); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--gutter); }
.icon{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip{ position:fixed; left:16px; top:-60px; z-index:200; padding:10px 16px; border-radius:var(--r-sm); background:var(--navy); color:#fff; font-weight:600; }
.skip:focus{ top:12px; }

.grad{
  background:linear-gradient(95deg, var(--grad-a) 5%, var(--grad-b) 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-bottom:.08em; -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.eyebrow{
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
  font:600 12px/1.3 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.eyebrow::before{ content:''; width:26px; height:2px; border-radius:2px; background:currentColor; }
.eyebrow-light{ color:var(--cyan); }
.lead{ color:var(--ink-2); font-size:18px; margin-top:20px; max-width:56ch; }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 18px; border:1px solid transparent; border-radius:var(--r-sm);
  font:600 15px/1.25 var(--body); text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn .icon{ width:16px; height:16px; transition:transform .2s; }
.btn:hover .icon{ transform:translate(2px,-1px); }
.btn:active{ transform:translateY(1px); }
.btn-lg{ padding:15px 22px; font-size:16px; }
.btn-block{ width:100%; }
.btn-primary{ background:var(--brand); color:var(--on-brand); box-shadow:0 8px 20px -10px rgba(6,20,43,.6); }
.btn-primary:hover{ background:var(--brand-hover); }
.btn-quiet{ color:var(--ink); padding-inline:10px; }
.btn-quiet:hover{ color:var(--accent); }
.btn-outline{ border-color:var(--line); background:var(--surface); color:var(--ink); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); }
.link-arrow{
  display:inline-flex; align-items:center; gap:10px; margin-top:28px;
  font-weight:600; font-size:15px; text-decoration:none; color:var(--ink);
}
.link-arrow .icon{ transition:transform .2s; }
.link-arrow:hover{ color:var(--accent); }
.link-arrow:hover .icon{ transform:translateX(4px); }

/* ---------- Barra superior ---------- */
.topbar{ background:var(--navy); color:var(--metal); font-size:13px; border-bottom:1px solid rgba(255,255,255,.08); }
.topbar-inner{ display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:36px; }
.topbar-note{ display:inline-flex; align-items:center; gap:10px; }
.topbar-links{ display:inline-flex; align-items:center; gap:24px; }
.topbar-links > *{ display:inline-flex; align-items:center; gap:7px; }
.topbar-links .icon{ width:15px; height:15px; }
.topbar a{ text-decoration:none; }
.topbar a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.live-dot{ position:relative; width:7px; height:7px; flex:none; border-radius:50%; background:var(--cyan); }
.live-dot::after{
  content:''; position:absolute; inset:0; border-radius:50%; background:inherit;
  animation:ping 2.6s ease-out infinite;
}
@keyframes ping{ 0%{ transform:scale(1); opacity:.7; } 80%,100%{ transform:scale(3.2); opacity:0; } }

/* ---------- Cabeçalho ---------- */
.site-header{
  position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s;
}
.site-header.is-stuck{ border-color:var(--line); box-shadow:0 8px 24px -20px rgba(6,20,43,.5); }
.header-inner{ display:flex; align-items:center; gap:28px; min-height:var(--header-h); }
.brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
.brand-logo{ width:236px; max-width:none; height:auto; margin-left:-12px; }
/* Cada tema usa a versão oficial do logo feita para aquele fundo. */
.logo-on-dark{ display:none; }
html.is-dark .logo-on-light{ display:none; }
html.is-dark .logo-on-dark{ display:block; }
@media (prefers-color-scheme: dark){
  html:not(.js) .logo-on-light{ display:none; }
  html:not(.js) .logo-on-dark{ display:block; }
}
.nav{ display:flex; align-items:center; gap:clamp(16px, 2.2vw, 30px); margin-left:auto; }
.nav a:not(.btn){
  position:relative; padding:8px 0; color:var(--ink-2); font-size:15px; font-weight:500; text-decoration:none; transition:color .2s;
}
.nav a:not(.btn):hover,.nav a[aria-current="true"]{ color:var(--ink); }
.nav a:not(.btn)::after{
  content:''; position:absolute; left:0; right:0; bottom:2px; height:2px; border-radius:2px;
  background:var(--signal); transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.nav a:not(.btn):hover::after,.nav a[aria-current="true"]::after{ transform:scaleX(1); }
.nav-cta{ display:none; }
.header-actions{ display:flex; align-items:center; gap:12px; flex:none; }
.icon-btn{
  display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:50%;
  background:var(--surface); color:var(--ink); cursor:pointer; transition:border-color .2s, color .2s;
}
.icon-btn:hover{ border-color:var(--accent); color:var(--accent); }
.theme-sun{ display:none; }
html.is-dark .theme-sun{ display:block; }
html.is-dark .theme-moon{ display:none; }
.menu-btn{ display:none; }
.menu-close{ display:none; }
.menu-btn[aria-expanded="true"] .menu-close{ display:block; }
.menu-btn[aria-expanded="true"] .menu-open{ display:none; }

/* ---------- Herói ---------- */
.hero{
  position:relative; overflow:hidden; padding-top:clamp(24px, 4vw, 52px);
  background:
    radial-gradient(760px 520px at 82% 34%, color-mix(in srgb, var(--signal) 15%, transparent), transparent 70%),
    radial-gradient(620px 420px at 58% 96%, color-mix(in srgb, var(--grad-a) 8%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg), var(--tint));
}
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); align-items:center; gap:clamp(20px, 3vw, 44px); }
.hero h1{ font-size:clamp(40px, 4.7vw, 62px); line-height:1.05; font-weight:700; letter-spacing:-.036em; }
.hero h1 span{ display:block; }
.hero-lead{ margin-top:24px; max-width:50ch; color:var(--ink-2); font-size:clamp(18px, 1.5vw, 20px); line-height:1.55; }
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:32px; }
.hero-notes{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:22px; color:var(--ink-3); font-size:14px; }
.hero-notes li{ display:flex; align-items:center; gap:8px; }
.hero-notes .icon{ color:var(--accent); width:16px; height:16px; }

.stage{ position:relative; width:100%; max-width:600px; aspect-ratio:1; margin-inline:auto; }
.stage-visual{ position:absolute; inset:0; }
.stage-art{ position:relative; width:100%; height:100%; overflow:visible; }
.disc{ fill:var(--surface); stroke:var(--line); stroke-width:1; filter:drop-shadow(0 18px 34px rgba(6,20,43,.12)); }
.stage-mark{ position:absolute; left:50%; top:50%; width:58%; aspect-ratio:1; transform:translate(-50%,-50%) translate(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 10px)); transition:transform .35s ease-out; }
.stage-logo,.mark-fx{ position:absolute; inset:0; width:100%; height:100%; }
.rings circle{ stroke:var(--plate-line); stroke-width:1; }
.trace{ stroke:var(--plate-line); stroke-width:1.5; transition:stroke .3s; }
.pulse{ stroke:var(--signal); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:14 86; stroke-dashoffset:100; opacity:.4; animation:flow 2.4s linear infinite; transition:opacity .3s; }
[data-trace="1"] .pulse{ animation-delay:.8s; }
[data-trace="2"] .pulse{ animation-delay:1.6s; }
.term{ fill:var(--bg); stroke:var(--plate-line); stroke-width:1.5; transition:stroke .3s; }
[data-trace].is-active .trace{ stroke:var(--signal); }
[data-trace].is-active .term{ stroke:var(--signal); }
[data-trace].is-active .pulse{ opacity:1; }
@keyframes flow{ to{ stroke-dashoffset:0; } }

.float-card{
  position:absolute; display:flex; align-items:center; gap:12px; width:clamp(198px, 37%, 226px); padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--shadow-md);
  transform:translate3d(calc(var(--mx, 0) * -7px), calc(var(--my, 0) * -7px), 0) translateY(var(--lift, 0px));
  transition:border-color .3s, transform .35s ease-out;
  animation:cardIn .6s cubic-bezier(.2,.7,.2,1) var(--d, 0s) backwards, cardFloat var(--float, 7s) ease-in-out calc(var(--d, 0s) + .6s) infinite;
}
.float-card small{ display:block; margin-bottom:2px; font:500 10.5px/1.2 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.float-card b{ display:block; font-weight:600; font-size:14px; line-height:1.28; color:var(--ink); }
.fc-icon{ display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:10px; background:var(--tile-bg); color:var(--tile-ink); }
.float-card.is-active{ border-color:var(--signal); --lift:-3px; }
.fc-a{ left:7%; top:8%; --d:.5s; --float:7s; }
.fc-b{ right:-2%; top:58%; --d:.7s; --float:8.500s; }
.fc-c{ left:0; top:77%; --d:.9s; --float:6.500s; }
.stage-status{
  position:absolute; right:0; bottom:9%; display:flex; align-items:center; gap:9px; max-width:190px;
  font-size:13px; line-height:1.3; color:var(--ink-2);
}

.strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:clamp(12px,2vw,24px); padding-block:24px;
  border-top:1px solid var(--line);
  font:500 12px/1.4 var(--body); letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2);
}
.strip li{ display:flex; align-items:center; gap:12px; justify-content:center; }
.strip li:first-child{ justify-content:flex-start; }
.strip li:last-child{ justify-content:flex-end; }
.strip li::before{ content:''; width:9px; height:9px; flex:none; border:2px solid var(--signal); border-radius:50%; }

/* ---------- Seções ---------- */
.section{ padding-block:clamp(72px, 9vw, 124px); }
.section-tint{ background:var(--tint); }
.section-flush{ padding-top:0; }
.section-head{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:24px 56px; align-items:end; margin-bottom:36px; }
.section-head .lead{ margin-top:0; font-size:17px; }

/* ---------- Sobre ---------- */
.about-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px, 7vw, 96px); align-items:center; }
.pillars li{ display:flex; gap:20px; padding-block:26px; border-top:1px solid var(--line); }
.pillars li:last-child{ border-bottom:1px solid var(--line); }
.pillars p{ margin-top:6px; color:var(--ink-2); font-size:16px; }
.tile{ display:grid; place-items:center; width:48px; height:48px; flex:none; border-radius:13px; background:var(--tile-bg); color:var(--tile-ink); }
.tile .icon{ width:24px; height:24px; }

/* ---------- Soluções ---------- */
.filter{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:26px; }
.filter-label{ margin-right:8px; font-size:15px; font-weight:500; color:var(--ink-2); }
.chip{
  padding:9px 16px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink);
  font-size:14.5px; font-weight:500; cursor:pointer; transition:background-color .2s, color .2s, border-color .2s;
}
.chip:hover{ border-color:var(--accent); }
.chip[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.card{
  display:flex; flex-direction:column; padding:28px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface); box-shadow:var(--shadow-sm); transition:opacity .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.card h3{ margin-top:22px; }
.card p{ flex:1; margin-top:10px; color:var(--ink-2); font-size:16px; }
.card:hover{ border-color:var(--signal); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.card.is-dim{ opacity:.38; box-shadow:none; }
.card.is-dim:hover,.card.is-dim:focus-within{ opacity:1; }
.card-link{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; padding-top:16px;
  border-top:1px solid var(--line); font-size:14.5px; font-weight:600; text-decoration:none; color:var(--ink);
}
.card-link .icon{ color:var(--accent); transition:transform .2s; }
.card-link:hover{ color:var(--accent); }
.card-link:hover .icon{ transform:translate(2px,-2px); }

/* ---------- Como trabalhamos ---------- */
.process{
  position:relative; overflow:hidden; padding:clamp(32px, 5vw, 64px); border-radius:var(--r-lg); color:#fff;
  background:linear-gradient(135deg, var(--band) 0%, var(--band-2) 100%);
}
.process-art{ position:absolute; top:0; right:0; width:min(44%, 460px); height:auto; color:rgba(0,216,245,.32); pointer-events:none; }
.process h2{ position:relative; color:#fff; }
.process-lead{ position:relative; margin-top:18px; color:var(--metal); max-width:52ch; }
.steps{ position:relative; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px; margin-top:clamp(36px, 5vw, 56px); padding-top:36px; }
.steps::before,.steps::after{ content:''; position:absolute; top:0; left:0; height:2px; width:100%; background:rgba(255,255,255,.16); }
.steps::after{ background:linear-gradient(90deg, var(--cyan), var(--electric)); transform:scaleX(0); transform-origin:left; transition:transform 1.6s cubic-bezier(.4,0,.2,1) .25s; }
.js .process.in .steps::after,html:not(.js) .steps::after{ transform:scaleX(1); }
.steps li{ position:relative; }
.steps li::before{
  content:''; position:absolute; top:-43px; left:0; width:14px; height:14px; border-radius:50%;
  background:var(--band); border:2px solid var(--cyan);
}
.step-num{ font:500 13px/1 var(--body); color:var(--cyan); }
.steps h3{ margin-top:12px; color:#fff; }
.steps p{ margin-top:8px; color:var(--metal); font-size:15.5px; }

/* ---------- Checkup ---------- */
.checkup{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr); gap:clamp(28px, 5vw, 72px); align-items:center;
  padding:clamp(24px, 5vw, 64px); border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(135deg, var(--tint) 0%, var(--tint-strong) 100%);
}
.ck-visual{ display:flex; align-items:center; gap:26px; margin-top:30px; }
.ck-shield{ width:136px; height:auto; flex:none; }
.ck-band{ fill:var(--state-empty); transition:fill .35s; }
.ck-band.is-ok{ fill:var(--state-ok); }
.ck-band.is-part{ fill:var(--state-part); }
.ck-band.is-no{ fill:var(--state-no); }
.ck-band.is-current{ fill:color-mix(in srgb, var(--state-ok) 34%, var(--state-empty)); }
.ck-outline{ fill:none; stroke:var(--ink); stroke-width:3; }
.ck-legend{ display:grid; gap:9px; color:var(--ink-2); font-size:14px; }
.ck-legend li{ display:flex; align-items:center; gap:9px; }
.ck-legend i{ width:11px; height:11px; border-radius:3px; }
.k-ok{ background:var(--state-ok); }
.k-part{ background:var(--state-part); }
.k-no{ background:var(--state-no); }

.ck-card{ min-height:380px; display:flex; flex-direction:column; padding:clamp(22px, 3vw, 34px); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--shadow-md); }
.ck-card a{ color:var(--accent); }
.ck-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px; }
.ck-count{ font:500 12px/1 var(--body); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; color:var(--ink-3); }
.ck-area{ font-size:14px; font-weight:600; color:var(--accent); }
.ck-progress{ height:5px; margin-top:14px; border-radius:5px; background:var(--state-empty); overflow:hidden; }
.ck-progress span{ display:block; height:100%; border-radius:inherit; background:var(--signal); transition:width .35s; }
.ck-q{ margin-top:24px; font-size:clamp(21px, 2vw, 25px); line-height:1.22; outline:none; }
.ck-options{ display:grid; gap:10px; margin-top:auto; padding-top:24px; }
.ck-option{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:14px 16px; text-align:left;
  border:1px solid var(--line); border-radius:var(--r-sm); background:transparent; font-weight:500; cursor:pointer;
  transition:border-color .2s, background-color .2s;
}
.ck-option .icon{ color:var(--ink-3); transition:transform .2s; }
.ck-option:hover{ border-color:var(--signal); background:var(--tint); }
.ck-option:hover .icon{ transform:translateX(3px); color:var(--accent); }
.ck-option.is-chosen{ border-color:var(--signal); background:var(--tile-bg); }
.ck-back{
  align-self:flex-start; margin-top:14px; padding:6px 0; border:0; background:none; color:var(--ink-2);
  font-size:14.5px; font-weight:500; cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
.ck-back:hover{ color:var(--accent); }
.ck-back[hidden]{ display:none; }

.ck-result h3{ font-size:clamp(22px, 2.2vw, 27px); line-height:1.18; outline:none; }
.ck-result > p{ margin-top:8px; color:var(--ink-2); font-size:16px; }
.ck-list{ display:grid; gap:9px; margin-top:18px; }
.ck-list li{ display:flex; gap:12px; align-items:baseline; justify-content:space-between; padding:10px 12px; border-radius:var(--r-sm); background:var(--tint); font-size:15px; font-weight:500; }
.tag{ flex:none; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; }
.tag-no{ background:color-mix(in srgb, var(--state-no) 16%, transparent); color:var(--error); }
.tag-part{ background:color-mix(in srgb, var(--state-part) 22%, transparent); color:#7A5600; }
.tag-ok{ background:var(--tile-bg); color:var(--tile-ink); }
html.is-dark .tag-part{ color:#F6C658; }
.ck-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.ck-fine{ margin-top:14px; color:var(--ink-3); font-size:13px; line-height:1.45; }

/* ---------- Dúvidas ---------- */
.faq-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px, 6vw, 88px); align-items:start; }
.faq details{ border-bottom:1px solid var(--line); }
.faq details:first-child{ border-top:1px solid var(--line); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:20px;
  font:600 18px/1.3 var(--display); letter-spacing:-.008em; cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent); }
.faq summary::after{
  content:''; width:14px; height:14px; flex:none; color:var(--accent);
  background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat, linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;
  transition:transform .25s;
}
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq details p{ padding-bottom:22px; max-width:62ch; color:var(--ink-2); }
.faq details a{ color:var(--accent); font-weight:500; }

/* ---------- Contato ---------- */
.contact{ padding-block:clamp(64px, 8vw, 104px); color:#fff; background:linear-gradient(120deg, var(--band) 0%, var(--band-2) 62%, #0B3F8F 100%); scroll-margin-top:var(--header-h); }
.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 6vw, 88px); align-items:center; }
.contact-copy h2{ color:#fff; }
.contact-copy > p:not(.eyebrow){ margin-top:20px; max-width:50ch; color:var(--metal); }
.contact-list{ display:grid; gap:12px; margin-top:28px; }
.contact-list li{ display:flex; align-items:center; gap:12px; font-weight:500; }
.contact-list .icon{ color:var(--cyan); }
.contact-list a{ text-underline-offset:3px; }

.form{ display:grid; gap:16px; padding:clamp(22px, 3vw, 34px); border-radius:var(--r-md); background:var(--surface); color:var(--ink); box-shadow:0 26px 60px -24px rgba(0,0,0,.55); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label{ display:block; margin-bottom:6px; font-size:14.5px; font-weight:600; }
.field label span{ color:var(--ink-3); font-weight:400; }
.field input,.field select,.field textarea{
  width:100%; padding:12px 13px; border:1px solid color-mix(in srgb, var(--ink-3) 55%, var(--line)); border-radius:var(--r-sm);
  background:var(--bg); font-size:16px; transition:border-color .2s;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ outline:2px solid var(--signal); outline-offset:1px; }
.field [aria-invalid="true"]{ border-color:var(--error); }
.field-error{ margin-top:6px; color:var(--error); font-size:14px; }
.form-note{ color:var(--ink-3); font-size:13.5px; line-height:1.45; }
.form-status{ padding:12px 14px; border-radius:var(--r-sm); background:var(--tile-bg); color:var(--ink); font-size:14.5px; line-height:1.45; }
.form-status a{ color:var(--accent); font-weight:600; }

/* ---------- Rodapé ---------- */
.site-footer{ padding-top:56px; background:var(--tint); color:var(--ink-2); font-size:15px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:32px; padding-bottom:40px; }
.footer-brand p{ margin-top:14px; max-width:30ch; }
.site-footer h2{ margin-bottom:14px; font:600 13px/1.2 var(--body); letter-spacing:0; color:var(--ink); }
.site-footer ul{ display:grid; gap:9px; }
.site-footer ul a{ text-decoration:none; }
.site-footer ul a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.footer-fine{ padding-block:18px; border-top:1px solid var(--line); color:var(--ink-3); font-size:13.5px; }

/* ---------- Entrada suave ao rolar ---------- */
.js .reveal{ transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.js .reveal:not(.in){ opacity:0; transform:translateY(16px); }
.js .card.reveal.in{ transition:opacity .25s, border-color .25s, transform .25s, box-shadow .25s; }

/* ---------- Animações do herói ---------- */
.stage-sweep{
  position:absolute; inset:11.3%; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 70%, color-mix(in srgb, var(--signal) 24%, transparent) 100%);
  animation:spin 9s linear infinite, fadeIn 1s ease-out .4s backwards;
}
.rings{ animation:fadeIn 1s ease-out backwards; }
.ring-dash,.ring-orbiters{ transform-origin:300px 300px; }
.ring-dash{ animation:spin 70s linear infinite reverse; }
.ring-orbiters{ fill:var(--signal); animation:spin 26s linear infinite, fadeIn 1s ease-out .6s backwards; }
.traces{ animation:fadeIn .8s ease-out .5s backwards; }
.disc{ transform-origin:300px 300px; animation:discIn .8s cubic-bezier(.2,.7,.2,1) backwards; }
.stage-mark{ animation:markIn .8s cubic-bezier(.2,.7,.2,1) .15s backwards, markFloat 7s ease-in-out 1s infinite; }
.stage-status{ animation:fadeIn .8s ease-out 1.1s backwards; }
.comet{ fill:none; stroke:#FFFFFF; stroke-linecap:round; stroke-dasharray:18 182; stroke-dashoffset:18; animation:comet 5s linear 1s infinite; }
.comet-back{ stroke-width:3.500; opacity:.7; }
.comet-front{ stroke-width:4.500; animation-delay:3.500s; }

@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes fadeIn{ from{ opacity:0; } }
@keyframes discIn{ from{ opacity:0; transform:scale(.82); } }
@keyframes markIn{ from{ opacity:0; scale:.86; } }
@keyframes markFloat{ 50%{ translate:0 -7px; } }
@keyframes cardIn{ from{ opacity:0; scale:.9; } }
@keyframes cardFloat{ 50%{ translate:0 -6px; } }
/* A cauda só some depois que a ponta da luz já entrou no outro trecho da órbita. */
@keyframes comet{ 0%{ stroke-dashoffset:18; } 59%,100%{ stroke-dashoffset:-100; } }

/* ---------- Animações de "Como trabalhamos" ---------- */
.art-pulse{ stroke:var(--cyan); stroke-width:2.500; stroke-linecap:round; stroke-dasharray:12 188; stroke-dashoffset:12; animation:artFlow 4.500s linear infinite; }
.art-node{ animation:artNode 4.500s linear infinite; }
.art-pulse:nth-of-type(5),.art-node:nth-of-type(2){ animation-delay:1.500s; }
.art-pulse:nth-of-type(6),.art-node:nth-of-type(3){ animation-delay:3s; }
@keyframes artFlow{ 0%{ stroke-dashoffset:12; } 70%,100%{ stroke-dashoffset:-100; } }
@keyframes artNode{ 0%,58%,100%{ fill:transparent; } 64%{ fill:var(--cyan); } 85%{ fill:transparent; } }

.steps::after{
  background:
    linear-gradient(90deg, transparent, #FFFFFF, transparent) no-repeat,
    linear-gradient(90deg, var(--cyan), var(--electric));
  background-size:160px 100%, 100% 100%;
  animation:stepsRun 8s linear infinite;
}
.steps li{ z-index:1; transition:opacity .5s ease, translate .5s ease; transition-delay:calc(var(--i, 0) * .14s + .25s); }
.steps li:nth-child(2){ --i:1; --node:2.050s; }
.steps li:nth-child(3){ --i:2; --node:3.600s; }
.steps li:nth-child(4){ --i:3; --node:5.200s; }
.js .process:not(.in) .steps li{ opacity:0; translate:0 12px; }
.steps li::before{ animation:nodeLit 8s ease-out var(--node, .48s) infinite; }
@keyframes stepsRun{
  from{ background-position:-160px 0, 0 0; }
  to{ background-position:calc(100% + 160px) 0, 0 0; }
}
@keyframes nodeLit{
  0%{ background:var(--cyan); box-shadow:0 0 0 7px rgba(0,216,245,.22); }
  16%,100%{ background:var(--band); box-shadow:0 0 0 0 rgba(0,216,245,0); }
}

/* Fora da tela, as animações contínuas ficam paradas. */
.fx-paused,.fx-paused *,.fx-paused *::before,.fx-paused *::after{ animation-play-state:paused !important; }

/* ---------- WhatsApp ---------- */
.btn-whatsapp,.wa-float{ background:#25D366; color:#06142B; }
.btn-whatsapp:hover{ background:#3BE07A; }
.btn-whatsapp .icon,.wa-float .icon{ width:20px; height:20px; }
.btn-whatsapp:hover .icon{ transform:none; }
.contact-wa{ margin-top:26px; }
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:90; display:inline-flex; align-items:center; gap:10px;
  padding:13px 18px; border-radius:999px; font-size:15px; font-weight:600; text-decoration:none;
  box-shadow:0 10px 26px -8px rgba(6,20,43,.55); transition:background-color .2s, transform .2s;
}
.wa-float:hover{ background:#3BE07A; transform:translateY(-2px); }
.wa-float .icon{ width:22px; height:22px; }

/* ---------- Responsivo ---------- */
@media (max-width: 1180px){
  .header-cta{ display:none; }
  .nav-cta{ display:inline-flex; }
  .nav{ margin-left:auto; }
  .nav .nav-cta{ padding:10px 16px; }
}
@media (max-width: 1180px){
  .menu-btn{ display:grid; }
  .header-actions{ margin-left:auto; }
  .nav{
    position:absolute; left:0; right:0; top:100%; display:none; flex-direction:column; align-items:stretch; gap:2px; margin:0;
    padding:12px var(--gutter) 20px; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:var(--shadow-md);
  }
  .nav.is-open{ display:flex; }
  .nav a:not(.btn){ padding:13px 2px; font-size:17px; border-bottom:1px solid var(--line); }
  .nav a:not(.btn)::after{ display:none; }
  .nav .nav-cta{ margin-top:14px; padding:14px 18px; font-size:16px; }
}
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-copy{ max-width:680px; }
  .stage{ max-width:540px; margin-top:12px; }
  .section-head,.about-grid,.faq-grid,.contact-grid,.checkup{ grid-template-columns:minmax(0,1fr); }
  .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .steps{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:44px; padding-top:0; }
  .steps::before,.steps::after,.steps li::before{ display:none; }
  .steps li{ padding-top:16px; border-top:2px solid rgba(0,216,245,.5); }
  .process-art{ opacity:.55; }
}
@media (max-width: 640px){
  :root{ --header-h:66px; }
  .brand-logo{ width:196px; margin-left:-10px; }
  .wa-float{ right:16px; bottom:16px; width:56px; height:56px; padding:0; justify-content:center; }
  .wa-float span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .wa-float .icon{ width:28px; height:28px; }
  body{ font-size:16.5px; }
  .topbar-note{ display:none; }
  .topbar-inner{ justify-content:center; }
  .topbar-links{ gap:14px; font-size:12.5px; }
  .topbar-links > span{ display:none; }
  .icon-btn{ width:40px; height:40px; }
  .hero h1{ font-size:clamp(31px, 9.9vw, 46px); }
  .hero-actions .btn-primary{ width:100%; }
  .hero-actions .btn-quiet{ width:100%; padding-inline:0; }

  /* No celular, os cartões saem de cima do escudo e viram lista. */
  .stage{ aspect-ratio:auto; display:grid; gap:10px; max-width:none; }
  .stage-visual{ position:relative; inset:auto; width:min(280px, 74vw); aspect-ratio:1; margin:0 auto 6px; }
  .traces{ display:none; }
  .float-card{ position:static; width:100%; transform:none !important; box-shadow:var(--shadow-sm); animation:cardIn .6s ease-out var(--d, 0s) backwards; }
  .stage-status{ position:static; max-width:none; justify-content:center; margin-top:6px; }

  .strip{ grid-template-columns:1fr; gap:12px; }
  .strip li,.strip li:first-child,.strip li:last-child{ justify-content:flex-start; }
  .cards,.steps,.form-row{ grid-template-columns:minmax(0,1fr); }
  .card{ padding:22px; }
  .filter-label{ width:100%; }
  .process,.checkup{ border-radius:var(--r-md); }
  .process{ padding:26px 20px; }
  .process h2 br{ display:none; }
  .process-art{ display:none; }
  .checkup{ padding:22px 16px; }
  .ck-visual{ gap:20px; }
  .ck-shield{ width:96px; }
  .ck-card{ min-height:0; padding:20px 16px; }
  .footer-grid{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width: 400px){
  .topbar-mail{ display:none !important; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  .js .reveal:not(.in){ opacity:1; transform:none; }
  .steps::after{ transform:scaleX(1); }
  .pulse,[data-trace].is-active .pulse,.stage-sweep{ display:none; }
}


/* Evolução comercial: componentes existentes, com ajustes pontuais. */
[hidden]{display:none!important}
.service-details{margin-top:16px;font-size:14px;color:var(--ink-2)}
.service-details summary{cursor:pointer;color:var(--accent);padding-block:8px}
.service-details ul{list-style:disc;padding-left:20px;margin-top:10px}
.service-details li+li{margin-top:7px}
.service-details p{font-size:14px}
.service-wa{margin-top:12px;color:var(--accent);font-size:14px;text-underline-offset:3px}
.price-list{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.price-row{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.price-row strong{white-space:nowrap;color:var(--accent)}
.price-note{max-width:85ch;margin:24px 0;color:var(--ink-2);font-size:14px}
.flow-switch{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.contact-grid{align-items:start}
.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
button:disabled{opacity:.65;cursor:wait}
.form-note a{color:var(--accent)}
.steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.steps li:nth-child(5){--i:4;--node:6.5s}
.ck-list li>span:first-child{min-width:0}
.ck-list a{font-size:13px}
:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
@media(max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .steps,.price-list{grid-template-columns:minmax(0,1fr)}
  .price-row{flex-direction:column;gap:4px}
  .ck-list li{flex-wrap:wrap}
  .hero-notes li{align-items:flex-start}
  .flow-switch .chip{flex:1}
  .wa-float{bottom:max(16px,env(safe-area-inset-bottom))}
  .site-footer{padding-bottom:80px}
  .contact-list{overflow-wrap:anywhere}
}

.ck-actions .btn{white-space:normal;max-width:100%;text-align:center}