/* Gema animada do hero da home — substitui a ilustração estática
   (img/brand/hero-hub-3d.webp) no mesmo slot (.hero-v2__art). Fundo
   transparente de propósito: a imagem que ela substitui não tinha caixa
   nem fundo próprio, só flutuava sobre o navy do hero (ver .hero-v2 em
   app.css) — reaproveitar o verde-esmeralda da marca (--blue-500/--blue-300,
   igual ao mapa-showcase) em vez da paleta neon de origem.

   .gsw-root é tanto o palco do canvas quanto o container dos cartões: os
   cartões usam unidades `cqw` (--u) pra escalar com a largura do próprio
   componente, por isso o `container` abaixo. Abaixo de 700px o JS troca
   pra modo compacto (--u fixo em px, um cartão de perfil por vez, abas) —
   nesse ponto os cartões ficam ilegíveis em cqw num componente estreito.

   Decorativo, sem informação real (números de exemplo) — por isso
   aria-hidden no container inteiro, igual ao alt="" da imagem que ele
   substitui; só o replay fica clicável (mouse), sem entrar no tab order. */
.gsw-root{
  --gsw-bg-glow:#122a41;
  --gsw-emerald:var(--blue-500);
  --gsw-mint:var(--blue-300);
  --gsw-ink:#eafff4;
  --gsw-muted:var(--gray-300);
  position:relative; width:min(100%,560px); aspect-ratio:1/1.2; margin:0 auto;
  container:gsw-root / inline-size; --u:1cqw;
  color:var(--gsw-ink); font-family:var(--sans);
}
.gsw-fx{position:absolute; inset:0; width:100%; height:100%; display:block;}

.gsw-card{
  position:absolute; pointer-events:none;
  transform:translate(-50%,-50%) perspective(1000px) rotateY(var(--gsw-ry,0deg));
  padding:calc(1.5 * var(--u)) calc(1.7 * var(--u)) calc(1.7 * var(--u));
  border-radius:calc(1.9 * var(--u));
  background:linear-gradient(160deg, rgba(14,74,60,.62), rgba(5,26,30,.82));
  border:1px solid rgba(110,231,183,.55);
  box-shadow:0 0 calc(2.6 * var(--u)) rgba(16,185,129,.32), inset 0 0 calc(2.2 * var(--u)) rgba(16,185,129,.10);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:opacity .9s ease, scale .9s cubic-bezier(.2,.8,.2,1);
  animation:gsw-bob 7s ease-in-out infinite;
}
.gsw-card.gsw-hide{opacity:0; scale:.93;}
@keyframes gsw-bob{50%{translate:0 calc(-.7 * var(--u));}}

.gsw-c-top{width:36%;}
.gsw-c-left,.gsw-c-right{width:25%;}
.gsw-c-left{--gsw-ry:9deg;}
.gsw-c-right{--gsw-ry:-9deg; animation-delay:-2.3s;}
.gsw-c-bottom{width:32%; animation-delay:-4.1s;}
.gsw-c-top{animation-delay:-1.2s;}

