/* curso-video.css — encuadre de tutoriales verticales.
   Complementa manual.css y manual-fixes.css; cárgalo DESPUÉS de ambos.
   Solo actúa sobre figure.video.video--vertical. */

.anvi-manual figure.video.video--vertical {
  /* Proporción real del archivo (1080 x 2560). El marco y la imagen usan
     exactamente la misma, así que no quedan bandas laterales. */
  --video-proporcion: 1080 / 2560;
  --video-alto-max: min(78svh, 860px);

  margin: 2.4em auto;
  max-width: 100%;
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Nunca se combinan width:100% y max-height sobre el mismo marco: eso era lo
   que producía una caja más ancha que la imagen. Cada breakpoint fija una
   sola dimensión y deja que aspect-ratio derive la otra. */
.anvi-manual figure.video.video--vertical .video__marco {
  aspect-ratio: var(--video-proporcion);
  margin-inline: auto;
  background: var(--petroleo);
  border: 1px solid var(--linea);
  overflow: hidden;
}

.anvi-manual figure.video.video--vertical video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--petroleo);
}

@supports not (height: 1svh) {
  .anvi-manual figure.video.video--vertical { --video-alto-max: min(78vh, 860px); }
}

/* Móvil: manda el ancho. El alto lo deriva la proporción, sin tope que
   estreche la imagen. La página se desplaza con normalidad y el fullscreen
   nativo sigue disponible. */
@media (max-width: 767px) {
  .anvi-manual figure.video.video--vertical {
    margin: 2em 0;
  }
  .anvi-manual figure.video.video--vertical .video__marco {
    width: 100%;
    height: auto;
    max-height: none;
    max-width: 100%;
  }
}

/* Escritorio y tableta: manda el alto. El ancho lo deriva la proporción y el
   bloque se centra. */
@media (min-width: 768px) {
  .anvi-manual figure.video.video--vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .anvi-manual figure.video.video--vertical .video__marco {
    height: var(--video-alto-max);
    width: auto;
    max-width: 100%;
  }
  .anvi-manual figure.video.video--vertical .video__pie {
    width: 100%;
    max-width: 46rem;
  }
}

.anvi-manual figure.video.video--vertical .video__pie {
  margin-inline: auto;
  text-align: left;
}

/* Impresión: sin reproductor; queda el título y el enlace legible. */
@media print {
  .anvi-manual figure.video.video--vertical .video__marco { display: none; }

  .anvi-manual figure.video.video--vertical {
    display: block;
    margin: 6mm 0;
    padding: 3mm 0 3mm 4mm;
    border-left: 0.75pt solid #12474c;
  }

  .anvi-manual figure.video.video--vertical .video__pie {
    display: block;
    max-width: none;
    padding: 0;
    font-size: 10pt;
    color: #000;
  }

  .anvi-manual figure.video.video--vertical .video__titulo {
    display: block;
    font-family: var(--serif);
    font-size: 11pt;
    color: #000;
  }

  .anvi-manual figure.video.video--vertical .video__titulo::before {
    content: "Tutorial en video: ";
    font-family: var(--sans);
    font-size: 9pt;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #444;
  }

  .anvi-manual figure.video.video--vertical .video__acciones {
    display: block;
    margin-top: 1.5mm;
    font-size: 9.5pt;
  }

  .anvi-manual figure.video.video--vertical .video__acciones a {
    display: block;
    color: #000;
    text-decoration: none;
  }

  .anvi-manual figure.video.video--vertical .video__acciones a::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    color: #444;
    word-break: break-all;
  }
}