.mascota-container {
  position: fixed;
  bottom: 70px;
  left: 20px;
  z-index: 800;
  cursor: grab;
  user-select: none;
  touch-action: none;

  transition: bottom 0.3s;
}

.mascota-inner {
  position: relative;
  display: flex;
  align-items: flex-end;
}

.mascota-inner img {
  width: 90px;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 20px rgba(26,144,255,0.5));

  animation: mascota-step 0.4s ease-in-out infinite alternate;
}

.mascota-inner svg {
  filter: drop-shadow(0 6px 20px rgba(26,144,255,0.5));
  animation: mascota-step 0.4s ease-in-out infinite alternate;
}

@keyframes mascota-step {
  from { transform: translateY(0) rotate(-2deg); }
  to   { transform: translateY(-8px) rotate(2deg); }
}

.mascota-container.looking .mascota-inner img,
.mascota-container.looking .mascota-inner svg {
  animation-play-state: paused;
  transform: translateY(0) rotate(0deg) scale(1.05);
  filter: drop-shadow(0 8px 28px rgba(26,144,255,0.8));
}

.mascota-container.jumping .mascota-inner img,
.mascota-container.jumping .mascota-inner svg {
  animation: mascota-jump 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes mascota-jump {
  0%   { transform: translateY(0) scale(1) rotate(0deg); }
  35%  { transform: translateY(-60px) scale(1.15) rotate(15deg); }
  65%  { transform: translateY(-35px) scale(1.05) rotate(-8deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}

.mascota-container.going-right .mascota-inner {
  transform: scaleX(-1);
}

.mascota-container.dragging {
  cursor: grabbing;
  transition: none;
}
.mascota-container.dragging .mascota-inner img,
.mascota-container.dragging .mascota-inner svg {
  animation-play-state: paused;
  transform: translateY(-4px) scale(1.1) rotate(-4deg);
  filter: drop-shadow(0 14px 30px rgba(26,144,255,0.65));
}

.mascota-container.pinned {
  cursor: pointer;
}
.mascota-container.pinned .mascota-inner img,
.mascota-container.pinned .mascota-inner svg {
  animation-play-state: paused;
  transform: translateY(0) rotate(0deg);
}
.mascota-container.pinned::after {
  content: '📍';
  position: absolute;
  top: -14px;
  right: -6px;
  font-size: 18px;
  animation: pin-bounce 1.4s ease-in-out infinite;
}
@keyframes pin-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.mascota-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0);
  transform-origin: bottom center;
  background: white;
  color: #111827;
  padding: 8px 14px;
  border-radius: 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
  border: 2px solid rgba(26,144,255,0.3);
}
.mascota-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: white;
}
.mascota-bubble.show {
  transform: translateX(-50%) scale(1);
}