/* KilaiQ · movimiento (va después de kilaiq.css) */

.tarjeta.aparece.visible:hover{transform:translateY(-4px)}

/* Barra de progreso de lectura */
.progreso{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--azul),#9fe3ff);transform:scaleX(0);transform-origin:left;box-shadow:0 0 12px rgba(0,174,239,.8)}

/* Red de puntos y halos que se desplazan */
canvas.red{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.7;-webkit-mask-image:radial-gradient(ellipse 80% 75% at 60% 40%,#000 35%,transparent 80%);mask-image:radial-gradient(ellipse 80% 75% at 60% 40%,#000 35%,transparent 80%)}
.halo{animation:deriva 20s ease-in-out infinite}
.halo.dos{width:620px;height:620px;left:-260px;right:auto;top:auto;bottom:-320px;background:radial-gradient(circle,rgba(51,195,245,.16),transparent 65%);animation:deriva2 26s ease-in-out infinite}
@keyframes deriva{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-90px,70px) scale(1.15)}}
@keyframes deriva2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(120px,-60px) scale(1.2)}}
.fondo-rejilla::after{content:"";position:absolute;left:0;right:0;top:0;height:28%;background:linear-gradient(180deg,transparent,rgba(0,174,239,.13) 50%,transparent);animation:escaneo 8s linear infinite}
@keyframes escaneo{from{transform:translateY(-100%)}to{transform:translateY(420%)}}

/* Entrada escalonada de la portada */
.entra{animation:subir 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
@keyframes subir{from{opacity:0;transform:translateY(30px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.movil-zona.entra{animation-name:subir-lado}
@keyframes subir-lado{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}

/* Texto con brillo */
.grad{background-image:linear-gradient(90deg,#fff 0%,#9fe3ff 25%,var(--azul) 50%,#9fe3ff 75%,#fff 100%);background-size:200% auto;animation:brillo 7s linear infinite}
@keyframes brillo{to{background-position:-200% center}}

/* Destello en botones principales */
.btn-primario{position:relative;overflow:hidden;isolation:isolate}
.btn-primario::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-22deg);animation:destello 5s ease-in-out infinite;z-index:-1;pointer-events:none}
@keyframes destello{0%,62%{left:-70%}100%{left:135%}}

/* Móvil flotando e inclinándose hacia el ratón */
.movil{animation:levita 7s ease-in-out infinite,resplandor 7s ease-in-out infinite}
@keyframes levita{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes resplandor{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 100px rgba(0,0,0,.6),0 0 120px rgba(0,174,239,.2)}50%{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 60px 110px rgba(0,0,0,.6),0 0 170px rgba(0,174,239,.38)}}
@media (min-width:961px){.movil{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .4s ease-out}}

/* Cinta en movimiento continuo */
.cinta{overflow:hidden;padding:22px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pista{display:flex;width:max-content;animation:desfile 40s linear infinite}
.cinta:hover .pista{animation-play-state:paused}
.cinta .pista ul{display:flex;flex-wrap:nowrap;gap:0;padding:0;justify-content:flex-start;max-width:none;margin:0}
.cinta .pista li{padding:0 26px;white-space:nowrap}
.cinta .pista li.sec{color:var(--tenue);font-weight:500;letter-spacing:.18em}
.cinta .pista li.sec::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--azul);box-shadow:0 0 8px var(--azul)}
@keyframes desfile{to{transform:translateX(-50%)}}

/* Foco de luz en tarjetas */
.tarjeta,.opcion,.escalon,.pieza{position:relative;isolation:isolate}
.tarjeta::before,.opcion::before,.escalon::before,.pieza::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(0,174,239,.15),transparent 45%);opacity:0;transition:opacity .35s;pointer-events:none;z-index:-1}
.tarjeta:hover::before,.opcion:hover::before,.escalon:hover::before,.pieza:hover::before{opacity:1}
.ico-caja{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .35s}
.tarjeta:hover .ico-caja,.pieza:hover .ico-caja,.opcion:hover .ico-caja{transform:translateY(-3px) scale(1.07);box-shadow:0 0 26px rgba(0,174,239,.4);background:linear-gradient(145deg,rgba(0,174,239,.32),rgba(0,174,239,.08))}

/* Selector que invita a pulsar */
.selector:not(.tocado) .opcion{animation:invita 9s ease-in-out infinite}
.selector:not(.tocado) .opcion:nth-child(2){animation-delay:1.1s}.selector:not(.tocado) .opcion:nth-child(3){animation-delay:2.2s}.selector:not(.tocado) .opcion:nth-child(4){animation-delay:3.3s}
.selector:not(.tocado) .opcion:nth-child(5){animation-delay:4.4s}.selector:not(.tocado) .opcion:nth-child(6){animation-delay:5.5s}.selector:not(.tocado) .opcion:nth-child(7){animation-delay:6.6s}.selector:not(.tocado) .opcion:nth-child(8){animation-delay:7.7s}
@keyframes invita{0%,8%,100%{border-color:var(--linea-2);box-shadow:none}4%{border-color:rgba(0,174,239,.75);box-shadow:0 0 24px rgba(0,174,239,.28)}}
.resultado{animation:respira 5s ease-in-out infinite}
@keyframes respira{0%,100%{box-shadow:0 0 0 rgba(0,174,239,0)}50%{box-shadow:0 0 60px rgba(0,174,239,.18)}}

/* Línea de pasos que se dibuja y luz que la recorre */
.pasos::before{transform:scaleX(0);transform-origin:left;transition:transform 1.8s cubic-bezier(.2,.8,.2,1) .2s}
.pasos.visible::before{transform:none}
.pasos::after{content:"";position:absolute;top:29px;left:8%;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px var(--azul);opacity:0}
.pasos.visible::after{animation:recorre 4.5s ease-in-out 2s infinite}
@keyframes recorre{0%{left:8%;opacity:0}10%,90%{opacity:1}100%{left:92%;opacity:0}}
.paso .num{position:relative}
.paso .num::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--azul);opacity:0;animation:onda 4.5s ease-out infinite}
.paso:nth-child(2) .num::after{animation-delay:1.1s}.paso:nth-child(3) .num::after{animation-delay:2.2s}.paso:nth-child(4) .num::after{animation-delay:3.3s}
@keyframes onda{0%{transform:scale(1);opacity:.8}60%,100%{transform:scale(1.7);opacity:0}}
@media (max-width:900px){.pasos::after{display:none}}

