/* KYRA · Asistente KYDRA (v2 · 2026-11-04)
   Misma familia y estructura que MAX (mxgoup) / LOKI (loktrak) / LOKA (lokus): personaje 3D flotante,
   globo con consejos por página, minimizar a carita y chat «Pregúntame» (kyra-chat.css/js, carga diferida).
   Identidad KYDRA: amarillo #FFD60A, carbón #141414, Bricolage Grotesque + Instrument Sans (FLECHA). */
.kyra-asst{--ky-amarillo:#FFD60A;--ky-amarillo2:#E6BB00;--ky-carbon:#141414;--ky-carbon2:#2A2927;--ky-tinta:#141414;--ky-linea:#E7E3DA;
  --ky-alto:196px;--ky-ancho:118px;--ky-der:92px;--ky-abajo:16px;
  position:fixed;right:var(--ky-der);bottom:var(--ky-abajo);z-index:1000;display:flex;align-items:flex-end;gap:4px;
  font-family:"Instrument Sans","Helvetica Neue",Arial,sans-serif;pointer-events:none;-webkit-tap-highlight-color:transparent}
.kyra-asst [hidden]{display:none!important}
.kyra-asst>*{pointer-events:auto}
html.nav-open .kyra-asst,body.nav-open .kyra-asst,body.menu-open .kyra-asst,html.ky-chat-abierto .kyra-asst{opacity:0;visibility:hidden;transition:opacity .2s}

.ky-cuerpo{position:relative;flex:0 0 auto}
.ky-figura{position:relative;flex:0 0 auto;width:var(--ky-ancho);height:var(--ky-alto);padding:0;margin:0;border:0;background:transparent;cursor:pointer;
  border-radius:24px;transition:opacity .35s ease,scale .35s ease,rotate .5s cubic-bezier(.34,1.3,.5,1);transform-origin:50% 100%}
.ky-figura:focus-visible{outline:3px solid var(--ky-carbon);outline-offset:4px}
.ky-salto,.ky-flota,.ky-mece,.ky-respira{position:absolute;inset:0;display:block;transform-origin:50% 96%}
.ky-flota{animation:ky-flota 3.7s cubic-bezier(.45,.05,.55,.95) infinite}
.ky-mece{animation:ky-mece 5.3s cubic-bezier(.45,.05,.55,.95) infinite}
.ky-respira{animation:ky-respira 2.9s ease-in-out infinite}
.ky-capa{position:absolute;left:50%;bottom:6px;height:calc(100% - 8px);width:auto;max-width:none;transform:translateX(-50%) scale(.97);
  opacity:0;transition:opacity .34s ease,transform .42s cubic-bezier(.34,1.4,.5,1);pointer-events:none;user-select:none;
  filter:drop-shadow(0 6px 8px rgba(20,20,20,.24))}
.ky-capa.ky-activa{opacity:1;transform:translateX(-50%) scale(1)}
.ky-brillo{position:absolute;left:50%;top:4%;width:78%;height:40%;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,214,10,.45),rgba(255,214,10,0));animation:ky-brillo 4.3s ease-in-out infinite;pointer-events:none}
.ky-sombra{position:absolute;left:50%;bottom:0;width:62%;height:12px;margin-left:-31%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(20,20,20,.34),rgba(20,20,20,0));animation:ky-sombra 3.7s cubic-bezier(.45,.05,.55,.95) infinite}
.ky-salto.ky-brinca{animation:ky-brinco .62s cubic-bezier(.3,1.5,.5,1)}
.kyra-asst.ky-baja .ky-figura{rotate:3.5deg}
.kyra-asst.ky-sube .ky-figura{rotate:-3.5deg}
.kyra-asst.ky-discreto .ky-figura{opacity:.32;scale:.86;pointer-events:none}
.kyra-asst.ky-discreto .ky-minimizar{opacity:.5}
.kyra-asst.ky-entra .ky-figura{animation:ky-aparece .95s cubic-bezier(.3,1.35,.5,1) both}
.kyra-asst.ky-sale .ky-figura{animation:ky-sale .38s ease-in both}
.kyra-asst.ky-sin-img .ky-figura,.kyra-asst.ky-sin-img .ky-minimizar{display:none}

@keyframes ky-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes ky-mece{0%,100%{transform:rotate(-1.8deg)}50%{transform:rotate(1.6deg)}}
@keyframes ky-respira{0%,100%{transform:scale(1,1)}45%{transform:scale(1.012,.988)}}
@keyframes ky-sombra{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.8);opacity:.6}}
@keyframes ky-brillo{0%,100%{opacity:.25}40%{opacity:.7}70%{opacity:.4}}
@keyframes ky-brinco{0%{transform:translateY(0) scale(1,1)}22%{transform:translateY(2px) scale(1.04,.95)}48%{transform:translateY(-12px) scale(.97,1.04)}75%{transform:translateY(1px) scale(1.02,.98)}100%{transform:translateY(0) scale(1,1)}}
@keyframes ky-aparece{0%{opacity:0;transform:translateY(40px) scale(.55)}55%{opacity:1;transform:translateY(-10px) scale(1.04)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ky-sale{to{opacity:0;transform:translateY(30px) scale(.6)}}

.ky-minimizar{position:absolute;right:-6px;top:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--ky-linea);background:#fff;color:var(--ky-carbon);
  font:800 18px/1 "Bricolage Grotesque",Arial,sans-serif;display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 4px 12px rgba(20,20,20,.16);transition:transform .2s,opacity .3s}
.ky-minimizar:hover{transform:scale(1.08)}
.ky-minimizar:focus-visible,.ky-cerrar:focus-visible,.ky-reabrir:focus-visible,.ky-accion:focus-visible,.ky-preguntar:focus-visible{outline:3px solid var(--ky-carbon);outline-offset:2px}

/* Pregúntame (como LOKI) */
.ky-preguntar{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);z-index:3;white-space:nowrap;border:2px solid #fff;border-radius:999px;padding:5px 12px 5px 10px;
  background:var(--ky-carbon);color:var(--ky-amarillo);font:700 12px/1.1 "Instrument Sans",Arial,sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  box-shadow:0 6px 16px rgba(20,20,20,.28);transition:transform .2s,background .2s}
