/* Muñecos v3 (web/js/muneco.js): reposo, andar, saludar y gestos. */
.mu { position: absolute; left: 0; top: 0; width: 160px; height: 260px; will-change: transform; }
.mu svg { overflow: visible; display: block; }
.mu .todo { transform-box: fill-box; transform-origin: 50% 100%; animation: mu-flotar 3.6s ease-in-out infinite; }
@keyframes mu-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.mu .tronco { transform-box: fill-box; transform-origin: 50% 100%; animation: mu-respira 3.2s ease-in-out infinite; }
@keyframes mu-respira { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 0.988); } }
.mu .cabeza-g { transform-box: fill-box; transform-origin: 50% 92%; transition: transform 420ms var(--ease-out, cubic-bezier(.23,1,.32,1)); animation: mu-cabeza 5.2s ease-in-out infinite; }
@keyframes mu-cabeza { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(1.6deg); } 70% { transform: rotate(-1.2deg); } }
.mu .pecho { transform-box: fill-box; transform-origin: center; animation: mu-pecho 2.8s ease-in-out infinite; }
@keyframes mu-pecho { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.1); opacity: 1; } }
.mu .chispas circle { animation: mu-chispa 3s ease-in-out infinite; }
.mu .chispas circle:nth-child(2) { animation-delay: .8s; } .mu .chispas circle:nth-child(3) { animation-delay: 1.6s; } .mu .chispas circle:nth-child(4) { animation-delay: 2.2s; }
@keyframes mu-chispa { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.mu .brazo, .mu .pierna { transform-box: fill-box; }
.mu .brazo { transform-origin: 50% 6%; transition: transform 460ms var(--ease-out, cubic-bezier(.23,1,.32,1)); }
.mu .brazo.izq { transform-origin: 92% 6%; } .mu .brazo.der { transform-origin: 8% 6%; }
.mu .pierna { transform-origin: 50% 4%; }
.mu .prop .vapor { animation: mu-vapor 2s ease-in-out infinite; }
@keyframes mu-vapor { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-10px); } }

/* andar / correr */
.mu.camina .todo { animation: mu-andar 460ms ease-in-out infinite; }
.mu.camina .pierna.izq { animation: mu-paso 460ms ease-in-out infinite; }
.mu.camina .pierna.der { animation: mu-paso 460ms ease-in-out -230ms infinite; }
.mu.camina .brazo.izq:not(.flacido) { animation: mu-balanceo 460ms ease-in-out -230ms infinite; }
.mu.camina .brazo.der:not(.flacido) { animation: mu-balanceo 460ms ease-in-out infinite; }
@keyframes mu-paso { 0% { transform: rotate(24deg); } 50% { transform: rotate(-24deg); } 100% { transform: rotate(24deg); } }
@keyframes mu-balanceo { 0% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } 100% { transform: rotate(-12deg); } }
@keyframes mu-andar { 0%, 100% { transform: translateY(0) rotate(1deg); } 50% { transform: translateY(-5px) rotate(-1deg); } }
.mu.sin-brazos.camina .todo, .mu.gota-brazos.camina .todo { animation: mu-botar 420ms ease-in-out infinite; }
@keyframes mu-botar { 0%, 100% { transform: translateY(0) scale(1.02, .98); } 50% { transform: translateY(-9px) scale(.98, 1.03); } }
.mu.corre .todo { animation: mu-andar 270ms ease-in-out infinite; }
.mu.corre .pierna.izq { animation: mu-paso-largo 270ms ease-in-out infinite; }
.mu.corre .pierna.der { animation: mu-paso-largo 270ms ease-in-out -135ms infinite; }
@keyframes mu-paso-largo { 0% { transform: rotate(38deg); } 50% { transform: rotate(-38deg); } 100% { transform: rotate(38deg); } }
.mu.corre .brazo.izq:not(.flacido) { animation: mu-balanceo 270ms ease-in-out -135ms infinite; }
.mu.corre .brazo.der:not(.flacido) { animation: mu-balanceo 270ms ease-in-out infinite; }

