/* ========================================
   DEPOIMENTOS — carrossel "Transformações Reais" (home)
   Refeito em 25/08/2026, sem o slider do Webflow.

   POR QUE NÃO USA MAIS O `w-slider`:
   O original tinha `.slider-mask.width-490px` com `max-width:480px` e
   `overflow:visible` — feito para ficar PARADO na posição 0, com os cards
   vazando para a direita. Ao ligar o autoplay, os 5 cards deslizaram para fora
   do container (medido: de -1920px a -43px) e a seção ficou VAZIA na tela.
   Antes disso ela já havia sumido duas vezes ao tentar igualar as alturas,
   porque `.slide-item-mg` É o próprio `.w-slide` — mexer no display dele
   derruba a fila inteira.
   Aqui a pista é própria: clipa de verdade, os cards nunca saem do container e
   a altura fica igual por `align-items: stretch`, sem JS para isso.

   ESTRELAS TORTAS (defeito antigo): `.padrao-img` centraliza com `margin:auto` +
   `display:inline-flex`, o que só funciona se o pai tiver `text-align:center`.
   Só o PRIMEIRO card tinha `.div-block-1089961`. Agora todos têm.
   ======================================== */

/* Sem respiro lateral: os cards ocupam a MESMA largura do resto da seção.
   As setas não moram mais aqui do lado — desceram para a linha das bolinhas. */
.dep-carrossel {
  position: relative;
}

.dep-janela {
  overflow: hidden;   /* aqui o card nunca escapa */
}

/* Alinha pelo TOPO, não `stretch`: com stretch todos os cards acompanhavam o
   mais alto e abriam junto quando um expandia. A altura igual dos fechados vem
   de um `min-height` que o JS calcula — assim só o card aberto passa desse piso. */
.dep-pista {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  will-change: transform;
  transition: transform .55s cubic-bezier(.22, .75, .25, 1);
}

@media (prefers-reduced-motion: reduce) {
  .dep-pista { transition: none; }
}

/* 3 cards por tela no desktop, descontando os vãos */
.dep-slide {
  flex: 0 0 calc((100% - 52px) / 3);
  max-width: none;
  margin-right: 0;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  /* `height:auto` é OBRIGATÓRIO aqui: `.slide-item-mg` traz `height:100%` do CSS
     antigo, e altura declarada num item de flex ANULA o `align-items:stretch` —
     era isso que deixava os cards com alturas diferentes (400/400/328/380/380). */
  height: auto;
}

/* ---------- o card ---------- */
/* Conteúdo alinhado AO TOPO. O box mantém a mesma altura (o piso vem do
   `min-height` que o JS calcula), mas o texto, o botão e a assinatura fluem a
   partir do topo em vez de a assinatura ficar colada no pé. Depoimento curto
   deixa a sobra embaixo, e não um vão no meio do card. */
.dep-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1 1 auto;
  text-align: center;
}

/* o texto ocupa a sobra e empurra a assinatura para o pé do card.
   `overflow:hidden` + transição de altura é o que deixa abrir/fechar suave:
   `height:auto` não anima, então o JS mede o destino e fixa em pixels. */
.dep-card__texto {
  flex: 0 0 auto;          /* não estica: o conteúdo fica encostado no topo */
  overflow: hidden;
  transition: height .42s cubic-bezier(.22, .75, .25, 1);
}

@media (prefers-reduced-motion: reduce) {
  .dep-card__texto { transition: none; }
}

.dep-card .uv-readmore-btn {
  align-self: center;
  margin-top: 14px;
}

.dep-card__rodape {
  padding-top: 18px;       /* sem `margin-top:auto`: nada é empurrado para o pé */
}

.dep-card .padrao-img {
  display: block;
  margin: 10px auto 0;
}

.dep-card .text-block-49 { text-align: center; }

/* Cópia oculta do texto completo (leitor de tela e busca).
   Esta regra também existe num <style> inline do bloco "Depoimentos reais de
   transformação". Repetir aqui é de propósito: sem ela, se aquele bloco mudar,
   o texto escondido VIRA TEXTO VISÍVEL e o depoimento aparece duplicado. */
.dep-card .uv-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- controles: seta · bolinhas · seta ---------- */
.dep-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 30px;
}

.dep-seta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  flex: none;
  border: 1px solid rgba(170, 126, 50, .35);
  border-radius: 50%;
  background: #fff;
  color: #aa7e32;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.dep-seta:hover {
  background: #aa7e32;
  border-color: #aa7e32;
  color: #fff;
}

.dep-seta:focus-visible {
  outline: 2px solid #aa7e32;
  outline-offset: 3px;
}

.dep-seta[disabled] { opacity: .3; cursor: default; }

.dep-seta--ant .dep-seta__ico { transform: rotate(180deg); }

.dep-seta__ico { display: flex; }
.dep-seta__ico svg { width: 20px; height: 20px; }

/* ---------- bolinhas ---------- */
.dep-bolinhas {
  display: flex;
  justify-content: center;
  gap: 9px;
}

.dep-bolinha {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(170, 126, 50, .3);
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}

.dep-bolinha.esta-ativa {
  width: 22px;
  border-radius: 5px;
  background: #aa7e32;
}

@media screen and (max-width: 991px) {
  .dep-slide { flex-basis: calc((100% - 26px) / 2); }
}

@media screen and (max-width: 767px) {
  .dep-pista { gap: 16px; }
  .dep-slide { flex-basis: 100%; }
  .dep-controles { gap: 14px; margin-top: 24px; }
  .dep-seta { width: 36px; height: 36px; }
}

/* ---------- cabeçalho da seção ----------
   Centralizado para acompanhar os cards, que passaram a ocupar a largura toda.
   O bloco tem `max-width:750px` e vinha alinhado à esquerda, o que deixava o
   título deslocado em relação ao carrossel. Só o ALINHAMENTO muda — o texto é
   o mesmo. */
.s-depoimentos .div-block-10848 {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.s-depoimentos .heading-8-co,
.s-depoimentos .paragraph-31 {
  text-align: center;
}