.ky-preguntar:hover{background:var(--ky-carbon2);transform:translateX(-50%) translateY(-1px)}
.ky-preguntar svg{width:13px;height:13px;flex:none}

.ky-globo{position:relative;align-self:flex-end;margin:0 6px 54px 0;width:max-content;max-width:300px;padding:10px 14px 12px;background:#fff;color:var(--ky-tinta);
  border:1px solid var(--ky-linea);border-bottom:3px solid var(--ky-amarillo);border-radius:18px;box-shadow:0 16px 40px rgba(20,20,20,.18);font-size:14px;line-height:1.45}
.ky-globo::after{content:"";position:absolute;right:-9px;bottom:22px;width:16px;height:16px;background:#fff;border-right:1px solid var(--ky-linea);border-top:1px solid var(--ky-linea);transform:rotate(45deg);border-radius:0 4px 0 0}
.ky-globo.ky-habla{animation:ky-globo .42s cubic-bezier(.3,1.35,.5,1) both}
@keyframes ky-globo{0%{opacity:0;transform:translateY(10px) scale(.94);transform-origin:100% 100%}100%{opacity:1;transform:none}}
.ky-globo-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:3px}
.ky-nombre{font:800 11px/1.2 "Bricolage Grotesque",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ky-carbon);display:inline-flex;align-items:center;gap:6px}
.ky-nombre::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ky-amarillo);box-shadow:0 0 0 2px var(--ky-carbon)}
.ky-cerrar{width:26px;height:26px;margin:-4px -6px 0 0;border:0;border-radius:50%;background:transparent;color:#77736b;font-size:20px;line-height:1;cursor:pointer;padding:0}
.ky-cerrar:hover{background:#f4f1ea;color:var(--ky-carbon)}
.ky-texto{margin:0;font-weight:600}
.ky-acciones{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.ky-accion{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--ky-carbon);color:var(--ky-carbon)!important;background:#fff;
  font-size:12.5px;font-weight:700;text-decoration:none!important;cursor:pointer;font-family:inherit;transition:background .2s,transform .2s}
.ky-accion:hover{background:#FFF7CC;transform:translateY(-1px)}
.ky-accion-chat{background:var(--ky-amarillo);border-color:var(--ky-amarillo)}
.ky-accion-chat:hover{background:#F5C800}
.ky-accion-wa{background:linear-gradient(135deg,#25D366,#1ebe57);border-color:transparent;color:#fff!important}
.ky-accion-wa:hover{background:linear-gradient(135deg,#1ebe57,#189a48)}

.ky-reabrir{width:56px;height:56px;margin:0 0 12px;border-radius:50%;padding:3px;border:2px solid #fff;background:linear-gradient(145deg,#2A2927,#141414);
  box-shadow:0 10px 24px rgba(20,20,20,.3);cursor:pointer;position:relative;overflow:visible;animation:ky-flota-suave 3.7s ease-in-out infinite}
@keyframes ky-flota-suave{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.ky-reabrir img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#FFF7CC}
.ky-reabrir::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,214,10,.75);animation:ky-pulso 2.8s ease-out infinite}
@keyframes ky-pulso{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.3);opacity:0}}
.kyra-asst.ky-min .ky-globo{margin-bottom:12px}

@media (max-width:640px){
  .kyra-asst{--ky-alto:126px;--ky-ancho:70px;--ky-der:12px;--ky-abajo:100px;flex-direction:column;align-items:flex-end}
  .ky-nombre{font-size:10px}
  .ky-accion{min-height:30px;padding:5px 10px;font-size:12px}
  .ky-minimizar{width:26px;height:26px;right:-6px;top:0}
  .ky-reabrir{width:48px;height:48px;margin:0 5px 4px 0}
  .ky-preguntar{font-size:11px;padding:4px 9px 4px 8px;bottom:-12px;left:auto;right:-6px;transform:none}
  .ky-preguntar:hover{transform:translateY(-1px)}
  /* Globo compacto ENCIMA de Kyra y nunca sobre botones (kyra.js: globoBloqueado) */
  .ky-globo,.kyra-asst.ky-min .ky-globo{position:absolute;right:0;bottom:calc(100% + 10px);margin:0;width:max-content;max-width:min(70vw,260px);
    font-size:12.5px;line-height:1.4;padding:8px 11px 9px;border-radius:14px;box-shadow:0 10px 26px rgba(20,20,20,.2)}
  .ky-globo::after{right:30px;bottom:-8px;width:14px;height:14px;border-top:0;border-right:1px solid var(--ky-linea);border-bottom:1px solid var(--ky-linea);border-radius:0 0 4px 0}
  .ky-globo-cab{margin-bottom:2px}
  .ky-cerrar{width:30px;height:30px;margin:-6px -8px -4px 0}
  .ky-acciones{margin-top:7px;gap:5px}
  .kyra-asst.ky-discreto .ky-figura{opacity:.22}
}
body:has(#menu-movil[data-abierto="true"]) .kyra-asst,body:has(#menu-movil[data-abierto="true"]) .kyc-panel{display:none}