/* Tablero «¿Quién es quién?» en el móvil (con tablero-movil.js): el reproductor fijo arriba mientras pasan las caras.
   Reutilizable: solo depende de .caras-rejilla, .cred-video y .cara. En el escritorio no se aplica. */
@media (max-width:760px) {
  /* El reproductor, primero y pegado bajo la cabecera; se suelta al acabar la rejilla de caras */
  body .filmo-caras.caras-rejilla.tm-fijo > .cred-video {
    order:-1 !important; position:sticky !important; top:var(--tm-arriba, 0px) !important; z-index:5; align-self:start;
    box-shadow:0 22px 30px -14px rgba(0,0,0,.95), 0 -12px 0 #000; }
  /* Vista previa en silencio: ocupa el reproductor por debajo del rótulo y del botón de play */
  .caras-rejilla.tm-fijo > .cred-video .tm-previa { position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }
  .caras-rejilla.tm-fijo > .cred-video > span { z-index:2; }
  .caras-rejilla.tm-fijo > .cred-video::after { z-index:2; }
  /* Profundidad: las caras se oscurecen y encogen un poco al meterse bajo el reproductor (--tm-sombra va de 0 a 1) */
  .caras-rejilla.tm-fijo .cara { filter:brightness(calc(1 - .55 * var(--tm-sombra, 0))); transform:scale(calc(1 - .05 * var(--tm-sombra, 0))); transform-origin:50% 100%; }
}
