/* Reproductor de video diferido (template-parts/video.php + assets/js/video.js): póster con botón; el video se descarga al tocar.
   Ficha de producto (modo video) y Nosotros (modo imagen). */
.ts-video { position: relative; margin: 0; }
.ts-video__v { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--color-primary-dark); object-fit: cover; }

/* Modo imagen: la caja 16:9 es el propio contenedor. */
.ts-video--imagen { overflow: hidden; border-radius: var(--radius); background: var(--color-primary-dark); box-shadow: var(--shadow-1); aspect-ratio: 16 / 9; }
.ts-video--imagen > img, .ts-video--imagen > video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

.ts-video__play {
  position: absolute; inset: 0 0 auto; height: 0; padding-top: 56.25%; width: 100%;
  border: 0; border-radius: var(--radius); background: rgb(11 57 84 / 0.35); color: #fff; font: inherit; cursor: pointer;
}
.ts-video__play > svg, .ts-video__play > span { position: absolute; left: 50%; transform: translateX(-50%); }
.ts-video__play > svg { top: calc(50% - 2.75rem); width: 3.5rem; height: 3.5rem; padding: 0.875rem; border-radius: 50%; background: var(--color-accent); color: var(--color-primary-dark); box-shadow: var(--shadow-2); transition: transform var(--dur-fast) var(--ease-spring); }
.ts-video__play > span { top: calc(50% + 1.25rem); width: max-content; max-width: calc(100% - 2rem); font-weight: 700; text-align: center; text-shadow: 0 1px 2px rgb(0 0 0 / 0.5); }
.ts-video__play small { font-weight: 500; }
.ts-video__play:hover > svg { transform: translateX(-50%) scale(1.06); }
.ts-video__play:active > svg { transform: translateX(-50%) scale(0.94); }
.ts-video__play:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.ts-video.is-cargando .ts-video__play > svg { opacity: 0.6; }
.ts-video.is-cargando .ts-video__play { cursor: progress; }

/* Aviso cuando no hay video todavía y mensaje de error (con enlace a WhatsApp). */
.ts-video__pronto, .ts-video__estado {
  position: absolute; left: 50%; transform: translateX(-50%);
  margin: 0; padding: var(--space-2) var(--space-4); border-radius: 999px; width: max-content; max-width: calc(100% - 2rem);
  background: rgb(11 57 84 / 0.86); color: #fff; font-size: 0.8125rem; font-weight: 500; line-height: 1.3; text-align: center;
}
.ts-video__pronto { bottom: var(--space-2); }
.ts-video__estado { top: var(--space-3); border-radius: var(--radius); }
.ts-video__estado:empty { display: none; }
.ts-video__wa { color: var(--color-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ts-video__wa:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ts-video__cap { margin-top: var(--space-2); font-size: 0.8125rem; color: var(--color-text-muted); }

@media (min-width: 52rem) {
  .ts-video--imagen .ts-video__pronto { bottom: var(--space-4); font-size: 1rem; font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-video__play > svg { transition: none; }
  .ts-video__play:hover > svg, .ts-video__play:active > svg { transform: translateX(-50%); }
}
@media (forced-colors: active) {
  .ts-video__play > svg, .ts-video__pronto, .ts-video__estado { border: 1px solid CanvasText; }
}