/* ===============================
   HERO (shortcode [vc_hero])
   =============================== */
.vc-hero {
  position: relative;
  height: 100vh;
}

/* ===============================
   Controles (Pacientes | Médicos | Maternidade)
   =============================== */
.vc-hero .hero-controls {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  z-index: 9999;
}
@media screen and (max-width: 768px) {
  .vc-hero .hero-controls { justify-content: center !important; }
}

.vc-hero .hero-toggle {
  padding: 10px 25px;
  border: 1px solid #ffffff;
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
  transition: all 0.3s ease;
}
.vc-hero .hero-toggle:hover,
.vc-hero .hero-toggle.active {
  background: var(--azul-cta);
  border-color: var(--azul-cta);
  color: #ffffff;
}
.vc-hero .hero-toggle.active { font-weight: bold; }

/* ===============================
   Slider
   =============================== */
.vc-hero .hero-slider .slide-item {
  position: relative;
  height: 100vh;
  background: center center / cover no-repeat;
}
.vc-hero .hero-slider .slide-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.7) 0%,
    rgba(0,0,0,0.4) 40%,
    rgba(0,0,0,0) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.slide-item .container { max-width: 70%; }

.vc-hero .hero-slider .slide-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: 650px;
  z-index: 2;
  color: #fff;
}

.vc-hero .slide-content h2 {
  font-size: clamp(1.2rem, 5vw, 3.6rem);
  font-weight: normal;
}

.vc-hero .slide-content h3 {
  font-size: clamp(1rem, 3vw, 2rem);
  font-weight: 100;
}

/* Ajuste para monitores médios (1280x768) */
@media (max-width: 1366px) {
  .vc-hero .slide-content h2 {
    font-size: clamp(1rem, 4vw, 2.5rem);
  }
  .vc-hero .slide-content h3 {
    font-size: clamp(0.9rem, 2.5vw, 1.4rem);
  }
  .vc-hero a.hero-btn span {
    font-size: 18px !important;
    line-height: 20px !important;
  }
  .vc-hero a.hero-btn i {
    font-size: 24px !important;
  }
  .vc-hero a.hero-btn span i {
    font-size: 12px !important;
  }
  .vc-hero .hero-buttons {
    top: -190px !important;
  }
}

/* Ajuste para celulares */
@media (max-width: 768px) {
  .vc-hero .slide-content h2 {
    font-size: clamp(0.9rem, 5vw, 2.4rem);
  }
  .vc-hero .slide-content h3 {
    font-size: clamp(0.8rem, 4vw, 1.4rem);
  }
}

.vc-hero .slide-content h1 strong,
.vc-hero .slide-content h2 strong { font-weight: 900; }

/* Botões dentro do conteúdo */
.vc-hero .slide-content .btn {
  padding: 10px 25px;
  border: 1px solid #ffffff;
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  margin-top: 10px;
}

/* ===============================
   Slick (setas e dots)
   =============================== */
   .slick-next:before, .slick-prev:before {
    display: none;
   }
.vc-hero .slick-prev,
.vc-hero .slick-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: none;
  border: none;
  color: transparent;
  font-size: 0; /* esconde texto */
  z-index: 10;
}
.vc-hero .slick-prev { left: 10%; }
.vc-hero .slick-next { right: 10%; }
.vc-hero .slick-arrow i {
  width: 45px;
  height: 45px;
  font-size: 45px;
  line-height: 45px;
  color: #FFF !important;
}
.vc-hero ul.slick-dots { bottom: 5px !important; }
.vc-hero .slick-dots li button:before {
  color: #fff !important;
  opacity: 0.5;
  font-size: 14px;
}
.vc-hero .slick-dots li.slick-active button:before { opacity: 1; }

/* ===============================
   Botões abaixo do slider
   =============================== */
.vc-hero .hero-buttons { position: relative; top: -220px; }

.vc-hero .hero-buttons .buttons-set {
  display: flex;
  gap: 20px;
}

.vc-hero .hero-buttons-set {
  display: none;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}
.vc-hero .hero-buttons-set.is-active { display: flex; }

/* Forçar botões ativos na página 147 */
.page-id-147 .vc-hero .hero-buttons-set { display: flex; }

/* Botões grandes estilo cartão */
.vc-hero a.hero-btn {
  position: relative;
  width: 215px;
  padding: 20px;
  background: rgba(213,223,226,0.8);
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  text-align: center;
  color: #27495C;
  text-decoration: none;
  align-items: center;
  gap: 10px;
}
.vc-hero a.hero-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 12px;
  background: #133c55;
  border-radius: 2px;
}
.vc-hero a.hero-btn i { font-size: 32px; }
.vc-hero a.hero-btn span { 
  font-size: 22px;
  height: 100%;
  line-height: 28px;
  margin-bottom: 12px;
}
.page-id-147 a.hero-btn span { 
  display: flex !important;
  align-items: center !important;
 }
.vc-hero a.hero-btn span i { font-size: 14px; }

/* ===============================
   Utilitários
   =============================== */
.vc-hero .is-hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: -9999px;
}

/* ===============================
   Responsivo
   =============================== */
@media screen and (max-width: 540px) {
  .vc-hero,
  .vc-hero .hero-slider .slide-item { height: 100vh; }

  .vc-hero .hero-slider .slide-content {
    top: 50%;
    transform: translateY(-25%);
    width: 100% !important;
    max-width: 100% !important;
    left: 0;
    padding: 0 20px;
    text-align: center;
  }

  .vc-hero .hero-buttons .buttons-set {
    display: flex;
    flex-wrap: wrap;         /* permite quebrar linha */
    gap: 15px;               /* espaçamento mais suave */
    justify-content: center; /* centraliza os botões */
  }

  .vc-hero .hero-buttons-set {
    flex-direction: column;
    gap: 10px;
  }

  .vc-hero a.hero-btn {
    width: 45% !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 5px !important;
  }
  .vc-hero a.hero-btn::after { height: 0 !important; }
  .vc-hero a.hero-btn span {
    font-size: 16px !important;
    line-height: 16px;
    margin: 0 !important;
    padding: 7px !important;
  }
  .vc-hero a.hero-btn i { display: none; }
  .vc-hero a.hero-btn i.fa-arrow-up-right-from-square {
    font-size: 10px !important;
    margin-left: 3px !important;
  }

  .vc-hero .hero-buttons {
    position: absolute;
    top: 75vh;
  }
}
/* ===============================
   Responsivo intermediário (540px–860px)
   =============================== */
@media screen and (min-width: 540px) and (max-width: 860px) {
  .vc-hero .hero-buttons .buttons-set {
    display: flex;
    flex-wrap: wrap;         /* permite quebrar linha */
    gap: 15px;               /* espaçamento mais suave */
    justify-content: center; /* centraliza os botões */
  }

  .vc-hero .hero-buttons .buttons-set a.hero-btn {
    flex: 1 1 45%;           /* até 2 por linha */
    max-width: 250px;        /* limita crescimento exagerado */
    padding: 12px;           /* reduz altura */
  }

  .vc-hero .hero-buttons .buttons-set a.hero-btn span {
    font-size: 18px;
  }
}