@charset "utf-8";

/*==================================================
CTA
==================================================*/

.cta{

    position:relative;
    overflow:hidden;
    padding:100px 0;
    background:linear-gradient(
        135deg,
        #021b6d,
        #06318d 45%,
        #0b4db5 100%
    );

}

.cta::before{

    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.08);
    pointer-events:none;

}

/*==================================================
BOX
==================================================*/

.cta-box{

    display:grid;
    grid-template-columns:1fr .85fr;
    gap:60px;
    align-items:center;

    padding:50px;

    border-radius:28px;

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

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

}

/*==================================================
CONTENT
==================================================*/

.cta-content h2{

    margin:18px 0;
    color:#fff;
    font-size:3rem;
    line-height:1.15;

}

.cta-content p{

    max-width:560px;
    margin:0 0 35px;
    color:rgba(255,255,255,.85);
    font-size:1.08rem;
    line-height:1.8;

}

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

.cta .section-badge{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:12px 22px;

    border-radius:999px;

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

    color:#fff;

    font-size:.9rem;
    font-weight:700;

}



/*==================================================
BUTTONS
==================================================*/

.cta-actions{

    display:flex;
    flex-wrap:wrap;
    gap:16px;

}

.cta .btn-primary{

    background:#c89b3c;
    color:#fff;

}

.cta .btn-secondary{

    color:#fff;
    border:2px solid rgba(255,255,255,.7);

    transition:.25s;

}

.cta .btn-secondary:hover{

    background:#fff;
    color:#021b6d;

}

/*==================================================
VIDEO
==================================================*/

.cta-video{

    width:100%;

}

.video-placeholder{

    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;
    aspect-ratio:16/10;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.18),
        rgba(255,255,255,.06)
    );

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

    overflow:hidden;

    transition:transform .25s;

}

.video-placeholder:hover{

    transform:translateY(-4px);

}

.video-placeholder span{

    display:flex;
    justify-content:center;
    align-items:center;

    width:72px;
    height:72px;

    border-radius:50%;

    background:#c89b3c;

    color:#fff;

    font-size:2rem;

    padding-left:4px;

}


/*==================================================
ANIMACIÓN
==================================================*/

.cta-box{

    animation:ctaFade .6s ease;

}

@keyframes ctaFade{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/*==================================================
TABLET
==================================================*/

@media(max-width:992px){

    .cta{

        padding:90px 0;

    }

    .cta-box{

        grid-template-columns:1fr;
        gap:40px;

        padding:40px;

        text-align:center;

    }

    .cta-content p{

        margin-left:auto;
        margin-right:auto;

    }

    .cta-actions{

        justify-content:center;

    }

}

/*==================================================
MÓVIL
==================================================*/

@media(max-width:576px){

    .cta{

        padding:70px 0;

    }

    .cta-box{

        padding:28px 20px;
        border-radius:20px;
        gap:30px;

    }

    .cta-content h2{

        font-size:2rem;

    }

    .cta-content p{

        font-size:1rem;

    }

    .cta-actions{

        flex-direction:column;

    }

    .cta-actions a{

        width:100%;

    }

    .video-placeholder span{

        width:60px;
        height:60px;

        font-size:1.5rem;

    }

}