/* The real 752 × 576 frame remains complete in both poster and playback. */
#escena .reel-button {
  display: block;
  width: min(100%, 1050px);
  margin: 0 0 0 auto;
  aspect-ratio: 752 / 576;
  overflow: hidden;
  isolation: isolate;
  background:#000000;
  text-align: left;
}

#escena .reel-button > .media-slot {
  position: absolute;
  inset: 0;
  min-height: 0;
  aspect-ratio: auto;
}

#escena .reel-button > .media-slot img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

#escena .reel-title {
  position: absolute;
  z-index: 2;
  left: 5%;
  bottom: 16%;
  font-size: clamp(3.5rem, 9vw, 9rem);
  line-height: .94;
  text-shadow: 0 2px 18px #0008;
  transition: opacity .22s ease;
}

#escena .reel-play {
  position: absolute;
  z-index: 2;
  right: 5%;
  bottom: 19%;
  display: grid;
  place-items: center;
  width: clamp(68px, 7vw, 104px);
  height: clamp(68px, 7vw, 104px);
  border: 1px solid #fff;
  border-radius: 50%;
  background: #05050555;
  font: 700 12px var(--sans);
  letter-spacing: .12em;
  transition: opacity .22s ease;
}

#escena .reel-duration {
  z-index: 2;
  right: 5%;
  bottom: 5%;
  color: #fff;
  transition: opacity .22s ease;
}

#escena.reel-active .reel-title,
#escena.reel-active .reel-play,
#escena.reel-active .reel-duration { opacity: 0; }

#reel-modal[open] { animation: reel-open .22s ease both; }
@keyframes reel-open { from { opacity: 0; } to { opacity: 1; } }
#reel-modal #reel-content { display: grid; place-items: center; }
#reel-modal .reel-screen {
  position: relative;
  width: min(88vw, 1000px, 102svh);
  aspect-ratio: 752 / 576;
  background:#000000;
}
#reel-modal .reel-screen img,
#reel-modal .reel-screen video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}
#reel-modal .reel-screen video {
  max-width: none;
  max-height: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
#reel-modal.is-playing .reel-screen video { opacity: 1; pointer-events: auto; }

@media (max-width: 767px) {
  #escena .reel-button { width: 100%; }
  #escena .reel-title {
    left: 4%;
    bottom: 16%;
    font-size: clamp(2.7rem, 12vw, 4.6rem);
  }
  #escena .reel-play {
    right: 4%;
    bottom: 19%;
    width: clamp(56px, 16vw, 72px);
    height: clamp(56px, 16vw, 72px);
    font-size: 10px;
  }
  #reel-modal { padding: 64px 3vw 24px; }
  #reel-modal .reel-screen { width: 94vw; }
}

@media (prefers-reduced-motion: reduce) {
  #reel-modal[open] { animation: none; }
  #escena .reel-title,
  #escena .reel-play,
  #escena .reel-duration,
  #reel-modal .reel-screen video { transition: none; }
}