/* Keep both media types within the existing desktop/mobile image area. */
.home-creemos .pn-creemos-media { overflow: hidden; }
.home-creemos .pn-creemos-media > mux-player {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    --media-object-fit: cover;
    --media-object-position: center;
    --controls: none;
    pointer-events: none;
    --primary-color: #fff;
    --accent-color: #f5a900;
}

.home-creemos .pn-video-sound {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 45%);
    border-radius: 50%;
    background: rgb(0 0 0 / 45%);
    color: #fff;
    cursor: pointer;
    line-height: 1;
}
.home-creemos .pn-video-sound[hidden] { display: none; }
.home-creemos .pn-video-sound:hover { background: rgb(0 0 0 / 70%); }
.home-creemos .pn-video-sound:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pn-video-sound .pn-sound-on,
.pn-video-sound[aria-pressed="true"] .pn-sound-off { display: none; }
.pn-video-sound[aria-pressed="true"] .pn-sound-on { display: initial; }

.home-creemos .pn-video-cover {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.home-creemos .pn-video-playing .pn-video-cover { visibility: hidden; }
.home-creemos .pn-video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: rgb(171 205 118 / 60%);
    opacity: 0.8;
    color: #fff;
    font: inherit;
    cursor: pointer;
    line-height: 1.4;
}
.home-creemos .pn-video-play svg { width: 36px; height: 36px; margin-left: 5px; }
.home-creemos .pn-video-play:hover { opacity: 1; }
.home-creemos .pn-video-play[hidden] { display: none; }
.home-creemos .pn-video-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.home-creemos .pn-video-dialog {
    --pn-video-ratio: 1.777778;
    position: fixed;
    inset: 0;
    width: min(1224px, calc((100vw - 32px) * .85), calc((100dvh - 32px) * var(--pn-video-ratio) * .85));
    max-width: calc(100vw - 32px);
    aspect-ratio: var(--pn-video-ratio);
    height: min(calc(1224px / var(--pn-video-ratio)), calc((100vw - 32px) / var(--pn-video-ratio) * .85), calc((100dvh - 32px) * .85));
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    line-height: 1.4;
    overflow: hidden;
}
.home-creemos .pn-video-dialog[open] { display: block; }
.pn-video-dialog::backdrop { background: rgb(0 0 0 / 80%); }
.home-creemos .pn-video-dialog mux-player {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--pn-video-ratio);
    --media-object-fit: cover;
    --primary-color: #fff;
    --secondary-color: var(--c-azul, #1D1542);
    --accent-color: var(--c-azul, #1D1542);
    --seek-backward-button: none;
    --seek-forward-button: none;
    --time-display: none;
    --duration-display: none;
    --time-range: none;
    --playback-rate-button: none;
    --captions-button: none;
    --airplay-button: none;
    --pip-button: none;
    --cast-button: none;
    --title-display: none;
}
.home-creemos .pn-video-dialog mux-player::part(bottom) {
    background: rgb(29 21 66 / 85%);
}
.home-creemos .pn-video-dialog mux-player::part(center play button) {
    border: 0;
    background: rgb(29 21 66 / 60%);
    opacity: 0.8;
}
.home-creemos .pn-video-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgb(29 21 66 / 65%);
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}
.home-creemos .pn-video-close:focus-visible { outline: 2px solid #fff; }
.home-creemos .pn-video-dialog-status {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 60px;
    z-index: 2;
    margin: 0;
    padding: 8px 12px;
    border-radius: 4px;
    background: rgb(29 21 66 / 80%);
    font: 14px/1.4 sans-serif;
}
.home-creemos .pn-video-dialog-status:empty { display: none; }

@media (hover: hover) and (pointer: fine) {
    .home-creemos .pn-video-sound {
        opacity: 0;
        pointer-events: none;
        transition: opacity 150ms ease;
    }
    .home-creemos .pn-creemos-media:hover .pn-video-sound,
    .home-creemos .pn-creemos-media:focus-within .pn-video-sound {
        opacity: 1;
        pointer-events: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .home-creemos .pn-video-sound { transition: none; }
}

.home-creemos .pn-video-dialog mux-player::part(center) {
    display: none;
}