/* ApiceSoft · Hero vivo da home ("agentes trabalhando").
   Componente isolado: só este arquivo, assets/hero-sim.js e o bloco .hero-visual do index.html.
   Para trocar a animação (ex.: escritório 2D), substitua os três sem mexer no resto da página.
   Sem JavaScript ou com prefers-reduced-motion: mostra um retrato estático coerente.
   Anima só transform e opacity; a altura de cada bloco é fixa (sem layout shift). */

.hero-sim .demo-body{padding:20px 22px 16px}
.hs-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hs-top .demo-title{margin:0 0 2px}
.hs-top .small{margin:0}
.hs-live{display:inline-flex;align-items:center;gap:7px;flex:none;font-size:11px;font-weight:700;color:#08783C;background:#E5F7ED;border-radius:99px;padding:4px 10px;white-space:nowrap}
.hs-live i{position:relative;width:7px;height:7px;border-radius:50%;background:#169B52}
.hs-live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#169B52;animation:hs-ping 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes hs-ping{75%,100%{transform:scale(2.8);opacity:0}}

/* Etapas da rotina */
.hs-flow{position:relative;margin:18px 0 6px}
.hs-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.hs-track{position:absolute;left:10%;right:10%;top:17px;height:2px;border-radius:2px;background:#E1EAE5;overflow:hidden}
.hs-track i{display:block;height:100%;background:linear-gradient(90deg,#0A9F4B,#35D66A);transform-origin:left center;transform:scaleX(var(--p,.25));transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.hs-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0}
.hs-dot{position:relative;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#fff;border:1px solid #D7E4DD;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.hs-dot::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:#E5F7ED;opacity:0;transition:opacity .35s}
.hs-dot::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,#0A9F4B,#35D66A);opacity:0;transition:opacity .35s}
.hs-dot img{position:relative;z-index:1;width:18px;height:18px}
.hs-lbl{font-size:10.5px;font-weight:600;color:#52616A;line-height:1.25;min-height:2.5em}
.hs-step.is-done .hs-dot::before{opacity:1}
.hs-step.is-active .hs-dot{transform:scale(1.1)}
.hs-step.is-active .hs-dot::after{opacity:1}
.hs-step.is-active .hs-dot img{filter:brightness(0) invert(1)}
.hs-step.is-active .hs-lbl{color:#0B1F2A}
.hs-step.is-wait .hs-dot::after{background:#F5C25B}
.hs-ring{position:absolute;left:50%;top:0;width:36px;height:36px;margin-left:-18px;border-radius:12px;border:2px solid #35D66A;opacity:0;pointer-events:none}
.hs-step.is-active .hs-ring{animation:hs-ring 1.4s ease-out infinite}
.hs-step.is-wait .hs-ring{border-color:#F5C25B}
@keyframes hs-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}

/* Cursor do agente: desliza até a etapa ativa e "clica" */
.hs-cursor{position:absolute;left:0;top:20px;z-index:2;width:18px;height:18px;pointer-events:none;opacity:0;transform:translate(var(--cx,0px),0);transition:transform .6s cubic-bezier(.45,0,.2,1),opacity .3s}
.hs-cursor svg{display:block;width:18px;height:18px;filter:drop-shadow(0 2px 3px rgba(11,31,42,.3))}
.hs-on .hs-cursor{opacity:1}
.hs-cursor.is-click svg{animation:hs-press .3s ease}
@keyframes hs-press{50%{transform:scale(.8)}}

/* Contadores */
.hero-sim .stat-grid{margin:14px 0}
.hero-sim .stat strong{font-variant-numeric:tabular-nums}
.hs-stats{transition:opacity .4s}
.hs-stats.is-reset{opacity:0}
.hs-bump{animation:hs-bump .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes hs-bump{40%{transform:scale(1.18)}}

/* Fila de rotinas: 4 linhas de altura fixa; as linhas deslizam por transform */
.hs-queue{position:relative;height:200px;border:1px solid var(--line,#DFE6E2);border-radius:11px;overflow:hidden;background:#fff}
.hs-row{position:absolute;left:0;right:0;top:0;height:50px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line,#DFE6E2);font-size:12px;background:#fff;transform:translateY(calc(var(--slot,0) * 50px));transition:transform .55s cubic-bezier(.34,1.25,.5,1),opacity .4s}
.hs-row .demo-who{min-width:0}
.hs-row .demo-who>span{min-width:0}
.hs-row b,.hs-row small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-row.is-enter{opacity:0;transform:translateY(-50px)}
.hs-row.is-leave{opacity:0}
.hs-row.is-current{background:#FAFDFB}
.hs-row.is-current::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(#0A9F4B,#35D66A)}
.hero-sim .pill{flex:none}
.pill.queue{background:#EDF1F0;color:#52616A}
.hs-pop{animation:hs-pop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes hs-pop{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:none}}

/* Linha "agora" */
.hs-now{display:flex;align-items:center;gap:8px;height:20px;margin-top:13px;font-size:12px;color:#52616A;white-space:nowrap;overflow:hidden}
.hs-now b{color:#0B1F2A;font-weight:600;flex:none}
.hs-msg{overflow:hidden;text-overflow:ellipsis;transition:opacity .25s}
.hs-msg.is-out{opacity:0}
.hs-caret{flex:none;width:2px;height:13px;background:#169B52;border-radius:1px;animation:hs-blink 1s steps(1) infinite}
@keyframes hs-blink{50%{opacity:0}}
.hs-foot{margin:10px 0 0;font-size:10.5px;color:#687781}

@media(max-width:460px){
 .hero-sim .demo-body{padding:16px 14px 14px}
 .hs-lbl{font-size:9.5px}
 .hs-dot{width:32px;height:32px;border-radius:10px}
 .hs-ring{width:32px;height:32px;margin-left:-16px}
 .hs-track{top:15px}
 .hs-cursor{top:18px}
 .hs-live{font-size:10px;padding:3px 8px}
}
@media(prefers-reduced-motion:reduce){
 .hs-live i::after,.hs-ring,.hs-caret{animation:none!important}
 .hs-cursor{display:none}
 .hs-track i,.hs-row,.hs-dot,.hs-dot::before,.hs-dot::after{transition:none}
}