/* =====================================================================
   MASCOTA DE PALOMERAS — estilos y animaciones
   Los puntos de giro (transform-origin) están en las coordenadas del
   dibujo (viewBox de 760 x 680): hombros, cuello, talones…
   ===================================================================== */
.pm {
  position: relative; display: block; width: var(--pm-ancho, 160px);
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.pm-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Colores (los de la mascota original) */
.pm-azul { fill: #004a94; }
.pm-blanco { fill: #fff; }
.pm-recorte { stroke: #fff; stroke-width: 7; paint-order: stroke; stroke-linejoin: round; }
.pm-ojo .pm-blanco { stroke: #004a94; stroke-width: 6; }
.pm-pupila ellipse, .pm-ombligo, .pm-nariz { fill: #0b1b33; }
.pm-parpado { fill: #004a94; transform: scaleY(0); transform-box: fill-box; transform-origin: top; transition: transform 0.07s; }
.pm-pico { fill: #ffcd1d; }
.pm-pliegue { fill: none; stroke: #8a6400; stroke-width: 5; stroke-linecap: round; }
.pm-sombra { fill: rgba(0, 30, 60, 0.16); transform-origin: 460px 672px; }
.pm-estrellas { opacity: 0; transform-origin: 325px -45px; }
.pm-estrellas path { fill: #ffcd05; stroke: #8a6400; stroke-width: 1.5; stroke-linejoin: round; }
.pm-corazon { fill: #e8475f; stroke: #fff; stroke-width: 6; opacity: 0; transform-origin: 320px 0; }
.pm-duda { font: 900 120px/1 Archivo, Arial, sans-serif; fill: #004a94; stroke: #fff; stroke-width: 6; paint-order: stroke; opacity: 0; transform-origin: 450px -40px; }
.pm-polvo circle { fill: #d6cfbf; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pm-pupila { transition: transform 0.12s ease-out; }

/* Puntos de giro */
.pm-rig      { transform-origin: 460px 665px; }
.pm-cuerpo   { transform-origin: 470px 662px; }
.pm-cabeza   { transform-origin: 440px 330px; }
.pm-brazo-i  { transform-origin: 232px 104px; }
.pm-brazo-d  { transform-origin: 424px 100px; }
.pm-pie-i    { transform-origin: 380px 640px; }
.pm-pie-d    { transform-origin: 585px 626px; }

/* ---------- En reposo: respira, cabecea, balancea los brazos ---------- */
.is-idle .pm-cuerpo  { animation: pm-respira 3.4s ease-in-out infinite; }
.is-idle .pm-cabeza  { animation: pm-cabeceo 5.2s ease-in-out infinite; }
.is-idle .pm-brazo-i { animation: pm-balanceo-i 4.1s ease-in-out infinite; }
.is-idle .pm-brazo-d { animation: pm-balanceo-d 4.6s ease-in-out -1.3s infinite; }
@keyframes pm-respira { 50% { transform: scale(1.012, 1.03); } }
@keyframes pm-cabeceo {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-2.2deg); }
  65% { transform: rotate(1.6deg) translateY(3px); }
}
@keyframes pm-balanceo-i { 50% { transform: rotate(4deg); } }
@keyframes pm-balanceo-d { 50% { transform: rotate(-4deg); } }

/* Parpadeo */
.is-parpadeo .pm-parpado { transform: scaleY(1); }

/* Tic: mueve los dedos de los pies */
.is-dedos .pm-pie-i { animation: pm-dedos-i 0.3s ease-in-out 4 alternate; }
.is-dedos .pm-pie-d { animation: pm-dedos-d 0.3s ease-in-out 0.15s 4 alternate; }
@keyframes pm-dedos-i { to { transform: rotate(7deg); } }
@keyframes pm-dedos-d { to { transform: rotate(-7deg); } }

/* Tic: ladea la cabeza, curioso */
.is-ladea .pm-cabeza { animation: pm-ladea 1.2s ease-in-out; }
@keyframes pm-ladea { 25%, 70% { transform: rotate(-9deg); } }

/* ---------- Avanzar dando saltitos (torpes) ---------- */
.is-saltando .pm-rig    { animation: pm-salto 0.42s cubic-bezier(0.3, 0, 0.5, 1) infinite; }
.is-saltando .pm-brazo-i { animation: pm-agita-i 0.42s ease-in-out infinite; }
.is-saltando .pm-brazo-d { animation: pm-agita-d 0.42s ease-in-out infinite; }
.is-saltando .pm-pie-i  { animation: pm-cuelga-i 0.42s ease-in-out infinite; }
.is-saltando .pm-pie-d  { animation: pm-cuelga-d 0.42s ease-in-out infinite; }
.is-saltando .pm-sombra { animation: pm-sombra 0.42s ease-in-out infinite; }
.is-saltando .pm-cabeza { animation: pm-cabeza-salto 0.42s ease-in-out infinite; }
@keyframes pm-salto {
  0%   { transform: translateY(0) scale(1.07, 0.9); }
  18%  { transform: translateY(-14px) scale(0.95, 1.06); }
  50%  { transform: translateY(-90px) rotate(-5deg); }
  82%  { transform: translateY(-12px) rotate(3deg) scale(0.97, 1.04); }
  100% { transform: translateY(0) scale(1.07, 0.9); }
}
@keyframes pm-agita-i { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(18deg); } }
@keyframes pm-agita-d { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-18deg); } }
@keyframes pm-cuelga-i { 50% { transform: rotate(-12deg); } }
@keyframes pm-cuelga-d { 50% { transform: rotate(12deg); } }
@keyframes pm-sombra { 50% { transform: scale(0.6); opacity: 0.5; } }
@keyframes pm-cabeza-salto { 0%, 100% { transform: translateY(6px); } 50% { transform: translateY(-6px) rotate(2deg); } }

/* ---------- Tropezar y caer de culo ---------- */
.is-tropiezo .pm-rig { animation: pm-tropiezo 0.7s cubic-bezier(0.45, 0, 0.7, 1) forwards; }
.is-tropiezo .pm-brazo-i { animation: pm-manotazo-i 0.12s linear infinite alternate; }
.is-tropiezo .pm-brazo-d { animation: pm-manotazo-d 0.12s linear infinite alternate; }
.is-tropiezo .pm-pie-i { animation: pm-patada-i 0.7s ease-out forwards; }
.is-tropiezo .pm-pie-d { animation: pm-patada-d 0.7s ease-out forwards; }
.is-tropiezo .pm-cabeza { animation: pm-latigazo 0.7s ease-in-out forwards; }
.is-tropiezo .pm-polvo circle { animation: pm-polvo 0.7s 0.42s ease-out; }
@keyframes pm-tropiezo {
  0%   { transform: none; }
  22%  { transform: translateY(-34px) rotate(16deg); }
  48%  { transform: translateY(-56px) rotate(-8deg); }
  74%  { transform: translateY(8px) rotate(-20deg) scale(1.08, 0.86); }
  100% { transform: rotate(-14deg) scale(1.02, 0.96); }
}
@keyframes pm-manotazo-i { from { transform: rotate(-14deg); } to { transform: rotate(30deg); } }
@keyframes pm-manotazo-d { from { transform: rotate(14deg); } to { transform: rotate(-30deg); } }
@keyframes pm-patada-i { 60%, 100% { transform: rotate(20deg); } }
@keyframes pm-patada-d { 60%, 100% { transform: rotate(-20deg); } }
@keyframes pm-latigazo { 25% { transform: rotate(10deg); } 75% { transform: rotate(-12deg) translateY(10px); } 100% { transform: rotate(6deg) translateY(6px); } }
@keyframes pm-polvo { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.9) translateY(-14px); } }

/* Se queda sentado del golpe, mareado */
.is-sentado-golpe .pm-rig   { transform: rotate(-14deg) scale(1.02, 0.96); }
.is-sentado-golpe .pm-pie-i { transform: rotate(20deg); }
.is-sentado-golpe .pm-pie-d { transform: rotate(-20deg); }
.is-sentado-golpe .pm-brazo-i { transform: rotate(-10deg); }
.is-sentado-golpe .pm-brazo-d { transform: rotate(12deg); }
.is-mareado .pm-estrellas { opacity: 1; animation: pm-gira 1s linear infinite; }
.is-mareado .pm-cabeza { animation: pm-tambaleo 0.9s ease-in-out infinite; }
.is-mareado .pm-pupila { animation: pm-ojos-mareo 0.55s linear infinite; }
.is-mareado .pm-ojo-d .pm-pupila { animation-direction: reverse; }
@keyframes pm-gira { to { transform: rotate(360deg); } }
@keyframes pm-tambaleo { 0%, 100% { transform: rotate(6deg) translateY(6px); } 50% { transform: rotate(-5deg) translateY(4px); } }
@keyframes pm-ojos-mareo {
  0% { transform: translate(10px, 0); } 25% { transform: translate(0, 9px); }
  50% { transform: translate(-10px, 0); } 75% { transform: translate(0, -6px); } 100% { transform: translate(10px, 0); }
}

/* Se levanta y se sacude (noble: siempre se levanta) */
.is-sacude .pm-rig { animation: pm-levanta 0.65s cubic-bezier(0.3, 1.3, 0.6, 1); }
.is-sacude .pm-cabeza { animation: pm-sacude 0.65s ease-in-out; }
.is-sacude .pm-brazo-i { animation: pm-manotazo-i 0.1s linear 6 alternate; }
.is-sacude .pm-brazo-d { animation: pm-manotazo-d 0.1s linear 6 alternate; }
@keyframes pm-levanta {
  0% { transform: rotate(-14deg) scale(1.02, 0.96); }
  45% { transform: translateY(-20px) rotate(5deg) scale(0.97, 1.04); }
  75% { transform: rotate(-2deg); }
  100% { transform: none; }
}
@keyframes pm-sacude { 15% { transform: rotate(-12deg); } 35% { transform: rotate(11deg); } 55% { transform: rotate(-8deg); } 75% { transform: rotate(5deg); } }

/* ---------- Intentar volar… sin éxito ---------- */
.is-vuela .pm-brazo-i { animation: pm-aleteo-i 0.13s ease-in-out infinite alternate; }
.is-vuela .pm-brazo-d { animation: pm-aleteo-d 0.13s ease-in-out infinite alternate; }
.is-vuela .pm-rig { animation: pm-elevarse 1.5s ease-in-out forwards; }
.is-vuela .pm-pie-i { animation: pm-cuelga-i 0.26s ease-in-out infinite; }
.is-vuela .pm-pie-d { animation: pm-cuelga-d 0.26s ease-in-out infinite; }
.is-vuela .pm-sombra { animation: pm-sombra-vuelo 1.5s ease-in-out forwards; }
@keyframes pm-aleteo-i { from { transform: rotate(-18deg); } to { transform: rotate(32deg); } }
@keyframes pm-aleteo-d { from { transform: rotate(18deg); } to { transform: rotate(-32deg); } }
@keyframes pm-elevarse {
  0% { transform: none; }
  18% { transform: translateY(-50px) rotate(-4deg); }
  36% { transform: translateY(-34px) rotate(5deg); }
  58% { transform: translateY(-78px) rotate(-6deg); }
  80% { transform: translateY(-60px) rotate(7deg); }
  100% { transform: translateY(-70px) rotate(10deg); }
}
@keyframes pm-sombra-vuelo { 60%, 100% { transform: scale(0.55); opacity: 0.5; } }
.is-aterriza .pm-rig { animation: pm-aterriza 0.52s cubic-bezier(0.6, 0, 1, 0.7); }
.is-aterriza .pm-cabeza { animation: pm-latigazo 0.52s ease-in-out; }
.is-aterriza .pm-polvo circle { animation: pm-polvo 0.6s 0.22s ease-out; }
@keyframes pm-aterriza {
  0% { transform: translateY(-70px) rotate(10deg); }
  55% { transform: translateY(0) scale(1.12, 0.84); }
  80% { transform: translateY(-8px) scale(0.97, 1.03); }
  100% { transform: none; }
}

/* ---------- Saludar ---------- */
.is-saluda .pm-brazo-d { animation: pm-saluda 0.52s ease-in-out infinite alternate; }
.is-saluda .pm-cabeza { animation: pm-ladea 1.6s ease-in-out infinite; }
@keyframes pm-saluda { from { transform: rotate(8deg); } to { transform: rotate(-22deg); } }

/* ---------- Cariño (noble y leal) ---------- */
.is-carino .pm-corazon { animation: pm-corazon 1.5s ease-out; }
.is-carino .pm-rig { animation: pm-botecito 0.3s ease-out 4 alternate; }
.is-carino .pm-brazo-i { animation: pm-abrazo-i 1.5s ease-in-out; }
.is-carino .pm-brazo-d { animation: pm-abrazo-d 1.5s ease-in-out; }
.is-carino .pm-parpado { transform: scaleY(0.55); }
@keyframes pm-corazon {
  0% { opacity: 0; transform: scale(0.2) translateY(30px); }
  25% { opacity: 1; transform: scale(1.15); }
  45% { transform: scale(0.95); } 60% { transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1) translateY(-60px); }
}
@keyframes pm-botecito { to { transform: translateY(-16px); } }
@keyframes pm-abrazo-i { 20%, 80% { transform: rotate(-16deg); } }
@keyframes pm-abrazo-d { 20%, 80% { transform: rotate(16deg); } }

/* ---------- Duda ---------- */
.is-duda .pm-cabeza { animation: pm-duda-cabeza 1.6s ease-in-out; }
.is-duda .pm-duda { animation: pm-duda 1.6s ease-out; }
.is-duda .pm-brazo-d { animation: pm-rasca 0.2s ease-in-out 0.3s 5 alternate; }
@keyframes pm-duda-cabeza { 20%, 80% { transform: rotate(-11deg) translateY(4px); } }
@keyframes pm-duda { 0% { opacity: 0; transform: scale(0.3); } 25%, 75% { opacity: 1; transform: scale(1) rotate(10deg); } 100% { opacity: 0; } }
@keyframes pm-rasca { from { transform: rotate(-4deg); } to { transform: rotate(-14deg); } }

/* ---------- Bocadillo ---------- */
.pm-bocadillo {
  position: absolute; bottom: 92%; left: 40%; z-index: 2; transform: translate(-50%, 8px) scale(0.8);
  background: #fff; color: #111; font-family: var(--fuente-mano, cursive); font-size: 1.3rem; line-height: 1.2;
  padding: 8px 14px; border-radius: 16px; white-space: nowrap; border: 3px solid #111;
  opacity: 0; pointer-events: none; transition: 0.2s;
}
.pm-bocadillo::after {
  content: ""; position: absolute; top: 100%; left: 50%; border: 10px solid transparent;
  border-top-color: #111; transform: translateX(-50%);
}
.pm-bocadillo.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- Compañera leal: botón "volver arriba" ---------- */
.pm-companera {
  position: fixed; right: 14px; bottom: -150px; z-index: 60; --pm-ancho: 96px;
  transition: bottom 0.45s cubic-bezier(0.3, 1.5, 0.6, 1);
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}
.pm-companera.is-visible { bottom: 4px; }
.pm-companera-texto {
  position: absolute; right: 100%; top: 34%; margin-right: 2px;
  background: var(--amarillo, #ffcd05); color: #111; font-weight: 800; font-size: 0.8rem;
  padding: 4px 10px; border-radius: 999px; opacity: 0; transform: translateX(6px); transition: 0.2s; white-space: nowrap;
}
.pm-companera:hover .pm-companera-texto, .pm-companera:focus-visible .pm-companera-texto { opacity: 1; transform: none; }


/* =====================================================================
   MODO PALOMERAS (5 pulsaciones seguidas): carga fuerza, estalla y se
   pone fuerte durante 5 segundos… y acaba agotada.
   ===================================================================== */
.pm-poder { pointer-events: none; }
.pm-aura { opacity: 0; transform-origin: 440px 380px; transition: opacity 0.3s; }
.pm-onda { fill: none; stroke: #ffe14d; stroke-width: 18; opacity: 0; transform-origin: 440px 400px; }
.pm-rayos path { fill: none; stroke: #ffe14d; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.pm-chispas circle { fill: #ffe14d; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pm-cejas path { fill: none; stroke: #002a55; stroke-width: 15; stroke-linecap: round; }
.pm-cejas { opacity: 0; transition: opacity 0.2s; }

/* Pista: al pulsar varias veces seguidas tiembla un poco */
.is-tiembla .pm-svg { animation: pm-temblor 0.05s linear 5 alternate; }
@keyframes pm-temblor { from { transform: translate(-2px, 0); } to { transform: translate(2px, 1px); } }

/* 1. Carga: se agacha, aprieta, tiembla, suben chispas */
.is-carga .pm-svg { animation: pm-temblor-fuerte 0.045s linear infinite alternate; }
@keyframes pm-temblor-fuerte { from { transform: translate(-3px, 1px); } to { transform: translate(3px, -1px); } }
.is-carga .pm-rig { animation: pm-agacharse 0.5s ease-out forwards; }
@keyframes pm-agacharse { to { transform: translateY(20px) scale(1.07, 0.88); } }
.is-carga .pm-brazo-i { transform: rotate(-24deg); transition: transform 0.3s; }
.is-carga .pm-brazo-d { transform: rotate(24deg); transition: transform 0.3s; }
.is-carga .pm-pie-i { transform: rotate(-6deg); }
.is-carga .pm-pie-d { transform: rotate(6deg); }
.is-carga .pm-parpado { transform: scaleY(0.5); }
.is-carga .pm-cejas, .is-fuerte .pm-cejas { opacity: 1; }
.is-carga .pm-aura { opacity: 0.55; animation: pm-aura-carga 0.22s ease-in-out infinite alternate; }
@keyframes pm-aura-carga { from { transform: scale(0.72); } to { transform: scale(0.82); } }
.is-carga .pm-chispas circle { animation: pm-chispa 0.7s ease-in infinite; }
.pm-chispas circle:nth-child(2) { animation-delay: 0.15s !important; }
.pm-chispas circle:nth-child(3) { animation-delay: 0.35s !important; }
.pm-chispas circle:nth-child(4) { animation-delay: 0.05s !important; }
.pm-chispas circle:nth-child(5) { animation-delay: 0.45s !important; }
.pm-chispas circle:nth-child(6) { animation-delay: 0.25s !important; }
.pm-chispas circle:nth-child(7) { animation-delay: 0.55s !important; }
.pm-chispas circle:nth-child(8) { animation-delay: 0.3s !important; }
@keyframes pm-chispa {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-260px) scale(1.2); }
}
.is-carga .pm-rayos path { animation: pm-rayo 0.18s steps(2, jump-none) infinite; }
.pm-rayos path:nth-child(2) { animation-delay: 0.07s !important; }
.pm-rayos path:nth-child(3) { animation-delay: 0.12s !important; }
.pm-rayos path:nth-child(4) { animation-delay: 0.03s !important; }
.pm-rayos path:nth-child(5) { animation-delay: 0.1s !important; }
@keyframes pm-rayo { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
.is-carga .pm-polvo circle { animation: pm-polvo 0.5s ease-out infinite; }

/* 2. Estallido: onda expansiva y destello */
.is-estallido .pm-onda { animation: pm-onda 0.5s ease-out; }
@keyframes pm-onda { 0% { opacity: 1; transform: scale(0.3); } 100% { opacity: 0; transform: scale(3.2); } }
.is-estallido .pm-svg { animation: pm-destello 0.5s ease-out; }
@keyframes pm-destello { 0% { filter: brightness(2.2) saturate(1.4); } 100% { filter: none; } }

/* 3. Fuerte: más grande, brazos arriba sacando músculo, aura y brillo */
.is-fuerte .pm-rig { animation: pm-fuerte 0.5s ease-in-out infinite alternate; }
@keyframes pm-fuerte {
  from { transform: translateY(-8px) scale(1.14); }
  to   { transform: translateY(-10px) scale(1.17, 1.13); }
}
.is-fuerte .pm-brazo-i { animation: pm-musculo-i 0.5s ease-in-out infinite alternate; }
.is-fuerte .pm-brazo-d { animation: pm-musculo-d 0.5s ease-in-out infinite alternate; }
@keyframes pm-musculo-i { from { transform: rotate(22deg); } to { transform: rotate(32deg); } }
@keyframes pm-musculo-d { from { transform: rotate(-22deg); } to { transform: rotate(-32deg); } }
.is-fuerte .pm-cuerpo { animation: pm-respira-fuerte 0.5s ease-in-out infinite alternate; }
@keyframes pm-respira-fuerte { to { transform: scale(1.04, 1.02); } }
.is-fuerte .pm-cabeza { animation: none; transform: rotate(-3deg) translateY(-4px); }
.is-fuerte .pm-aura { opacity: 1; animation: pm-aura 0.3s ease-in-out infinite alternate; }
@keyframes pm-aura { from { transform: scale(1); } to { transform: scale(1.07, 1.04); } }
.is-fuerte .pm-rayos path { animation: pm-rayo 0.24s steps(2, jump-none) infinite; }
.is-fuerte .pm-chispas circle { animation: pm-chispa 0.9s ease-in infinite; }
.is-fuerte .pm-svg { filter: drop-shadow(0 0 4px #fff3a0) drop-shadow(0 0 14px rgba(255, 205, 5, 0.85)); }
.is-fuerte .pm-sombra { transform: scale(1.25); }

/* 4. Agotada: se desinfla de golpe (torpe hasta el final) */
.is-agotado .pm-rig { animation: pm-desinfla 1.4s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes pm-desinfla {
  0% { transform: translateY(-8px) scale(1.14); }
  25% { transform: translateY(14px) scale(0.92, 0.84); }
  50% { transform: translateY(4px) scale(1.02, 0.96) rotate(-4deg); }
  75% { transform: rotate(3deg); }
  100% { transform: none; }
}
.is-agotado .pm-brazo-i { transform: rotate(-14deg); transition: transform 0.4s; }
.is-agotado .pm-brazo-d { transform: rotate(14deg); transition: transform 0.4s; }
.is-agotado .pm-cabeza { animation: pm-tambaleo 0.7s ease-in-out 2; }
.is-agotado .pm-parpado { transform: scaleY(0.6); }


/* =====================================================================
   PELEA CONTRA EL BULLDOG (⇧ + clic, o mantener pulsada en el móvil)
   ===================================================================== */
.pm { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.pm-tirita { opacity: 0; transition: opacity 0.3s; }
.pm-tirita rect { fill: #f2c9a0; stroke: #8a5a2b; stroke-width: 3; }
.pm-tirita .pm-tirita-centro { fill: #fbe3c8; stroke: none; }
.pm-tirita circle { fill: #c99668; }
.con-tirita .pm-tirita { opacity: 1; }

.is-aguantando .pm-svg { animation: pm-aguanta 4s ease-in forwards; }
@keyframes pm-aguanta {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-1px, 0); } 12% { transform: translate(1px, 0); }
  40%  { transform: translate(-2px, 1px); } 42% { transform: translate(2px, 0); }
  70%  { transform: translate(-3px, 1px) scale(1.02); } 72% { transform: translate(3px, -1px) scale(1.02); }
  95%  { transform: translate(-4px, 1px) scale(1.04); } 97% { transform: translate(4px, -1px) scale(1.04); }
  100% { transform: scale(1.04); }
}
.pm-arena { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

/* — El bulldog de Mizar (dibujo del club, por piezas) — */
.bd { position: absolute; bottom: 0; left: -118%; width: 112%; }
.bd-svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 100%; }
.bd::after { /* sombra */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -2%; height: 7%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.22), transparent); z-index: -1;
}
.bd-cara { display: none; }
.cara-tirita .bd-cara-tirita, .cara-triste .bd-cara-triste { display: inline; }
.bd-lagrima { animation: bd-lagrima 0.7s ease-in infinite; transform-box: fill-box; transform-origin: 50% 0; }
.bd-lagrima-2 { animation-delay: 0.35s; }
@keyframes bd-lagrima { 0% { transform: scaleY(0.6); opacity: 0.4; } 60% { opacity: 1; } 100% { transform: translateY(40px) scaleY(1.2); opacity: 0; } }

/* Llega corriendo */
.bd.is-llega { animation: bd-llega 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes bd-llega { from { transform: translateX(-260%); } to { transform: none; } }
.is-corre .bd-svg { animation: bd-trote 0.2s ease-in-out infinite alternate; }
@keyframes bd-trote {
  from { transform: translateY(0) rotate(-2deg) scale(1.02, 0.98); }
  to   { transform: translateY(-9%) rotate(2deg) scale(0.99, 1.02); }
}
.is-corre .bd-pata-del-i, .is-corre .bd-pata-del-d { animation: bd-pata-a 0.2s ease-in-out infinite alternate; }
.is-corre .bd-pata-tras { animation: bd-pata-b 0.2s ease-in-out infinite alternate; }
.is-corre .bd-pata-del-d { animation-direction: alternate-reverse; }
@keyframes bd-pata-a { from { transform: rotate(-5deg) translateY(-10px); } to { transform: rotate(4deg); } }
@keyframes bd-pata-b { from { transform: rotate(4deg); } to { transform: rotate(-5deg) translateY(-10px); } }
.is-corre .bd-cola { animation: bd-cola 0.12s linear infinite alternate; }
@keyframes bd-cola { from { transform: rotate(-18deg); } to { transform: rotate(14deg); } }
.is-corre .bd-oreja-i { animation: bd-oreja-i 0.2s ease-in-out infinite alternate; }
.is-corre .bd-oreja-d { animation: bd-oreja-d 0.2s ease-in-out infinite alternate; }
@keyframes bd-oreja-i { from { transform: rotate(-9deg); } to { transform: rotate(5deg); } }
@keyframes bd-oreja-d { from { transform: rotate(10deg); } to { transform: rotate(-6deg); } }

/* Gruñe: se agazapa, tiembla, chasca la mandíbula y echa las orejas atrás */
.is-grune .bd-svg { animation: bd-grune 0.07s linear infinite alternate; }
@keyframes bd-grune {
  from { transform: translate(-1.2%, 2%) scale(1.03, 0.96) rotate(-1deg); }
  to   { transform: translate(1.2%, 2%) scale(1.03, 0.96) rotate(1deg); }
}
.is-grune .bd-mandibula { animation: bd-mordisco 0.26s ease-in-out infinite; }
@keyframes bd-mordisco { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(9deg); } 60% { transform: rotate(-1deg); } }
.is-grune .bd-oreja-i { transform: rotate(-10deg); }
.is-grune .bd-oreja-d { transform: rotate(12deg); }
.is-grune .bd-cola { animation: bd-cola-tiesa 0.05s linear infinite alternate; }
@keyframes bd-cola-tiesa { from { transform: rotate(-24deg); } to { transform: rotate(-20deg); } }
.is-grune .bd-pata-del-i { animation: bd-escarba 0.32s ease-in-out infinite; }
@keyframes bd-escarba { 0%, 100% { transform: none; } 40% { transform: rotate(-4deg) translateY(-12px); } 70% { transform: rotate(2deg); } }

/* Pelea: escondido en la nube */
.fase-pelea .bd { opacity: 0; }

/* Justo después de la pelea: aturdido y con tiritas */
.is-aturdido .bd-svg { animation: bd-aturdido 0.5s ease-in-out infinite alternate; }
@keyframes bd-aturdido { from { transform: rotate(-4deg) scale(0.98, 1.02); } to { transform: rotate(4deg) translateY(2%) scale(1.02, 0.97); } }
.is-aturdido .bd-oreja-i { transform: rotate(14deg); }
.is-aturdido .bd-oreja-d { transform: rotate(-14deg); }
.is-aturdido .bd-cola { transform: rotate(30deg); }

/* Se marcha triste: orejas y cola caídas */
.bd.is-huye { animation: bd-huye 1.9s cubic-bezier(0.45, 0, 0.9, 0.6) forwards; }
@keyframes bd-huye {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-6%); }
  100% { transform: translateX(-380%); }
}
.is-huye .bd-oreja-i, .is-huye.is-corre .bd-oreja-i { animation: none; transform: rotate(16deg); }
.is-huye .bd-oreja-d, .is-huye.is-corre .bd-oreja-d { animation: none; transform: rotate(-16deg); }
.is-huye .bd-cola, .is-huye.is-corre .bd-cola { animation: none; transform: rotate(40deg); }
.is-huye.is-corre .bd-svg { animation: bd-trote-triste 0.28s ease-in-out infinite alternate; }
@keyframes bd-trote-triste { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-5%) rotate(1deg); } }

.bd-bocadillo {
  position: absolute; bottom: 96%; left: -62%; transform: translate(-50%, 8px) scale(0.8);
  background: #fff; color: #4a2c14; font-family: var(--fuente-mano, cursive); font-size: 1.3rem; line-height: 1.2;
  padding: 6px 12px; border-radius: 14px; white-space: nowrap; border: 3px solid #4a2c14;
  opacity: 0; transition: 0.2s;
}
.bd-bocadillo.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.pm-cabecera .bd-bocadillo { bottom: auto; top: 100%; left: -90%; }
.pm-cabecera .pm-bocadillo { left: 70%; }

/* — La paloma: susto, valor, pelea y victoria — */
.is-susto .pm-rig { animation: pm-susto 0.35s cubic-bezier(0.3, 1.6, 0.6, 1) forwards; }
@keyframes pm-susto { 0% { transform: none; } 40% { transform: translateY(-50px) scale(0.95, 1.08); } 100% { transform: translateY(-14px) rotate(4deg); } }
.is-susto .pm-svg { animation: pm-temblor 0.05s linear infinite alternate; }
.is-susto .pm-brazo-i { transform: rotate(34deg); }
.is-susto .pm-brazo-d { transform: rotate(-34deg); }
.is-susto .pm-pupila ellipse { transform: scale(0.5); transform-box: fill-box; transform-origin: center; }
.is-valiente .pm-cejas, .is-victoria .pm-cejas { opacity: 1; }
.is-valiente .pm-rig { animation: pm-valiente 0.5s ease-out forwards; }
@keyframes pm-valiente { 0% { transform: translateY(-14px); } 50% { transform: translateY(6px) scale(1.04, 0.95); } 100% { transform: rotate(-7deg) scale(1.05); } }
.is-valiente .pm-brazo-i { animation: pm-manotazo-i 0.18s linear infinite alternate; }
.is-valiente .pm-brazo-d { transform: rotate(-20deg); }
.is-en-nube .pm-svg { opacity: 0; transition: opacity 0.12s; }
.is-en-nube .pm-bocadillo { opacity: 0 !important; }

.is-victoria .pm-rig { animation: pm-botecito 0.28s ease-out 6 alternate; }
.is-victoria .pm-brazo-i { animation: pm-musculo-i 0.4s ease-in-out infinite alternate; }
.is-victoria .pm-brazo-d { animation: pm-musculo-d 0.4s ease-in-out infinite alternate; }
.is-victoria .pm-cabeza { animation: none; transform: rotate(-4deg); }

/* — La nube de pelea — */
.pm-nube { position: absolute; bottom: -6%; left: -100%; width: 190%; opacity: 0; transform: scale(0.2); transform-origin: 50% 80%; }
.nb-svg { display: block; width: 100%; height: auto; overflow: visible; }
.nb-borde circle { fill: #4a2c14; }
.nb-relleno circle { fill: #f1e8d6; }
.nb-remolinos path { fill: none; stroke: #b9ab90; stroke-width: 6; stroke-linecap: round; }
.nb-estrellas path { fill: #ffcd05; stroke: #8a6400; stroke-width: 2; }
.nb-golpe path { fill: #ffcd05; stroke: #111; stroke-width: 4; stroke-linejoin: round; }
.nb-golpe text { font: 900 26px/1 Archivo, Arial, sans-serif; fill: #d62f3a; text-anchor: middle; stroke: #fff; stroke-width: 2; paint-order: stroke; }
.nb-golpe { opacity: 0; transform-box: fill-box; transform-origin: center; }
.nb-brazo path { fill: none; stroke: #004a94; stroke-width: 16; stroke-linecap: round; }
.nb-pata-bd path { fill: #e8892b; stroke: #4a2c14; stroke-width: 5; stroke-linejoin: round; }
.nb-pata-bd .nb-blanco { fill: #fff6e8; }
.nb-pies path { fill: none; stroke: #004a94; stroke-width: 12; stroke-linecap: round; }
.nb-rabo path { fill: #e8892b; stroke: #4a2c14; stroke-width: 5; }
.nb-extremidades > g { opacity: 0; transform-box: fill-box; }

.fase-pelea .pm-nube { animation: nb-entra 0.25s cubic-bezier(0.3, 1.6, 0.6, 1) forwards; }
@keyframes nb-entra { to { opacity: 1; transform: scale(1); } }
.fase-pelea .nb-nube { animation: nb-rueda 0.16s linear infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes nb-rueda { from { transform: rotate(-4deg) scale(1.02, 0.97); } to { transform: rotate(4deg) scale(0.97, 1.03); } }
.fase-pelea .nb-estrellas { animation: pm-gira 0.6s linear infinite; transform-box: fill-box; transform-origin: center; }
.fase-pelea .nb-g1 { animation: nb-golpe 0.7s 0.2s ease-out both; }
.fase-pelea .nb-g2 { animation: nb-golpe 0.7s 0.85s ease-out both; }
.fase-pelea .nb-g3 { animation: nb-golpe 0.8s 1.5s ease-out both; }
@keyframes nb-golpe { 0% { opacity: 0; transform: scale(0.2) rotate(-20deg); } 30% { opacity: 1; transform: scale(1.15) rotate(6deg); } 60% { transform: scale(1) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } }
.fase-pelea .nb-brazo   { animation: nb-asoma 0.5s 0.1s ease-in-out 3; transform-origin: 100% 100%; }
.fase-pelea .nb-pata-bd { animation: nb-asoma 0.45s 0.45s ease-in-out 3; transform-origin: 0 100%; }
.fase-pelea .nb-pies    { animation: nb-asoma 0.4s 0.8s ease-in-out 3; transform-origin: 0 0; }
.fase-pelea .nb-rabo    { animation: nb-asoma 0.5s 1.1s ease-in-out 2; transform-origin: 100% 0; }
@keyframes nb-asoma { 0%, 100% { opacity: 0; transform: scale(0.3); } 30%, 70% { opacity: 1; transform: scale(1) rotate(8deg); } }
.fase-fin .pm-nube { animation: nb-sale 0.35s ease-in forwards; }
@keyframes nb-sale { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }

@media (prefers-reduced-motion: reduce) {
  .pm, .pm * { animation: none !important; transition: none !important; }
}

/* Chapa de «Mizar»: más grande y se balancea al moverse */

.is-corre .bd-chapa { animation: bd-chapa 0.2s ease-in-out infinite alternate; }
.is-grune .bd-chapa { animation: bd-chapa 0.14s ease-in-out infinite alternate; }
.is-aturdido .bd-chapa { animation: bd-chapa 0.5s ease-in-out infinite alternate; }
@keyframes bd-chapa { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }