/* Ser — personaje. Cabeza (ojo) + cuerpo SVG articulado. */
.ser{position:relative;display:flex;flex-direction:column;align-items:center;width:var(--w,300px)}
.ser-bob{width:100%;animation:ser-bob 5.6s ease-in-out infinite;transform-origin:50% 92%}
@keyframes ser-bob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(-.7deg)}}
.ser-head{width:100%}
.ser-body{display:block;width:calc(var(--w,300px) * .46);height:auto;margin:-3px auto 0;overflow:visible}
.ser-shadow{width:calc(var(--w,300px) * .3);height:9px;border-radius:50%;background:rgba(29,29,27,.16);margin-top:1px;animation:ser-sh 5.6s ease-in-out infinite}
@keyframes ser-sh{0%,100%{transform:scaleX(1);opacity:.55}50%{transform:scaleX(.84);opacity:.3}}

/* brazos: rotan sobre su propio hombro / codo */
.ser-arm,.ser-fore{transform-origin:0 0;transition:transform .75s var(--eo,cubic-bezier(.16,1,.3,1))}
.ser-arm.l{transform:rotate(11deg)}
.ser-arm.r{transform:rotate(-11deg)}
.ser-fore.l{transform:rotate(7deg)}
.ser-fore.r{transform:rotate(-7deg)}

/* saludo: el brazo sube y el codo oscila */
.ser.wv .ser-arm.l{animation:ser-up 6s var(--e,cubic-bezier(.19,1,.22,1)) infinite}
.ser.wv .ser-fore.l{animation:ser-wave 6s ease-in-out infinite}
@keyframes ser-up{0%,52%,100%{transform:rotate(11deg)}60%,88%{transform:rotate(158deg)}96%{transform:rotate(11deg)}}
@keyframes ser-wave{0%,56%,100%{transform:rotate(7deg)}64%{transform:rotate(-26deg)}70%{transform:rotate(20deg)}76%{transform:rotate(-26deg)}82%{transform:rotate(18deg)}90%{transform:rotate(7deg)}}

/* al pasar el ratón levanta el otro brazo */
.ser.hi .ser-arm.r{transform:rotate(-152deg)}
.ser.hi .ser-fore.r{transform:rotate(24deg)}
.ser.hi .ser-bob{animation-duration:2.6s}

@media(prefers-reduced-motion:reduce){
.ser-bob,.ser-shadow,.ser.wv .ser-arm.l,.ser.wv .ser-fore.l{animation:none}
}