/* ── Adversary SOAR: el playbook del hero y la línea verde que lo recorre al desplazarse ──
   Dos tableros de coordenadas fijas (horizontal ≥992px, vertical debajo); assets/js/mb-soar.js escala el visible
   al ancho disponible y pinta el progreso con el scroll. Son las piezas del despacho (placas, cables, paquete)
   en verde. Colores: solo tokens --mb-* (assets/css/mb-tokens.css); la raíz lleva .mb-island. */

/* hero: texto centrado y tablero; en escritorio la escena se queda fija mientras la sección hace de recorrido */
.mb-soar-hero { position: relative; }
.mb-soar-stage { box-sizing: border-box; padding: 130px 0 40px; }
.mb-soar-intro { text-align: center; }
.mb-soar-intro .mb-usecase-eyebrow { margin-bottom: 14px; }
.mb-soar-intro h1 { font: 700 clamp(30px, 3.9vw, 54px)/1.05 var(--default-font, "Manrope", sans-serif); letter-spacing: -.03em; color: var(--primary-color, #fff); margin: 0 auto; max-width: 22ch; }
.mb-soar-intro h1 span { color: var(--mb-accent); }
.mb-soar-intro p { margin: 18px auto 0; max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--text-color, #a7aabb); }
.mb-soar-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px 30px; margin-top: 28px; }
.mb-soar-ctas .btn-default { font-size: 17px; }
/* hero fijo solo con alto de sobra: por debajo de 820px el tablero quedaría en miniatura, y es mejor que fluya */
@media (min-width: 992px) and (min-height: 820px) {
  .mb-soar-hero { height: 240vh; }
  .mb-soar-stage { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 100px 0 24px; }
}
@media (max-width: 767px) {
  .mb-soar-stage { padding-top: 110px; }
  .mb-soar-intro p { font-size: 15.5px; }
}

/* tablero: coordenadas fijas; el JS pone el ancho y alto escalados en .mb-soar-wrap y el scale en el tablero */
.mb-soar { position: relative; margin: 34px auto 0; width: 100%; }
.mb-soar-wrap { position: relative; margin: 0 auto; width: 100%; height: 390px; }
.mb-soar-board { position: absolute; left: 0; top: 0; display: none; transform-origin: 0 0; font-family: var(--default-font, "Manrope", sans-serif); }
@media (min-width: 992px) { .mb-soar-board--h { display: block; } }
@media (max-width: 991px) { .mb-soar-board--v { display: block; } .mb-soar-wrap { height: 960px; } }

/* cables: debajo, el .mb-wire del despacho; encima, el trazo verde que se dibuja con el scroll (pathLength=100) */
.mb-soar-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mb-soar-wires .mb-wire { stroke-opacity: .28; }
.mb-soar-flow { fill: none; stroke: var(--mb-green); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 5px rgba(var(--mb-green-rgb), .55)); }
.mb-soar-ok { color: var(--mb-green); fill: var(--mb-green); font: 600 9.5px var(--mb-mono); letter-spacing: .12em; text-transform: uppercase; opacity: 0; transition: opacity .3s; }
.mb-soar-ok.is-on { opacity: 1; }

/* nodos: la placa centrada en su coordenada y la etiqueta colgando debajo */
.mb-soar-node { position: absolute; width: 160px; margin-left: -80px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.mb-soar-node--plate { margin-top: -36px; }
.mb-soar-node--pill { margin-top: -26px; width: var(--w, 200px); margin-left: calc(var(--w, 200px) / -2); }
.mb-soar-node--cond { margin-top: -31px; }
.mb-soar-node--hex { margin-top: -38px; }
.mb-soar-plate { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid var(--mb-line); background: var(--mb-surface); box-shadow: 5px 5px 0 var(--mb-hairline); color: var(--mb-ink-2); transition: border-color .35s, box-shadow .35s, color .35s; }
.mb-soar-plate img { width: 30px; height: 30px; object-fit: contain; filter: var(--mb-logo-filter); }
.mb-soar-plate > svg { width: 28px; height: 28px; }
.mb-soar-label { font: 500 12.5px/1.3 var(--mb-mono); letter-spacing: .01em; color: var(--mb-ink-3); }
.mb-soar-label b { display: block; font-weight: 600; color: var(--mb-ink-2); transition: color .35s; }
.mb-soar-label small { display: block; margin-top: 3px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mb-ink-4); }

/* disparador e informe: píldoras con icono y botón de play */
.mb-soar-node--pill .mb-soar-plate { width: var(--w, 200px); height: 52px; padding: 0 6px 0 8px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; white-space: nowrap; }
.mb-soar-pill-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 600 13px/1 var(--default-font, "Manrope", sans-serif); color: var(--mb-ink); text-align: left; }
.mb-soar-pill-ic, .mb-soar-pill-play { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--mb-fill-2); color: var(--mb-ink-3); transition: background .35s, color .35s; }
.mb-soar-pill-ic svg, .mb-soar-pill-play svg { width: 18px; height: 18px; }
.mb-soar-pill-play { background: var(--mb-fill-3); color: var(--mb-ink); }

