/* ============================================================================
   NEXUS · HOME (institucional) — camada sobre nexus.css
   Identidade NEUTRA e autoritária da casa (grafite cool-gray + neutro refinado).
   Os 3 acentos de produto aparecem SÓ dentro dos cartões/telhas com [data-produto].
   Carrega DEPOIS de nexus.css. Sem editar arquivos compartilhados.
   ============================================================================ */

/* ---- Acento NEUTRO da NEXUS (grafite cool-gray) ----
   Definido no BODY (especificidade 0,0,1) para que [data-produto] (0,1,0),
   herdado de nexus.css, vença dentro dos cartões de produto. */
body.nx-home{
  --nx-accent:#343a3f;         /* cool gray 80 — grafite */
  --nx-accent-strong:#21272a;  /* cool gray 90 */
  --nx-accent-ink:#343a3f;     /* texto do acento no claro (AA sobre #fff) */
  --nx-accent-on-dark:#c1c7cd; /* cool gray 30 — acento sobre bandas escuras */
  --nx-accent-soft:#eef1f4;    /* wash cool gray 10 */
  /* nexus.css declara --nx-text-accent no :root apontando p/ --nx-accent-ink,
     que NÃO existe no :root: o var()-em-var() resolve inválido. Re-declaramos
     aqui (e nos cartões), onde --nx-accent-ink de fato existe, p/ .grad, .btn-ghost,
     .pc-link/.pc-kick e ícones tingidos herdarem o acento correto. */
  --nx-text-accent:var(--nx-accent-ink);
}
/* cada cartão/telha de produto reancora o text-accent ao SEU acento-ink */
.nx-home [data-produto]{--nx-text-accent:var(--nx-accent-ink)}

/* ---- Marca canônica NEXUS (quadrado escuro + N claro) ---- */
.nx-mark{display:inline-flex;flex:none}
.nx-mark svg{width:30px;height:30px}
.brand .nx-mark svg{width:32px;height:32px}
.hero-lockup .nx-mark svg{width:46px;height:46px}
.foot-brand .nx-mark svg{width:34px;height:34px}
/* fio de acento neutro por baixo do N no dark, coeso com o resto */
.brand{gap:12px}

/* ---- Kicker do hero (linha de credenciais em mono) ---- */
.hero-kick{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;
  font-family:var(--nx-mono);font-size:.8125rem;color:var(--nx-ink-2);margin-bottom:24px}
.hero-kick b{color:var(--nx-ink);font-weight:600}
.hero-kick .muted{color:var(--nx-ink-3)}
.hero-kick .sep{width:1px;height:14px;background:var(--nx-line)}

/* ---- Hero: montagem de produtos no lado direito ---- */
.hero-montage{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hm-tile{position:relative;overflow:hidden;border:1px solid var(--nx-line);
  background:var(--nx-bg-soft);box-shadow:var(--nx-shadow-1);
  border-top:3px solid var(--nx-accent);isolation:isolate}
.hm-tile.hm-lead{grid-column:1/-1}
.hm-tile>img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;
  transition:transform .5s var(--nx-ease)}
.hm-tile.hm-lead>img{aspect-ratio:16/7}
.hm-tile:hover>img{transform:scale(1.04)}
.hm-tile figcaption{position:absolute;inset:auto 0 0 0;display:flex;align-items:center;gap:10px;
  padding:12px 13px;color:#f4f4f4;
  background:linear-gradient(0deg,rgba(12,12,12,.86) 8%,rgba(12,12,12,.42) 60%,transparent)}
.hm-mark{flex:none;width:26px;height:26px;background:#fff;display:grid;place-items:center;box-shadow:var(--nx-shadow-1)}
.hm-mark img{width:20px;height:20px}
.hm-name{font-weight:600;font-size:.95rem;letter-spacing:-.01em}
.hm-kick{margin-left:auto;font-family:var(--nx-mono);font-size:.68rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--nx-accent-on-dark);
  border:1px solid rgba(255,255,255,.22);padding:3px 8px;white-space:nowrap}
