/* Mascota Pelí: poses y animaciones. Las partes del SVG se animan por clase (ver peli-art.js). */
.mascot{position:fixed;right:max(14px,2vw);bottom:max(18px,2vh);z-index:50;width:124px;font-family:var(--ui)}
@media (max-width:820px){.mascot{bottom:84px;right:8px;width:96px}}
.mascot[hidden]{display:none}
.mascot-btn{display:block;width:100%;background:none;border:0;padding:0;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 10px 14px rgba(0,0,0,.55));border-radius:50%}
.mascot-btn:focus-visible{outline:2px solid var(--gold-hi);outline-offset:4px}
.mascot.dragging .mascot-btn{cursor:grabbing}
.peli{display:block;width:100%;height:auto;overflow:visible;animation:peli-bob 3.8s ease-in-out infinite}
.mascot.hop .peli{animation:peli-hop .7s var(--ease)}
.mascot.spin .peli{animation:peli-spin .9s var(--ease)}

/* partes (pivotes en unidades del lienzo 512) */
.peli-arm-l{transform-origin:186px 262px;transition:transform .55s var(--ease)}
.peli-arm-r{transform-origin:322px 262px;transition:transform .55s var(--ease)}
.peli-head{transform-origin:252px 236px;transform:rotate(calc(var(--hr,0deg) + var(--ph,0deg)));transition:transform .45s var(--ease)}
.peli-pouch{transform-origin:336px 130px;transition:transform .25s var(--ease)}
.peli-leg{transform-origin:50% 0}
.peli-tail{transform-origin:200px 428px}
.peli-pupil{transition:transform .14s}
.peli-lid,.peli-eye-happy{opacity:0}
.mascot.blink .peli-lid,.mascot.sleep .peli-lid{opacity:1}
.mascot[data-happy] .peli-eye,.mascot[data-happy] .peli-lid{opacity:0}
.mascot[data-happy] .peli-eye-happy{opacity:1}
.mascot.sleep .peli{animation-duration:6s}
.mascot.sleep{--ph:16deg}

/* poses */
.mascot[data-pose=saludo] .peli-arm-l{animation:wave-l .9s ease-in-out infinite}
.mascot[data-pose=saludo]{--ph:4deg}
.mascot[data-pose=hablando] .peli-arm-r{animation:gesto-r 1.4s ease-in-out infinite}
.mascot[data-pose=hablando] .peli-pouch,.mascot.talking .peli-pouch{animation:peli-talk .42s ease-in-out infinite}
.mascot[data-pose=senalando] .peli-arm-r{transform:rotate(-76deg)}
.mascot[data-pose=senalando]{--ph:6deg}
.mascot[data-pose=pulgar] .peli-arm-r{transform:rotate(-60deg);animation:thumb 1s ease-in-out 2}
.mascot[data-pose=pulgar]{--ph:-5deg}
.mascot[data-pose=celebrando] .peli-arm-r{animation:cheer-r .5s ease-in-out infinite}
.mascot[data-pose=celebrando] .peli-arm-l{animation:cheer-l .5s ease-in-out infinite}
.mascot[data-pose=celebrando] .peli{animation:peli-dance .5s ease-in-out infinite}
.mascot[data-pose=comiendo] .peli-pouch{animation:chomp .5s ease-in-out 2}
.mascot[data-pose=pensando] .peli-arm-r{transform:rotate(-150deg)}
.mascot[data-pose=pensando]{--ph:-9deg}
.mascot[data-pose=ups]{--ph:-8deg}
.mascot[data-pose=ups] .peli-arm-l{transform:rotate(30deg)}
.mascot[data-pose=ups] .peli-arm-r{transform:rotate(-30deg)}
.mascot.flap .peli-arm-r{animation:flap-r .8s ease-in-out}
.mascot.tap .peli-leg.r{animation:tap .5s ease-in-out 2}
.mascot:not([data-pose]):hover .peli-arm-l{animation:wave-l .9s ease-in-out 2}
.peli-tail{animation:tail 3.2s ease-in-out infinite}

@keyframes peli-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes peli-hop{0%{transform:translateY(0)}35%{transform:translateY(-24px)}60%{transform:translateY(0)}78%{transform:translateY(-7px)}100%{transform:translateY(0)}}
@keyframes peli-spin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.12)}100%{transform:rotate(360deg) scale(1)}}
@keyframes peli-dance{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes peli-talk{0%,100%{transform:rotate(0)}50%{transform:rotate(15deg)}}
@keyframes wave-l{0%,100%{transform:rotate(116deg)}50%{transform:rotate(146deg)}}
@keyframes gesto-r{0%,100%{transform:rotate(-30deg)}50%{transform:rotate(-48deg)}}
@keyframes cheer-r{0%,100%{transform:rotate(-112deg)}50%{transform:rotate(-132deg)}}
@keyframes cheer-l{0%,100%{transform:rotate(126deg)}50%{transform:rotate(146deg)}}
@keyframes thumb{0%,100%{transform:rotate(-60deg)}50%{transform:rotate(-72deg)}}
@keyframes flap-r{0%,100%{transform:rotate(0)}30%{transform:rotate(-34deg)}60%{transform:rotate(8deg)}}
@keyframes chomp{0%,100%{transform:rotate(0)}50%{transform:rotate(24deg)}}
@keyframes tap{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg)}}
@keyframes tail{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}

