:root{
    --text-primary: #ffffff;
    --text-secondary: #182738;
    --text-dark: #000000;
    --btn-color: #CB935D;
    --bg-primary: #F9F7F5;
    --bg-secondary-initial:#0D1825;
    --bg-secondary-final: #1F3044;
    --font-h2: 1.8em;
    --font-text: 1.2em;
    --font-span: 1.3em;
}



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.fade-in-up,
.fade-in-down,
.fade-in-left,
.fade-in-right {
  overflow: hidden; /* Oculta el desbordamiento durante la animación */
}


.fade-container {
  overflow: hidden;
}
.lin{
    background: linear-gradient(354deg,var(--bg-secondary-initial) 0%, var(--bg-secondary-final) 100%);;
}

.link:hover{
color: var(--btn-color);
transform: translate(5px);
transition-duration: .3s;
}

.carousel-container {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  width: calc(8 * 15%); /* 8 imágenes, cada una 25% del ancho */
  animation: scrollCarousel 8s linear infinite;
}

.carousel-img {
  width: 25%;
  height: 300px;
 filter: drop-shadow(5px 9px 20px var(--bg-secondary-initial));
  flex-shrink: 0;
  object-fit: cover;
}


@keyframes scrollCarousel {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}



@media (max-width: 700px) {
  .list{
    display: none;
  }
}


/* ANIMATIONS */
/* Carrousel*/
@keyframes scrollCarousel {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Fade In Up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

/* Fade In Down */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-down {
  animation: fadeInDown 0.8s ease-out;
}

/* Fade In Left */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fade-in-left {
  animation: fadeInLeft 0.8s ease-out;
}

/* Fade In Right */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fade-in-right {
  animation: fadeInRight 0.8s ease-out;
}