/* ══════════════════════════════════════════════════════════════════════════
   LAS IAS QUE FLOTAN DETRÁS DEL ROBOT
   ──────────────────────────────────────────────────────────────────────────
   Chapas de cristal con el emblema de cada herramienta, orbitando por detrás
   del robot. Van en monocromo plata sobre cristal oscuro con filo dorado: en
   su color de marca cada una tira para un lado y el hero se vuelve un
   mosaico. Así parecen parte de la misma pieza.

   Están detrás del robot (z-index 1 contra el 2 del visor) y no reciben el
   ratón: el robot sigue mirando al cursor como siempre.
   ══════════════════════════════════════════════════════════════════════════ */
.ias{position:absolute;inset:0;z-index:1;pointer-events:none;
  perspective:900px;perspective-origin:62% 46%;overflow:hidden}
.ias-mundo{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.22,1,.36,1)}

.ia{position:absolute;width:var(--w);height:var(--w);border-radius:19px;
  display:grid;place-items:center;transform-style:preserve-3d;
  left:var(--x);top:var(--y);
  background:linear-gradient(150deg,rgba(26,40,74,.78),rgba(10,17,36,.86));
  border:1px solid rgba(201,160,64,.22);
  box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(3px);
  animation:iaFlota var(--t) ease-in-out infinite;animation-delay:var(--d);
  opacity:var(--o)}
.ia svg{width:54%;height:54%;display:block;
  fill:none;stroke:#cfdcf2;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.ia svg.lleno{fill:#cfdcf2;stroke:none}
/* un filo de luz arriba, como el del resto de la página */
.ia::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,231,168,.5),rgba(255,231,168,0))}

@keyframes iaFlota{
  0%,100%{transform:translateZ(var(--z)) translateY(0) rotateY(var(--ry)) rotateX(var(--rx))}
  50%{transform:translateZ(var(--z)) translateY(-13px) rotateY(calc(var(--ry) + 7deg)) rotateX(var(--rx))}
}

/* los hilos que las unen: insinúan una red, no la dibujan entera */
.ias-red{position:absolute;inset:0;pointer-events:none;opacity:.5}
.ias-red line{stroke:rgba(201,160,64,.3);stroke-width:1;stroke-dasharray:3 6;
  animation:iaHilo 9s linear infinite}
@keyframes iaHilo{to{stroke-dashoffset:-36}}

/* el polvo de fondo, para que el aire no quede vacío */
.ias-polvo i{position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(201,160,64,.55);animation:iaPolvo var(--t) ease-in-out infinite;
  animation-delay:var(--d);left:var(--x);top:var(--y)}
@keyframes iaPolvo{0%,100%{transform:translateY(0);opacity:.2}50%{transform:translateY(-18px);opacity:.75}}

@media(prefers-reduced-motion:reduce){
  .ia,.ias-red line,.ias-polvo i{animation:none}
}