/* condición: rombo (la placa girada; el icono se desgira) */
.mb-soar-node--cond .mb-soar-plate { width: 62px; height: 62px; margin-bottom: 13px; transform: rotate(45deg); }
.mb-soar-node--cond .mb-soar-plate > svg, .mb-soar-node--cond .mb-soar-plate > img { transform: rotate(-45deg); }

/* anonimizar: hexágono en dos capas recortadas; la sombra plana va en el filtro de la placa para que el clip no la corte */
.mb-soar-node--hex .mb-soar-plate { width: 88px; height: 76px; border: 0; background: transparent; box-shadow: none; filter: drop-shadow(5px 5px 0 var(--mb-hairline)); transition: filter .35s, color .35s; }
.mb-soar-node--hex .mb-soar-plate::before, .mb-soar-node--hex .mb-soar-plate::after { content: ""; position: absolute; inset: 0; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: var(--mb-line-strong); transition: background .35s; }
.mb-soar-node--hex .mb-soar-plate::after { inset: 1px; background: var(--mb-surface); }
.mb-soar-node--hex .mb-soar-plate > svg { position: relative; z-index: 1; }

/* encendido: la línea verde ha llegado al nodo */
.mb-soar-node.is-on .mb-soar-plate { border-color: var(--mb-green); color: var(--mb-green); box-shadow: 5px 5px 0 rgba(var(--mb-green-rgb), .22), 0 0 28px rgba(var(--mb-green-rgb), .16); }
.mb-soar-node.is-on .mb-soar-label b { color: var(--mb-ink); }
.mb-soar-node.is-on .mb-soar-pill-ic { background: rgba(var(--mb-green-rgb), .18); color: var(--mb-green); }
.mb-soar-node.is-on .mb-soar-pill-play { background: var(--mb-green); color: var(--mb-inverse-ink); }
.mb-soar-node--hex.is-on .mb-soar-plate { box-shadow: none; filter: drop-shadow(5px 5px 0 rgba(var(--mb-green-rgb), .22)) drop-shadow(0 0 12px rgba(var(--mb-green-rgb), .3)); }
.mb-soar-node--hex.is-on .mb-soar-plate::before { background: var(--mb-green); }
/* el nodo en el que está la línea ahora mismo respira */
.mb-soar-node.is-live .mb-soar-plate { animation: mb-soar-pulse 1.6s ease-in-out infinite; }
.mb-soar-node--hex.is-live .mb-soar-plate { animation: none; }
@keyframes mb-soar-pulse { 50% { box-shadow: 5px 5px 0 rgba(var(--mb-green-rgb), .22), 0 0 44px rgba(var(--mb-green-rgb), .38); } }

/* línea de estado bajo el tablero: id de la ejecución y qué está pasando */
.mb-soar-status { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 16px; min-height: 28px; margin: 16px auto 0; font: 500 11px/1.4 var(--mb-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mb-ink-4); }
.mb-soar-status [data-soar-state] { display: inline-flex; align-items: center; gap: 8px; color: var(--mb-ink-2); transition: color .3s; }
.mb-soar-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--mb-ink-5); transition: background .3s, box-shadow .3s; }
.mb-soar[data-state="running"] .mb-soar-status i { background: var(--mb-green); box-shadow: 0 0 8px var(--mb-green); animation: mb-soar-blink 1s ease-in-out infinite; }
.mb-soar[data-state="done"] .mb-soar-status i { background: var(--mb-green); box-shadow: 0 0 8px var(--mb-green); }
.mb-soar[data-state="done"] .mb-soar-status [data-soar-state] { color: var(--mb-green); }
@keyframes mb-soar-blink { 50% { opacity: .35; } }

