.card-image {
    width: 100%;
    height: auto;
    position: relative;
    /* overflow: hidden; */
    margin-bottom: 64px;
}

.card-image>.img {
    width: 100%;
    height: auto;
    /* position: absolute; */
    right: 0;
}

.card-image>.circle {
    position: absolute;
    left: 0;
    display: none;
}

.card-image>.title {
    position: absolute;
    left: 100px;
    top: 50%;
    display: none;
    transform: translateY(-50%);
}

.info-container>.info {
    display: flex;
    margin-bottom: 78px;
    width: 70%;
    margin: auto;
    margin-bottom: 60px;
}

.info-container>.info>.section-title {
    /* padding-left: 306px; */
    /* margin-right: 86px; */
    width: 32%;
}

.info>.text {
    font-style: normal;
    font-weight: 400;
    /* margin-top: 20px; */
    font-size: 15px;
    line-height: 22px;
    width: 70%;
    /* width: fit-content; */
    margin-left: 17px;
    color: #545454;
    /* width: 500px; */
    margin-top: 20px;
    /* margin-left: -110px; */
}

.info-container-image {
    display: flex;
    margin-top: 80px;
    height: auto;
}

.info-container-image>.image-container {
    position: relative;
    height: 454px;
    width: 58%;
    background-image: url(/files/cardMiddle.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center right 40%;
    /* margin-right: 86px; */
}

.info-container-image>.image-container>.circle {
    height: 97px;
    width: 97px;
    border-radius: 50%;
    background: var(--main-color);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: -1%;
    top: -53.5px;
}

.info-container-image>.info>.section-title,
.info-container-margin>.info>.section-title {
    margin-bottom: 23px;
    width: 31%;
    /* margin-top: -14px; */
    margin-left: 17px;
}

.points-gain {
    width: 70%;
    max-width: 450px;
    height: 52px;
    background: var(--main-color);
    color: #fff;
    padding-left: 45px;
    padding-right: 45px;
    font-weight: 700;
    font-size: 15px;
    line-height: 52px;
    border-radius: 55px;
    margin-top: 28px;
}

.info-container-margin {
    /* margin: 76px 0 77px 612px; */
}

.textGaviotas {
    margin-top: 25px;
}

.infoComoSumar {
    display: flex;
    flex-direction: column;
    margin: 2% 3%;
    height: auto;
    width: 42%;
}

#comoCanjearTusGaviotas {
    display: flex;
    width: 67%;
    margin: auto;
    margin-top: 70px;
    margin-bottom: 100px;
}

@media screen and (max-width: 768px) {
    .page-content-header {
        margin-bottom: 20px;
        margin-top: 40px;
    }
    .info-container>.info {
        flex-direction: column;
        width: 90%;
        margin: 0px auto;
        margin-bottom: 40px;
    }
    .info-container>.info>.section-title {
        width: 100%;
        margin-bottom: 10px;
    }
    .section-title>.top-line {
        border-radius: 20px;
        margin-bottom: 10px;
    }
    .info-container-image {
        flex-direction: column;
    }
    .info-container-image>.image-container {
        width: 100%;
    }
    .info.infoComoSumar {
        width: 90%;
        margin: 0pc auto;
    }
    .info-container-image>.info>.section-title,
    .info-container-margin>.info>.section-title {
        width: 100%;
        margin-top: 21px;
        margin-left: 0px;
    }
    .info>.text {
        width: 80%;
        margin: 0px;
        font-size: 13px;
        line-height: 19px;
    }
    .points-gain {
        padding: 0px;
        width: 90%;
        padding-left: 5%;
        padding-right: 5%;
        height: 50px;
        text-align: center;
        line-height: 54px;
        font-size: 12px;
        margin-top: 20px;
    }
    div#comoCanjearTusGaviotas {
        flex-direction: column;
        width: 90%;
    }
    .card-image>.img {
        margin-top: -18vw;
    }
}