/* Mapa de partículas da home — peça decorativa (sem navegação). A navegação
   real por estado continua em /internacional (partials/brazil_map.html).
   Paleta: reaproveita os tokens do próprio site (--blue-500/--blue-300, que
   aqui já SÃO o verde-esmeralda da marca, apesar do nome) em vez da paleta
   neon original, para casar com as outras seções escuras da home.

   Layout: mapa à esquerda, painel à direita (telas largas); o painel desce
   para baixo do mapa em telas estreitas (ver @container abaixo). O canvas
   fica PRESO ao próprio palco (.msw-stage, overflow:hidden), diferente da
   versão de origem — lá ele é position:fixed cobrindo a janela inteira, pra
   o brilho não ser cortado na borda; aqui isso pintaria por cima do resto
   da home (nav, outras seções) ao rolar a página, então o brilho fica
   contido no próprio cartão em vez de vazar pela tela toda. */
.msw-outer{container:msw-outer / inline-size; width:100%;}
.msw-wrap{
  --msw-bg:var(--navy-950);
  --msw-bg-glow:#122a41;
  --msw-emerald:var(--blue-500);
  --msw-mint:var(--blue-300);
  --msw-ink:#eafff4;
  --msw-muted:var(--gray-300);
  position:relative; width:100%;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,420px);
  gap:clamp(20px,3vw,40px); align-items:center;
  color:var(--msw-ink); font-family:var(--sans);
}

.msw-stage{
  /* 1/1.25, não 1/1 quadrado: a decoração (halo, esferinhas orbitando no
     raio do halo, e o anel de glifos ICMS/ISS/PIS/COFINS/IPI embaixo do
     mapa) chega a uns 0,49×largura do centro -- num quadrado exato
     (metade da altura = 0,5×largura) isso cortava rente na borda de baixo.
     Na versão de origem isso nunca cortava porque o canvas lá é fixed e
     cobre a janela inteira; aqui, preso ao próprio palco, precisa da
     altura extra. */
  position:relative; justify-self:center;
  width:min(100%, 600px); aspect-ratio:1/1.25;
  border-radius:20px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 34%, var(--msw-bg-glow) 0%, var(--msw-bg) 64%);
  touch-action:pan-y; cursor:crosshair;
}
.msw-fx{position:absolute; inset:0; width:100%; height:100%; display:block;}

.msw-panel{
  width:100%; padding:20px 22px 18px; border-radius:22px;
  background:linear-gradient(160deg, rgba(16,74,60,.55), rgba(5,26,30,.84));
  border:1px solid rgba(110,231,183,.45);
  box-shadow:0 0 28px rgba(16,185,129,.22), inset 0 0 22px rgba(16,185,129,.08);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:opacity .9s ease, translate .9s cubic-bezier(.2,.8,.2,1);
}
.msw-panel.msw-hide{opacity:0; translate:0 14px;}

.msw-top{display:flex; flex-direction:column; gap:12px;}
.msw-kpi{display:flex; flex-direction:column; gap:4px;}
.msw-kpi b{
  font:700 clamp(30px,4cqw,46px)/1 var(--sans); letter-spacing:-.01em; color:var(--msw-ink);
  font-variant-numeric:tabular-nums; text-shadow:0 0 18px rgba(16,185,129,.5);
}
.msw-kpi span{font-size:12.5px; color:var(--msw-muted);}
.msw-lead{margin:0; font:600 clamp(14px,1.8cqw,17px)/1.3 var(--sans); color:var(--msw-mint); text-wrap:balance;}
.msw-lead em{font-style:normal; color:var(--msw-emerald);}

.msw-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px;}
.msw-chips button{
  padding:.65em 1em; border-radius:10px; cursor:pointer;
  font:600 12.5px/1 var(--sans); color:var(--msw-muted);
  background:rgba(8,36,38,.7); border:1px solid rgba(110,231,183,.22);
  transition:background .3s, border-color .3s, color .3s;
}
.msw-chips button:hover{color:var(--msw-ink); border-color:rgba(110,231,183,.5);}
.msw-chips button.on{color:var(--msw-ink); background:rgba(16,185,129,.16); border-color:rgba(110,231,183,.7); box-shadow:0 0 12px rgba(16,185,129,.25);}
.msw-chips button:focus-visible{outline:2px solid var(--msw-emerald); outline-offset:2px;}

