.modelo{
        width:100%;
        display:flex;
        /*background-color:darkblue;*/
        padding:100px 20px 80px 20px;
        justify-content:center;
        position:relative;
      }
      
      
      .modelo .background{
        top:0;
        left:0;
        position:absolute;
        width:100%;
        height:100%;
        background-color:#581324;
        z-index:0;
      }
      
      .modelo .background img{
        width:100%;
        height:100%;
        object-position:center;
        object-fit:cover;
      }
      
      .modelo .contenedor{
        display:flex;
        width:100%;
        flex-direction:column;
        gap:59px;
        align-items:center;
        /*background-color:green;*/
        max-width:1415px;
        align-items: center;
        z-index:2;
      }
      
      .modelo .top{
        display:flex;
        width:100%;
        flex-direction:column;
        align-items:center;
        gap:38px;
        /*background-color:darkred;*/
        text-align:center;
        color:white;
        max-width:855px;
      }
      
      .modelo .bottom{
        display:flex;
        width:100%;
        padding-top:2px;
         align-items: center;
         justify-content: center;
        /*background-color:orange;*/
      }
      
      .modelo .titular{
        font-size:43px;
        line-height:45px;
      }
      
      .modelo .texto{
        font-size:21px;
        line-height:28px;
      }









         
.timeline-stepsWrapper{
    display:flex;
    width:100%;
    padding:43px 10px;
    border:1px solid rgba(255,255,255, 0.17);
    border-radius:44px;
    background-color:rgba(0,0,0, 0.3);
    justify-content:center;
    position:relative;
    overflow:hidden;
}  




@media(max-width:720px){
    .timeline-stepsWrapper{
        display:none;
    }
}

.timeline-steps{
    width:100%;
    gap:16px;
    display:flex;
    justify-content:space-between;
    position:relative;
}

.timeline-line{
    position:absolute;
    top:64px;
    left:120px;
    right:120px;
    height:2px;
    background:#2a2a32;
    z-index:0;
}

.timeline-progress{
    position:absolute;
    top:64px;
    left:120px;
    height:2px;
    width:0%;
    background:#86102E;
    transition:width .6s ease;
    z-index:1;
}

.timeline-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:35px;
    position:relative;
    z-index:2;
    cursor:pointer;
    max-width:255px;
    width:33%;
    font-family:"Roboto", sans-serif;
}

.timeline-circle{
    width:123.34px;
    padding: 30px;
    height:123.34px;
    border-radius:50%;
    background:#4D1F2D;
    border:1px solid #2f2f3a;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    color:#8a8a9a;
    font-size:56px;
    font-family:"Roboto", sans-serif;
    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease,
        box-shadow .4s ease;
}
      
.timeline-circle img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    opacity:.35;
    transition:opacity .4s ease;
}
      
.timeline-step.timeline-active .timeline-circle img{
    opacity:1;
}
      
.timeline-text{
    text-align:center;
    display:flex;
    align-items: center;
    flex-direction:column;
    gap:10px;
    color:white;
      }

.timeline-text h4{
    margin:0;
    color:#e7e7ee;
    font-weight:500;
    font-size:17px;
    line-height:21px;
}
      
      .timeline-text p{
        font-size:16px;
        line-height:20px;
      }

.timeline-text h4.timeline-stepSpecial{
    max-width:210px;
}

.timeline-step.timeline-active .timeline-circle{
    background:#8E1433;
    color:#fff;
    transform:scale(1.01);
    box-shadow:0 12px 30px rgba(255, 0, 81, 0.5);
    border:none;
}





/* =======================
   MOBILE
======================= */

.timeline-MOBILE_stepsWrapper{
    display:none;
    width:fit-content;
    padding:43px 10px 43px 20px;
    border:1px solid rgba(255,255,255, 0.17);
    border-radius:44px;
    background-color:rgba(0,0,0, 0.3);
    justify-content:center;
    position:relative;
    overflow:hidden;
}

@media(max-width:720px){
    .timeline-MOBILE_stepsWrapper{
        display:flex;
    }
}

.timeline-MOBILE_steps{
    width:fit-content;
    display:flex;
    flex-direction:column;
    gap:36px;
    position:relative;
}

.timeline-MOBILE_line{
    position:absolute;
    left:62px;
    top:20px;
    bottom:20px;
    width:2px;
    background:#2a2a32;
    z-index:0;
}

.timeline-MOBILE_progress{
    position:absolute;
    left:62px;
    top:20px;
    width:2px;
    height:0%;
    background:#86102E;
    z-index:1;
}

.timeline-MOBILE_step{
    display:flex;
    align-items:center;
    gap:20px;
    position:relative;
    z-index:2;
    max-width:360px;
}

.timeline-MOBILE_circle{
    width:123.34px;
    height:123.34px;
    flex-shrink:0;
    border-radius:50%;
    background:#1b1b22;
    border:1px solid #2f2f3a;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    font-family:"Roboto", sans-serif;
    color:#8a8a9a;
    font-size:56px;
    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease,
        box-shadow .4s ease;
}
      
      .timeline-MOBILE_circle img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    border-radius:50%;
    opacity:.35;
    transition:opacity .4s ease;
}

.timeline-MOBILE_step.timeline-MOBILE_active .timeline-MOBILE_circle img{
    opacity:1;
}

.timeline-MOBILE_text h4{
    color:#e7e7ee;
    font-family:"Roboto", sans-serif;
    font-weight:500;
    font-size:17px;
    line-height:21px;
}

.timeline-MOBILE_step.timeline-MOBILE_active .timeline-MOBILE_circle{
    background:#8E1433;
    color:#fff;
    transform:scale(1.01);
    box-shadow:0 12px 30px rgba(255, 0, 81, 0.5);
    border:none;
}


      
 .timeline-MOBILE_text{
    display:flex;
    flex-direction:column;
    gap:10px;
    color:white;
}

.timeline-MOBILE_text p{
    font-size:16px;
    line-height:20px;
}

      
      
      
      
      
     .modelo .brillo{
        color:#F1CB65;
      }