.field--name-field-hero-banner.slick-dotted.slick-slider {
  margin: 0;
}

.hero-banner {
  position: relative;
  overflow: hidden;
  height: 99vh;
  opacity: 0; /* Estado inicial invisível */
  animation: fadeIn 1s ease-in-out forwards;
}

/* Define a animação que fará o fade in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero-media img,
.hero-video,
.hero-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: relative;
  /* z-index: 1; */
  display: flex;
  align-items: center;
  height: 100%;
}

.hero-content {
  background: linear-gradient(
    78.9deg,
    rgba(104, 0, 255, 0.15) -1.67%,
    rgba(252, 250, 255, 0.15) 25.87%,
    rgba(252, 250, 255, 0.15) 49.69%,
    rgba(252, 250, 255, 0.15) 72.99%,
    rgba(221, 47, 143, 0.15) 100%
  );
  backdrop-filter: blur(158px);
  border-radius: 12px;
  padding: 2rem;
  color: #fff;
  max-width: 450px;
  text-align: left;
}

.hero-content .hero-title {
  font-size: var(--fs-h4); /* Substituído 28px por var(--fs-h3) */
  line-height: 135%;
  font-weight: 700;
  letter-spacing: 0%;
  vertical-align: middle;
  margin-bottom: 30px;
}

.hero-content .hero-description {
  font-size: var(--fs-h5); /* Substituído 24px por var(--fs-h4) */
  line-height: 135%;
  font-weight: 400;
  letter-spacing: 0%;
  vertical-align: middle;
}

.hero-link-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-link {
  font-size: var(--fs-h5); /* Changed from 24px to var(--fs-h4) */
  font-weight: 700;
  text-decoration: none;
  color: #fffffa;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* Garantir que os dots sejam exibidos corretamente */
.hero-dots {
  display: block !important;
  position: relative;
  margin-top: 20px;
}

/* Estilo para os dots */
.hero-dots .slick-dots {
  display: flex !important;
  justify-content: flex-end;
  position: relative;
  gap: 8px;
  bottom: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Botões dos dots */
.hero-dots .slick-dots li {
  margin: 0;
  padding: 0;
}

.hero-dots .slick-dots li button {
  all: unset;
  display: inline-block !important;
  cursor: pointer;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.3s ease;
  text-indent: -9999px;
  overflow: hidden;
  padding: 0;
}

/* Dot ativo (slide atual) vira "pílula" */
.hero-dots .slick-dots li.slick-active button {
  width: 30px !important;
  border-radius: 15px !important;
  opacity: 1 !important;
}

/* Vídeo e imagem não interativos */
.no-interaction,
.no-interaction * {
  pointer-events: none !important;
  user-select: none !important;
}

.hero-video,
.hero-video-wrapper iframe,
.hero-media img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

/* ──────── RESPONSIVO ──────── */

/* Desktop: 1024px até 1439px */
@media (max-width: 1439px) {
  .hero-content .hero-title {
    font-size: var(--fs-h4);
  }

  .hero-content .hero-description {
    font-size: var(--fs-h5);
  }
}

/* Tablet: 720px até 1023px */
@media (max-width: 1023px) {
  .hero-content .hero-title {
    font-size: var(--fs-h6);
  }

  .hero-content .hero-description {
    font-size: var(--fs-body);
  }

  .hero-content .hero-link {
    font-size: var(--fs-body);
  }
}

/* Mobile: até 719px */
@media (max-width: 719px) {
  .hero-content .hero-title {
    font-size: var(--fs-h6);
  }

  .hero-content .hero-description {
    font-size: var(--fs-body);
  }
}