/* .swiper-button-prev {
  left: -60px;
}

.swiper-button-next {
  right: -60px;
} */

.swiper-button-prev,
.swiper-button-next {
  background: rgba(17, 17, 17, 0.6);
  color: var(--white);

  width: 2.75rem;
  height: 2.625rem;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 1rem;
}

/* .depoimentosSwiper,
.destaquesSwiper {
  padding-bottom: 60px;
} */

.swiper-pagination-bullet {
  width: 1rem;
  height: 1rem;
  background: #d9d9d9;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: var(--orange);
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 42px;

  & > span {
    margin: 0 0.5rem !important;
  }
}

/* ACCORDION - FAQS */

.accordion-item {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #0000001a;
  padding: 0.5rem 0;
  background: transparent;
}

.accordion-item:nth-child(1) {
  border-top: none;
}

.accordion-item:last-child {
  border-bottom: 1px solid #0000001a;
}

.accordion-button:not(.collapsed) {
  background-image: var(--color);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-color: transparent;
}

.accordion-button:focus {
  border-color: transparent;
  box-shadow: initial;
}

.accordion-button {
  font-weight: 400;
  font-size: 2rem;
  color: var(--gray-500);
  background-color: transparent;
}

/* Remove o ícone padrão do Bootstrap */
.accordion-button::after {
  display: none;
}

/* Ícone base */
.accordion-button {
  position: relative;
  padding-right: 40px; /* espaço para o ícone */
}

/* Ícone customizado */
.accordion-button::before {
  content: "+";
  position: absolute;
  right: 15px;
  font-size: 22px;
  font-weight: bold;

  background-image: var(--color);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: transform 0.2s ease;
}

/* Quando o item está aberto, vira "-" */
.accordion-button:not(.collapsed)::before {
  content: "-";
}

/* TRANSIÇÕES DE CORES */

.bg_gradient {
  background:
    linear-gradient(
      0deg,
      rgba(var(--gradient-color), 0.5),
      rgba(var(--gradient-color), 0.5)
    ),
    var(--banner-bg);
  background-blend-mode: var(--blend-mode);
}

.page-id-13 {
  --gradient-color: 255, 100, 1;
  --blend-mode: soft-light, normal;
  --color: var(--orange);
  --banner-gradient: linear-gradient(
    90deg,
    #fe5b00 0%,
    #ff8c00 27.88%,
    #ff8c00 76.44%,
    #fe5a00 100%
  );
}

.page-id-15 {
  --gradient-color: 187, 35, 124;
  --blend-mode: multiply, normal;
  --color: var(--pink);
  --banner-gradient: var(--pink);
}