/* "Cómo trabajamos": las ilustraciones de cajas se arman cuando la tarjeta entra en pantalla.
   El SVG va inline adentro de un contenedor .pc. pasos-cajas.js le agrega .visible. */
.pc svg{display:block;width:100%;height:auto}
.pc .c{opacity:0;transform:translateY(-28px);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.9,.25,1.15);
  transition-delay:calc(var(--i,0) * 110ms)}
.pc.visible .c{opacity:1;transform:none}
/* que vuelvan: la luz recorre el anillo, una caja por vez */
.pc.visible [data-vuelta]{animation:pc-vuelta 3.2s linear infinite;animation-delay:calc(var(--i,0) * 400ms);opacity:.18;transform:none;transition:none}
@keyframes pc-vuelta{0%,100%{opacity:.18}6%{opacity:1}30%{opacity:.18}}
/* atraer: la estela avanza */
.pc .estela line{stroke-dashoffset:0}
.pc.visible .estela line{animation:pc-estela 1.6s linear infinite}
@keyframes pc-estela{to{stroke-dashoffset:-22}}
@media (prefers-reduced-motion:reduce){
  .pc .c,.pc.visible .c{opacity:1;transform:none;transition:none}
  .pc.visible [data-vuelta]{animation:none;opacity:1}
  .pc.visible .estela line{animation:none}
}