/* Escenas animadas decorativas (se activan en Admin > Configuracion > Efectos). */
.fxs { position: fixed; bottom: 0; z-index: 330; display: flex; flex-direction: column; align-items: center; pointer-events: none; opacity: 0; transform: translateY(40px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.9,.3,1.1); }
.fxs[hidden] { display: none; }
.fxs.is-in { opacity: 1; transform: none; }
.fxs.is-out { opacity: 0; transform: translateY(40px); }
.fxs-side-left { left: 12px; transform-origin: bottom left; }
.fxs-side-right { right: 90px; transform-origin: bottom right; }
.fxs-art svg { display: block; overflow: visible; filter: drop-shadow(0 8px 10px rgba(11,18,32,.25)); }
.fxs-bubble { max-width: 230px; margin: 0 0 8px; padding: 8px 14px; border-radius: 12px; background: #fff; color: #1a2438; border: 1.5px solid var(--fx-cyan, #22d3ee); box-shadow: 0 8px 24px rgba(11,18,32,.28); font: 700 .85rem/1.25 var(--bc-display, sans-serif); text-align: center; position: relative; }
.fxs-bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: #fff; border-right: 1.5px solid var(--fx-cyan, #22d3ee); border-bottom: 1.5px solid var(--fx-cyan, #22d3ee); transform: translateX(-50%) rotate(45deg); }

/* Figura del tecnico: pasos */
.fxm-leg, .fxm-arm-f, .fxm-arm-b { transform-box: fill-box; transform-origin: 50% 0; }
.fxm-leg-a { animation: fxm-step .5s ease-in-out infinite alternate; }
.fxm-leg-b { animation: fxm-step .5s ease-in-out infinite alternate-reverse; }
@keyframes fxm-step { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }

/* ---- Escalera ---- */
.fxs-climber { animation: fxs-climb 8s ease-in-out infinite alternate; }
.fxs-ladder .fxm-leg-a { animation: fxm-climb .8s ease-in-out infinite alternate; }
.fxs-ladder .fxm-leg-b { animation: fxm-climb .8s ease-in-out infinite alternate-reverse; }
.fxs-ladder .fxm-arm-f { animation: fxm-climb .8s ease-in-out infinite alternate-reverse; }
.fxs-ladder .fxm-arm-b { animation: fxm-climb .8s ease-in-out infinite alternate; }
@keyframes fxs-climb { from { transform: translateY(0); } to { transform: translateY(-95px); } }
@keyframes fxm-climb { from { transform: translateY(-4px) rotate(-6deg); } to { transform: translateY(4px) rotate(6deg); } }

/* ---- Camara PTZ ---- */
.fxs-ptz { bottom: auto; top: 150px; right: 0; left: auto; transform: translateX(60px); align-items: flex-end; }
.fxs-ptz.fxs-side-left { left: 0; right: auto; transform: translateX(-60px); align-items: flex-start; }
.fxs-ptz.is-in, .fxs-ptz.fxs-side-left.is-in { transform: none; }
.fxs-ptz.fxs-side-left .fxs-art { transform: scaleX(-1); }
.fxs-ptz .fxs-bubble { order: 2; margin: 6px 14px 0; }
.fxs-ptz .fxs-bubble::after { bottom: auto; top: -7px; transform: translateX(-50%) rotate(225deg); }
.fxs-ptz-head { transform-origin: 136px 40px; animation: fxs-pan 5s ease-in-out infinite alternate; }
.fxs-led { animation: fxs-blink 1s steps(2) infinite; }
@keyframes fxs-pan { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes fxs-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }

/* ---- Ventilador ---- */
.fxs-fan .fxm-leg, .fxs-tv .fxm-leg, .fxs-rack .fxm-leg { animation: none; }
.fxs-cord { animation: fxs-draw 2.4s ease-in-out .6s forwards; }
.fxs-spark { animation: fxs-zap .7s ease-out 3s both; }
.fxs-blades { transform-box: view-box; animation: fxs-spin .35s linear 3.4s infinite; }
.fxs-breeze { animation: fxs-breeze 1.2s ease-in-out 3.6s infinite; }
@keyframes fxs-draw { to { stroke-dashoffset: 0; } }
@keyframes fxs-zap { 0% { opacity: 0; transform: scale(.3); } 40% { opacity: .95; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes fxs-spin { to { transform: rotate(360deg); } }
@keyframes fxs-breeze { 0%, 100% { opacity: 0; transform: translateX(8px); } 50% { opacity: .8; transform: translateX(-8px); } }
.fxs-spark { transform-box: fill-box; transform-origin: center; }

/* ---- Television ---- */


.fxs-tv-man { animation: none; }
.fxs-tvset { animation: fxs-tv-up 4s cubic-bezier(.3,.6,.3,1) forwards; }
.fxs-tv-screen { animation: fxs-fade-in .8s ease 4s forwards; }
.fxs-tv-logo { animation: fxs-fade-in .6s ease 4.5s forwards; }
.fxs-tv .fxm-arm-f { animation: fxs-hold 4s ease-in-out forwards; transform-origin: 0 0; }
@keyframes fxs-tv-up { from { transform: translate(-62px, 92px) rotate(-7deg); } to { transform: none; } }
@keyframes fxs-fade-in { to { opacity: 1; } }
@keyframes fxs-hold { from { transform: translateY(0); } to { transform: translateY(0); } }

/* ---- Gabinete ---- */
.fxs-unit { animation: fxs-slide .7s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--i) * .7s + .3s); }
.fxs-rled { animation: fxs-led 1.2s steps(2) infinite; animation-delay: calc(var(--k) * .17s + 5s); }
.fxs-rack .fxm-arm-f { transform-origin: 0 0; animation: fxs-push 1s ease-in-out infinite alternate; }
.fxs-cables path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: fxs-draw 1s ease 4.8s forwards; }
.fxs-cables path:nth-child(2) { animation-delay: 5.3s; } .fxs-cables path:nth-child(3) { animation-delay: 5.8s; }
@keyframes fxs-slide { from { transform: translateX(-200px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fxs-led { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .2; } }
@keyframes fxs-push { from { transform: translateX(-3px); } to { transform: translateX(8px); } }

@media (max-width: 720px) {
  .fxs { scale: .66; }
  .fxs-side-right { right: 70px; }
  .fxs-bubble { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .fxs { display: none !important; } }

/* Efectos con enlace */
.fxs.has-link .fxs-bubble, .fxs.has-link .fxs-art, .wb-link { pointer-events: auto; cursor: pointer; text-decoration: none; }
.fxs-bubble { display: block; }
a.fxs-bubble:hover, a.wb-bubble:hover { box-shadow: 0 10px 28px rgba(34,211,238,.45); }
.fxs-cta { display: block; margin-top: 6px; padding: 4px 10px; border-radius: 999px; background: var(--fx-grad, linear-gradient(135deg, #317db7, #22d3ee)); color: #fff; font: 700 .72rem/1.3 var(--bc-display, sans-serif); letter-spacing: .02em; }
.wb-link { display: block; color: inherit; }