/* ============================================================================
   AGC · tipografía del hero (titular del inicio + textos de las 5 escenas)
   ----------------------------------------------------------------------------
   Una sola familia (Montserrat): el contraste sale del peso y del color. Navy
   para el titular, las palabras clave en el azul de AGC con un degradé fino,
   la bajada en tinta. Las palabras entran una por una (de desenfocadas y un
   poco abajo a nítidas; solo transform/opacity/filter), y los textos de cada
   escena repiten la entrada cuando su escena se activa (pelicula.js pone
   .is-active). Con «reducir movimiento»: todo en su estado final.
   ========================================================================== */

/* eyebrow sobre el titular */

/* titular: navy firme + palabras clave en azul AGC */
.film-title { color: var(--navy); font-weight: 600; letter-spacing: -0.035em; }
.film-title .ln { overflow: visible; }
.film-title .w--key {
  font-weight: 700;
  background: linear-gradient(100deg, #0A4F8C 0%, #0E6CB8 55%, #1B7FD3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.08em; margin-bottom: -0.08em; /* el degradé no corta los descendentes */
}
.film-sub .lede { color: var(--ink-2); font-weight: 400; max-width: 42em; }

/* entrada palabra por palabra (~1,3 s en total) */
@keyframes wordIn {
  from { opacity: 0; transform: translateY(0.38em); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
.film-title .ln > .w {
  display: inline-block; opacity: 0; transform: translateY(0.38em); filter: blur(10px);
  animation: wordIn 0.72s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 70ms + 140ms);
}

/* botones del hero: primario azul con profundidad, secundario en línea azul */
.film .btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 24px -12px rgba(14, 108, 184, 0.75);
  transition: background 0.25s var(--ease), border-color 0.25s, color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.film .btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 14px 28px -12px rgba(14, 108, 184, 0.85); }
.film .hero-ctas .btn--line, .film .cap .btn--light {
  box-shadow: none; border-width: 1.5px;
}
.film .hero-ctas .btn--line { color: var(--blue-deep); border-color: rgba(14, 108, 184, 0.55); background: rgba(255, 255, 255, 0.88); }
.film .hero-ctas .btn--line:hover { color: #fff; background: var(--blue); border-color: var(--blue); }

.film.is-on .cap h2 { text-shadow: 0 2px 18px rgba(10, 34, 54, 0.35); }
.film.is-on .cap h2 .w {
  display: inline-block; opacity: 0; transform: translateY(0.38em); filter: blur(8px);
}
.film.is-on .cap.is-active h2 .w { animation: wordIn 0.62s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 60ms + 120ms); }

@media (max-width: 560px) {
}

@media (prefers-reduced-motion: reduce) {
  .film-title .ln > .w, .film.is-on .cap h2 .w { animation: none; opacity: 1; transform: none; filter: none; }
  .film .btn:hover { transform: none; }
}