/* Motor de embudos — animaciones reutilizables (clases utilitarias). Todas respetan prefers-reduced-motion.
   .anim-aparecer  entra suave al hacer scroll (motor.js agrega .visible con IntersectionObserver)
   .anim-flotar    flota suave (imágenes, mockups)
   .anim-pulso     anillo que late (botones principales)
   .anim-brillo    destello que cruza el botón
   .fondo-vivo     manchas de color que se mueven detrás del contenido
   .notis          notificaciones flotantes (like, comentario, seguidor, mensaje) de fondo
   [data-contar]   número que cuenta hacia arriba al aparecer
*/
.anim-aparecer{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.anim-aparecer.visible{opacity:1;transform:none}
.anim-flotar{animation:mt-flotar 5s ease-in-out infinite}
@keyframes mt-flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.anim-pulso{position:relative;animation:mt-pulso 2.2s infinite}
@keyframes mt-pulso{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pulso,var(--wa,#25D366)) 55%,transparent)}70%{box-shadow:0 0 0 16px transparent}100%{box-shadow:0 0 0 0 transparent}}
.anim-brillo{position:relative;overflow:hidden;isolation:isolate}
.anim-brillo::after{content:"";position:absolute;inset:-2px auto -2px -60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:mt-brillo 3.2s ease-in-out infinite;z-index:1;pointer-events:none}
@keyframes mt-brillo{0%,55%{left:-60%}100%{left:130%}}

.fondo-vivo{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.fondo-vivo i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;animation:mt-mancha 18s ease-in-out infinite alternate}
.fondo-vivo i:nth-child(1){width:340px;height:340px;background:var(--acc,#7C3AED);top:-120px;left:-120px}
.fondo-vivo i:nth-child(2){width:280px;height:280px;background:var(--gold,#F5C542);bottom:-100px;right:-80px;animation-duration:22s;opacity:.22}
.fondo-vivo i:nth-child(3){width:220px;height:220px;background:var(--wa,#25D366);top:45%;left:70%;animation-duration:26s;opacity:.14}
@keyframes mt-mancha{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.12)}100%{transform:translate(-30px,50px) scale(.95)}}

.notis{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.notis span{position:absolute;display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:99px;padding:6px 12px;font:600 12px/1 var(--sans,system-ui);color:#333;box-shadow:0 8px 24px rgba(20,10,50,.12);opacity:0;animation:mt-noti 9s ease-in-out infinite;white-space:nowrap}
.notis span b{color:var(--acc,#7C3AED)}
@keyframes mt-noti{0%{opacity:0;transform:translateY(20px) scale(.96)}10%,55%{opacity:.95;transform:translateY(0) scale(1)}70%,100%{opacity:0;transform:translateY(-24px) scale(.98)}}
@media(max-width:900px){.notis{display:none}}

.onda{position:relative}
.onda::before,.onda::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid currentColor;opacity:0;animation:mt-onda 2.4s ease-out infinite}
.onda::after{animation-delay:1.2s}
@keyframes mt-onda{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.9);opacity:0}}

.aro-avatar{position:relative;display:inline-block;border-radius:50%}
.aro-avatar::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px dashed var(--acc,#7C3AED);animation:mt-girar 12s linear infinite}
@keyframes mt-girar{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .anim-aparecer{opacity:1;transform:none;transition:none}
  .anim-flotar,.anim-pulso,.anim-brillo::after,.fondo-vivo i,.notis span,.onda::before,.onda::after,.aro-avatar::after{animation:none}
  .notis span{opacity:.9}
}