/* =========================================
   TUCHOK — HOME HERO SLIDE 4
========================================= */

.home-slide4 {
  position: relative;
  width: 100%;
  min-height: 760px;
  overflow: hidden;
  background: #f3f4f4;
  isolation: isolate;
}

.home-slide4__layer {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* FONDO */

.home-slide4__background {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;

  transform:
    translate3d(
      var(--s4-background-x),
      var(--s4-background-y),
      0
    )
    scale(var(--s4-background-scale));
}

/* FIGURA AZUL */

.home-slide4__blue-shape {
  top: 0;
  left: 50%;
  width: min(95vw, 1550px);
  z-index: 1;

  transform:
    translate3d(
      calc(-50% + var(--s4-blue_shape-x)),
      var(--s4-blue_shape-y),
      0
    )
    scale(var(--s4-blue_shape-scale));
}

/* PEDESTAL */

.home-slide4__pedestal-image {
  left: 50%;
  bottom: -130px;
  width: min(55vw, 820px);
  z-index: 4;

  transform:
    translate3d(
      calc(-50% + var(--s4-pedestal-x)),
      var(--s4-pedestal-y),
      0
    )
    scale(var(--s4-pedestal-scale));
}

/* DECORACIONES */

.home-slide4__decor {
  right: 0;
  bottom: 0;
  width: min(28vw, 390px);
  z-index: 3;

  transform:
    translate3d(
      var(--s4-decor-x),
      var(--s4-decor-y),
      0
    )
    scale(var(--s4-decor-scale));
}

/* PRODUCTO CENTRAL */

.home-slide4__product {
  left: 50%;
  bottom: 155px;
  width: min(52vw, 760px);
  z-index: 8;

  transform:
    translate3d(
      calc(-50% + var(--s4-product-x)),
      var(--s4-product-y),
      0
    )
    scale(var(--s4-product-scale));

  transform-origin: center bottom;
}

/* TÍTULO */

.home-slide4__heading {
  position: absolute;
  top: 125px;
  left: 50%;
  z-index: 10;

  display: flex;
  flex-direction: column;
  align-items: center;

  color: #fff;
  text-align: center;

  transform:
    translate3d(
      calc(-50% + var(--s4-heading-x)),
      var(--s4-heading-y),
      0
    )
    scale(var(--s4-heading-scale));
}

.home-slide4__heading span {
  font-family: "Dexa Pro Expanded", Arial, sans-serif;
  font-size: clamp(35px, 3vw, 56px);
  font-weight: 300;
}

.home-slide4__heading strong {
  font-family: "Dexa Pro Expanded", Arial, sans-serif;
  font-size: clamp(45px, 4vw, 70px);
  font-weight: 800;
  line-height: .95;
}

/* TEXTO INFERIOR */

.home-slide4__footer-copy {
  position: absolute;
  left: 50%;
  bottom: 70px;
  z-index: 12;

  width: min(90%, 720px);
  text-align: center;

  font-family: "Dexa Pro Expanded", Arial, sans-serif;
  font-size: clamp(20px, 1.7vw, 30px);
  color: #111;

  transform:
    translate3d(
      calc(-50% + var(--s4-footer-x)),
      var(--s4-footer-y),
      0
    )
    scale(var(--s4-footer-scale));
}

.home-slide4__footer-copy strong {
  font-weight: 800;
}

.home-slide4__footer-copy span {
  font-weight: 400;
}

/* MOBILE */

@media (max-width: 767px) {

  .home-slide4 {
    min-height: 720px;
  }

  .home-slide4__background {
    transform:
      translate3d(
        var(--s4-background-mx),
        var(--s4-background-my),
        0
      )
      scale(var(--s4-background-ms));
  }

  .home-slide4__blue-shape {
    width: 150vw;

    transform:
      translate3d(
        calc(-50% + var(--s4-blue_shape-mx)),
        var(--s4-blue_shape-my),
        0
      )
      scale(var(--s4-blue_shape-ms));
  }

  .home-slide4__pedestal-image {
    width: 95vw;
    bottom: -80px;

    transform:
      translate3d(
        calc(-50% + var(--s4-pedestal-mx)),
        var(--s4-pedestal-my),
        0
      )
      scale(var(--s4-pedestal-ms));
  }

  .home-slide4__decor {
    width: 60vw;

    transform:
      translate3d(
        var(--s4-decor-mx),
        var(--s4-decor-my),
        0
      )
      scale(var(--s4-decor-ms));
  }

  .home-slide4__product {
    width: 105vw;
    bottom: 145px;

    transform:
      translate3d(
        calc(-50% + var(--s4-product-mx)),
        var(--s4-product-my),
        0
      )
      scale(var(--s4-product-ms));
  }

  .home-slide4__heading {
    top: 105px;

    transform:
      translate3d(
        calc(-50% + var(--s4-heading-mx)),
        var(--s4-heading-my),
        0
      )
      scale(var(--s4-heading-ms));
  }

  .home-slide4__footer-copy {
    bottom: 52px;

    transform:
      translate3d(
        calc(-50% + var(--s4-footer-mx)),
        var(--s4-footer-my),
        0
      )
      scale(var(--s4-footer-ms));
  }
}