/* ==========================================================================
   Vídeo institucional (YouTube) sobre faixa cinza
   ========================================================================== */

.video-institucional {
  margin: 140px 0 0;
  padding: 0 clamp(12px, 2.5vw, 40px);
  overflow: hidden;
}
.video-institucional__palco {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  container-type: inline-size;
}
/* Faixa cinza de ponta a ponta, começando um pouco abaixo do topo do vídeo */
.video-institucional__faixa {
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  top: 2.93cqw;
  bottom: 0;
  background: var(--cinza);
}
.video-institucional__moldura {
  position: relative;
  z-index: 1;
  width: 62%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: clamp(20px, 2.6cqw, 36px);
  overflow: hidden;
  background: var(--roxo);
  box-shadow: 0 18px 40px rgba(30, 20, 51, .25);
}
.video-institucional__moldura iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-institucional__respiro {
  height: clamp(48px, 7cqw, 100px);
}

@media (max-width: 768px) {
  /* Vídeo de ponta a ponta, sem faixa cinza e sem espaçamentos */
  .video-institucional {
    margin: 0;
    padding: 0;
  }
  .video-institucional__faixa,
  .video-institucional__respiro {
    display: none;
  }
  .video-institucional__moldura {
    width: 100%;
    border-radius: 0;
  }
}