/* =========================================================
   AP VIDEO SHORT — COMPONENTE COMPARTIDO V1
   Index + artículos + páginas temáticas
   ========================================================= */


.ap-video-short {

    width: 100%;

    margin:
        clamp(
            1.6rem,
            3.5vw,
            2.6rem
        )
        auto;

    display: flex;

    justify-content: center;

    clear: both;
}


.ap-video-card {

    width:
        min(
            100%,
            270px
        );

    overflow: hidden;

    border:
        1px solid
        rgba(
            1,
            21,
            71,
            .09
        );

    border-radius:
        22px;

    background:
        #ffffff;

    box-shadow:
        0 12px 34px
        rgba(
            1,
            21,
            71,
            .09
        );

    transition:
        transform .32s ease,
        box-shadow .32s ease,
        border-color .32s ease;
}


/* =========================================================
   VIDEO 9:16
   ========================================================= */

.ap-video-media {

    position: relative;

    width: 100%;

    aspect-ratio:
        9 / 16;

    overflow: hidden;

    background:
        #101010;
}


.ap-video-poster {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    padding: 0;

    border: 0;

    background:
        #101010;

    overflow: hidden;

    cursor: pointer;
}


.ap-video-poster img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit:
        cover;

    object-position:
        center;

    transform:
        scale(1.01);

    transition:
        transform .5s ease,
        filter .4s ease;
}


.ap-video-poster::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.02),
            rgba(0,0,0,.10) 55%,
            rgba(0,0,0,.34)
        );

    pointer-events:
        none;
}


/* =========================================================
   PLAY
   ========================================================= */

