/* ============================================================================
   NEXUS · Zelo — camada de componentes únicos sobre nexus.css (Carbon)
   Só estiliza as classes que o Zelo usa e que NÃO estão em nexus.css
   (ou que colidem no nome mas têm marcação diferente). Mesma linguagem:
   neutros cool-gray via --nx-*, cantos retos, bordas 1px --nx-line,
   Plex Serif no display, Plex Mono nos rótulos, acento SÓ via --nx-accent*.
   Carrega DEPOIS de nexus.css. Acento do Zelo = verde (#1a7f4b) já em nexus.css.
   ============================================================================ */

/* ---------- Tipografia auxiliar (equivalentes Zelo dos utilitários nexus) ---------- */
.lede{font-family:var(--nx-sans);font-size:clamp(1.05rem,1.35vw,1.3rem);font-weight:400;
  color:var(--nx-ink-2);line-height:1.55;max-width:62ch}
.kicker{font-family:var(--nx-mono);font-size:.75rem;font-weight:500;letter-spacing:.08em;
  color:var(--nx-text-accent);text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}
/* ênfase editorial: palavra-chave em serif itálico no acento */
.hero h1 em,.h2 em,.display em{font-style:italic;font-weight:500;color:var(--nx-text-accent);-webkit-text-fill-color:currentColor}

/* ---------- Bandas de seção ---------- */
.sec-soft{background:var(--nx-bg-soft);border-top:1px solid var(--nx-line);border-bottom:1px solid var(--nx-line)}
.sec-warm{background:var(--nx-accent-soft);border-top:1px solid var(--nx-line);border-bottom:1px solid var(--nx-line)}
.sec-head{max-width:660px;margin-bottom:clamp(40px,5vw,56px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .lede{margin-top:16px}

/* ---------- Botões (variantes que faltam; a geometria vem do .btn do nexus) ---------- */
.btn-primary{background:var(--nx-accent);color:#fff;border-color:var(--nx-accent)}
.btn-primary:hover{background:var(--nx-accent-strong);border-color:var(--nx-accent-strong)}
.btn-lg{min-height:52px;padding:0 26px;font-size:1rem}

/* ---------- Hero ---------- */
.hero{overflow:hidden}
.hero-streets{position:absolute;inset:0;z-index:0;opacity:.5;color:var(--nx-line);pointer-events:none}
.hero .hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero .hero-in>*{min-width:0}
.hero-copy{max-width:560px}
.hero-copy .lede{margin-bottom:30px}
.avail{display:inline-flex;align-items:center;gap:9px;font-family:var(--nx-mono);font-weight:500;font-size:.78rem;
  letter-spacing:.04em;color:var(--nx-ink-2);background:var(--nx-bg);border:1px solid var(--nx-line);
  padding:7px 13px;margin-bottom:22px}
.avail .dot{width:9px;height:9px;background:var(--nx-accent);flex:none}
@media(prefers-reduced-motion:no-preference){
  .avail .dot{box-shadow:0 0 0 0 color-mix(in srgb,var(--nx-accent) 50%,transparent);animation:zpulse 2.6s cubic-bezier(.2,0,.38,.9) infinite}
}
@keyframes zpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--nx-accent) 45%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero-cta{margin-bottom:28px}
.rating{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--nx-sans)}
.rating .stars{display:flex;gap:2px;color:var(--nx-accent)}
.rating .stars svg{width:18px;height:18px}
.rating b{font-weight:600;color:var(--nx-ink)}
.rating span{font-size:.9rem;color:var(--nx-ink-3)}
.rating .faces{display:flex}
.rating .faces img{width:32px;height:32px;border-radius:50%;border:2px solid var(--nx-bg);object-fit:cover;margin-left:-10px;filter:grayscale(1)}
.rating .faces img:first-child{margin-left:0}
@media(max-width:880px){
  .hero .hero-in{grid-template-columns:1fr;gap:40px}
  .hero-copy{max-width:none;text-align:center;margin:0 auto;order:1}
  .hero-cta,.rating{justify-content:center}
  .phone-stage{order:2}
}

/* ---------- Celular vivo (elemento vivo do hero) ---------- */
.phone-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}
.phone-glow{display:none}
.phone{position:relative;z-index:2;width:300px;max-width:84vw;aspect-ratio:300/612;border-radius:20px;
  background:var(--nx-ink);padding:11px;border:1px solid var(--nx-line-2);
  box-shadow:0 20px 48px -28px rgba(22,22,22,.45)}
.screen{position:relative;width:100%;height:100%;border-radius:12px;overflow:hidden;background:var(--nx-bg);display:flex;flex-direction:column}
.statusbar{display:flex;align-items:center;justify-content:space-between;padding:11px 18px 4px;font-family:var(--nx-mono);
  font-size:.7rem;font-weight:500;color:var(--nx-ink-2);flex:none}
.statusbar .sig{display:inline-flex;gap:5px;align-items:center}
.statusbar .sig svg{width:14px;height:14px}
.appbar{display:flex;align-items:center;gap:9px;padding:6px 15px 10px;flex:none}
.appbar .b{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.95rem;color:var(--nx-ink)}
.appbar .b svg{width:18px;height:18px;color:var(--nx-accent);stroke:var(--nx-accent)}
.appbar .step-pill{margin-left:auto;font-family:var(--nx-mono);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;
  font-weight:500;color:var(--nx-accent-ink);background:var(--nx-accent-soft);border:1px solid var(--nx-line);padding:4px 8px}
.scr-body{position:relative;flex:1;overflow:hidden}
.pscreen{position:absolute;inset:0;display:flex;flex-direction:column;padding:4px 15px 15px;
  opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.2,0,.38,.9),transform .5s cubic-bezier(.2,0,.38,.9);pointer-events:none}
.pscreen.on{opacity:1;transform:none;pointer-events:auto}
.scr-title{font-weight:600;font-size:1rem;letter-spacing:-.01em;margin:2px 0 12px;color:var(--nx-ink)}

