/* ============================================================
   Taller v2: mascota, cartel del nombre y festejos (core/taller.php + mascota.js + festejos.js).
   Movimiento suave con CSS. Con movimiento reducido (o modo calma) solo cambia la pose.
   ============================================================ */
.masc{--m:80px;position:relative;display:inline-block;width:var(--m);height:var(--m);flex:none;vertical-align:bottom;pointer-events:none}
.masc img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));transform-origin:50% 100%}
.masc-chico{--m:44px}.masc-medio{--m:80px}.masc-grande{--m:140px}.masc-enorme{--m:190px}
/* v2.26 · La hoja animada de la pose (MASCOTAS-ANIMADAS.md): una tira de cuadros que se corre de a un cuadro (steps). Si está, tapa el dibujo fijo. */
.masc-hoja{position:absolute;left:50%;bottom:0;height:100%;transform:translateX(-50%);overflow:hidden;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.masc-hoja>i{display:block;height:100%;background-repeat:no-repeat;background-size:100% 100%;animation:masc-tira var(--t,.7s) steps(var(--n,4)) infinite}
.masc.con-hoja>img{visibility:hidden}
.isla-masc.espejo .masc-hoja{transform:translateX(-50%) scaleX(-1)}
@keyframes masc-tira{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.masc-hoja>i{animation:none}}
.calma .masc-hoja>i{animation:none}
.masc[data-pose="sentado"] img{animation:masc-flota 3.2s ease-in-out infinite}
.masc[data-pose="salta"] img{animation:masc-salta .7s cubic-bezier(.3,1.6,.5,1)}
.masc[data-pose="corre"] img{animation:masc-corre .5s ease-in-out infinite}
.masc[data-pose="duerme"] img{animation:masc-respira 3.6s ease-in-out infinite}
.masc[data-pose="duerme"]::after{content:'z';position:absolute;right:6%;top:4%;font:800 calc(var(--m) * .2)/1 system-ui,sans-serif;color:#fff;opacity:0;animation:masc-z 2.8s ease-in-out infinite;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.masc.espejo img{scale:-1 1}
@keyframes masc-flota{50%{transform:translateY(-4%)}}
@keyframes masc-salta{0%{transform:translateY(0) scale(1,1)}25%{transform:translateY(0) scale(1.08,.9)}55%{transform:translateY(-28%) scale(.95,1.06)}85%{transform:translateY(0) scale(1.05,.95)}100%{transform:none}}
@keyframes masc-corre{50%{transform:translateY(-6%) rotate(-3deg)}}
@keyframes masc-respira{50%{transform:scale(1.03,.98)}}
@keyframes masc-z{0%{opacity:0;transform:translate(0,0)}30%{opacity:1}100%{opacity:0;transform:translate(40%,-60%)}}
@media (prefers-reduced-motion:reduce){.masc img,.masc::after{animation:none!important}}
body.calma .masc img,body.calma .masc::after{animation:none!important}

/* Cartel del nombre: el arte de fondo y el nombre encima, en HTML, centrado y legible */
.cartel{--tinta:#3a2a14;position:relative;display:inline-grid;place-items:center;aspect-ratio:4/1;width:var(--cw,260px);max-width:100%;background:center/100% 100% no-repeat;padding:0 12%;box-sizing:border-box}
.cartel b{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tinta);font-weight:900;font-size:calc(var(--cw,260px) * .11);line-height:1;letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(255,255,255,.35),0 0 6px rgba(255,255,255,.25)}
.cartel-sin{aspect-ratio:auto;padding:0}.cartel-sin b{color:inherit;text-shadow:inherit}
.cartel-chico{--cw:150px}.cartel-medio{--cw:240px}.cartel-grande{--cw:340px}

/* Festejos: capa encima de todo, sin bloquear toques */
.fj-capa{position:fixed;inset:0;pointer-events:none;z-index:9000;overflow:hidden}
.fj{position:absolute;left:0;top:0;will-change:transform,opacity}
.fj-estrella{width:var(--t,18px);height:var(--t,18px);background:var(--c,#ffd34d);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);filter:drop-shadow(0 0 4px rgba(255,220,120,.9))}
.fj-burbuja{width:var(--t,26px);height:var(--t,26px);border-radius:50%;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 12%,rgba(255,255,255,.15) 30%,rgba(160,220,255,.25) 60%,rgba(255,170,240,.55) 100%);box-shadow:inset 0 0 6px rgba(255,255,255,.7)}
.fj-pop{width:var(--t,26px);height:var(--t,26px);border-radius:50%;border:2px solid rgba(255,255,255,.9)}
.fj-chispa{width:var(--t,7px);height:var(--t,7px);border-radius:50%;background:var(--c,#fff);box-shadow:0 0 8px 2px var(--c,#fff)}
.fj-petalo{width:var(--t,16px);height:calc(var(--t,16px) * 1.4);border-radius:80% 0 80% 0;background:linear-gradient(135deg,#ffd6e6,#ff8fb8)}
.fj-nota{font:900 var(--t,28px)/1 system-ui,sans-serif;color:var(--c,#ffd34d);text-shadow:0 0 8px rgba(255,255,255,.8),0 2px 0 rgba(0,0,0,.25)}