/* Método 7 · Movimiento. Niveles: ?motion=1 suave · 2 medio (por defecto) · 3 alto · off.
   Usa las propiedades independientes translate/scale/rotate para no chocar con los transform de cada página. */

/* ---------- revelado al hacer scroll (nivel 1+) ---------- */
html.mo-on .rv{opacity:0;translate:0 28px;transition:opacity .85s cubic-bezier(.2,.7,.2,1) var(--d,0s),translate .85s cubic-bezier(.2,.7,.2,1) var(--d,0s),scale .85s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
html.mo-on .rv.in{opacity:1;translate:0 0;scale:1}
html.mo-on .rv-l{translate:-44px 0}
html.mo-on .rv-r{translate:44px 0}
html.mo-on .rv-pop{translate:0 14px;scale:.78}
html.mo-on .rv-pop.in{transition-timing-function:cubic-bezier(.3,1.5,.5,1)}

/* ---------- barra de progreso (nivel 2+) ---------- */
.mo-prog{position:fixed;left:0;top:0;height:4px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#EE6FA0,#8B5CC8,#6B3FC4);pointer-events:none;display:none}
html.mo-2 .mo-prog,html.mo-3 .mo-prog{display:block}

/* ---------- movimiento continuo (nivel 2+) ---------- */
@keyframes mo-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes mo-float2{0%,100%{translate:0 0}50%{translate:6px -7px}}
@keyframes mo-sway{0%,100%{rotate:-3.5deg}50%{rotate:3.5deg}}
@keyframes mo-shine{0%,62%{translate:-130% 0}100%{translate:130% 0}}
@keyframes mo-breathe{0%,100%{box-shadow:0 12px 24px -12px rgba(110,70,200,.7),0 0 0 0 rgba(139,92,200,.38)}50%{box-shadow:0 14px 28px -12px rgba(110,70,200,.8),0 0 0 14px rgba(139,92,200,0)}}
@keyframes mo-spin{to{rotate:360deg}}
@keyframes mo-pulse{0%,100%{scale:1}50%{scale:1.05}}
@keyframes mo-dash{to{stroke-dashoffset:-24}}
@keyframes mo-blob{0%,100%{translate:0 0;scale:1}33%{translate:50px -36px;scale:1.12}66%{translate:-40px 26px;scale:.94}}

html.mo-2 .btn,html.mo-3 .btn{position:relative;overflow:hidden}
html.mo-2 .btn::before,html.mo-3 .btn::before{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.4) 50%,transparent 80%);translate:-130% 0;animation:mo-shine 4.8s ease-in-out infinite;pointer-events:none}
html.mo-2 .btn.go-pago,html.mo-3 .btn.go-pago,html.mo-2 .garantia2 .btn,html.mo-3 .garantia2 .btn,html.mo-2 .cierre .btn,html.mo-3 .cierre .btn,html.mo-2 .fin .btn,html.mo-3 .fin .btn,html.mo-2 .of .btn,html.mo-3 .of .btn{animation:mo-breathe 2.8s ease-in-out infinite}

