/* Clips en bucle de /tipos-de-insertos (d26.11). El póster (picture) da el tamaño; el video va encima y sólo se ve con cuadro. */
.tb-clip{position:relative}
.tb-clip picture{display:block}
.tb-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease;pointer-events:none}
.tb-clip[data-estado="vivo"] .tb-video,.tb-clip[data-estado="pausa"] .tb-video{opacity:1}
/* Botón chico en la esquina (en el teléfono la tarjeta mide ~180 px): sólo el ícono; el nombre va en aria-label. */
.tb-pausa{position:absolute;right:6px;bottom:6px;z-index:1;width:36px;height:36px;padding:0;border:0;border-radius:50%;
  background:rgba(10,30,94,.72);color:#fff;font-size:0;line-height:0;cursor:pointer;display:grid;place-items:center}
.tb-pausa[hidden]{display:none}
.tb-pausa::before{content:"";width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
.tb-pausa[data-accion="reproducir"]::before{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent currentColor;margin-left:3px}
.tb-pausa:hover{background:rgba(10,30,94,.9)}
.tb-pausa:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px #0A1E5E}
/* La tarjeta que sigue con foto («Cilindrar y refrentar», en espera) toma el 16:9 de los clips: la fila no se desalinea. */
.ap-cats:has(.tb-clip) .ap-fig:not(.tb-clip) img{aspect-ratio:16/9;object-fit:cover}
@media (prefers-reduced-motion:reduce){.tb-video,.tb-pausa{display:none!important}}