/* ==========================================================================
   DEPOIMENTOS — duas faixas em movimento com cartões de alunos
   ========================================================================== */

.depoimentos {
  width: 100%;
  padding: 90px 0;
}

.depoimentos .faixas {
  display: flex;
  flex-direction: column;
  gap: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent);
}

.depoimentos .faixa {
  display: flex;
  width: max-content;
  padding: 16px 0;
}

.depoimentos .faixa .lista {
  display: flex;
  gap: 20px;
  padding: 0 10px;
}

.js .depoimentos .faixa {
  animation: rolar-faixa 70s linear infinite;
  will-change: transform;
}

.js .depoimentos .faixa.volta {
  animation-direction: reverse;
  animation-duration: 80s;
}

.depoimentos .faixas:hover .faixa {
  animation-play-state: paused;
}

/* Cartão */
.depoimentos .cartao {
  display: flex;
  flex-direction: column;
  width: 360px;
  padding: 12px;
  transition: translate .35s var(--curva), border-color .26s var(--curva);
}

.depoimentos .cartao .citacao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 150px;
  padding: 22px 22px 20px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--bolha-borda);
  background: var(--fundo-elevado);
  isolation: isolate;
  box-shadow: 0 0 34px #6217ec38, 0 14px 34px #04020a8c;
  transition: border-color .35s ease, box-shadow .35s ease;
}

.depoimentos .cartao .citacao .brilho {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity .35s ease;
}

.depoimentos .cartao .citacao .brilho.b1 {
  top: -40%;
  left: -18%;
  width: 70%;
  height: 90%;
  background: radial-gradient(circle, var(--cor-roxo-claro) 0, transparent 68%);
  opacity: .32;
}

.depoimentos .cartao .citacao .brilho.b2 {
  right: -20%;
  bottom: -40%;
  width: 80%;
  height: 100%;
  background: radial-gradient(circle, var(--cor-roxo) 0, transparent 70%);
  opacity: .5;
}

.depoimentos .cartao .citacao .aspas {
  width: 26px;
  height: 26px;
  fill: var(--cor-roxo-claro);
  opacity: .9;
}

.depoimentos .cartao .citacao p {
  font-size: var(--f3);
  line-height: 1.5;
  color: var(--cor-texto);
}

.depoimentos .cartao .autor {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 8px 6px;
}

.depoimentos .cartao .autor .foto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  border: 1px solid var(--bolha-borda-forte);
  background: linear-gradient(180deg, var(--cor-roxo-claro), var(--cor-roxo));
  font-size: var(--f2);
  color: var(--cor-branco-fixo);
  box-shadow: inset 0 1px #ffffff4d;
}

.depoimentos .cartao:nth-child(3n + 2) .autor .foto { background: linear-gradient(180deg, #7dffd2, #12a876); }
.depoimentos .cartao:nth-child(3n + 3) .autor .foto { background: linear-gradient(180deg, #ffb3cf, #e0336f); }

.depoimentos .cartao .autor .quem {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.depoimentos .cartao .autor .quem strong {
  font-size: var(--f2);
  color: var(--cor-texto);
}

.depoimentos .cartao .autor .quem span {
  font-size: var(--f1);
  color: var(--cor-cinza);
}

.depoimentos .cartao:hover {
  translate: 0 -6px;
}

.depoimentos .cartao:hover .citacao {
  border-color: var(--cor-roxo);
  box-shadow: 0 0 56px #6217ec70, 0 18px 44px #04020a99;
}

.depoimentos .cartao:hover .citacao .brilho.b1 { opacity: .55; }
.depoimentos .cartao:hover .citacao .brilho.b2 { opacity: .8; }

@keyframes rolar-faixa {
  0% { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Mobile ---------- */
@media screen and (max-width: 1000px) {
  .depoimentos {
    padding: 52px 0;
  }

  .depoimentos .faixas {
    gap: 8px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .depoimentos .faixa .lista {
    gap: 12px;
    padding: 0 6px;
  }

  .depoimentos .cartao {
    width: 290px;
    padding: 10px;
  }

  .depoimentos .cartao .citacao {
    min-height: 140px;
    padding: 18px;
  }

  .depoimentos .cartao .citacao p {
    font-size: var(--f2);
  }
}

/* Sem JS ou sem animação: vira rolagem horizontal manual */
html:not(.js) .depoimentos .faixas {
  overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
  .depoimentos .faixas {
    overflow-x: auto;
  }
}