/* Versão mínima do Font Awesome para ícones essenciais */
.fas {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

/* Ícones específicos usados no site */
.fa-play:before {
    content: "\f04b";
}

.fa-pause:before {
    content: "\f04c";
}

.fa-volume-up:before {
    content: "\f028";
}

/* Definição da fonte Font Awesome */
@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff2') format('woff2'),
         url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff') format('woff'),
         url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.ttf') format('truetype');
}

/* ===========================
   Video/Layout Hotfix (by Elio)
   Objetivo: impedir que <video> e <iframe> fiquem gigantes ou fora do lugar,
   mantendo proporção responsiva. Seguro para coexistir com Font Awesome.
   =========================== */
.video-wrap,
.video-box,
.player,
.media,
.figure-video,
.video-container {
  max-width: 960px;           /* ajuste conforme seu layout */
  margin: 0 auto;             /* centraliza no container */
  position: relative;
  aspect-ratio: 16 / 9;       /* mantém proporção */
}

/* HTML5 <video> */
.video-wrap video,
.player video,
.media video,
.figure-video video,
.video-container > video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;        /* use 'cover' se preferir preencher cortando bordas */
  max-width: 100%;
}

/* Iframes (YouTube/Vimeo, etc.) */
.video-wrap iframe,
.video-box iframe,
.player iframe,
.media iframe,
.figure-video iframe,
.video-container > iframe {
  position: absolute;
  inset: 0;                   /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Restrições globais (suaves) */
video, iframe {
  max-width: 100%;
}

/* Neutraliza estilos que baguncem a posição/tamanho do player */
video, iframe {
  transform: none !important;
  left: auto !important;
  top: auto !important;
}

/* Caso use posicionamento absoluto no vídeo, garanta referencial na fonte */
.video-abs-parent { position: relative; }
.video-abs {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(100%, 960px);
  height: auto;
}