/* header */

#header {
  height: max-content;
  width: 100%;
  position: relative;
}

.bg-slide-cont {
  /* position: absolute; */
  /* width: 80%; */
  /* max-width: 1080px; */
  width: 100%;
  /* height: 100%; */
  aspect-ratio: 16 / 8;
  /* top: 50%; */
  /* left: 50%; */
  /* transform: translate(-50%, -50%); */
  /* right: 0; */
  border-radius: var(--brad);
  overflow: hidden;
}

.slide-element {
  width: 100%;
  height: 100%;
  display: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide-element.active {
  display: block;
}

.bg-slide-cont div:nth-of-type(1) {
  background-image: url("../img/portadas/nueva-imagen_direx.jpg");
}

.bg-slide-cont div:nth-of-type(2) {
  background-image: url("../img/portadas/uso-domestico.jpg");
}

.bg-slide-cont div:nth-of-type(3) {
  background-image: url("../img/portadas/limpiadores-liquidos.jpg");
}

.bg-slide-cont div:nth-of-type(4) {
  background-image: url("../img/portadas/desengrasante-multi-wash.jpg");
}

.fade-bg {
  animation: fade-bg 5s ease-in-out infinite;
}

@keyframes fade-bg {
  0%  { opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100%  { opacity: 0; }
}

#header-cont div p:nth-of-type(1) {
  font-size: clamp(1rem, 3.4vw, 1.4rem);
}

#header-cont div p:nth-last-child(1) {
  font-size: clamp(1rem, 3.5vw, 1.4rem);
}

@media (max-width: 680px) {
  #header-cont {
    text-align: center;
  }
  #header-cont div {
    align-items: center;
  }
  .bg-slide-cont {
    aspect-ratio: 8 / 10;
  }
  .bg-slide-cont div:nth-of-type(1) {
    background-image: url("../img/portadas/mobile/nueva-imagen.jpg");
  }

  .bg-slide-cont div:nth-of-type(2) {
    background-image: url("../img/portadas/mobile/uso-domestico.jpg");
  }

  .bg-slide-cont div:nth-of-type(3) {
    background-image: url("../img/portadas/mobile/limpiadores-liquidos.jpg");
  }

  .bg-slide-cont div:nth-of-type(4) {
    background-image: url("../img/portadas/mobile/desengrasante-multiwash.jpg");
  }
}

@media (max-width: 768px) {
  .hide-768 {
    display: none !important;
  }
  .show-768 {
    display: block !important;
  }
  #header-cont {
    justify-content: center;
  }
  #header-left {
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .img-header {
    justify-content: center;
    width: 60%;
    animation-delay: 0;
  }
  #descripcion-img {
    width: 50%;
    margin-bottom: 2rem;
  }
  .to-column {
    flex-direction: column;
  }
  .to-column-reverse {
    flex-direction: column-reverse;
  }
  .circle-ico {
    width: 80px;
  }
}


.carousel-cont {
  display: flex;
  will-change: transform;
  /* gap: 10px; */
  /* flex-wrap: nowrap; */
  /* justify-content: center; */
}

.carousel-cont.color a {
  flex: 0 0 200px;
  /* width: 180px; */
  /* border-radius: 48px 0 0 0; */
  overflow: hidden;
  text-align: center;
  color: white;
  font-weight: 800;
  text-shadow: 0 0 8px #00000088;
  padding-bottom: .71rem;
}

.carousel-cont.color .img {
  width: 100%;
  height: 200px;
  border-radius: 48px 0 48px 0;
  border: 4px solid #ffffff33;
  overflow: hidden;
}

.carousel-cont.color .img img {
  max-height: 100%;
  width: auto;
  min-width: unset;
  max-width: unset;
}

.card {
  font-size: clamp(0.8rem, 0.81vw, 1.0rem) !important;
  margin-bottom: 1rem;
}

.card.celeste {
  background-color: #02a3dc;
}

.card.rojo {
  background-color: #f05847;
}

.card.naranja {
  background-color: #faa946;
}

.card.lila {
  background-color: #825ec0;
}

.card.verde {
  background-color: #2caf53;
}