/* Escena explicativa propia: canales → sistema + IA → acciones. */
.connection-scene{margin-left:-15px;margin-right:-30px;height:auto;min-height:570px;align-self:center;padding-top:15px;position:relative}
.connection-aura{position:absolute;inset:18% -5% 0;z-index:-1;background:radial-gradient(ellipse at 50% 40%,#24565945,transparent 68%);pointer-events:none}
.connection-heading{display:flex;align-items:center;gap:9px;color:#94b8be;font-size:8px;letter-spacing:.11em;padding:0 30px 14px}
.connection-heading>span:last-child{margin-left:auto;font-size:7px;color:#6f919f}
.connection-map{width:100%;height:auto;display:block;overflow:visible;font-family:var(--body)}
.connection-map text{fill:#d9e8ed;font-size:15px;font-weight:500}
.connection-map .map-overline{font-size:9px;letter-spacing:1.4px;fill:#8aabb5}
.input-nodes rect{fill:url(#channel-surface);stroke:#4c6573;stroke-width:1}
.input-nodes .port{fill:#93bcb7}
.input-wires path,.output-wires path{stroke:#52727e;stroke-width:1.2;fill:none;transition:stroke .4s}
.connection-map .connection-annotation{fill:#7eabae;font-size:8px;letter-spacing:1.3px}
.connection-map .system-platform-title{font-family:var(--display);font-size:17px;fill:#e1edf0}
.connection-map .map-tiny{font-size:8px;fill:#8fafb8;letter-spacing:1px}
.connection-map .ai-core-label{font-weight:600;font-size:12px;fill:#c2f2df}
.connection-map .agent-core-title{font-size:13px;fill:#d2eee5}
.connection-map .agent-core-detail{font-size:9px;fill:#a0c3be}
.data-sources rect{fill:#1b303b;stroke:#465f6a}
.data-sources text{font-size:12px;fill:#b4cbd2}
.output-nodes rect{fill:url(#result-surface);stroke:#577e73;transition:stroke .4s,fill .4s}
.output-nodes text{font-size:13px;fill:#d0e6dd}
.output-nodes .output-check{fill:#9de8c8;font-size:13px}
.output-nodes .output-detail{font-size:9px;fill:#9cbab8}
.connection-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 28px 0}
.connection-footer>div{display:flex;align-items:center;gap:8px;min-width:0}
.connection-footer p{font-size:10px;line-height:1.5;color:#b7d6d3}
.connection-footer .signal{width:4px;height:4px}
.connection-footer button{background:transparent;border:0;color:#c2e4e1;font-size:10px;padding:8px 0;display:flex;gap:12px;white-space:nowrap}
.connection-footer button:disabled{opacity:.5;cursor:default}
.connection-disclaimer{font-size:8px;color:#839da9;padding:12px 28px 0;line-height:1.6}
.data-packets{fill:#a0f2dc}.packet{opacity:0}
.connection-scene[data-phase="input"] .input-wires path{stroke:#9ef0dd;stroke-width:1.8}
.connection-scene[data-phase="input"] .input-nodes rect{stroke:#9acbc0}
.connection-scene[data-phase="input"] .packet{opacity:1;animation:packet-in 1.25s ease-in-out both}
.packet-one{offset-path:path('M110 107 V134 Q110 148 125 148 H290 Q310 148 310 168 V193')}
.packet-two{offset-path:path('M310 107 V193');animation-delay:.12s!important}
.packet-three{offset-path:path('M510 107 V134 Q510 148 495 148 H330 Q310 148 310 168 V193');animation-delay:.24s!important}
.connection-scene[data-phase="ai"] .agent-core>rect:first-child{stroke:#b0f4d5;stroke-width:1.8}
.connection-scene[data-phase="ai"] .data-sources rect{stroke:#8dbbad}
.connection-scene[data-phase="output"] .output-wires path{stroke:#a3ddc7;stroke-width:1.8;stroke-dasharray:8 4;animation:output-flow 1.5s linear both}
.connection-scene[data-phase="output"] .output-nodes rect{stroke:#aae3ca;stroke-width:1.5}
@keyframes packet-in{0%{offset-distance:0;opacity:0}15%{opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes output-flow{from{stroke-dashoffset:48}to{stroke-dashoffset:0}}
@media(max-width:1200px){.connection-scene{margin-left:-10px;margin-right:-15px;min-height:0}.connection-heading{padding-inline:25px;font-size:7px}.connection-footer{padding-inline:22px;gap:10px}.connection-footer p{font-size:9px}.connection-footer button{font-size:9px}.connection-disclaimer{padding-inline:22px}}
@media(max-width:950px) and (min-width:701px){.connection-heading{font-size:6px;padding-inline:18px;gap:6px}.connection-footer{flex-direction:column;align-items:start;gap:2px;padding-inline:18px}.connection-disclaimer{font-size:7px;padding-inline:18px;padding-top:6px}}
@media(max-width:700px){.connection-scene{margin:25px 0 5px;width:100%;height:auto;min-height:0;padding-top:10px}.connection-heading{font-size:7px;padding:0 0 10px;gap:8px}.connection-heading>span:last-child{font-size:6px}.connection-map{width:calc(100% + 24px);margin-left:-12px}.connection-footer{padding:12px 0 0;flex-direction:row;align-items:center;gap:10px}.connection-footer p{font-size:9px}.connection-footer button{font-size:9px;gap:7px}.connection-disclaimer{padding:8px 0 0;font-size:7px}.connection-aura{inset:10% -10% 0}}
@media(prefers-reduced-motion:reduce){.data-packets{display:none}.connection-map *{animation:none!important;transition:none!important}}

/* Profundidad y movimiento: una escena de producto en capas, con texto estable. */
.connection-scene{perspective:1100px}
.network-depth{position:relative;transform-style:preserve-3d;transform-origin:50% 52%;animation:network-drift 11s ease-in-out infinite;will-change:transform}
.connection-map{transform:rotateX(var(--pointer-x,0deg)) rotateY(var(--pointer-y,0deg));transition:transform .65s ease-out;filter:drop-shadow(0 20px 26px #0004)}
.connection-aura{inset:12% -6% 1%;background:radial-gradient(ellipse at 48% 50%,#307c794a,transparent 68%);animation:network-atmosphere 9s ease-in-out infinite}
.input-nodes>g,.output-nodes>g{filter:drop-shadow(0 8px 0 #0a1721) drop-shadow(0 14px 9px #0006)}
.input-nodes rect{stroke:#658898;stroke-width:1.2}
.output-nodes rect{stroke:#6c9c8b;stroke-width:1.2}
.system-platform{filter:drop-shadow(0 13px 17px #0008)}
.agent-core{filter:drop-shadow(0 5px 5px #0005)}
.data-sources{filter:drop-shadow(0 3px 0 #0a1c26)}
.input-wires path,.output-wires path{stroke-width:1.6;stroke:#658b9a;filter:drop-shadow(0 3px 1px #0008)}
.connection-map .packet,.connection-map .out-packet{fill:#b8ffdf;filter:drop-shadow(0 0 4px #8af3cf);opacity:0;animation:packet-travel 4.8s ease-in-out infinite}
.connection-map .packet-two{animation-delay:.3s!important}
.connection-map .packet-three{animation-delay:.6s!important}
.out-one{offset-path:path('M310 407 V407 Q310 423 292 423 H127 Q110 423 110 440 V452');animation-delay:2.4s!important}
.out-two{offset-path:path('M310 407 V452');animation-delay:2.7s!important}
.out-three{offset-path:path('M310 407 V407 Q310 423 328 423 H493 Q510 423 510 440 V452');animation-delay:3s!important}
.platform-highlight{animation:surface-reflection 8s ease-in-out infinite}
.platform-ground{filter:blur(9px)}
.connection-scene[data-phase="input"] .packet{animation-name:packet-travel;animation-duration:4.8s;animation-iteration-count:infinite}
.connection-scene[data-phase="ai"] .agent-core>rect:first-child{stroke:#d1ffe8;stroke-width:2}
.scene-offscreen .network-depth,.scene-offscreen .connection-aura,.scene-offscreen .connection-map *{animation-play-state:paused!important}
@keyframes network-drift{0%,100%{transform:translate3d(0,3px,0) rotateX(7deg) rotateY(-10deg) rotateZ(-1deg)}50%{transform:translate3d(0,-8px,10px) rotateX(3deg) rotateY(-5deg) rotateZ(.7deg)}}
@keyframes packet-travel{0%{offset-distance:0;opacity:0}8%{opacity:1}38%{offset-distance:100%;opacity:1}43%,100%{offset-distance:100%;opacity:0}}
@keyframes surface-reflection{0%,100%{opacity:.025}50%{opacity:.075}}
@keyframes network-atmosphere{0%,100%{opacity:.65}50%{opacity:1}}
@media(max-width:700px){.network-depth{animation-name:network-drift-mobile}.connection-map{transform:none}.connection-aura{inset:10% -6% 0}.connection-map .agent-core-title{font-size:14px}.connection-map .data-sources text{font-size:14px}}
@keyframes network-drift-mobile{0%,100%{transform:translateY(2px) rotateX(3deg) rotateY(-4deg)}50%{transform:translateY(-4px) rotateX(1deg) rotateY(2deg)}}
@media(prefers-reduced-motion:reduce){.network-depth,.connection-aura,.connection-map *{animation:none!important;will-change:auto}.connection-map{transform:none!important;transition:none}.data-packets,.outgoing-packets{display:none}.network-depth{transform:none}}