.vfl-wrapper{
    position:relative;
    width:100%;
    aspect-ratio:var(--vfl-aspect-ratio, 16 / 9);
    overflow:hidden;
}

.vfl-wrapper iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
}

/* --- Recorte para llenar la caja --------------------------------------- */

/*
 * El reproductor tiene una proporción fija, así que dentro de una caja con
 * otra forma deja franjas. Aquí se agranda hasta cubrirla y se recorta lo que
 * sobra, con la misma fórmula que usa object-fit: cover.
 *
 * Hacen falta unidades de consulta de contenedor para poder medir el alto
 * desde una anchura y viceversa. Donde no existan, el bloque entero se ignora
 * y el vídeo se ve completo, que es la degradación correcta.
 */
@supports (width: 1cqw){

    .vfl-wrapper.vfl-cover{
        container-type:size;
    }

    .vfl-wrapper.vfl-cover iframe{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        width:max(100cqw, calc(100cqh * (var(--vfl-aspect-ratio, 16 / 9))));
        height:max(100cqh, calc(100cqw / (var(--vfl-aspect-ratio, 16 / 9))));
        max-width:none;
    }
}

/* --- Portada con carga diferida ---------------------------------------- */

.vfl-facade-button{
    display:block;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
    color:inherit;
    font:inherit;
}

.vfl-facade-poster{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.vfl-facade-overlay{
    position:absolute;
    inset:0;
    background:var(--vfl-overlay, transparent);
    transition:background .2s ease;
}

.vfl-play{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    display:flex;
    align-items:center;
    justify-content:center;
    width:var(--vfl-play-size, 68px);
    height:var(--vfl-play-size, 68px);
    border-radius:50%;
    background:var(--vfl-play-background, rgba(0, 0, 0, .65));
    color:var(--vfl-play-color, #fff);
    transition:transform .2s ease, background .2s ease;
}

.vfl-play svg{
    width:45%;
    height:45%;
    fill:currentColor;
    /* El triángulo pesa a la izquierda; lo compensamos para que se vea centrado. */
    margin-left:8%;
}

.vfl-facade-button:hover .vfl-play,
.vfl-facade-button:focus-visible .vfl-play{
    transform:translate(-50%, -50%) scale(1.08);
}

.vfl-facade-button:focus-visible{
    outline:2px solid var(--vfl-play-color, #fff);
    outline-offset:-4px;
}

@media (prefers-reduced-motion: reduce){
    .vfl-play,
    .vfl-facade-overlay{
        transition:none;
    }

    .vfl-facade-button:hover .vfl-play,
    .vfl-facade-button:focus-visible .vfl-play{
        transform:translate(-50%, -50%);
    }
}

/* --- Editor ------------------------------------------------------------- */

.vfl-video-placeholder{
    padding:24px;
    text-align:center;
    border:1px dashed #c3c4c7;
    color:#50575e;
    font-size:13px;
}