/* ==========================================================
   EvoTalks — Hero Orbital Universe
   Layered: rings → product cards → channel pills → live chat
   Click product cards to open 3D-perspective panels
   ========================================================== */

.hero-orbital {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 600px;
  margin: 0 auto;
  /* perspective REMOVIDO — bloqueava backdrop-filter de descendentes (.ho-panel).
     Tilt 3D individual de cards/tiles aplica perspective() inline no próprio
     transform via JS — não precisa do perspective no parent. */
}

/* === Drops aleatórios — partículas pequenas com push do cursor ===
   Pontos sutis que ficam flutuando no orbital. Quando o cursor chega perto,
   elas são empurradas (repulsão); ao sair, voltam à posição natural com lerp.
   Cor verde EvoTalks com glow leve, transparentes pra não competir com cards.
   Animation pulse PAUSADA por padrão — JS adiciona .ho-drops-on no root
   quando orbital está em view, ativando o pulse. Sem isso, 14 drops
   pulsando 60fps mesmo quando o orbital tá fora da viewport (waste GPU). */
.ho-drop {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--evo-green, #1bbf5d);
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
  box-shadow: 0 0 8px rgba(27, 191, 93, 0.4);
  transition: opacity .8s ease;
  /* Duas animations: entrada (uma vez) + pulse (loop). A entrada começa
     com delay --drop-delay (stagger por índice no JS). O pulse começa
     LOGO APÓS a entrada terminar (delay + 0.6s). */
  animation:
    hoDropEnter .6s cubic-bezier(.16, 1, .3, 1) var(--drop-delay, 0s) backwards,
    hoDropPulse 3s ease-in-out calc(var(--drop-delay, 0s) + 0.6s) infinite;
  animation-play-state: paused;
}
.ho-drops-on .ho-drop { animation-play-state: running; }
.ho-drop.size-sm { width: 6px; height: 6px; opacity: 0.45; }
.ho-drop.size-lg { width: 11px; height: 11px; opacity: 0.65; }
/* Surgimento — bolinha "explode" do nada com scale 0 → 1, opacity 0 → final */
@keyframes hoDropEnter {
  from { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); }
  to   { transform: scale(1); opacity: var(--drop-opa, 0.55); }
}
@keyframes hoDropPulse {
  0%, 100% { opacity: var(--drop-opa, 0.55); transform: scale(1); }
  50%      { opacity: calc(var(--drop-opa, 0.55) * 1.4); transform: scale(1.15); }
}

/* === Layer 1 — núcleo central (logo EvoTalks) ===
   Mesmo padrão da página de integrações: só a logo, sem disco verde.
   Surge com BOUNCE elegante (scale 0 → 1.1 → 1) + fade. Após entrada,
   o float idle assume. */
.ho-center {
  position: absolute;
  left: 50%; top: 50%;
  width: 120px; height: 120px;
  margin: -60px 0 0 -60px;
  display: grid; place-items: center;
  z-index: 6;
  filter: drop-shadow(0 12px 28px rgba(27, 191, 93, 0.35));
  /* Entrada (1x) + float idle (loop). O float começa após a entrada. */
  animation:
    hoCoreEnter .9s cubic-bezier(.34, 1.45, .55, 1) backwards,
    hoCoreFloat 7s ease-in-out 0.9s infinite;
  transform-style: preserve-3d;
}
.ho-center img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
@keyframes hoCoreEnter {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.12) rotate(4deg); }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes hoCoreFloat {
  0%, 100% { transform: scale(1)    rotateX(0deg)  rotateY(0deg); }
  25%      { transform: scale(1.02) rotateX(4deg)  rotateY(-5deg); }
  50%      { transform: scale(1.04) rotateX(-3deg) rotateY(4deg); }
  75%      { transform: scale(1.02) rotateX(3deg)  rotateY(5deg); }
}

/* === Layer 2 — orbit rings (SVG) === */
.ho-rings {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.ho-rings circle {
  fill: none;
  stroke: rgba(27,191,93,0.22);
  stroke-width: 1;
  stroke-dasharray: 4 7;
}
.ho-rings .r2 { stroke: rgba(27,191,93,0.16); }
.ho-rings .r3 { stroke: rgba(27,191,93,0.10); }
.ho-rings .cross {
  stroke: rgba(27,191,93,0.14);
  stroke-width: 1;
  stroke-dasharray: 3 8;
}
.ho-rings .ring-spin {
  transform-origin: 300px 300px;
  animation: hoRingSpin 80s linear infinite;
  animation-play-state: paused;
}
.ho-rings .ring-spin-rev {
  transform-origin: 300px 300px;
  animation: hoRingSpin 110s linear infinite reverse;
  animation-play-state: paused;
}
/* Spin só roda quando o hero está na viewport (.ho-drops-on é togglado pelo
   IntersectionObserver em hero-orbital.js:1467). Antes, as rings giravam
   80s/110s infinite mesmo com o hero fora da viewport, queimando GPU sem
   benefício visual. */
.ho-drops-on .ho-rings .ring-spin,
.ho-drops-on .ho-rings .ring-spin-rev {
  animation-play-state: running;
}
@keyframes hoRingSpin { to { transform: rotate(360deg); } }

/* Live connectors — linhas dinâmicas que seguem cada card/pill em tempo real.
   Inspirado na página de integrações: dashed verde, com fluxo animado e
   destaque no hover. Atualizadas a cada frame via JS (rAF). */
.ho-connectors {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
  transition: opacity .22s ease;
}
/* Durante o swap entre painéis (e antes do orbital surgir no load), os
   connectors dashed verdes ficavam expostos sem os cards correspondentes,
   criando um starburst feio de fundo. Fade-out controlado pelo JS via
   .ho-is-swapping em swapWithAnimation() — connectors voltam suaves após. */
.hero-orbital.ho-is-swapping .ho-connectors,
.hero-orbital:not(.ho-drops-on) .ho-connectors {
  opacity: 0;
}
.ho-conn {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 4 6;
  /* Animation playback fica em cada line — usa stroke-dashoffset pra dar fluxo */
  animation: hoFlow 4s linear infinite;
  transition:
    stroke .3s ease,
    stroke-width .3s ease,
    opacity .3s ease,
    filter .3s ease;
}
/* Cards (anel interno) — linha mais marcada */
.ho-conn-card {
  stroke: rgba(27,191,93,0.32);
  stroke-width: 1.5;
}
/* Pills (anel externo) — mais sutis, só um sussurro de conexão */
.ho-conn-pill {
  stroke: rgba(27,191,93,0.16);
  stroke-width: 1;
  stroke-dasharray: 3 7;
  animation-duration: 6s;
}
/* Linha em destaque quando o card/pill correspondente está hovered */
.ho-conn.is-active {
  stroke: rgba(27,191,93,0.85);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(27,191,93,0.55));
}
@keyframes hoFlow { to { stroke-dashoffset: -40; } }

/* === Animação de entrada — orbital surge "espalhando" do centro pra fora ===
   Os tracks começam com scale(0.35) → scale(1). Como os slots posicionam por
   translate(rx, ry), o scale do parent reduz o raio efetivo: tudo nasce
   apertado no centro e se ESPALHA. Curva spring (.16, 1, .3, 1) dá sensação
   de "se soltar" sem rebote brusco.

   Cards e pills também fazem fade-in com stagger por índice — o JS injeta
   --i (0..N) em cada slot. */
@keyframes hoSpreadIn {
  0%   { transform: scale(0.35); }
  100% { transform: scale(1); }
}
@keyframes hoPinFadeIn {
  /* Usa propriedade CSS `scale` (não transform) — não conflita com o
     transform que cards e pills usam pra posicionamento e tilt 3D. */
  0%   { opacity: 0; scale: 0.55; filter: blur(3px); }
  100% { opacity: 1; scale: 1;    filter: blur(0); }
}

/* === Layer 3 — Product cards (middle orbit, continuously rotating) ===
   Architecture:
   - .ho-orbit-track: positioned at center, rotates continuously
   - .ho-card-slot: positioned out on the radius via --angle, counter-rotates so cards stay upright
   - .ho-card: the visible card itself — only this element handles 3D hover
   ====================================================================== */
.ho-orbit-track {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  z-index: 4;
  animation: hoSpreadIn 1.8s cubic-bezier(.16, 1, .3, 1) both;
}
.ho-orbit-track.is-paused { /* no-op (kept for compatibility) */ }
@keyframes hoOrbitSpin { to { transform: rotate(360deg); } }

/* Translation-only orbit: each slot animates translate(x,y) keyframes
   generated in JS (36 stops around the circle). Cards travel along
   the circumference WITHOUT rotating on their own axis. */
.ho-card-slot {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  transform-style: preserve-3d;
  animation: var(--orbit-name, hoOrbitCW) var(--orbit-dur, 60s) linear infinite;
  animation-delay: var(--orbit-delay, 0s);
  will-change: transform;
}
.ho-card-counter {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  transform-style: preserve-3d;
}
.ho-orbit-track.is-paused .ho-card-slot,
.ho-orbit-track-outer.is-paused .ho-card-slot { animation-play-state: paused; }

.ho-card {
  position: absolute;
  left: -44px; top: -44px;
  width: 88px; height: 88px;
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(30,32,38,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  cursor: grab;
  padding: 8px;
  transform-style: preserve-3d;
  /* Subtle base scale para a transição de hover ser perceptível mas suave */
  transform: translateZ(0) scale(1);
  /* Cubic-bezier customizado: arranca rápido, suaviza no fim — sensação
     de "se aproximar" do usuário. Usamos ease-out longo (.7s) pra dar
     tempo do olho seguir e da linha de conexão acompanhar. */
  transition:
    transform .7s cubic-bezier(.2,.9,.25,1.05),
    box-shadow .55s cubic-bezier(.2,.9,.3,1),
    border-color .35s ease,
    background-color .35s ease;
  will-change: transform;
  /* Fade-in com stagger por --i. Stagger encurtado pra .025s pra os cards
     surgirem QUASE JUNTOS (era .05s) — evita sensação de "cascata longa"
     quando user volta pra home e o cache já entregou as imagens. */
  animation: hoPinFadeIn .65s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * .025s) both;
}
/* Quando arrastando — cursor "fechado" e sem transition (segue cursor 1:1) */
.ho-card.is-dragging,
.ho-pill.is-dragging {
  cursor: grabbing;
  transition: box-shadow .2s ease, border-color .2s ease;
  z-index: 30;
}
/* Click-grow: pulso curto quando o usuário clica */
.ho-card.is-clicked {
  animation: hoClickPulse .55s cubic-bezier(.2, .9, .3, 1);
}
.ho-pill.is-clicked {
  animation: hoClickPulsePill .55s cubic-bezier(.2, .9, .3, 1);
}
@keyframes hoClickPulse {
  0%   { transform: translateZ(0) scale(1); }
  40%  { transform: translateZ(40px) scale(1.32); }
  100% { transform: translateZ(0) scale(1); }
}
@keyframes hoClickPulsePill {
  0%   { transform: translate(-50%, -50%) translateZ(0) scale(1); }
  40%  { transform: translate(-50%, -50%) translateZ(30px) scale(1.42); }
  100% { transform: translate(-50%, -50%) translateZ(0) scale(1); }
}
.ho-card .ho-card-icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  transition: transform .55s cubic-bezier(.2,.9,.3,1);
}
.ho-card .ho-card-icon svg,
.ho-card .ho-card-icon .ico { width: 20px; height: 20px; }
.ho-card .ho-card-label {
  font-size: 11px;
  font-weight: 600;
  color: #1e2026;
  letter-spacing: -0.015em;
  text-align: center;
  line-height: 1.1;
  /* Permite quebrar em 2 linhas pra labels longos como "Monitoramento" */
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
  padding: 0 2px;
  transition: color .3s ease;
}
/* 3D forward lift + ícone respira (sem halo verde — limpa o fundo do painel) */
.ho-card:hover,
.ho-card:focus-visible {
  transform: translateZ(80px) scale(1.14);
  box-shadow:
    0 32px 56px rgba(30,32,38,0.18),
    0 14px 28px rgba(30,32,38,0.10),
    0 0 0 1px rgba(30,32,38,0.10);
  border-color: rgba(30,32,38,0.18);
  background: #fff;
  outline: none;
}
.ho-card:hover .ho-card-icon,
.ho-card:focus-visible .ho-card-icon {
  transform: scale(1.08);
}
/* Lift the whole slot so siblings don't occlude */
.ho-card-slot:hover { z-index: 20; }

