/* ===================================================================
   BLOQUE PARALLAX GALLERY — MRM TRIBAL
   Coordenadas en % calculadas sobre los artboards de Figma:
   desktop 1440x1654 · tablet 768x1976 · mobile 360x1186
   =================================================================== */

.mt-parallax-gallery {
  /* Recorrido del parallax, en px: es el de la pieza más lenta; cada una
     usa su fracción con `--mt-pg-lag`. Valores por breakpoint desde el
     widget de Elementor: --mt-pg-amp-m / -t / -d (inline en la sección). */
  --mt-pg-amp: var(--mt-pg-amp-m, 380px);

  /* Lienzo: la proporción del artboard mobile. */
  /* Lienzo por breakpoint: ancho / alto del artboard. --mt-pg-compact (del
     widget) encoge el alto sin mover las piezas de sitio, para reducir los
     huecos verticales. */
  --mt-pg-canvas-w: 360;
  --mt-pg-canvas-h: 1186;
  /* Placeholder: andamiaje de preview, no es un color de marca. */
  --mt-pg-placeholder: #ebebeb;
  --mt-pg-placeholder-fg: var(--mt-color-main-d30, #5d5d5d);

  box-sizing: border-box;
  display: block;
  /* Recortamos para no invadir los bloques vecinos. El recorrido de cada
     pieza se limita a su hueco libre, así que nunca llega al borde. */
  overflow: clip;
}

.mt-parallax-gallery *,
.mt-parallax-gallery *::before,
.mt-parallax-gallery *::after {
  box-sizing: border-box;
}

.mt-parallax-gallery__canvas {
  position: relative;
  width: 100%;
  max-width: var(--mt-container-max, 1440px);
  margin-inline: auto;
  aspect-ratio: var(--mt-pg-canvas-w) / calc(var(--mt-pg-canvas-h) * var(--mt-pg-compact, 1));
}

.mt-parallax-gallery__item {
  position: absolute;
  left: var(--mt-pg-x);
  top: var(--mt-pg-y);
  width: var(--mt-pg-w);
  aspect-ratio: var(--mt-pg-ratio);
  overflow: hidden;
  border-radius: var(--mt-pg-radius, 16px);
  /* Fuerza a Safari a recortar el contenido de una capa con transform */
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  /* Única propiedad animada: el JS escribe el desplazamiento ya ajustado
     al hueco libre de la pieza. Sin JS: 0. */
  transform: translate3d(0, var(--mt-pg-shift, 0px), 0);
}

.mt-parallax-gallery__media,
.mt-parallax-gallery__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El radio se aplica también aquí: con un transform en la pieza, Safari y
     Edge no recortan el contenido con overflow: hidden */
  border-radius: inherit;
}

/* El vídeo se comporta igual que la imagen dentro de su pieza */
video.mt-parallax-gallery__media {
  max-width: none;
  border: 0;
  border-radius: inherit;
  pointer-events: none;
}

.mt-parallax-gallery[data-mt-active="true"] .mt-parallax-gallery__item {
  will-change: transform;
}

/* --- Entrada: barrido de abajo arriba la primera vez que se ve -------
   El barrido va en la foto, no en el marco: un `clip-path` sobre el
   elemento observado deja su rectángulo de intersección a cero y el
   IntersectionObserver no llega a dispararse nunca.
   El estado oculto solo se aplica si el JS ha marcado la sección, para
   que sin JS las piezas se vean desde el primer momento. */
.mt-parallax-gallery[data-mt-reveal="true"] .mt-parallax-gallery__media,
.mt-parallax-gallery[data-mt-reveal="true"]
  .mt-parallax-gallery__placeholder {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition:
    clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s ease-out;
  transition-delay: var(--mt-pg-delay, 0ms);
}

.mt-parallax-gallery[data-mt-reveal="true"]
  .is-mt-in
  .mt-parallax-gallery__media,