/* screen 0: foto */
.viewfinder{position:relative;overflow:hidden;flex:1;min-height:0;background:#3b3530;border:1px solid var(--nx-line)}
.vf-brackets{position:absolute;inset:14px;z-index:3;pointer-events:none}
.vf-brackets i{position:absolute;width:22px;height:22px;border:2.5px solid #fff;opacity:.92}
.vf-brackets i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.vf-brackets i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.vf-brackets i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.vf-brackets i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.on .vf-brackets{animation:vfp 2.4s cubic-bezier(.2,0,.38,.9) infinite}
@keyframes vfp{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(.965);opacity:1}}
.vf-flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:4;pointer-events:none}
.on .vf-flash{animation:zflash 2.6s 1.1s ease-out}
@keyframes zflash{0%{opacity:0}6%{opacity:.85}24%{opacity:0}100%{opacity:0}}
.captured{position:absolute;right:12px;bottom:12px;z-index:5;display:flex;align-items:center;gap:7px;
  background:var(--nx-accent);color:#fff;font-family:var(--nx-mono);font-size:.68rem;font-weight:500;padding:6px 10px;
  opacity:0;transform:translateY(8px)}
.on .captured{animation:zpop .5s 1.45s cubic-bezier(.2,0,.38,.9) forwards}
@keyframes zpop{to{opacity:1;transform:none}}
.captured svg{width:14px;height:14px}
.shutter{margin:14px auto 0;width:50px;height:50px;border-radius:50%;background:#fff;border:4px solid var(--nx-accent);flex:none;position:relative}
.shutter::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--nx-accent)}
.on .shutter{animation:zpress 2.6s cubic-bezier(.2,0,.38,.9) infinite}
@keyframes zpress{0%,38%,100%{transform:scale(1)}44%{transform:scale(.86)}50%{transform:scale(1)}}

/* screen 1: mapa */
.map{position:relative;flex:1;min-height:0;overflow:hidden;border:1px solid var(--nx-line)}
.map svg{width:100%;height:100%}
.map-pin{position:absolute;left:50%;top:42%;transform:translate(-50%,-100%);z-index:3;color:var(--nx-accent)}
.map-pin svg{width:32px;height:40px}
.on .map-pin{animation:zdrop .7s .35s cubic-bezier(.2,0,.38,.9) both}
@keyframes zdrop{0%{transform:translate(-50%,-170%) scale(.6);opacity:0}60%{opacity:1}100%{transform:translate(-50%,-100%) scale(1);opacity:1}}
.map-pin .ring{position:absolute;left:50%;bottom:-3px;width:14px;height:5px;background:rgba(0,0,0,.18);transform:translateX(-50%)}
.addr{display:flex;align-items:center;gap:11px;margin-top:12px;padding:12px 14px;border:1px solid var(--nx-line);background:var(--nx-bg-soft)}
.addr .pin{width:32px;height:32px;flex:none;background:var(--nx-accent-soft);color:var(--nx-accent-ink);display:grid;place-items:center}
.addr .pin svg{width:16px;height:16px}
.addr b{display:block;font-size:.85rem;font-weight:600;color:var(--nx-ink)}
.addr span{font-size:.72rem;color:var(--nx-ink-3)}

/* screen 2: categoria + enviar */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:auto}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:500;padding:7px 11px;
  border:1px solid var(--nx-line);color:var(--nx-ink-2);background:var(--nx-bg)}