/* Ícones de cada tone — cores chapadas, 5 paletas distintas pra não confundir.
   Cada bg é versão soft (~12% alpha) da cor principal do icone. */
.ho-card .ho-card-icon.t-ia   { background: #ede9fe; color: #7c6bf5; } /* roxo */
.ho-card .ho-card-icon.t-crm  { background: #d8f5e6; color: #1bbf5d; } /* verde */
.ho-card .ho-card-icon.t-int  { background: #cffafe; color: #0ea5b7; } /* cyan */
.ho-card .ho-card-icon.t-mon  { background: #fef3c7; color: #f59e0b; } /* amber */
.ho-card .ho-card-icon.t-flux { background: #fce7f3; color: #ec4899; } /* pink */

/* === Layer 4 — channel pills (outer orbit, continuously rotating) === */
.ho-orbit-track-outer {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  z-index: 3;
  /* Anel externo demora um pouco mais e começa um pouco depois — efeito
     cascata (cards aparecem primeiro, depois os canais "explodem" pra fora) */
  animation: hoSpreadIn 2.2s cubic-bezier(.16, 1, .3, 1) .1s both;
}

/* === TUDO do orbital some quando painel central abre (body.is-panel-open) ===
   Efeito "implosão pra dentro": cards, pills, logo central, anéis e dots
   colapsam pro centro com fade + scale + blur. Volta animado quando fecha.
   Uso da propriedade CSS `scale` (não `transform`) pra não conflitar com
   animations (hoSpreadIn, hoCoreEnter/Float) que ocupam o transform. */
.ho-orbit-track,
.ho-orbit-track-outer,
.ho-center,
.ho-rings,
.ho-drop {
  transition:
    opacity .55s cubic-bezier(.4, 0, .2, 1),
    scale .85s cubic-bezier(.16, 1, .3, 1),
    filter .55s ease;
}
/* Inner orbit (cards de produto) encolhe — vai pro centro */
body.is-panel-open .ho-orbit-track {
  opacity: 0;
  scale: 0.5;
  filter: blur(8px);
  pointer-events: none;
}
/* Outer orbit (pills de canais) também encolhe pro centro */
body.is-panel-open .ho-orbit-track-outer {
  opacity: 0;
  scale: 0.5;
  filter: blur(8px);
  pointer-events: none;
}
/* Logo central grande encolhe e fadeia */
body.is-panel-open .ho-center {
  opacity: 0;
  scale: 0.4;
  filter: blur(6px);
  pointer-events: none;
}
/* Anéis tracejados do fundo fadeam */
body.is-panel-open .ho-rings {
  opacity: 0;
  scale: 0.7;
}
/* Dots/pontos pulsando do fundo somem (!important pra vencer .size-sm/.size-lg) */
body.is-panel-open .ho-drop {
  opacity: 0 !important;
  scale: 0.5;
}
.ho-orbit-track-outer.is-paused { /* no-op */ }
.ho-pill-counter {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: rotate(calc(var(--angle) * -1));
}
.ho-orbit-track-outer.is-paused .ho-pill-counter { /* no-op */ }

/* Pills do anel externo — caixas coloridas QUADRADAS com ícone branco
   (mesmo padrão dos pins do painel de Integrações). Sem texto. */
.ho-pill {
  position: absolute;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 9px;
  border-radius: 12px;
  /* background é setado inline com cor da marca; selfStyled vira transparent */
  box-shadow: 0 6px 16px rgba(30, 32, 38, 0.18);
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) translateZ(0);
  transition:
    transform .55s cubic-bezier(.2, .9, .25, 1.05),
    box-shadow .35s cubic-bezier(.2, .9, .3, 1);
  will-change: transform;
  cursor: grab;
  /* Fade-in com stagger reduzido (era .07s × i + .4s delay) → .03s × i +
     .15s delay. Pills aparecem MUITO mais juntas pros 8 canais não terem
     cascata longa que parece "demora pra carregar" pro user. */
  animation: hoPinFadeIn .7s cubic-bezier(.16, 1, .3, 1) calc(.15s + var(--i, 0) * .03s) both;
}
.ho-pill img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.ho-pill.is-self-styled {
  /* SVG já é badge completo — sem fundo nem padding */
  background: transparent !important;
  padding: 0;
}
.ho-pill:hover {
  transform: translate(-50%, -50%) translateZ(40px) scale(1.18);
  box-shadow: 0 18px 36px rgba(30, 32, 38, 0.28);
  z-index: 20;
}

/* === Bubble entrance (usado pelos painéis) === */
@keyframes hoBubbleIn { to { opacity: 1; transform: translateY(0); } }

/* === Layer 6 — interactive panels (hover-only, glass estilo Apple, tilt 3D fluido) ===
   Overlay sem fundo nem blur — só um wrapper.
   Posição do painel é controlada via top/left (px/py) pelo JS pra suportar
   posições aleatórias durante o auto-cycle. translate(-50%) centra. */
.ho-panel-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  /* perspective REMOVIDO — bloqueava backdrop-filter no .ho-panel filho */
}

.ho-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  /* `translate` separado de `transform` — JS de tilt sobrescreve transform sem afetar o centro */
  translate: -50% -50%;
  width: min(440px, 90%);
  transition:
    top 1.2s cubic-bezier(.16, 1, .3, 1),
    left 1.2s cubic-bezier(.16, 1, .3, 1),
    transform .9s cubic-bezier(.16, 1, .3, 1),
    box-shadow .6s cubic-bezier(.16, 1, .3, 1),
    opacity .6s cubic-bezier(.32, 0, .15, 1);
  /* Background sólido branco levemente acinzentado pra contrastar com o
     fundo branco da página + sombra leve pra destacar (autorizada pelo
     usuário neste caso). Glass removido — antes ficava sumindo no fundo.
     Cards brancos INTERNOS (.pn-*) também ganham border/sombra reforçados
     na regra abaixo pra não sumirem no cinza-claro do painel. */
  background: #f7f8fa;
  border: 1px solid rgba(15, 22, 38, 0.07);
  border-radius: 20px;
  box-shadow:
    0 12px 32px rgba(15, 22, 38, 0.08),
    0 4px 10px rgba(15, 22, 38, 0.04);
  padding: 22px;
  transform-origin: center center;
  /* Estado fechado SEM rotateX — pura escala 2D + translate.
     Análise do bug: rotateX faz o painel render como plano 3D inclinado
     (parent overlay tem perspective). Backdrop-filter sample na superfície
     inclinada NÃO aplica blur correto — silenciosamente vira ~0px no Chromium.
     Por isso eu via o text "Evo Fluxos" legível atrás mesmo com blur(60px)
     declarado. Sem rotateX, painel = camada 2D plana = backdrop-filter
     funciona com a intensidade declarada. */
  transform: scale(0.72) translateY(24px);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  isolation: isolate;
}
.ho-panel-overlay.is-open .ho-panel {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}

/* === Intro vertical SEMPRE pra cima — janela única (.ho-panel) ===
   Movimento contínuo: cada painel sobe de baixo, decelera no centro,
   acelera saindo por cima. Entre painéis o JS faz reset INSTANTÂNEO
   (translateY -120% → +120%) com transition:none, invisível por estar
   off-screen, evitando o efeito "cima→baixo→cima" ao reposicionar.

   Curvas: ENTRADA usa ease-out (decelera ao chegar) — sensação de
   "pousando suave"; SAÍDA usa ease-in (acelera saindo) — sensação de
   "fluindo embora". Combinadas dão fluidez tipo pêndulo. */
.ho-panel-overlay.is-intro .ho-panel {
  /* Default: curva de ENTRADA (ease-out forte, suave, prazeroso) */
  transition:
    transform .55s cubic-bezier(.22, 1, .36, 1),
    opacity   .42s cubic-bezier(.22, 1, .36, 1);
  /* Estado fechado padrão durante intro = abaixo do centro (entra de baixo) */
  transform: scale(0.96) translateY(120%);
  opacity: 0;
}
.ho-panel-overlay.is-intro.is-open .ho-panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}
/* Saída pra cima — curva de SAÍDA (ease-in: começa devagar, acelera).
   Faz a janela "fluir" embora em vez de só sumir. */
.ho-panel-overlay.is-intro.is-exiting-up .ho-panel {
  transition:
    transform .42s cubic-bezier(.55, 0, .68, .12),
    opacity   .35s cubic-bezier(.55, 0, .68, .12);
  transform: scale(0.96) translateY(-120%);
  opacity: 0;
}

/* (pseudo ::before removido — backdrop-filter agora aplicado direto no .ho-panel) */

/* === Orbital intocado ===
   Conforme arquitetura: o orbital (camada 1) NUNCA muda quando a janela
   glass (camada 2) abre. Os ícones orbitando ficam visíveis o tempo todo,
   atravessam o glass desfocados — esse é o efeito desejado.
   O backdrop-filter no .ho-panel::before é quem cuida do desfoque visual. */

/* (.ho-panel-bg removido — voltamos pra janela única com bg direto no .ho-panel) */
/* Durante tilt JS ATIVO (idle sway ou cursor follow) — transition rápida
   pro lerp do JS funcionar sem lag. Classe is-tilt-active aplicada quando
   o tilt JS toma controle. is-tilting é mantida pra compat. */
.ho-panel.is-tilting,
.ho-panel.is-tilt-active {
  transition: transform .08s linear;
}
.ho-panel-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.ho-panel-head .ho-panel-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
}
.ho-panel-head .ho-panel-icon svg,
.ho-panel-head .ho-panel-icon .ico { width: 20px; height: 20px; }
.ho-panel-head h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  color: #1e2026;
}
.ho-panel-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eef1f6;
  font-size: 11.5px;
  color: #8a8f99;
  display: flex; align-items: center; gap: 8px;
}
.ho-panel-foot .dot { width: 6px; height: 6px; border-radius: 50%; background: #1bbf5d; }

/* === Panel: IA === */
.pn-ia-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.pn-ia-col {
  background: #f7f8fa;
  border-radius: 12px;
  padding: 12px;
  min-height: 180px;
  display: flex; flex-direction: column;
  gap: 6px;
  /* Permite que a coluna encolha abaixo do tamanho do conteúdo (default
     em grid items é auto, que não shrinka). Sem isso, mensagens longas e
     o card "COPILOTO SUGERE" empurram a coluna além de 1fr e quebram o
     layout do painel. */
  min-width: 0;
}
.pn-ia-stream { min-width: 0; }
.pn-bubble,
.pn-copilot-card,
.pn-attendant-draft {
  /* Quebra palavras/URLs longas em vez de transbordar */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.pn-ia-col-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.pn-ia-col-head .dot { width: 6px; height: 6px; border-radius: 50%; }
.pn-ia-col.green .pn-ia-col-head { color: #16a34a; }
.pn-ia-col.green .pn-ia-col-head .dot { background: #1bbf5d; }
.pn-ia-col.purple .pn-ia-col-head { color: #6d5cf0; }
.pn-ia-col.purple .pn-ia-col-head .dot { background: #7c6bf5; }

/* Stream de mensagens — JS popula com bubbles + typing dots em sequência */
.pn-ia-stream {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  perspective: 800px;     /* faz o tilt 3D dos bubbles ter profundidade real */
  transform-style: preserve-3d;
}

.pn-bubble {
  font-size: 11.5px;
  padding: 8px 11px;
  border-radius: 12px;
  max-width: 92%;
  line-height: 1.4;
  /* Animação de entrada SUAVE e luxuosa — bubble nasce do nada com scale +
     fade prolongado. Curva ease-out sem overshoot pra parecer fluido como
     um sheet do iOS deslizando. .85s pra dar tempo do olho seguir a cresção. */
  transform-origin: center;
  animation: pnBubbleBorn .85s cubic-bezier(.16, 1, .3, 1) backwards;
  /* Transition no transform pra retorno suave quando cursor sai */
  transition:
    transform .45s cubic-bezier(.16, 1, .3, 1),
    box-shadow .45s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
  cursor: default;
}
.pn-bubble.them {
  background: #fff;
  color: #1e2026;
  border: 1px solid rgba(15, 22, 38, 0.10);
  box-shadow: 0 2px 6px rgba(15, 22, 38, 0.06);
  align-self: flex-start;
}
.pn-bubble.ai-green {
  background: #1bbf5d;
  color: #fff;
  margin-left: auto;
  align-self: flex-end;
  box-shadow: 0 4px 12px rgba(27, 191, 93, 0.28);
}
/* Mensagem ENVIADA (após o atendente clicar "Usar resposta" do Copilot) —
   bubble verde com etiqueta "✓ enviado" embaixo. */
.pn-bubble.sent {
  background: #1bbf5d;
  color: #fff;
  margin-left: auto;
  align-self: flex-end;
  box-shadow: 0 4px 14px rgba(27, 191, 93, 0.32);
  position: relative;
  padding-bottom: 18px;
}
.pn-bubble.sent::after {
  content: "✓ Enviada";
  position: absolute;
  right: 11px;
  bottom: 5px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}
.pn-bubble:hover {
  box-shadow: 0 14px 28px rgba(30, 32, 38, 0.16);
  z-index: 2;
}

/* Rascunho do atendente — caixa pontilhada, faded, à direita.
   Mostra "isso aqui o atendente tava prestes a enviar antes do Copilot". */
.pn-attendant-draft {
  align-self: flex-end;
  margin-left: auto;
  max-width: 92%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 11px 8px;
  background: rgba(250, 251, 252, 0.5);
  border: 1px dashed #c8cdd6;
  border-radius: 12px;
  animation: pnBubbleBorn .55s cubic-bezier(.2, .9, .25, 1.05) backwards;
  transition:
    transform .35s cubic-bezier(.2, .9, .3, 1),
    opacity .35s,
    box-shadow .35s;
  cursor: default;
  /* Quando uma .pn-bubble.sent aparece DEPOIS, o rascunho fade pra mostrar
     que foi descartado em favor da sugestão do Copilot. */
}
.pn-draft-label {
  font-size: 9px;
  font-weight: 700;
  color: #8a8f99;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pn-draft-text {
  font-size: 11.5px;
  color: #5b606b;
  line-height: 1.35;
  opacity: 0.8;
}
/* Quando aparece um bubble enviado depois do rascunho, o rascunho desbota
   visualmente — mostrando que o atendente abandonou ele em favor da sugestão. */
.pn-attendant-draft:has(~ .pn-bubble.sent) {
  opacity: 0.4;
  text-decoration: line-through;
  text-decoration-color: rgba(138, 143, 153, 0.5);
}
@keyframes pnBubbleBorn {
  /* Nasce bem pequeno e sobe suave — opacity e scale crescem em sincronia
     pra parecer "materializando" no espaço, não "pop-in" mecânico. */
  0%   { opacity: 0; transform: scale(0.78) translateY(10px); filter: blur(2px); }
  50%  { opacity: 0.7; filter: blur(0.5px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* Typing dots — pulsam pra indicar "digitando..." antes da mensagem nascer.
   Lado do agente (verde, à direita) ou do copiloto (roxo, à esquerda). */
.pn-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 12px;
  border-radius: 14px;
  width: 44px;
  animation: pnBubbleBorn .35s cubic-bezier(.2, .9, .3, 1) backwards;
  transform-origin: left bottom;
}
.pn-typing-agent {
  background: #1bbf5d;
  align-self: flex-end;
  margin-left: auto;
  transform-origin: right bottom;
  box-shadow: 0 4px 10px rgba(27, 191, 93, 0.28);
}
.pn-typing-copilot {
  background: #7c6bf5;
  align-self: flex-start;
  box-shadow: 0 4px 10px rgba(124, 107, 245, 0.28);
}
.pn-typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  animation: pnTypingDot 1.1s infinite ease-in-out;
}
.pn-typing span:nth-child(2) { animation-delay: .15s; }
.pn-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes pnTypingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .55; }
  30%           { transform: translateY(-3px); opacity: 1; }
}

/* Copilot suggestion card — sem mais aro lateral roxo */
.pn-copilot-card {
  margin-top: auto;
  background: #fff;
  border: 1px solid #d8d3ff;
  border-radius: 12px;
  padding: 11px;
  align-self: stretch;
  /* Pivot centrado — evita flicker do tilt na borda */
  transform-origin: center;
  animation: pnBubbleBorn .55s cubic-bezier(.2, .9, .25, 1.05) backwards;
  transition:
    transform .35s cubic-bezier(.2, .9, .3, 1),
    box-shadow .35s cubic-bezier(.2, .9, .3, 1);
  box-shadow: 0 4px 12px rgba(124, 107, 245, 0.14);
  will-change: transform;
  cursor: default;
}
.pn-copilot-card:hover {
  box-shadow: 0 18px 36px rgba(124, 107, 245, 0.24);
}
.pn-copilot-card .pn-cop-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 600;
  color: #6d5cf0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.pn-copilot-card .pn-cop-head svg { width: 12px; height: 12px; }
.pn-copilot-card p {
  font-size: 11.5px; line-height: 1.4;
  color: #1e2026;
  margin: 0 0 8px;
}
.pn-copilot-card button {
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  background: #7c6bf5;
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.pn-copilot-card button:hover {
  background: #6d5cf0;
  transform: translateY(-1px);
}

/* === Panel: CRM (redesenho — 3 colunas, cards detalhados, animações sequenciadas) === */

/* Linha de resumo no topo: pipeline total + tendência */
.pn-crm2-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid rgba(15, 22, 38, 0.10);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(15, 22, 38, 0.04);
  animation: pnCrmFadeIn .5s cubic-bezier(.2,.9,.3,1);
  min-width: 0;
  overflow: hidden;
}
.pn-crm2-pipe { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; }
.pn-crm2-pipe .lbl {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8f99;
}
.pn-crm2-pipe strong {
  font-size: 16px;
  font-weight: 700;
  color: #1e2026;
  letter-spacing: -0.01em;
}
.pn-crm2-pipe strong span {
  font-size: 10px;
  font-weight: 500;
  color: #8a8f99;
  margin-left: 1px;
}
.pn-crm2-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  background: rgba(27, 191, 93, 0.12);
  color: #16a34a;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
}
.pn-crm2-trend span { font-weight: 500; opacity: 0.75; }

/* Board de 3 colunas — overflow:hidden CLIP qualquer coisa que tente escapar
   das bordas do board (sombras grandes do flying, cards, etc). */
.pn-crm2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  position: relative;
  min-height: 220px;
  overflow: hidden;
  border-radius: 12px;
  /* Padding interno pra sombras dos cards respirarem sem encostar na borda */
  padding: 2px;
  margin: -2px;
}
.pn-crm2-col {
  background: #f7f8fa;
  border-radius: 12px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  /* CRÍTICO: min-width:0 impede que o conteúdo (avatar+nome) force a coluna
     a ficar maior que sua fração 1fr → cards JAMAIS escapam horizontalmente.
     Não usamos overflow:hidden aqui pq quebraria a animação do flying card
     (que cruza colunas). O board acima já clipa qualquer escape do panel. */
  min-width: 0;
}
.pn-crm2-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5b606b;
  padding: 0 2px 2px;
}
.pn-crm2-head .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pn-crm2-head .dot-blue  { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.18); }
.pn-crm2-head .dot-amber { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
.pn-crm2-head .dot-green { background: #1bbf5d; box-shadow: 0 0 0 3px rgba(27,191,93,0.18); }
.pn-crm2-head .count {
  margin-left: auto;
  background: #fff;
  border: 1px solid #eef1f6;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  color: #1e2026;
  letter-spacing: 0;
  text-transform: none;
}

/* Card individual com avatar + valor + próxima ação.
   height fixa = 74px (altura natural do conteúdo com nowrap) → todos os cards
   do board ficam EXATAMENTE iguais, sem inflar o tamanho. overflow: hidden
   garante que nenhum conteúdo (avatar, badge, texto) escape do card. */
.pn-crm2-card {
  background: #fff;
  border: 1px solid rgba(15, 22, 38, 0.10);
  border-radius: 10px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  line-height: 1.3;
  height: 74px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(15, 22, 38, 0.05);
  transition: transform .25s cubic-bezier(.2,.9,.3,1), box-shadow .25s ease;
  /* Entrada sequenciada (delay vem inline via --d) */
  opacity: 0;
  animation: pnCrmFadeIn .55s cubic-bezier(.2, .9, .3, 1) forwards;
  animation-delay: var(--d, 0s);
}
.pn-crm2-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(30, 32, 38, 0.08);
}
.pn-crm2-card .row {
  display: flex;
  align-items: center;
  gap: 6px;
  /* min-width:0 + overflow hidden → "Clínica VidaBem" trunca em vez de
     empurrar o card pra fora da coluna */
  min-width: 0;
  overflow: hidden;
}
.pn-crm2-card .av {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.pn-crm2-card .av-1 { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.pn-crm2-card .av-2 { background: linear-gradient(135deg, #fbbf24, #d97706); }
.pn-crm2-card .av-3 { background: linear-gradient(135deg, #f472b6, #db2777); }
.pn-crm2-card .av-4 { background: linear-gradient(135deg, #34d399, #16a34a); }
.pn-crm2-card strong {
  font-size: 10.5px;
  font-weight: 600;
  color: #1e2026;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* flex:1 + min-width:0 → strong ocupa espaço restante da row e trunca
     antes de empurrar a row pra fora */
  flex: 1 1 auto;
  min-width: 0;
}
.pn-crm2-card .val {
  font-size: 13px;
  font-weight: 700;
  color: #1bbf5d;
  letter-spacing: -0.015em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pn-crm2-card .val span {
  font-size: 9.5px;
  color: #8a8f99;
  font-weight: 500;
  margin-left: 2px;
}
.pn-crm2-card .next {
  font-size: 10px;
  color: #5b606b;
  padding-top: 4px;
  border-top: 1px dashed #eef1f6;
  display: flex;
  align-items: center;
  gap: 4px;
  /* Trunca em 1 linha — evita "Onboarding ativo" empurrar o card pra baixo */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Card "won" — só borda verde + bg gradient leve, SEM glow colorido.
   Sombra herda do .pn-crm2-card base (neutra, sutil). */
.pn-crm2-card.won {
  background: linear-gradient(160deg, #ecfdf3, #fff);
  border-color: rgba(27, 191, 93, 0.35);
}
.pn-crm2-card.won .next {
  color: #16a34a;
  font-weight: 600;
  border-top-color: rgba(27, 191, 93, 0.2);
}

/* Slot vazio — height fixa igual à do card (74px) pra colunas casarem perfeitamente */
.pn-crm2-slot {
  height: 74px;
  flex-shrink: 0;
  border-radius: 10px;
  background: transparent;
}
.pn-crm2-slot-landing {
  /* Slot de pouso da card flying — borda tracejada sutil indica "espaço esperando deal" */
  border: 1.5px dashed rgba(30, 32, 38, 0.10);
  background: rgba(255, 255, 255, 0.4);
}

/* Card "flying" — animação de venda fechando: Negociação → Fechado (slot landing).
   Loop 6s: pausa em Negociação, voa pra slot landing em Fechado (mesma posição
   vertical = topo da coluna), pulsa, fade-out, retorna. */
.pn-crm2-card.flying {
  position: relative;
  z-index: 5;
  /* opacity: 1 sobrescreve o opacity: 0 da base (fade-in inicial não se aplica) */
  opacity: 1;
  animation: pnCrmFlyOver 6s cubic-bezier(.5, 0, .3, 1) infinite;
  /* Sombra neutra discreta — sem glow colorido */
  box-shadow: 0 1px 2px rgba(30, 32, 38, 0.04);
}
/* Entrada suave — fade + lift */
@keyframes pnCrmFadeIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Animação da venda fechando — Negociação → topo de Fechado.
   Apenas translate + opacity. SEM box-shadow colorido — cards ficam limpos.
   Timing comprimido: action inicia ~480ms após abrir (era ~1800ms). */
@keyframes pnCrmFlyOver {
  /* Pausa CURTA em Negociação — ação começa logo */
  0%, 8%    { transform: translate(0, 0); }
  /* Lift sutil — só translateY pequeno, sem scale */
  13%       { transform: translate(0, -3px); }
  /* Voa diagonalmente até o topo de Fechado */
  33%       { transform: translate(calc(100% + 18px), -2px); }
  /* Aterrissa no slot 1 de Fechado (Studio Sul já desceu) */
  38%, 65%  { transform: translate(calc(100% + 18px), 0); opacity: 1; }
  /* Fade-out — outro lead vai chegar */
  75%       { transform: translate(calc(100% + 18px), 0); opacity: 0; }
  /* Reset instantâneo fora da view */
  76%       { transform: translate(0, 0); opacity: 0; }
  /* Volta a aparecer na Negociação */
  92%, 100% { transform: translate(0, 0); opacity: 1; }
}

/* Studio Sul (won) — desce quando Clínica chega, volta quando ela sai.
   Sincronizado com pnCrmFlyOver pelos mesmos % de tempo (6s loop). */
.pn-crm2-card.won {
  /* Override do animation herdado de .pn-crm2-card pra ter o cycle do shift.
     opacity: 1 garante que o card seja visível (a base tem opacity: 0 pro fade-in). */
  opacity: 1;
  animation: pnCrmWonShift 6s cubic-bezier(.5, 0, .3, 1) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes pnCrmWonShift {
  /* Aparece no topo (slot 1). Timing alinhado com pnCrmFlyOver atualizado. */
  0%, 13%   { transform: translateY(0); }
  /* Clínica está no ar (13-33% no novo timing) — Studio Sul desce */
  33%, 70%  { transform: translateY(80px); }
  /* Clínica fade-out (75%) — Studio Sul volta ao topo */
  82%, 100% { transform: translateY(0); }
}

/* === Panel: Integrações — mini-orbital ===
   Mesmo padrão da página /integracoes: dois anéis tracejados,
   pins (logos) orbitando em velocidades diferentes em cada ring,
   linhas SVG conectando cada pin ao centro (atualizadas via rAF no JS),
   gravidade do cursor puxando os pins quando perto. */
.pn-orb {
  position: relative;
  width: 100%;
  height: 320px;
  margin: 6px 0 4px;
  /* Anéis com mais espaço entre eles pra logos não colidirem */
  --ring-inner: 78px;
  --ring-outer: 130px;
  --pin-size: 40px;
  perspective: 800px;
}
/* Anéis tracejados (estáticos com leve respiro) */
.pn-orb::before,
.pn-orb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1.4px dashed rgba(27, 191, 93, 0.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.pn-orb::before {
  width: calc(2 * var(--ring-inner));
  height: calc(2 * var(--ring-inner));
  animation: pnOrbBreathe 9s ease-in-out infinite;
}
.pn-orb::after {
  width: calc(2 * var(--ring-outer));
  height: calc(2 * var(--ring-outer));
  animation: pnOrbBreathe 12s ease-in-out infinite reverse;
}
@keyframes pnOrbBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);     opacity: 0.7; }
  50%      { transform: translate(-50%, -50%) scale(1.015); opacity: 1; }
}

.pn-orb-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.pn-orb-connectors line {
  fill: none;
  stroke: rgba(27, 191, 93, 0.4);
  stroke-width: 1.4;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
  animation: pnOrbFlow 4s linear infinite;
}
@keyframes pnOrbFlow { to { stroke-dashoffset: -36; } }

/* Logo central do orbital — animação "respiração orgânica":
     - Logo: flutua e respira (translateY + scale), 2D puro, GPU-friendly
     - Glow ::before: pulsa em SINCRONIA, expande mais que o logo (~1.18x)
       e fica mais brilhante no pico → sensação de "vida pulsando"
   Sem filter:drop-shadow nem rotação 3D — só transforms 2D. */
.pn-orb-core {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 56px;
  height: 56px;
  z-index: 3;
  pointer-events: none;
}
/* Glow pulsante — ::before é layer separada, animada por transform/opacity */
.pn-orb-core::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  background: radial-gradient(circle at center, rgba(27, 191, 93, 0.7) 0%, rgba(27, 191, 93, 0.25) 60%, transparent 100%);
  filter: blur(12px);
  z-index: -1;
  animation: pnOrbCoreGlow 5s ease-in-out infinite;
  will-change: transform, opacity;
}
.pn-orb-core img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: pnOrbCoreFloat 5s ease-in-out infinite;
  will-change: transform;
}
/* Logo: respira subindo levemente e crescendo. Same 5s pra sincronizar com o glow. */
@keyframes pnOrbCoreFloat {
  0%, 100% { transform: translateY(0)    scale(1); }
  50%      { transform: translateY(-3px) scale(1.05); }
}
/* Glow: expande além do logo (1.18x) e brilha mais no pico */
@keyframes pnOrbCoreGlow {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.18); opacity: 1; }
}

.pn-orb-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--pin-size);
  height: var(--pin-size);
  /* background é setado inline com a cor da marca (verde WhatsApp, etc) */
  border-radius: 11px;
  box-shadow: 0 6px 14px rgba(30, 32, 38, 0.18);
  display: grid;
  place-items: center;
  padding: 8px;
  z-index: 2;
  transition: box-shadow .2s, scale .2s;
  cursor: default;
  will-change: transform, translate;
}
.pn-orb-pin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  /* Logo fica branco em cima do bg da marca (default).
     Pins .is-self-styled (WhatsApp, Insta) já vêm prontos — desligam o filter. */
  filter: brightness(0) invert(1);
}
.pn-orb-pin.is-self-styled {
  /* SVG já é o badge completo (rect colorido + ícone branco) — sem padding,
     sem fundo, e o filter é desligado pra preservar as cores originais. */
  background: transparent !important;
  padding: 0;
}
.pn-orb-pin.is-self-styled img {
  filter: none;
}
.pn-orb-pin:hover {
  scale: 1.14;
  box-shadow: 0 14px 28px rgba(30, 32, 38, 0.28);
  z-index: 4;
}

/* Anel interno — sentido horário, durações ligeiramente diferentes pra
   quebrar sincronismo. Variação de raio (±4px) dá sensação levemente
   elíptica. O segundo `rotate(-Xdeg)` faz o pin se manter "em pé". */
.pn-orb-i1 { animation: pnOrbInner 22s linear infinite; }
.pn-orb-i2 { animation: pnOrbInner 24s linear infinite; animation-delay: -6s; }
.pn-orb-i3 { animation: pnOrbInner 20s linear infinite; animation-delay: -11s; }
.pn-orb-i4 { animation: pnOrbInner 26s linear infinite; animation-delay: -17s; }
@keyframes pnOrbInner {
  0%   { transform: translate(-50%, -50%) rotate(0deg)   translateY(calc(-1 * (var(--ring-inner) + 0px))) rotate(0deg); }
  25%  { transform: translate(-50%, -50%) rotate(90deg)  translateY(calc(-1 * (var(--ring-inner) + 4px))) rotate(-90deg); }
  50%  { transform: translate(-50%, -50%) rotate(180deg) translateY(calc(-1 * (var(--ring-inner) - 3px))) rotate(-180deg); }
  75%  { transform: translate(-50%, -50%) rotate(270deg) translateY(calc(-1 * (var(--ring-inner) + 4px))) rotate(-270deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg) translateY(calc(-1 * (var(--ring-inner) + 0px))) rotate(-360deg); }
}

/* Anel externo — sentido anti-horário, durações maiores */
.pn-orb-o1 { animation: pnOrbOuter 34s linear infinite; }
.pn-orb-o2 { animation: pnOrbOuter 38s linear infinite; animation-delay: -10s; }
.pn-orb-o3 { animation: pnOrbOuter 32s linear infinite; animation-delay: -19s; }
.pn-orb-o4 { animation: pnOrbOuter 40s linear infinite; animation-delay: -28s; }
@keyframes pnOrbOuter {
  0%   { transform: translate(-50%, -50%) rotate(0deg)    translateY(calc(-1 * (var(--ring-outer) + 0px))) rotate(0deg); }
  25%  { transform: translate(-50%, -50%) rotate(-90deg)  translateY(calc(-1 * (var(--ring-outer) - 4px))) rotate(90deg); }
  50%  { transform: translate(-50%, -50%) rotate(-180deg) translateY(calc(-1 * (var(--ring-outer) + 6px))) rotate(180deg); }
  75%  { transform: translate(-50%, -50%) rotate(-270deg) translateY(calc(-1 * (var(--ring-outer) - 5px))) rotate(270deg); }
  100% { transform: translate(-50%, -50%) rotate(-360deg) translateY(calc(-1 * (var(--ring-outer) + 0px))) rotate(360deg); }
}

/* === Panel: Monitoramento === */
.pn-mon-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.pn-mon-kpi {
  background: #f7f8fa;
  border-radius: 10px;
  padding: 10px;
}
.pn-mon-kpi .lbl {
  font-size: 9.5px; font-weight: 500;
  color: #8a8f99;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pn-mon-kpi .val {
  font-size: 16px; font-weight: 600;
  color: #1e2026;
  margin-top: 4px;
  display: flex; align-items: baseline; gap: 6px;
}
.pn-mon-kpi .delta {
  font-size: 10.5px; font-weight: 500;
  color: #16a34a;
}
.pn-mon-kpi .delta.bad { color: #ef4444; }
.pn-mon-bars {
  display: flex; align-items: flex-end;
  gap: 6px;
  height: 80px;
  padding: 8px 0;
  border-top: 1px solid #eef1f6;
}
.pn-mon-bars .bar {
  flex: 1;
  background: #1bbf5d;
  border-radius: 6px 6px 0 0;
  transform-origin: bottom;
  animation: pnBarGrow .8s cubic-bezier(.2,.8,.2,1) forwards;
  opacity: 0;
}
.pn-mon-bars .bar:nth-child(1) { height: 40%; animation-delay: 0s; }
.pn-mon-bars .bar:nth-child(2) { height: 60%; animation-delay: .08s; }
.pn-mon-bars .bar:nth-child(3) { height: 75%; animation-delay: .16s; }
.pn-mon-bars .bar:nth-child(4) { height: 50%; animation-delay: .24s; }
.pn-mon-bars .bar:nth-child(5) { height: 85%; animation-delay: .32s; }
.pn-mon-bars .bar:nth-child(6) { height: 95%; animation-delay: .40s; }
.pn-mon-bars .bar:nth-child(7) { height: 70%; animation-delay: .48s; }
@keyframes pnBarGrow {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}
.pn-mon-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  color: #8a8f99;
  margin-top: 8px;
}
.pn-mon-status .live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #1bbf5d;
  animation: hoBlink 1.5s ease-in-out infinite;
}
@keyframes hoBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* === Panel Monitoramento v2 — operação ao vivo ===
   3 KPIs compactos no topo + lista de atendentes (avatar + status pulse +
   carga + TMA) + sparkline de atividade por hora. Visual, pouco texto. */
.pn-mon2-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.pn-mon2-kpi {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(135deg, #fafbfc, #fff);
  border: 1px solid #eef1f6;
  border-radius: 10px;
  min-width: 0;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease, border-color .25s ease;
  cursor: pointer;
  animation: pnMon2KpiIn .55s cubic-bezier(.16, 1, .3, 1) backwards;
}
.pn-mon2-kpi:nth-child(1) { animation-delay: .1s; }
.pn-mon2-kpi:nth-child(2) { animation-delay: .2s; }
.pn-mon2-kpi:nth-child(3) { animation-delay: .3s; }
@keyframes pnMon2KpiIn {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.pn-mon2-kpi:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 22px rgba(30, 32, 38, 0.10);
  border-color: rgba(245, 158, 11, 0.35);
}
.pn-mon2-kpi-ico { width: 22px; height: 22px; flex-shrink: 0; }
.pn-mon2-kpi > div { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; overflow: hidden; }
.pn-mon2-kpi strong {
  font-size: 14px;
  font-weight: 700;
  color: #1e2026;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.pn-mon2-kpi em {
  font-size: 9.5px;
  font-style: normal;
  color: #8a8f99;
  font-weight: 500;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pn-mon2-kpi em .d-up   { color: #1bbf5d; font-weight: 700; margin-left: 2px; }
.pn-mon2-kpi em .d-down { color: #1bbf5d; font-weight: 700; margin-left: 2px; }
.pn-mon2-live-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #1bbf5d;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(27, 191, 93, 0.18);
  animation: pnMon2LivePulse 1.6s ease-in-out infinite;
}
@keyframes pnMon2LivePulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(27, 191, 93, 0.30); }
  50%      { box-shadow: 0 0 0 6px rgba(27, 191, 93, 0.0); }
}

/* Strip de atendentes — cada linha é um card interativo */
.pn-mon2-agents {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.pn-mon2-row {
  display: grid;
  grid-template-columns: 30px 1fr 70px 42px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(30, 32, 38, 0.05);
  border-radius: 10px;
  cursor: pointer;
  transition:
    transform .3s cubic-bezier(.16, 1, .3, 1),
    box-shadow .25s ease,
    border-color .25s ease,
    background-color .25s ease;
  min-width: 0;
  animation: pnMon2RowIn .6s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms) backwards;
}
@keyframes pnMon2RowIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.pn-mon2-row:hover {
  transform: translateX(2px) scale(1.015);
  background: #fff;
  border-color: rgba(245, 158, 11, 0.30);
  box-shadow: 0 8px 18px rgba(30, 32, 38, 0.08);
}
.pn-mon2-row[data-status="idle"]:hover { border-color: rgba(245, 158, 11, 0.55); }

.pn-mon2-av {
  position: relative;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.pn-mon2-av.a1 { background: linear-gradient(135deg, #ffd58a, #ffa653); }
.pn-mon2-av.a2 { background: linear-gradient(135deg, #b8d4ff, #4d8cff); }
.pn-mon2-av.a3 { background: linear-gradient(135deg, #ffc7c7, #ff7a7a); }
.pn-mon2-av.a4 { background: linear-gradient(135deg, #c5f0d4, #4ec97a); }
/* Pulse de status — bolinha no canto inferior-direito do avatar */
.pn-mon2-pulse {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid #fff;
}
.pn-mon2-pulse.pn-mon2-st-live {
  background: #1bbf5d;
  box-shadow: 0 0 0 0 rgba(27, 191, 93, 0.55);
  animation: pnMon2LivePulse 1.6s ease-in-out infinite;
}
.pn-mon2-pulse.pn-mon2-st-idle { background: #f59e0b; }
.pn-mon2-pulse.pn-mon2-st-off  { background: #94a3b8; }

.pn-mon2-info {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
}
.pn-mon2-info strong {
  font-size: 11.5px;
  font-weight: 600;
  color: #1e2026;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pn-mon2-info em {
  font-size: 9px;
  font-style: normal;
  color: #8a8f99;
  font-weight: 500;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pn-mon2-info em.pn-mon2-st-live { color: #1bbf5d; }
.pn-mon2-info em.pn-mon2-st-idle { color: #f59e0b; }
.pn-mon2-info em.pn-mon2-st-off  { color: #94a3b8; }

/* Bar de carga (% de capacidade ocupada) */
.pn-mon2-load {
  height: 6px;
  background: rgba(30, 32, 38, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.pn-mon2-load > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1bbf5d, #16a34a);
  transform-origin: left;
  animation: pnMon2LoadGrow 1.1s cubic-bezier(.16, 1, .3, 1) .8s backwards;
}
[data-status="idle"] .pn-mon2-load > span {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}
@keyframes pnMon2LoadGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.pn-mon2-tma {
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1e2026;
  text-align: right;
  white-space: nowrap;
}

/* Sparkline — barras de atividade por hora */
.pn-mon2-spark {
  background: linear-gradient(135deg, #fafbfc, #fff);
  border: 1px solid #eef1f6;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.pn-mon2-spark-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #5b606b;
  font-weight: 600;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pn-mon2-spark-trend {
  color: #1bbf5d;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.pn-mon2-spark-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 38px;
}
.pn-mon2-spark-bars .bar {
  flex: 1;
  background: linear-gradient(180deg, #1bbf5d, #16a34a);
  border-radius: 3px 3px 0 0;
  transform-origin: bottom;
  animation: pnBarGrow .65s cubic-bezier(.16, 1, .3, 1) backwards;
  transition: transform .25s ease, filter .25s ease;
  cursor: pointer;
}
.pn-mon2-spark-bars .bar:hover {
  transform: scaleY(1.08);
  filter: brightness(1.1);
}

.pn-mon2-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #8a8f99;
  margin-top: 2px;
}
.pn-mon2-foot .pn-mon2-live-dot { width: 7px; height: 7px; }

/* === Painel Monitoramento v3 — versão simplificada do dashboard colorido ===
   3 rows: top-row 2 cards (Atendimentos | Canais), depois Atendentes full-width,
   depois CRM full-width (donut + legenda lateral, igual o dashboard grande).
   Backgrounds são gradient com alpha (.85) → o glass do .ho-panel transparece
   levemente, mantendo estética da janela orbital. */
.hmon-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 8px;
  padding: 4px;
  margin-bottom: 4px;
  perspective: 1200px;
}
.hmon-card {
  border-radius: 14px;
  padding: 12px;
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 0;
  /* Animação de entrada — `both` mantém FROM durante delay E TO depois. */
  animation: hmonCardReveal .65s cubic-bezier(.22, 1, .36, 1) both;
  /* 3D setup pra tilt do cursor (controlado por JS via wireMonPanel) */
  transform-style: preserve-3d;
  transition: transform .18s cubic-bezier(.2, .9, .3, 1), box-shadow .25s ease-out;
  will-change: transform;
}
.hmon-card:hover {
  box-shadow: 0 10px 24px rgba(20, 22, 28, 0.18);
}
.hmon-card h5 {
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #fff;
  letter-spacing: -0.01em;
}
.hmon--atend  { background: linear-gradient(135deg, rgba(45, 213, 110, 0.88) 0%, rgba(27, 191, 93, 0.90) 100%); grid-column: 1; grid-row: 1; animation-delay: .08s; }
.hmon--canal  { background: linear-gradient(135deg, rgba(27, 217, 232, 0.85) 0%, rgba(0, 184, 200, 0.88) 100%); grid-column: 2; grid-row: 1; animation-delay: .20s; }
.hmon--agents { background: linear-gradient(135deg, rgba(91, 156, 255, 0.88) 0%, rgba(58, 111, 224, 0.90) 100%); grid-column: 1 / -1; grid-row: 2; animation-delay: .32s; }
.hmon--crm    { background: linear-gradient(135deg, rgba(167, 139, 250, 0.88) 0%, rgba(109, 78, 217, 0.90) 100%); grid-column: 1 / -1; grid-row: 3; animation-delay: .44s; }
@keyframes hmonCardReveal {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* Pill "Total 165" no verde card */
.hmon-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 4px 9px;
  margin-bottom: 8px;
}
.hmon-pill span { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.85); }
.hmon-pill strong { font-size: 14px; font-weight: 800; }

/* Bars semanais — estilo pill (parecido com as channel pills) */
.hmon-bars {
  display: flex; gap: 6px; align-items: stretch;
  height: 80px;
}
.hmon-wb {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  min-width: 0;
}
.hmon-wb-val {
  font-size: 8.5px; font-weight: 700;
  color: #1bbf5d;
  background: #fff;
  padding: 1px 5px;
  border-radius: 5px;
  line-height: 1;
}
.hmon-wb-track {
  flex: 1;
  width: 100%;
  max-width: 22px;
  display: flex; align-items: flex-end;
  min-height: 0;
}
.hmon-wb-bar {
  width: 100%;
  background: rgba(255, 255, 255, 0.42);
  border-radius: 999px;       /* pill rounded igual ao .hmon-cp */
  height: var(--h, 30%);
  /* Animação de crescimento estilo pill — stagger via nth-child do .hmon-wb */
  animation: hmonBarRise .85s cubic-bezier(.34, 1.4, .64, 1) both;
  transform-origin: bottom center;
}
.hmon-wb:first-child .hmon-wb-bar { background: rgba(255, 255, 255, 0.85); }
.hmon-wb-lab { font-size: 8px; font-weight: 700; color: rgba(255,255,255,0.75); letter-spacing: 0.04em; }
/* Stagger das 5 bars — começam depois do card verde (atend) revelar (.08s)
   + delay base .35s. Cada uma com .08s entre elas. */
.hmon-wb:nth-child(1) .hmon-wb-bar { animation-delay: .35s; }
.hmon-wb:nth-child(2) .hmon-wb-bar { animation-delay: .45s; }
.hmon-wb:nth-child(3) .hmon-wb-bar { animation-delay: .55s; }
.hmon-wb:nth-child(4) .hmon-wb-bar { animation-delay: .65s; }
.hmon-wb:nth-child(5) .hmon-wb-bar { animation-delay: .75s; }
@keyframes hmonBarRise {
  0%   {
    opacity: 0;
    transform: translateY(10px) scaleY(0.3);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

/* Channel pills mini */
.hmon-pills {
  display: flex; gap: 5px; align-items: flex-end;
  justify-content: center;
  height: 90px;
}
.hmon-cp {
  position: relative;
  width: 22px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 3px;
  height: var(--ph, 55%);
  /* Animação: cresce de altura 0 + fade-up. Stagger via nth-child abaixo,
     que casa com o reveal do card pai (delay base 0.20s + 0.10s entre cada). */
  animation: hmonPillRise .85s cubic-bezier(.34, 1.4, .64, 1) both;
  transition: background-color .25s, transform .25s;
}
.hmon-cp:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: translateY(-2px);
}
.hmon-cp.is-up { background: #fff; height: 95%; }
.hmon-cp:nth-child(1) { animation-delay: .45s; }
.hmon-cp:nth-child(2) { animation-delay: .60s; }
.hmon-cp:nth-child(3) { animation-delay: .75s; }
.hmon-cp:nth-child(4) { animation-delay: .90s; }
@keyframes hmonPillRise {
  0%   {
    opacity: 0;
    transform: translateY(18px) scaleY(0.3);
    transform-origin: bottom center;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    transform-origin: bottom center;
  }
}
.hmon-cp-ico {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: block;
}
.hmon-cp--wa { background: #25d366; }
.hmon-cp--ig { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); }
.hmon-cp--fb { background: #1877f2; }
.hmon-cp--mn { background: linear-gradient(135deg, #00b2ff, #006aff); }

/* Avatares do card Atendentes (full-width — mais espaço, avatares maiores) */
.hmon-agents-row {
  display: flex; gap: 10px;
  justify-content: space-around; align-items: center;
  padding: 4px 6px;
}
.hmon-av {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  min-width: 0;
}
.hmon-av-pic {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.50);
  overflow: hidden;
  display: block;
  flex-shrink: 0;
}
.hmon-av-pic img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 5%;
}
.hmon-av-pic img.g {
  transform: scale(1.18) translateY(3px);
  object-position: center top;
}
.hmon-av-n {
  font-size: 15px; font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Donut + legenda lateral do card CRM (full-width) */
.hmon-crm-body {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hmon-donut-wrap {
  position: relative;
  width: 84px; height: 84px;
  flex-shrink: 0;
}
.hmon-donut { width: 100%; height: 100%; }
.hmon-donut-center {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.hmon-donut-center strong {
  font-size: 20px; font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
}
/* Legenda à direita do donut — dot + label + número alinhado à direita */
.hmon-crm-legend {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0; padding: 0;
  min-width: 0;
}
.hmon-crm-legend li {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
}
.hmon-crm-legend .lg-dot {
  width: 9px; height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
}
.hmon-crm-legend strong {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* === Painel Fluxos — MESMO design da seção Evo Fluxos: nós brancos simples
   (chip do ícone + rótulo) posicionados livremente + conectores em curva suave
   (wave) verde tracejado + bolinhas nas pontas. Estático no orbital. === */
.hoflux-canvas {
  position: relative;
  width: 360px;
  max-width: 100%;
  height: 288px;
  margin: 4px auto 0;
  /* Grid pontilhado sutil — mesma estética do editor real */
  background-image: radial-gradient(circle, rgba(120, 130, 150, 0.16) 1px, transparent 1.5px);
  background-size: 18px 18px;
  background-position: 6px 6px;
  border-radius: 12px;
}
/* Conectores wave — curva suave, verde tracejado animado (igual à seção) */
.hoflux-wires {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
  opacity: 0; animation: hfluxWireFade .5s ease-out 1.0s both;
}
.hoflux-wire {
  fill: none; stroke: #1bbf5d; stroke-width: 2;
  stroke-dasharray: 5 5; stroke-linecap: round;
  animation: hofluxFlow 1s linear infinite;
}
.hoflux-arrow { fill: #1bbf5d; stroke: none; }
@keyframes hofluxFlow { to { stroke-dashoffset: -20; } }
@keyframes hfluxWireFade { from { opacity: 0; } to { opacity: 1; } }
/* Bolinhas nas pontas (decorativas — no orbital não arrasta) */
.hoflux-handles {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 4; pointer-events: none;
  opacity: 0; animation: hfluxWireFade .5s ease-out 1.2s both;
}
.hoflux-handle { fill: #fff; stroke: #1bbf5d; stroke-width: 2; }

/* Nó — card branco simples: chip do ícone (cor+ícone por tipo) + rótulo,
   posicionado livremente (absolute), igual à seção Evo Fluxos. */
.hoflux-node {
  position: absolute;
  box-sizing: border-box;
  display: flex; align-items: center; gap: 9px;
  width: 130px; height: 52px;
  background: #fff;
  border: 1px solid rgba(15, 22, 38, 0.08);
  border-radius: 11px;
  padding: 9px 11px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(20, 22, 28, 0.07);
  animation: hfluxNodeReveal .55s cubic-bezier(.22, 1, .36, 1) both;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.hoflux-node:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20, 22, 28, 0.13); }
.hoflux-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.hoflux-ic::before {
  content: ''; width: 15px; height: 15px; background-color: currentColor;
  -webkit-mask: var(--hom) center/contain no-repeat; mask: var(--hom) center/contain no-repeat;
}
.hoflux-lb { font-size: 11.5px; font-weight: 600; color: var(--evo-text); line-height: 1.18; letter-spacing: -0.01em; }
/* Cor + ícone por tipo — url() relativo AO hero-orbital.css (../icons/), senão o ícone some */
.hoflux-node--start  .hoflux-ic { background: #d8f5e6; color: #16a34a; --hom: url(../icons/iconixto_solid_play.svg); }
.hoflux-node--ai     .hoflux-ic { background: #ece7fe; color: #6d4ed9; --hom: url(../icons/iconixto_solid_AI.svg); }
.hoflux-node--action .hoflux-ic { background: #e0ecff; color: #3a6fe0; --hom: url(../icons/iconixto_solid_lightning.svg); }
.hoflux-node--action.is-active { border-color: rgba(27, 191, 93, 0.4); box-shadow: 0 8px 22px rgba(27, 191, 93, 0.22); }
.hoflux-node--action.is-active .hoflux-ic { background: #d8f5e6; color: #16a34a; }
/* Stagger de entrada */
.hoflux-node--start  { animation-delay: .40s; }
.hoflux-node--ai     { animation-delay: .60s; }
.hoflux-node--action { animation-delay: .90s; }
@keyframes hfluxNodeReveal {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes hfluxNodeRevealActive {
  from { opacity: 0; transform: translateY(10px) scale(0.85); }
  to   { opacity: 1; transform: scale(1.06); }
}

/* === Panel: Fluxos (redesenho) ===
   Linha horizontal de 3 nodes (Mensagem → IA Triagem → Decisão),
   bifurca em duas branches (Resolve sozinho / Encaminha pro time).
   SVG com wires animados (stroke-dashoffset) conecta tudo. */
.pn-flux2 {
  position: relative;
  padding: 8px 0 16px;
  min-height: 180px;
}
.pn-flux2-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.pn-flux2-wires .wire {
  fill: none;
  stroke: rgba(27, 191, 93, 0.35);
  stroke-width: 1.6;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
  animation: pnFlux2Flow 3s linear infinite;
}
@keyframes pnFlux2Flow { to { stroke-dashoffset: -36; } }

.pn-flux2-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  align-items: center;
}
.pn-flux2-node {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid rgba(30, 32, 38, 0.08);
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #1e2026;
  box-shadow: 0 4px 12px rgba(30, 32, 38, 0.05);
  white-space: nowrap;
  justify-self: center;
}
.pn-flux2-node.start {
  background: #d8f5e6;
  color: #16a34a;
  border-color: rgba(27, 191, 93, 0.35);
}
.pn-flux2-node.start .ico { background-color: #16a34a; }
.pn-flux2-node.decision {
  background: #ede9fe;
  color: #6d5cf0;
  border-color: rgba(124, 107, 245, 0.32);
}
.pn-flux2-node.decision .ico { background-color: #6d5cf0; }

.pn-flux2-branches {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 24px;
}
.pn-flux2-branch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  justify-content: center;
}
.pn-flux2-branch.auto {
  background: linear-gradient(160deg, #d8f5e6, #c9efd9);
  color: #16a34a;
  border-color: rgba(27, 191, 93, 0.25);
}
.pn-flux2-branch.auto .ico { background-color: #16a34a; }
.pn-flux2-branch.human {
  background: linear-gradient(160deg, #fef3c7, #fde9a3);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.32);
}
.pn-flux2-branch.human .ico { background-color: #b45309; }

.pn-flux2-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}
.pn-flux2-tags span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(30, 32, 38, 0.06);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  color: #5b606b;
}
.pn-flux2-tags .d {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #1bbf5d;
}

/* === Painel Fluxos v3 — circuit board com curvas bezier + dots viajando ===
   Layout horizontal: 3 estações (Mensagem → IA → Decisão) com bifurcação
   pra 2 saídas (Resolve sozinho / Time). SVG renderiza wires + dots,
   nodes flutuam absolute por cima. */
.pn-flux3 {
  position: relative;
  height: 220px;
  margin: 4px 0 8px;
}
.pn-flux3-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.pn-flux3-wire {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 4px rgba(124, 107, 245, 0.18));
}
.pn-flux3-wire-branch {
  stroke-width: 1.8;
  stroke-dasharray: 5 4;
  animation: pnFlux3Flow 2.4s linear infinite;
}
@keyframes pnFlux3Flow { to { stroke-dashoffset: -36; } }

/* Dots viajando pelos wires — pulse de glow contínuo */
.pn-flux3-dot {
  animation: pnFlux3DotPulse 2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes pnFlux3DotPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* Nodes — cards flutuantes com ícone + meta (strong + em) */
.pn-flux3-node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 8px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(30, 32, 38, 0.08);
  border-radius: 12px;
  font-family: inherit;
  box-shadow:
    0 6px 18px rgba(30, 32, 38, 0.08),
    0 1px 3px rgba(30, 32, 38, 0.04);
  z-index: 2;
  cursor: pointer;
  transition:
    transform .35s cubic-bezier(.16, 1, .3, 1),
    box-shadow .35s cubic-bezier(.16, 1, .3, 1),
    border-color .25s ease;
  will-change: transform;
  /* Entrada cascata — JS adiciona stagger via inline animation-delay seria ideal,
     aqui usa-se nth-of-type pra simplicidade */
  animation: pnFlux3NodeIn .7s cubic-bezier(.16, 1, .3, 1) backwards;
}
.pn-flux3-node.n1 { animation-delay: .1s; }
.pn-flux3-node.n2 { animation-delay: .25s; }
.pn-flux3-node.n3 { animation-delay: .4s; }
.pn-flux3-node.n4 { animation-delay: .55s; }
.pn-flux3-node.n5 { animation-delay: .7s; }
@keyframes pnFlux3NodeIn {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
/* n2 e n4 mantêm o translate de centralização durante a entrada */
.pn-flux3-node.n2,
.pn-flux3-node.n4 {
  animation-name: pnFlux3NodeInCenter;
}
@keyframes pnFlux3NodeInCenter {
  from { opacity: 0; transform: translate(-50%, 8px) scale(0.92); }
  to   { opacity: 1; transform: translate(-50%, 0)   scale(1); }
}

.pn-flux3-node:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(124, 107, 245, 0.35);
  box-shadow:
    0 16px 32px rgba(30, 32, 38, 0.14),
    0 4px 10px rgba(30, 32, 38, 0.06);
  z-index: 5;
}
.pn-flux3-node.n2:hover,
.pn-flux3-node.n4:hover {
  transform: translate(-50%, -2px) scale(1.04);
}

.pn-flux3-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.pn-flux3-ico {
  background-color: currentColor;
}
.pn-flux3-icon.ico-green       { background: #d8f5e6; color: #1bbf5d; }
.pn-flux3-icon.ico-purple      { background: #ede9fe; color: #7c6bf5; }
.pn-flux3-icon.ico-purple-deep { background: #e0d8fe; color: #6d5cf0; }
.pn-flux3-icon.ico-amber       { background: #fef3c7; color: #f59e0b; }

.pn-flux3-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.pn-flux3-meta strong {
  font-size: 12px;
  font-weight: 700;
  color: #1e2026;
  letter-spacing: -0.01em;
}
.pn-flux3-meta em {
  font-size: 9.5px;
  font-style: normal;
  color: #8a8f99;
  font-weight: 500;
  margin-top: 1px;
}

/* Decisão pulsa devagar — chama atenção que é o ponto crítico */
.pn-flux3-node.has-pulse {
  animation: pnFlux3NodeIn .7s cubic-bezier(.16, 1, .3, 1) .4s backwards,
             pnFlux3DecisionPulse 2.4s ease-in-out 1.4s infinite;
}
@keyframes pnFlux3DecisionPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(30, 32, 38, 0.08), 0 0 0 0 rgba(124, 107, 245, 0.0); }
  50%      { box-shadow: 0 6px 18px rgba(30, 32, 38, 0.08), 0 0 0 8px rgba(124, 107, 245, 0.10); }
}

/* Branches: SEM borda colorida lateral. Diferenciação visual via labels/ícones. */

/* Tags na base — pílulas coloridas */
.pn-flux3-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 8px;
}
.pn-flux3-tags span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(30, 32, 38, 0.06);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: #5b606b;
}
.pn-flux3-tags .d {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.pn-flux3-tags .t-green  .d { background: #1bbf5d; }
.pn-flux3-tags .t-purple .d { background: #7c6bf5; }
.pn-flux3-tags .t-amber  .d { background: #f59e0b; }

/* === Painel "Evo Fluxos" v5 — fluxo VERTICAL com cards reais ===
   Cliente → IA classifica → 3 saídas (uma destacada). Conector verde único,
   cards limpos, dot animado descendo, saída ativa em verde sólido. */
.pn-fx5 {
  display: flex;
  flex-direction: column;
  padding: 14px 4px 10px;
}
.pn-fx5-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--evo-border-soft, #e8eaee);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(30, 32, 38, 0.04);
  margin: 0 8px;
  position: relative;
  animation: fx5StepIn .55s cubic-bezier(.16, 1, .3, 1) backwards;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1),
              box-shadow .25s ease,
              border-color .25s ease;
}
.pn-fx5-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(30, 32, 38, 0.10);
  border-color: var(--evo-green, #1bbf5d);
}
.pn-fx5-msg { animation-delay: .12s; }
.pn-fx5-ai  { animation-delay: .55s; }
@keyframes fx5StepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pn-fx5-step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.pn-fx5-step-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--evo-text-mute, #8a8f99);
}
.pn-fx5-step-text {
  font-size: 13px;
  color: var(--evo-text, #1e2026);
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pn-fx5-step-text strong {
  color: var(--evo-green-deep, #16a34a);
  font-weight: 700;
}
.pn-fx5-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  flex-shrink: 0;
}
.pn-fx5-icon.ico-msg {
  background: #d8f5e6;
  color: #1bbf5d;
}
.pn-fx5-icon.ico-ai {
  background: #ede9fe;
  color: #7c6bf5;
}
.pn-fx5-step-badge {
  font-size: 14px;
  color: #f59e0b;
  flex-shrink: 0;
  animation: fx5BadgePulse 2s ease-in-out infinite;
}
@keyframes fx5BadgePulse {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(1.15); opacity: 1; }
}
/* Conector vertical com dot descendo */
.pn-fx5-pipe {
  position: relative;
  height: 26px;
  margin: 0 8px;
  display: grid;
  place-items: center;
}
.pn-fx5-pipe-line {
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, #1bbf5d 30%, #1bbf5d 70%, transparent 100%);
  opacity: 0.45;
}
.pn-fx5-traveler {
  position: absolute;
  left: 50%;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--evo-green, #1bbf5d);
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(27, 191, 93, 0.6);
  animation: fx5Travel 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
  animation-delay: 1.1s;
  opacity: 0;
}
@keyframes fx5Travel {
  0%   { top: -2px; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: calc(100% + 2px); opacity: 0; }
}
/* T-junction tree (SVG) entre IA e saídas */
.pn-fx5-tree {
  width: calc(100% - 16px);
  height: 18px;
  margin: 0 8px;
  display: block;
  animation: fx5StepIn .5s ease backwards;
  animation-delay: .9s;
}
/* 3 saídas em grid */
.pn-fx5-outputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 8px;
}
.pn-fx5-out {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 6px 10px;
  background: #fff;
  border: 1px solid var(--evo-border-soft, #e8eaee);
  border-radius: 10px;
  font-size: 11.5px;
  transition: transform .25s, border-color .25s, background .25s, box-shadow .25s;
  animation: fx5StepIn .5s cubic-bezier(.16, 1, .3, 1) backwards;
  cursor: default;
}
.pn-fx5-out:nth-of-type(1) { animation-delay: 1.1s; }
.pn-fx5-out:nth-of-type(2) { animation-delay: 1.2s; }
.pn-fx5-out:nth-of-type(3) { animation-delay: 1.3s; }
.pn-fx5-out-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
}
.pn-fx5-out-label {
  font-weight: 600;
  font-size: 12px;
  color: var(--evo-text, #1e2026);
}
.pn-fx5-out-stat {
  font-size: 10.5px;
  color: var(--evo-text-mute, #8a8f99);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pn-fx5-out:hover:not(.is-active) {
  transform: translateY(-2px);
  border-color: var(--evo-green, #1bbf5d);
  box-shadow: 0 6px 14px rgba(27, 191, 93, 0.15);
}
.pn-fx5-out:hover:not(.is-active) .pn-fx5-out-dot {
  background: var(--evo-green, #1bbf5d);
}
/* Saída ATIVA — verde sólido com pulse */
.pn-fx5-out.is-active {
  background: var(--evo-green, #1bbf5d);
  border-color: var(--evo-green, #1bbf5d);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(27, 191, 93, 0.32);
}
.pn-fx5-out.is-active .pn-fx5-out-dot {
  background: #fff;
  animation: fx5OutPulse 1.8s ease-in-out infinite;
}
.pn-fx5-out.is-active .pn-fx5-out-label { color: #fff; }
.pn-fx5-out.is-active .pn-fx5-out-stat  { color: rgba(255, 255, 255, 0.92); }
@keyframes fx5OutPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
  50%      { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); }
}

/* === Painel Fluxos v4 (LEGADO — substituído pelo v5 acima) ===
   Layout limpo: 1 source à esquerda + 1 hub central + 5 destinos em leque.
   SVG renderiza wires (bezier suaves) + dots animados via animateMotion.
   Nodes posicionam absolute com coordenadas casadas com os endpoints dos paths. */
.pn-flux4 {
  position: relative;
  height: 240px;
  margin: 6px 0 8px;
}
.pn-flux4-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.pn-flux4-wire {
  fill: none;
  stroke-linecap: round;
}
.pn-flux4-wire.trunk {
  stroke-width: 2.4;
  filter: drop-shadow(0 1px 3px rgba(124, 107, 245, 0.18));
}
.pn-flux4-wire.branch {
  stroke-width: 1.6;
  stroke-dasharray: 4 4;
  opacity: 0.55;
  animation: pnFlux4Flow 2.4s linear infinite;
}
@keyframes pnFlux4Flow { to { stroke-dashoffset: -32; } }
.pn-flux4-dot {
  transform-box: fill-box;
  transform-origin: center;
}

/* Source (Mensagem chega) — lado esquerdo */
.pn-flux4-node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(30, 32, 38, 0.08);
  border-radius: 11px;
  font-size: 11.5px;
  font-weight: 600;
  color: #1e2026;
  box-shadow: 0 4px 14px rgba(30, 32, 38, 0.07);
  white-space: nowrap;
  z-index: 2;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transform-origin: center;
  transition:
    transform .35s cubic-bezier(.16, 1, .3, 1),
    box-shadow .35s cubic-bezier(.16, 1, .3, 1),
    border-color .25s ease;
  animation: pnFlux4NodeIn .55s cubic-bezier(.16, 1, .3, 1) backwards;
}
@keyframes pnFlux4NodeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.pn-flux4-node:hover {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 12px 28px rgba(30, 32, 38, 0.14);
  border-color: rgba(30, 32, 38, 0.16);
  z-index: 5;
}
/* Layout vertical em árvore — posições casadas com endpoints dos paths SVG (viewBox 100x100) */
.pn-flux4-node.source { left: 50%; top: 14%; animation-delay: .05s; }
.pn-flux4-node.hub    { left: 50%; top: 48%; animation-delay: .15s; }
.pn-flux4-node.d1     { left: 10%; top: 82%; animation-delay: .30s; }
.pn-flux4-node.d2     { left: 30%; top: 82%; animation-delay: .35s; }
.pn-flux4-node.d3     { left: 50%; top: 82%; animation-delay: .40s; }
.pn-flux4-node.d4     { left: 70%; top: 82%; animation-delay: .45s; }
.pn-flux4-node.d5     { left: 90%; top: 82%; animation-delay: .50s; }

/* Hub central pulsa devagar — chama atenção */
.pn-flux4-node.hub {
  background: linear-gradient(160deg, #ede9fe, #fff);
  border-color: rgba(124, 107, 245, 0.35);
  animation:
    pnFlux4NodeIn .55s cubic-bezier(.16, 1, .3, 1) .15s backwards,
    pnFlux4HubPulse 2.4s ease-in-out 1.2s infinite;
}
@keyframes pnFlux4HubPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(30,32,38,0.07), 0 0 0 0 rgba(124,107,245,0); }
  50%      { box-shadow: 0 4px 14px rgba(30,32,38,0.07), 0 0 0 8px rgba(124,107,245,0.10); }
}

.pn-flux4-icon {
  width: 22px; height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.pn-flux4-ico { background-color: currentColor; }
.pn-flux4-icon.ico-green  { background: #d8f5e6; color: #1bbf5d; }
.pn-flux4-icon.ico-purple { background: #ede9fe; color: #7c6bf5; }

/* Destinos têm só um pin colorido (não ícone grande) — fica mais leve */
.pn-flux4-node.dest {
  padding: 6px 11px 6px 9px;
  font-size: 11px;
  font-weight: 600;
  color: #1e2026;
}
.pn-flux4-pin {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.pn-flux4-pin::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.3;
}
.pn-flux4-pin.pin-green  { background: #1bbf5d; color: #1bbf5d; }
.pn-flux4-pin.pin-purple { background: #7c6bf5; color: #7c6bf5; }
.pn-flux4-pin.pin-cyan   { background: #0ea5b7; color: #0ea5b7; }
.pn-flux4-pin.pin-amber  { background: #f59e0b; color: #f59e0b; }
.pn-flux4-pin.pin-pink   { background: #ec4899; color: #ec4899; }

/* Tags na base — pílulas coloridas */
.pn-flux4-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 6px;
}
.pn-flux4-tags span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(30, 32, 38, 0.06);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: #5b606b;
}
.pn-flux4-tags .d {
  width: 6px; height: 6px;
  border-radius: 50%;
  /* flex-shrink:0 + aspect-ratio garantem círculo perfeito mesmo se o flex
     parent tentar achatar/esticar o dot. */
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  display: inline-block;
}
.pn-flux4-tags .t-green  .d { background: #1bbf5d; }
.pn-flux4-tags .t-purple .d { background: #7c6bf5; }
.pn-flux4-tags .t-amber  .d { background: #f59e0b; }

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .ho-center, .ho-card, .ho-pill, .ho-conn,
  .ho-rings .ring-spin, .ho-rings .ring-spin-rev,
  .pn-mon-bars .bar, .pn-crm2-card.flying, .pn-crm2-card, .pn-flux-line::before,
  .ho-panel { animation: none !important; }
  .ho-panel-overlay.is-open .ho-panel { transform: scale(1); }
}

/* === Responsive === */
@media (max-width: 980px) {
  .hero-orbital { max-width: 480px; }
  .ho-center { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
  .ho-center img { width: 44px; height: 44px; }
  .ho-card { width: 76px; height: 76px; }
  .ho-card .ho-card-label { font-size: 10.5px; }
}
@media (max-width: 640px) {
  .hero-orbital { max-width: 340px; }
  .ho-card { width: 64px; height: 64px; }
  .ho-card .ho-card-icon { width: 26px; height: 26px; }
  .ho-card .ho-card-icon svg,
  .ho-card .ho-card-icon .ico { width: 16px; height: 16px; }
  .ho-card .ho-card-label { font-size: 9.5px; }
  .ho-pill { font-size: 11px; padding: 6px 10px 6px 6px; }
  .ho-pill img, .ho-pill .pill-ico { width: 14px; height: 14px; }
  .ho-panel { width: 95%; padding: 16px; }
}

/* ===== Carrossel mobile — só ≤720px =====
   ADICIONA dots de navegação + swipe gesture, SEM remover nada do orbital.
   Orbital continua girando com cards/pills/logo central/rings/glow exatamente
   igual ao desktop. Só fica os dots embaixo pra acessibilidade de quem quer
   pular entre painéis sem esperar o auto-cycle. */
.ho-mobile-nav { display: none; }

@media (max-width: 720px) {
  /* Hero-orbital deixa de ser quadrado pra acomodar painéis altos.
     min-height maior + margem inferior pros dots não colarem na shadow. */
  .hero-orbital {
    aspect-ratio: auto;
    min-height: 480px;
    margin-bottom: 64px;
  }
  /* Painel: BEM mais largo agora (era max 360, agora pega quase toda a tela
     menos 12px margem cada lado). Conteúdo respira muito mais. */
  .ho-panel-overlay { overflow: visible; }
  .ho-panel {
    touch-action: pan-y;
    width: calc(100vw - 24px);
    max-width: 100%;
    padding: 14px;
  }
  /* Painel IA: 2 colunas compactas com fontes pequenas. Sem line-clamp —
     mensagens longas quebram naturalmente em múltiplas linhas (o overflow-wrap
     já cuida disso). Coluna cresce em altura com o conteúdo. */
  .ho-panel .pn-ia-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
  }
  .ho-panel .pn-ia-col {
    /* padding >= border-radius (12px) em todos os lados pra bubbles não
       tocarem a curva da borda do col e parecerem "cortados" no canto. */
    padding: 12px;
  }
  .ho-panel .pn-ia-col-head {
    font-size: 9.5px;
    margin-bottom: 6px;
  }
  .ho-panel .pn-bubble,
  .ho-panel .pn-bubble.them,
  .ho-panel .pn-bubble.agent {
    font-size: 10.5px;
    padding: 6px 8px;
    line-height: 1.3;
    max-width: 88%;
  }
  .ho-panel .pn-copilot-card,
  .ho-panel .pn-copilot-draft {
    font-size: 9.5px;
    padding: 6px 8px;
    line-height: 1.3;
  }
  .ho-panel .pn-copilot-card p,
  .ho-panel .pn-copilot-card-text {
    margin-bottom: 6px;
  }
  .ho-panel .pn-copilot-btn {
    font-size: 10px;
    padding: 4px 8px;
  }
  /* Hint embaixo do painel não tem espaço extra em mobile — encurta a margem */
  .ho-panel .ho-panel-foot { font-size: 10px; }
  /* Animação de swipe — durante a troca, painel encolhe + slide horizontal */
  .ho-panel-overlay.is-swap-left .ho-panel,
  .ho-panel-overlay.is-swap-right .ho-panel {
    transition:
      transform .35s cubic-bezier(.4, 0, .2, 1),
      opacity   .25s ease-out;
  }
  .ho-panel-overlay.is-swap-left .ho-panel {
    transform: translate(-50%, -50%) translateX(-30px) scale(0.94);
    opacity: 0;
  }
  .ho-panel-overlay.is-swap-right .ho-panel {
    transform: translate(-50%, -50%) translateX(30px) scale(0.94);
    opacity: 0;
  }

  /* Nav mobile — dots no rodapé do hero-stage */
  .ho-mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: absolute;
    bottom: -56px;
    left: 0; right: 0;
    z-index: 25;
    pointer-events: auto;
  }
  .ho-mobile-hint {
    font-size: 11px;
    color: var(--evo-text-mute, #8a8f99);
    font-weight: 500;
    letter-spacing: 0.04em;
    opacity: 0.7;
  }
  .ho-mobile-dots {
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(30, 32, 38, 0.08);
  }
  .ho-mobile-dot {
    appearance: none;
    background: rgba(30, 32, 38, 0.18);
    border: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: background-color .25s, width .35s cubic-bezier(.2,.9,.3,1);
    -webkit-tap-highlight-color: transparent;
  }
  .ho-mobile-dot.is-active {
    background: #1bbf5d;
    width: 22px;
    border-radius: 999px;
  }
  .ho-mobile-dot:active { transform: scale(0.9); }
}