.ap-video-play {

    position: absolute;

    z-index: 2;

    left: 50%;

    top: 50%;

    width:
        64px;

    height:
        64px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        50%;

    background:
        rgba(
            214,
            18,
            18,
            .97
        );

    color:
        #ffffff;

    box-shadow:
        0 12px 30px
        rgba(
            0,
            0,
            0,
            .30
        );

    pointer-events:
        none;

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


.ap-video-play::before {

    content: "";

    position:
        absolute;

    inset:
        -1px;

    border:
        2px solid
        rgba(
            255,
            0,
            0,
            .38
        );

    border-radius:
        inherit;

    animation:
        apVideoPulse
        2.2s
        ease-out
        infinite;
}


.ap-video-play svg {

    position:
        relative;

    width:
        25px;

    height:
        25px;

    margin-left:
        4px;

    fill:
        currentColor;
}


@keyframes apVideoPulse {

    0% {

        opacity:
            .55;

        transform:
            scale(1);

    }


    70%,
    100% {

        opacity:
            0;

        transform:
            scale(1.48);

    }

}


/* =========================================================
   TEXTO
   ========================================================= */

.ap-video-info {

    padding:
        16px
        16px
        18px;
}


.ap-video-info span {

    display:
        block;

    margin-bottom:
        6px;

    color:
        #c91515;

    font-size:
        10.5px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.ap-video-info h4 {

    margin:
        0;

    color:
        #011547;

    font-size:
        .98rem;

    font-weight:
        750;

    line-height:
        1.42;
}


/* =========================================================
   YOUTUBE IFRAME
   ========================================================= */

.ap-video-media iframe {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    border:
        0;

    background:
        #000000;
}


/* =========================================================
   ENTRADA
   ========================================================= */

.ap-video-enhanced
.ap-video-card {

    opacity:
        0;

    transform:
        translateY(
            18px
        )
        scale(
            .99
        );
}


.ap-video-enhanced
.ap-video-card.is-visible {

    opacity:
        1;

    transform:
        translateY(
            0
        )
        scale(
            1
        );

    transition:
        opacity .58s ease,
        transform .58s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        ),
        box-shadow .32s ease,
        border-color .32s ease;
}


/* =========================================================
   INICIO
   ========================================================= */

.ap-video-home {

    width:
        100%;

    padding:
        18px
        0
        8px;
}


.ap-video-home
.ap-video-short {

    margin-top:
        0;

    margin-bottom:
        0;
}


.ap-video-home
.ap-video-card {

    width:
        min(
            100%,
            300px
        );
}


.ap-video-home-heading {

    max-width:
        760px;

    margin:
        0 auto 26px;

    text-align:
        center;
}


.ap-video-home-kicker {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        10px;

    padding:
        7px 14px;

    border-radius:
        999px;

    background:
        rgba(
            255,
            0,
            0,
            .07
        );

    color:
        #c91515;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        .04em;
}


.ap-video-home-kicker svg,
.ap-video-channel svg {

    width:
        17px;

    height:
        17px;

    fill:
        currentColor;
}


.ap-video-home-heading h3 {

    margin:
        0 0 10px;

    color:
        #011547;

    font-size:
        clamp(
            1.65rem,
            3vw,
            2.35rem
        );

    font-weight:
        800;

    line-height:
        1.15;
}


.ap-video-home-heading p {

    max-width:
        620px;

    margin:
        0 auto;

    color:
        #64748b;

    font-size:
        clamp(
            .96rem,
            1.5vw,
            1.08rem
        );

    line-height:
        1.7;
}


/* =========================================================
   BOTÓN YOUTUBE
   ========================================================= */

.ap-video-channel {

    margin-top:
        26px;

    text-align:
        center;
}


.ap-video-channel a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        11px 20px;

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

    border-radius:
        999px;

    background:
        rgba(
            255,
            0,
            0,
            .055
        );

    color:
        #b71919;

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

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


/* =========================================================
   HOVER SOLO PC
   ========================================================= */

@media
(hover: hover)
and
(pointer: fine) {

    .ap-video-card:hover {

        transform:
            translateY(
                -5px
            );

        border-color:
            rgba(
                210,
                20,
                20,
                .14
            );

        box-shadow:
            0 18px 42px
            rgba(
                1,
                21,
                71,
                .14
            );
    }


    .ap-video-enhanced
    .ap-video-card.is-visible:hover {

        transform:
            translateY(
                -5px
            )
            scale(
                1
            );
    }


    .ap-video-card:hover
    .ap-video-poster img {

        transform:
            scale(
                1.045
            );

        filter:
            brightness(
                .92
            );
    }


    .ap-video-card:hover
    .ap-video-play {

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

        background:
            #ff0000;

        box-shadow:
            0 14px 34px
            rgba(
                255,
                0,
                0,
                .24
            );
    }


    .ap-video-channel a:hover {

        transform:
            translateY(
                -2px
            );

        background:
            rgba(
                255,
                0,
                0,
                .09
            );

        box-shadow:
            0 8px 20px
            rgba(
                1,
                21,
                71,
                .08
            );
    }

}


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

@media
(max-width: 650px) {

    .ap-video-short {

        margin:
            1.45rem
            auto
            1.9rem;

    }


    .ap-video-card {

        width:
            min(
                72vw,
                245px
            );

        border-radius:
            20px;

    }


    .ap-video-home {

        padding-top:
            8px;

    }


    .ap-video-home
    .ap-video-card {

        width:
            min(
                76vw,
                270px
            );

    }


    .ap-video-home-heading {

        margin-bottom:
            22px;

        padding-inline:
            12px;

    }


    .ap-video-play {

        width:
            60px;

        height:
            60px;

    }


    .ap-video-play svg {

        width:
            23px;

        height:
            23px;

    }


    .ap-video-info {

        padding:
            14px
            14px
            16px;

    }


    .ap-video-info h4 {

        font-size:
            .94rem;

    }

}


@media
(max-width: 360px) {

    .ap-video-card {

        width:
            min(
                76vw,
                230px
            );

    }


    .ap-video-home
    .ap-video-card {

        width:
            min(
                80vw,
                250px
            );

    }

}


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

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

    .ap-video-card,
    .ap-video-poster img,
    .ap-video-play,
    .ap-video-channel a {

        transition:
            none !important;

    }


    .ap-video-play::before {

        animation:
            none !important;

    }


    .ap-video-enhanced
    .ap-video-card {

        opacity:
            1 !important;

        transform:
            none !important;

    }

}