.chip svg{width:14px;height:14px}
.chip.sel{border-color:var(--nx-accent);background:var(--nx-accent);color:#fff}
.send{margin-top:12px;width:100%;background:var(--nx-accent);color:#fff;border:1px solid var(--nx-accent);padding:13px;
  font-family:var(--nx-sans);font-weight:600;font-size:.92rem;display:flex;align-items:center;justify-content:center;gap:9px}
.send .spin{width:15px;height:15px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;display:none}
.on .send .spin{display:block;animation:zspin .8s linear infinite}
@keyframes zspin{to{transform:rotate(360deg)}}

/* screen 3: acompanhar (mini-timeline no celular) */
.proto{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--nx-accent-soft);border:1px solid var(--nx-line);margin-bottom:14px}
.proto .n{font-family:var(--nx-mono);font-weight:600;font-size:1rem;color:var(--nx-accent-ink)}
.proto .l{font-size:.7rem;color:var(--nx-ink-3);margin-left:auto;text-align:right}
.rail{position:relative;padding-left:6px}
.rail .line{position:absolute;left:13px;top:12px;bottom:12px;width:1px;background:var(--nx-line)}
.rail .fill{position:absolute;left:13px;top:12px;bottom:12px;width:1px;background:var(--nx-accent);transform:scaleY(0);transform-origin:top;transition:transform 1.4s cubic-bezier(.2,0,.38,.9)}
.on .rail .fill{transform:scaleY(1)}
.rstep{position:relative;display:flex;align-items:flex-start;gap:12px;padding:6px 0;z-index:2}
.rstep .dot{width:16px;height:16px;border:1px solid var(--nx-line);background:var(--nx-bg);flex:none;margin-top:2px;display:grid;place-items:center;transition:background .4s,border-color .4s}
.rstep .dot svg{width:9px;height:9px;color:#fff;opacity:0}
.rstep b{font-size:.82rem;font-weight:600;display:block;line-height:1.3;color:var(--nx-ink)}
.rstep span{font-size:.68rem;color:var(--nx-ink-3);font-family:var(--nx-mono)}
.rstep.done .dot{background:var(--nx-accent);border-color:var(--nx-accent)}
.rstep.done .dot svg{opacity:1}
.ba-mini{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ba-mini figure{position:relative}
.ba-mini svg{width:100%;height:60px}
.ba-mini figcaption{position:absolute;left:6px;bottom:6px;font-family:var(--nx-mono);font-size:.58rem;font-weight:500;color:#fff;background:rgba(22,22,22,.62);padding:2px 6px}

/* indicador de telas */
.seg{display:flex;gap:7px;justify-content:center;margin-top:22px;z-index:3}
.seg button{width:42px;height:4px;background:var(--nx-line);transition:background .3s;padding:0;transform:scaleX(.67);transform-origin:center;transition:background .3s,transform .3s}
.seg button.on{background:var(--nx-accent);transform:scaleX(1)}
.phone-cap{margin-top:14px;font-size:.9rem;font-weight:400;color:var(--nx-ink-2);text-align:center;min-height:1.4em}
.phone-cap b{color:var(--nx-text-accent);font-weight:600}

/* ---------- Faixa de integração (baixe/use com) ---------- */
.integ{border-top:1px solid var(--nx-line);border-bottom:1px solid var(--nx-line);background:var(--nx-bg-soft);padding:clamp(34px,4.6vw,52px) 0}
.integ-lab{text-align:center;font-family:var(--nx-mono);font-size:.72rem;color:var(--nx-ink-3);margin-bottom:26px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.integ-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px clamp(26px,3.6vw,46px)}
.integ-row .sep{width:1px;height:26px;background:var(--nx-line);flex:none}
.blogo{display:inline-flex;align-items:center;height:28px;opacity:.6;filter:grayscale(1);transition:opacity .15s,filter .15s}
.blogo:hover{opacity:1;filter:grayscale(0)}
.blogo img{height:26px;width:auto;display:block}
.blogo.store img{height:24px}
.bwm{display:inline-flex;align-items:center;gap:7px;height:28px;font-family:var(--nx-sans);font-weight:700;letter-spacing:-.02em;font-size:1.12rem;line-height:1;white-space:nowrap}
.bwm svg{height:22px;width:22px;flex:none;display:block}
.bwm .gov{color:#1351b4}.bwm .gov i{font-style:normal;color:#2670e8}
.integ-note{text-align:center;font-size:.82rem;color:var(--nx-ink-3);margin-top:24px;max-width:62ch;margin-left:auto;margin-right:auto;line-height:1.5}

/* ---------- Stats: acento na unidade ---------- */
.stat .n .u{color:var(--nx-text-accent)}

/* ---------- Fricção (o jeito de hoje × Zelo) ---------- */
.friction{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,4vw,50px);align-items:center}
.friction>*{min-width:0}
.friction .lede{margin:16px 0 22px}
.fr-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.fr-list li{display:flex;gap:13px;align-items:flex-start;font-size:1rem;color:var(--nx-ink-2);line-height:1.5}
.fr-list .ic{width:28px;height:28px;flex:none;display:grid;place-items:center;margin-top:1px;border:1px solid var(--nx-line)}
.fr-list .bad .ic{color:var(--nx-red);border-color:color-mix(in srgb,var(--nx-red) 40%,var(--nx-line))}
.fr-list .good .ic{color:var(--nx-accent-ink);background:var(--nx-accent-soft);border-color:var(--nx-line)}
.fr-list .ic svg{width:15px;height:15px}
.fr-list b{color:var(--nx-ink);font-weight:600}
.slip-stack{position:relative;min-height:280px;display:grid;place-items:center}
.slip{width:min(330px,82%);background:var(--nx-bg);border:1px solid var(--nx-line);padding:22px 24px;position:relative;box-shadow:0 12px 32px -18px rgba(22,22,22,.2)}
.slip h4{font-family:var(--nx-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--nx-ink-3);font-weight:500}
.slip .pn{font-family:var(--nx-serif);font-weight:500;font-size:2rem;letter-spacing:-.01em;margin:6px 0 4px;color:var(--nx-ink);font-variant-numeric:tabular-nums}
.slip .meta{font-size:.82rem;color:var(--nx-ink-3)}
.slip .stamp{position:absolute;right:-10px;top:-12px;transform:rotate(4deg);font-family:var(--nx-mono);font-weight:500;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--nx-red);border:1.5px solid var(--nx-red);padding:4px 9px;background:var(--nx-bg)}
.slip-2{position:absolute;transform:translate(26px,30px);z-index:-1;opacity:.5}

/* ---------- 3 toques ---------- */
.taps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,26px)}
.taps>*{min-width:0}
.tap{background:var(--nx-bg);border:1px solid var(--nx-line);padding:28px 26px 30px;transition:border-color .15s}
.tap:hover{border-color:var(--nx-accent-strong)}
.tap .ig{width:52px;height:52px;background:var(--nx-accent-soft);display:grid;place-items:center;margin-bottom:18px;color:var(--nx-accent-ink)}
.tap .ig .ph{width:28px;height:28px;color:var(--nx-accent-ink)}
.tap .step{font-family:var(--nx-mono);font-weight:500;font-size:.72rem;color:var(--nx-ink-3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.tap h3{margin-bottom:9px}
.tap p{font-size:.92rem;color:var(--nx-ink-2);line-height:1.55}

/* ---------- Acompanhar ao vivo (banda escura · timeline do chamado) ---------- */
.track-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(34px,4vw,48px);align-items:center}
.track-grid>*{min-width:0}
.track-card{background:var(--nx-bg-soft);border:1px solid var(--nx-line);padding:26px}
.tc-head{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--nx-line);margin-bottom:6px}
.tc-head .tn{font-family:var(--nx-mono);font-weight:500;font-size:1.02rem;color:var(--nx-text-accent);font-variant-numeric:tabular-nums}
.tc-head .badge{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--nx-mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;font-weight:500;
  padding:4px 10px;color:var(--nx-text-accent);background:color-mix(in srgb,var(--nx-accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--nx-accent) 40%,transparent)}
.tline{position:relative;padding:14px 0 0 4px}
.tline .ln{position:absolute;left:12px;top:24px;bottom:24px;width:1px;background:var(--nx-line)}
.tline .lnf{position:absolute;left:12px;top:24px;bottom:24px;width:1px;background:var(--nx-text-accent);transform:scaleY(0);transform-origin:top;transition:transform 1.6s .2s cubic-bezier(.2,0,.38,.9)}
.in .tline .lnf{transform:scaleY(1)}
.tev{position:relative;display:flex;gap:14px;padding:11px 0;z-index:2}
.tev .d{width:17px;height:17px;border:1px solid var(--nx-text-accent);background:var(--nx-text-accent);flex:none;margin-top:3px;display:grid;place-items:center}
.tev .d svg{width:10px;height:10px;color:var(--nx-bg)}
.tev b{font-weight:600;font-size:.98rem;color:var(--nx-ink)}
.tev p{font-size:.86rem;color:var(--nx-ink-2);margin-top:1px}
.tev time{font-size:.74rem;color:var(--nx-ink-3);font-weight:500;font-family:var(--nx-mono)}
.track-copy .lede{margin:16px 0 20px}
.track-copy ul{list-style:none;display:flex;flex-direction:column;gap:16px}
.track-copy li{display:flex;gap:13px;align-items:flex-start;font-size:1rem;color:var(--nx-ink-2)}
.track-copy li .ig{width:38px;height:38px;background:color-mix(in srgb,var(--nx-accent) 16%,transparent);display:grid;place-items:center;flex:none;color:var(--nx-text-accent)}
.track-copy li .ph{width:20px;height:20px;color:var(--nx-text-accent)}
.track-copy li b{color:var(--nx-ink);font-weight:600}

