/* =========================
   CONTENEDOR BASE
========================= */

.tsr-video {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;

  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* =========================
   IFRAME BASE
========================= */

.tsr-video iframe {
  position: absolute;
  left: 0;
  width: 100%;
  border: 0;
}

/* =========================
   HORIZONTAL (16:9)
========================= */

.tsr-video-horizontal {
  aspect-ratio: 16 / 9;
}

.tsr-video-horizontal iframe {
  top: 0;
  height: 100%;
}

/* =========================
   VERTICAL (SHORTS 9:16)
   SIN BANDAS NEGRAS
========================= */

.tsr-video-vertical {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;

  aspect-ratio: 9 / 16;
  background: #000;
  overflow: hidden;

  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.tsr-video-vertical iframe {
  top: -12%;
  height: 124%;
}

/* =========================
   EFECTO PREMIUM OPCIONAL
========================= */

.tsr-video::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.25);
}

@media (hover: hover) {
  .tsr-video {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .tsr-video:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  }
}