/* Composição aberta: os nós e seus fluxos formam a ilustração. */
#conexoes > .neural { opacity: .6; mask-image: linear-gradient(90deg, rgba(0,0,0,.2), #000 54%); }
#conexoes .eco-split { gap: clamp(28px, 4vw, 56px); }
#conexoes .eco-network {
  position: relative; isolation: isolate; align-self: center;
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0; width: 100%; gap: 40px; padding: 18px 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
.eco-network::before {
  content: ''; position: absolute; inset: 12% -10% 8%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 49%, rgba(112,51,255,.2), transparent 54%);
}
.eco-network > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.eco-network > :not(canvas) { position: relative; z-index: 1; }
#conexoes .eco-network .em-layer { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; gap: 14px; }
#conexoes .eco-network .em-label {
  padding: 4px 12px; border: 0; border-radius: 20px; background: #0a122c;
  color: #b8c5e6; font-size: 10.5px; line-height: 1.4; letter-spacing: .14em;
}
#conexoes .eco-network .em-mkt .em-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
#conexoes .eco-network .em-chip {
  padding: 9px 12px; gap: 8px; border-radius: 999px;
  border-color: rgba(94,194,255,.3); background: linear-gradient(125deg,#12253f,#101933);
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 5px 18px -12px #3fc1ff;
}
#conexoes .eco-network .em-chip b { font-size: 12px; line-height: 1.3; white-space: normal; }
#conexoes .eco-network .em-chip > .i { width: 16px; height: 16px; flex-shrink: 0; color: #6ed4ff; }
#conexoes .eco-network .em-chip-mais { border-style: dashed; }
#conexoes .eco-network .em-canais .em-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
#conexoes .eco-network .em-node {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 11px; padding: 0 2px; background: none; border: 0; border-radius: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
#conexoes .eco-network .em-node .ic {
  flex-shrink: 0; width: 54px; height: 54px; border-radius: 18px;
  color: #d3beff; border: 1px solid rgba(180,147,255,.45);
  background: linear-gradient(145deg,#493078,#231c47);
  box-shadow: 0 0 0 5px rgba(112,51,255,.07), 0 8px 24px -10px rgba(112,51,255,.6), inset 0 1px rgba(255,255,255,.13);
}
#conexoes .eco-network .em-node .ic .i { width: 24px; height: 24px; }
#conexoes .eco-network .em-node > span:last-child { padding: 4px 5px; border-radius: 8px; background: rgba(10,18,44,.93); }
#conexoes .eco-network .em-node b { font-size: 13px; line-height: 1.3; }
#conexoes .eco-network .em-node small { margin-top: 4px; color: #aebbd7; font-size: 11.5px; line-height: 1.35; }
#conexoes .eco-network .em-center { padding: 4px 0 0; gap: 14px; background: none; border: 0; box-shadow: none; }
#conexoes .eco-network .em-core.eco-hub {
  width: 112px; height: 112px; border-radius: 50%; background: radial-gradient(circle,rgba(139,91,255,.23),rgba(112,51,255,.02) 70%);
  box-shadow: 0 0 0 1px rgba(180,147,255,.26), 0 0 0 10px rgba(112,51,255,.12), 0 0 0 22px rgba(112,51,255,.05), 0 0 75px rgba(112,51,255,.38);
}
#conexoes .eco-network .em-core.eco-hub img { width: 84px; height: auto; filter: drop-shadow(0 0 16px rgba(112,51,255,.45)); }
#conexoes .eco-network .em-core.eco-hub::before, #conexoes .eco-network .em-core.eco-hub::after { display: none; }
#conexoes .eco-network .em-core-name { margin: 0; padding: 5px 12px; background: #0a122c; box-shadow: none; font-size: 15px; line-height: 1.3; color: #e8deff; }
#conexoes .eco-network .em-hubbar {
  gap: 10px; padding: 10px 17px 10px 11px; border-radius: 16px;
  background: linear-gradient(110deg,#361938,#211a3e); border-color: rgba(255,110,203,.46);
  box-shadow: 0 0 24px -13px #ec008c, inset 0 1px rgba(255,255,255,.06);
}
#conexoes .eco-network .em-hubbar .ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px; }
#conexoes .eco-network .em-hubbar b { font-size: 14px; }
#conexoes .eco-network .em-hubbar small { color: #c2b4d1; font-size: 12px; line-height: 1.35; }
#conexoes .eco-network .em-erp { padding-top: 0; }
#conexoes .eco-network .em-erp .em-row { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
#conexoes .eco-network .em-erp-node { flex-direction: column; gap: 8px; padding: 10px 4px; border-radius: 13px; border-color: rgba(82,236,138,.32); background: linear-gradient(155deg,#153239,#101e31); text-align: center; box-shadow: inset 0 1px rgba(255,255,255,.05); }
#conexoes .eco-network .em-erp-node .i { width: 19px; height: 19px; color: #80efb2; }
#conexoes .eco-network .em-erp-node b { font-size: 12px; line-height: 1.3; }
#conexoes .eco-network .em-mp { max-width: 100%; gap: 11px; padding: 11px 16px 11px 11px; border-radius: 17px; background: linear-gradient(115deg,#342a31,#161d33); border-color: rgba(255,181,71,.45); }
#conexoes .eco-network .em-mp .ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px; }
#conexoes .eco-network .em-mp b { font-size: 13px; line-height: 1.3; }
#conexoes .eco-network .em-mp small { color: #c1bfd1; margin-top: 4px; line-height: 1.35; }
.eco-network .em-motion { align-self: center; display: flex; align-items: center; gap: 7px; margin-top: -24px; padding: 7px 11px; min-height: 34px; background: #0a122c; border: 1px solid transparent; border-radius: 20px; color: #aab7d3; font: 500 11px/1.3 var(--font-display); cursor: pointer; }
.eco-network .em-motion:hover { color: white; border-color: rgba(183,155,255,.3); }
.eco-network .em-motion:focus-visible { outline: 2px solid #b79bff; outline-offset: 3px; }
.eco-network .em-motion .i { width: 12px; height: 12px; }
.eco-network .em-motion[hidden] { display: none; }
@media (min-width:1100px) {
  #conexoes .eco-network { gap: 28px; padding-block: 12px; }
  #conexoes .eco-network .em-label { padding-block: 2px; }
  #conexoes .eco-network .em-center { gap: 10px; }
  #conexoes .eco-network .em-core.eco-hub { width: 100px; height: 100px; }
  #conexoes .eco-network .em-core.eco-hub img { width: 80px; }
  #conexoes .eco-network .em-node .ic { width: 48px; height: 48px; border-radius: 16px; }
}
@media (max-width:759px) {
  #conexoes > .neural { opacity: .38; mask-image: none; }
  #conexoes .eco-network { gap: 36px; padding: 12px 0; }
  #conexoes .eco-network .em-canais .em-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 12px; }
  #conexoes .eco-network .em-node { gap: 7px; }
  #conexoes .eco-network .em-node .ic { width: 48px; height: 48px; border-radius: 16px; }
  #conexoes .eco-network .em-core.eco-hub { width: 100px; height: 100px; }
  #conexoes .eco-network .em-core.eco-hub img { width: 76px; }
  #conexoes .eco-network .em-erp .em-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  #conexoes .eco-network .em-erp-node { flex: 0 0 calc((100% - 20px) / 3); min-width: 0; }
  #conexoes .eco-network .em-chip { padding: 8px 10px; }
  .eco-network .em-motion { min-height: 44px; }
}
@media (prefers-reduced-motion:reduce) { .eco-network *, .eco-network *::before, .eco-network *::after { animation: none !important; } }

#conexoes .eco-network .em-sublabel { display: block; margin-top: 5px; font: 400 12px/1.35 var(--font-display); letter-spacing: 0; text-transform: none; color: #aebbd7; }