/* ---------- Antes e depois (comparador) ---------- */
.ba-wall{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,24px)}
.ba-wall>*{min-width:0}
.bac{background:var(--nx-bg);border:1px solid var(--nx-line);overflow:hidden}
.ba-view{position:relative;aspect-ratio:16/10;overflow:hidden;user-select:none;touch-action:pan-y}
.ba-view .layer{position:absolute;inset:0}
.ba-view .layer svg{width:100%;height:100%;display:block}
.ba-view .after{clip-path:inset(0 0 0 var(--rev,50%))}
.ba-view .tagA,.ba-view .tagB{position:absolute;top:10px;font-family:var(--nx-mono);font-size:.64rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;color:#fff;z-index:4}
.ba-view .tagA{left:10px;background:rgba(22,22,22,.66)}
.ba-view .tagB{right:10px;background:var(--nx-accent)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--rev,50%);width:2px;background:#fff;z-index:5;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.ba-handle .grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;background:#fff;border:1px solid var(--nx-line);display:grid;place-items:center;color:var(--nx-accent-ink)}
.ba-handle .grip svg{width:18px;height:18px}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:6;margin:0}
.bac .meta{display:flex;align-items:center;gap:10px;padding:15px 18px;border-top:1px solid var(--nx-line)}
.bac .meta .icr{width:36px;height:36px;background:var(--nx-accent-soft);display:grid;place-items:center;flex:none;color:var(--nx-accent-ink)}
.bac .meta .icr .ph{width:20px;height:20px;color:var(--nx-accent-ink)}
.bac .meta b{display:block;font-weight:600;font-size:.98rem;letter-spacing:-.01em;color:var(--nx-ink)}
.bac .meta span{font-size:.8rem;color:var(--nx-ink-3)}
.bac .meta .days{margin-left:auto;text-align:right;font-family:var(--nx-mono);font-size:.72rem;color:var(--nx-ink-3);line-height:1.3}
.bac .meta .days b{color:var(--nx-text-accent);font-size:1.1rem;font-family:var(--nx-serif);font-weight:500}

/* ---------- Depoimentos (marcação Zelo: figure/figcaption) ---------- */
.quotes-note{text-align:center;margin-top:26px;font-size:.82rem;color:var(--nx-ink-3)}
.quote .stars{display:flex;gap:2px;color:var(--nx-accent);margin-bottom:16px}
.quote .stars svg{width:16px;height:16px}
.quote blockquote{font-family:var(--nx-serif);font-size:1.06rem;color:var(--nx-ink);line-height:1.5;font-weight:400;flex:1}
.quote blockquote b{color:var(--nx-text-accent);font-weight:500;font-style:italic}
.quote .who{display:flex;align-items:center;gap:13px;margin-top:22px;padding-top:20px;border-top:1px solid var(--nx-line)}
.quote .av{width:48px;height:48px;flex:none;overflow:hidden;position:relative}
.quote .av img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;filter:grayscale(1)}
.quote .av .vb{position:absolute;right:-3px;bottom:-3px;width:19px;height:19px;background:var(--nx-accent);border:2px solid var(--nx-bg);display:grid;place-items:center}
.quote .av .vb svg{width:11px;height:11px;color:#fff}
.quote .nm{font-weight:600;font-size:.92rem;color:var(--nx-ink)}
.quote .rl{font-size:.8rem;color:var(--nx-ink-3);line-height:1.4}

/* ---------- Pra sua cidade (B2G · painel do gabinete) ---------- */
.gov{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(34px,4vw,48px);align-items:center}
.gov>*{min-width:0}
.gov-copy .lede{margin:16px 0 22px}
.gov-feats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:26px}
.gov-feats li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;color:var(--nx-ink-2)}
.gov-feats svg{width:20px;height:20px;color:var(--nx-text-accent);flex:none;margin-top:2px}
.dash{background:var(--nx-bg);border:1px solid var(--nx-line);padding:22px}
.dash-top{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.dash-top .dt{font-weight:600;font-size:.98rem;color:var(--nx-ink)}
.dash-top .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--nx-mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;font-weight:500;color:var(--nx-text-accent)}
.dash-top .live i{width:7px;height:7px;background:var(--nx-accent)}
@media(prefers-reduced-motion:no-preference){.dash-top .live i{animation:zpulse 2.6s infinite}}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--nx-bg-soft);border:1px solid var(--nx-line);padding:13px 14px}
.kpi .v{font-family:var(--nx-serif);font-weight:500;font-size:1.7rem;letter-spacing:-.01em;line-height:1;color:var(--nx-ink);font-variant-numeric:tabular-nums}
.kpi .v small{font-size:.9rem}
.kpi .k{font-size:.72rem;color:var(--nx-ink-3);margin-top:5px}
.dash-low{display:grid;grid-template-columns:1.1fr 1fr;gap:14px}
.heat{border:1px solid var(--nx-line);padding:12px;background:var(--nx-bg-soft)}
.heat .hh{font-family:var(--nx-mono);font-size:.7rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--nx-ink-3);margin-bottom:8px}
.heat svg{width:100%;display:block;background:var(--nx-line-2)}
.ranks{display:flex;flex-direction:column;gap:9px}
.rank{font-size:.76rem}
.rank .rt{display:flex;justify-content:space-between;margin-bottom:4px;color:var(--nx-ink-2);font-weight:500}
.rank .bar{height:6px;background:var(--nx-line-2);overflow:hidden}
.rank .bar i{display:block;height:100%;width:100%;background:var(--nx-accent);transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,0,.38,.9)}
@media(max-width:480px){.dash-low{grid-template-columns:1fr}}

/* ---------- Mini-caso ---------- */
.minicase{max-width:760px;margin:0 auto;text-align:center}
.minicase .kicker{justify-content:center}

