/* MTM Servicios — "Scroll film" (vídeo cinematográfico controlado por scroll)
   La longitud de la sección decide la "velocidad" de la película: más alto = más lento. */

.film {
  --film-length: 620vh;
  position: relative;
  height: var(--film-length);
  background: var(--bg);
}
.film[hidden] { display: none; }

.film__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg) var(--film-poster, none) center / cover no-repeat;
}

.film__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* Velo para que el texto siempre sea legible sobre cualquier fotograma */
.film__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(10, 13, 22, 0.85) 0%, rgba(10, 13, 22, 0.15) 45%, rgba(10, 13, 22, 0.35) 100%),
    radial-gradient(ellipse at 20% 80%, rgba(10, 13, 22, 0.55), transparent 60%);
}

/* Capítulos: texto superpuesto (Residences / Horology / Yachts en el original) */
.film__chapters { position: absolute; inset: 0; pointer-events: none; }
.film__chapter {
  position: absolute;
  left: max(var(--space-md), calc((100vw - var(--container)) / 2 + var(--space-md)));
  right: var(--space-md);
  bottom: clamp(5.5rem, 14vh, 9rem);
  max-width: 34rem;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.film__chapter.is-active { opacity: 1; transform: none; pointer-events: auto; }

.film__kicker {
  display: flex; align-items: center; gap: 0.6em;
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.9rem;
}
.film__kicker::before { content: ""; width: 22px; height: 1px; background: var(--accent); }
.film__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.02;
  color: var(--ink-1);
  margin-bottom: 0.9rem;
}
.film__title em { font-style: normal; color: var(--accent); }
.film__text { color: var(--ink-2); font-size: 1.05rem; max-width: 42ch; margin-bottom: 1.4rem; }

/* Barra de progreso + contador 01/05 */
.film__hud {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 0 var(--space-md) 1.6rem;
  max-width: var(--container); margin: 0 auto;
  font-size: 0.75rem; letter-spacing: 0.14em; color: var(--ink-3);
}
.film__progress { flex: 1; height: 1px; background: var(--panel-border-strong); overflow: hidden; }
.film__progress-bar { height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.film__counter-current { color: var(--ink-1); }

/* Móvil: película más corta y texto más compacto */
@media (max-width: 767px) {
  .film { --film-length: 480vh; }
  .film__chapter { bottom: 4.5rem; }
  .film__text { font-size: 0.98rem; }
}

/* Modo estático (movimiento reducido / ahorro de datos): póster + capítulos en lista */
.film--static { height: auto; }
.film--static .film__stage { position: relative; height: auto; min-height: 100svh; padding: var(--space-2xl) 0 var(--space-xl); }
.film--static .film__canvas, .film--static .film__hud { display: none; }
.film--static .film__chapters { position: relative; display: grid; gap: var(--space-xl); }
.film--static .film__chapter { position: relative; left: auto; bottom: auto; margin: 0 auto; width: min(var(--container), 100% - 2 * var(--space-md)); max-width: none; opacity: 1; transform: none; }