/*! © 2026 UltrAgentes-IA — Todos los derechos reservados. Código protegido; prohibida su copia sin autorización escrita. hola@ultraagentes.ai */
/* ═══════════════════════════════════════════════════════════════
   UltrAgentes-IA v11 — APEX LAYER
   Live Demo simulador · Humano vs IA · Radar de capacidades
═══════════════════════════════════════════════════════════════ */
:root{--ax-cyan:#63e6ff;--ax-blue:#3b82f6;--ax-violet:#8b5cf6;--ax-green:#52e5a1;--ax-pink:#ec4899;--ax-amber:#fbbf24;--ax-ease:cubic-bezier(.16,1,.3,1)}

/* ═══════════ LIVE DEMO — simulador de chatbot ═══════════ */
.live-demo-section{padding:clamp(60px,9vw,110px) 0;position:relative}
.live-demo-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,64px);align-items:center;margin-top:52px}
.ld-copy h3{font:800 clamp(1.4rem,3vw,2rem)/1.2 Inter,sans-serif;color:#fff;letter-spacing:-.03em;margin-bottom:16px}
.ld-copy p{color:#96aac6;font-size:1rem;line-height:1.7;margin-bottom:26px}
.ld-scenarios{display:grid;gap:11px}
.ld-scenario{display:flex;align-items:center;gap:14px;padding:15px 18px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.025);cursor:pointer;text-align:left;color:#c6d4e8;font:600 14px Inter,sans-serif;transition:.35s var(--ax-ease);width:100%}
.ld-scenario i{width:38px;height:38px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;font-size:15px;background:rgba(99,230,255,.09);color:var(--ax-cyan);transition:.35s}
.ld-scenario small{display:block;font:400 11.5px/1.4 Inter,sans-serif;color:#7b8fac;margin-top:2px}
.ld-scenario:hover{border-color:rgba(99,230,255,.35);transform:translateX(6px)}
.ld-scenario.active{border-color:rgba(99,230,255,.5);background:linear-gradient(120deg,rgba(99,230,255,.08),rgba(139,92,246,.06));box-shadow:0 14px 44px rgba(0,0,0,.3)}
.ld-scenario.active i{background:linear-gradient(135deg,#0ea5c9,#8b5cf6);color:#fff;box-shadow:0 0 24px rgba(99,230,255,.35)}
/* Phone mockup */
.ld-phone{position:relative;width:min(390px,100%);margin:0 auto;border:1px solid rgba(255,255,255,.12);border-radius:38px;background:linear-gradient(170deg,#0b1424,#060a14);box-shadow:0 50px 130px rgba(0,0,0,.55),0 0 80px rgba(59,130,246,.08),inset 0 1px rgba(255,255,255,.08);padding:14px;transform:rotate(1.2deg);transition:transform .6s var(--ax-ease)}
.ld-phone:hover{transform:rotate(0)}
.ld-screen{border-radius:27px;overflow:hidden;background:#050910;display:flex;flex-direction:column;height:560px}
.ld-chat-head{display:flex;align-items:center;gap:12px;padding:15px 17px;background:linear-gradient(120deg,rgba(14,165,201,.16),rgba(139,92,246,.14));border-bottom:1px solid rgba(255,255,255,.07)}
.ld-chat-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:15px;color:#fff;background:linear-gradient(135deg,#0ea5c9,#8b5cf6);box-shadow:0 0 18px rgba(99,230,255,.35)}
.ld-chat-id strong{display:block;font:700 13.5px Inter,sans-serif;color:#fff}
.ld-chat-id span{font:500 10px 'JetBrains Mono',monospace;color:var(--ax-green);text-transform:uppercase;letter-spacing:.08em}
.ld-chat-id span::before{content:"● ";animation:axBlink 1.6s infinite}
@keyframes axBlink{50%{opacity:.3}}
.ld-log{flex:1;overflow-y:auto;padding:18px 15px;display:flex;flex-direction:column;gap:11px;scrollbar-width:thin;scrollbar-color:rgba(99,230,255,.2) transparent}
.ld-msg{max-width:82%;padding:11px 14px;border-radius:15px;font:400 13px/1.55 Inter,sans-serif;animation:axMsgIn .45s var(--ax-ease) both}
@keyframes axMsgIn{from{opacity:0;transform:translateY(12px) scale(.97)}}
.ld-msg.in{align-self:flex-start;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.08);color:#dce7f6;border-bottom-left-radius:5px}
.ld-msg.out{align-self:flex-end;background:linear-gradient(135deg,#1d7fd4,#7c5ce8);color:#fff;border-bottom-right-radius:5px;box-shadow:0 8px 22px rgba(59,130,246,.26)}
.ld-msg.sys{align-self:center;max-width:94%;background:rgba(82,229,161,.08);border:1px solid rgba(82,229,161,.25);color:#a4ecc8;font-size:11.5px;text-align:center;border-radius:11px;padding:8px 14px}
.ld-msg.sys i{margin-right:6px}
.ld-msg .ld-meta{display:block;font-size:9.5px;opacity:.55;margin-top:5px;font-family:'JetBrains Mono',monospace}
.ld-typing{align-self:flex-start;display:flex;gap:5px;padding:12px 15px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.08);border-radius:15px 15px 15px 5px}
.ld-typing i{width:6px;height:6px;border-radius:50%;background:var(--ax-cyan);animation:axDot 1.1s ease-in-out infinite}
.ld-typing i:nth-child(2){animation-delay:.15s}.ld-typing i:nth-child(3){animation-delay:.3s}
@keyframes axDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.ld-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid rgba(255,255,255,.07);font:500 10px 'JetBrains Mono',monospace;color:#5f7290;letter-spacing:.08em;text-transform:uppercase}
.ld-replay{border:1px solid rgba(99,230,255,.3);border-radius:9px;background:rgba(99,230,255,.07);color:#9beaff;font:600 11px Inter,sans-serif;padding:7px 14px;cursor:pointer;transition:.25s}
.ld-replay:hover{background:rgba(99,230,255,.15)}
.ld-phone-notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:110px;height:22px;border-radius:0 0 15px 15px;background:#050910;z-index:5}
@media(max-width:920px){.live-demo-grid{grid-template-columns:1fr}.ld-phone{transform:none}}

/* ═══════════ VERSUS — Humano vs Agente IA ═══════════ */
.versus-wrap{margin-top:56px;border:1px solid rgba(99,230,255,.14);border-radius:28px;overflow:hidden;background:linear-gradient(160deg,rgba(10,17,32,.92),rgba(5,9,18,.95));box-shadow:0 34px 100px rgba(0,0,0,.4)}
.versus-head{text-align:center;padding:30px 24px 6px}
.versus-head h3{font:800 clamp(1.25rem,2.6vw,1.7rem)/1.2 Inter,sans-serif;color:#fff;letter-spacing:-.02em}
.versus-head p{color:#8ba0bd;font-size:.92rem;margin-top:8px}
.versus-body{display:grid;grid-template-columns:1fr auto 1fr;gap:0;padding:26px clamp(16px,4vw,40px) 34px;align-items:stretch}
.vs-col{display:grid;gap:14px;align-content:start}
.vs-col-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:6px}
.vs-col-head i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:17px}
.vs-human .vs-col-head i{background:rgba(251,191,36,.12);color:var(--ax-amber)}
.vs-ai .vs-col-head i{background:linear-gradient(135deg,#0ea5c9,#8b5cf6);color:#fff;box-shadow:0 0 22px rgba(99,230,255,.3)}
.vs-col-head strong{font:800 15px Inter,sans-serif;color:#fff}
.vs-col-head small{display:block;font:500 10.5px 'JetBrains Mono',monospace;color:#7c90ae;text-transform:uppercase;letter-spacing:.1em}
.vs-row{display:grid;gap:7px}
.vs-row .lbl{display:flex;justify-content:space-between;font:600 11.5px Inter,sans-serif;color:#9cb0cc}
.vs-row .lbl b{font-family:'JetBrains Mono',monospace;font-size:11px;color:#fff}
.vs-bar{height:9px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.vs-bar i{display:block;height:100%;width:0;border-radius:inherit;transition:width 1.2s var(--ax-ease)}
.vs-human .vs-bar i{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.vs-ai .vs-bar i{background:linear-gradient(90deg,#63e6ff,#52e5a1);box-shadow:0 0 14px rgba(82,229,161,.35)}
.vs-divider{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 clamp(12px,3vw,30px)}
.vs-badge{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font:800 15px Inter,sans-serif;color:#fff;background:linear-gradient(135deg,#0ea5c9,#3b82f6 55%,#8b5cf6);box-shadow:0 0 44px rgba(99,230,255,.35),0 14px 40px rgba(0,0,0,.4);animation:axVsPulse 3s ease-in-out infinite}
@keyframes axVsPulse{50%{transform:scale(1.08)}}
.vs-line{flex:1;width:1px;background:linear-gradient(to bottom,transparent,rgba(99,230,255,.3),transparent);min-height:34px}
@media(max-width:760px){.versus-body{grid-template-columns:1fr}.vs-divider{flex-direction:row;padding:8px 0}.vs-line{height:1px;width:auto;flex:1;background:linear-gradient(to right,transparent,rgba(99,230,255,.3),transparent)}}

/* ═══════════ RADAR — capacidades del ejército ═══════════ */
.radar-wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,52px);align-items:center;margin-top:54px;border:1px solid rgba(99,230,255,.14);border-radius:28px;padding:clamp(24px,4vw,44px);background:linear-gradient(150deg,rgba(9,15,29,.9),rgba(5,9,18,.94));box-shadow:0 30px 90px rgba(0,0,0,.38)}
.radar-canvas-box{position:relative;width:min(340px,72vw);aspect-ratio:1;margin:0 auto}
#radarCanvas{width:100%;height:100%}
.radar-info h3{font:800 clamp(1.2rem,2.4vw,1.55rem)/1.25 Inter,sans-serif;color:#fff;letter-spacing:-.02em;margin-bottom:10px}
.radar-info>p{color:#8ba0bd;font-size:.93rem;line-height:1.65;margin-bottom:22px}
.radar-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.radar-key{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.025);cursor:pointer;transition:.3s var(--ax-ease);text-align:left;color:#c6d4e8;font:600 12.5px Inter,sans-serif;width:100%}
.radar-key .dot{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.radar-key:hover{border-color:rgba(99,230,255,.3)}
.radar-key.active{border-color:rgba(99,230,255,.5);background:rgba(99,230,255,.07)}
@media(max-width:860px){.radar-wrap{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){.ld-msg,.ld-typing i,.vs-badge{animation:none!important}.vs-bar i{transition:none}}