@media (max-width: 575px) {
  .mb-soar-status { font-size: 10px; justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-soar-plate, .mb-soar-label b, .mb-soar-ok, .mb-soar-pill-ic, .mb-soar-pill-play, .mb-soar-status i, .mb-soar-status [data-soar-state] { transition: none; }
  .mb-soar-node.is-live .mb-soar-plate, .mb-soar[data-state="running"] .mb-soar-status i { animation: none; }
}

/* ── Modo construcción: cuatro agentes (cursores con nombre) montan el flujo antes de que el scroll lo ejecute.
   Mientras data-mode="build", los nodos sin .is-built son esqueletos y los cables base están sin trazar; el JS
   va dibujando cada cable (pathLength=100) a medida que el cursor lo recorre. Colores por agente, de los tokens. ── */
.mb-soar [data-agent="0"] { --c: var(--mb-cyan); --c-rgb: var(--mb-cyan-rgb); }
.mb-soar [data-agent="1"] { --c: var(--mb-ink); --c-rgb: var(--mb-ink-rgb); }
.mb-soar [data-agent="2"] { --c: var(--mb-green); --c-rgb: var(--mb-green-rgb); }
.mb-soar [data-agent="3"] { --c: var(--mb-accent); --c-rgb: var(--mb-accent-rgb); }
.mb-soar[data-mode="build"] .mb-wire { stroke-dasharray: 100; stroke-dashoffset: 100; }
.mb-soar[data-mode="build"] .mb-soar-flow { stroke-dashoffset: 100; }
.mb-soar-plate > *, .mb-soar-label { transition: opacity .35s; }
.mb-soar[data-mode="build"] .mb-soar-node:not(.is-built) .mb-soar-plate { border-style: dashed; border-color: var(--mb-line-strong); background: transparent; box-shadow: none; }
.mb-soar[data-mode="build"] .mb-soar-node:not(.is-built) .mb-soar-plate > *, .mb-soar[data-mode="build"] .mb-soar-node:not(.is-built) .mb-soar-label { opacity: 0; }
.mb-soar[data-mode="build"] .mb-soar-node--hex:not(.is-built) .mb-soar-plate { filter: none; }
.mb-soar[data-mode="build"] .mb-soar-node--hex:not(.is-built) .mb-soar-plate::before { background: var(--mb-line-strong); }
.mb-soar[data-mode="build"] .mb-soar-node--hex:not(.is-built) .mb-soar-plate::after { background: var(--mb-surface); }

/* marco de selección: el agente "coge" el nodo antes de montarlo, con asas y medida como en una herramienta de diseño */
.mb-soar-sel { position: absolute; left: 0; top: 0; width: 72px; height: 72px; border: 1px solid var(--c, var(--mb-ink-3)); pointer-events: none; opacity: 0; transition: opacity .2s; }
.mb-soar-sel.is-on { opacity: 1; }
.mb-soar-sel i, .mb-soar-sel::before, .mb-soar-sel::after { content: ""; position: absolute; width: 6px; height: 6px; background: var(--mb-surface); border: 1px solid var(--c, var(--mb-ink-3)); }
.mb-soar-sel::before { left: -4px; top: -4px; }
.mb-soar-sel::after { right: -4px; top: -4px; }
.mb-soar-sel i:first-of-type { left: -4px; bottom: -4px; }
.mb-soar-sel i:last-of-type { right: -4px; bottom: -4px; }
.mb-soar-sel b { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 7px); padding: 2px 6px; border-radius: 3px; border: 1px solid var(--c, var(--mb-ink-3)); background: var(--mb-surface); color: var(--c, var(--mb-ink-3)); font: 500 9px/1.2 var(--mb-mono); letter-spacing: .04em; white-space: nowrap; }