.mt-parallax-gallery[data-mt-reveal="true"]
  .is-mt-in
  .mt-parallax-gallery__placeholder {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

.mt-parallax-gallery__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    135deg,
    var(--mt-pg-placeholder) 0 10px,
    color-mix(in srgb, var(--mt-pg-placeholder) 92%, #000) 10px 20px
  );
  color: var(--mt-pg-placeholder-fg);
  font-family: var(
    --mt-font-family-body,
    "Suisse Intl",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif
  );
  font-size: var(--mt-font-size-caption, 14px);
  line-height: var(--mt-line-height-caption, 20px);
}

/* --- Velocidad de cada pieza: fracción del recorrido total -------
   Nueve valores distintos, alternando rápidas y lentas para que no
   haya dos vecinas que se muevan igual. ------------------------- */
.mt-parallax-gallery__item--1 {
  --mt-pg-lag: 0.95;
}
.mt-parallax-gallery__item--2 {
  --mt-pg-lag: 0.4;
}
.mt-parallax-gallery__item--3 {
  --mt-pg-lag: 0.7;
}
.mt-parallax-gallery__item--4 {
  --mt-pg-lag: 0.25;
}
.mt-parallax-gallery__item--5 {
  --mt-pg-lag: 0.85;
}
.mt-parallax-gallery__item--6 {
  --mt-pg-lag: 0.55;
}
.mt-parallax-gallery__item--7 {
  --mt-pg-lag: 1;
}
.mt-parallax-gallery__item--8 {
  --mt-pg-lag: 0.35;
}
.mt-parallax-gallery__item--9 {
  --mt-pg-lag: 0.65;
}

/* --- Geometría MOBILE (Figma 360 x 1186) ---------------------------- */
.mt-parallax-gallery__item--1 {
  --mt-pg-x: 36.111%;
  --mt-pg-y: 2.024%;
  --mt-pg-w: 59.5%;
  --mt-pg-ratio: 1.5;
}
.mt-parallax-gallery__item--2 {
  --mt-pg-x: 0%;
  --mt-pg-y: 12.293%;
  --mt-pg-w: 47%;
  --mt-pg-ratio: 1.549;
}
.mt-parallax-gallery__item--3 {
  --mt-pg-x: 18.611%;
  --mt-pg-y: 22.664%;
  --mt-pg-w: 63%;
  --mt-pg-ratio: 1.549;
}
.mt-parallax-gallery__item--4 {
  --mt-pg-x: 4.444%;
  --mt-pg-y: 32.681%;
  --mt-pg-w: 57.333%;
  --mt-pg-ratio: 1.773;
}
.mt-parallax-gallery__item--5 {
  --mt-pg-x: 52.944%;
  --mt-pg-y: 43.963%;
  --mt-pg-w: 43.833%;
  --mt-pg-ratio: 1.5;
}
.mt-parallax-gallery__item--6 {
  --mt-pg-x: 2.667%;
  --mt-pg-y: 51.45%;
  --mt-pg-w: 63%;
  --mt-pg-ratio: 1.549;
}
.mt-parallax-gallery__item--7 {
  --mt-pg-x: 35.778%;
  --mt-pg-y: 67.69%;
  --mt-pg-w: 57.333%;
  --mt-pg-ratio: 1.773;
}
.mt-parallax-gallery__item--8 {
  --mt-pg-x: 4.444%;
  --mt-pg-y: 74.975%;
  --mt-pg-w: 37%;
  --mt-pg-ratio: 0.779;
}
.mt-parallax-gallery__item--9 {
  --mt-pg-x: 38.333%;
  --mt-pg-y: 88.128%;
  --mt-pg-w: 57.333%;
  --mt-pg-ratio: 1.773;
}

/* --- Geometría TABLET (Figma 768 x 1976) ----------------------------
   Mismo ritmo vertical que mobile (los % de `top` coinciden); cambian
   los anchos y las posiciones horizontales. Las proporciones no cambian
   en ningún breakpoint: mobile es exactamente tablet x0,6.            */
