/*=========================================================
=                    CALL TO ACTION
=========================================================*/

.cta{

    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background: #0B1F45;

    scroll-margin-top:120px;


    /* Cuando tengas la imagen reemplaza por:
    background:
    linear-gradient(rgba(11,31,69,.90), rgba(11,31,69,.90)),
    url('../img/backgrounds/cta-bg.jpg') center center/cover no-repeat;
    */

    color: #ffffff;

}

.cta::before{

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(circle at top right,
        rgba(241,90,36,.10),
        transparent 45%);

    pointer-events: none;

}

.cta .container{

    position: relative;

    z-index: 2;

}

/*=========================================================
=                    BADGE
=========================================================*/

.cta .section-badge{

    display: inline-flex;

    align-items: center;

    padding: 10px 22px;

    border-radius: 50px;

    background: rgba(255,255,255,.10);

    border: 1px solid rgba(255,255,255,.15);

    color: #F15A24;

    font-size: .85rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    backdrop-filter: blur(6px);

}

/*=========================================================
=                    TITLE
=========================================================*/

.cta-title{

    margin: 25px 0;

    font-size: 54px;

    font-weight: 800;

    line-height: 1.15;

    color: #ffffff;

    max-width: 700px;

}

/*=========================================================
=                    TEXT
=========================================================*/

.cta-text{

    max-width: 700px;

    font-size: 18px;

    line-height: 1.9;

    color: rgba(255,255,255,.88);

    margin-bottom: 0;

}

/*=========================================================
=                    BUTTON AREA
=========================================================*/

.cta .text-lg-end{

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-end;

}

.cta .btn-primary-custom{

    min-width:260px;

    min-height:58px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    font-size:16px;

    font-weight:700;

    letter-spacing:.6px;

    box-shadow:0 18px 40px rgba(0,0,0,.22);

    transition:all .35s ease;

}

.cta .btn-primary-custom:hover{

    transform: translateY(-4px);

}

/*=========================================================
=                    PHONE
=========================================================*/

.cta-phone{

    margin-top: 32px;

}

.cta-phone a{

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #ffffff;

    text-decoration: none;

    font-size: 24px;

    font-weight: 700;

    transition: .30s ease;

}

.cta-phone a:hover{

    color: #F15A24;

}

.cta-phone i{

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #F15A24;

    color: #ffffff;

    font-size: 18px;

    transition: .30s ease;

}

.cta-phone a:hover i{

    transform: rotate(-12deg) scale(1.08);

}

/*=========================================================
=                    RESPONSIVE
=========================================================*/

@media (max-width:991px){

    .cta{

        padding: 90px 0;

        text-align: center;

    }

    .cta-title{

        font-size: 42px;

        max-width: 100%;

    }

    .cta-text{

        max-width: 100%;

    }

    .cta .text-lg-end{

        align-items: center;

        margin-top: 45px;

    }

}

@media (max-width:767px){

    .cta{

        padding: 70px 0;

    }

    .cta-title{

        font-size: 34px;

    }

    .cta-text{

        font-size: 16px;

        line-height: 1.8;

    }

    .cta-phone a{

        font-size: 20px;

    }

    .cta .btn-primary-custom{

        width: 100%;

        max-width: 320px;

    }

}