.htg-ultra-track{
margin:40px 0;
width:100%;
position:relative;
}

.htg-progress-bar{
height:8px;
background:#e5e5e5;
border-radius:10px;
margin-bottom:35px;
position:relative;
}

.htg-progress-fill{
position:absolute;
height:100%;
background:#00c194;
border-radius:10px;
width:0%;
transition:width .6s ease;
}

.htg-truck{
position:absolute;
top:-18px;
font-size:22px;
left:0;
transition:left .6s ease;
}

/* progreso */

.step-1 .htg-progress-fill{width:15%;}
.step-2 .htg-progress-fill{width:45%;}
.step-3 .htg-progress-fill{width:70%;}
.step-4 .htg-progress-fill{width:100%;}

.step-1 .htg-truck{left:15%;}
.step-2 .htg-truck{left:45%;}
.step-3 .htg-truck{left:70%;}
.step-4 .htg-truck{left:95%;}

/* pasos */

.htg-steps{
display:flex;
justify-content:space-between;
text-align:center;
}

.htg-step{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
}

.htg-icon{
font-size:20px;
margin-bottom:6px;
color:#ccc;
}

.htg-label{
font-size:12px;
color:#555;
}

.step-1 .htg-step:nth-child(1) .htg-icon,
.step-2 .htg-step:nth-child(-n+2) .htg-icon,
.step-3 .htg-step:nth-child(-n+3) .htg-icon,
.step-4 .htg-step:nth-child(-n+4) .htg-icon{
color:#00c194;
}