/* =====================================================
   MC ALL VIDEO 3.0
===================================================== */

.mcav{
    position:relative;
    display:block;
    width:100%;
    overflow:hidden;
}

.mcav-thumb{
    display:block;
    width:100%;
    height:auto;
}

.mcav-player{
    display:none;
    width:100%;
}

.mcav-player iframe,
.mcav-player video{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    border:0;
}

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

.mcav-badge{

    position:absolute;

    top:16px;
    right:0;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:10px 18px;

    border:0;
    border-radius:8px 0 0 8px;

    background:rgba(212,0,0,.82);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    box-shadow:0 6px 16px rgba(0,0,0,.25);

    color:#fff;

    font-size:13px;
    font-weight:700;
    letter-spacing:.04em;

    cursor:pointer;

    z-index:20;

    overflow:hidden;

    transition:
        width .22s ease,
        padding .22s ease,
        background-color .22s ease,
        box-shadow .22s ease;

}

.mcav-badge:hover{

    background:#b80000;

    box-shadow:0 8px 20px rgba(0,0,0,.35);

}

.mcav-badge-icon{

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

    flex:0 0 auto;

}

.mcav-badge-icon svg{

    width:18px;
    height:18px;

}

.mcav-badge-text{

    white-space:nowrap;

    overflow:hidden;

    max-width:80px;

    opacity:1;

    transition:
        opacity .16s ease,
        max-width .22s ease,
        margin .22s ease;

}

.mcav-open .mcav-thumb{

    display:none;

}

.mcav-open .mcav-player{

    display:block;

}

.mcav-open .mcav-badge{

    width:44px;

    padding:10px;

}

.mcav-open .mcav-badge-text{

    opacity:0;

    max-width:0;

    margin:0;

}

@media (max-width: 768px) {

    .mcav .mcav-badge {
        position: absolute !important;

        top: 12px !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;

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

        width: auto !important;
        height: auto !important;

        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;

        margin: 0 !important;

        padding: 8px 14px !important;

        border: 0 !important;
        border-radius: 8px 0 0 8px !important;

        background: rgba(212, 0, 0, .82) !important;
        color: #fff !important;

        font-family: inherit !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        text-align: center !important;
        white-space: nowrap !important;

        box-shadow: 0 6px 16px rgba(0, 0, 0, .25) !important;

        cursor: pointer !important;

        z-index: 20 !important;

        overflow: hidden !important;

        -webkit-appearance: none !important;
        appearance: none !important;

        box-sizing: border-box !important;
    }

    .mcav .mcav-badge-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 18px !important;
        height: 18px !important;

        flex: 0 0 18px !important;
    }

    .mcav .mcav-badge-icon svg {
        display: block !important;

        width: 18px !important;
        height: 18px !important;

        margin: 0 !important;
    }

    .mcav .mcav-badge-text {
        display: inline-block !important;

        width: auto !important;
        max-width: 80px !important;

        margin: 0 !important;

        opacity: 1 !important;

        overflow: hidden !important;

        white-space: nowrap !important;
    }

}

@media (max-width: 768px) {

    .mcav.mcav-open .mcav-badge-text {
        opacity: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        width: 0 !important;
    }

}