/* Progreso claro (28-oct, BORRADOR para Cris): qué estoy haciendo, por qué tarda, cuánto falta, cuánto usa de tu cupo,
   y Pilo vivo y distinto en cada paso. Solo transform y opacity (liviano); con prefers-reduced-motion, todo quieto. */

#estadoProceso .ahora{font-family:var(--titulo,inherit);font-weight:700;font-size:17px;line-height:1.35;margin:4px 0 2px;color:var(--texto)}
#estadoProceso .porque{margin:0 0 4px}
.prog-total{clear:both;margin-top:12px}
.prog-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.prog-cab b{font-size:26px;line-height:1;color:var(--texto)}
.prog-cab span{font-weight:600;font-size:14px;color:var(--texto);text-align:right}
.prog-paso{margin:6px 0 0}
.cupo-job{margin:8px 0 0}
.aviso-sigo{margin:12px 0 4px;display:flex;gap:10px;align-items:flex-start;color:var(--texto)}
.aviso-sigo .punto{flex:none;width:9px;height:9px;border-radius:50%;margin-top:6px;background:var(--n-acento,var(--cian));
  animation:pc-latir 1.6s ease-in-out infinite}
.btn-avisame{margin-top:6px;font-size:13px;min-height:40px;padding:8px 14px}
@keyframes pc-latir{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* ---------- Pilo por paso: la figura lleva data-escena=<clave del paso> ---------- */
.pilo-escena{overflow:visible}
.pilo-escena img{transform-origin:50% 88%;will-change:transform}
.pilo-escena::after{content:"";position:absolute;pointer-events:none;opacity:0}

/* en la fila / entrega: respira */
.pilo-escena:is([data-escena="fila"],[data-escena="entrega"]) img{animation:pc-respirar 4.5s ease-in-out infinite}
@keyframes pc-respirar{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

/* preparar, silencios, seguir, revisión: mira con la lupa de lado a lado */
.pilo-escena:is([data-escena="preparar"],[data-escena="silencios"],[data-escena="seguir"],[data-escena="revision"],[data-escena="reunir"]) img{animation:pc-lupa 2.8s ease-in-out infinite}
@keyframes pc-lupa{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-4px) rotate(-4deg)}75%{transform:translateX(4px) rotate(4deg)}}

/* escuchar: inclina la cabeza y le llegan ondas de sonido */
.pilo-escena[data-escena="escuchar"] img{animation:pc-oir 3.2s ease-in-out infinite}
@keyframes pc-oir{0%,100%{transform:rotate(0)}40%,60%{transform:rotate(-7deg) translateY(-2px)}}
.pilo-escena[data-escena="escuchar"]::after{left:-14px;top:30%;width:16px;height:30px;border:2.5px solid var(--n-acento,var(--cian));
  border-right:0;border-top-color:transparent;border-bottom-color:transparent;border-radius:50%;animation:pc-onda 1.6s ease-out infinite}
@keyframes pc-onda{0%{opacity:0;transform:translateX(-10px) scale(1.4)}40%{opacity:.9}100%{opacity:0;transform:translateX(6px) scale(.7)}}

/* elegir: lo piensa (se mece despacio) */
.pilo-escena[data-escena="elegir"] img{animation:pc-pensar 3.6s ease-in-out infinite}
@keyframes pc-pensar{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-3px)}}
.pilo-escena[data-escena="elegir"]::after{right:-4px;top:-2px;width:22px;height:6px;opacity:1;
  background:radial-gradient(circle,var(--texto) 2.4px,transparent 2.8px) 0 0/7.3px 6px repeat-x;animation:pc-puntos 1.4s steps(4) infinite}
@keyframes pc-puntos{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 -10% 0 0)}}

/* cortar: el «¡corte!» (golpe seco de la mano) y una línea que se parte */
.pilo-escena[data-escena="cortar"] img{animation:pc-corte 1.5s cubic-bezier(.5,0,.2,1) infinite}
@keyframes pc-corte{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-9deg) translateY(-3px)}80%{transform:rotate(3deg)}}
.pilo-escena[data-escena="cortar"]::after{left:-6px;right:-6px;bottom:6%;height:0;border-top:2.5px dashed var(--n-acento,var(--cian));
  animation:pc-tijera 1.5s ease-in-out infinite}
@keyframes pc-tijera{0%,55%{opacity:0;transform:scaleX(.2)}70%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}

/* subtítulos: lee y escribe (pequeño vaivén de máquina) y van saliendo renglones */
.pilo-escena[data-escena="subtitulos"] img{animation:pc-escribir .9s steps(2) infinite}
@keyframes pc-escribir{0%{transform:translateX(-1.5px)}100%{transform:translateX(1.5px)}}
.pilo-escena[data-escena="subtitulos"]::after{left:8%;bottom:-6px;width:60%;height:10px;opacity:1;
  background:linear-gradient(var(--n-acento,var(--cian)),var(--n-acento,var(--cian))) 0 0/100% 3px no-repeat,
             linear-gradient(var(--suave),var(--suave)) 0 7px/70% 3px no-repeat;transform-origin:left;animation:pc-renglon 1.8s ease-out infinite}
@keyframes pc-renglon{0%{transform:scaleX(.3);opacity:.5}70%,100%{transform:scaleX(1);opacity:1}}

/* encuadres y zoom: se acerca y se aleja */
.pilo-escena[data-escena="encuadres"] img{animation:pc-zoom 2.4s ease-in-out infinite}
@keyframes pc-zoom{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}

/* tarjetas, marca y videoblog: ¡idea! (salta) */
.pilo-escena:is([data-escena="piezas"],[data-escena="videoblog"]) img{animation:pc-idea 2.2s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes pc-idea{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-8px) rotate(-3deg)}}

/* armar el final: contento, rebota */
.pilo-escena[data-escena="armar"] img{animation:pc-rebote 1.8s ease-in-out infinite}
@keyframes pc-rebote{0%,100%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-6px) scale(.98,1.02)}55%{transform:translateY(0) scale(1.03,.97)}}

@media (prefers-reduced-motion:reduce){
  .pilo-escena img,.pilo-escena::after,.aviso-sigo .punto{animation:none!important}
  .pilo-escena::after{opacity:0!important}
}