/* ── Mapa de camino de ataque ─────────────────────────────────────────────
   La coreografía va por clases y custom properties (--d, --on, --off) que
   escribe el JS; [data-play] arranca y [data-final] salta al estado final. */
.mb-pathmap {
  --pm-bg: #060606; --pm-plate: #0d0d0f; --pm-edge: #2d2f36; --pm-tile: #1b1c21; --pm-tile-edge: #33353d;
  --pm-ink: #f4f2ee; --pm-mute: #8c8f9b; --pm-line: #3a3d46;
  --pm-red: #ff4a3d; --pm-ok: #39d98a; --pm-cyan: #0ad5ff;
  position: relative; margin: 0; padding: 18px; border-radius: 16px;
  background: var(--pm-bg);
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
}
/* esquinas de encuadre */
.mb-pathmap::before, .mb-pathmap::after { content: ""; position: absolute; width: 18px; height: 18px; border: 1px solid rgba(255,255,255,.35); pointer-events: none; }
.mb-pathmap::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.mb-pathmap::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.mb-pathmap svg { display: block; width: 100%; height: auto; overflow: visible; }
.mb-pathmap text { fill: var(--pm-ink); }
.pm-region { fill: var(--pm-plate); stroke: var(--pm-edge); }
.pm-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pm-title { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.pm-count { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; fill: var(--pm-mute); }
.pm-hit { fill: transparent; }
.pm-tile { fill: var(--pm-tile); stroke: var(--pm-tile-edge); opacity: .3; transition: fill .18s, stroke .18s, filter .25s; }
.pm-tile.is-new { fill: none; stroke: var(--pm-mute); stroke-dasharray: 2 2; }
.pm-cell:hover .pm-tile { fill: #3a3d46; stroke: #d7d9e0; filter: drop-shadow(0 0 4px rgba(255,255,255,.45)); opacity: 1; }
.pm-scope { fill: none; stroke: var(--pm-mute); stroke-dasharray: 3 3; }
.pm-scope-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; fill: var(--pm-mute); }
.pm-entry { stroke: var(--pm-red); stroke-width: 2.6; }
.pm-sweep { fill: url(#pm-sweep-grad); opacity: 0; }
.pm-draw { fill: none; stroke: var(--pm-red); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: square; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.pm-node { fill: var(--pm-red); opacity: 0; }
.pm-target { fill: none; stroke: var(--pm-red); stroke-width: 1.4; stroke-linecap: square; opacity: 0; }
.pm-ok { opacity: 0; transform-box: fill-box; transform-origin: center; }
.pm-ok rect { fill: var(--pm-ok); }
.pm-ok path { fill: none; stroke: var(--pm-ok); stroke-width: 1.4; stroke-linecap: square; }
.pm-ok-label { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; fill: var(--pm-ok); }
.pm-target-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; paint-order: stroke; stroke: var(--pm-bg); stroke-width: 4; stroke-linejoin: round; }
.pm-node-label { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; fill: var(--pm-red); paint-order: stroke; stroke: var(--pm-bg); stroke-width: 3; }
.pm-chip { opacity: 0; transform: translateY(10px); }
.pm-chip rect.pm-chip-bg { fill: var(--pm-bg); }
.pm-chip rect.pm-chip-box { fill: rgba(57,217,138,.14); stroke: rgba(57,217,138,.55); }
.pm-chip text { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; fill: var(--pm-ok); }
.pm-chip circle { fill: rgba(57,217,138,.14); stroke: rgba(57,217,138,.55); }
.pm-chip path { fill: none; stroke: var(--pm-ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mb-pathmap--open .pm-chip rect.pm-chip-box { fill: rgba(255,74,61,.12); stroke: rgba(255,74,61,.55); }
.mb-pathmap--open .pm-chip text { fill: var(--pm-red); }
.mb-pathmap--open .pm-chip circle { fill: rgba(255,74,61,.12); stroke: rgba(255,74,61,.55); }
.mb-pathmap--open .pm-chip path { stroke: var(--pm-red); }

[data-play] .pm-tile { animation: pm-to1 .45s ease-out var(--d, 0s) forwards; }
[data-play] .pm-sweep { animation: pm-sweep 1.1s linear forwards; }
[data-play] .pm-draw { animation: pm-draw var(--dur) linear var(--d) forwards; }
[data-play] .pm-draw.pm-post { animation: pm-draw var(--dur) linear var(--d) forwards, pm-drain .6s ease-in var(--drain) forwards; }
[data-play] .pm-node { animation: pm-to1 .25s ease-out var(--on) forwards; }
[data-play] .pm-node.pm-off { animation: pm-to1 .25s ease-out var(--on) forwards, pm-to0 .3s ease-in var(--off) forwards; }
[data-play] .pm-target { animation: pm-to1 .3s ease-out var(--on) forwards, pm-to0 .3s ease-in var(--off) forwards; }
[data-play] .pm-target.pm-stay { animation: pm-to1 .3s ease-out var(--on) forwards; }
[data-play] .pm-ok { animation: pm-pop .45s cubic-bezier(.2,1.4,.4,1) var(--on) forwards; }
[data-play] .pm-chip { animation: pm-chip .5s cubic-bezier(.2,1,.3,1) var(--on) forwards; }
[data-final] .pm-tile, [data-final] .pm-ok, [data-final] .pm-chip, [data-final] .pm-node, [data-final] .pm-target.pm-stay { opacity: 1; transform: none; }
[data-final] .pm-node.pm-off, [data-final] .pm-target:not(.pm-stay) { opacity: 0; }
[data-final] .pm-draw { stroke-dashoffset: 0; }
[data-final] .pm-draw.pm-post { stroke-dashoffset: 100; }
@keyframes pm-to1 { to { opacity: 1; } }
@keyframes pm-to0 { from { opacity: 1; } to { opacity: 0; } }
@keyframes pm-draw { to { stroke-dashoffset: 0; } }
@keyframes pm-drain { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 100; } }
@keyframes pm-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes pm-chip { to { opacity: 1; transform: none; } }
@keyframes pm-sweep { 0% { opacity: 1; transform: translateX(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(640px); } }

/* ── hero con mapa ── */
.mb-pathhero { padding: 150px 0 60px; }
.mb-pathhero-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
.mb-pathhero h1 { font: 700 clamp(32px, 4.2vw, 56px)/1.05 var(--default-font, "Manrope", sans-serif); letter-spacing: -.03em; color: var(--primary-color, #fff); margin: 0 0 20px; }
.mb-pathhero h1 span { color: var(--mb-accent); }
.mb-pathhero p { font-size: 17px; line-height: 1.55; color: var(--text-color, #a7aabb); margin: 0 0 28px; max-width: 46ch; }
.mb-pathhero .hp-ctas { justify-content: flex-start; gap: 15px 30px; margin-top: 36px; }
.mb-pathhero p { margin-bottom: 0; }
.mb-pathhero-steps { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 26px 0 0; padding: 0; list-style: none; font: 500 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--text-color, #a7aabb); }
.mb-pathhero-steps li { display: inline-flex; align-items: center; gap: 7px; }
.mb-pathhero-steps li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pm-red, #ff4a3d); }
.mb-pathhero-steps li.is-ok::before { background: #39d98a; box-shadow: 0 0 8px #39d98a; }
.mb-pathsection { padding: 80px 0; }
.mb-pathsection .mb-pathhero-grid { align-items: center; }

@media (max-width: 991px) {
  .mb-pathhero { padding: 120px 0 40px; }
  .mb-pathhero-grid { grid-template-columns: 1fr; gap: 28px; }
  .mb-pathhero p { max-width: none; }
  .mb-pathsection { padding: 56px 0; }
  .mb-pathmap { padding: 12px; }
}
.mb-usecase-h2 { font: 700 clamp(28px, 3.2vw, 44px)/1.08 var(--default-font, "Manrope", sans-serif); letter-spacing: -.03em; color: var(--primary-color, #fff); margin: 0 0 18px; }
.mb-usecase-h2 span { color: var(--mb-accent); }
.mb-usecase-p { font-size: 16px; line-height: 1.6; color: var(--text-color, #a7aabb); margin: 0; }