/* ==========================================================================
   MediaGallery — images and video standing on a ring that curls around the
   viewer: the middle card furthest away, the outer ones leaning in close to
   the camera. Drags with momentum, springs into its seat, loops forever.
   No dependencies.

   Port sin React de la plantilla Media Gallery de Scrolltide (sep-2026) para
   el sitio Marca. El CSS es el original; lo agregado está al final.
   ========================================================================== */

.mg {
  --mg-bg: #ffffff;
  --mg-shadow-color: rgba(16, 20, 32, 0.26);
  --mg-hint-bg: rgba(18, 20, 26, 0.72);
  --mg-hint-color: #ffffff;
  --mg-aspect: 2.85;
  --mg-card-w: 12cqw;
  --mg-ratio: 0.5625;
  --mg-perspective: 82.5cqw;
  --mg-corner: 1cqw;

  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: var(--mg-aspect);
  overflow: hidden;
  background: var(--mg-bg);
  cursor: grab;
  /* Vertical scrolling still belongs to the page. */
  touch-action: pan-y;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.mg:active {
  cursor: grabbing;
}

.mg:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

.mg-scene {
  position: absolute;
  inset: 0;
  /* Short on purpose: a wide field of view is what lets the outer cards read
     as twice the size of the middle one rather than a shade larger. */
  perspective: var(--mg-perspective);
  perspective-origin: 50% 50%;
}

.mg-track {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.mg-card {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--mg-card-w);
  aspect-ratio: var(--mg-ratio);
  /* The script's translate3d carries the vertical -50%, so only the
     horizontal half-offset is handled here. */
  margin-left: calc(var(--mg-card-w) / -2);
  border-radius: var(--mg-corner);
  transform-style: preserve-3d;
  will-change: transform;
}

.mg-face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Follows the card into 3D, so the shadow leans with the tilt instead of
     staying a flat rectangle behind it. */
  box-shadow: 0 2.2cqw 4.4cqw -2cqw var(--mg-shadow-color);
}

.mg-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  /* Dragging an image is the browser's idea of a gesture, not ours. */
  -webkit-user-drag: none;
  pointer-events: none;
}

.mg-art {
  background: linear-gradient(165deg, #d7dde8 0%, #7d8698 100%);
}

/* Turned cards catch less light. Opacity is written per frame from the
   card's own tilt, which is what stops the ring reading as flat cut-outs. */
.mg-shade {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #05070c;
  opacity: 0;
  pointer-events: none;
}

.mg-label {
  position: absolute;
  left: 0.9em;
  bottom: 0.8em;
  z-index: 1;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(9px, 1cqw, 14px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.mg-hint {
  position: absolute;
  left: clamp(12px, 2.4cqw, 34px);
  bottom: clamp(12px, 2.4cqw, 34px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.62em;
  padding: 0.62em 1.05em 0.62em 0.8em;
  border-radius: 999px;
  background: var(--mg-hint-bg);
  color: var(--mg-hint-color);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(10px, 1.05cqw, 14px);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.mg-hint svg {
  width: 1.7em;
  height: auto;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .mg-card {
    will-change: auto;
  }

  .mg-hint {
    transition: none;
  }
}

/* --- agregado para Marca --------------------------------------------------
   Un triángulo de «play» sobre cada tarjeta que trae video de Vimeo: la
   tarjeta del centro lo abre al hacerle clic. Va dentro de la cara, así se
   inclina con la tarjeta. */
.mg-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 22%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  color: #9d0067;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.mg-play svg { width: 42%; height: 42%; margin-left: 8%; }