/* Koko: animaciones copiadas tal cual de diseno-koko/pantallas.
   Los diseños repiten nombres (kk-bob, kk-up…) con valores distintos, así que cada grupo vive dentro de su clase:
   .kk-s-peek  → 10-inicio y 13–16 (Koko asomándose)
   .kk-s-tuto  → 01–06 (tutorial)
   .kk-s-bienv → 00-bienvenida
   .kk-s-mapa  → Cerca de mí: Koko con el mapa de papel (diseno-koko/cerca-mapa-papel.html)
   .kk-s-tip   → "¿Sabías que…?" al abrir la app (diseno-koko/sabias-que.html)
   Solo se renombraron las animaciones que tenían el mismo nombre con valores distintos (kkBob6, kkRise). */

/* ---------- Koko asomándose (10, 13, 14, 15, 16) ---------- */
.kk-s-peek .kk-up{animation:kkUp .8s cubic-bezier(.2,.9,.3,1.25) .3s both}
.kk-s-peek .kk-bob{animation:kkBob 2.4s ease-in-out 1.1s infinite}
.kk-s-peek .kk-blink{transform-box:view-box;transform-origin:70px 72px;animation:kkBlink 4s ease-in-out 2s infinite}
.kk-s-peek .kk-wave{transform-box:view-box;transform-origin:106px 86px;animation:kkWave 1.1s ease-in-out 1.2s infinite}
.kk-s-peek .kk-ud{animation:kkUD 4s ease-in-out 1s infinite}
.kk-s-peek .kk-wl{transform-box:view-box;transform-origin:34px 86px;animation:kkWl 1s ease-in-out 1.1s infinite}
.kk-s-peek .kk-wr{transform-box:view-box;transform-origin:106px 86px;animation:kkWr 1s ease-in-out 1.1s infinite}
.kk-s-peek .kk-fall{animation:kkFall 1.5s ease-in 1.2s infinite}
.kk-s-peek .kk-tw{transform-box:fill-box;transform-origin:50% 50%;animation:kkTw 2.2s ease-in-out infinite}
.kk-s-peek .kk-snap{transform-box:view-box;animation:kkSnap 4s ease-in-out 1.4s infinite}
.kk-s-peek .kk-look{animation:kkLook 3s ease-in-out 1s infinite}
.kk-s-peek .kk-raise{transform-box:view-box;transform-origin:106px 86px;animation:kkRaise 2s ease-in-out 1.2s infinite}
.kk-s-peek .kk-starpulse{transform-box:view-box;animation:kkStar 1.6s ease-in-out 1s infinite}
.kk-s-peek .kk-lookup{animation:kkLU 4s ease-in-out 1.2s infinite}
@keyframes kkUp{0%{transform:translateY(100%)}70%{transform:translateY(-6%)}100%{transform:none}}
@keyframes kkBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes kkBlink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
@keyframes kkWave{0%,100%{transform:rotate(0)}50%{transform:rotate(-24deg)}}
@keyframes kkUD{0%,40%{transform:translateY(-4px)}50%,90%{transform:translateY(4px)}100%{transform:translateY(-4px)}}
@keyframes kkWl{0%,100%{transform:rotate(0)}50%{transform:rotate(12deg)}}
@keyframes kkWr{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
@keyframes kkFall{0%{transform:translateY(-30px);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateY(40px);opacity:0}}
@keyframes kkTw{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
@keyframes kkSnap{0%,100%{transform:translateY(0)}3%{transform:translateY(-4px)}8%{transform:translateY(0)}}
@keyframes kkLook{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}60%{transform:translateX(5px)}}
@keyframes kkRaise{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}
@keyframes kkStar{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.25) rotate(20deg)}}
@keyframes kkLU{0%,100%{transform:translate(0,-4px)}25%{transform:translate(-5px,-5px)}50%{transform:translate(0,-6px)}75%{transform:translate(5px,-5px)}}