@media(max-width:520px){.hm-kick{display:none}}

/* chips flutuantes do hero (neutros) */
.hero-art .float-chip .ic{background:var(--nx-accent-soft);color:var(--nx-accent-ink)}
.hero-art .fc-1{top:-16px;left:-16px}
.hero-art .fc-2{bottom:-16px;right:-14px}

/* ---- Faixa de confiança compacta ---- */
.trust-strip{padding:clamp(40px,5vw,64px) 0;border-bottom:1px solid var(--nx-line)}
.trust-strip .ts-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.trust-strip .lab{margin-bottom:14px}
@media(max-width:820px){.trust-strip .ts-grid{grid-template-columns:1fr;gap:30px}}

/* ---- Cartões de produto (núcleo, acento-owned via [data-produto]) ---- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,28px)}
.prod-grid>*{min-width:0}
.prodcard{position:relative;display:flex;flex-direction:column;
  background:var(--nx-bg);border:1px solid var(--nx-line);border-top:3px solid var(--nx-accent);
  box-shadow:var(--nx-shadow-1);
  transition:transform .18s var(--nx-ease),box-shadow .18s var(--nx-ease),border-color .18s var(--nx-ease)}
.prodcard:hover{transform:translateY(-4px);
  box-shadow:var(--nx-shadow-2),0 0 0 1px color-mix(in srgb,var(--nx-accent) 32%,transparent)}
.pc-fig{position:relative;overflow:hidden;background:var(--nx-accent-soft);border-bottom:1px solid var(--nx-line)}
.pc-fig img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;transition:transform .5s var(--nx-ease)}
.prodcard:hover .pc-fig img{transform:scale(1.045)}
.pc-fig .pc-badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:7px;
  background:color-mix(in srgb,var(--nx-bg) 90%,transparent);backdrop-filter:blur(6px);
  border:1px solid var(--nx-line);padding:5px 10px 5px 6px;font-weight:600;font-size:.82rem;color:var(--nx-ink)}
.pc-badge .mk{width:22px;height:22px;background:#fff;display:grid;place-items:center;border:1px solid var(--nx-line)}
.pc-badge .mk img{width:17px;height:17px}
.pc-body{display:flex;flex-direction:column;gap:14px;padding:22px 22px 24px;flex:1}
.pc-kick{font-family:var(--nx-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--nx-text-accent)}
.pc-lead{font-size:.98rem;color:var(--nx-ink-2);line-height:1.5}
.pc-lead b{color:var(--nx-ink);font-weight:600}
.pc-feats{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:2px}
.pc-feats li{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--nx-ink-2);line-height:1.45}
.pc-feats .ic{flex:none;width:22px;height:22px;color:var(--nx-text-accent);margin-top:1px}
.pc-feats .ic svg{width:22px;height:22px}
.pc-link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding-top:6px;
  font-weight:600;font-size:.9rem;color:var(--nx-text-accent)}
.pc-link svg{width:16px;height:16px;transition:transform .18s var(--nx-ease)}
.pc-link::after{content:"";position:absolute;inset:0}          /* card inteiro clicável */
.prodcard:hover .pc-link svg{transform:translateX(4px)}
@media(max-width:900px){.prod-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

/* ---- Suítes / o que vem ---- */
#suites{background:var(--nx-bg-soft);border-top:1px solid var(--nx-line);border-bottom:1px solid var(--nx-line)}
.suite-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);
  border-top:1px solid var(--nx-line);border-bottom:1px solid var(--nx-line);
  padding:clamp(26px,3.4vw,40px) 0;margin-bottom:clamp(34px,4vw,52px);column-gap:0}