/* ---------- CTA / baixar ---------- */
.cta-final{text-align:center;max-width:680px;margin:0 auto}
.cta-final .lede{margin:0 auto 30px}
.stores{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.store{display:inline-flex;align-items:center;gap:11px;background:#161616;color:#fff;padding:12px 22px;border:1px solid var(--nx-line);transition:border-color .15s,transform .15s}
.store:hover{border-color:var(--nx-text-accent)}
.store svg{width:24px;height:24px;flex:none}
.store small{display:block;font-family:var(--nx-mono);font-size:.66rem;opacity:.8;line-height:1.1}
.store b{display:block;font-weight:600;font-size:1rem;line-height:1.15}
.cta-or{margin:22px 0 4px;font-size:.92rem;color:var(--nx-ink-3)}
.cta-or a{color:var(--nx-text-accent);font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--nx-accent) 50%,transparent)}

/* ---------- Footer (marcação própria do Zelo) ---------- */
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(28px,4vw,52px);align-items:flex-start;padding-bottom:clamp(34px,4vw,46px);border-bottom:none}
.foot-brand{max-width:360px}
.foot-brand .fb{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.foot-brand .fb .logo{width:32px;height:32px}
.foot-brand .fb .nm{font-weight:600;font-size:1.3rem;letter-spacing:-.02em;color:var(--nx-ink)}
.foot-brand p{color:var(--nx-ink-3);font-size:.9rem;line-height:1.6;max-width:40ch}
.foot-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.foot-chips .ch{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:500;color:var(--nx-ink-2);background:var(--nx-bg);border:1px solid var(--nx-line);padding:6px 11px}
.foot-chips .ch svg{width:14px;height:14px;color:var(--nx-text-accent);flex:none}
.foot-brand .foot-social{display:flex;gap:10px;margin-top:20px}
.foot-legal{display:flex;gap:10px;align-items:flex-start;color:var(--nx-ink-3);font-size:.78rem;line-height:1.55;max-width:92ch;padding:24px 0;border-top:1px solid var(--nx-line);border-bottom:1px solid var(--nx-line)}
.foot-legal svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--nx-ink-3)}
.foot-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:22px}
.foot-bar .cp{font-size:.8rem;color:var(--nx-ink-3);display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px}
.nx-lk{display:inline-flex;align-items:center;gap:6px;color:var(--nx-ink-2);font-weight:600;transition:color .15s}
.nx-lk:hover{color:var(--nx-text-accent)}
.nx-lk .nx{width:17px;height:17px}
.foot-bar .bar-links a{color:var(--nx-ink-3);font-size:.8rem}
.foot-bar .bar-links a:hover{color:var(--nx-text-accent)}
@media(max-width:860px){
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1;max-width:none}
  .friction,.track-grid,.gov{grid-template-columns:1fr;gap:34px}
  .taps{grid-template-columns:1fr;gap:16px}
  .ba-wall{grid-template-columns:1fr}
  .gov-feats{grid-template-columns:1fr}
}
@media(max-width:680px){.stats{grid-template-columns:1fr 1fr;gap:26px 16px}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}}
@media(max-width:880px){.quotes{grid-template-columns:1fr;max-width:440px;margin:0 auto}}

/* ============================================================================
   ELEVAÇÃO 10/10 — novos blocos (verde de status × verde de marca resolvidos,
   painel com gráfico nítido, comprador/gestão, compras públicas, comparativo,
   glossário, FAQ, trust-bar de órgãos). Status = --nx-green (#24a148); marca
   segue --nx-accent (#1a7f4b). Só ADIÇÃO sobre o retrofit anterior.
   ============================================================================ */

/* ---------- Selo de status "Resolvido" (verde de status, distinto da marca) ---------- */
.zst{display:inline-flex;align-items:center;gap:6px;font-family:var(--nx-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;white-space:nowrap;flex:none}
.zst svg{width:12px;height:12px}
.zst-ok{color:var(--nx-green-ink);background:color-mix(in srgb,var(--nx-green) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--nx-green) 42%,transparent)}
.bac .meta .zst{margin-left:10px}
/* badge "Resolvido" no cartão da banda escura vira verde de status (distinto do verde-marca da timeline) */
.badge-ok{color:#48d17b!important;background:color-mix(in srgb,#24a148 26%,transparent)!important;
  border-color:color-mix(in srgb,#48d17b 50%,transparent)!important}
.cds--g100 .tev[data-c='done'] .d{background:#48d17b;border-color:#48d17b}
/* nó final "Resolvido" no celular também usa o verde de status */
.rstep[data-c='done'].done .dot{background:var(--nx-green);border-color:var(--nx-green)}

/* ---------- Celular: rodapé com botão pausar/tocar (pausável, a11y) ---------- */
.phone-foot{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}
.phone-foot .phone-cap{margin-top:0}
.phone-play{width:34px;height:34px;flex:none;display:grid;place-items:center;background:var(--nx-bg);
  border:1px solid var(--nx-line);color:var(--nx-ink-2);cursor:pointer;transition:border-color .15s,color .15s}
.phone-play:hover{border-color:var(--nx-accent);color:var(--nx-text-accent)}
.phone-play svg{width:16px;height:16px}
.phone-play .i-play{display:none}
.phone-play[aria-pressed="false"] .i-pause{display:none}
.phone-play[aria-pressed="false"] .i-play{display:block}

/* ---------- Ânfora numérica: ênfase serif itálico no acento ---------- */
.anchor-num span em{font-style:italic;font-weight:500;color:var(--nx-accent-ink)}

/* ---------- Pullquote: retrato do morador promovido ---------- */
.pullquote .pq-av{width:44px;height:44px;flex:none;overflow:hidden}
.pullquote .pq-av img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(1);display:block}
.pullquote .pq-by{max-width:none}

/* ---------- Comparativo: ligar × Zelo ---------- */
.cmp-wrap{overflow-x:auto;border:1px solid var(--nx-line)}
.cmp{width:100%;border-collapse:collapse;min-width:640px;background:var(--nx-bg)}
.cmp th,.cmp td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--nx-line);vertical-align:top;font-size:.92rem;line-height:1.45}
.cmp thead th{font-family:var(--nx-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;font-weight:500;
  color:var(--nx-ink-3);background:var(--nx-bg-soft);border-bottom:1px solid var(--nx-line);position:sticky;top:0}
.cmp .cmp-h{width:22%}
.cmp thead .cmp-new{color:var(--nx-text-accent)}
.cmp .ct-mk{display:inline-flex;align-items:center;vertical-align:middle;margin-right:6px}
.cmp .ct-mk img{width:18px;height:18px;display:block}
.cmp tbody th{font-weight:600;color:var(--nx-ink);font-size:.9rem;width:22%}
.cmp td.no{color:var(--nx-ink-3)}
.cmp td.yes{color:var(--nx-ink);background:color-mix(in srgb,var(--nx-accent) 5%,transparent)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp-badge{display:inline-flex;align-items:center;font-family:var(--nx-mono);font-size:.64rem;font-weight:500;letter-spacing:.03em;
  text-transform:uppercase;padding:3px 8px;margin:2px 4px 2px 0;white-space:nowrap}
.cmp-wait{color:var(--nx-ink-3);background:var(--nx-bg-soft);border:1px solid var(--nx-line)}
.cmp-run{color:var(--nx-accent-ink);background:var(--nx-accent-soft);border:1px solid color-mix(in srgb,var(--nx-accent) 30%,transparent)}
.cmp-ok{color:var(--nx-green-ink);background:color-mix(in srgb,var(--nx-green) 15%,transparent);border:1px solid color-mix(in srgb,var(--nx-green) 42%,transparent)}

/* ---------- Painel: gráfico de barras nítido (substitui os borrões) ---------- */
.sbars{border:1px solid var(--nx-line);padding:14px 14px 12px;background:var(--nx-bg-soft)}
.sbars .hh{font-family:var(--nx-mono);font-size:.7rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--nx-ink-3);margin-bottom:12px}
.sbrow{display:grid;grid-template-columns:66px 1fr auto;align-items:center;gap:10px;margin-bottom:9px}
.sbrow .sbk{font-size:.72rem;color:var(--nx-ink-2)}
.sbrow .sbt{height:9px;background:var(--nx-line-2);overflow:hidden}
.sbrow .sbt i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,0,.38,.9)}
.sbrow .sbv{font-family:var(--nx-mono);font-size:.78rem;font-weight:500;color:var(--nx-ink);font-variant-numeric:tabular-nums;min-width:2.4ch;text-align:right}
.sbt i.s-rec{background:var(--nx-accent)}
.sbt i.s-fld{background:var(--nx-accent-ink)}
.sbt i.s-don{background:var(--nx-green)}
.sblegend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;padding-top:10px;border-top:1px solid var(--nx-line)}
.sblegend .lg{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;color:var(--nx-ink-3);font-family:var(--nx-mono)}
.sblegend .lg::before{content:"";width:9px;height:9px;flex:none}
.sblegend .lg-rec::before{background:var(--nx-accent)}
.sblegend .lg-fld::before{background:var(--nx-accent-ink)}
.sblegend .lg-don::before{background:var(--nx-green)}

