/* ==========================================================================
   moving.css — "ByCar en movimiento": 4 clips cortos alrededor del video grande
   Título y botones arriba; abajo, 2 clips + video (protagonista) + 2 clips.
   ========================================================================== */
.moving__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem 3rem; margin-bottom: clamp(1.4rem, 3vw, 2.6rem); }
.moving__head p { margin-top: .9rem; font-size: var(--fs-lead); color: var(--c-ink-soft); max-width: 30rem; }
.moving__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; }
.moving__toggle { font-weight: 500; color: var(--c-ink-soft); }

.moving__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(360px, 31vw, 520px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.moving__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Video grande: manda la altura de toda la composición (9:16) */
.moving__video { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-m); overflow: hidden; background: var(--c-olive-deep); }
.moving__video video { width: 100%; height: 100%; object-fit: cover; }

/* Clips: llenan el alto que queda; --pos decide qué parte del cuadro vertical se ve */
.moving__tile { position: relative; flex: 1; min-height: 240px; border-radius: var(--r-m); overflow: hidden; background: var(--c-cream); }
.moving__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }

/* Tablet y celular: título, video grande, y los 4 clips en grilla de 2 x 2 */
@media (max-width: 900px) {
  .moving__grid { grid-template-columns: 1fr 1fr; }
  .moving__col { display: contents; }
  .moving__video { grid-column: 1 / -1; width: min(100%, 420px); justify-self: center; order: -1; }
  .moving__tile { aspect-ratio: 4 / 5; min-height: 0; }
}
@media (max-width: 560px) {
  .moving__head { margin-bottom: 1.2rem; }
}