/* ===== korum — painel de demonstração animado (compartilhado pelos 3 layouts) ===== */
.mock{position:relative;transform:rotate(1.2deg)}
.mock .glow{position:absolute;inset:-12%;background:radial-gradient(60% 60% at 50% 45%,rgba(75,158,151,.34),transparent 70%);filter:blur(8px);pointer-events:none}
.float-tag{position:absolute;right:-14px;top:-16px;z-index:3;background:#2e9e6b;color:#fff;font-weight:700;font-size:13px;padding:9px 16px;border-radius:12px;box-shadow:0 14px 30px -10px rgba(46,158,107,.6);transform:rotate(3deg)}

.panel{position:relative;background:rgba(13,32,30,.92);border:1px solid rgba(255,255,255,.12);border-radius:22px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:20px;box-shadow:0 36px 90px -28px rgba(0,0,0,.62);color:#fff;transition:opacity .45s}
.panel.fade{opacity:.25}
.panel .ph{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:12px}
.panel .ph .dots i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;background:rgba(255,255,255,.16)}
.panel .ph .ttl{font-size:12.5px;color:#9db8b3;margin-left:6px}
.badge-demo{margin-left:auto;font-size:11px;font-weight:600;color:#8fb3ad;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:3px 10px;border-radius:99px;white-space:nowrap;text-transform:uppercase;letter-spacing:.06em}
.badge-live{font-size:11px;font-weight:600;color:#7fd1c9;background:rgba(75,158,151,.15);border:1px solid rgba(75,158,151,.35);padding:3px 10px;border-radius:99px;white-space:nowrap}
.badge-live.scan{color:#ffd28a;background:rgba(185,129,12,.16);border-color:rgba(185,129,12,.45)}

.mrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;color:#8fb3ad;padding:5.5px 0}
.mrow b{color:#fff;font-weight:600;text-align:right;min-height:18px}
.mval{transition:opacity .3s}
.mval.dim{opacity:.25}
.mval.flash{animation:mflash .5s}
@keyframes mflash{0%{color:#9fe0d8}100%{color:#fff}}

/* CEP slot-machine */
.cep{display:inline-flex;gap:3px;font-family:"Sora",monospace;font-weight:700}
.cep i,.cep em{font-style:normal;display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:24px;border-radius:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:13.5px;color:#b8cfcb;transition:.18s}
.cep em{background:transparent;border:0;min-width:8px;color:#5d827c}
.cep i.lock{background:rgba(75,158,151,.2);border-color:rgba(75,158,151,.55);color:#9fe0d8;transform:translateY(-1px)}

/* chips de critérios */
.chiprow{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 4px}
.chip{font-size:11px;font-weight:600;color:#9fd4cf;border:1px solid rgba(75,158,151,.4);background:rgba(75,158,151,.1);padding:4px 10px;border-radius:99px;transition:.25s;opacity:.35;transform:translateY(2px)}
.chip.on{opacity:1;transform:none;box-shadow:0 0 0 3px rgba(75,158,151,.08)}

/* raio */
.raio{display:flex;align-items:center;gap:10px;font-size:12px;color:#8fb3ad;margin:10px 0 4px}
.raio .rt{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.raio .rt i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#4B9E97,#7fd1c9);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.raio b{color:#9fe0d8;font-size:12.5px;min-width:52px;text-align:right}

/* status da varredura */
.mstat{font-size:11.5px;color:#7fa39d;min-height:16px;margin:6px 0 12px}
.mstat b{color:#9fe0d8}

/* mapa + KPIs */
.mbot{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:stretch}
#m-map{width:132px;height:132px;display:block}
#m-map .mapbg{fill:#0a1715;stroke:rgba(255,255,255,.09)}
#m-map .mapgrid line{stroke:rgba(127,209,201,.08);stroke-width:1}
#map-ring{fill:rgba(75,158,151,.09);stroke:#4B9E97;stroke-width:1.2;opacity:0}
#map-dots circle{fill:#7fd1c9;opacity:0;transition:opacity .3s}
#map-dots circle.ap{fill:#5fd49e}
#map-pin{fill:#fff;stroke:#4B9E97;stroke-width:2}
#map-pulse{fill:none;stroke:#7fd1c9;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:mpulse 2.2s ease-out infinite}
@keyframes mpulse{0%{transform:scale(.6);opacity:.8}80%{transform:scale(2.6);opacity:0}100%{opacity:0}}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
/* altura fixa: o preenchimento animado dos valores não pode mexer na grade */
.kpi{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:8px 10px;height:54px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.kpi b{font-family:"Sora";font-size:14px;color:#fff;line-height:1.25;white-space:nowrap;font-variant-numeric:tabular-nums}
.kpi span{font-size:10.5px;color:#8fb3ad}
.kpi.hl{background:rgba(75,158,151,.16);border-color:rgba(75,158,151,.4)}
.kpi.hl b{color:#9fe0d8}
.kpi.excel{opacity:.35;transition:.4s;cursor:default}
.kpi.excel.ready{opacity:1;background:rgba(46,158,107,.18);border-color:rgba(46,158,107,.55);box-shadow:0 0 22px -6px rgba(46,158,107,.55);animation:xpop .5s}
.kpi.excel.ready b{color:#5fd49e}
@keyframes xpop{0%{transform:scale(.92)}60%{transform:scale(1.05)}100%{transform:scale(1)}}

.mock-note{font-size:11.5px;color:#7fa39d;text-align:center;margin-top:12px}

@media(max-width:520px){
  .mbot{grid-template-columns:1fr}
  #m-map{width:100%;height:150px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .mock{transform:none}
}