/* Gli esempi: accanto a ogni apparecchio la catena di 4 nodi fuori dallo schermo, e il filo viola fin dove lavora l'AI,
   che finisce con un contorno viola che pulsa sul punto esatto. */
.palco .tablet,
.palco .tel,
.palco .laptop {
  position: absolute;
}
.laptop-sx {
  left: 64px;
  top: 69px;
}
.schema {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 3;
  pointer-events: none;
}
.filo-ai {
  fill: none;
  stroke: var(--ai-filo);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.mira {
  fill: none;
  stroke: var(--ai);
  stroke-width: 1.6;
}
.mira-onda {
  fill: none;
  stroke: var(--ai-onda);
  stroke-width: 3;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.mira-punto {
  fill: var(--ai);
  stroke: var(--bianco);
  stroke-width: 2;
}
.passo {
  position: absolute;
  width: var(--passo-w);
  height: 62px;
  border-radius: 31px;
  gap: 11px;
  padding: 0 14px 0 9px;
  z-index: 5;
}
.palco-largo .passo {
  --passo-w: 236px;
}
.palco-tel .passo {
  --passo-w: 228px;
}
.passo .n-icon {
  width: 40px;
  height: 40px;
}
.passo .n-icon svg {
  width: 21px;
  height: 21px;
}
.passo .n-title {
  display: block;
  font-size: 15px;
}
.n-nota {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--text-2);
  white-space: nowrap;
}
.passo.t-ai {
  outline: 1.5px solid var(--ai-alone);
  outline-offset: 3px;
}
.passo.t-ai .n-title {
  color: var(--ai-ink);
}
.passo-sx-1 {
  left: 95px;
  top: 53px;
}
.passo-sx-2 {
  left: 155px;
  top: 165px;
}
.passo-sx-3 {
  left: 95px;
  top: 277px;
}
.passo-sx-4 {
  left: 155px;
  top: 389px;
}
.arti-1 {
  left: 296px;
  top: 65px;
}
.arti-2 {
  left: 272px;
  top: 179px;
}
.arti-3 {
  left: 296px;
  top: 293px;
}
.arti-4 {
  left: 272px;
  top: 407px;
}
.studio-1 {
  left: 16px;
  top: 65px;
}
.studio-2 {
  left: 40px;
  top: 179px;
}
.studio-3 {
  left: 16px;
  top: 293px;
}
.studio-4 {
  left: 40px;
  top: 407px;
}
.passo-dx-1 {
  left: 820px;
  top: 53px;
}
.passo-dx-2 {
  left: 760px;
  top: 165px;
}
.passo-dx-3 {
  left: 820px;
  top: 277px;
}
.passo-dx-4 {
  left: 760px;
  top: 389px;
}

@media (prefers-reduced-motion: no-preference) {
  .mira-onda {
    animation: onda 3s var(--ease) infinite;
  }
}
@keyframes onda {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.03, 1.12);
  }
}