.gsw-head{display:flex; align-items:center; gap:calc(1 * var(--u));}
.gsw-ico{
  width:calc(3.3 * var(--u)); height:calc(3.3 * var(--u)); flex:none; display:grid; place-items:center;
  border-radius:calc(.9 * var(--u)); background:rgba(16,185,129,.14); border:1px solid rgba(110,231,183,.4); color:var(--gsw-emerald);
}
.gsw-ico svg{width:62%; height:62%; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.gsw-card h3{margin:0; font:700 calc(1.8 * var(--u))/1.1 var(--sans); color:var(--gsw-ink); letter-spacing:.01em;}
.gsw-sub{margin:calc(.35 * var(--u)) 0 0; font-size:calc(1.05 * var(--u)); line-height:1.25; color:var(--gsw-muted);}
.gsw-pill{
  margin-left:auto; font-size:calc(1 * var(--u)); padding:calc(.55 * var(--u)) calc(1 * var(--u)); border-radius:calc(.9 * var(--u)); white-space:nowrap;
  background:rgba(16,185,129,.08); border:1px solid rgba(110,231,183,.35); color:var(--gsw-mint);
}

.gsw-rows{list-style:none; margin:calc(1.3 * var(--u)) 0 0; padding:0 0 0 calc(1.5 * var(--u)); position:relative; display:grid; gap:calc(.75 * var(--u));}
.gsw-rows::before{content:""; position:absolute; left:calc(.45 * var(--u)); top:calc(.9 * var(--u)); bottom:calc(.9 * var(--u)); width:1px; background:rgba(16,185,129,.55);}
.gsw-rows li{
  position:relative; display:flex; align-items:center; gap:calc(.7 * var(--u));
  padding:calc(.8 * var(--u)) calc(.9 * var(--u)); border-radius:calc(.9 * var(--u));
  background:rgba(16,185,129,.07); border:1px solid rgba(16,185,129,.22);
  font-size:calc(1.08 * var(--u)); color:#d4f7ea;
}
.gsw-rows li::before{
  content:""; position:absolute; left:calc(-1.5 * var(--u)); top:50%; translate:0 -50%;
  width:calc(.9 * var(--u)); height:calc(.9 * var(--u)); border-radius:50%; background:var(--gsw-emerald); box-shadow:0 0 calc(.9 * var(--u)) var(--gsw-emerald);
}
.gsw-rows li span{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gsw-st{flex:none; width:calc(1.5 * var(--u)); height:calc(1.5 * var(--u));}
.gsw-st.gsw-done{fill:var(--gsw-emerald);}
.gsw-st.gsw-done path{stroke:#042a20; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;}
.gsw-st.gsw-todo{fill:none; stroke:rgba(168,255,228,.5); stroke-width:2;}

.gsw-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:calc(.8 * var(--u)); margin-top:calc(1.2 * var(--u));}
.gsw-tile{padding:calc(.8 * var(--u)) calc(.9 * var(--u)); border-radius:calc(.9 * var(--u)); background:rgba(16,185,129,.07); border:1px solid rgba(16,185,129,.22);}
.gsw-tile small{display:block; font-size:calc(.95 * var(--u)); color:var(--gsw-muted); min-height:calc(2.4 * var(--u));}
.gsw-tile b{display:block; margin:calc(.25 * var(--u)) 0; font:700 calc(1.45 * var(--u))/1.1 var(--sans); color:var(--gsw-ink); font-variant-numeric:tabular-nums; white-space:nowrap;}
.gsw-tile em{font-style:normal; font-size:calc(.95 * var(--u)); color:var(--gsw-emerald);}
.gsw-split{display:grid; grid-template-columns:1.15fr 1fr; gap:calc(.8 * var(--u)); margin-top:calc(.8 * var(--u));}
.gsw-panel{padding:calc(.8 * var(--u)) calc(.9 * var(--u)); border-radius:calc(.9 * var(--u)); background:rgba(16,185,129,.07); border:1px solid rgba(16,185,129,.22);}
.gsw-panel small{display:block; font-size:calc(.95 * var(--u)); color:var(--gsw-muted);}
.gsw-bars{display:flex; align-items:flex-end; gap:calc(.55 * var(--u)); height:calc(4.6 * var(--u)); margin-top:calc(.7 * var(--u));}
.gsw-bars i{flex:1; border-radius:calc(.25 * var(--u)) calc(.25 * var(--u)) 0 0; background:linear-gradient(to top, rgba(16,185,129,.35), var(--gsw-emerald));}
.gsw-health{display:flex; align-items:center; gap:calc(.7 * var(--u));}
.gsw-donut{width:calc(4.4 * var(--u)); height:calc(4.4 * var(--u)); flex:none; transform:rotate(-90deg);}
.gsw-donut circle{fill:none; stroke-width:4;}
.gsw-donut-bg{stroke:rgba(16,185,129,.18);}
.gsw-donut-fg{stroke:var(--gsw-emerald); stroke-linecap:round;}
.gsw-health b{font:700 calc(1.5 * var(--u))/1 var(--sans); color:var(--gsw-ink);}
.gsw-health span{display:block; margin-top:calc(.3 * var(--u)); font-size:calc(.95 * var(--u)); color:var(--gsw-muted); line-height:1.25; white-space:nowrap;}

.gsw-replay{
  position:absolute; right:2%; bottom:2%; pointer-events:auto;
  font:600 13px/1 var(--sans); color:var(--gsw-mint);
  background:rgba(8,36,38,.7); border:1px solid rgba(110,231,183,.4); border-radius:999px;
  padding:10px 16px; cursor:pointer;
}
.gsw-replay:hover{background:rgba(16,185,129,.16);}
.gsw-replay:focus-visible{outline:2px solid var(--gsw-emerald); outline-offset:3px;}

@keyframes gsw-grow{from{transform:scaleY(0);}}
@keyframes gsw-ring{from{stroke-dasharray:0 100;}}
@keyframes gsw-row-in{from{opacity:0; translate:-10px 0;}}
@keyframes gsw-pop{0%{scale:0;}60%{scale:1.35;}100%{scale:1;}}
@keyframes gsw-fill{to{transform:scaleX(1);}}
.gsw-card:not(.gsw-hide) .gsw-bars i{transform-origin:bottom; animation:gsw-grow .9s cubic-bezier(.2,.8,.2,1) calc(.5s + var(--i,0) * .07s) both;}
.gsw-card:not(.gsw-hide) .gsw-donut-fg{animation:gsw-ring 1.4s cubic-bezier(.2,.8,.2,1) .6s both;}
.gsw-card:not(.gsw-hide) .gsw-rows li{animation:gsw-row-in .6s cubic-bezier(.2,.8,.2,1) calc(.35s + var(--i,0) * .11s) both;}
.gsw-card:not(.gsw-hide) .gsw-st.gsw-done{animation:gsw-pop .5s cubic-bezier(.3,1.6,.5,1) calc(.9s + var(--i,0) * .14s) both;}
.gsw-card .gsw-st.gsw-done.gsw-pop-once{animation:gsw-pop .55s cubic-bezier(.3,1.6,.5,1) both;}
.gsw-rows li.gsw-flash{background:rgba(16,185,129,.2); border-color:rgba(110,231,183,.6);}
.gsw-rows li{transition:background .8s ease, border-color .8s ease;}

.gsw-tabs{position:absolute; left:3%; width:94%; display:none; gap:6px; transition:opacity .9s ease; pointer-events:none;}
.gsw-tabs.gsw-hide{opacity:0;}
.gsw-tabs button{
  position:relative; overflow:hidden; flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 6px; border-radius:12px; cursor:pointer; pointer-events:auto;
  font:600 12px/1 var(--sans); color:var(--gsw-muted);
  background:rgba(8,36,38,.7); border:1px solid rgba(110,231,183,.22);
}
.gsw-tabs button svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.gsw-tabs button.gsw-on{color:var(--gsw-ink); background:rgba(16,185,129,.14); border-color:rgba(110,231,183,.7); box-shadow:0 0 12px rgba(16,185,129,.25);}
.gsw-tabs button:focus-visible{outline:2px solid var(--gsw-emerald); outline-offset:2px;}
.gsw-tabs .gsw-bar{position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--gsw-emerald); transform-origin:left; transform:scaleX(0);}
.gsw-tabs button.gsw-on .gsw-bar{animation:gsw-fill var(--gsw-rot,5.2s) linear forwards;}

@media (max-width:700px){
  /* 1.9 não sobrava altura suficiente: o cartão "Visão Geral" (sempre
     visível, ~172px) terminava depois de onde a faixa de abas (data-my=
     47.2%) começava, e as duas ficavam sobrepostas. 2.1 resolvia na conta
     teórica, mas o card é altura fixa em px (--u) enquanto o espaço
     disponível só cresce com a LARGURA — texto maior por acessibilidade do
     aparelho (ajuste do sistema, zoom) infla o card sem avisar o CSS. 2.3
     dá uma folga bem maior de propósito, pra sobreviver a essa variação em
     vez de calibrar de novo pro pixel exato de um device. */
  .gsw-root{--u:10px; width:min(100%,400px); aspect-ratio:1/2.3;}
  .gsw-card{transform:translate(-50%,0); animation:none; width:94% !important;}
  .gsw-card.gsw-off{opacity:0; pointer-events:none;}
  .gsw-c-top .gsw-sub, .gsw-c-top .gsw-split{display:none;}
  .gsw-c-top .gsw-pill{display:none;}
  .gsw-tile b{font-size:calc(1.3 * var(--u));}
  .gsw-tabs{display:flex;}
  .gsw-replay{right:3%; bottom:1%;}
}
@media (prefers-reduced-motion:reduce){
  .gsw-card{animation:none; transition:none;}
  .gsw-card *{animation:none !important;}
  .gsw-tabs .gsw-bar{display:none;}
}