/* debug: visualizar contornos */
/*.testimonial-inner    { outline: 2px dashed red    !important; }
.photos-track         { outline: 2px dashed blue   !important; }
.photos-track img     { outline: 1px dotted yellow !important; }
.testimonial-text     { outline: 2px dashed green  !important; } */

/* outline para debug */
/*.testimonial-inner    { outline: 2px dashed red    !important; }
.photos-track img      { outline: 1px dotted blue  !important; }
.testimonial-text     { outline: 2px dashed green  !important; } */

/* ===== Ajuste final: levanta linha, setas e barra verde em 16px ===== */
.testimonial-wrapper::before,
.testimonials-section .nav,
.progress-bar {
  position: absolute;
  top: calc(80px /* padding-top da sessão */
           + 246px /* altura da foto */
           - 16px  /* gap desejado (encaixa embaixo da foto) */)
       !important;
  transform: translateY(-50%) !important;
}

/* ===== testimonials-section.css ===== */



/* 1. Section wrapper e background */
.testimonials-section {
  background: #000;
  padding: 120px 0 120px;
  position: relative;
  color: #fff;
}

/* 2. Wrapper full-width + linha guia branca */
.testimonial-wrapper {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 16px;
}
.testimonial-wrapper::before {
  content: '';
  position: absolute;
  /* 80 (padding-top da seção) + 246 (altura da foto) - 16 (novo gap) */
  top: calc(80px + 246px - 16px);
  left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.3);
  z-index: 1;
}

/* 3. Viewport das miniaturas (1080px) */
.testimonial-inner {
  max-width: 1080px;
  margin: 0 auto;
  overflow: hidden;
}

/* 4. Track de miniaturas */
.photos-track {
  display: flex;
  gap: 32px;
  justify-content: flex-start;
  /* largura do track será 4×246 + 3×32 = 1080px */
}

/* 5. Miniaturas: 4×246px quadrados */
.photos-track img {
  flex: 0 0 calc((1080px - 3*32px) / 4);
  width: calc((1080px - 3*32px) / 4);
  height: calc((1080px - 3*32px) / 4);
  object-fit: cover;
  border-radius: 8px;
  opacity: 0.6;
  cursor: pointer;
}
.photos-track img.active {
  opacity: 1;
}

/* 6. Setas alinhadas à linha guia */
.testimonials-section .nav {
  position: absolute;
  /* mesma top da linha guia */
  top: calc(80px + 246px + 32px);
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: #fff !important;   /* branco sólido */
  opacity: 1 !important;         /* garante 100% de opacidade */
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  z-index: 2;
}
.testimonials-section .nav.prev { left: 0; color: #000;}
.testimonials-section .nav.next { right: 0; color: #000;}

/* 7. Progress bar verde */
.progress-bar {
  position: absolute;
  top: calc(80px + 246px + 32px);
  /* centraliza 1080px dentro do wrapper */
  left: calc((100% - 1080px) / 2);
  width: 1080px;
  height: 1px;
  z-index: 1;
}
.progress-line {
  position: absolute;
  top: -1px; /* sobe 1px pra encaixar na guia */
  left: 0;
  width: calc((1080px - 3*32px) / 4);
  height: 4px;
  background: #1AA53F;
  transition: left 0.4s ease;
  z-index: 2;
}

/* 8. Bloco de texto abaixo */
/* Empurra o texto para ficar totalmente *abaixo* da linha guia */
.testimonial-text {
  max-width: 1080px;
  /* 246px (altura da foto)
   + 32px  (gap foto→linha)
   + 4px   (espessura da linha)
   + 48px  (gap desejado até o texto)
   = 330px */
  margin: 130px auto 0 !important;
  display: flex;
  gap: 32px;
}

.testimonial-text .info {
  /* largura = 1 thumbnail (246px) */
  flex: 0 0 calc((1080px - 3*32px) / 4);
  text-align: left;
  line-height: 1.4;
}
.testimonial-text .content {
  flex: 1;
  text-align: justify;
}
.testimonial-text .title {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 12px;
}
.testimonial-text .depoimento {
  font-size: 18px;
  line-height: 1.6;
}



@media (max-width: 768px) {
  .testimonial-wrapper::before,
  .progress-bar {
    top: 0 !important;
    transform: none !important;
  }

  .testimonial-inner {
    overflow: hidden !important;
    padding-bottom: 24px !important;
  }

  .photos-track {
    flex-wrap: nowrap !important;
    gap: 0 !important;
    transition: transform 0.5s ease !important;
  }

  .photos-track img {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  .testimonial-text {
    flex-direction: column !important;
    margin: 24px auto 0 !important;
    padding: 0 16px !important;
    gap: 16px !important;
  }

  .testimonial-text .info {
    flex: none !important;
    width: 100% !important;
    text-align: center !important;
  }

  .testimonial-text .content {
    flex: none !important;
    width: 100% !important;
    text-align: justify !important;
  }

  .testimonial-text .title {
    font-size: 1.5rem !important;
  }

  .testimonial-text .depoimento {
    font-size: 1rem !important;
  }

  .testimonials-section .nav {
    display: flex !important;
    top: 60% !important;
    transform: translateY(-50%) !important;
    background: rgba(255,255,255,0.7) !important;
    color: #000 !important;
  }

  .testimonials-section .nav.prev { left: 16px !important; }
  .testimonials-section .nav.next { right: 16px !important; }
}




/* === testimonials-mobile.css === */
.testimonials-mobile {
  display: none;
  background: #000;
  padding: 80px 0;
  color: #fff;
  position: relative;
}

.testimonial-mobile-inner {
  position: relative;
  overflow: hidden;
  padding: 0 16px;
}

.testimonial-mobile-track {
  display: flex;
  transition: transform 0.5s ease;
}

.testimonial-mobile-item {
  flex: 0 0 100%;
  text-align: center;
  padding: 40px 16px; /* Respira melhor */
}

.testimonial-mobile-item img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
}

.testimonial-mobile-item h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.testimonial-mobile-item p {
  font-size: 1rem;
  line-height: 1.4;
}

/* SETAS CORRETAS */
.testimonial-mobile-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: none;
  color: #fff;
  font-size: 32px;
  line-height: 36px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  z-index: 10; /* z-index maior que o fade (5) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.testimonial-mobile-nav.prev {
  left: 24px; /* afastamos um pouco mais pra dentro do fade */
}

.testimonial-mobile-nav.next {
  right: 24px;
}


/* MOBILE: ativa só no celular */
@media (max-width: 768px) {
  .testimonials-section { display: none; }
  .testimonials-mobile  { display: block; }
}

@media (max-width: 767px) {

  .mobile-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: none;
    color: #fff;
    font-size: 32px;
    line-height: 36px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .mobile-nav.prev {
    left: 15px;
  }

  .mobile-nav.next {
    right: 15px;
  }

}