/* Pepín: estilos y animaciones del mono (separado de styles.css) */
/* ---------- Mono ---------- */
.mono { position: relative; flex-shrink: 0; }
.mono .pepin { width: 100%; height: 100%; overflow: visible; display: block; }

/* ---------- Pepín animado ---------- */
.pepin * { transform-box: fill-box; }
.pepin .whole, .pepin .head, .pepin .arm, .pepin .ear, .pepin .eye, .pepin .tear, .pepin .spark path, .pepin .qmark { transform-origin: center; }
.pepin .whole { transform-origin: 50% 100%; animation: p-breathe 3.2s ease-in-out infinite; }
.pepin .arm { transform-origin: 50% 8%; transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
.pepin .head { transition: transform .35s ease; animation: p-tilt 6s ease-in-out infinite; }
.pepin .eye { animation: p-blink 4.5s infinite; }
.pepin .pupil { transition: transform .15s ease-out; }
.pepin .ear-l { transform-origin: 100% 50%; animation: p-ear 5s ease-in-out infinite; }
.pepin .ear-r { transform-origin: 0% 50%; animation: p-ear 5s ease-in-out infinite reverse; }
.pepin .eye-happy, .pepin .brow-s, .pepin .m-happy, .pepin .m-sad, .pepin .m-think, .pepin .tear, .pepin .spark, .pepin .qmark { display: none; }

/* Saludo */
.pepin.st-wave .arm-l { animation: p-wave 1s ease-in-out infinite; }

/* Feliz: salta, levanta los brazos, ojos ^ ^ y brillitos */
.pepin.st-happy .whole { animation: p-hop .55s cubic-bezier(.3,1.6,.5,1) 3; }
.pepin.st-happy .arm-l { transform: rotate(150deg); animation: p-cheer-l .4s ease-in-out infinite alternate; }
.pepin.st-happy .arm-r { transform: rotate(-150deg); animation: p-cheer-r .4s ease-in-out infinite alternate; }
.pepin.st-happy .eye { display: none; }
.pepin.st-happy .eye-happy, .pepin.st-happy .m-happy, .pepin.st-happy .spark { display: inline; }
.pepin.st-happy .m-idle { display: none; }
.pepin.st-happy .cheek { opacity: .8; }
.pepin.st-happy .spark path { animation: p-twinkle .6s ease-in-out infinite alternate; }
.pepin.st-happy .spark path:nth-child(2) { animation-delay: .2s; }
.pepin.st-happy .spark path:nth-child(3) { animation-delay: .4s; }

/* Triste: cabeza baja, cejas caídas, boca hacia abajo y lágrimas */
.pepin.st-sad .whole { animation: p-sigh 2.4s ease-in-out infinite; }
.pepin.st-sad .head { transform: translateY(6px) rotate(-5deg); animation: none; }
.pepin.st-sad .arm-l { transform: rotate(12deg); }
.pepin.st-sad .arm-r { transform: rotate(-12deg); }
.pepin.st-sad .brow-n, .pepin.st-sad .m-idle { display: none; }
.pepin.st-sad .brow-s, .pepin.st-sad .m-sad, .pepin.st-sad .tear { display: inline; }
.pepin.st-sad .pupil { transform: translateY(3px); }
.pepin.st-sad .tear { animation: p-tear 1.3s ease-in infinite; }
.pepin.st-sad .tear-r { animation-delay: .6s; }
.pepin.st-sad .ear-l { transform: rotate(-12deg); animation: none; }
.pepin.st-sad .ear-r { transform: rotate(12deg); animation: none; }

/* Pensando */
.pepin.st-think .m-idle { display: none; }
.pepin.st-think .m-think, .pepin.st-think .qmark { display: inline; }
.pepin.st-think .pupil { transform: translate(3px, -4px); }
.pepin.st-think .arm-r { transform: rotate(-120deg); }
.pepin.st-think .qmark { animation: p-twinkle 1s ease-in-out infinite alternate; }

@keyframes p-breathe { 50% { transform: translateY(-3px) scaleY(1.01); } }
@keyframes p-tilt { 0%, 40%, 100% { transform: rotate(0); } 50% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 70% { transform: rotate(0); } }
@keyframes p-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes p-ear { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(8deg); } 90% { transform: rotate(-4deg); } }
@keyframes p-wave { 0%, 100% { transform: rotate(140deg); } 50% { transform: rotate(170deg); } }
@keyframes p-hop { 0% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(0) scale(1.06, .92); } 60% { transform: translateY(-22px) scale(.96, 1.05); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes p-cheer-l { to { transform: rotate(170deg); } }
@keyframes p-cheer-r { to { transform: rotate(-170deg); } }
@keyframes p-twinkle { from { transform: scale(.6) rotate(0); opacity: .5; } to { transform: scale(1.15) rotate(20deg); opacity: 1; } }
@keyframes p-sigh { 50% { transform: translateY(3px) scaleY(.98); } }
@keyframes p-tear { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(26px) scale(1); opacity: 0; } }
@keyframes floaty { 50% { transform: translateY(-8px) rotate(-2deg); } }
@keyframes jump { 30% { transform: translateY(-18px) scale(1.05); } 60% { transform: translateY(0) scale(.97); } }
@keyframes shake { 20%,60% { transform: translateX(-8px) rotate(-4deg); } 40%,80% { transform: translateX(8px) rotate(4deg); } }
/* ---------- Pepín: más estados ---------- */
.pepin .eye-closed, .pepin .brow-u, .pepin .m-wow, .pepin .m-wavy, .pepin .m-chew, .pepin .sweat,
.pepin .banana, .pepin .notes, .pepin .zzz, .pepin .excl { display: none; }
.pepin .tail { transform-origin: 0% 100%; animation: p-tail 2.4s ease-in-out infinite; }
.pepin .tie { transform-origin: 50% 0%; }
.pepin .banana, .pepin .notes text, .pepin .zzz text, .pepin .excl, .pepin .sweat { transform-origin: center; }
@keyframes p-tail { 50% { transform: rotate(-10deg); } }

