/* Tecela AI · "a trama" (seção Como funciona da home e topo de /dados).
   Fios de dados atravessam a seção, passam pelas fontes, são tecidos no T da marca e saem como decisão.
   Conceito ilustrativo: nenhum dado real, nenhum número. Movimento em hero-weave.js. */

/* ---------- Tokens (tema escuro é o padrão do site) ---------- */
[data-hw-host] {
  --hw-card:#0E1B2E; --hw-line:#263D5A; --hw-line-2:#35547A;
  --hw-ink:#EAF1FC; --hw-ink-2:#A9BCD6; --hw-ink-3:#7189A8;
  --hw-blue:#629BFF; --hw-cyan:#ED9C55; --hw-on-blue:#08162A;
  --hw-skel:#284262; --hw-skel-2:#1B304B;
  --hw-out-card:#0E1B2E; --hw-out-line:#263D5A;
  --hw-shadow:0 18px 44px #02081480;
  --hw-rgb-a:104,146,198; --hw-rgb-b:98,155,255; --hw-rgb-c:237,156,85; --hw-rgb-p:215,236,255;
  --hw-glow:1;
  position:relative; overflow:hidden; isolation:isolate;
}
:root[data-theme="light"] [data-hw-host] {
  --hw-card:#FFFFFF; --hw-line:#D5DEEA; --hw-line-2:#B8C8DD;
  --hw-ink:#142237; --hw-ink-2:#485A73; --hw-ink-3:#5E7190;
  --hw-blue:#2459DB; --hw-cyan:#A24E10; --hw-on-blue:#FFFFFF;
  --hw-skel:#D9E2EE; --hw-skel-2:#E8EDF4;
  --hw-out-card:#FFFFFF; --hw-out-line:#D5DEEA;
  --hw-shadow:0 14px 36px #1422371A;
  --hw-rgb-a:36,89,219; --hw-rgb-b:36,89,219; --hw-rgb-c:162,78,16; --hw-rgb-p:36,89,219;
  --hw-glow:0;
}
[data-hw-host]>.container {position:relative;z-index:1}
[data-hw-host] .hero-art::before {display:none}
/* Em /dados o link do palco apontaria para a própria página. */
.hw-host-dados .hw-more {display:none}

