/* Sección Tráileres / Trailers (web_contenido/traileres.py). Usa las variables de styles.css; no lo modifica. */
.vids, .gal { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.vids { grid-template-columns: 1fr; }
@media (min-width: 760px) { .vids { grid-template-columns: 1fr 1fr; } }

.vid__marco { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--line); background: #000; overflow: hidden; }
.vid__btn { position: absolute; inset: 0; display: block; }
.vid__btn img, .vid__iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.vid__play {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border-radius: 50%; background: rgba(5, 14, 11, 0.78); border: 2px solid var(--yellow);
  transition: transform 0.15s ease, background 0.15s ease;
}
.vid__play::after {
  content: ""; position: absolute; left: 28px; top: 21px;
  border-style: solid; border-width: 15px 0 15px 24px; border-color: transparent transparent transparent var(--yellow);
}
.vid__btn:hover .vid__play, .vid__btn:focus-visible .vid__play { transform: scale(1.08); background: rgba(5, 14, 11, 0.92); }
.vid__btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.vid__t { margin: 10px 0 2px; font-size: 1.05rem; }
.vid__meta { margin: 0; font-size: 0.8rem; color: var(--muted); }
.vid__meta a { color: var(--blue-text); }

.gal { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.gal__f { margin: 0; }
.gal__f a { display: block; border: 1px solid var(--line); }
.gal__f a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.gal__f img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.gal__f figcaption { margin-top: 6px; font-size: 0.82rem; }
.gal__cred { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .vid__play { transition: none; } }