/* ---------- Para a gestão (o comprador) ---------- */
.gestao-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,24px);margin-bottom:clamp(26px,3vw,34px)}
.gestao-grid>*{min-width:0}
.gcard{background:var(--nx-bg);border:1px solid var(--nx-line);padding:26px 26px 28px;transition:border-color .15s}
.gcard:hover{border-color:var(--nx-accent-strong)}
.gcard .gtag{font-family:var(--nx-mono);font-size:.7rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-text-accent)}
.gcard h3{margin:8px 0 16px}
.gcheck{list-style:none;display:flex;flex-direction:column;gap:12px}
.gcheck li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem;color:var(--nx-ink-2);line-height:1.5}
.gcheck svg{width:19px;height:19px;flex:none;margin-top:1px;color:var(--nx-text-accent)}
.gquote{background:var(--nx-accent-soft);border:1px solid color-mix(in srgb,var(--nx-accent) 24%,var(--nx-line));padding:clamp(26px,3.2vw,40px);display:grid;gap:22px}
.gquote blockquote{font-family:var(--nx-serif);font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.4;color:var(--nx-ink);max-width:52ch}
.gquote blockquote b{font-style:italic;font-weight:500;color:var(--nx-accent-ink)}
.gquote figcaption{display:flex;align-items:center;gap:14px}
.gquote .gq-av{width:52px;height:52px;flex:none;overflow:hidden}
.gquote .gq-av img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(1);display:block}
.gquote .gq-nm{font-weight:600;font-size:.95rem;color:var(--nx-ink)}
.gquote .gq-rl{font-size:.82rem;color:var(--nx-ink-3)}

/* ---------- Como sua prefeitura contrata (compras públicas) ---------- */
.proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,24px)}
.proc-grid>*{min-width:0}
.proc{position:relative;background:var(--nx-bg);border:1px solid var(--nx-line);padding:28px 24px 26px;transition:border-color .15s}
.proc:hover{border-color:var(--nx-accent-strong)}
.proc .proc-num{font-family:var(--nx-mono);font-size:.8rem;font-weight:500;color:var(--nx-text-accent);letter-spacing:.05em}
.proc h3{margin:10px 0 4px}
.proc .proc-law{font-family:var(--nx-mono);font-size:.72rem;color:var(--nx-ink-3);letter-spacing:.02em;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--nx-line)}
.proc p{font-size:.9rem;color:var(--nx-ink-2);line-height:1.55}
.proc .proc-when{margin-bottom:12px}
.proc b{color:var(--nx-ink);font-weight:600}
.proc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;justify-content:center;text-align:center;margin-top:clamp(28px,3.4vw,40px)}
.proc-note{font-size:.85rem;color:var(--nx-ink-3);max-width:40ch}

/* ---------- Mini-caso: linha do tempo de resultado ---------- */
.case-tl{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:clamp(30px,3.6vw,44px) 0 0;text-align:left;counter-reset:none;position:relative}
.case-tl .ct-node{position:relative;padding:26px 16px 4px;border-top:2px solid color-mix(in srgb,var(--nx-accent) 26%,var(--nx-line))}
.case-tl .ct-node::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;background:var(--nx-accent);border:2px solid var(--nx-accent-soft)}
.case-tl .ct-done{border-top-color:var(--nx-green)}
.case-tl .ct-done::before{background:var(--nx-green);border-color:color-mix(in srgb,var(--nx-green) 22%,#fff)}
.case-tl .ct-when{display:block;font-family:var(--nx-mono);font-size:.72rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--nx-text-accent);margin-bottom:7px}
.case-tl .ct-done .ct-when{color:var(--nx-green-ink)}
.case-tl b{display:block;font-size:1rem;color:var(--nx-ink);letter-spacing:-.01em;margin-bottom:5px}
.case-tl .ct-txt{font-size:.85rem;color:var(--nx-ink-2);line-height:1.5}

/* ---------- Glossário ---------- */
.gloss{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,24px)}
.gloss>*{min-width:0}
.gl{border-top:2px solid var(--nx-accent);padding-top:18px}
.gl dt{font-family:var(--nx-serif);font-size:1.25rem;font-weight:500;letter-spacing:-.01em;color:var(--nx-ink);margin-bottom:9px}
.gl dd{margin:0;font-size:.92rem;color:var(--nx-ink-2);line-height:1.58}