@media (min-width: 768px) {
  .mt-parallax-gallery {
    --mt-pg-amp: var(--mt-pg-amp-t, 620px);
    --mt-pg-canvas-w: 768;
    --mt-pg-canvas-h: 1976;
  }

  .mt-parallax-gallery__item--1 {
    --mt-pg-x: 51.432%;
    --mt-pg-y: 2.024%;
    --mt-pg-w: 46.484%;
  }
  .mt-parallax-gallery__item--2 {
    --mt-pg-x: 0%;
    --mt-pg-y: 12.298%;
    --mt-pg-w: 36.719%;
  }
  .mt-parallax-gallery__item--3 {
    --mt-pg-x: 38.802%;
    --mt-pg-y: 22.672%;
    --mt-pg-w: 49.219%;
  }
  .mt-parallax-gallery__item--4 {
    --mt-pg-x: 14.323%;
    --mt-pg-y: 32.692%;
    --mt-pg-w: 44.792%;
  }
  .mt-parallax-gallery__item--5 {
    --mt-pg-x: 63.281%;
    --mt-pg-y: 43.978%;
    --mt-pg-w: 34.245%;
  }
  .mt-parallax-gallery__item--6 {
    --mt-pg-x: 2.083%;
    --mt-pg-y: 51.468%;
    --mt-pg-w: 49.219%;
  }
  .mt-parallax-gallery__item--7 {
    --mt-pg-x: 38.802%;
    --mt-pg-y: 67.713%;
    --mt-pg-w: 44.792%;
  }
  .mt-parallax-gallery__item--8 {
    --mt-pg-x: 14.323%;
    --mt-pg-y: 75%;
    --mt-pg-w: 28.906%;
  }
  .mt-parallax-gallery__item--9 {
    --mt-pg-x: 52.734%;
    --mt-pg-y: 88.158%;
    --mt-pg-w: 44.792%;
  }
}

/* --- Geometría DESKTOP (Figma 1440 x 1654) -------------------------- */
@media (min-width: 1200px) {
  .mt-parallax-gallery {
    --mt-pg-amp: var(--mt-pg-amp-d, 900px);
    --mt-pg-canvas-w: 1440;
    --mt-pg-canvas-h: 1654;
  }

  .mt-parallax-gallery__item--1 {
    --mt-pg-x: 70.972%;
    --mt-pg-y: 2.418%;
    --mt-pg-w: 24.792%;
  }
  .mt-parallax-gallery__item--2 {
    --mt-pg-x: 0%;
    --mt-pg-y: 6.409%;
    --mt-pg-w: 26.25%;
  }
  .mt-parallax-gallery__item--3 {
    --mt-pg-x: 43.194%;
    --mt-pg-y: 22.189%;
    --mt-pg-w: 26.25%;
  }
  .mt-parallax-gallery__item--4 {
    --mt-pg-x: 12.639%;
    --mt-pg-y: 29.323%;
    --mt-pg-w: 23.889%;
  }
  .mt-parallax-gallery__item--5 {
    --mt-pg-x: 66.111%;
    --mt-pg-y: 41.354%;
    --mt-pg-w: 24.792%;
  }
  .mt-parallax-gallery__item--6 {
    --mt-pg-x: 5%;
    --mt-pg-y: 51.149%;
    --mt-pg-w: 26.25%;
  }
  .mt-parallax-gallery__item--7 {
    --mt-pg-x: 50.833%;
    --mt-pg-y: 60.097%;
    --mt-pg-w: 23.889%;
  }
  .mt-parallax-gallery__item--8 {
    --mt-pg-x: 27.917%;
    --mt-pg-y: 73.398%;
    --mt-pg-w: 15.417%;
  }
  .mt-parallax-gallery__item--9 {
    --mt-pg-x: 66.111%;
    --mt-pg-y: 81.983%;
    --mt-pg-w: 23.889%;
  }
}

/* --- Accesibilidad: sin movimiento ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mt-parallax-gallery {
    --mt-pg-amp: 0px;
  }
  .mt-parallax-gallery__item {
    transform: none;
  }
}