/* /films and /es/peliculas: page title and the poster gallery (Wix Pro Gallery: grid of 270x360 posters with 12px gaps,
   1680px wide and centred on the window, so the outer columns are cut by the window edges, exactly like Wix).
   Mobile reproduces the Wix mobile collage (rows of 1 or 2 posters, 280px wide). Clicking a poster opens
   the viewer built in films.js (white background, poster fitted to the screen, close and arrows).
   Posters 7 to 14 were added after the Wix capture (2026-10-24): on mobile they are four rows of two, each row
   as tall as both posters fit 280.1 wide with the 9.8 gap (full poster, no crop), 10 apart, like the Wix rows;
   the Wix rows that follow keep their sizes and move down by 803.8. Shared by /films and /es/peliculas. */

/* ---------- Title ---------- */
.films-head { display: flow-root; height: 147px; }
.films-title {
  width: 780px; max-width: calc(100% - 17px);
  margin: 83px 0 0 17px;
  font: 400 28px/normal var(--font-body);
  color: #000;
}
@media (prefers-reduced-motion: no-preference) {
  .films-title { animation: films-fade-in .8s cubic-bezier(.445, .05, .55, .95) 1ms backwards; }
}
@keyframes films-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Gallery ---------- */
/* The Wix strip behind the first 453px of the gallery is #fafafa: it shows in the gaps of the first row. */
.films-body {
  position: relative;
  overflow: hidden;
  overflow: clip; /* no scroll container: tabbing to a poster cut by the window edge must not slide the grid */
  background: linear-gradient(#fafafa, #fafafa) top / 100% 453px no-repeat, #fff;
}
.films-grid {
  display: grid;
  grid-template-columns: repeat(6, 270px);
  grid-auto-rows: 360px;
  gap: 12px;
  width: 1680px;
  margin-left: calc(50% - 840px);
}
.film { position: relative; }
.film-open {
  position: relative; display: block;
  width: 100%; height: 100%;
  padding: 0; border: 0; border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.film-open picture, .film-open img { display: block; width: 100%; height: 100%; }
.film-open img { object-fit: cover; object-position: 50% 50%; }
/* Wix hover: a flat rgba(64,64,64,.6) layer, shown instantly, no text. */
.film-open::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(64, 64, 64, .6);
  opacity: 0; pointer-events: none;
}
@media (hover: hover) {
  .film-open:hover::after { opacity: 1; }
}
.film-open:focus-visible { outline: 2px solid #000; outline-offset: -2px; }
.film-open:focus-visible::after { opacity: 1; }

/* ---------- Mobile: the Wix collage, positions in Wix mobile px (1 --u) ---------- */
@media (max-width: 767px) {
  .films-head { height: auto; }
  .films-head .stage { width: 100%; }
  .films-title {
    width: calc(300 * var(--u)); max-width: none;
    margin: calc(27 * var(--u)) 0 calc(25 * var(--u)) calc(20 * var(--u));
    font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u));
  }
  .films-body { display: flow-root; overflow: visible; background: none; }
  .films-grid {
    display: block; position: relative;
    width: calc(280 * var(--u)); height: calc(3382.1 * var(--u));
    margin: calc(20 * var(--u)) 0 0 calc(20 * var(--u));
  }
  .film { position: absolute; left: 0; top: 0; width: calc(280.1 * var(--u)); }
  .film:nth-child(1)  { top: 0;                                height: calc(349.3 * var(--u)); }
  .film:nth-child(2)  { top: calc(359.1 * var(--u));           height: calc(158 * var(--u)); }
  .film:nth-child(3)  { top: calc(527.2 * var(--u));           height: calc(198.1 * var(--u)); width: calc(130.3 * var(--u)); }
  .film:nth-child(4)  { top: calc(527.2 * var(--u));           height: calc(198.1 * var(--u)); width: calc(140 * var(--u)); left: calc(140.1 * var(--u)); }
  .film:nth-child(5)  { top: calc(735.3 * var(--u));           height: calc(181 * var(--u)); width: calc(145.3 * var(--u)); }
  .film:nth-child(6)  { top: calc(735.3 * var(--u));           height: calc(181 * var(--u)); width: calc(125 * var(--u)); left: calc(155.1 * var(--u)); }
  .film:nth-child(7)  { top: calc(926.1 * var(--u));           height: calc(184.3 * var(--u)); width: calc(147.4 * var(--u)); }
  .film:nth-child(8)  { top: calc(926.1 * var(--u));           height: calc(184.3 * var(--u)); width: calc(122.9 * var(--u)); left: calc(157.2 * var(--u)); }
  .film:nth-child(9)  { top: calc(1120.4 * var(--u));          height: calc(192.7 * var(--u)); width: calc(135.3 * var(--u)); }
  .film:nth-child(10) { top: calc(1120.4 * var(--u));          height: calc(192.7 * var(--u)); width: calc(135 * var(--u)); left: calc(145.1 * var(--u)); }
  .film:nth-child(11) { top: calc(1323.1 * var(--u));          height: calc(194.7 * var(--u)); width: calc(131.4 * var(--u)); }
  .film:nth-child(12) { top: calc(1323.1 * var(--u));          height: calc(194.7 * var(--u)); width: calc(138.9 * var(--u)); left: calc(141.2 * var(--u)); }
  .film:nth-child(13) { top: calc(1527.8 * var(--u));          height: calc(192.1 * var(--u)); width: calc(134.5 * var(--u)); }
  .film:nth-child(14) { top: calc(1527.8 * var(--u));          height: calc(192.1 * var(--u)); width: calc(135.8 * var(--u)); left: calc(144.3 * var(--u)); }
  .film:nth-child(15) { top: calc(1729.9 * var(--u));          height: calc(210.3 * var(--u)); }
  .film:nth-child(16) { top: calc(1950.3 * var(--u));          height: calc(195.1 * var(--u)); width: calc(132.3 * var(--u)); }
  .film:nth-child(17) { top: calc(1950.3 * var(--u));          height: calc(195.1 * var(--u)); width: calc(138 * var(--u)); left: calc(142.1 * var(--u)); }
  .film:nth-child(18) { top: calc(2154.9 * var(--u));          height: calc(197.1 * var(--u)); width: calc(132.3 * var(--u)); }
  .film:nth-child(19) { top: calc(2154.9 * var(--u));          height: calc(197.1 * var(--u)); width: calc(138 * var(--u)); left: calc(142.1 * var(--u)); }
  .film:nth-child(20) { top: calc(2361.9 * var(--u));          height: calc(193.1 * var(--u)); width: calc(132.3 * var(--u)); }
  .film:nth-child(21) { top: calc(2361.9 * var(--u));          height: calc(193.1 * var(--u)); width: calc(138 * var(--u)); left: calc(142.1 * var(--u)); }
  .film:nth-child(22) { top: calc(2565 * var(--u));            height: calc(189.1 * var(--u)); width: calc(136.3 * var(--u)); }
  .film:nth-child(23) { top: calc(2565 * var(--u));            height: calc(189.1 * var(--u)); width: calc(134 * var(--u)); left: calc(146.1 * var(--u)); }
  .film:nth-child(24) { top: calc(2764.4 * var(--u));          height: calc(211.1 * var(--u)); width: calc(138.3 * var(--u)); }
  .film:nth-child(25) { top: calc(2764.4 * var(--u));          height: calc(211.1 * var(--u)); width: calc(132 * var(--u)); left: calc(148.1 * var(--u)); }
  .film:nth-child(26) { top: calc(2985 * var(--u));            height: calc(397.1 * var(--u)); }
}

