/* Hero inline */

.c-hero__info{
    margin-top: var(--section-y);
}

.c-hero__info-description{
    font-size: clamp(1.8rem, 1.5vw, 2.1rem);
    line-height: 1.4;
    margin-top: 20px;
}

.c-hero__info-title{
    font-size: clamp(3.7rem, 4.17vw, 6rem);
}

.c-hero__info-text{
    margin-top: 22px;
}

.c-hero__imgs-img{
    position: relative;
    height: auto;
    width: 100%;
}

.c-hero__imgs{
    max-width: 360px;
    position: relative;
    margin-left: 40px;
}

.c-hero__imgs-img--front {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    left: -40px;
    width: 230px;
    aspect-ratio: 374/337;
    z-index: 1;
}

.c-hero__imgs-img--front:before{
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: -15px;
    left: 15px;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    filter: blur(20px);
    opacity: 0.3;
}

.c-hero__imgs-img--back {
    aspect-ratio: 547/480;
}

.c-hero__btn{
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-lightest);
    padding: 0.87em 1.3em 0.8em;
    border-radius: 30px;
    line-height: 1;
    vertical-align: middle;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    background-color: var(--color-primary);
    transition: background-color 400ms ease-in-out, color 400ms ease-in-out;
    margin-top: 1.5em;
}


.c-hero__btn:hover{
    background-color: var(--color-secondary);
}

/* ********************** de Mobile a TABLET ********************** */

@media (min-width: 768px) {

    .c-hero__imgs{
        margin-left: auto;
        margin-right: auto;
    }

}


/* ********************** de Tablet a DESKTOP ********************** */

@media (min-width:980px){

    .c-hero{
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        gap: 100px;
    }

    .c-hero__info{
        width: 50%;
        margin-top: 0;
    }

    .c-hero__imgs{
        max-width: none;
        width: 50%;
        margin: 0;
    }

    .c-hero__imgs-img--front {
        aspect-ratio: 40/49;
        width: 70%;
    }

    .c-hero__imgs-img--front:before{
        left: 20px;
    }

    .c-hero__imgs-img--back {
        aspect-ratio: 55/70;
    }

}


/* ********************** de Desktop a DESKTOP 2 ********************** */

@media (min-width: 1200px) {

    .c-hero{
        position: relative;
    }

    .c-hero:before{
        content: "";
        display: block;
        position: absolute;
        left: var(--space-x);
        top: 80px;
        height: 100%;
        width: 1px;
        background-color: var(--color-darkgreen);
        opacity: .17
    }

    .c-hero__info{
        padding-left: 50px;
    }
}


/* ********************** de Desktop 2 a HD ********************** */

@media (min-width: 1400px) {

    .c-hero{
        gap: 140px;
    }

    .c-hero__imgs{
        margin-right: -30px;
    }

}