.video-hero { position: relative; width: 100%; overflow: hidden; background-color: #000; background-size: cover; background-position: center; }
.video-hero__media { width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transition: opacity 1s ease; }
.video-hero__loader { position:absolute; top:50%; left:50%; width:40px; height:40px; margin:-20px 0 0 -20px; border:4px solid rgba(255,255,255,0.3); border-top:4px solid #fff; border-radius:50%; animation:spin 1s linear infinite; z-index:5; }
@keyframes spin{100%{transform:rotate(360deg);}}

/* Botões */
.video-hero__mute-btn, .video-hero__play-btn {
  position:absolute; bottom:20px; width:50px; height:50px; background:rgba(0,0,0,0.6);
  border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10;
}
.video-hero__mute-btn { right:20px; }
.video-hero__play-btn { left:20px; }
.video-hero__mute-btn svg, .video-hero__play-btn svg { width:24px; height:24px; color:#fff; position:absolute; transition:opacity .3s ease; }

/* Barra de progresso */
.video-hero__progress{ position:absolute; bottom:0; left:0; width:100%; overflow:hidden; background:rgba(255,255,255,0.2); z-index:9; }
.video-hero__progress-bar-buffer{width:0; height:100%; background:rgba(255,255,255,.5); position:absolute; left:0; top:0; transition:width .2s linear;}
.video-hero__progress-bar-played{width:0; height:100%; background:#fff; position:absolute; left:0; top:0; transition:width .2s linear;}

/* Overlay com transição */
.video-overlay {
  position:absolute; top:0; left:0; width:100%; height:100%;
  display:flex; justify-content:center; align-items:center;
  background:rgba(0,0,0,0.5); z-index:15;
  opacity:1; visibility:visible; transition:opacity .4s ease, visibility .4s ease;
}

.play-overlay-btn { 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    background:#ff5a5f !important; 
    color:#fff; 
    padding:15px 30px; 
    border:none; 
    font-size:1.2rem; 
    border-radius:5px; 
    cursor:pointer; 
}
.play-overlay-btn svg { color:#fff; }

/* Responsividade */
@media (min-width:1024px){.video-hero{height:80vh;} .video-hero__progress{height:5px;} }
@media (min-width:768px) and (max-width:1023px){.video-hero{height:70vh;} .video-hero__progress{height:4px;} }
@media (max-width:767px) and (orientation:portrait){.video-hero{height:50vh;} .video-hero__progress{height:3px;} }
@media (max-width:767px) and (orientation:landscape){.video-hero{height:60vh;} .video-hero__progress{height:4px;} }