/* Barras de fases que se llenan */
.escalon .barra-nivel i.on{transform:scaleX(0);transform-origin:left;transition:transform .6s ease}
.escalera.visible .barra-nivel i.on{transform:none}
.escalera.visible .escalon:nth-child(2) .barra-nivel i.on{transition-delay:.25s}.escalera.visible .escalon:nth-child(3) .barra-nivel i.on{transition-delay:.5s}
.escalera.visible .escalon:nth-child(4) .barra-nivel i.on{transition-delay:.75s}.escalera.visible .escalon:nth-child(5) .barra-nivel i.on{transition-delay:1s}

/* Panel del dueño */
.aviso-card .botones .ok{animation:latido 2.6s ease-in-out infinite}
@keyframes latido{0%,100%{box-shadow:0 0 0 0 rgba(0,174,239,.55)}50%{box-shadow:0 0 0 8px rgba(0,174,239,0)}}
.dueno .aviso-card:first-child{animation:levita 8s ease-in-out infinite}
.dueno .aviso-card:last-child{animation:levita 8s ease-in-out -4s infinite}

/* Cadena del equipo que se enciende paso a paso */
.cadena span{animation:enciende 6s ease-in-out infinite}
.cadena span:nth-of-type(2){animation-delay:1.5s}.cadena span:nth-of-type(3){animation-delay:3s}.cadena span:nth-of-type(4){animation-delay:4.5s}
@keyframes enciende{0%,30%,100%{box-shadow:none;border-color:var(--linea-2)}10%,20%{box-shadow:0 0 28px rgba(0,174,239,.45);border-color:var(--azul)}}
.cadena .i{animation:empuja 1.6s ease-in-out infinite}
@keyframes empuja{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(4px);opacity:1}}

/* Logo neón: pulso y barrido de luz */
.marca-img{position:relative;overflow:hidden}
.marca-img img{animation:neon 6s ease-in-out infinite}
@keyframes neon{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18) saturate(1.1)}}
.marca-img::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:18%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);transform:skewX(-20deg);animation:barrido 7s ease-in-out infinite;pointer-events:none}
@keyframes barrido{0%,55%{left:-30%}100%{left:120%}}

/* Estados con punto que late */
.estado::before{animation:punto 2s ease-in-out infinite}
@keyframes punto{0%,100%{opacity:1}50%{opacity:.35}}

/* Llamada final con luz que gira */
.cta-caja::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(0,174,239,.22) 80%,transparent 90%);animation:gira 12s linear infinite;pointer-events:none}
@keyframes gira{to{transform:rotate(360deg)}}

/* Captura de un proyecto real que se desplaza sola */
.ventana.alta{height:440px;background:#fff}
.captura{width:100%;height:auto;animation:recorrido 30s ease-in-out infinite}
.navegador:hover .captura{animation-play-state:paused}
@keyframes recorrido{0%,8%{transform:translateY(0)}46%,54%{transform:translateY(calc(-100% + 440px))}92%,100%{transform:translateY(0)}}

/* Con animaciones reducidas: sin desplazamientos grandes; se mantienen fundidos y luces suaves */
@keyframes fundido{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aparece{transform:none}
  .entra,.movil-zona.entra{animation-name:fundido}
  .wa-msg{transform:none;transition:opacity .2s}
  .movil{transform:none}
}
canvas.red-global{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;opacity:.6;-webkit-mask-image:none;mask-image:none}