:root{
  --indigo:#454C9B; --azul-prof:#3C3776; --celeste:#87CDD5; --cian:#00A8BE;
  --gris:#373534; --naranja:#E94F35; --azul-oscuro:#02194B; --ambar:#F0AD36;
  --tint-motor:#eef0fb; --tint-agentes:#e6f7fa; --tint-edge:#eaf3ff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--gris);
  background:radial-gradient(1100px 700px at 80% -10%, #f0f5ff, #ffffff 60%);
  padding:14px clamp(14px,3vw,28px) 26px;
}
.wrap{max-width:1180px;margin:0 auto}

/* header */
.head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px;gap:20px;flex-wrap:wrap}
.head img{height:32px}
.eyebrow{font-size:11px;letter-spacing:.26em;font-weight:600;color:var(--indigo);text-transform:uppercase;margin:10px 0 4px}
.head h1{font-size:clamp(22px,3vw,30px);font-weight:600;color:#1c2140;letter-spacing:.01em}
.head h1 b{color:var(--cian);font-weight:600}
.controls{display:flex;gap:10px;align-items:center}
.controls button{cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:#fff;
  background:var(--indigo);border:none;border-radius:9px;padding:9px 15px;transition:.2s}
.controls button:hover{background:var(--azul-prof)}
.controls button.ghost{background:#fff;color:var(--indigo);border:1px solid #cdd4f2}

/* stage */
.stage{position:relative}
svg.links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
svg#linksBg{z-index:4}
svg#links{z-index:6}

.panel{border-radius:18px;padding:16px 16px 18px;position:relative;z-index:2}
.panel > .ptitle{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}

/* Cerebro (envoltura que contiene IA + capa de conocimiento) */
.brainbox{background:linear-gradient(180deg,#edf0fc,#f6f7fe);border:2px solid #b7bff0;border-radius:20px;padding:16px 16px 18px;box-shadow:0 12px 34px rgba(69,76,155,.1)}
.brainhead{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo);margin-bottom:14px;display:flex;align-items:center;gap:9px}
.brainrow{display:grid;grid-template-columns:0.9fr 3.6fr 2.5fr;gap:12px}
.group{border-radius:14px;padding:12px}
.group.edge{background:var(--tint-edge);border:1px solid #c7ddff}
.group.motor{background:var(--tint-motor);border:1px solid #d3d8f6}
.group.agentes{background:var(--tint-agentes);border:1px solid #bfe9ef}
.glabel{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#5a63a8;margin-bottom:9px;text-align:center}
.group.agentes .glabel{color:#0a7c8a}
.tiles{display:grid;gap:9px}
.motor .tiles{grid-template-columns:repeat(4,1fr)}
.agentes .tiles{grid-template-columns:repeat(3,1fr)}
.edge .tiles{grid-template-columns:1fr}

.tile{background:#fff;border:1.5px solid #e2e6f5;border-radius:11px;
  min-height:76px;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:8px 7px;font-size:12.5px;font-weight:500;line-height:1.25;color:#1c2456;
  transition:transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s, border-color .35s, opacity .35s, background .35s}
.edge .tile{border-color:#bcd6ff;color:#123a6e}
.agentes .tile{color:#064e58}

/* NEW — Capa de conocimiento del negocio */
.knowledge{background:linear-gradient(180deg,#e8f7f9,#dff1f4);border:1px solid #a9dfe6;margin-top:14px}
.knowledge > .ptitle{color:#067b8a}
.knowledge .tiles{grid-template-columns:repeat(6,1fr)}
.knowledge .tile{background:#fff;border:1.5px solid #b6e3e9;color:#065560;min-height:66px;font-weight:600}

/* bottom row */
.bottomrow{margin-top:14px}
.esp{background:linear-gradient(180deg,#0d1f52,#0a1740);border:1px solid #22357a}
.esp > .ptitle{color:#dbe4ff;justify-content:space-between}
.esp > .ptitle .sub{font-weight:400;letter-spacing:normal;text-transform:none;color:#8fa4d8;font-size:11.5px}
.esp .tiles{grid-template-columns:repeat(5,1fr);gap:10px}
.esp .tile{background:#eef3ff;border-color:#eef3ff;color:#12234f;min-height:60px;font-weight:600;opacity:.9}
.lake{background:linear-gradient(180deg,#04223a,#031424);border:1px solid var(--cian);display:flex;flex-direction:column}
.lake > .ptitle{color:var(--ambar)}
.lake .lbody{flex:1;display:flex;align-items:center;justify-content:center;border:1.5px dashed rgba(240,173,54,.5);border-radius:12px;color:#fff;font-weight:600;font-size:20px;letter-spacing:.04em}

/* integration labels */
.integ{margin:11px 4px;text-align:center;font-size:11px;letter-spacing:.1em;font-weight:600;text-transform:uppercase;position:relative;z-index:7;pointer-events:none}
.integ span{display:inline-block;background:#fff;padding:7px 18px;border-radius:999px;box-shadow:0 4px 14px rgba(30,40,90,.1)}
.integ:not(.teal) span{color:#5a63a8;border:1px solid #d3d8f6}
.integ.teal span{color:#0a7c8a;border:1px solid #a9dfe6}

/* active / dim states */
.stage.playing .brainrow .tile,
.stage.playing .knowledge .tile{opacity:.4}
.tile.active{opacity:1 !important;transform:translateY(-3px) scale(1.04)}
.knowledge .tile.active{box-shadow:0 0 0 3px var(--cian),0 12px 26px rgba(0,168,190,.35);border-color:var(--cian)}
.motor .tile.active{box-shadow:0 0 0 3px var(--indigo),0 12px 26px rgba(69,76,155,.35);border-color:var(--indigo)}
.agentes .tile.active{box-shadow:0 0 0 3px var(--cian),0 12px 26px rgba(0,168,190,.35);border-color:var(--cian)}
.edge .tile.active{box-shadow:0 0 0 3px var(--celeste),0 12px 26px rgba(135,205,213,.5);border-color:var(--celeste)}
.lake.active .lbody{border-color:var(--ambar);box-shadow:0 0 26px rgba(240,173,54,.4) inset}
.stage.playing .lake{opacity:.6}.stage.playing .lake.active{opacity:1}

/* caption */
.caption{margin-top:22px;background:#fff;border:1px solid #e0e4f4;border-left:4px solid var(--cian);
  border-radius:12px;padding:16px 20px;min-height:78px;box-shadow:0 6px 20px rgba(30,40,90,.06)}
.caption .ctitle{font-size:14px;font-weight:600;color:var(--indigo);margin-bottom:5px;font-family:"IBM Plex Mono",monospace;letter-spacing:.02em}
.caption .ctext{font-size:14.5px;color:#37415f;line-height:1.5}
.progress{display:flex;gap:6px;margin-top:14px}
.progress i{height:4px;flex:1;background:#e2e6f5;border-radius:3px;overflow:hidden;position:relative}
.progress i.done{background:var(--indigo)}
.progress i.cur::after{content:"";position:absolute;inset:0;background:var(--cian);animation:fill var(--dur) linear forwards;transform-origin:left}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.feed{stroke:#00A8BE;stroke-width:3;fill:none;stroke-dasharray:7 7;opacity:.7;animation:feed 1s linear infinite}
@keyframes feed{to{stroke-dashoffset:-14}}
.linkflow{fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:12 20;animation:linkflow .8s linear infinite}
@keyframes linkflow{to{stroke-dashoffset:-32}}

.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;font-size:12px;color:#5c648c}
.legend .it{display:flex;align-items:center;gap:7px}
.legend .sw{width:12px;height:12px;border-radius:3px}