.genTitle{
    color: var(--TES-dark);
    font-size: 1.375rem;
    letter-spacing: 0.188rem;
    padding: 2.813rem 0;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    width: 100%;
}




/*  PÁGINAS PASOS   */

.genStepsTitle1{
    display: none;
}


.generalStepsPag{
    padding: 2.3% 10%;
}

.genStepsTitle2{
    color: var(--TES-dark);
    font-size: 1.375rem;
    letter-spacing: 0.188rem;
    padding: 2.813rem 0;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    width: 100%;
    border-bottom: 0.063rem solid var(--TES-gray-light-silver);
}

.genStepsSubtitle h2 {
    color: var(--TES-dark);
    font-size: 1.25rem;
    margin: 0;
    padding: 1.625rem 0;
    width: 100%;
}

.stepsBen{
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 20px;
    text-align: center;
}

.stepsBen h2{
    color: var(--TES-dark);
    font-size: 15px;
}

.stepsBen h3, .stepsBen h4{
    font-size: 14px;
}

.stepsBen h3{
    color: var(--TES-primary-color);
}

.stepsBen h4{
color: var(--TES-dark);
    text-transform: uppercase;
}

.stepsCard{
    padding-bottom: 8px;
}

.stepsCard1{
    align-items: center;
    background-color: var(--TES-white);
    border-radius: 10px;
    display: flex;
    height: 60px;
    justify-content: flex-start;
    margin-top: 20px;
    padding: 9px 10px 11px 55px;
    cursor: pointer;
    transition: 400ms;
}

.stepsCard1.active {
    background-color: var(--TES-primary-color);
}


.stepsCardNumber{
    color: var(--TES-primary-color);
    font-size: 68px;
    margin: 0 0 20px -47px;
    position: absolute;
}

.stepsCard1.active .stepsCardNumber {
    color: var(--TES-dark);
}

.stepsCardNumber1{
    margin-left: -36px;
}

.stepsCardTitle{
    color: var(--TES-dark);
    font-size: 12px;
    margin: 0;
    width: 70%;
}

.stepsCardIcons{
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    width: 30%;
}

.stepsCardImage{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    flex-shrink: 0;
    width: 50%;
}

.priceArrow.rotate {
    transform: rotate(180deg);
}

.stepsCardEye{
    display: none;
}

.stepsCard2{
    background-color: var(--TES-white);
    border-radius: 10px;
    display: none;
    margin-top: 10px;
    padding: 15px;
    transition: all 0.3s ease-in-out;
}



.stepsCard2 p, .stepsCard2 a{
    color: var(--TES-dark);
    font-size: 12px;
}

.stepsCard2 a:hover, .stepsCard2 a:active{
    color: var(--TES-primary-color);
}

.stepsCard2.show {
    display: block;
}

.stepsCardIcons i{
    color: var(--TES-dark);
}

/* BENEFICIOS DESKTOP  */

.cardImgCont{
    align-items: center;
    background-color: var(--TES-white);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    padding: 6px;
    width: 46px;
    height: 40px;
}

.cardImgCont1{
    height: 50px;
    width: 50px;
}

.cardImg{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    flex-shrink: 0;
    height: 100%;
    width: 100%;
}

/*  Responsividad   */

@media(min-width: 768px){


    /*  PÁGINAS PASOS   */

    .genStepsTitle1{
        align-items: flex-start;
        display: inline-flex;
        background: var(--TES-third-color);
        flex-direction: column;
        height: 160px;
        justify-content: center;
        padding: 0 6%;
        width: 100%;
    }
    .genStepsTitle2{
        display: none;
    }

    .generalStepsPagMobile{
        display: none;
    }

    .generalStepsPagDesk{
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }


    .stepsCards{
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 20px 0;
    }

    .stepsCard{
        align-content: flex-start;
        display: flex;
        flex-wrap: wrap;
        max-width: 300px;
    }

    .stepsBen h2{
        font-size: 17px;
    }

    .stepsBen h3, .stepsBen h4{
        font-size: 18px;
    }

    .stepsCardTitle{
        font-size: 14px;
    }

    .stepsCard2 p, .stepsCard2 a{
        font-size: 14px;
    }




}

@media(min-width: 785px){
    .stepsCard{
        max-width: 305px;
    }
}

@media(min-width: 800px){
    .stepsCard{
        max-width: 310px;
    }
}

@media(min-width: 822px){
    .stepsCard{
        max-width: 322px;
    }
}

@media(min-width: 850px){
    .stepsCard{
        max-width: 333px;
    }
}

@media(min-width: 870px){
    .stepsCard{
        max-width: 340px;
    }
}

@media(min-width: 900px){
    .stepsCard{
        max-width: 350px;
    }
}

@media(min-width: 930px){
    .stepsCard{
        max-width: 360px;
    }
}


@media(min-width: 950px){
    .stepsCard{
        max-width: 370px;
    }
}

@media(min-width: 980px){
    .stepsCard{
        max-width: 380px;
    }
}

@media(min-width: 1000px){
    .stepsCard{
        max-width: 390px;
    }
}



@media(min-width: 1024px){

    .stepsCardsContainer{
        display: flex;
        justify-content: center;
    }

    .stepsCards{
        gap: 10px;
        justify-content: flex-start;
    }
    .stepsCard{
        max-width: 264px;
        min-width: 264px;
        transition: transform 0.3s ease-in-out;
        will-change: transform;
    }

    .stepsCardIcons i{
        display: none;
    }

    .stepsCardEye{
        display: flex;
    }


    .stepsCard:hover {
        transform: scale(1.2, 1.2);

    }

    .stepsCard:hover .stepsCard2 {
        box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.20);;
        display: block;
    }

    .stepsCard:hover .stepsCard1 {
        background-color: var(--TES-primary-color);
    }

    .stepsCard:hover .stepsCardNumber {
        color: var(--TES-dark);
    }

    .stepsCards.hovering .stepsCard:not(.hovered) {
        filter: blur(10px);
        transform: scale(0.9, 0.9);
    }


}

@media(min-width: 1060px){
    .stepsCard{
        max-width: 274px;
    }
}

@media(min-width: 1080px){
    .stepsCard{
        max-width: 279px;
    }
}

@media(min-width: 1098px){
    .stepsCard{
        max-width: 284px;
    }
}

@media(min-width: 1130px){
    .stepsCard{
        margin-right: 8px;
    }
}

@media(min-width: 1150px){
    .stepsCard{
        margin-right: 0;
        max-width: 298px;
    }
}

@media(min-width: 1200px){
    .stepsCard{
        max-width: 310px;
    }
}

@media(min-width: 1248px){
    .stepsCard{
        max-width: 324px;
    }
}


@media(min-width: 1300px){
    .stepsCard{
        margin-right: 14px;
    }
}

@media(min-width: 1400px){
    .stepsCard{
        margin-right: 10px;
        max-width: 354px;
    }

    .stepsCard p{
        font-size: 13px;
    }

    .stepsCard p{
        font-size: 13px;
    }
}