/* AgentesNexo · escenas animadas de "Cómo funciona" y "En producción" (2-nov-2026, TG 14840-14842).
   Líneas claras sobre el azul oscuro de los paneles, acento en el azul de la marca. El JS está en escenas.js. */
/* con escena, el número grande de fondo se va (Demian TG 14850) */
.con-escena .num { display: none; }
/* el panel no puede ser más alto que lo que queda visible bajo el menú y la barra inferior */
.step-media.con-escena { max-height: calc(100svh - 14vh - 96px); }
.esc-wrap { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.where-media .esc-wrap { pointer-events: auto; }
.esc-svg { position: absolute; left: 4%; top: 3%; width: 92%; height: 86%; overflow: visible; }
.where-media .esc-svg { left: 2%; top: 2%; width: 96%; height: 96%; }
.esc-svg text { font-family: var(--font-disp); fill: rgba(236, 232, 223, .92); }
.esc-t { font-size: 12px; font-weight: 600; }
.esc-t.big { font-size: 15px; font-weight: 700; }
.esc-t.w, .esc-mono.w { fill: #fff; }
.esc-t.dim, .esc-mono.dim { fill: rgba(236, 232, 223, .55); }
.esc-svg .esc-mono { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; }
.esc-svg .esc-mono.mini { font-size: 7.5px; letter-spacing: .06em; }
.esc-svg .esc-mono.acc { fill: #7B85FF; }
.esc-l { fill: none; stroke: rgba(236, 232, 223, .82); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.esc-d { fill: none; stroke: rgba(236, 232, 223, .22); stroke-width: 1; }
.esc-acc { fill: none; stroke: #6E79FF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.esc-dash { fill: none; stroke: rgba(123, 133, 255, .7); stroke-width: 1.2; stroke-dasharray: 3 4; }
.esc-dot { fill: #6E79FF; }
.esc-dotw { fill: #fff; }
.esc-in { fill: rgba(236, 232, 223, .07); stroke: rgba(236, 232, 223, .3); stroke-width: 1; }
.esc-out { fill: #2433FF; stroke: none; }
.esc-card { fill: rgba(16, 18, 34, .92); stroke: rgba(236, 232, 223, .22); stroke-width: 1; }
.esc-chip rect { fill: rgba(36, 51, 255, .18); stroke: rgba(123, 133, 255, .55); stroke-width: 1; }
.esc-tag rect { fill: #2433FF; }
.esc-ck { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.esc-cell { fill: rgba(36, 51, 255, 0); stroke: rgba(236, 232, 223, .22); stroke-width: 1; }
.esc-bar { fill: rgba(236, 232, 223, .55); }
.esc-bar.dim { fill: rgba(236, 232, 223, .2); }
.esc-pill { fill: none; stroke: rgba(236, 232, 223, .3); stroke-width: 1; }
.esc-pill.on { fill: #2433FF; stroke: #2433FF; }
.esc-col { fill: rgba(110, 121, 255, .35); stroke: #6E79FF; stroke-width: 1; }
.esc-wave { stroke: #8A93FF; stroke-width: 2; stroke-linecap: round; }
.esc-mod rect, .esc-mod { fill: rgba(16, 18, 34, .95); stroke: rgba(123, 133, 255, .7); stroke-width: 1.1; }
.esc-mapdot { fill: rgba(236, 232, 223, .3); }
.esc-arc { fill: none; stroke: rgba(123, 133, 255, .35); stroke-width: 1.3; }
.esc-arc.on { stroke: #8A93FF; stroke-width: 1.8; }
.esc-ring { fill: none; stroke: rgba(123, 133, 255, .55); stroke-width: 1.2; }
.esc-ring.big { stroke: rgba(123, 133, 255, .4); }
.esc-pindot { fill: #6E79FF; }
.esc-pin.on .esc-ring { stroke: #fff; stroke-width: 1.6; }
.esc-pin.on .esc-pindot { fill: #fff; }
.esc-svg g.on .esc-t { fill: #fff; }
.where-media .esc-svg g .esc-t.big { transition: fill .4s ease; fill: rgba(236, 232, 223, .5); }
.where-media .esc-svg g.on .esc-t.big { fill: #fff; }
.esc-hub .esc-ring { animation: esc-latido 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes esc-latido { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.35); opacity: .25; } }
@media (max-width: 860px) {
  .where-media.con-escena { aspect-ratio: 1 / 1; }
  .step-media.con-escena { aspect-ratio: 1 / 1; max-height: none; }
}
@media (prefers-reduced-motion: reduce) { .esc-hub .esc-ring { animation: none; } }
/* Pruébalo: chat de demostración con altura fija (la fija escenas.js), mensajes que entran suaves y el "escribiendo" del lado del agente */
.chat-fijo .chat-feed { overflow: hidden; transition: opacity .45s ease; }
.chat-fijo .chat-feed .msg { width: fit-content; }
.chat-fijo .chat-feed.vaciando { opacity: 0; }
.chat-fijo .chat-feed .msg, .chat-fijo .chat-feed .typing-d { animation: chat-entra .45s cubic-bezier(.16, 1, .3, 1) both; }
.chat-fijo .chat-feed .typing-d { display: flex; width: max-content; margin-left: auto; background: rgba(36, 51, 255, .45); border-radius: 14px; border-bottom-right-radius: 4px; }
@keyframes chat-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .chat-fijo .chat-feed .msg, .chat-fijo .chat-feed .typing-d { animation: none; } }