/**
 * CSS del font office del módulo
 * 
 * @author Difadi.com <soporte@difadi.com>
 * @author Sergio Delgado <sdelgado@difadi.com>
 * @copyright 2026 Difadi.com
 * @license Comercial
 */

/* Carruseles home */
#carousels-home .carousel {
  margin-bottom: 0;
  margin-left: 0;
  width: auto;
  left: 0;
  background-color: white;
}

#carousels-home .carousel .carousel-header .container {
  padding-right: 0 !important;
  position: relative;
}

#carousels-home .carousel .carousel-header .container::before {
  content: "";
  width: 100dvw;
  height: 100%;
  position: absolute;
  right: calc(100% - 25px);
  background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.8)), var(--bg-color);
}

#carousels-home .carousel .carousel-header .container .content {
  padding: 5px 80px 5px 0;
  width: fit-content;
  min-height: 80px;
  display: flex;
  align-items: center;
  position: relative;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
}

#carousels-home .carousel .carousel-header .container .content svg {
  height: 130px;
  position: absolute;
  z-index: 1;
}

#carousels-home .carousel .carousel-header .container .content .text {
  margin-left: 160px;
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
  color: #ede2e2;
  z-index: 1;
}

#carousels-home .carousel .carousel-header .container .content .text .pretitle {
  font-size: 24px;
  line-height: 24px;
}

#carousels-home .carousel .carousel-header .container .content .text .title {
  margin: 0;
  font-size: 44px;
  line-height: 44px;
}

#carousels-home .carousel .carousel-header .container .content .shadow {
  width: 100%;
  height: 100%;
  position: absolute;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.8));
}

#carousels-home .carousel .carousel-body {
  margin-top: 40px;
}

#carousels-home .carousel .carousel-body:has(.left) {
  display: flex;
  flex-wrap: wrap;
}

#carousels-home .carousel .carousel-body .left {
  padding: 0;
}

#carousels-home .carousel .carousel-body .left img {
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

#carousels-home .carousel .carousel-body .left .content {
  width: calc(100% - 80px);
  position: absolute;
  bottom: 40px;
  left: 40px;
  z-index: 1;
}

#carousels-home .carousel .carousel-body .left .content .title {
  margin-bottom: 20px;
  color: white;
  text-transform: uppercase;
  font-size: 35px;
  line-height: 40px;
  font-weight: 500;
}

#carousels-home .carousel .carousel-body .left .content .text {
  margin-bottom: 40px;
  color: white;
  font-size: 18px;
}

#carousels-home .carousel .carousel-body .left .content a {
  background-color: white !important;
  border-color: white !important;
}

#carousels-home .carousel .carousel-body .left .content a:hover {
  background-color: black !important;
}

#carousels-home .carousel .carousel-body .left .shadow {
  width: 100%;
  height: 400px;
  position: absolute;
  bottom: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.8));
}

#carousels-home .carousel .carousel-body .right {
  padding-right: 0;
}

@media (max-width: 1199px) {
  #carousels-home .carousel .carousel-header .container::before {
    width: 100%;
  }

  #carousels-home .carousel .carousel-body .left img {
    max-height: 300px;
    width: 100%;
  }

  #carousels-home .carousel .carousel-body .left .content {
    top: 50%;
    bottom: unset;
    transform: translateY(-50%);
  }

  #carousels-home .carousel .carousel-body .left .shadow {
    height: 300px;
    background: none;
    background-color: #00000057;
    border-radius: 10px;
  }

  #carousels-home .carousel .carousel-body .right {
    margin-top: 20px;
    padding: 0;
  }
}