.heroVideo {
    position: relative;
}

    .heroVideo img {
        width: 100%;
        height: 90px;
        position: absolute;
        bottom: 0;
        left: 0;
        object-fit: fill;
    }

    .heroVideo .heroVideo__cover::-webkit-media-controls,
    .heroVideo .heroVideo__cover::-webkit-media-controls-enclosure,
    .heroVideo .heroVideo__cover::-webkit-media-controls-panel {
        display: none !important;
    }

    .heroVideo .heroVideo__mute {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: rgba(0, 0, 0, .55);
        cursor: pointer;
        transition: background .2s ease;
    }

        .heroVideo .heroVideo__mute:hover {
            background: rgba(0, 0, 0, .75);
        }

        .heroVideo .heroVideo__mute svg {
            display: block;
            width: 23px;
            height: 23px;
        }

        .heroVideo .heroVideo__mute[data-muted="true"] .heroVideo__icon--sound {
            display: none;
        }

        .heroVideo .heroVideo__mute[data-muted="false"] .heroVideo__icon--muted {
            display: none;
        }

    .heroVideo .heroVideo__volume {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 5;
        display: flex;
        flex-direction: row-reverse; /* slider abre para a esquerda do ícone */
        align-items: center;
        gap: 8px;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
    }

    .heroVideo.is-controls-visible .heroVideo__volume {
        opacity: 1;
        pointer-events: auto;
    }

    .heroVideo .heroVideo__volumeBar {
        width: 0;
        opacity: 0;
        margin: 0;
        height: 4px;
        -webkit-appearance: none;
        appearance: none;
        border-radius: 2px;
        cursor: pointer;
        outline: none;
        background: linear-gradient(to right, #8051FF var(--v, 100%), #666 var(--v, 100%));
        transition: width .2s ease, opacity .2s ease;
    }

    /* Abre ao passar o mouse ou ao focar com o teclado */
    .heroVideo .heroVideo__volume:hover .heroVideo__volumeBar,
    .heroVideo .heroVideo__volume:focus-within .heroVideo__volumeBar {
        width: 80px;
        opacity: 1;
    }

    .heroVideo .heroVideo__volumeBar::-webkit-slider-runnable-track {
        background: transparent;
        height: 4px;
    }

    .heroVideo .heroVideo__volumeBar::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 12px;
        height: 12px;
        margin-top: -4px;
        border-radius: 50%;
        background: #8051FF;
        border: 0;
    }

    .heroVideo .heroVideo__volumeBar::-moz-range-thumb {
        width: 12px;
        height: 12px;
        border: 0;
        border-radius: 50%;
        background: #8051FF;
    }

    .heroVideo .heroVideo__controls {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: min(900px, 80%); /* largura da barra; ajuste à vontade */
        margin: 0 auto; /* centraliza horizontalmente */
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 0 14px;
        box-sizing: border-box;
        color: #fff;
        font-size: 12px;
        z-index: 5;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
    }

    /* Layers acompanham os controles */
    .heroVideo .heroVideo__layer {
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
    }

    .heroVideo.is-controls-visible .heroVideo__layer {
        opacity: 1;
    }

    .heroVideo.is-controls-visible .heroVideo__controls {
        opacity: 1;
        pointer-events: auto;
    }

    .heroVideo .heroVideo__controls button {
        background: none;
        border: 0;
        padding: 0;
        color: inherit;
        cursor: pointer;
        font-size: 16px;
        line-height: 1;
    }

    .heroVideo .heroVideo__progress {
        flex: 1;
        height: 4px;
        margin: 0;
        -webkit-appearance: none;
        appearance: none;
        border-radius: 2px;
        cursor: pointer;
        outline: none;
        background: linear-gradient(to right, #8051FF var(--p, 0%), #666 var(--p, 0%));
    }

        .heroVideo .heroVideo__progress::-webkit-slider-runnable-track {
            background: transparent;
            height: 4px;
        }

        .heroVideo .heroVideo__progress::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            margin-top: -4px;
            border-radius: 50%;
            background: #8051FF;
            border: 0;
        }

        .heroVideo .heroVideo__progress::-moz-range-thumb {
            width: 12px;
            height: 12px;
            border: 0;
            border-radius: 50%;
            background: #8051FF;
        }

    .heroVideo .heroVideo__media {
        width: 100%;
        overflow: clip;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    .heroVideo .heroVideo__content {
        width: 100%;
        height: calc(100vh - 96px);
        clip-path: inset(0px);
    }

    .heroVideo .heroVideo__cover {
        width: 100%;
        height: calc(100vh - 96px);
        object-fit: cover;
        mix-blend-mode: lighten;
        transform: scale(1.03);
    }

    .heroVideo .heroVideo__play {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 23px;
        height: 23px;
    }

        .heroVideo .heroVideo__play svg {
            display: block;
        }

        .heroVideo .heroVideo__play[data-paused="true"] .heroVideo__icon--pause {
            display: none;
        }

        .heroVideo .heroVideo__play[data-paused="false"] .heroVideo__icon--play {
            display: none;
        }

/*@media (min-width:1920px) {
    .heroVideo .heroVideo__media {
        display: block;
    }*/

/* .heroVideo .heroVideo__content,
    .heroVideo .heroVideo__cover {
        height: 1080px;
    }*/
/*}*/

@media (max-width: 768px) {
    /*.heroVideo .heroVideo__content {
        height: 100%;
    }*/

    .heroVideo .heroVideo__cover {
        height: 100%;
        /*aspect-ratio: 16 / 9;*/
    }

    .heroVideo .heroVideo__controls {
        width: 92%;
    }
}

@media (max-width: 576px) {
    .heroVideo .heroVideo__content {
        height: 100%;
    }

}