/* BestAI showcase: mapa de flujos + demo interactiva (prefijo .bsx) */
.bsx{--navy:#0b1e36;--navy2:#123a66;--blue:#3a80bb;--blue2:#5aa7ea;--green:#7EB83B;--green2:#9be15d;--purple:#8b5cf6;--amber:#f59e0b;--ink:#1f2d3d;--muted:#6b7a8c;
  position:relative;color:#fff;padding:72px 0 64px;margin:40px 0;overflow:hidden;font-family:'PT Sans',system-ui,sans-serif;
  background:radial-gradient(1200px 500px at 15% -10%,rgba(90,167,234,.35),transparent 60%),radial-gradient(900px 500px at 100% 110%,rgba(126,184,59,.25),transparent 60%),linear-gradient(160deg,var(--navy),var(--navy2))}
.bsx:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000,transparent 85%)}
.bsx .container{position:relative}
.bsx-intro{text-align:center;max-width:860px;margin:0 auto 40px}
.bsx-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:rgba(126,184,59,.18);color:var(--green2);font-weight:700;font-size:.85rem;border:1px solid rgba(155,225,93,.35)}
.bsx h2{color:#fff;font-weight:700;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.15;margin:16px 0 12px}
.bsx-intro p{color:#c9d8ea;font-size:1.1rem;margin:0}

/* ---------- Mapa ---------- */
.bsx-map{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px) minmax(0,1fr);gap:24px 96px;align-items:center;max-width:1100px;margin:0 auto}
.bsx-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.bsx-col{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.bsx-coltit{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#8fb0d3;font-weight:700;margin-bottom:2px}
.bsx-node{position:relative;z-index:1;display:flex;align-items:center;gap:12px;background:#fff;color:var(--ink);border-radius:14px;padding:10px 14px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);border:2px solid transparent;transition:transform .25s,box-shadow .25s,border-color .25s}
.bsx-node[data-esc]{cursor:pointer}
.bsx-node[data-esc]:hover,.bsx-node[data-esc]:focus-visible{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.28);outline:none}
.bsx-ico{flex:0 0 38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;color:#fff;background:var(--blue)}
.bsx-canal .bsx-ico{background:linear-gradient(135deg,var(--blue),var(--blue2))}
.bsx-node[data-k="whatsapp"] .bsx-ico{background:linear-gradient(135deg,#1faa59,#25d366)}
.bsx-accion .bsx-ico{background:linear-gradient(135deg,#5f9a24,var(--green))}
.bsx-humano .bsx-ico{background:linear-gradient(135deg,#7c3aed,var(--purple))}
.bsx-datos .bsx-ico{background:linear-gradient(135deg,#d97706,var(--amber))}
.bsx-nt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.bsx-nt b{font-size:.98rem}
.bsx-nt small{color:var(--muted);font-size:.8rem}
.bsx-node.is-soon{opacity:.6;background:rgba(255,255,255,.85);box-shadow:none;border:2px dashed #b9c8d8}
.bsx-node.is-soon .bsx-ico{background:#9aa9b9}
.bsx-soon{display:inline-block;width:max-content;margin-top:2px;padding:1px 8px;border-radius:999px;background:#eef2f6;color:#6b7a8c!important;font-weight:700}
.bsx-node.is-on{border-color:var(--green);box-shadow:0 0 0 6px rgba(126,184,59,.25),0 10px 28px rgba(0,0,0,.28);transform:scale(1.03)}

/* Nodo central, inspirado en las tarjetas del editor de flujos */
.bsx-hub{display:block;padding:0;overflow:hidden;border-radius:18px;box-shadow:0 0 0 1px rgba(255,255,255,.15),0 20px 60px rgba(0,0,0,.35),0 0 80px rgba(90,167,234,.35)}
.bsx-hub-head{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#e7f6dc;color:#3f7a12;font-weight:700;font-size:.8rem;letter-spacing:.08em}
.bsx-hub-head i{font-size:1.1rem}
.bsx-dot{margin-left:auto;width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:bsx-ping 1.8s infinite}
.bsx-hub-body{padding:14px 16px 16px}
.bsx-hub-body>b{display:block;font-size:1.6rem;color:var(--blue);line-height:1}
.bsx-hub-body>small{display:block;color:var(--muted);margin:4px 0 10px}
.bsx-hub ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:var(--ink)}
.bsx-hub li{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding-top:6px;border-top:1px solid #eef2f6}
.bsx-hub li em{font-style:normal;font-weight:700;color:#5f9a24}
.bsx-pill{padding:1px 8px;border-radius:999px;background:#eef4fb;color:var(--blue);font-weight:700;font-size:.72rem}
.bsx-hub.is-on{border-color:transparent;box-shadow:0 0 0 3px var(--green),0 20px 60px rgba(0,0,0,.35),0 0 90px rgba(126,184,59,.55);transform:none}

/* Conexiones */
.bsx-l-base{fill:none;stroke:rgba(155,225,93,.28);stroke-width:2}
.bsx-l-flow{fill:none;stroke:var(--green2);stroke-width:2;stroke-dasharray:5 11;stroke-linecap:round;opacity:.75;animation:bsx-dash 1.1s linear infinite}
.bsx-link.is-soon .bsx-l-base{stroke:rgba(255,255,255,.18);stroke-dasharray:4 6}
.bsx-link.is-soon .bsx-l-flow,.bsx-link.is-soon circle{display:none}
.bsx-link circle{fill:#fff;filter:drop-shadow(0 0 4px #9be15d)}
.bsx-link.is-on .bsx-l-base{stroke:var(--green2);stroke-width:3}
.bsx-link.is-on .bsx-l-flow{stroke:#fff;stroke-width:3;opacity:1;animation-duration:.45s}
.bsx-hint{text-align:center;color:#8fb0d3;margin:22px 0 0;font-size:.92rem}

/* ---------- Demo ---------- */
.bsx-demo{margin-top:64px}
.bsx-demo h3{color:#fff;text-align:center;font-weight:700;font-size:clamp(1.35rem,2.6vw,2rem);margin:0 0 6px}
.bsx-demo-sub{text-align:center;color:#c9d8ea;margin:0 auto 22px;max-width:720px}
.bsx-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:28px}
.bsx-tab{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;cursor:pointer;transition:all .2s}
.bsx-tab i{font-size:1.5rem;color:var(--green2)}
.bsx-tab span{display:flex;flex-direction:column;line-height:1.15}
.bsx-tab small{color:#a9c1db;font-size:.78rem}
.bsx-tab:hover{background:rgba(255,255,255,.14)}
.bsx-tab[aria-selected="true"]{background:#fff;color:var(--ink);border-color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.bsx-tab[aria-selected="true"] small{color:var(--muted)}
.bsx-tab[aria-selected="true"] i{color:var(--blue)}
.bsx-stage{display:grid;grid-template-columns:320px minmax(0,1fr);gap:32px;max-width:980px;margin:0 auto;align-items:start}

/* Teléfono */
.bsx-phone{position:relative;width:300px;height:600px;margin:0 auto;border-radius:44px;padding:12px;background:#0a0f17;box-shadow:0 0 0 2px #2a3546,0 30px 70px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden}
.bsx-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:110px;height:24px;border-radius:0 0 16px 16px;background:#0a0f17;z-index:3}
.bsx-phone>div:not(.bsx-notch){position:relative}
.bsx-ph-chathead{display:flex;align-items:center;gap:10px;padding:34px 14px 10px;background:#0f6e5e;color:#fff;border-radius:32px 32px 0 0}
.bsx-ph-chathead>span:nth-child(2){display:flex;flex-direction:column;line-height:1.15;flex:1;min-width:0}
.bsx-ph-chathead b{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bsx-ph-chathead small{font-size:.72rem;color:#c7efe6}
.bsx-ph-chathead>i{font-size:1.2rem}
.bsx-av{width:34px;height:34px;border-radius:50%;background:#e7f6dc;color:#0f6e5e;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.bsx-ph-call{display:none;flex-direction:column;align-items:center;padding:44px 16px 14px;text-align:center;color:#fff}
.bsx-av-big{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.4rem;background:linear-gradient(135deg,var(--blue),var(--green));box-shadow:0 0 0 0 rgba(126,184,59,.6);animation:bsx-ping 2s infinite}
.bsx-ph-call b{margin-top:10px;font-size:1.1rem}
.bsx-ph-call small{color:#9fb3c8;font-size:.8rem}
.bsx-timer{font-variant-numeric:tabular-nums;color:var(--green2);font-weight:700;margin-top:2px}
.bsx-wave{display:flex;align-items:center;justify-content:center;gap:3px;height:36px;margin-top:10px;width:100%}
.bsx-wave i{width:4px;height:6px;border-radius:3px;background:rgba(255,255,255,.35);transition:height .15s}
.bsx-phone.is-ia .bsx-wave i{background:var(--green2);animation:bsx-wave .9s ease-in-out infinite}
.bsx-phone.is-c .bsx-wave i,.bsx-phone.is-h .bsx-wave i{background:var(--blue2);animation:bsx-wave .9s ease-in-out infinite}
.bsx-wave i:nth-child(3n){animation-delay:.15s}.bsx-wave i:nth-child(3n+1){animation-delay:.3s}.bsx-wave i:nth-child(4n){animation-delay:.45s}.bsx-wave i:nth-child(5n){animation-delay:.6s}
.bsx-ph-body{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:8px;background:#efeae2;scrollbar-width:none}
.bsx-ph-body::-webkit-scrollbar{display:none}
.bsx-ph-foot{display:flex;align-items:center;gap:8px;padding:10px;background:#f6f3ef;border-radius:0 0 32px 32px}
.bsx-input{flex:1;background:#fff;border-radius:999px;padding:7px 14px;color:#9aa5b1;font-size:.85rem}
.bsx-send{width:34px;height:34px;border-radius:50%;background:#0f6e5e;color:#fff;display:flex;align-items:center;justify-content:center}
.bsx-callbtns{display:none;width:100%;justify-content:space-around;align-items:center}
.bsx-callbtns i{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);color:#fff;font-size:1.3rem}
.bsx-callbtns .bsx-hang{background:#ef4444;transform:rotate(135deg)}
.bsx-phone[data-mode="voz"]{background:linear-gradient(180deg,#0e2440,#071321)}
.bsx-phone[data-mode="voz"] .bsx-ph-chathead{display:none}
.bsx-phone[data-mode="voz"] .bsx-ph-call{display:flex}
.bsx-phone[data-mode="voz"] .bsx-ph-body{background:transparent}
.bsx-phone[data-mode="voz"] .bsx-ph-foot{background:transparent;padding:14px 10px 18px}
.bsx-phone[data-mode="voz"] .bsx-input,.bsx-phone[data-mode="voz"] .bsx-send{display:none}
.bsx-phone[data-mode="voz"] .bsx-callbtns{display:flex}

/* Burbujas */
.bsx-msg{max-width:84%;padding:7px 10px 6px;border-radius:12px;font-size:.86rem;line-height:1.35;color:#1f2d3d;box-shadow:0 1px 1px rgba(0,0,0,.08);animation:bsx-in .35s ease both}
.bsx-msg small{display:block;font-size:.66rem;font-weight:700;margin-bottom:2px}
.bsx-msg.ia,.bsx-msg.h{align-self:flex-start;background:#fff;border-top-left-radius:4px}
.bsx-msg.ia small{color:#3f7a12}
.bsx-msg.h small{color:var(--purple)}
.bsx-msg.c{align-self:flex-end;background:#d9fdd3;border-top-right-radius:4px}
.bsx-msg.c small{display:none}
.bsx-phone[data-mode="voz"] .bsx-msg{background:rgba(255,255,255,.1);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.12)}
.bsx-phone[data-mode="voz"] .bsx-msg.ia small{color:var(--green2)}
.bsx-phone[data-mode="voz"] .bsx-msg.c small{display:block;color:var(--blue2)}
.bsx-phone[data-mode="voz"] .bsx-msg.h small{color:#c4b5fd}
.bsx-phone[data-mode="voz"] .bsx-msg.c{background:rgba(90,167,234,.18)}
.bsx-sys{align-self:center;font-size:.72rem;padding:3px 10px;border-radius:999px;background:#e1f2fb;color:#3a6c8f;animation:bsx-in .35s ease both;text-align:center}
.bsx-phone[data-mode="voz"] .bsx-sys{background:rgba(155,225,93,.15);color:var(--green2)}
.bsx-typing{align-self:flex-start;display:flex;gap:4px;padding:10px 12px;background:#fff;border-radius:12px;border-top-left-radius:4px}
.bsx-typing.c{align-self:flex-end;background:#d9fdd3;border-radius:12px;border-top-right-radius:4px}
.bsx-typing i{width:6px;height:6px;border-radius:50%;background:#9aa5b1;animation:bsx-blink 1.2s infinite}
.bsx-typing i:nth-child(2){animation-delay:.2s}.bsx-typing i:nth-child(3){animation-delay:.4s}

/* Panel */
.bsx-panel{background:#fff;color:var(--ink);border-radius:20px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.3);min-height:420px;display:flex;flex-direction:column}
.bsx-pn-head{display:flex;align-items:center;gap:8px;font-size:1.05rem;margin-bottom:14px}
.bsx-pn-head small{color:#ef4444;font-weight:700;text-transform:uppercase;font-size:.7rem;letter-spacing:.08em}
.bsx-live{width:10px;height:10px;border-radius:50%;background:#ef4444;animation:bsx-ping-r 1.6s infinite}
.bsx-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.bsx-meta div{background:#f5f8fb;border:1px solid #e6edf4;border-radius:12px;padding:8px 10px;min-width:0}
.bsx-meta small{display:block;color:var(--muted);font-size:.72rem}
.bsx-meta b{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.bsx-sent{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.bsx-sent small{color:var(--muted);font-size:.78rem;white-space:nowrap}
.bsx-bar{flex:1;height:8px;border-radius:99px;background:linear-gradient(90deg,#ef4444,#f59e0b 45%,#22c55e);position:relative}
.bsx-bar i{position:absolute;top:50%;left:50%;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--ink);transform:translate(-50%,-50%);transition:left .8s cubic-bezier(.3,1.4,.5,1)}
.bsx-sent b{font-size:.85rem;min-width:70px;text-align:right}
.bsx-pn-tit{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:4px 0 8px;display:flex;align-items:center;gap:6px}
.bsx-pn-tit i{color:var(--green);font-size:1rem}
.bsx-acts{list-style:none;padding:0;margin:0 0 10px;display:flex;flex-direction:column;gap:8px}
.bsx-acts li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:#f6faf2;border:1px solid #e3f0d6;font-size:.88rem;animation:bsx-in .4s ease both}
.bsx-acts li i{flex:0 0 30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--green);font-size:1.05rem}
.bsx-acts li.k-humano i{background:var(--purple)}
.bsx-acts li.k-crm i,.bsx-acts li.k-analitica i{background:var(--amber)}
.bsx-acts li.k-whatsapp i{background:#25d366}
.bsx-acts li.k-sms i{background:var(--blue)}
.bsx-acts li span{flex:1;min-width:0}
.bsx-acts li time{color:var(--muted);font-size:.72rem;font-variant-numeric:tabular-nums}
.bsx-acts .bsx-empty{background:none;border:1px dashed #d5dee8;color:var(--muted);justify-content:center}
.bsx-sum{margin-top:auto;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,#eef6ff,#f2fbe9);border:1px solid #dbe8f5;animation:bsx-in .5s ease both}
.bsx-sum p{margin:0 0 8px;font-size:.92rem}
.bsx-tags{display:flex;flex-wrap:wrap;gap:6px}
.bsx-tags span{padding:2px 10px;border-radius:999px;background:#fff;border:1px solid #cfe3bd;color:#3f7a12;font-weight:700;font-size:.76rem}
.bsx-replay{align-self:flex-start;margin-top:12px;border:0;border-radius:999px;padding:8px 16px;background:var(--ink);color:#fff;font-weight:700;cursor:pointer}
.bsx-replay:hover{background:var(--blue)}
.bsx-nota{text-align:center;color:#7f9bb9;font-size:.8rem;margin:18px 0 0}

/* CTAs */
.bsx-ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:40px}
.bsx-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:8px;font-weight:700;font-size:.9rem;text-decoration:none!important;letter-spacing:.03em;transition:transform .2s,background .2s,border-color .2s}
.bsx-btn i{font-size:1.05rem}
.bsx-btn:hover{transform:translateY(-1px)}
.bsx-btn-1{background:var(--green);color:#fff!important;box-shadow:0 4px 12px rgba(126,184,59,.25)}
.bsx-btn-1:hover{background:#6ea630}
.bsx-btn-2{background:transparent;color:#fff!important;border:1.5px solid rgba(255,255,255,.45)}
.bsx-btn-2:hover{border-color:#fff;background:rgba(255,255,255,.08)}

@keyframes bsx-dash{to{stroke-dashoffset:-32}}
@keyframes bsx-ping{0%{box-shadow:0 0 0 0 rgba(126,184,59,.55)}80%,100%{box-shadow:0 0 0 14px rgba(126,184,59,0)}}
@keyframes bsx-ping-r{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}80%,100%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
@keyframes bsx-wave{0%,100%{height:6px}50%{height:30px}}
@keyframes bsx-blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes bsx-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Tablet y móvil: mapa vertical */
@media (max-width:991.98px){
  .bsx{padding:56px 0 48px}
  .bsx-map{grid-template-columns:1fr;gap:56px;max-width:560px}
  .bsx-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .bsx-col-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bsx-coltit{grid-column:1/-1;text-align:center}
  .bsx-col-in .bsx-node{flex-direction:column;text-align:center;gap:6px;padding:10px 6px}
  .bsx-col-in .bsx-nt small:not(.bsx-soon){display:none}
  .bsx-col-in .bsx-soon{margin:2px auto 0}
  .bsx-hub{max-width:340px;width:100%;margin:0 auto}
  .bsx-stage{grid-template-columns:1fr;gap:24px;max-width:520px}
}
@media (max-width:575.98px){
  .bsx-col-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bsx-node{padding:8px 10px;gap:8px}
  .bsx-ico{flex-basis:32px;height:32px;font-size:1.15rem}
  .bsx-nt b{font-size:.85rem}
  .bsx-tab{flex:1 1 calc(50% - 10px);padding:8px 10px}
  .bsx-tab small{display:none}
  .bsx-phone{width:100%;max-width:300px;height:540px}
  .bsx-meta b{font-size:.8rem}
  .bsx-panel{padding:16px;min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .bsx *,.bsx *:before{animation:none!important;transition:none!important}
}