* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}

:root{
    --colorGreen: rgb(154,188,67);
    --colorViolet: rgb(121,58,131);
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* Background */
.estructura_blog
{
    width: 100%;
    display: flex;
    align-items:flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 30px;
}
.estructura_blog i
{
    font-size: 15px;
    color: var(--color_textos);
    margin-right: 5px;
}
.estructura_blog h4
{
    font-size: 15px;
    color: var(--color_textos);
    padding-bottom: 10px;
}
.contBack{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.back{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contTextBack{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.imgBack{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imgBack img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.textBack{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

.textBack p{
    width: 90%;
    font-size: 17px;
    font-weight: 550;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* Inversion */
.contInversion{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 30px;
}

.titleInv{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    padding-left: 80px;
    margin-bottom: 15px;
}

.titleInv h1{
    font-size: 53px;
    color: var(--colorViolet);
}

.inversion{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contInfo{
    width: 90%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.imgInfo{
    width: 50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imgInfo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contTextInfo{
    width: 50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.tInfo{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.tInfo h2{
    font-size: 40px;
}

.textInfo{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -120px;
}

.textInfo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* credito */
.contCredito{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.credito{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contCredito{
    width: 90%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.imgCred{
    width: 50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.imgCred img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contTextCredInfo{
    width: 50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.tCred{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.tCred h2{
    font-size: 40px;
}

.textCred{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: -120px;
    z-index: 3;
}

.textCred img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* Pago */
.contPago{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.pago{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contPago{
    width: 90%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.imgPago{
    width: 50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imgPago img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contTextPago{
    width: 50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.tPago{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.tPago h2{
    font-size: 40px;
}

.textPago{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -120px;
}

.textPago img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.buttonPago{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.buttonPago a{
    text-decoration: none;
}

.buttonPago a button{
    width: 270px;
    height: 75px;
    border: none;
    cursor: pointer;
    font-size: 30px;
    font-weight: 700;
    background-color: var(--colorGreen);
    color: black;
    border-radius: 50px;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* Apartar */
.contApartar{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.apartar{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.titleApart{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: black;
}

.titleApart h3{
    font-size: 65px;
    color: white;
}

.contApartar{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 0 5%;
}

.imgApartar{
    width: 50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.imgApartar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contTextApartar{
    width: 50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.tApartar{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.tApartar h2{
    font-size: 40px;
}

.textApartar{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: -120px;
    z-index: 3;
}

.textApartar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.buttonApartar{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.buttonApartar a{
    text-decoration: none;
}

.buttonApartar a button{
    width: 270px;
    height: 75px;
    border: none;
    cursor: pointer;
    font-size: 30px;
    font-weight: 700;
    background-color: var(--colorGreen);
    color: black;
    border-radius: 50px;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* texto */
.textT{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 10px;
}

.textT p{
    width: 90%;
    font-size: 18px;
}

@media only screen and (max-width: 950px) {
    .contBack{
        padding: 20px;
    }
    .imgBack img{
        width: 90%;
        height: auto;
        object-fit: cover;
    }
    .textBack p {
        font-size: 15px;
        text-align: center;
    }
    .titleApart h3{
        font-size: 50px;
    }
    .titleInv {
        padding-left: 20px;
        justify-content: center;
    }
    .titleInv h1 {
        font-size: 40px;
    }
    .contInfo {
        flex-direction: column;
        gap: 20px;
    }
    .imgInfo,
    .contTextInfo {
        width: 100%;
    }
    .tInfo h2 {
        font-size: 32px;
    }
    .textInfo {
        margin-left: 0;
        text-align: center;
    }
    .contCredito {
        flex-direction: column;
        gap: 20px;
    }
    .imgCred,
    .contTextCredInfo {
        width: 100%;
    }
    .tCred h2 {
        font-size: 32px;
    }
    .textCred {
        margin-right: 0;
        text-align: center;
    }
    .contPago {
        flex-direction: column;
        gap: 20px;
    }
    .imgPago,
    .contTextPago {
        width: 100%;
    }
    .tPago h2 {
        font-size: 32px;
    }
    .textPago {
        margin-left: 0;
        text-align: center;
    }
    .buttonPago a button {
        width: 200px;
        height: 60px;
        font-size: 24px;
    }
    .contApartar {
        flex-direction: column;
        gap: 20px;
    }
    .imgApartar,
    .contTextApartar {
        width: 100%;
    }
    .tApartar h2 {
        font-size: 32px;
    }
    .textApartar {
        margin-right: 0;
        text-align: center;
    }
    .buttonApartar a button {
        width: 200px;
        height: 60px;
        font-size: 24px;
    }
    .textT p {
        font-size: 16px;
        text-align: center;
    }
}

@media only screen and (max-width: 600px){
    .contBack {
        padding: 10px;
    }
    .imgBack img {
        width: 100%;
        height: auto;
    }
    .textBack p {
        font-size: 13px;
    }
    .titleApart h3{
        font-size: 40px;
    }
    .titleInv h1 {
        font-size: 28px;
        text-align: center;
    }
    .tInfo h2 {
        font-size: 24px;
        text-align: center;
    }
    .textInfo {
        margin-left: 0;
        padding: 0 10px;
    }
    .tCred h2 {
        font-size: 24px;
        text-align: center;
    }
    .textCred {
        margin-right: 0;
        padding: 0 10px;
    }
    .tPago h2 {
        font-size: 24px;
        text-align: center;
    }
    .textPago {
        margin-left: 0;
        padding: 0 10px;
    }
    .buttonPago a button {
        width: 180px;
        height: 50px;
        font-size: 20px;
    }
    .tApartar h2 {
        font-size: 24px;
        text-align: center;
    }
    .textApartar {
        margin-right: 0;
        padding: 0 10px;
    }
    .buttonApartar a button {
        width: 180px;
        height: 50px;
        font-size: 20px;
    }
    .textT p {
        font-size: 14px;
    }
}

@media only screen and (max-width: 414px){
    .titleInv h1{
        font-size: 30px;
    }
    .titleApart h3{
        font-size: 30px;
    }
}