/* Anima los mockups .kit-vis (chat, correo, agenda, factura) al hacer scroll,
   para que se vean "en marcha" en vez de una captura estática. */
@keyframes kvFadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes kvPop{0%{opacity:0;transform:scale(.55);}65%{opacity:1;transform:scale(1.12);}100%{opacity:1;transform:scale(1);}}

.kit-vis .kv-msg,.kit-vis .kit-mail,.kit-vis .kv-line,.kit-vis .kv-serp,.kit-vis .kit-inv,.kit-vis .kv-bar,.kit-vis .kv-ok{
  opacity:0;
}
.kit-vis .kv-slot.on{
  opacity:0;
  transform:scale(.55);
}

.kit-vis.kv-play .kv-msg,
.kit-vis.kv-play .kit-mail,
.kit-vis.kv-play .kv-line,
.kit-vis.kv-play .kv-serp,
.kit-vis.kv-play .kit-inv,
.kit-vis.kv-play .kv-bar,
.kit-vis.kv-play .kv-ok{
  animation:kvFadeIn .4s ease forwards;
  animation-delay:calc(var(--i,0) * .38s + .1s);
}
.kit-vis.kv-play .kv-slot.on{
  animation:kvPop .45s ease forwards;
  animation-delay:calc(var(--i,0) * .38s + .1s);
}

/* Llamada en curso (IA para Llamadas): anillo pulsando + ecualizador + subtítulo */
@keyframes kvPing{0%{transform:scale(1);opacity:.9;}100%{transform:scale(1.9);opacity:0;}}
@keyframes kvBar{0%,100%{height:5px;}50%{height:15px;}}

.kit-vis .kv-call{opacity:0;transform:translateY(8px);display:flex;flex-direction:column;gap:8px;}
.kit-vis.kv-play .kv-call{animation:kvFadeIn .4s ease forwards;animation-delay:.1s;}
.kit-vis .kv-call-top{display:flex;align-items:center;gap:8px;}
.kit-vis .kv-call-ring{width:24px;height:24px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-size:.62rem;position:relative;flex-shrink:0;}
.kit-vis .kv-call-ring::before,.kit-vis .kv-call-ring::after{content:'';position:absolute;inset:0;border-radius:50%;border:1.4px solid var(--green);opacity:0;}
.kit-vis.kv-play .kv-call-ring::before,.kit-vis.kv-play .kv-call-ring::after{animation:kvPing 1.8s ease-out infinite;animation-delay:.3s;}
.kit-vis.kv-play .kv-call-ring::after{animation-delay:1.2s;}
.kit-vis .kv-call-who{display:flex;flex-direction:column;line-height:1.25;}
.kit-vis .kv-call-who b{font-size:.66rem;color:var(--white,#fff);}
.kit-vis .kv-call-who span{font-size:.58rem;color:var(--grey);}
.kit-vis .kv-call-timer{margin-left:auto;font-family:monospace;font-size:.58rem;background:rgba(255,255,255,.08);padding:2px 7px;border-radius:99px;color:var(--grey);}
.kit-vis .kv-call-wave{display:flex;align-items:center;justify-content:center;gap:3px;height:18px;}
.kit-vis .kv-call-wave i{display:block;width:3px;height:6px;border-radius:3px;background:linear-gradient(180deg,var(--gold),#f6c85a);}
.kit-vis.kv-play .kv-call-wave i{animation:kvBar 1s ease-in-out infinite;animation-delay:.4s;}
.kit-vis .kv-call-wave i:nth-child(3n){animation-duration:.7s;}
.kit-vis .kv-call-wave i:nth-child(4n){animation-duration:1.2s;animation-delay:.15s;}
.kit-vis .kv-call-cap{opacity:0;font-size:.66rem;font-style:italic;color:var(--grey);}
.kit-vis.kv-play .kv-call-cap{animation:kvFadeIn .4s ease forwards;animation-delay:1.4s;}
.kv-call-box.kv-play .kv-ok{animation-delay:2.05s;}

/* Firma que se dibuja sola (Firma Digital) */
.kit-vis .kv-sign-path{stroke-dasharray:230;stroke-dashoffset:230;}
.kv-sign-box.kv-play .kv-sign-path{animation:kvSignDraw 1.1s ease forwards;animation-delay:.6s;}
.kv-sign-box.kv-play .kv-ok{animation-delay:1.85s;}
@keyframes kvSignDraw{to{stroke-dashoffset:0;}}

@media(prefers-reduced-motion:reduce){
  .kit-vis .kv-msg,.kit-vis .kit-mail,.kit-vis .kv-line,.kit-vis .kv-serp,.kit-vis .kit-inv,.kit-vis .kv-bar,.kit-vis .kv-ok,.kit-vis .kv-slot.on,.kit-vis .kv-call,.kit-vis .kv-call-cap{
    opacity:1!important;transform:none!important;animation:none!important;
  }
  .kit-vis .kv-call-ring::before,.kit-vis .kv-call-ring::after,.kit-vis .kv-call-wave i{animation:none!important;opacity:0;}
  .kit-vis .kv-sign-path{stroke-dashoffset:0;animation:none!important;}
}