/* cursores y estelas: en píxeles de diseño, dentro del tablero escalado */
.mb-soar-trails { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mb-soar-trail { fill: none; stroke: var(--c, var(--mb-ink-3)); stroke-opacity: .45; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.mb-soar-cursors { position: absolute; inset: 0; pointer-events: none; }
.mb-soar-cursor { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .3s; will-change: transform; }
.mb-soar-cursor.is-on { opacity: 1; }
.mb-soar-cursor svg { display: block; width: 20px; height: 20px; fill: var(--c, var(--mb-ink-3)); stroke: var(--mb-surface); stroke-width: 1.2; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(var(--c-rgb, var(--mb-ink-rgb)), .7)); }
.mb-soar-cursor b { position: absolute; left: 17px; top: 17px; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--c, var(--mb-ink-3)); background: var(--mb-surface); color: var(--c, var(--mb-ink-3)); font: 600 10px/1 var(--mb-mono); letter-spacing: .04em; white-space: nowrap; opacity: 0; transform: translateY(-3px); transition: opacity .25s, transform .25s; }
.mb-soar-cursor.is-active b { opacity: 1; transform: none; }

/* HUD: se superpone al sitio de la línea de estado mientras dura el montaje. Va fuera del flujo (la línea de estado
   se queda invisible pero ocupando su alto fijo) para que su alto, que depende de cuánto texto haya, no cambie la
   escala del tablero: si no, escala y HUD se realimentan y el tablero no para de cambiar de tamaño. */
.mb-soar-status.is-off { visibility: hidden; }   /* no vale el atributo hidden: Bootstrap lo fuerza a display:none */
.mb-soar-hud { position: absolute; left: 50%; top: calc(100% - 28px); z-index: 5; transform: translateX(-50%); display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-height: 28px; margin: 0; font: 500 11px/1.4 var(--mb-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mb-ink-4); }
.mb-soar-hud[hidden] { display: none; }
.mb-soar-hud-agents { display: inline-flex; align-items: center; gap: 5px; }
.mb-soar-hud-agents i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); opacity: .4; transition: opacity .3s, box-shadow .3s; }
.mb-soar-hud-agents i.is-active { opacity: 1; box-shadow: 0 0 8px rgba(var(--c-rgb), .8); }
.mb-soar-hud-agents span { margin-left: 5px; }
.mb-soar-hud-text { flex: 1 1 280px; margin: 0; font-size: 12.5px; letter-spacing: .01em; text-transform: none; color: var(--mb-ink-2); }
.mb-soar-hud-text b { margin-right: 8px; font-weight: 600; color: var(--c, var(--mb-ink)); }
.mb-soar-hud-steps { display: inline-flex; gap: 5px; }
.mb-soar-hud-steps i { width: 14px; height: 3px; border-radius: 2px; background: var(--mb-fill-3); transition: background .3s; }
.mb-soar-hud-steps i.is-done { background: var(--mb-ink-4); }
.mb-soar-hud-steps i.is-active { background: var(--c, var(--mb-ink)); }
.mb-soar-hud-btns { display: inline-flex; gap: 6px; }
.mb-soar-hud button, .mb-soar-replay { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--mb-line-strong); background: var(--mb-fill-2); color: var(--mb-ink-2); font: 600 10px/1.2 var(--mb-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s, border-color .2s; }
.mb-soar-hud button:hover, .mb-soar-replay:hover { background: var(--mb-fill-3); border-color: var(--mb-ink-4); }
.mb-soar-replay[hidden] { display: none; }
.mb-soar-replay svg { width: 11px; height: 11px; }
/* con el tablero vertical (960px de alto) el HUD iría debajo de todo: va fijo al pie de la ventana, como una barra flotante */
@media (max-width: 991px) {
  .mb-soar-status { min-height: 24px; }
  .mb-soar-hud { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; z-index: 30; transform: none; width: auto; min-height: 0; margin: 0; padding: 10px 14px; gap: 8px 10px; justify-content: center; border: 1px solid var(--mb-line); border-radius: 14px; background: var(--mb-surface); box-shadow: var(--mb-shadow); }
  .mb-soar-hud-text { flex-basis: 100%; order: -1; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-soar-cursors, .mb-soar-trails, .mb-soar-sel, .mb-soar-hud, .mb-soar-replay { display: none; }
  .mb-soar-plate > *, .mb-soar-label, .mb-soar-hud-steps i, .mb-soar-hud-agents i { transition: none; }
}