/* ============================================================================
   AGC · escena 5 de la película: el equipo en video (js/pelicula.js)
   ----------------------------------------------------------------------------
   Al entrar la escena aparece un gradiente de marca y el isotipo grande se
   dibuja detrás (trazo → relleno, con un leve giro). Adelante flota el video,
   más chico (nunca más de ~1,25× sus 1280 px): las personas opacas y la oficina
   que se funde con el fondo (transparencia en los cuadros); el scroll lo avanza
   cuadro a cuadro. El texto va debajo del video, sin
   tapar caras. El JS (equipoSeq → layout) mide y ubica video y texto.
   Sin GSAP o con «reducir movimiento»: el primer cuadro fijo con el logo atrás.
   ========================================================================== */

.scene--equipo .scene-clip { background: #0A2236; }
.eq { position: absolute; inset: 0; overflow: hidden; }

/* gradiente de marca: navy → azul profundo, con un brillo naranja tenue */
.eq-bg, .eq-static {
  background:
    radial-gradient(48% 42% at 78% 16%, rgba(232, 85, 31, 0.22), transparent 70%),
    radial-gradient(80% 70% at 22% 88%, rgba(14, 108, 184, 0.45), transparent 72%),
    linear-gradient(160deg, #0A2236 0%, #0B3459 52%, #0A4F8C 100%);
}
.eq-bg { position: absolute; inset: 0; will-change: opacity; }

/* el isotipo grande detrás (motion: trazo → relleno en la línea de tiempo) */
.eq-iso {
  position: absolute; left: 50%; top: 50%; width: min(112vh, 96vw); height: min(112vh, 96vw);
  translate: -50% -50%; opacity: 0.62; overflow: visible;
  animation: eqBreathe 7s ease-in-out infinite alternate;
}
.eq-iso-g { will-change: transform; }
@keyframes eqBreathe { from { scale: 1; } to { scale: 1.035; } }

/* el video flota: sin rectángulo, los bordes se funden con el fondo */
.eq-video {
  /* punto de partida antes del JS; sin «translate» CSS: GSAP anima el transform */
  position: absolute; left: calc(50% - min(32vw, 550px)); top: 10%; width: min(64vw, 1100px); aspect-ratio: 16 / 9;
  will-change: transform, opacity;
  /* sin máscara: los cuadros traen su propia transparencia (personas opacas, la
     oficina se funde en una elipse suave, las piernas se desvanecen abajo) */
}
.eq-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* texto de la escena 5: debajo del video, centrado en escritorio */
.film.is-on .cap--equipo h2 { font-size: clamp(1.7rem, 2.6vw, 2.6rem); }
@media (min-width: 861px) {
  .film.is-on .cap--equipo { text-align: center; }
  .film.is-on .cap--equipo p { margin-inline: auto; }
}
@media (max-width: 860px) {
  .film.is-on .cap--equipo h2 { font-size: clamp(1.5rem, 6.6vw, 2.1rem); }
}

/* versión estática: el primer cuadro con el isotipo detrás */
.eq-static { display: none; }
.film:not(.is-on) .eq-static {
  display: block; position: relative; overflow: hidden;
  width: min(720px, calc(100% - 2 * var(--gut))); margin: 14px auto 0;
  aspect-ratio: 16 / 9; border-radius: 18px;
}
.film:not(.is-on) .eq-static::before {
  content: ''; position: absolute; inset: 4%; opacity: 0.85;
  background: url("../assets/logo/icono-agc.png") center / contain no-repeat;
}
.eq-static img { position: relative; display: block; width: 84%; margin: 4% auto 0; aspect-ratio: 16 / 9; height: auto; }