.suite-stats .stat{padding:0 clamp(16px,2.4vw,34px);border-left:1px solid var(--nx-line)}
.suite-stats .stat:first-child{border-left:0;padding-left:0}
.suite-stats .n{font-family:var(--nx-serif);font-weight:500;font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1;
  color:var(--nx-ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.suite-stats .k{margin-top:8px;font-size:.85rem;color:var(--nx-ink-3);line-height:1.4}
@media(max-width:640px){.suite-stats{grid-template-columns:1fr;row-gap:22px}
  .suite-stats .stat{border-left:0;padding-left:0;padding-bottom:22px;border-bottom:1px solid var(--nx-line)}
  .suite-stats .stat:last-child{border-bottom:0;padding-bottom:0}}
.motor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,28px)}
.motor-grid>*{min-width:0}
.motor{background:var(--nx-bg);border:1px solid var(--nx-line);padding:24px 22px 26px;display:flex;flex-direction:column;gap:12px;
  transition:transform .18s var(--nx-ease),box-shadow .18s var(--nx-ease),border-color .18s var(--nx-ease)}
.motor:hover{transform:translateY(-3px);border-color:var(--nx-accent);box-shadow:var(--nx-shadow-2)}
.motor .gi{width:34px;height:34px;color:var(--nx-text-accent)}
.motor .gi svg{width:34px;height:34px}
.motor .mo-k{font-family:var(--nx-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--nx-ink-3)}
.motor h3{font-size:1.15rem}
.motor p{font-size:.9rem;color:var(--nx-ink-2);line-height:1.5}
.motor .mo-live{margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--nx-line);
  font-size:.8rem;color:var(--nx-ink-3)}
.motor .mo-live .d{width:8px;height:8px;flex:none;background:var(--nx-green)}
.motor .mo-live b{color:var(--nx-ink);font-weight:600}
@media(max-width:820px){.motor-grid{grid-template-columns:1fr}}

/* ---- Como sua prefeitura contrata ---- */
.home-proc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,28px)}
.home-proc>*{min-width:0}
.hproc{background:var(--nx-bg);border:1px solid var(--nx-line);padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px;
  transition:transform .18s var(--nx-ease),box-shadow .18s var(--nx-ease),border-color .18s var(--nx-ease)}
.hproc:hover{transform:translateY(-3px);border-color:var(--nx-accent);box-shadow:var(--nx-shadow-2)}
.hproc .pi{width:36px;height:36px;color:var(--nx-text-accent)}
.hproc .pi svg{width:36px;height:36px}
.hproc .pl{font-family:var(--nx-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--nx-ink-3)}
.hproc h3{font-size:1.1rem}
.hproc .pw{font-size:.9rem;color:var(--nx-ink-2);line-height:1.5}
.hproc .pw b{color:var(--nx-ink);font-weight:600}
.hkit{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:2px;padding-top:14px;border-top:1px solid var(--nx-line)}
.hkit .kh{font-family:var(--nx-mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink-3);margin-bottom:2px}
.hkit li:not(.kh){display:flex;align-items:flex-start;gap:9px;font-size:.85rem;color:var(--nx-ink-2);line-height:1.4}
.hkit li svg{width:16px;height:16px;flex:none;color:var(--nx-text-accent);margin-top:2px}
@media(max-width:820px){.home-proc{grid-template-columns:1fr}}

/* ---- CTA final (banda escura) — herda grão/gradiente/spotlight de nexus.css ---- */
.home-final .cards3{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:28px;
  font-size:.82rem;color:var(--nx-ink-2);font-family:var(--nx-mono)}
.home-final .cards3 span{display:inline-flex;align-items:center;gap:8px}
.home-final .cards3 i{width:9px;height:9px;flex:none}
.home-final .cards3 .a{background:#e8a317}
.home-final .cards3 .z{background:#42be65}
.home-final .cards3 .n{background:#a4a0ff}

/* ---- Footer: social com ícones de marca reais (coloridos) ---- */
.foot-social.brandreal a{background:var(--nx-bg)}
.foot-social.brandreal img{width:18px;height:18px}
.foot-social.brandreal a:hover{border-color:var(--nx-accent)}
.foot-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.foot-chips span{font-family:var(--nx-mono);font-size:.72rem;letter-spacing:.03em;color:var(--nx-ink-2);
  border:1px solid var(--nx-line);padding:5px 10px}

/* ---- Garantias de responsividade ---- */
img{max-width:100%}