.pro-effects-progress-line-wrapper{
  position:relative;
  display:block;
  overflow:hidden;
  width:100%;
}

.pro-effects-progress-line-bar{
  display:block;
  width:100%;
  height:4px;
  background-color:#000;
  transform-origin:left center;
  transform:scaleX(0);
  will-change:transform;
}

.pro-effects-progress-line-wrapper.is-animating .pro-effects-progress-line-bar{
  transform:scaleX(1);
}

/* 2026-10-06 (CUMBRE) — línea punteada (solo con la clase is-dotted, que aparece si se elige): sin fondo ni alto propio, un
   borde superior punteado que se dibuja de 0 a 100 % de ancho (el JS anima el ancho). */
.pro-effects-progress-line-wrapper.is-dotted .pro-effects-progress-line-bar{
  height:0 !important;
  background:none !important;
  border-top:1px dotted #b6b6b6;
  width:0%;
  transform:none;
}
.pro-effects-progress-line-wrapper.is-dotted.is-animating .pro-effects-progress-line-bar{ transform:none; }