.invisible{
	opacity:0;
    transition: opacity 2s ease-in-out;
}
#header-space {
    height: 0px !important;
}
.ctScroll {
  transition: opacity 2s ease-in-out;
  font-size: clamp(32px, 3.8vw, 103px) !important;
    font-family: 'National', sans-serif !important;
  grid-template-rows: 100%;
  grid-template-columns: 100%;
  width: 100% !important;
  height: 100vh !important;
  display: grid !important;
  overflow: hidden;
  & > * {
    grid-area: 1/1;
  }
}

.ctScroll span {

  font-family: 'Literata-Italic', sans-serif;
  font-family: 'Literata', sans-serif !important;
  font-size: calc( clamp(32px, 3.8vw, 103px) * 0.893);
   color: #ec5d5b;
}

.ctScroll img {
height: 100vh !important;
}

img.nube-cielo {
    height: auto !important;
    }
    
    img.nube-bottom {
    height: auto !important;
    }
    
  	img.nube-bottom-inverted {
    height: auto !important;
    }

.hombre-mujer-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  display: grid;
  & > * {
    grid-column-start: 1;
    grid-row-start: 1;
    backface-visibility: hidden;
  }
  z-index: 20;
}

.hombre {
  position: relative;
  min-width: fit-content;
  object-fit: cover;
  height: 100vh;
  align-self: center;
  justify-self: start;
  will-change: transform;
  z-index: 30;
}

.mujer {
  position: relative;
  min-width: fit-content;
  object-fit: cover;
  height: 100vh;
  align-self: center;
  justify-self: end;
  will-change: transform;
  z-index: 20;
}

.parapente {
  position: relative;
  min-width: fit-content;
  object-fit: cover;
  height: 100vh;
  align-self: center;
  justify-self: start;
  will-change: transform;
  z-index: 20;
}

.ladera-roja {
  position: relative;
  min-width: fit-content;
  object-fit: cover;
  height: 100vh;
  align-self: center;
  justify-self: start;
  will-change: transform;
  z-index: 10;
  transform-style: preserve-3d;
}

.chica-ladera {
  position: relative;
  min-width: fit-content;
  object-fit: cover;
  height: 100vh;
  align-self: center;
  justify-self: end;
  will-change: transform;
  z-index: 10;
  transform-style: preserve-3d;
}

