/* Hero Image — prefijo hi- */

.hi-section {
  --hi-container-max: 1400px;
  --hi-viewport-width: 100vw;
  --hi-scroll-progress: 0;
  --hi-effect-progress: 0;
  --hi-overlay-effect: 0;
  --hi-overlay-move: 0;
  --hi-overlay-fade: 0;
  --hi-effect-start: 0.88;
  --hi-overlay-effect-start: 0.91;
  --hi-overlay-smooth-lerp: 0.028;
  --hi-overlay-smooth-settle: 0.0012;
  --hi-overlay-move-power: 5;
  --hi-overlay-fade-power: 7;
  --hi-scroll-margin: 20px;
  --hi-scroll-start-offset: 72px;
  --hi-scroll-top-boost: 88px;
  --hi-scroll-smooth-lerp: 0.052;
  --hi-scroll-smooth-settle: 0.0015;
  --hi-inset: clamp(16px, 3vw, 40px);
  --hi-frame-radius: clamp(16px, 2vw, 24px);
  --hi-aspect-ratio: 21 / 9;
  --hi-max-height: 80vh;
  --hi-blur-max: 24px;
  --hi-blur-scroll-max: 14px;
  --hi-blur-zone: 32%;
  --hi-blur-intensity: 0.72;
  --hi-dots-opacity: 0.16;
  --hi-dots-opacity-hover: 0.52;
  --hi-dots-fade-duration: 0.55s;
  --hi-pulse-opacity: 0.22;
  --hi-pulse-opacity-hover: 0.58;
  --hi-pulse-fade-duration: 0.65s;
  --hi-interference-opacity: 0.18;
  --hi-interference-opacity-hover: 0.56;
  --hi-interference-fade-duration: 0.6s;
  --hi-interference-spot-r: clamp(100px, 16vw, 220px);
  --hi-interference-hover-lerp: 0.085;
  --hi-interference-spot-lerp: 0.14;
  --hi-interference-speed-idle: 0.03;
  --hi-interference-speed-hover: 0.52;
  --hi-custom-base-opacity: 0.08;
  --hi-custom-spot-opacity: 0.8;
  --hi-custom-fade-duration: 1.05s;
  --hi-custom-spot-target-lerp: 0.03;
  --hi-custom-spot-lerp: 0.014;
  --hi-custom-spot-settle: 0.015;
  --hi-custom-spot-r: clamp(88px, 14vw, 190px);
  --hi-spot-x: 50%;
  --hi-spot-y: 50%;
  --hi-bg-shift-x: 0px;
  --hi-bg-shift-y: 0px;
  --hi-bg-parallax-scale: 1.02;
  --hi-bg-parallax-max: 8px;
  --hi-bg-parallax-target-lerp: 0.038;
  --hi-bg-parallax-lerp: 0.018;
  --hi-bg-parallax-settle: 0.02;
  --hi-bg-parallax-release-duration: 0.675s;
  --hi-overlay-scale-end: 1.015;
  width: 100%;
  max-height: var(--hi-max-height);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box;
  overflow-x: clip;
}

/* Full-bleed: el scroll-expand usa vw; sin esto la sección queda al ancho del padre y clip recorta los lados en desktop ancho */
@media screen and (min-width: 992px) {
  .hi-section {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

@supports (width: 100dvw) {
  .hi-section {
    --hi-viewport-width: 100dvw;
  }

  @media screen and (min-width: 992px) {
    .hi-section {
      width: 100dvw;
      max-width: 100dvw;
      margin-left: calc(50% - 50dvw);
      margin-right: calc(50% - 50dvw);
    }
  }
}

.hi-container {
  width: 100%;
  max-width: var(--hi-container-max);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--cambiate-section-padding-x, 40px);
  box-sizing: border-box;
  overflow: visible;
}

.hi-frame {
  position: relative;
  width: calc(
    (100% * (1 - var(--hi-scroll-progress))) +
      (
        (var(--hi-viewport-width) - (var(--hi-scroll-margin) * 2)) *
          var(--hi-scroll-progress)
      )
  );
  max-width: none;
  max-height: var(--hi-max-height);
  margin-left: calc(
    (
        50% - (var(--hi-viewport-width) / 2) + var(--hi-scroll-margin)
      ) * var(--hi-scroll-progress)
  );
  overflow: hidden;
  border-radius: var(--hi-frame-radius);
  pointer-events: auto;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .hi-section .hi-frame {
    width: 100%;
    margin-left: 0;
  }
}

/* Escenario 21:9: fondo + overlays comparten el mismo caja */
.hi-stage {
  position: relative;
  display: block;
  width: 100%;
  max-height: var(--hi-max-height);
  aspect-ratio: var(--hi-aspect-ratio);
}

.hi-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}