/* gestos */
.mu.saluda .brazo.der:not(.flacido) { animation: mu-saludo 1200ms ease-in-out 2; }
@keyframes mu-saludo { 0% { transform: rotate(0); } 25% { transform: rotate(-150deg); } 45% { transform: rotate(-120deg); } 65% { transform: rotate(-150deg); } 85% { transform: rotate(-125deg); } 100% { transform: rotate(0); } }
.mu.asiente .cabeza-g { animation: mu-asentir 700ms ease-in-out 2; }
@keyframes mu-asentir { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px) rotate(2deg); } }
.mu.piensa .cabeza-g { transform: rotate(-8deg) translateX(-2px); animation: none; }
.mu.piensa .brazo.der:not(.flacido) { transform: rotate(-118deg); }
.mu.duda .cabeza-g { transform: rotate(7deg); animation: none; }
.mu.duda .brazo.izq:not(.flacido) { transform: rotate(40deg); } .mu.duda .brazo.der:not(.flacido) { transform: rotate(-40deg); }
.mu.celebra .brazo.izq:not(.flacido) { transform: rotate(150deg); } .mu.celebra .brazo.der:not(.flacido) { transform: rotate(-150deg); }
.mu.celebra .todo { animation: mu-salto 620ms ease-in-out infinite; }
@keyframes mu-salto { 0%, 100% { transform: translateY(0) scale(1.03, .97); } 50% { transform: translateY(-16px) scale(.98, 1.03); } }
.mu.bosteza .cabeza-g { transform: rotate(-7deg) translateY(3px); }
@media (prefers-reduced-motion: reduce) { .mu *, .mu { animation: none !important; } }

/* gota sin brazos: los gestos van con el cuerpo y la cabeza */
.mu.sin-brazos.saluda .todo { animation: mu-vaiven 700ms ease-in-out 2; }
@keyframes mu-vaiven { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
.mu.sin-brazos.saluda .cabeza-g { animation: mu-cabeza-saludo 700ms ease-in-out 2; }
@keyframes mu-cabeza-saludo { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(9deg); } 75% { transform: rotate(-9deg); } }
.mu.sin-brazos.piensa .todo { transform: rotate(-4deg); }
.mu.sin-brazos.duda .todo { animation: mu-vaiven 900ms ease-in-out infinite; }
.mu.sin-brazos.celebra .todo { animation: mu-salto 620ms ease-in-out infinite; }
.mu.sin-brazos.celebra .cabeza-g { animation: mu-cabeza-saludo 620ms ease-in-out infinite; }
.mu .mano-prop.suelto { transform-box: fill-box; transform-origin: 50% 100%; animation: mu-flotar 3s ease-in-out -1s infinite; }