.landscape-wrapper {
  background: linear-gradient(to bottom, #b4b4b4, #f2f2f2);
   place-self: start center;
}

.bg-image {
  height: 100vh;
  align-self: center;
  justify-self: center;
  object-fit: cover;
  overflow: visible;
  mix-blend-mode: multiply;
  opacity: 0.6;
  will-change: transform;
  transform-style: preserve-3d;
}

.nube-cielo {
  position: relative;
  min-width: fit-content;
  mix-blend-mode: screen;
  align-self: start;
  justify-self: start;
  transform-style: preserve-3d;
  will-change: transform;
}

.piramide {
  position: relative;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  align-self: center;
  justify-self: end;
  overflow: visible;
  transform-style: preserve-3d;
  will-change: transform;
}

.nube-bottom {
  position: relative;
  width: 66% !important;
  height: auto !important;
  object-fit: contain;
  mix-blend-mode: screen;
  align-self: end;
  justify-self: end;
  will-change: transform;
  transform-style: preserve-3d;
}

.nube-bottom-inverted {
  position: relative;
  width: 66% !important;
  height: auto !important;
  object-fit: contain;
  mix-blend-mode: screen;
  align-self: end;
  justify-self: start;
  will-change: transform;
  transform-style: preserve-3d;
}

  
.heading-text {
  position: relative;
  align-self: end;
  justify-self: center;
  inset: -10rem 0;
  line-height: 0.9;
  color: white;
  font-weight: 500;
  padding: 1rem;
  will-change: transform;
  transform-style: preserve-3d;
}


.chica-ladera-text {
  position: relative;
  width: fit-content;
  align-self: end;
  justify-self: center;
  inset: -10rem 0;
  line-height: calc(2.5 / 2.25);
  color: white;
  font-weight: 500;
  padding: 1rem;
  will-change: transform;
  transform-style: preserve-3d;
  z-index: 30;
}


.parapente-ladera-text {
  position: relative;
  width: fit-content;
  align-self: end;
  justify-self: center;
  inset: -8rem 0;
  line-height: calc(2.5 / 2.25);
  color: white;
  font-weight: 500;
  padding: 0.5rem;
  will-change: transform;
  transform-style: preserve-3d;
  z-index: 30;
}

.hombre-mujer-text {
  position: relative;
  text-align: center;
  width: fit-content;
  align-self: center;
  justify-self: center;
  inset: -6rem 0;
  line-height: calc(2.5 / 2.25);
  color: white;
  font-weight: 500;
  padding: 1rem;
  will-change: transform;
  transform-style: preserve-3d;
  z-index: 30;
}


.marquee-ltr {
  position: relative;
  min-width: 100%;
  display: flex;
  gap: 1rem;
  align-self: start;
  justify-self: start;
  inset: 8rem 0;
  font-size: 6rem;
  line-height: 1;
  font-weight: 500;
  padding: 1rem;
  white-space: nowrap;
   color: #ec5d5b;
   font-family: 'National-Regular';
  overflow: hidden;
  z-index: 30;
}

.marquee-rtl {
  position: relative;
  min-width: 100%;
  display: flex;
  gap: 1rem;
  align-self: end;
  justify-self: end;
  inset: -8rem 0;
  font-size: 6rem;
  line-height: 1;
  font-weight: 500;
  padding: 1rem;
  white-space: nowrap;
  overflow: hidden;
  color: #ec5d5b;
  font-family: 'National-Regular';
}

/* Responsive styles (add as needed) */
@media (max-width: 768px) {
  .heading-text,
  .chica-ladera-text,
  .parapente-ladera-text,
  .hombre-mujer-text {
    line-height: 1;
  }

}

@media (min-width: 991px) and (max-width: 1199px) {
  .heading-text,
  .chica-ladera-text,
  .parapente-ladera-text,
  .hombre-mujer-text {
    font-size: 3rem;
    line-height: 1;
  }

  .heading-text span,
  .chica-ladera-text span,
  .parapente-ladera-text span,
  .hombre-mujer-text span {
    color: #ec5d5b;
     font-size: clamp(32px, 3.34vw, 103px);
    font-family: National', sans-serif;
  }

  .piramide {
    align-self: end;
  }

  .heading-text {
    align-self: center;
    justify-self: start;
    inset: 0 3rem;
  }

  .chica-ladera-text {
    align-self: center;
    justify-self: start;
    inset: 0 3rem;
  }

  .parapente-ladera-text {
    align-self: center;
    justify-self: end;
    inset: 0 -4rem;
    padding: 1rem;
  }

  .hombre-mujer-text {
    inset: -4.5rem 0;
  }

  .marquee-ltr,
  .marquee-rtl {
    font-size: 8rem;
  }
}

@media (min-width: 1200px) {

  .hombre {
    width: auto;
  }

  .mujer {
    width: auto;
  }

  .parapente {
    width: auto;
  }

  .ladera-roja {
    width: auto;
  }

  .chica-ladera {
    width: auto;
  }

  .piramide {
    align-self: end;
    justify-content: center;
  }

  .heading-text,
  .chica-ladera-text,
  .parapente-ladera-text,
  .hombre-mujer-text {
    line-height: 1;
  }


  .heading-text,
  .chica-ladera-text {
    align-self: center;
    justify-self: start;
    inset: 0 8rem;
  }

  .parapente-ladera-text {
    align-self: center;
    justify-self: end;
    inset: 0 -8rem;
  }

  .hombre-mujer-text {
    inset: -4.5rem 0;
  }

  .marquee-ltr,
  .marquee-rtl {
    font-size: 12rem;
  }
}