/* Prototipo aislado de parallax por capas para visuales editoriales. */
.parallax-visual {
  position: relative;
  isolation: isolate;
  margin: 0;
}

.parallax-visual-stage {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
}

.parallax-visual-fallback,
.parallax-visual-layers,
.parallax-visual-layer {
  grid-area: 1 / 1;
}

.parallax-visual-fallback,
.parallax-visual-layer {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.parallax-visual-fallback {
  position: relative;
  z-index: 1;
}

.parallax-visual-layers {
  position: relative;
  z-index: 2;
  display: grid;
  visibility: hidden;
  pointer-events: none;
}

.parallax-visual-layer {
  position: relative;
  transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.parallax-visual.is-parallax-ready .parallax-visual-fallback {
  visibility: hidden;
}

.parallax-visual.is-parallax-ready .parallax-visual-layers {
  visibility: visible;
}

.parallax-visual.is-parallax-ready .parallax-visual-layer {
  will-change: transform;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .parallax-visual-fallback {
    visibility: visible !important;
  }

  .parallax-visual-layers {
    visibility: hidden !important;
  }

  .parallax-visual-layer {
    transform: none !important;
  }
}

/* Home: en la retícula intermedia la imagen respeta la altura reservada por la figura. */
@media (min-width: 601px) and (max-width: 980px) {
  body.home-page #hand-comercio-internacional .parallax-visual-stage {
    place-items: center;
    height: 100%;
  }

  body.home-page #hand-comercio-internacional .parallax-visual-fallback,
  body.home-page #hand-comercio-internacional .parallax-visual-layers,
  body.home-page #hand-comercio-internacional .parallax-visual-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}