.titulo-suscripciones{
    color: var(--verdePrincipal);
    font-size: 3vh;
    font-weight: 400;
    line-height: 4vh;
    text-align: center;
}

.ul-suscripciones{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5%;
    width: 100%;
    height: 100%;
    /* background-color: rgb(218, 218, 218); */
    padding: 1vh;
}

.li-suscripciones{
    padding:5vh 1vh;
    border-radius: 1cap;
    width: 30%;
    /* border: solid 3px var(--verdePrincipal); */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 1px 1px 10px rgb(95, 95, 95);

}

.li-susc-1{
    background-image: url("../../img/susc1.jpg");
}

.li-susc-2{
    background-image: url("../../img/susc2.jpg");    
}

.li-susc-3{
    background-image: url("../../img/susc3.jpg");    
}


.titulo-plan{
    text-align: center;
    color: var(--naranja);
    font-weight: 400;
    font-size: 3vh;
    text-shadow: 1px 1px 5px black;
    /* margin: 1vh 0 2.5vh 0; */
}

.texto-plan{
    /* border: solid 1px; */
    font-weight: 400;
    color: white;
    text-shadow: 1px 1px 5px black;
}

.div-opciones{
    border-radius: .7cap;
    width: 100%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 1vh;
    /* padding: 1vh; */
}

.div-opcion{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vh;
    width: 100%;
    border: solid 2px rgb(144, 144, 144);
    backdrop-filter: blur(10px);
    border-radius: .7cap;
    padding: .5vh 1vh;

    button{
        padding: .5vh 1vh;
        border: none;
        color: white;
        font-weight: 300;
        font-size: 2.5vh;
        border-radius: .3cap;
        background-color: var(--naranja);

        &:hover{
            background-color: white;
            color: var(--naranja);
            cursor: pointer;
        }
    }

}


/* Pop up pago */
.popup-pago{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5vh;
    text-align: center;
    /* border: solid 1px black; */
    border-radius: 1cap;
    box-shadow: 1px 1px 10px rgb(118, 118, 118);
}

.a-popup-pago, .btn-cerrar-popup{
    border-radius: .5cap;
    padding: .5vh 1vh;
    width: 80%;
    color: white;
    border: none;
}

.a-popup-pago{
    text-transform: capitalize;
    background-color: #009ee3;
}

.btn-cerrar-popup{
    background-color: red;
}