@charset "utf-8";

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

.video-cta{
    position:relative;
    width:100%;
    overflow:hidden;

    padding:100px 0;

    background:#021b6d;
    color:#fff;
}

/* Fondo decorativo */

.video-bg{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(200,155,60,.18) 0%,
            transparent 45%
        );
}

/* Contenedor */

.video-cta .container{
    position:relative;
    z-index:2;

    width:100%;
}

/*=====================================*
* CONTENIDO
*=====================================*/

.video-content{
    width:100%;
    text-align:center;
}

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

.video-content .section-badge{
    display:inline-flex;

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

    gap:10px;

    margin-bottom:24px;
    padding:12px 22px;

    border-radius:50px;

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

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

    color:#fff;

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

    letter-spacing:.06em;
    text-transform:uppercase;
}

.video-content .section-badge::before{
    content:"";

    width:8px;
    height:8px;

    flex:0 0 8px;

    border-radius:50%;

    background:#c89b3c;

    box-shadow:0 0 10px rgba(200,155,60,.5);
}

/*=====================================*
* TITULO
*=====================================*/

.video-content h2{
    width:100%;
    max-width:850px;

    margin:0 auto 22px;

    color:#fff;

    font-size:clamp(2.2rem,5vw,3.6rem);

    font-weight:800;

    line-height:1.12;

    letter-spacing:-.03em;
}

/*=====================================*
* DESCRIPCIÓN
*=====================================*/

.video-content p{
    width:100%;
    max-width:700px;

    margin:0 auto 50px;

    padding:0 10px;

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

    font-size:1.08rem;

    line-height:1.8;
}

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

.video-box{
    position:relative;

    width:100%;
    max-width:900px;

    margin:0 auto;

    overflow:hidden;

    border-radius:22px;

    background:#000;

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

    isolation:isolate;
}

/* Capa oscura */

.video-box::before{
    content:"";

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    background:linear-gradient(
        rgba(0,0,0,.08),
        rgba(0,0,0,.28)
    );

    pointer-events:none;

    z-index:1;
}

/* Contenedor del video */

.cta-video{
    display:block;

    width:100%;
    height:auto;

    aspect-ratio:16 / 9;

    object-fit:cover;

    margin:0;
    padding:0;
}

/* Video real */

.cta-video-player{
    display:block;

    width:100%;
    height:100%;

    max-width:100%;

    object-fit:cover;

    margin:0;
    padding:0;

    border:0;
}

/*=====================================*
* BOTÓN PLAY
*=====================================*/

.video-play{
    position:absolute;

    top:50%;
    left:50%;

    z-index:5;

    display:flex;

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

    width:84px;
    height:84px;

    padding:0;

    border:0;
    border-radius:50%;

    background:#c89b3c;

    color:#fff;

    font-size:2rem;

    cursor:pointer;

    transform:translate(-50%,-50%);

    transition:
        transform .30s ease,
        background .30s ease,
        box-shadow .30s ease;
}

.video-play::after{
    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(200,155,60,.45);

    animation:playPulse 2.2s infinite;
}

.video-play:hover{
    transform:
        translate(-50%,-50%)
        scale(1.08);

    background:#b4872c;

    box-shadow:
        0 10px 30px rgba(200,155,60,.35);
}

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

.video-btn{
    position:relative;

    display:inline-flex;

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

    gap:.6rem;

    margin-top:40px;

    padding:16px 38px;

    border-radius:50px;

    background:#a87822;

    color:#fff;

    font-size:15px;
    font-weight:700;

    text-decoration:none;

    overflow:hidden;

    box-shadow:
        0 10px 25px rgba(168,120,34,.25);

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

/*=====================================*
* EFECTO BRILLO
*=====================================*/

.video-btn::before{
    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:80%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition:.6s ease;

    pointer-events:none;
}

.video-btn:hover::before{
    left:120%;
}

/*=====================================*
* HOVER
*=====================================*/

.video-btn:hover{
    transform:translateY(-5px);

    background:#8a6518;

    box-shadow:
        0 18px 40px rgba(168,120,34,.35);
}

/*=====================================*
* CLICK
*=====================================*/

.video-btn:active{
    transform:
        translateY(-1px)
        scale(.98);
}

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

.video-btn{
    animation:ctaPulse 3s infinite;
}

@keyframes ctaPulse{

    0%,100%{
        box-shadow:
            0 10px 25px rgba(168,120,34,.25);
    }

    50%{
        box-shadow:
            0 10px 35px rgba(168,120,34,.45);
    }
}

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

@keyframes playPulse{

    0%{
        transform:scale(.90);
        opacity:.8;
    }

    70%{
        transform:scale(1.25);
        opacity:0;
    }

    100%{
        transform:scale(1.25);
        opacity:0;
    }
}

/*=====================================*
* ACCESIBILIDAD
*=====================================*/

@media(prefers-reduced-motion:reduce){

    .video-btn,
    .video-play::after{
        animation:none;
    }

    .video-btn,
    .video-play{
        transition:none;
    }
}

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

@media(max-width:992px){

    .video-cta{
        padding:80px 0;
    }

    .video-box{
        width:100%;
        max-width:900px;
    }
}

/*=====================================*
* MOBILE
*=====================================*/

@media(max-width:768px){

    .video-cta{
        width:100%;
        max-width:100%;

        padding:65px 0;

        overflow:hidden;
    }

    .video-cta .container{
        width:100%;
        max-width:100%;

        margin:0;
        padding-left:15px;
        padding-right:15px;
    }

    .video-content{
        width:100%;
        max-width:100%;
    }

    /* BADGE */

    .video-content .section-badge{
        margin-bottom:20px;

        padding:10px 17px;

        font-size:.78rem;
    }

    /* TITULO */

    .video-content h2{
        width:100%;

        margin-bottom:18px;

        padding:0 5px;

        font-size:2.1rem;

        line-height:1.15;
    }

    /* TEXTO */

    .video-content p{
        width:100%;

        margin-bottom:32px;

        padding:0 5px;

        font-size:.98rem;

        line-height:1.7;
    }

    /* VIDEO */

    .video-box{
        width:100%;
        max-width:100%;

        margin-left:0;
        margin-right:0;

        border-radius:15px;

        transform:none;
    }

    .cta-video{
        width:100%;
        max-width:100%;

        height:auto;

        aspect-ratio:16 / 9;
    }

    .cta-video-player{
        width:100%;
        max-width:100%;

        height:100%;

        object-fit:cover;
    }

    /* PLAY */

    .video-play{
        width:62px;
        height:62px;

        font-size:1.35rem;
    }

    /* CTA */

    .video-btn{
        margin-top:30px;

        padding:14px 28px;

        font-size:14px;
    }
}

/*=====================================*
* MOBILE PEQUEÑO
*=====================================*/

@media(max-width:400px){

    .video-cta{
        padding:55px 0;
    }

    .video-cta .container{
        padding-left:12px;
        padding-right:12px;
    }

    .video-content h2{
        font-size:1.85rem;
    }

    .video-content p{
        font-size:.94rem;
    }

    .video-box{
        border-radius:12px;
    }

    .video-play{
        width:55px;
        height:55px;

        font-size:1.15rem;
    }

    .video-btn{
        width:auto;
        max-width:100%;

        padding:13px 24px;
    }
}