/* Camila – K-9 Trucker · estilos del avatar animado */
.camila-avatar {
  --camila-width: 280px;            /* tamaño: cambia esta variable */
  --camila-shadow: rgba(0, 0, 0, .28);
  position: relative;
  width: var(--camila-width);
  aspect-ratio: 1088 / 1456;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.camila-avatar::after {             /* sombra en el piso */
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: -1.5%;
  height: 5%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--camila-shadow), transparent);
  z-index: -1;
}
.camila-avatar__stage {
  position: absolute;
  inset: 0;
  transform-origin: 50% 98%;        /* pivota sobre las patas */
  will-change: transform;
}
/* Lienzo donde se dibujan los cuadros del giro */
.camila-avatar__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Salto de alegría: camila.bounce() */
.camila-avatar.is-bouncing .camila-avatar__stage {
  animation: camila-bounce .55s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes camila-bounce {
  0%   { translate: 0 0;    scale: 1 1; }
  25%  { translate: 0 0;    scale: 1.04 .95; }
  55%  { translate: 0 -7%;  scale: .97 1.04; }
  80%  { translate: 0 0;    scale: 1.03 .97; }
  100% { translate: 0 0;    scale: 1 1; }
}

/* Variante circular para perfil / burbuja de chat */
.camila-avatar--bubble {
  --camila-width: 96px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #1f4fd8;
}
.camila-avatar--bubble::after { display: none; }
.camila-avatar--bubble .camila-avatar__stage {
  inset: auto;
  left: -18%; top: 2%;
  width: 136%;
  aspect-ratio: 1088 / 1456;
}