/* ---------- Tutorial (01–06) ---------- */
.kk-s-tuto .kk-in{transform-box:fill-box;transform-origin:50% 100%;animation:kkIn .9s cubic-bezier(.2,.9,.3,1.25) both}
.kk-s-tuto .kk-bob{animation:kkBob6 2.4s ease-in-out .9s infinite}
.kk-s-tuto .kk-blink{transform-box:view-box;transform-origin:70px 72px;animation:kkBlink 4s ease-in-out 2s infinite}
.kk-s-tuto .kk-look{animation:kkLook 3s ease-in-out 1s infinite}
.kk-s-tuto .kk-shadow{transform-box:fill-box;transform-origin:50% 50%;animation:kkShadow 2.4s ease-in-out .9s infinite}
.kk-s-tuto .kk-pop{animation:kkPop .45s cubic-bezier(.3,1.5,.5,1) both}
.kk-s-tuto .kk-tw{transform-box:fill-box;transform-origin:50% 50%;animation:kkTw 2.2s ease-in-out infinite}
.kk-s-tuto .kk-wav{animation:kkWav 1.2s ease-out infinite}
.kk-s-tuto .kk-flash{opacity:0;animation:kkFlash 4s ease-out 1.5s infinite}
.kk-s-tuto .kk-snap{transform-box:view-box;animation:kkSnap 4s ease-in-out 1.4s infinite}
.kk-s-tuto .kk-raise{transform-box:view-box;transform-origin:106px 86px;animation:kkRaise 2s ease-in-out 1s infinite}
.kk-s-tuto .kk-starpulse{transform-box:view-box;animation:kkStar 1.6s ease-in-out 1s infinite}
.kk-s-tuto .kk-wl{transform-box:view-box;transform-origin:34px 86px;animation:kkWl 1s ease-in-out .9s infinite}
.kk-s-tuto .kk-wr{transform-box:view-box;transform-origin:106px 86px;animation:kkWr 1s ease-in-out .9s infinite}
.kk-s-tuto .kk-fall{animation:kkFall 1.5s ease-in 1s infinite}
.kk-s-tuto .kk-heart{opacity:0;animation:kkHeart 2.6s ease-out infinite}
@keyframes kkIn{0%{transform:translateY(180px)}70%{transform:translateY(-12px)}100%{transform:none}}
@keyframes kkBob6{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes kkShadow{0%,100%{transform:scaleX(1);opacity:.25}50%{transform:scaleX(.85);opacity:.15}}
@keyframes kkPop{0%{opacity:0;transform:scale(.4) translateY(10px)}100%{opacity:1;transform:none}}
@keyframes kkWav{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@keyframes kkFlash{0%,2%{opacity:0}4%{opacity:.85}14%,100%{opacity:0}}
@keyframes kkHeart{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1;transform:translateY(-30px) scale(1)}100%{opacity:0;transform:translateY(-220px) scale(1.1)}}

/* ---------- Bienvenida (00) ---------- */
.kk-s-bienv .kk-roll{transform-box:fill-box;transform-origin:50% 100%;animation:kkRoll 1.3s cubic-bezier(.2,.8,.3,1.15) both}
.kk-s-bienv .kk-bob{animation:kkBob6 2.4s ease-in-out 1.3s infinite}
.kk-s-bienv .kk-wave{transform-box:view-box;transform-origin:106px 86px;animation:kkWave 1.1s ease-in-out 1.4s infinite}
.kk-s-bienv .kk-blink{transform-box:view-box;transform-origin:70px 74px;animation:kkBlink 4s ease-in-out 2s infinite}
.kk-s-bienv .kk-shadow{transform-box:fill-box;transform-origin:50% 50%;animation:kkShadow 2.4s ease-in-out 1.3s infinite}
.kk-s-bienv .kk-lines{animation:kkLines 1.3s ease-out both}
.kk-s-bienv .kk-bubble{animation:kkWaveB 10.8s ease-in-out infinite both;transform-origin:50% 100%}
.kk-s-bienv .kk-tw{transform-box:fill-box;transform-origin:50% 50%;animation:kkTw 2.2s ease-in-out infinite}
.kk-s-bienv .kk-up{animation:kkRise .7s ease-out both}
@keyframes kkRoll{0%{transform:translateX(-260px) rotate(-10deg)}70%{transform:translateX(10px) rotate(4deg)}100%{transform:none}}
@keyframes kkLines{0%{opacity:0;transform:translateX(-200px)}40%{opacity:.7}100%{opacity:0;transform:translateX(0)}}
@keyframes kkWaveB{0%{opacity:0;transform:scale(.4) translateY(8px)}3%,30%{opacity:1;transform:none}33.3%,100%{opacity:0;transform:scale(.8) translateY(-8px)}}
@keyframes kkRise{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}

/* ---------- Control de cuándo corre cada animación ---------- */
/* Tutorial: solo se mueve la pantalla que está a la vista; las demás esperan en su primer cuadro */
.kk-slide:not(.on), .kk-slide:not(.on) * { animation-play-state: paused !important; }
/* Reinicia las animaciones (se quita y se vuelve a poner) */
.kk-reset, .kk-reset * { animation: none !important; }
/* Koko nunca recibe toques */
.kk-koko, .kk-koko * { pointer-events: none !important; }

/* ---------- Cerca de mí: Koko con el mapa de papel (cerca-mapa-papel.html, tal cual) ---------- */
.kk-s-mapa .kk-in{animation:kkMapIn .9s cubic-bezier(.2,.9,.3,1.25) both}
.kk-s-mapa .kk-bob{animation:kkMapBob 2.4s ease-in-out .9s infinite}
.kk-s-mapa .kk-paper{transform-box:view-box;transform-origin:74px 110px;animation:kkPap 3s ease-in-out infinite}
.kk-s-mapa .kk-e-read{animation:kkRd 3s ease-in-out infinite}
@keyframes kkMapIn{0%{transform:translateX(-220px)}70%{transform:translateX(8px)}100%{transform:none}}
@keyframes kkMapBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes kkPap{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes kkRd{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
/* Al cambiar de filtro, Koko ya está en su lugar: no vuelve a entrar */
.kk-s-mapa.kk-shown .kk-in{animation:none}

/* ---------- "¿Sabías que…?" (sabias-que.html, tal cual) ---------- */
.kk-s-tip .tp-dim{position:absolute;inset:0;background:rgba(22,20,31,.45);animation:tpFade .4s ease both}
.kk-s-tip .tp-koko{position:absolute;left:0;bottom:40px;width:210px;height:224px;overflow:visible;animation:tpIn .7s cubic-bezier(.2,.9,.3,1.2) .2s both}
.kk-s-tip .tp-bub{position:absolute;left:16px;right:16px;bottom:240px;background:#FFFFFF;border-radius:28px;padding:20px 20px 16px;box-shadow:0 18px 40px rgba(22,20,31,.3);transform-origin:20% 100%;animation:tpPop .5s cubic-bezier(.3,1.4,.5,1) .8s both}
.kk-s-tip .tp-tail{position:absolute;left:76px;bottom:-14px;width:30px;height:30px;background:#FFFFFF;transform:rotate(45deg);border-radius:4px}
.kk-s-tip .tp-mouth{transform-box:fill-box;transform-origin:50% 0;animation:tpTalk .28s ease-in-out .8s 8 alternate both}
.kk-s-tip .kk-bob{animation:kkBob 2.4s ease-in-out 1.1s infinite}
.kk-s-tip .kk-blink{transform-box:view-box;transform-origin:70px 72px;animation:kkBlink 4s ease-in-out 2s infinite}
.kk-s-tip .kk-wave{transform-box:view-box;transform-origin:106px 86px;animation:kkWave 1.1s ease-in-out 1.2s infinite}
/* "No mostrar tips al abrir": abajo a la derecha, junto a Koko (sin taparlo: Koko no recibe toques) */
.kk-s-tip .tp-off{position:absolute;left:184px;right:16px;bottom:112px;white-space:normal;line-height:1.35;margin:0;padding:8px 0;border:none;background:none;font:500 13px -apple-system,Inter,sans-serif;color:#E9E8EF;text-align:right;text-decoration:underline;text-underline-offset:3px;cursor:pointer;animation:tpFade .4s ease 1.2s both}
.kk-s-tip.tp-out{opacity:0;transition:opacity .25s ease}
@keyframes tpFade{from{opacity:0}to{opacity:1}}
@keyframes tpIn{0%{transform:translateY(240px)}70%{transform:translateY(-10px)}100%{transform:none}}
@keyframes tpPop{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:none}}
@keyframes tpTalk{from{transform:scaleY(1)}to{transform:scaleY(.25)}}

/* "Reducir movimiento" del sistema: Koko queda quieto en su lugar final */
@media (prefers-reduced-motion: reduce) {
  .kk-s-peek, .kk-s-peek *, .kk-s-tuto, .kk-s-tuto *, .kk-s-bienv, .kk-s-bienv *, .kk-s-mapa, .kk-s-mapa *, .kk-s-tip, .kk-s-tip * { animation: none !important; transition: none !important; }
  .kk-s-bienv .kk-lines { display: none !important; } /* líneas de velocidad: solo tienen sentido en movimiento */
  .kk-s-bienv .kk-later { display: none !important; } /* de las burbujas, solo se queda la primera tanda */
}

/* Koko que ya se asomó: al redibujar la pantalla se queda en su lugar sin volver a subir */
.kk-shown .kk-up { animation: none !important; }

/* Pantallas bajas (iPhone SE, sobre todo dentro de Safari): para que Koko no tape textos ni botones */
@media (max-height: 620px) {
  .kk-bienv-bottom { padding: 14px 24px 18px !important; gap: 8px !important; }
  .kk-bienv-bottom button { height: 46px !important; }
  .kk-bienv-bottom .kk-up > span { font-size: 38px !important; }
  .kk-bienv-bottom .kk-up > p { font-size: 15px !important; margin-top: 6px !important; }
}
@media (max-height: 740px) { .kk-cam-koko { transform: scale(.8); } }
@media (max-height: 600px) { .kk-cam-koko { transform: scale(.62); } }