/* brazos flácidos (gota): cambian de forma (propiedad d), no giran; al levantarse el arco se invierte */
.mu .brazo.flacido path { transition: d 520ms var(--ease-out, cubic-bezier(.23,1,.32,1)); }
.mu .brazo.flacido { transform-box: fill-box; transform-origin: 50% 0%; animation: mu-colgar 3.4s ease-in-out infinite; }
.mu .brazo.der.flacido { animation-delay: -1.7s; }
@keyframes mu-colgar { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(2.5deg); } }
.mu.capsula.saluda .brazo.der.flacido, .mu.capsula.celebra .brazo.flacido, .mu.capsula.piensa .brazo.der.flacido, .mu.capsula.duda .brazo.flacido { animation: none; }
/* derecho: colgando → levantado (dos posturas para el vaivén) */
.mu.capsula.saluda .brazo.der.flacido path { animation: mu-saludo-d 1100ms ease-in-out 2; }
@keyframes mu-saludo-d {
  0%, 100% { d: path("M114,116 C138,136 156,176 146,210 C142,224 126,224 122,210 C118,192 112,160 96,136"); }
  30%, 70% { d: path("M114,116 C134,112 152,86 150,52 C149,36 134,34 132,50 C130,72 122,98 100,130"); }
  50% { d: path("M114,116 C136,114 160,96 164,62 C166,46 152,42 148,58 C144,78 128,100 102,130"); }
}
.mu.capsula.celebra .brazo.der.flacido path { animation: mu-celebra-der 620ms ease-in-out infinite; }
.mu.capsula.celebra .brazo.izq.flacido path { animation: mu-celebra-izq 620ms ease-in-out infinite; }
@keyframes mu-celebra-der { 0%, 100% { d: path("M114,116 C134,112 152,86 150,52 C149,36 134,34 132,50 C130,72 122,98 100,130"); } 50% { d: path("M114,116 C136,114 160,96 164,62 C166,46 152,42 148,58 C144,78 128,100 102,130"); } }
@keyframes mu-celebra-izq { 0%, 100% { d: path("M46,116 C26,112 8,86 10,52 C11,36 26,34 28,50 C30,72 38,98 60,130"); } 50% { d: path("M46,116 C24,114 0,96 -4,62 C-6,46 8,42 12,58 C16,78 32,100 58,130"); } }
.mu.capsula.celebra .todo { animation: mu-salto 620ms ease-in-out infinite; }
.mu.capsula.saluda .todo { animation: mu-vaiven 700ms ease-in-out 2; }
/* piensa: mano a la sien y nube */
/* piensa: el brazo se arquea hacia arriba y pasa por detrás de la cabeza (la punta asoma por el otro lado, sobre la nuca) */
.mu.capsula.piensa .brazo.der.flacido path { d: path("M114,116 C138,112 146,80 138,56 C132,36 112,22 88,24 C78,25 70,32 66,40 C72,38 80,36 90,38 C112,40 122,56 122,70 C122,90 112,104 100,124"); }
.mu.capsula.piensa .cabeza-g { transform: rotate(-5deg); animation: none; }
.mu .nube { opacity: 0; transform: translateY(6px) scale(.9); transform-box: fill-box; transform-origin: 20% 100%; transition: opacity 360ms ease, transform 520ms var(--ease-out, cubic-bezier(.23,1,.32,1)); }
.mu.capsula.piensa .nube { opacity: 1; transform: none; }
.mu.capsula.piensa .nube > g:first-of-type { animation: mu-nube 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes mu-nube { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.mu.capsula.piensa .nube circle:nth-child(1) { animation: mu-burbuja 2.6s ease-in-out infinite; } .mu.capsula.piensa .nube circle:nth-child(2) { animation: mu-burbuja 2.6s ease-in-out -.6s infinite; }
@keyframes mu-burbuja { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
/* duda: los dos brazos abiertos a media altura */
.mu.capsula.duda .brazo.der.flacido path { d: path("M114,116 C138,118 160,132 164,156 C166,170 152,172 146,160 C140,148 128,136 100,134"); }
.mu.capsula.duda .brazo.izq.flacido path { d: path("M46,116 C22,118 0,132 -4,156 C-6,170 8,172 14,160 C20,148 32,136 60,134"); }
.mu.capsula.duda .todo { animation: mu-vaiven 900ms ease-in-out infinite; }
.mu.capsula.camina .todo { animation: mu-botar 420ms ease-in-out infinite; }
.mu.capsula.camina .brazo.flacido { animation: mu-colgar 420ms ease-in-out infinite; }

/* duda: globo con interrogación junto a la cabeza */
.mu .interrogacion { opacity: 0; transform: translateY(8px) scale(.8); transform-box: fill-box; transform-origin: 30% 100%; transition: opacity 300ms ease, transform 520ms var(--ease-out, cubic-bezier(.23,1,.32,1)); }
.mu.capsula.duda .interrogacion { opacity: 1; transform: none; animation: mu-interrog 1.6s ease-in-out infinite; }
@keyframes mu-interrog { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-2px); } }

/* habla: gesticula explicando DELANTE del cuerpo (copias delanteras de los brazos); los traseros se esconden */
.mu .brazo.frente { opacity: 0; animation: none; transition: opacity 220ms ease; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(43, 36, 64, .22)); }
.mu.capsula.habla .brazo.frente { opacity: 1; }
.mu.capsula.habla .brazo.flacido:not(.frente) { opacity: 0; transition: opacity 220ms ease; }
.mu .brazo.flacido:not(.frente) { transition: opacity 220ms ease; }
.mu.capsula.habla .brazo.der.frente path { animation: mu-explica-der 1300ms ease-in-out infinite; }
.mu.capsula.habla .brazo.izq.frente path { animation: mu-explica-izq 1300ms ease-in-out -650ms infinite; }
@keyframes mu-explica-der {
  0%, 100% { d: path("M114,120 C134,136 142,160 126,176 C116,186 100,180 94,168 C90,158 94,146 100,134"); }
  35% { d: path("M114,120 C138,124 150,140 144,154 C140,166 124,166 120,156 C116,146 112,140 100,134"); }
  70% { d: path("M114,120 C130,140 132,168 112,182 C102,190 88,182 88,170 C88,158 94,148 100,134"); }
}
@keyframes mu-explica-izq {
  0%, 100% { d: path("M46,120 C26,136 18,160 34,176 C44,186 60,180 66,168 C70,158 66,146 60,134"); }
  35% { d: path("M46,120 C22,124 10,140 16,154 C20,166 36,166 40,156 C44,146 48,140 60,134"); }
  70% { d: path("M46,120 C30,140 28,168 48,182 C58,190 72,182 72,170 C72,158 66,148 60,134"); }
}
.mu.capsula.habla .todo { animation: mu-vaiven-suave 1300ms ease-in-out infinite; }
@keyframes mu-vaiven-suave { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
.mu.capsula.habla .cabeza-g { animation: mu-asentir-suave 1300ms ease-in-out infinite; }
@keyframes mu-asentir-suave { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-2deg) translateY(1px); } }