/* Mascota de Comandú en la web comercial. Cada postura es una imagen (mascota/<postura>.webp) recortada de la hoja
   de posturas por comercial/fuentes/propaganda/recortar-mascota.py. Respira, entra con un saltito al cambiar y,
   con bocadillo (.mascota-dice), dice lo que toca en cada momento. */
.mascota { --m-tam: 150px; display: block; flex: none; width: var(--m-tam); user-select: none; -webkit-user-select: none; pointer-events: none; }
.mascota img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 6px rgb(20 10 25 / .35)); transform-origin: 50% 95%; animation: m-entra .55s cubic-bezier(.2, 1.4, .4, 1) both, m-respira 3.8s ease-in-out .55s infinite; }
.mascota.p-salta img { animation: m-entra .55s cubic-bezier(.2, 1.4, .4, 1) both, m-salta 1.4s cubic-bezier(.3, 0, .4, 1) .55s infinite; }
.mascota.p-corre img { animation: m-corre .7s cubic-bezier(.2, 1, .3, 1) both, m-respira 1.2s ease-in-out .7s infinite; }
.mascota.p-stop img { animation: m-entra .4s cubic-bezier(.2, 1.4, .4, 1) both, m-tiembla .5s ease-in-out .4s 2; }
@keyframes m-respira { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-2.5%) rotate(1deg); } }
@keyframes m-entra { from { transform: translateY(10%) scale(.85) rotate(-6deg); opacity: 0; } }
@keyframes m-salta { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(-9%) rotate(-2deg); } 40% { transform: translateY(-1%); } }
@keyframes m-corre { from { transform: translateX(-60%) rotate(-8deg); opacity: 0; } }
@keyframes m-tiembla { 0%, 100% { transform: none; } 25% { transform: translateX(-3%) rotate(-2deg); } 75% { transform: translateX(3%) rotate(2deg); } }

.mascota-dice { display: flex; align-items: flex-end; gap: 12px; text-align: left; }
.mascota-dice .m-globo { position: relative; flex: 1 1 auto; min-width: 0; margin-bottom: 14%; padding: 10px 14px; border-radius: 16px; background: #fbf8f4; color: #21152a; border: 2px solid #f4b400;
  box-shadow: 0 6px 18px rgb(20 10 25 / .18); font-size: 16px; line-height: 1.4; animation: m-globo .4s cubic-bezier(.2, 1.3, .4, 1) .2s both; transform-origin: 0 80%; }
.mascota-dice .m-globo::before { content: ""; position: absolute; left: -11px; bottom: 16px; width: 18px; height: 18px; background: inherit; border-left: 2px solid #f4b400; border-bottom: 2px solid #f4b400; transform: rotate(45deg); border-radius: 0 0 0 4px; }
.mascota-dice .m-globo b { color: #3b1d47; }
.mascota-dice.aviso .m-globo, .mascota-dice.aviso .m-globo::before { border-color: #c0392b; }
@keyframes m-globo { from { transform: scale(.7); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mascota img, .mascota-dice .m-globo { animation: none !important; }
}