/* ---------- Camadas criadas pelo script ---------- */
.hw-canvas {position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.3) 0,rgba(0,0,0,.3) calc(var(--hw-ms,50%) - 260px),#000 var(--hw-ms,50%));
          mask-image:linear-gradient(90deg,rgba(0,0,0,.3) 0,rgba(0,0,0,.3) calc(var(--hw-ms,50%) - 260px),#000 var(--hw-ms,50%))}
.hw-frags {position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hw-frag {position:absolute;left:0;top:0;padding:4px 9px 5px;border-radius:99px;font:600 10px/1 var(--font-sans);letter-spacing:.01em;white-space:nowrap;
  color:#D9E9FF;background:#12294A;border:1px solid #3F6A9E;box-shadow:0 0 18px #629BFF40;opacity:0;will-change:transform,opacity}
.hw-frag[data-src="2"] {color:#CFF6F2;background:#0F2C35;border-color:#2F6E73;box-shadow:0 0 18px #6DD9D140}
:root[data-theme="light"] .hw-frag {color:#1B4CC4;background:#EAF0FC;border-color:#BCCDF1;box-shadow:0 6px 16px #2459DB22}
:root[data-theme="light"] .hw-frag[data-src="2"] {color:#11697A;background:#E6F4F6;border-color:#B3DAE0;box-shadow:0 6px 16px #A24E1022}

/* ---------- Palco ---------- */
.hw {position:relative;color:var(--hw-ink);padding:6px 0 0}
.hw-corner {position:absolute;width:11px;height:11px;border:0 solid var(--hw-line-2);pointer-events:none}
.hw-tl {top:-8px;left:-14px;border-width:1px 0 0 1px}.hw-tr {top:-8px;right:-14px;border-width:1px 1px 0 0}
.hw-bl {bottom:-8px;left:-14px;border-width:0 0 1px 1px}.hw-br {bottom:-8px;right:-14px;border-width:0 1px 1px 0}
.hw-hud {display:flex;justify-content:space-between;gap:12px;font:9px/1.4 var(--font-mono);letter-spacing:.08em;color:var(--hw-ink-3)}
.hw-id {display:inline-flex;align-items:center;gap:8px;color:var(--hw-ink-2)}
.hw-signal {width:6px;height:6px;border-radius:50%;background:var(--hw-cyan);box-shadow:0 0 0 4px color-mix(in srgb,var(--hw-cyan) 14%,transparent)}

/* Mapa: fontes → contexto → decisão */
.hw-map {--hw-flow:row;position:relative;display:grid;grid-template-columns:minmax(0,158px) auto minmax(0,158px);grid-template-areas:"src core out" "base base base";justify-content:space-between;column-gap:52px;row-gap:26px;align-items:center;margin:30px 0 6px}
.hw-sources {grid-area:src}.hw-center {grid-area:core}.hw-outputs {grid-area:out}
.hw-map::before {content:"";position:absolute;inset:-12% -8%;z-index:-1;pointer-events:none;opacity:.55;
  background-image:radial-gradient(color-mix(in srgb,var(--hw-ink-3) 55%,transparent) .6px,transparent .75px);background-size:16px 16px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000,transparent 68%);mask-image:radial-gradient(ellipse at 50% 50%,#000,transparent 68%)}
.hw-col {display:flex;flex-direction:column;gap:15px;min-width:0}
.hw-center {display:flex;flex-direction:column;align-items:center;gap:15px}
.hw-step {display:flex;align-items:center;gap:6px;min-height:12px;font:10px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hw-ink-3);transition:color .4s}
.hw-step i {font-style:normal;opacity:.75}
.hw-step::before {content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:0;transform:scale(.4);transition:opacity .4s,transform .4s}
.hw-step.is-on {color:var(--hw-blue)}
.hw-step.is-on::before {opacity:1;transform:none;box-shadow:0 0 8px currentColor}
.hw-outputs .hw-step.is-on {color:var(--hw-cyan)}

.hw-card {position:relative;display:flex;flex-direction:column;gap:9px;min-width:0;padding:10px 11px 11px;border:1px solid var(--hw-line);border-radius:10px;background:var(--hw-card);box-shadow:var(--hw-shadow);
  transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.16,.9,.24,1),border-color .35s,box-shadow .35s}
.hw-card-head {display:flex;align-items:center;gap:7px;min-width:0;font-size:12px;line-height:1.2}
.hw-card-head b {font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:50% 60%}
.hw-icon {display:grid;place-items:center;width:15px;height:15px;flex:none;color:var(--hw-blue)}
.hw-icon svg {width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.hw-idx {margin-left:auto;font:9px var(--font-mono);color:var(--hw-ink-3)}
.hw-dot {width:6px;height:6px;flex:none;border-radius:50%;background:var(--hw-line-2);transition:background .4s,box-shadow .4s}
.hw-output {background:var(--hw-out-card);border-color:var(--hw-out-line)}
.hw-output.is-built .hw-dot {background:var(--hw-cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--hw-cyan) 18%,transparent)}
.hw-card.is-hot {border-color:color-mix(in srgb,var(--hw-blue) 60%,var(--hw-line))}
.hw-output.is-hot {border-color:color-mix(in srgb,var(--hw-cyan) 60%,var(--hw-out-line))}
.hw-card::after {content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--hw-blue);opacity:0;pointer-events:none}
.hw-card.is-emit::after {animation:hw-emit .75s ease-out}
.hw-output.is-emit::after {border-color:var(--hw-cyan)}
@keyframes hw-emit {0% {opacity:.9;box-shadow:0 0 22px color-mix(in srgb,var(--hw-blue) 45%,transparent)} 100% {opacity:0;box-shadow:0 0 0 transparent}}
.hw-card-head b.is-flip {animation:hw-flip .6s cubic-bezier(.2,.8,.2,1)}
@keyframes hw-flip {0% {opacity:0;transform:perspective(200px) rotateX(-85deg)} 100% {opacity:1;transform:none}}
.hw-viz {position:relative;display:block;height:34px;transition:opacity .35s}
.hw-viz.is-swap {opacity:0}

/* Núcleo: sempre tinta, nos dois temas */
.hw-core {position:relative;width:148px;height:148px;flex:none;border-radius:50%;color:#EAF1FC;
  background:radial-gradient(circle at 36% 22%,#244F7B,#10213A 60%,#0B172A);border:1px solid #5D8CBC;
  box-shadow:0 0 0 7px color-mix(in srgb,#5D8CBC 9%,transparent),0 0 70px #6DACEC2A,inset 0 1px 12px #A3DCFF26;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.16,.9,.24,1)}
:root[data-theme="light"] .hw-core {box-shadow:0 0 0 7px #2459DB14,0 22px 50px #14223733,inset 0 1px 12px #A3DCFF26}
.hw-core-canvas {position:absolute;left:50%;top:50%;width:184%;height:184%;transform:translate(-50%,-50%);pointer-events:none}
.hw-core-mark {position:absolute;left:50%;top:50%;width:54%;height:54%;transform:translate(-50%,-50%);color:#BCE8FF}
.hw-live .hw-core-mark {display:none}
/* O rótulo do centro fica sobre os fios: um halo da cor do fundo, sem caixa visível. */
.hw-center .hw-step {position:relative;z-index:1;padding:6px 22px;background:radial-gradient(closest-side,color-mix(in srgb,var(--bg) 94%,transparent) 62%,transparent)}

/* Base do contexto: Dados e Agentes de IA sustentam o T. */
/* contain: a linha da base não alarga a coluna do núcleo (senão as colunas laterais encolhem). */
.hw-base {grid-area:base;position:relative;z-index:1;display:flex;justify-content:center;gap:30px;contain:inline-size}
.hw-mod {position:relative;display:flex;align-items:center;gap:13px;width:232px;min-width:0;padding:12px 15px 12px 13px;border:1px solid var(--hw-line);border-radius:12px;background:var(--hw-card);box-shadow:var(--hw-shadow);
  transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.16,.9,.24,1),border-color .4s,box-shadow .4s}
.hw-glyph {flex:none;width:42px;height:42px;overflow:visible}
.hw-data .g-disc {fill:var(--hw-card);stroke:var(--hw-blue);stroke-width:1.3;transition:fill .45s}
.hw-data .g-disc.is-lit {fill:color-mix(in srgb,var(--hw-blue) 42%,var(--hw-card));transition-duration:.08s}
.hw-agents .g-edge {fill:none;stroke:var(--hw-line-2);stroke-width:1.2;transition:stroke .4s}
.hw-agents .g-spark {fill:var(--hw-cyan);opacity:.55;transition:opacity .4s}
.hw-agents .g-node {fill:var(--hw-card);stroke:var(--hw-cyan);stroke-width:1.4;transition:fill .25s}
.hw-agents .g-node.is-lit {fill:var(--hw-cyan)}
.hw-agents.is-active .g-edge {stroke:color-mix(in srgb,var(--hw-cyan) 60%,var(--hw-line-2))}
.hw-agents.is-active .g-spark {opacity:1}
.hw-mod-text {display:grid;gap:2px;min-width:0}
.hw-mod-text b {font-size:14px;font-weight:650;line-height:1.15;letter-spacing:-.02em}
.hw-mod-text small {font-size:10.5px;line-height:1.35;color:var(--hw-ink-2)}
.hw-mod-text em {display:inline-flex;align-items:center;gap:6px;margin-top:5px;font:8.5px/1 var(--font-mono);font-style:normal;letter-spacing:.09em;text-transform:uppercase;color:var(--hw-ink-3);transition:color .3s}
.hw-mod-text em i {flex:none;width:5px;height:5px;border-radius:50%;background:var(--hw-line-2);transition:background .3s,box-shadow .3s}
.hw-data.is-active {border-color:color-mix(in srgb,var(--hw-blue) 55%,var(--hw-line));box-shadow:var(--hw-shadow),0 0 28px color-mix(in srgb,var(--hw-blue) 20%,transparent)}
.hw-agents.is-active {border-color:color-mix(in srgb,var(--hw-cyan) 55%,var(--hw-line));box-shadow:var(--hw-shadow),0 0 28px color-mix(in srgb,var(--hw-cyan) 20%,transparent)}
.hw-data.is-active em {color:var(--hw-blue)}.hw-data.is-active em i {background:var(--hw-blue);box-shadow:0 0 8px var(--hw-blue)}
.hw-agents.is-active em {color:var(--hw-cyan)}.hw-agents.is-active em i {background:var(--hw-cyan);box-shadow:0 0 8px var(--hw-cyan)}
.hw-mod.is-hot {border-color:color-mix(in srgb,var(--hw-blue) 60%,var(--hw-line))}

/* Pergunta do cenário e controles */
.hw-insight {position:relative;display:flex;gap:14px;align-items:center;min-height:88px;margin-top:20px;padding:15px 0 13px;border-top:1px solid var(--hw-line)}
.hw-insight::before {content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:linear-gradient(90deg,transparent,var(--hw-blue) 60%,var(--hw-cyan));transform:scaleX(var(--hw-scan,0));transform-origin:left;opacity:.8}
.hw-insight-icon {display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid var(--hw-line-2);border-radius:50%;color:var(--hw-cyan);font-size:20px}
.hw-insight small {display:block;font:9px/1.4 var(--font-mono);letter-spacing:.1em;color:var(--hw-cyan)}
/* A altura da pergunta é fixa: trocar de cenário nunca empurra o palco nem o texto do hero. */
.hw-insight p {margin:6px 0 0;font-size:16px;line-height:1.45;letter-spacing:-.015em;max-width:none}
.hw-controls {display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:4px}
.hw-scenarios {display:flex;gap:3px;padding:4px;border:1px solid var(--hw-line);border-radius:8px;background:color-mix(in srgb,var(--hw-card) 72%,transparent)}
.hw-scenarios button {position:relative;overflow:hidden;min-height:36px;padding:8px 15px;border:0;border-radius:5px;background:transparent;color:var(--hw-ink-2);font-size:11px;font-weight:600;transition:background .25s,color .25s}
.hw-scenarios button:hover {color:var(--hw-ink);background:color-mix(in srgb,var(--hw-blue) 14%,transparent)}
.hw-scenarios button[aria-pressed="true"] {background:var(--hw-blue);color:var(--hw-on-blue)}
.hw-progress {position:absolute;left:9px;right:9px;bottom:4px;height:2px;border-radius:2px;background:currentColor;opacity:0;transform:scaleX(var(--p,0));transform-origin:left}
.hw-scenarios button[aria-pressed="true"] .hw-progress {opacity:.4}
.hw-toggle {display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--hw-line);border-radius:50%;background:transparent;color:var(--hw-ink-2)}
.hw-toggle:hover {color:var(--hw-ink);border-color:var(--hw-line-2)}
.hw-toggle svg {width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hw-toggle .hw-i-play {display:none;fill:currentColor;stroke-width:1}
.hw-toggle.is-paused .hw-i-play {display:block}.hw-toggle.is-paused .hw-i-pause {display:none}
.hw-more {display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:auto;font-size:11px;font-weight:650;color:var(--hw-blue)}
.hw-more span {font-size:17px;font-weight:400}

/* Tipografia cinética (palavras sobem e ganham foco) */
.hw-w {display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.hw-w>span {display:inline-block;transform:translateY(108%);opacity:0;filter:blur(6px);
  transition:transform .85s cubic-bezier(.16,.9,.24,1),opacity .6s ease,filter .7s ease;transition-delay:calc(var(--d,0) * 48ms + var(--d0,0ms))}
.is-shown .hw-w>span {transform:none;opacity:1;filter:none}
.hw-insight:not(.is-shown) .hw-w>span {transition-duration:.35s,.3s,.3s;transition-delay:calc(var(--d,0) * 12ms)}
.hw-insight small {transition:opacity .4s,clip-path .7s cubic-bezier(.2,.8,.2,1);clip-path:inset(0 100% 0 0);opacity:0}
.hw-insight.is-shown small {clip-path:inset(0 0 0 0);opacity:1}

/* Estados de entrada (somente com o script ativo) */
.hw-live .hw-card.is-pre {opacity:0;transform:translateX(-16px) scale(.95)}
.hw-live .hw-output.is-pre {transform:translateX(16px) scale(.95)}
.hw-live .hw-mod.is-pre {opacity:0;transform:translateY(14px) scale(.96)}
.hw-live .hw-core.is-pre {opacity:0;transform:scale(.82)}
.hw-live .hw-hud,.hw-live .hw-corner,.hw-live .hw-controls,.hw-live .hw-step {transition:opacity .9s ease}
.hw-live.is-intro .hw-hud,.hw-live.is-intro .hw-corner,.hw-live.is-intro .hw-controls {opacity:0}
.hw-pre:not(.hw-live) .hw-card,.hw-pre:not(.hw-live) .hw-mod,.hw-pre:not(.hw-live) .hw-core,.hw-pre:not(.hw-live) .hw-controls {opacity:0;animation:hw-failsafe .01s 2.4s forwards}
@keyframes hw-failsafe {to {opacity:1}}
.hw:not(.hw-pre):not(.hw-live) .hw-scenarios,.hw:not(.hw-pre):not(.hw-live) .hw-toggle {display:none}

/* ---------- Miniaturas: fontes ---------- */
.v-table {position:absolute;inset:0}
.v-table i {position:absolute;left:0;height:5px;border-radius:3px;width:var(--w);background:linear-gradient(90deg,var(--hw-skel) 0 13px,transparent 13px 18px,var(--hw-skel-2) 18px)}
.v-table i:nth-child(1) {top:4px}.v-table i:nth-child(2) {top:15px}.v-table i:nth-child(3) {top:26px}
.v-table em {position:absolute;left:-5px;right:-5px;top:1px;height:11px;border-radius:4px;background:color-mix(in srgb,var(--hw-blue) 13%,transparent);border:1px solid color-mix(in srgb,var(--hw-blue) 38%,transparent);animation:v-scan 3.2s cubic-bezier(.65,0,.2,1) infinite}
@keyframes v-scan {0%,24% {transform:translateY(0)} 33%,57% {transform:translateY(11px)} 66%,90% {transform:translateY(22px)} 100% {transform:translateY(0)}}
.v-wave {position:absolute;left:0;right:0;top:0;height:21px;display:flex;align-items:center;justify-content:space-between}
.v-wave i {width:2px;height:100%;border-radius:2px;background:var(--hw-blue);opacity:.8;transform:scaleY(calc(var(--h) * .7));animation:v-wave 1.15s ease-in-out infinite;animation-delay:calc(var(--i) * -.19s)}
@keyframes v-wave {0%,100% {transform:scaleY(.16)} 50% {transform:scaleY(var(--h))}}
.v-line {position:absolute;left:0;bottom:2px;height:5px;border-radius:3px;background:var(--hw-skel);width:84%;transform-origin:left;animation:v-type 3.4s steps(14) infinite}
@keyframes v-type {0% {transform:scaleX(.08)} 80%,100% {transform:scaleX(1)}}
.v-stream {position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.v-stream>span {display:flex;align-items:flex-end;gap:5px;height:100%;width:max-content;padding-bottom:3px;animation:v-stream 5s linear infinite}
.v-stream i {width:2px;height:calc(var(--h) * 1%);border-radius:1px;background:var(--hw-skel)}
.v-stream i.is-ev {background:var(--hw-blue);box-shadow:0 -2px 0 1px color-mix(in srgb,var(--hw-blue) 30%,transparent)}
.v-stream::after {content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--hw-skel)}
@keyframes v-stream {to {transform:translateX(-50%)}}
.v-doc,.v-receipt {position:absolute;inset:0;display:flex;gap:9px;align-items:center}
.v-page {position:relative;flex:none;width:23px;height:31px;border-radius:2px;background:var(--hw-skel-2);border:1px solid var(--hw-skel);clip-path:polygon(0 0,70% 0,100% 24%,100% 100%,0 100%)}
.v-page::after {content:"";position:absolute;left:4px;right:4px;top:11px;height:12px;background:repeating-linear-gradient(var(--hw-skel) 0 2px,transparent 2px 5px)}
.v-slip {position:relative;flex:none;width:19px;height:31px;background:var(--hw-skel-2);border:1px solid var(--hw-skel);clip-path:polygon(0 0,100% 0,100% 88%,84% 100%,67% 88%,50% 100%,33% 88%,16% 100%,0 88%)}
.v-slip::after {content:"";position:absolute;left:4px;right:4px;top:6px;height:14px;background:repeating-linear-gradient(var(--hw-skel) 0 2px,transparent 2px 5px)}
.v-lines {position:relative;flex:1;display:grid;gap:6px}
.v-lines i {display:block;height:4px;border-radius:2px;background:var(--hw-skel);width:var(--w)}
.v-doc em {position:absolute;left:30px;top:13px;height:8px;width:62%;border-radius:2px;background:color-mix(in srgb,var(--hw-blue) 32%,transparent);transform-origin:left;animation:v-mark 3s cubic-bezier(.65,0,.3,1) infinite}
@keyframes v-mark {0% {transform:scaleX(0);opacity:1} 45%,80% {transform:scaleX(1);opacity:1} 100% {transform:scaleX(1);opacity:0}}
.v-receipt em {position:absolute;right:2px;top:5px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--hw-blue);opacity:.85;animation:v-stamp 3s cubic-bezier(.2,.9,.3,1.3) infinite}
@keyframes v-stamp {0%,30% {transform:scale(1.8);opacity:0} 42%,82% {transform:scale(1);opacity:.85} 100% {transform:scale(1);opacity:0}}

/* ---------- Miniaturas: decisões (montadas quando o card recebe .is-built) ---------- */
.hw-viz svg {position:absolute;inset:0;width:100%;height:100%;overflow:visible;clip-path:inset(-4px 102% -4px -4px);transition:clip-path 1.15s cubic-bezier(.5,0,.2,1) .15s}
.is-built .hw-viz svg {clip-path:inset(-4px -4px -4px -4px)}
.hw-viz svg path {fill:none;stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.v-scatter i {position:absolute;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--hw-cyan);opacity:.9;left:calc(var(--x0) * 1%);top:calc(var(--y0) * 1%);
  transition:left .95s cubic-bezier(.3,.9,.2,1),top .95s cubic-bezier(.3,.9,.2,1);transition-delay:calc(var(--d) * 45ms)}
.is-built .v-scatter i {left:calc(var(--x1) * 1%);top:calc(var(--y1) * 1%)}
.v-scatter path {stroke:var(--hw-cyan);opacity:.75}
.v-scatter svg {transition-delay:.6s}
.v-rank i {position:absolute;left:0;right:0;height:9px;display:flex;align-items:center;gap:6px;transition:transform .9s cubic-bezier(.34,1.45,.5,1)}
.v-rank i::before {content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--hw-line-2)}
.v-rank i::after {content:"";height:5px;border-radius:3px;width:var(--w);background:var(--hw-skel);transition:background .5s}
.v-rank .r1 {top:1px;transform:translateY(22px)}.v-rank .r2 {top:1px;transform:translateY(0)}.v-rank .r3 {top:1px;transform:translateY(11px)}
.is-built .v-rank .r1 {transform:translateY(0)}.is-built .v-rank .r2 {transform:translateY(11px)}.is-built .v-rank .r3 {transform:translateY(22px)}
.is-built .v-rank .r1::before {background:var(--hw-cyan);box-shadow:0 0 8px var(--hw-cyan)}
.is-built .v-rank .r1::after {background:color-mix(in srgb,var(--hw-cyan) 70%,transparent)}
.v-action {position:absolute;inset:0;font-size:10.5px;line-height:1.3;color:var(--hw-ink);letter-spacing:-.005em}
.v-caret {display:inline-block;width:1px;height:11px;margin-left:1px;vertical-align:-1px;background:var(--hw-cyan);animation:v-blink 1s steps(1) infinite}
@keyframes v-blink {50% {opacity:0}}
.v-anomaly path {stroke:var(--hw-cyan);opacity:.8}
.v-anomaly i,.v-branch i,.v-forecast i {position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--hw-cyan)}
.v-anomaly i {opacity:0;transform:scale(.3);transition:opacity .4s .9s,transform .5s .9s cubic-bezier(.3,1.6,.5,1)}
.v-anomaly i::after {content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--hw-cyan);opacity:0}
.is-built .v-anomaly i {opacity:1;transform:none}
.is-built .v-anomaly i::after {animation:v-ring 1.8s ease-out 1.2s infinite}
@keyframes v-ring {0% {opacity:.8;transform:scale(.6)} 100% {opacity:0;transform:scale(1.8)}}
.v-branch path {stroke:var(--hw-line-2)}
.v-branch path.hot {stroke:var(--hw-cyan)}
.v-branch i {background:var(--hw-line-2);transition:background .4s 1s}
.is-built .v-branch i.hot {background:var(--hw-cyan);box-shadow:0 0 8px var(--hw-cyan)}
.v-match {position:absolute;inset:0}
.v-match b {position:absolute;width:22%;height:6px;border-radius:3px;background:var(--hw-skel)}
.v-match path {stroke:var(--hw-line-2)}
.v-match path.hot {stroke:var(--hw-cyan)}
.v-match b.hot {transition:background .4s 1s}
.is-built .v-match b.hot {background:color-mix(in srgb,var(--hw-cyan) 75%,transparent)}
.v-forecast .hist {stroke:var(--hw-cyan)}
.v-forecast .fut {stroke:var(--hw-cyan);stroke-dasharray:3 3;opacity:0;transition:opacity .5s 1s}
.v-forecast .band {fill:var(--hw-cyan);stroke:none;opacity:0;transition:opacity .7s 1.1s}
.is-built .v-forecast .fut {opacity:.8}.is-built .v-forecast .band {opacity:.14}
.v-forecast i {opacity:0;transition:opacity .4s .9s}.is-built .v-forecast i {opacity:1}
.v-bars {position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:1px}
.v-bars i {width:9%;height:calc(var(--h) * 1%);border-radius:2px 2px 0 0;background:var(--hw-skel);transform:scaleY(.08);transform-origin:bottom;transition:transform .8s cubic-bezier(.3,1.35,.5,1),background .4s;transition-delay:calc(var(--d) * 70ms)}
.is-built .v-bars i {transform:none}
.is-built .v-bars i.hot {background:var(--hw-cyan)}

/* Loops das miniaturas só rodam enquanto a animação toca */
.hw-viz *,.hw-viz *::after {animation-play-state:paused}
.hw.is-playing .hw-viz *,.hw.is-playing .hw-viz *::after {animation-play-state:running}
.hw.is-static .hw-card,.hw.is-static .hw-mod,.hw.is-static .hw-core,.hw.is-static .hw-viz *,.hw.is-static .hw-w>span,.hw.is-static .hw-insight small {transition:none!important}

/* ---------- Responsivo ---------- */
@media(max-width:1100px) and (min-width:961px) {
  .hw-map {column-gap:40px;grid-template-columns:minmax(0,150px) auto minmax(0,150px)}
  .hw-core {width:128px;height:128px}
  .hw-mod {width:206px;gap:10px}
  .hw-base {gap:20px}
  .hw-card {padding:9px 9px 10px}
  .hw-card-head {font-size:11px;gap:5px}
  .hw-insight p {font-size:14px}
}
/* Notebooks com tela baixa: o palco inteiro, com os controles, cabe na primeira dobra. */
@media(min-width:961px) and (max-height:820px) {
  .hw-map {margin:20px 0 4px;row-gap:18px}
  .hw-mod {padding-block:9px}
  .hw-col,.hw-center {gap:11px}
  .hw-card {padding-block:8px 9px;gap:7px}
  .hw-viz {height:31px}
  .hw-insight {margin-top:12px;min-height:74px;padding:10px 0 8px}
  .hw-controls {padding-top:0}
}
/* Com o hero empilhado, o fluxo vira vertical: fontes em cima, o T no meio, decisões embaixo. */
@media(max-width:960px) {
  [data-hw-host] .hw-grid {grid-template-columns:1fr;gap:40px}
  .hw-canvas {-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent calc(var(--hw-ms,50%) - 70px),#000 calc(var(--hw-ms,50%) + 10px));
                      mask-image:linear-gradient(180deg,transparent 0,transparent calc(var(--hw-ms,50%) - 70px),#000 calc(var(--hw-ms,50%) + 10px))}
  .hw-corner {display:none}
  .hw-insight p {min-height:2.9em}
  .hw-map {--hw-flow:column;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"src src src" "dat core age" "out out out";column-gap:16px;row-gap:46px;max-width:640px;margin:28px auto 6px}
  .hw-base {display:contents}
  .hw-data {grid-area:dat;justify-self:end}
  .hw-agents {grid-area:age;justify-self:start}
  .hw-mod {width:auto;max-width:210px;flex-direction:column;text-align:center;gap:8px;padding:12px 12px 11px}
  .hw-mod-text {justify-items:center}
  .hw-col {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}
  .hw-col .hw-step {grid-column:1/-1;justify-content:center}
  .hw-center {gap:10px}
}
@media(max-width:720px) {
  .hw-map {row-gap:32px;column-gap:8px;margin-top:18px}
  .hw-mod {padding:10px 7px 9px;gap:6px}
  .hw-glyph {width:34px;height:34px}
  .hw-mod-text b {font-size:12px}
  .hw-mod-text small {display:none}
  .hw-mod-text em {margin-top:3px;font-size:7.5px;letter-spacing:.06em}
  .hw-col {gap:12px 7px}
  .hw-core {width:116px;height:116px}
  .hw-card {padding:8px 8px 9px;gap:8px}
  .hw-card-head {font-size:10.5px;gap:5px}
  .hw-idx {display:none}
  .hw-icon,.hw-icon svg {width:13px;height:13px}
  .hw-viz {height:30px}
  .v-action {font-size:9.5px;line-height:1.25}
  .hw-output .hw-viz {height:36px}
  .hw-insight {margin-top:16px;min-height:0;padding-block:12px 10px}
  .hw-insight p {font-size:15px}
  .hw-controls {gap:8px}
  .hw-scenarios button {padding:8px 12px}
  .hw-more {margin-left:0}
}
@media(max-width:600px) {
  .hw-scenarios button {min-height:44px}
  .hw-toggle {width:44px;height:44px}
}
@media(max-width:380px) {
  .hw-scenarios button {padding:8px 9px;font-size:10.5px}
  .hw-card-head b {font-size:10px}
  .hw-source .hw-icon {display:none}
  .hw-output .hw-card-head b {white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15}
  .hw-core {width:106px;height:106px}
}