/* ==========================================================
   Vídeo de background — largura 100%, altura 360px
   O vídeo cobre TODA a área da div; o que sobra é cortado.
   ========================================================== */

.video-box {
  width: 100%;
  height: 360px;
  position: relative;   /* referência para o vídeo posicionado */
  overflow: hidden;     /* corta o que passar da div */
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.video-box__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);   /* centralizado nos dois eixos */
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* preenche a div toda, cortando */
  object-position: center center;     /* qual parte do vídeo fica visível */
  display: block;
  border: 0;
  outline: 0;
  pointer-events: none;               /* o vídeo não bloqueia cliques */
}

/* Conteúdo por cima do vídeo: coloque dentro de .video-box__conteudo */
.video-box__conteudo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* Alternativa: mostra o vídeo inteiro, com sobra nas laterais.
   <div class="video-box video-box--contain"> */
.video-box--contain .video-box__video {
  object-fit: contain;
}

/* Altura por breakpoint (opcional) */
@media (max-width: 768px) {
  .video-box { height: 260px; }
}

@media (max-width: 480px) {
  .video-box { height: 200px; }
}