/* ---------- FAQ (usa .faq-item/.faq-q/.faq-a do nexus.js) ---------- */
.faq-wrap{max-width:820px}
.faq{border-top:1px solid var(--nx-line)}

/* ---------- CTA: garantia (risk reversal) ---------- */
.cta-assure{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin:26px 0 0}
.cta-assure li{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--nx-ink-2)}
.cta-assure svg{width:17px;height:17px;flex:none;color:var(--nx-text-accent)}
.cds--g100 .cta-assure li{color:var(--nx-ink-2)}
.cds--g100 .cta-assure svg{color:var(--nx-accent-on-dark)}
.cta-or a{white-space:nowrap}

/* ---------- Trust-bar de órgãos (separado das lojas/infra) ---------- */
.orgbar-lab{text-align:center;font-family:var(--nx-mono);font-size:.72rem;color:var(--nx-ink-3);margin-bottom:24px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.orgbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px clamp(20px,3vw,40px)}
.orgbar .org{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;font-weight:500;color:var(--nx-ink-2)}
.orgbar .org svg{width:22px;height:22px;flex:none;color:var(--nx-text-accent)}
.orgbar-note{text-align:center;font-size:.8rem;color:var(--nx-ink-3);margin-top:22px;max-width:60ch;margin-left:auto;margin-right:auto;line-height:1.5}

/* ---------- Responsivo dos novos blocos ---------- */
@media(max-width:860px){
  .gestao-grid,.proc-grid,.gloss{grid-template-columns:1fr}
  .case-tl{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .case-tl{grid-template-columns:1fr}
  .case-tl .ct-node{padding-top:24px}
}

/* ============================================================================
   ELEVAÇÃO PREMIUM — imagens reais (self-hosted), profundidade e conteúdo.
   Banda cinematográfica full-bleed (zelo-hero) + seção 2 colunas (zelo-feat)
   + notas explicativas. Só ADIÇÃO. Cantos retos, acento via --nx-*, verde-marca.
   ============================================================================ */

/* ---------- Seção com imagem: mapa / alfinete (zelo-feat) ---------- */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.4vw,60px);align-items:center}
.feat-grid>*{min-width:0}
.feat-media{position:relative;margin:0;border:1px solid var(--nx-line);background:var(--nx-bg-soft);overflow:hidden;box-shadow:var(--nx-shadow-1)}
.feat-media::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--nx-accent);z-index:2}
.feat-media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.feat-copy .lede{margin:16px 0 24px}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.feat-list li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem;color:var(--nx-ink-2);line-height:1.5}
.feat-list li b{color:var(--nx-ink);font-weight:600}
.feat-list .ic{width:30px;height:30px;flex:none;display:grid;place-items:center;background:var(--nx-accent-soft);
  color:var(--nx-accent-ink);border:1px solid var(--nx-line);margin-top:1px}
.feat-list .ic svg{width:17px;height:17px}
.feat-note{border-left:2px solid var(--nx-accent);background:var(--nx-bg-soft);padding:14px 16px}
.feat-note .fn-lab{display:inline-flex;align-items:center;gap:8px;font-family:var(--nx-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--nx-text-accent);margin-bottom:8px}
.feat-note .fn-lab svg{width:14px;height:14px;flex:none}
.feat-note p{font-size:.86rem;color:var(--nx-ink-2);line-height:1.55;margin:0}
@media(max-width:860px){.feat-grid{grid-template-columns:1fr;gap:30px}}

/* ---------- Nota "por dentro" no acompanhar ao vivo (banda escura) ---------- */
.track-copy .inside-note{margin-top:24px;border-left:2px solid var(--nx-text-accent);padding:14px 16px;background:rgba(255,255,255,.03)}
.track-copy .inside-note .in-lab{display:inline-flex;align-items:center;gap:8px;font-family:var(--nx-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--nx-text-accent);margin-bottom:8px}
.track-copy .inside-note .in-lab svg{width:14px;height:14px;flex:none}
.track-copy .inside-note p{font-size:.86rem;color:var(--nx-ink-2);line-height:1.55;margin:0}

/* ---------- Banda cinematográfica full-bleed (zelo-hero) ---------- */
.imgband{position:relative;min-height:clamp(340px,46vw,560px);display:flex;align-items:center;overflow:hidden;
  isolation:isolate;background:#0a140e;border-top:2px solid var(--nx-accent-on-dark)}
.imgband-bg{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;z-index:0}
.imgband-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,20,14,.78),rgba(10,20,14,.15))}
.imgband-in{position:relative;z-index:2;padding:clamp(40px,6vw,72px) 0}
.imgband-kick{color:var(--nx-accent-on-dark);margin-bottom:16px}
.imgband-h{font-family:var(--nx-serif);font-weight:500;color:#fff;letter-spacing:-.015em;line-height:1.12;
  font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:20ch;text-wrap:balance}
.imgband-h em{font-style:italic;font-weight:500;color:var(--nx-accent-on-dark);-webkit-text-fill-color:currentColor}
.imgband-lede{color:rgba(255,255,255,.82);font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.55;max-width:48ch;margin-top:16px}
.imgband-stat{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.18);max-width:46ch}
.imgband-stat b{font-family:var(--nx-serif);font-weight:500;font-size:clamp(2.6rem,5vw,4rem);line-height:.9;
  color:var(--nx-accent-on-dark);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.imgband-stat span{font-size:clamp(.88rem,1.2vw,1.05rem);color:rgba(255,255,255,.8);max-width:22ch}

/* ---------- Caption release-mensal (mini-caso) ---------- */
.minicase .case-cap{display:flex;gap:10px;align-items:flex-start;text-align:left;max-width:66ch;
  margin:clamp(24px,2.8vw,32px) auto 0;font-size:.9rem;color:var(--nx-ink-2);line-height:1.55}
.minicase .case-cap svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--nx-text-accent)}
.minicase .case-cap b{color:var(--nx-ink);font-weight:600}