.hi-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: translate3d(var(--hi-bg-shift-x), var(--hi-bg-shift-y), 0)
    scale(var(--hi-bg-parallax-scale));
  transform-origin: center center;
  transition: transform var(--hi-bg-parallax-release-duration)
    cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.hi-section--bg-parallax .hi-bg {
  transition: none;
}

.hi-bg-custom {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hi-bg-custom__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  opacity: var(--hi-custom-base-opacity);
}

.hi-bg-custom::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hi-custom-url);
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: opacity var(--hi-custom-fade-duration) ease-in-out;
  -webkit-mask-image: radial-gradient(
    circle var(--hi-custom-spot-r) at var(--hi-spot-x) var(--hi-spot-y),
    #000 0%,
    #000 40%,
    transparent 70%
  );
  mask-image: radial-gradient(
    circle var(--hi-custom-spot-r) at var(--hi-spot-x) var(--hi-spot-y),
    #000 0%,
    #000 40%,
    transparent 70%
  );
}

.hi-section--bg-custom.hi-section--spot-active .hi-bg-custom::after {
  opacity: var(--hi-custom-spot-opacity);
}

@media (prefers-reduced-motion: reduce) {
  .hi-bg {
    transform: none;
    transition: none;
    will-change: auto;
  }

  .hi-bg-custom::after {
    transition: opacity 0.2s ease-in-out;
  }
}

.hi-blur-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: calc(
    var(--hi-blur-zone) * (1 - var(--hi-effect-progress)) +
      (
        (
          var(--hi-blur-zone) * (1 - var(--hi-effect-progress)) +
            100% * var(--hi-effect-progress)
        ) * var(--hi-effect-progress)
      )
  );
  pointer-events: none;
  -webkit-backdrop-filter: blur(
    calc(
      var(--hi-blur-max) * (1 - var(--hi-effect-progress)) +
        var(--hi-blur-scroll-max) * var(--hi-effect-progress) *
          var(--hi-blur-intensity)
    )
  );
  backdrop-filter: blur(
    calc(
      var(--hi-blur-max) * (1 - var(--hi-effect-progress)) +
        var(--hi-blur-scroll-max) * var(--hi-effect-progress) *
          var(--hi-blur-intensity)
    )
  );
  -webkit-mask-image: linear-gradient(
    to top,
    #000 0%,
    #000 calc(var(--hi-effect-progress) * 72%),
    rgba(0, 0, 0, calc(0.45 * var(--hi-effect-progress))) calc(
      var(--hi-effect-progress) * 88% + (1 - var(--hi-effect-progress)) * 100%
    ),
    transparent 100%
  );
  mask-image: linear-gradient(
    to top,
    #000 0%,
    #000 calc(var(--hi-effect-progress) * 72%),
    rgba(0, 0, 0, calc(0.45 * var(--hi-effect-progress))) calc(
      var(--hi-effect-progress) * 88% + (1 - var(--hi-effect-progress)) * 100%
    ),
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Rejilla de puntos 3D con ondas — canvas (module.js) */
.hi-wave-dots {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--hi-dots-opacity);
  transition: opacity var(--hi-dots-fade-duration) ease-in-out;
}

.hi-wave-dots--pulse {
  opacity: var(--hi-pulse-opacity);
  transition: opacity var(--hi-pulse-fade-duration) ease-in-out;
}

.hi-wave-dots--interference {
  opacity: var(--hi-interference-opacity);
}

.hi-section--bg-dots.hi-section--dots-active .hi-wave-dots {
  opacity: var(--hi-dots-opacity-hover);
}

.hi-section--bg-pulse.hi-section--pulse-active .hi-wave-dots--pulse {
  opacity: var(--hi-pulse-opacity-hover);
}

.hi-wave-dots__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Overlays: rejilla 3×3; cada imagen ocupa una celda y se alinea al borde */
.hi-overlays {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  padding: var(--hi-inset);
  box-sizing: border-box;
  pointer-events: none;
}

.hi-overlay {
  display: block;
  width: auto;
  height: auto;
  max-width: min(var(--hi-overlay-max, 520px), 100%);
  max-height: var(--hi-overlay-max-h, none);
  object-fit: contain;
  object-position: center center;
  justify-self: center;
  align-self: center;
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  pointer-events: none;
}

.hi-place--center {
  grid-column: 2;
  grid-row: 2;
  object-position: center center;
}

.hi-place--top {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  object-position: center top;
  margin-top: var(--hi-overlay-margin-y, 0);
}

.hi-place--bottom {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  object-position: center bottom;
  margin-bottom: var(--hi-overlay-margin-y, 0);
}

