.obra-status{
  background:#fff;
  border-radius:10px;
  padding:20px;
  font-family:sans-serif;
  max-width:720px;
}
.obra-status h3{text-align:center;color:#222;margin-top:0;}
.obra-status .item{margin-bottom:16px;}
.obra-status .barra{height:10px;background:#eee;border-radius:5px;overflow:hidden;}
.obra-status .preenchimento{height:10px;background:#c4a04d;transition:width .4s ease;}
.obra-status .item span{float:right;font-size:.9em;color:#555;}

/* estado inicial: barras zeradas */

.obra-status .preenchimento{ transition: width .9s ease-out; }


/* quando o bloco entrar na viewport */
.obra-status.in-view .item .preenchimento{
  /* o JS recoloca o width original salvo em data-target */
}