/* Página Fashion Films: videos de Vimeo, el primero grande y el resto de a dos */
body { color: #000; background: #fff; }

.films { padding: calc(var(--barra) + 18px) 1.7vw 90px; }
.films-cabeza { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(26px, 3.5vw, 54px); }
.volver { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .6; width: max-content; }
.volver:hover { opacity: 1; }
.films-cabeza h1 {
  font-family: "Space Mono", monospace; font-weight: 700; text-transform: uppercase;
  font-size: clamp(34px, 5vw, 84px); line-height: 1; letter-spacing: -.03em;
}

.films-lista { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 48px) clamp(12px, 1.6vw, 26px); }
.film.destacado { grid-column: 1 / -1; }
.film { scroll-margin-top: calc(var(--barra) + 20px); }
.film-video { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.film-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* video propio (no Vimeo): se ve completo en el mismo recuadro 16:9, centrado sobre negro */
.film-video.propio video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

.film-pie {
  display: flex; align-items: baseline; gap: 12px; margin-top: 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
}
.film-pie h2 { font-family: "Space Mono", monospace; font-weight: 700; font-size: clamp(14px, 1.3vw, 20px); letter-spacing: -.01em; }
.film.destacado .film-pie h2 { font-size: clamp(18px, 2vw, 30px); }
.film-num, .film-dur { opacity: .55; }
.film-pie a { margin-left: auto; white-space: nowrap; }
.film-pie a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .films { padding-left: 14px; padding-right: 14px; }
  .films-lista { grid-template-columns: 1fr; gap: 30px; }
  .film-pie { flex-wrap: wrap; gap: 8px; }
}