.msw-foot{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-top:12px;}
.msw-status{flex:1; min-width:0; margin:0; min-height:1.4em; font-size:13px; line-height:1.4; color:#d4f7ea;}
.msw-status strong{color:var(--msw-emerald); font-weight:700;}

.msw-slot{display:grid; align-items:center; min-height:clamp(260px,38cqw,440px);}
.msw-view{min-width:0; transition:opacity .22s ease, translate .22s ease;}
.msw-view.msw-out{opacity:0; translate:0 6px;}
.msw-sec-head{margin:0 0 12px; font:600 11.5px/1.2 var(--sans); letter-spacing:.05em; text-transform:uppercase; color:var(--msw-muted);}
.msw-sec-head b{color:var(--msw-emerald); font-weight:700;}

/* Empilhado por padrão (a coluna do painel é estreita, 300-420px -- não há
   onde caber 3 cards lado a lado). Vira scroll horizontal com snap quando o
   painel desce para baixo do mapa em telas estreitas (ver @container). */
.msw-secs{display:grid; gap:10px;}
.msw-sec{
  display:flex; flex-direction:column; gap:7px; min-width:0;
  padding:13px 15px; border-radius:13px;
  background:rgba(16,185,129,.07); border:1px solid rgba(16,185,129,.22);
  animation:msw-sec-in .5s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 90ms);
}
@keyframes msw-sec-in{from{opacity:0; translate:0 8px;}}
.msw-sec-top{display:flex; align-items:center; gap:10px;}
.msw-sec .msw-ico{
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  border-radius:9px; background:rgba(16,185,129,.14); border:1px solid rgba(110,231,183,.4); color:var(--msw-emerald);
}
.msw-sec .msw-ico svg{width:62%; height:62%; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.msw-sec h4{margin:0; flex:1; min-width:0; font:700 14.5px/1.2 var(--sans); color:var(--msw-ink);}
.msw-sec .msw-tag{
  flex:none; font:700 12px/1 var(--sans); color:#042a20; background:var(--msw-emerald);
  padding:.45em .65em; border-radius:7px; box-shadow:0 0 10px rgba(16,185,129,.4); white-space:nowrap;
}
.msw-sec .msw-ctx{margin:0; font-size:12px; line-height:1.4; color:var(--msw-muted);}
.msw-sec .msw-rule{margin:0; font-size:13px; line-height:1.4; color:#d4f7ea;}
.msw-src{margin:10px 0 0; font-size:10.5px; line-height:1.35; color:rgba(203,213,225,.75);}

.msw-brasil{display:grid; gap:22px;}
.msw-pib{display:grid; gap:8px;}
.msw-pib .msw-sec-head{margin:0 0 4px;}
.msw-pib button{
  display:grid; grid-template-columns:104px 1fr 46px; align-items:center; gap:10px;
  padding:0; background:none; border:0; cursor:pointer; text-align:left;
  font:600 12.5px/1 var(--sans); color:#d4f7ea;
}
.msw-pib .msw-track{height:8px; border-radius:99px; background:rgba(16,185,129,.12); overflow:hidden;}
.msw-pib .msw-track i{
  display:block; height:100%; width:var(--w); border-radius:99px; transform-origin:left;
  background:linear-gradient(90deg, rgba(16,185,129,.45), var(--msw-emerald));
  animation:msw-bar-in .9s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 80ms);
}
@keyframes msw-bar-in{from{transform:scaleX(0);}}
.msw-pib button:hover .msw-track i{filter:brightness(1.3);}
.msw-pib button:hover span{color:var(--msw-ink);}
.msw-pib button:focus-visible{outline:2px solid var(--msw-emerald); outline-offset:3px; border-radius:6px;}
.msw-pib b{text-align:right; font-variant-numeric:tabular-nums; color:var(--msw-ink);}

.msw-replay{
  flex:none; display:inline-block; font:600 12px/1 var(--sans); color:var(--msw-mint); text-decoration:none;
  background:rgba(8,36,38,.65); border:1px solid rgba(110,231,183,.4); border-radius:999px;
  padding:8px 13px; cursor:pointer; white-space:nowrap;
}
.msw-replay:hover{background:rgba(16,185,129,.18);}
.msw-replay:focus-visible{outline:2px solid var(--msw-emerald); outline-offset:3px;}
.msw-replay[hidden]{display:none;}
/* Link real pra página do estado: mais chamativo que o "Repetir" que ele substitui. */
.msw-goto{color:#042a20; background:var(--msw-emerald); border-color:var(--msw-emerald); font-weight:700;}
.msw-goto:hover{background:var(--msw-mint); border-color:var(--msw-mint);}

/* Painel desce para baixo do mapa; os setores viram cards que deslizam */
@container msw-outer (max-width:900px){
  .msw-wrap{grid-template-columns:minmax(0,1fr); max-width:640px; margin:0 auto; gap:20px;}
  .msw-stage{width:min(100%,560px);}
  .msw-slot{min-height:262px;}
  .msw-secs{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px; padding-bottom:6px; scrollbar-width:thin; scrollbar-color:rgba(16,185,129,.4) transparent;}
  .msw-sec{flex:0 0 min(88%,330px); scroll-snap-align:start;}
  .msw-brasil{gap:16px;}
}
@container msw-outer (max-width:480px){
  .msw-panel{padding:16px 16px 14px;}
  .msw-kpi b{font-size:34px;}
  .msw-lead{display:none;}
  .msw-slot{min-height:238px;}
  .msw-pib button{grid-template-columns:88px 1fr 42px;}
}
@media (prefers-reduced-motion:reduce){ .msw-panel{transition:none;} .msw-sec, .msw-pib .msw-track i{animation:none;} }