html.mo-2 .stp .ico,html.mo-3 .stp .ico,html.mo-2 .bn-art svg,html.mo-3 .bn-art svg,html.mo-2 .mo svg,html.mo-3 .mo svg,html.mo-2 .exp2-datos i,html.mo-3 .exp2-datos i,html.mo-2 .pv-row>i,html.mo-3 .pv-row>i,html.mo-2 .momlist>li::before,html.mo-3 .momlist>li::before{animation:mo-float 5.6s ease-in-out infinite}
html.mo-2 .stp:nth-child(2n) .ico,html.mo-3 .stp:nth-child(2n) .ico,html.mo-2 .mo:nth-child(2n) svg,html.mo-3 .mo:nth-child(2n) svg,html.mo-2 .exp2-datos>div:nth-child(2) i,html.mo-3 .exp2-datos>div:nth-child(2) i{animation-name:mo-float2;animation-delay:-2s}
html.mo-2 .stp:nth-child(3n) .ico,html.mo-3 .stp:nth-child(3n) .ico{animation-delay:-3.4s}
html.mo-2 .bn:nth-child(2) .bn-art svg,html.mo-3 .bn:nth-child(2) .bn-art svg{animation-delay:-1.8s}
html.mo-2 .bn:nth-child(3) .bn-art svg,html.mo-3 .bn:nth-child(3) .bn-art svg{animation-delay:-3.6s}
html.mo-2 .exp2-foto .sp,html.mo-3 .exp2-foto .sp,html.mo-2 .vid .sp,html.mo-3 .vid .sp,html.mo-2 .gph .sp,html.mo-3 .gph .sp,html.mo-2 .ilu .sp,html.mo-3 .ilu .sp,html.mo-2 .todas .sp,html.mo-3 .todas .sp,html.mo-2 .cir .sp.s,html.mo-3 .cir .sp.s{transform-origin:50% 100%;animation:mo-sway 7s ease-in-out infinite}
html.mo-2 .exp2-foto .s2,html.mo-3 .exp2-foto .s2{animation-delay:-3s}
html.mo-2 .badge15,html.mo-3 .badge15,html.mo-2 .b15,html.mo-3 .b15{animation:mo-float2 6s ease-in-out infinite}
html.mo-2 .vid .note,html.mo-3 .vid .note,html.mo-2 .gph .note,html.mo-3 .gph .note,html.mo-2 .todas .sc,html.mo-3 .todas .sc{animation:mo-float 6.5s ease-in-out infinite}
html.mo-2 .ilu .cl,html.mo-3 .ilu .cl{animation:mo-float 6s ease-in-out infinite}
html.mo-2 .ilu .c2,html.mo-3 .ilu .c2{animation-delay:-1.2s}html.mo-2 .ilu .c3,html.mo-3 .ilu .c3{animation-delay:-2.4s}html.mo-2 .ilu .c4,html.mo-3 .ilu .c4{animation-delay:-3.6s}html.mo-2 .ilu .c5,html.mo-3 .ilu .c5{animation-delay:-4.8s}
html.mo-2 .giro2 .nube:nth-child(odd),html.mo-3 .giro2 .nube:nth-child(odd){animation:mo-float 6.4s ease-in-out infinite}
html.mo-2 .giro2 .nube:nth-child(even),html.mo-3 .giro2 .nube:nth-child(even){animation:mo-float2 7s ease-in-out infinite}
html.mo-2 .vs-b .art circle:last-of-type,html.mo-3 .vs-b .art circle:last-of-type{animation:mo-pulse 2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
html.mo-2 .mesh,html.mo-3 .mesh{translate:0 calc(var(--sy,0) * -.08px)}

/* ---------- nivel 3 ---------- */
html.mo-3 .rv{scale:.94}
html.mo-3 body::before,html.mo-3 body::after{content:"";position:fixed;z-index:-1;width:46vmax;height:46vmax;border-radius:50%;filter:blur(70px);opacity:.34;pointer-events:none;animation:mo-blob 22s ease-in-out infinite}
html.mo-3 body::before{left:-14vmax;top:8vh;background:radial-gradient(circle,#F6B3D0,transparent 65%)}
html.mo-3 body::after{right:-16vmax;bottom:-6vh;background:radial-gradient(circle,#B99BF0,transparent 65%);animation-delay:-9s}
html.mo-3 .stp,html.mo-3 .bn,html.mo-3 .fact>div,html.mo-3 .tr div,html.mo-3 .exp2-datos>div{transition:transform .25s ease,box-shadow .25s ease;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
html.mo-3 .stp:hover,html.mo-3 .bn:hover,html.mo-3 .fact>div:hover,html.mo-3 .tr div:hover,html.mo-3 .exp2-datos>div:hover{box-shadow:0 26px 44px -26px rgba(70,35,150,.55)}
.mo-w{display:inline-block;opacity:0;translate:0 .55em;transition:opacity .6s ease var(--d,0s),translate .7s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.in .mo-w{opacity:1;translate:0 0}
html.mo-3 .fin,html.mo-3 .cierre{background-size:200% 200%;animation:mo-grad 12s ease-in-out infinite}
@keyframes mo-grad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

@media(prefers-reduced-motion:reduce){html.mo-on .rv{opacity:1;translate:0 0;scale:1;transition:none}.mo-w{opacity:1;translate:0 0}}