/* ══════════════════════════════════════════════════════════════════════════
   video.css · la fachada de clic de los vídeos (ver _includes/video.html y
   docs/assets/javascripts/video.js).

   Hasta que el usuario pulsa no se le pide nada a YouTube: se ve una miniatura
   descargada y servida desde este mismo dominio. Al pulsar, el script mete el
   iframe de youtube-nocookie con autoplay.
   ══════════════════════════════════════════════════════════════════════════ */

.md-typeset figure.video {
  position: relative; margin: 1.4rem 0; padding: 0; max-width: 100%;
  border: 1px solid var(--line); border-radius: var(--r, 16px);
  background: var(--bg3); overflow: hidden;
}
.md-typeset figure.video img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; margin: 0; background: var(--bg3);
}
.md-typeset figure.video figcaption {
  font-size: .82rem; line-height: 1.5; color: var(--txt3);
  padding: .55rem .8rem; border-top: 1px solid var(--line);
}
.md-typeset figure.video .video-boton {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; border: 0; background: rgba(11, 14, 20, .35);
  color: #fff; font: inherit; font-size: .9rem; font-weight: 700;
  cursor: pointer; transition: background .2s;
}
.md-typeset figure.video .video-boton:hover { background: rgba(11, 14, 20, .5); }
.md-typeset figure.video .video-boton:focus-visible {
  outline: 3px solid var(--amber, #f5a524); outline-offset: -3px;
}
.md-typeset figure.video .video-play {
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(245, 165, 36, .92);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  position: relative;
}
.md-typeset figure.video .video-play::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-38%, -50%);
  border-style: solid; border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #1b1b1b;
}
.md-typeset figure.video .video-etiq {
  padding: .2rem .7rem; border-radius: 999px;
  background: rgba(11, 14, 20, .6); color: #fff;
}
/* una vez encendido, fuera la fachada y el iframe ocupa el sitio de la miniatura */
.md-typeset figure.video.video-encendido .video-boton { display: none; }
.md-typeset figure.video iframe.video-marco {
  display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
  border: 0; margin: 0; background: #000;
}
@media (max-width: 620px) {
  .md-typeset figure.video .video-play { width: 54px; height: 54px; }
  .md-typeset figure.video .video-play::after { border-width: 10px 0 10px 17px; }
}
@media print {
  .md-typeset figure.video .video-boton { display: none; }
}