*{
    font-family: 'arkibal_displayregular';
}
.cont-all{
    width: 100%;
    max-width: 70%;

    margin: auto;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    font-family: 'arkibal_display_ltlight' !important;
}


.cont-all img{
    width: 100%;
    max-width: 100%;

    margin: auto;

    border-radius: 30px;
}

.cont-opc{
    display: flex;
    flex-direction: column;

    margin-top: 100px;
    margin-bottom: 100px;

    width: 100%;
    max-width: 100%;
}

.cont-opc > button{
    margin-bottom: 40px;

    border: none;
    color: black;
    padding: 25px;
    border-radius: 15px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    text-align: start;

}

.modal{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);

    display: none;
    justify-content: center;
    align-items: center;

    z-index: 9999;
}

.modal.active{
    display: flex;
    animation: fade .25s ease;
}

.modal-contenido{
    width: min(700px, 90%);
    background: #fff;
    border-radius: 16px;
    padding: 20px 50px 50px 50px;

    transform: translateY(-20px);
    animation: subir .25s ease forwards;

}

#modalTexto{
    white-space: pre-line;
}

#modalTexto p:first-child{
    margin-top: 50px;
    margin-bottom: 30px;
}

.modal-contenido h4{
    margin-top: 5px;
    margin-bottom: 25px;

    font-family: 'arkibal_displayregular';
    font-weight: bold;
}

#modalPdf{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 20px;
    margin-top: 20px;

    border-radius: 20px;

    text-decoration: none;
    color: #fff;

    background-color: #00365b;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 40%);

    transition: .25s;
}

#modalPdf:hover{
    color: #fff;
    text-decoration: none;

    box-shadow: 0 0.5em 0.5em -0.4em rgba(0,0,0,.4);
    transform: translateY(-0.25em);
}

.modal_header{
    display:flex;
    justify-content:flex-end;
}

#cerrarModal{
    border:none;
    background:none;
    font-size:20px;
    cursor:pointer;

    color: black;
}

.bi-plus-lg{
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

@keyframes fade{
    from{opacity:0;}
    to{opacity:1;}
}

@keyframes subir{
    from{
        transform: translateY(-20px);
        opacity:0;
    }
    to{
        transform: translateY(0);
        opacity:1;
    }
}

@media (max-width: 600px) {
    .cont-all{
        max-width: 100%;
    }

    .cont-all img{
        border-radius: 0px;
    }

    .cont-opc{
        max-width: 90%;
    }

    .cont-opc > button span{
        font-size: 14px;

}
}