/**********************/
/* GENERAL COMPONENTS */
/**********************/

:root {

    --naranja-color: #CC6633;
    --beige-color: #e7d0b4;
    --verde-color: #003e40;
}


.hero-buttons {

    display: flex;
}


.heading-primary,
.heading-secondary,
.heading-tertiary {

    font-weight: 700;
    letter-spacing: -0.5px;
}

.heading-secondary-green {
    font-size: 4.4rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--verde-color);

}


.heading-secondary-green-wh {
    font-size: 4.4rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #fff;

}

.-margin-b9 {

    margin-bottom: 9.6rem;
}

.-margin-b3 {

    margin-bottom: 3rem;
}

.heading-primary {

    font-size: 4.4rem;
    line-height: 1.05;
    margin-bottom: 3.2rem;
    color: #e7d0b4;
    
}

.heading-secondary {
    font-size: 4.4rem;
    line-height: 1.2;
    /*  margin-bottom: 9.6rem; */
    color: #e7d0b4;
}

.heading-tertiary {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 3.2rem;
}

.subheading {
    color: #cf711f;
    display: block;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.75px;
    margin-bottom: 1.6rem;
    text-transform: uppercase;
}


.btn,
.btn:link,
.btn:visited {
    border: none;
    font-size: 1.8rem;
    padding: 1.2rem 1.2rem;
    text-decoration: none;
    transition: all 0.5s ease;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-weight: 600;
    border-radius: 30px;
}


.btn--full:link,
.btn--full:visited {

    background-color: #CC6633;
    color: #fff;

}

.btn--full:hover,
.btn--full:active {
    background-color: #CC9933;
}


.btn--outline:link,
.btn--outline:visited {
    border: 1px solid #fff;
    /* Borde blanco */
    color: #fff;
}


.margin-right-sm {
    margin-right: 1.6rem !important;
}

.margin-botom9 {

    margin-bottom: 9.6rem;
}


.margin-botom9 {

    margin-bottom: 6.25rem;

}



@media(width >=860px) {


    .heading-secondary-green-wh {

        color: var(--verde-color);

    }


    @media(width >=1000px) {

        .btn,
        .btn:link,
        .btn:visited {
            padding: 1.6rem 3.2rem;
            font-size: 2rem;
        }

        .heading-primary {
            font-size: 5.2rem;
        }

    }


}