.hi-place--left {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  object-position: left center;
  margin-left: var(--hi-overlay-margin-x, 0);
}

.hi-place--right {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  object-position: right center;
  margin-right: var(--hi-overlay-margin-x, 0);
}

.hi-place--top-left {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: start;
  object-position: left top;
  margin: var(--hi-overlay-margin-y, 0) 0 0 var(--hi-overlay-margin-x, 0);
}

.hi-place--top-right {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  object-position: right top;
  margin: var(--hi-overlay-margin-y, 0) var(--hi-overlay-margin-x, 0) 0 0;
}

.hi-place--bottom-left {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  align-self: end;
  object-position: left bottom;
  margin: 0 0 var(--hi-overlay-margin-y, 0) var(--hi-overlay-margin-x, 0);
}

.hi-place--bottom-right {
  grid-column: 3;
  grid-row: 3;
  justify-self: end;
  align-self: end;
  object-position: right bottom;
  margin: 0 var(--hi-overlay-margin-x, 0) var(--hi-overlay-margin-y, 0) 0;
}

/* Desktop: overlays convergen al centro, escalan y desvanecen al final del scroll */
@media screen and (min-width: 992px) {
  .hi-overlay {
    opacity: calc(1 - var(--hi-overlay-fade, var(--hi-overlay-effect)));
    transform:
      translate(
        calc(var(--hi-overlay-dx, 0px) * var(--hi-overlay-move, var(--hi-overlay-effect)) * -1),
        calc(var(--hi-overlay-dy, 0px) * var(--hi-overlay-move, var(--hi-overlay-effect)) * -1)
      )
      scale(
        calc(
          1 +
            var(--hi-overlay-move, var(--hi-overlay-effect)) *
            (var(--hi-overlay-scale-end) - 1)
        )
      );
    transform-origin: center center;
    will-change: transform, opacity;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hi-wave-dots {
    transition: opacity 0.2s ease-in-out;
  }
}

/* Tablet (layout ≤991px) */
@media screen and (max-width: 991px) {
  .hi-section {
    --hi-aspect-ratio: 16 / 9;
    --hi-max-height: 72vh;
    --hi-frame-radius: clamp(14px, 2vw, 20px);
    --hi-scroll-margin: 16px;
    --hi-scroll-start-offset: 56px;
    --hi-scroll-top-boost: 64px;
    --hi-scroll-smooth-lerp: 0.078;
    --hi-blur-max: 20px;
    --hi-blur-scroll-max: 12px;
    --hi-blur-zone: 28%;
    --hi-inset: clamp(12px, 2.5vw, 24px);
    --hi-dots-opacity: 0.16;
    --hi-dots-opacity-hover: 0.48;
    --hi-pulse-opacity-hover: 0.52;
    --hi-interference-opacity-hover: 0.5;
    --hi-bg-parallax-max: 5px;
  }

  .hi-container {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }

  .hi-overlay {
    max-width: min(var(--hi-overlay-max, 520px), 88%);
  }
}

/* Móvil (≤767px) */
@media screen and (max-width: 767px) {
  .hi-section {
    --hi-aspect-ratio: 4 / 3;
    --hi-max-height: min(68vh, 520px);
    --hi-frame-radius: clamp(12px, 3vw, 18px);
    --hi-scroll-margin: 12px;
    --hi-scroll-start-offset: 40px;
    --hi-scroll-top-boost: 48px;
    --hi-scroll-smooth-lerp: 0.085;
    --hi-blur-max: 16px;
    --hi-blur-scroll-max: 10px;
    --hi-blur-zone: 32%;
    --hi-inset: clamp(10px, 3vw, 18px);
    --hi-bg-parallax-max: 0px;
  }

  .hi-container {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .hi-overlay {
    max-width: min(var(--hi-overlay-max, 520px), 94%);
  }

  .hi-blur-fade {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Móvil estrecho (≤479px) */
@media screen and (max-width: 479px) {
  .hi-section {
    --hi-aspect-ratio: 5 / 4;
    --hi-max-height: min(62vh, 440px);
    --hi-frame-radius: 12px;
    --hi-scroll-margin: 12px;
    --hi-scroll-start-offset: 32px;
    --hi-scroll-top-boost: 36px;
    --hi-inset: 12px;
    --hi-blur-max: 14px;
    --hi-blur-scroll-max: 8px;
  }

  .hi-container {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  .hi-overlay {
    max-width: min(var(--hi-overlay-max, 520px), 96%);
  }
}

/* Touch: menos parallax, scroll-expand más estable */
@media (hover: none) and (pointer: coarse) {
  .hi-section {
    --hi-bg-parallax-max: 0px;
    --hi-scroll-smooth-lerp: 0.09;
  }
}