/* =========================================================================
   GLOBAL SECTION: Capturas y clips de la app
   -------------------------------------------------------------------------
   Las imágenes de producto son pantallas reales de la app, grabadas por
   campus_dc/scripts/capturas/ (las regraba la máquina, no una persona) y
   servidas desde web/assets/capturas/. Dos formas, un solo marco:

     <figure class="captura">  <picture|img>             <figcaption?>
     <figure class="clip">     <video muted loop playsinline preload="none"
                                 data-poster="….webp">    <figcaption?>

   El póster va en `data-poster` y lo pone js/clips.js cuando el clip se
   acerca a la pantalla: un `poster` se pide nada más leerlo, aunque el clip
   esté abajo o se oculte en el móvil. El del hero, además, se adelanta con
   un <link rel="preload"> limitado a pantallas anchas.

   El clip lo enciende y apaga js/clips.js (solo en pantalla; con movimiento
   reducido se queda en el póster, que es su último fotograma, §3.7) y le
   hace del vídeo su propio control de pausa (WCAG 2.2.2, js/pausa.js).

   Una pieza estructural: borde de tinta y sombra maciza Coral (§5.2). La
   holgura inferior derecha deja sitio a la sombra si el padre recorta (§5.4).
   `.captura--sobre-campo` es la variante sobre Índigo: borde Papel.
   ========================================================================= */

.captura,
.clip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    margin: 0;
    padding: 0 var(--space-sm) var(--space-sm) 0;
}

.captura img,
.clip video,
.clip .captura-movil {
    grid-area: 1 / 1;
    display: block;
    /* Las capturas son a 2x y su width/height van en píxeles CSS: el ancho
       lo da el atributo (sin `width` aquí, que lo pisaría), así que cada una
       se ve a su tamaño, sin estirarse, y encoge si no cabe. */
    justify-self: center;
    max-width: 100%;
    height: auto;
    border: var(--border-w-structural) solid var(--c-ink);
    box-shadow: var(--shadow-blockout);
    background-color: var(--c-surface);
}

.captura--sobre-campo img,
.captura--sobre-campo video,
.captura--sobre-campo .captura-movil {
    border-color: var(--c-paper);
}

/* Una pantalla muy alta (la ficha de una convocatoria): se ve su parte de
   arriba, que es la que cuenta, y no ocupa media página. */
.captura--alta img {
    max-height: 40rem;
    object-fit: cover;
    object-position: top;
}

.captura figcaption,
.clip figcaption {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--c-text-muted);
}

.captura--sobre-campo figcaption {
    color: var(--c-text-muted-inverse);
}

/* Una escena con versión móvil lleva el vídeo para pantallas anchas y la
   imagen fija (loading="lazy") para el móvil. Lo oculto no se descarga: el
   vídeo va con preload="none" y clips.js solo arranca lo que se ve, y una
   imagen diferida con display:none no se pide. */
.clip--con-movil .captura-movil {
    display: none;
}

@media (max-width: 767.98px) {
    .clip--con-movil video {
        display: none;
    }

    .clip--con-movil .captura-movil {
        display: block;
        grid-area: 1 / 1;
    }
}

/* Lo que se mueve solo es su propio control de pausa (js/pausa.js): se pulsa
   o se activa con teclado. El foco es el global de la marca (base.css). */
.es-parable {
    cursor: pointer;
}