/* Zz al dormir */
.mascot.sleep::after{content:"z Z";position:absolute;left:62%;top:-4px;font:700 1.1rem var(--display);color:var(--gold-hi);letter-spacing:.3em;animation:zz 2.6s ease-in-out infinite;pointer-events:none}
@keyframes zz{0%{opacity:0;transform:translate(0,10px)}40%{opacity:1}100%{opacity:0;transform:translate(10px,-18px)}}

/* pescadito y confeti */
.fish{position:absolute;left:62%;top:22%;width:34px;height:20px;pointer-events:none;animation:fish-in .9s cubic-bezier(.3,.1,.5,1) forwards;z-index:2}
@keyframes fish-in{0%{opacity:0;transform:translate(-90px,-170px) rotate(-60deg)}15%{opacity:1}100%{opacity:1;transform:translate(0,0) rotate(0) scale(.5)}}
.confetti{position:absolute;left:50%;top:30%;width:8px;height:12px;border-radius:2px;pointer-events:none;animation:conf 1.4s ease-out forwards}
@keyframes conf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}

/* globo de diálogo */
.bubble{position:absolute;right:0;bottom:calc(100% + 8px);width:min(320px,calc(100vw - 24px));max-height:min(70vh,520px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 18px 14px;background:var(--surface-2);border:1px solid var(--gold-lo);border-radius:18px 18px 4px 18px;box-shadow:0 20px 50px -18px #000;font-size:.94rem;line-height:1.5;color:var(--ivory);animation:rise .45s var(--ease) both}
@media (max-width:820px){.bubble{max-height:max(180px,calc(100vh - 300px))}}
@media (max-height:420px){.bubble{bottom:0;right:calc(100% + 10px);width:min(320px,55vw);border-radius:18px 18px 4px 18px}}
.bubble[hidden]{display:none}
.bubble p{margin:0 0 12px;padding-right:20px}.bubble b{color:var(--gold-hi)}
.bub-x{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.bub-x:hover{color:var(--ivory);background:var(--surface-3)}
.bub-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.bub-opts.one{grid-template-columns:1fr}
.bub-opts .btn,.bub-act .btn{min-height:42px;justify-content:center;text-align:center;padding-inline:.7em;font-size:.86rem;white-space:normal;line-height:1.2}
.bub-act{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.bub-score{font-size:.8rem;color:var(--faint);margin:0 0 8px}
.bub-ok{border-color:#6fae7c!important;color:#b8e6c1!important}
.bub-no{border-color:#c46a5a!important;color:#f0b3a8!important}
.bub-off{display:block;margin-top:6px;font-size:.78rem;color:var(--faint)}
.mascot.mini{width:52px;opacity:.9}
.mascot.mini .peli{animation:none}

@media (prefers-reduced-motion:reduce){
  .peli,.mascot.hop .peli,.mascot.spin .peli,.peli *,.fish,.confetti,.mascot.sleep::after{animation:none!important}
  .peli *{transition:none!important}
}

/* Cartelito para que se sepa que Pelí es interactivo */
.peli-hint{position:absolute;right:58%;bottom:86%;white-space:nowrap;padding:.42em .85em;border-radius:999px 999px 4px 999px;background:rgba(17,16,14,.92);border:1px solid var(--gold);color:var(--gold-hi);font:700 .8rem/1 var(--ui);box-shadow:0 8px 22px -6px rgba(0,0,0,.9),0 0 14px rgba(201,162,75,.25);pointer-events:none;animation:hint-in .6s cubic-bezier(.34,1.56,.64,1) 2.2s both,hint-bob 2.2s ease-in-out 2.8s infinite;transform-origin:100% 100%}
.mascot.tapped .peli-hint,.mascot.mini .peli-hint,.mascot.sleep .peli-hint,.mascot.dragging .peli-hint,.bubble:not([hidden])~.peli-hint{display:none}
@keyframes hint-in{from{opacity:0;transform:scale(.4) translateY(10px)}to{opacity:1;transform:none}}
@keyframes hint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (max-width:820px){.peli-hint{font-size:.74rem;right:52%}}
@media (prefers-reduced-motion:reduce){.peli-hint{animation:none}}