/* ---------- Movimento reduzido: estado final visível ---------- */
@media (prefers-reduced-motion:reduce){
  .rail .fill,.tline .lnf,.rank .bar i,.pscreen,.rstep .dot,.sbrow .sbt i{transition:none!important}
  .avail .dot,.dash-top .live i,.on .vf-brackets,.on .vf-flash,.on .shutter,.on .map-pin,.on .captured,.on .send .spin,.on .chip.sel{animation:none!important}
  .pscreen.on{opacity:1;transform:none}
  .imgband-bg{transform:none!important}
  .bpill,.infra-strip{transition:none!important}
}

/* ============================================================================
   RIQUEZA PREMIUM — ícones de marca reais (coloridos), densidade e cor.
   Faixa de lojas/serviços em pílulas coloridas · dobra da fricção com verde
   de status · faixa de infraestrutura colorida · social do rodapé colorido.
   Só ADIÇÃO. Cantos retos, acento via --nx-*, verde-marca × verde-status.
   ============================================================================ */

/* ---------- Faixa "baixe e use junto": pílulas com brand icons REAIS coloridos ---------- */
.integ-row{gap:14px clamp(14px,2vw,20px)}
.bpill{display:inline-flex;align-items:center;gap:12px;background:var(--nx-bg);border:1px solid var(--nx-line);
  padding:11px 16px;box-shadow:var(--nx-shadow-1);
  transition:border-color .16s var(--nx-ease),transform .16s var(--nx-ease),box-shadow .16s var(--nx-ease)}
.bpill:hover{border-color:var(--nx-accent);transform:translateY(-2px);box-shadow:var(--nx-shadow-2)}
.bpill .bico{width:26px;height:26px;flex:none;object-fit:contain;display:block}
.bpill .bico-gov{width:52px;height:20px}
.bpill .btxt{display:flex;flex-direction:column;line-height:1.16;min-width:0}
.bpill .btxt small{font-family:var(--nx-mono);font-size:.62rem;letter-spacing:.02em;color:var(--nx-ink-3)}
.bpill .btxt b{font-weight:600;font-size:.9rem;color:var(--nx-ink);letter-spacing:-.01em;white-space:nowrap}
.integ-row .sep{align-self:stretch;min-height:36px;height:auto}
@media(max-width:600px){.bpill{padding:9px 13px;gap:9px}.bpill .btxt small{display:none}.integ-row .sep{display:none}}

/* ---------- Dobra da fricção: superfície de acento + cartão "resolvido" (verde de status) ---------- */
.slip-stack{position:relative;display:flex;flex-direction:column;gap:18px;min-height:0;
  padding:clamp(24px,3.2vw,38px);background:var(--nx-accent-soft);
  border:1px solid color-mix(in srgb,var(--nx-accent) 22%,var(--nx-line));border-top:2px solid var(--nx-accent);
  box-shadow:var(--nx-shadow-1)}
.slip-stack .slip{position:relative;width:auto;margin:0;z-index:1}
.slip-dead{background:var(--nx-bg)}
.slip-dead.slip-2{position:absolute;top:clamp(24px,3.2vw,38px);right:clamp(20px,2.6vw,30px);left:auto;
  width:min(280px,74%);transform:translate(10px,-10px) rotate(2.2deg);opacity:.42;z-index:0;box-shadow:none}
.slip-ok{display:flex;align-items:center;gap:16px;margin-top:6px;
  border-color:color-mix(in srgb,var(--nx-green) 42%,transparent);border-top:2px solid var(--nx-green);
  box-shadow:var(--nx-shadow-2)}
.slip-ok .ok-ic{width:42px;height:42px;flex:none;display:grid;place-items:center;color:var(--nx-green-ink);
  background:color-mix(in srgb,var(--nx-green) 15%,transparent)}
.slip-ok .ok-ic svg{width:24px;height:24px}
.slip-ok .ok-body{flex:1;min-width:0}
.slip-ok .pn{color:var(--nx-green-ink)}
.slip .stamp.ok{color:var(--nx-green-ink);border-color:color-mix(in srgb,var(--nx-green) 52%,transparent);
  background:var(--nx-bg);transform:rotate(3deg)}
.fr-list .ic svg{width:18px;height:18px}

/* ---------- Faixa de infraestrutura (brand icons coloridos) na seção da gestão ---------- */
.infra-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 30px;
  padding:18px clamp(20px,3vw,30px);background:var(--nx-bg-soft);border:1px solid var(--nx-line);
  border-left:2px solid var(--nx-accent);margin-bottom:clamp(26px,3.2vw,36px);box-shadow:var(--nx-shadow-1)}
.infra-lab{display:inline-flex;align-items:center;gap:11px;font-size:.86rem;color:var(--nx-ink-2);
  line-height:1.45;max-width:54ch}
.infra-lab svg{width:20px;height:20px;flex:none;color:var(--nx-text-accent)}
.infra-logos{display:inline-flex;align-items:center;gap:clamp(18px,2.4vw,26px)}
.infra-logos .ilogo{display:inline-flex;align-items:center;height:26px;flex:none}
.infra-logos .ilogo img{height:24px;width:auto;display:block}
.infra-logos .ilogo:first-child img{height:19px}
@media(max-width:640px){.infra-strip{flex-direction:column;align-items:flex-start}}

/* ---------- Rodapé: social com brand icons reais coloridos ---------- */
.foot-brand .foot-social a{background:var(--nx-bg)}
.foot-brand .foot-social a img{width:20px;height:20px;display:block}
.foot-brand .foot-social a:hover{border-color:var(--nx-accent)}

/* ---------- Marca d'água X no vazio à direita de heads alinhados à esquerda ----------
   (glossário, "para a gestão"): preenche a metade direita vazia do cabeçalho,
   ancorada ao próprio head para nunca cair sobre texto/colunas abaixo. */
.sec-head-wm{position:relative}
.sec-head-wm::after{content:"";position:absolute;top:50%;left:calc(100% + clamp(24px,4vw,56px));
  transform:translateY(-50%);width:min(220px,20vw);aspect-ratio:1;opacity:.05;pointer-events:none;z-index:0;
  background:url(/assets/img/mark-zelo.svg) center/contain no-repeat}
.sec-head-wm>*{position:relative;z-index:1}
@media(max-width:1000px){.sec-head-wm::after{display:none}}