.kpvh,
.kpvh * { box-sizing: border-box; }

.kpvh {
    position: relative !important;
    width: 100% !important;
    height: var(--kpvh-height, 100svh) !important;
    min-height: var(--kpvh-height, 100svh) !important;
    overflow: hidden !important;
    background: #000 !important;
    isolation: isolate;
}

.kpvh__media,
.kpvh__overlay,
.kpvh__center {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.kpvh__media { z-index: 0; overflow: hidden !important; background: #000; }

.kpvh__video,
.kpvh__youtube,
.kpvh__image,
.kpvh__poster {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    pointer-events: none !important;
    display: block !important;
}

.kpvh__image {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Poster prioritario para LCP. Permanece debajo del video y evita un fondo negro. */
.kpvh__poster {
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.kpvh__video,
.kpvh__youtube {
    z-index: 1 !important;
    opacity: 0;
}

.kpvh.is-bg-playing .kpvh__video,
.kpvh.is-bg-playing .kpvh__youtube {
    opacity: 1;
}

/* YouTube needs overscan to behave as cover for 16:9 inside arbitrary viewports. */
.kpvh__youtube {
    width: max(100vw, calc(var(--kpvh-height, 100svh) * 1.7777778)) !important;
    height: max(var(--kpvh-height, 100svh), calc(100vw * 0.5625)) !important;
}

.kpvh__overlay {
    z-index: 1;
    background: var(--kpvh-overlay, #000);
    opacity: var(--kpvh-overlay-opacity, .18);
    pointer-events: none;
}

.kpvh__center {
    z-index: 2;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none;
}

.kpvh__play {
    width: var(--kpvh-btn-size, 92px) !important;
    height: var(--kpvh-btn-size, 92px) !important;
    min-width: var(--kpvh-btn-size, 92px) !important;
    min-height: var(--kpvh-btn-size, 92px) !important;
    border-radius: 999px !important;
    border: var(--kpvh-border-width, 0px) solid var(--kpvh-border, #ff9418) !important;
    background: var(--kpvh-btn-bg, #ff9418) !important;
    color: var(--kpvh-icon, #fff) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease !important;
    box-shadow: 0 10px 35px rgba(0,0,0,.28) !important;
    line-height: 1 !important;
}

.kpvh__play:hover,
.kpvh__play:focus-visible {
    background: var(--kpvh-btn-bg-hover, #fff) !important;
    color: var(--kpvh-icon-hover, #ff9418) !important;
    transform: scale(1.06);
    outline: none;
}

.kpvh__play svg {
    width: 42% !important;
    height: 42% !important;
    fill: currentColor !important;
    display: block !important;
    transform: translateX(6%);
}


/* Evita FOUC: el modal permanece totalmente oculto hasta que JS lo prepara. */
.kpvh__modal[hidden],
.kpvh__modal:not(.is-ready) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.kpvh__modal {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 2147483646 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: clamp(16px, 3vw, 44px) !important;
    border: 0 !important;
    transform: none !important;
    translate: none !important;
    overflow: hidden !important;
    isolation: isolate !important;
    contain: none !important;
    background: color-mix(in srgb, var(--kpvh-popup-bg, #000) calc(var(--kpvh-popup-opacity, .92) * 100%), transparent) !important;
}

@supports not (background: color-mix(in srgb, #000 50%, transparent)) {
    .kpvh__modal { background: rgba(0,0,0,.92) !important; }
}

.kpvh__modal.is-open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.kpvh__modal-inner {
    position: relative !important;
    flex: 0 0 auto !important;
    width: min(94vw, calc((100dvh - 88px) * 1.7777778), 1280px) !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    max-width: 1280px !important;
    max-height: calc(100dvh - 88px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
    overflow: hidden !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.55) !important;
    z-index: 1 !important;
}

.kpvh__popup-media,
.kpvh__popup-media iframe,
.kpvh__popup-media video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: block !important;
    background: #000 !important;
    transform: none !important;
}

.kpvh__popup-media video {
    object-fit: contain !important;
    object-position: center center !important;
}

.kpvh__close {
    position: fixed !important;
    top: max(14px, env(safe-area-inset-top)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
    font: 300 38px/1 Arial, sans-serif !important;
    padding: 0 0 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 2147483647 !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

html.kpvh-modal-open,
body.kpvh-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

@media (max-width: 767px) {
    /*
     * En móvil el hero siempre conserva un lienzo horizontal 16:9
     * y ocupa todo el ancho real de la pantalla. De esta forma el
     * video no se convierte en una composición vertical ni depende
     * de la altura configurada para escritorio.
     */
    .kpvh {
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }

    .kpvh__media,
    .kpvh__overlay,
    .kpvh__center {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .kpvh__video,
    .kpvh__youtube,
    .kpvh__image,
    .kpvh__poster {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        transform: none !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .kpvh__play {
        width: var(--kpvh-btn-size-mobile, 76px) !important;
        height: var(--kpvh-btn-size-mobile, 76px) !important;
        min-width: var(--kpvh-btn-size-mobile, 76px) !important;
        min-height: var(--kpvh-btn-size-mobile, 76px) !important;
    }

    .kpvh__modal {
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: 12px !important;
    }

    .kpvh__modal-inner {
        width: min(calc(100vw - 24px), calc((100dvh - 72px) * 1.7777778)) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 72px) !important;
        aspect-ratio: 16 / 9 !important;
    }

    .kpvh__close {
        top: max(10px, env(safe-area-inset-top)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 34px !important;
    }
}