/* =====================================================================
   RGS · Página /overlay/ — seção "Os filmes" (Parte 1 e Parte 2 do RGS Overlay)
   Soma ao solucao.<build>.css; usa a cor de destaque da vertical (--acc).
   ===================================================================== */

.sx-films-list { display: grid; gap: clamp(46px, 6vw, 84px); margin-top: 56px; }
.sx-film { display: grid; grid-template-columns: minmax(250px, .78fr) 2.2fr; gap: clamp(26px, 3.4vw, 54px); align-items: center; }
.sx-film-tag { color: var(--acc); font-size: .74rem; font-weight: 700; letter-spacing: .16em; line-height: 1.7; }
.sx-film-tag b { display: block; color: var(--ink); letter-spacing: .2em; }
.sx-film h3 { margin-top: 14px; font-family: var(--serif); font-size: clamp(1.9rem, 2.6vw, 2.5rem); font-weight: 500; line-height: 1.05; }
.sx-film p:not(.sx-film-tag) { margin-top: 16px; color: var(--muted); font-size: .95rem; line-height: 1.75; }
.sx-film-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 100px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--acc-rgb),.08); background: #04060d; aspect-ratio: 16 / 9; }
.sx-film-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #04060d; }
.sx-films .sx-note { margin-top: 46px; max-width: 860px; }

@media (max-width: 1120px) {
  .sx-film { grid-template-columns: 1fr; }
}