/* ---------- Viewer (built by films.js) ---------- */
html.films-lock { overflow: hidden; }
.films-viewer {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: #fff; color: #000;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}
.films-viewer::backdrop { background: #fff; }
.films-viewer[open] { animation: films-viewer-in .4s ease; }
@keyframes films-viewer-in { from { opacity: 0; } to { opacity: 1; } }
.films-viewer-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: contain;
  user-select: none; -webkit-user-drag: none;
}
.films-viewer button {
  position: absolute; z-index: 1;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; background: transparent; color: #000;
  cursor: pointer;
}
.films-viewer button svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.films-viewer-close { top: 27px; right: 28px; }
.films-viewer-close svg { width: 24px; height: 24px; }
.films-viewer-shrink { top: 28px; left: 28px; }
.films-viewer .films-viewer-shrink svg { width: 27px; height: 27px; stroke-width: 1; stroke-linecap: butt; }
.films-viewer-prev, .films-viewer-next { top: calc(50% - 23px); }
.films-viewer-prev { left: 28px; }
.films-viewer-next { right: 28px; }
.films-viewer-prev svg, .films-viewer-next svg { width: 14px; height: 26px; }
.films-viewer button:focus-visible { outline: 2px solid #000; outline-offset: 0; }

@media (max-width: 767px) {
  /* Wix mobile viewer: only a close cross in the top right corner; posters change with a swipe.
     The arrows stay available to keyboard and screen reader users and show when focused. */
  .films-viewer .films-viewer-close { top: 5px; right: 5px; width: 28px; height: 28px; }
  .films-viewer .films-viewer-close svg { width: 14px; height: 14px; }
  .films-viewer .films-viewer-shrink { display: none; }
  .films-viewer-prev:not(:focus-visible), .films-viewer-next:not(:focus-visible) {
    clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden;
  }
  .films-viewer-prev { left: 4px; }
  .films-viewer-next { right: 4px; }
}

/* Desktop: the outer grid columns are cut by the window (Wix geometry). The posters added in October 2026
   would land in them (items 7, 12, 13), so they swap places with older posters in inner columns (15, 16, 17),
   and the two posters of the short last row sit in the middle. The DOM order stays (the mobile collage uses it). */
@media (min-width: 768px) {
  .film:nth-child(1) { order: 1; } .film:nth-child(2) { order: 2; } .film:nth-child(3) { order: 3; } .film:nth-child(4) { order: 4; } .film:nth-child(5) { order: 5; } .film:nth-child(6) { order: 6; } .film:nth-child(7) { order: 15; } .film:nth-child(8) { order: 8; } .film:nth-child(9) { order: 9; } .film:nth-child(10) { order: 10; } .film:nth-child(11) { order: 11; } .film:nth-child(12) { order: 16; } .film:nth-child(13) { order: 17; } .film:nth-child(14) { order: 14; } .film:nth-child(15) { order: 7; } .film:nth-child(16) { order: 12; } .film:nth-child(17) { order: 13; } .film:nth-child(18) { order: 18; } .film:nth-child(19) { order: 19; } .film:nth-child(20) { order: 20; } .film:nth-child(21) { order: 21; } .film:nth-child(22) { order: 22; } .film:nth-child(23) { order: 23; } .film:nth-child(24) { order: 24; } .film:nth-child(25) { order: 25; } .film:nth-child(26) { order: 26; }
  .film:nth-child(25) { grid-column: 3; }
}