/* Baile (racha de aciertos) */
.pepin.st-dance .whole { animation: p-sway .5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.pepin.st-dance .arm-l { animation: p-dance-l .5s ease-in-out infinite alternate; }
.pepin.st-dance .arm-r { animation: p-dance-r .5s ease-in-out infinite alternate; }
.pepin.st-dance .tie { animation: p-tie .25s ease-in-out infinite alternate; }
.pepin.st-dance .eye { display: none; }
.pepin.st-dance .eye-happy, .pepin.st-dance .m-happy, .pepin.st-dance .notes { display: inline; }
.pepin.st-dance .m-idle { display: none; }
.pepin.st-dance .notes text { animation: p-note 1s ease-in-out infinite; }
.pepin.st-dance .notes text:nth-child(2) { animation-delay: .3s; }
.pepin.st-dance .notes text:nth-child(3) { animation-delay: .6s; }
@keyframes p-sway { from { transform: rotate(-7deg) translateY(0); } to { transform: rotate(7deg) translateY(-6px); } }
@keyframes p-dance-l { from { transform: rotate(160deg); } to { transform: rotate(20deg); } }
@keyframes p-dance-r { from { transform: rotate(-20deg); } to { transform: rotate(-160deg); } }
@keyframes p-tie { to { transform: rotate(12deg); } }
@keyframes p-note { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-14px) rotate(15deg); opacity: 0; } }

/* Sorpresa */
.pepin.st-wow .whole { animation: p-hop .45s cubic-bezier(.3,1.6,.5,1) 1; }
.pepin.st-wow .brow-n, .pepin.st-wow .m-idle { display: none; }
.pepin.st-wow .brow-u, .pepin.st-wow .m-wow, .pepin.st-wow .excl { display: inline; }
.pepin.st-wow .eye { transform: scale(1.15); animation: none; }
.pepin.st-wow .arm-l { transform: rotate(40deg); }
.pepin.st-wow .arm-r { transform: rotate(-40deg); }
.pepin.st-wow .excl { animation: p-twinkle .4s ease-in-out infinite alternate; }

/* Dormido */
.pepin.st-sleep .whole { animation: p-breathe 4s ease-in-out infinite; }
.pepin.st-sleep .head { transform: rotate(8deg) translateY(4px); animation: none; }
.pepin.st-sleep .eye, .pepin.st-sleep .m-idle { display: none; }
.pepin.st-sleep .eye-closed, .pepin.st-sleep .m-think, .pepin.st-sleep .zzz { display: inline; }
.pepin.st-sleep .zzz text { animation: p-z 2.4s ease-in-out infinite; opacity: 0; }
.pepin.st-sleep .zzz text:nth-child(2) { animation-delay: .8s; }
.pepin.st-sleep .zzz text:nth-child(3) { animation-delay: 1.6s; }
.pepin.st-sleep .ear-l, .pepin.st-sleep .ear-r, .pepin.st-sleep .tail { animation: none; }
@keyframes p-z { 0% { transform: translate(0, 8px) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(10px, -12px) scale(1.1); opacity: 0; } }

/* Come un plátano */
.pepin.st-eat .arm-r { opacity: 0; }
.pepin.st-eat .banana, .pepin.st-eat .m-chew { display: inline; }
.pepin.st-eat .m-idle { display: none; }
.pepin.st-eat .banana { animation: p-banana .5s ease-in-out infinite alternate; transform-origin: 80% 80%; }
.pepin.st-eat .m-chew { animation: p-chew .25s ease-in-out infinite alternate; transform-origin: center; }
.pepin.st-eat .eye { animation: none; }
.pepin.st-eat .eye-happy { display: inline; }
.pepin.st-eat .eye { display: none; }
@keyframes p-banana { from { transform: rotate(-6deg); } to { transform: rotate(8deg) translate(-3px, -3px); } }
@keyframes p-chew { from { transform: scaleY(.3); } to { transform: scaleY(1); } }

/* Guiño */
.pepin.st-wink .eye-l, .pepin.st-wink .ec-r { display: none; }
.pepin.st-wink .eye-closed { display: inline; }
.pepin.st-wink .cheek { opacity: .8; }
.pepin.st-wink .head { transform: rotate(-5deg); animation: none; }

/* Nervioso (se acaba el tiempo) */
.pepin.st-nervous .whole { animation: p-jitter .12s linear infinite; }
.pepin.st-nervous .brow-n, .pepin.st-nervous .m-idle { display: none; }
.pepin.st-nervous .brow-u, .pepin.st-nervous .m-wavy, .pepin.st-nervous .sweat { display: inline; }
.pepin.st-nervous .sweat { animation: p-tear 1s ease-in infinite; }
.pepin.st-nervous .pupil { transform: scale(.75); }
@keyframes p-jitter { 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } }

.pepin { cursor: pointer; }
.pepin-toast { position: fixed; z-index: 70; max-width: 220px; background: #fff; border: 2px solid var(--line-d); border-radius: 14px; padding: 8px 12px;
  font-weight: 500; font-size: 14px; box-shadow: 0 6px 18px rgba(30,42,68,.15); border: 0; pointer-events: none; animation: pop .3s cubic-bezier(.2,1.6,.4,1), fade .3s 1.6s reverse forwards; }