@font-face {
    font-family: 'Kefa';
    src: url('assets/fonts/Kefa-Regular.TTF') format('truetype');
}


@media screen and (width > 1000px) {
  .full {
      width: 100vw;
      height: 90vh;
  }
}

@media screen and (width < 1000px) {
  .full {
      width: 100vw;
      height: clamp(90vh, 100px, 100vh);
  }
}


.carousel,
.carousel-inner,
.carousel-item {
    height: 100%;
  }
  

.carousel-inner {
    height: 100%;
    width: 100%;
}

.carousel-item {
    height: 100%;
    width: 100%;
}

.h-80 {
  height: 80%;
}

.label-1 {
  font-family: 'handsome-pro', sans-serif;
  font-style: normal;
  color: #6A6A6A;
  font-size: clamp(6.5rem, 10vw, 20.5rem); /* ≈ 48px a 200px */
}

.label-2 {
  font-family: 'Kefa', sans-serif;
  font-size: clamp(2rem, 3vw, 3.200rem); /* ≈ 24px a 50px */
}

.label-3 {
  font-family: 'Kefa', sans-serif;
  font-size: clamp(2.1rem, 4.2vw, 3.5rem); /* ≈ 32px a 80px */
}

.label-4 {
  font-family: 'proxima-nova', sans-serif;
  font-style: normal;
  font-size: clamp(0.700rem, 1.5vw, 1rem); /* ≈ 14px a 16px */
}

.label-5 {
  font-family: 'ProximaNova', sans-serif;
  font-style: normal;
  font-size: clamp(1rem, 2.5vw, 2rem); /* ≈ 20px a 32px */
}

.label-6 {
  font-family: 'handsome-pro', sans-serif;
  font-style: normal;
  color: #6A6A6A;
  font-size: clamp(2rem, 1.5vw, 3.5rem); /* ≈ 48px a 200px */
}

.carousel-control-prev-icon,
  .carousel-control-next-icon {
    background-image: none; /* Quita el ícono SVG por defecto */
    display: inline-block;
    width: 2rem;
    height: 2rem;
  }

  .carousel-control-prev-icon::after,
  .carousel-control-next-icon::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: rgba(0, 0, 0, 0); /* 🔁 Cambia a gray o cualquier otro color */
  }

.creditos {
  position: absolute;
  bottom: -100%;
  width: 100%;
  height: 100%;
  overflow-y: scroll;       /* Scroll solo vertical */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
  text-align: center;
  animation: scrollCredits 10s ease-out forwards;
  }

  .scrollable-div::-webkit-scrollbar {
    display: none;              /* Chrome, Safari */
  }

  @media screen and (width < 1000px) {
    @keyframes scrollCredits {
      0% {
        transform: translateY(0%);
      }
      100% {
        transform: translateY(clamp(-90%, 10vh, -170%));
      }
    }
  }

  @media screen and (width >= 1000px) {
    @keyframes scrollCredits {
      0% {
        transform: translateY(0%);
      }
      100% {
        transform: translateY(clamp(-75%, 7vh, -300%));
      }
    }
  }