/* Okus final: copiado tal cual de prototipo/referencia/mascota/okus-final.html (no se reescribe ni se cambian valores) */
  /* Mismo escenario que okus-vivo: la imagen original (aquí en un canvas que dobla las esquinas) + las luces en vector */
  .okus { position:relative; width:min(92vw, 560px); aspect-ratio: 1444 / 1089; cursor:pointer; -webkit-tap-highlight-color: transparent; }
  .okus canvas, .okus svg { position:absolute; inset:0; width:100%; height:100%; }
  .cuerpo { position:absolute; inset:0; transform-origin: 50% 62%; animation: flotar 5.2s ease-in-out infinite; }
  @keyframes flotar { 0%,100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-12px) rotate(1.2deg); } }
  /* Sombra en el piso: se encoge cuando Okus sube */
  .sombra { position:absolute; left:20%; right:20%; bottom:-7%; height:9%; border-radius:50%;
            background:radial-gradient(closest-side, rgba(0,0,0,.55), rgba(155,140,255,.18) 60%, transparent); filter:blur(5px);
            animation: sombra 5.2s ease-in-out infinite; }
  @keyframes sombra { 0%,100% { transform: scaleX(1); opacity:.95; } 50% { transform: scaleX(.84); opacity:.6; } }
  /* Trazos de sorpresa: solo aparecen cuando reacciona */
  .marcas { position:absolute; inset:0; width:100%; height:100%; opacity:0; transform-origin: 92% 24%; transform: scale(.6);
            transition: opacity .25s, transform .35s cubic-bezier(.3,1.6,.5,1); pointer-events:none; }
  .marcas-on .marcas { opacity:1; transform: scale(1); }
  .toque .cuerpo { animation: aplastar .55s cubic-bezier(.3,1.6,.5,1) 1; }
  @keyframes aplastar { 0% { transform: scale(1); } 28% { transform: scale(1.06,.92) translateY(6px); } 58% { transform: scale(.97,1.04) translateY(-8px); } 100% { transform: scale(1); } }

  .ojo { transform-box: fill-box; transform-origin: 50% 50%; animation: parpadeo 5s infinite; }
  .ojoD { animation-delay: .06s; }
  @keyframes parpadeo { 0%,90%,100% { transform: scale(1,1); } 93% { transform: scale(1.05,.06); } 96% { transform: scale(1,1); } }
  .st-bravo .ojo { animation: none; transform: scale(1.05,.45) rotate(var(--ceño, 0deg)); }
  .st-bravo .ojoI { --ceño: -14deg; } .st-bravo .ojoD { --ceño: 14deg; }
  .st-feliz .ojo { animation: none; transform: scale(1,.42) translateY(-18px); }


  /* Si lleva rato quieto: un saltito con aplastado al caer */
  .salto .cuerpo { animation: saltito .9s cubic-bezier(.3,1.4,.5,1) 1; }
  @keyframes saltito { 0% { transform: none; } 20% { transform: scale(1.05,.94) translateY(6px); } 45% { transform: translateY(-38px) scale(.97,1.04); } 75% { transform: scale(1.06,.93) translateY(4px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .okus .cuerpo, .okus .sombra, .okus .ojo { animation: none !important; } }