/* ===========================================================
   FEEDBACKS — cards que viram no scroll
   Frente: logo do cliente. Verso: o depoimento.
   Ao entrar na dobra, todos viram (rotateY) em cascata da
   esquerda pra direita. O giro fica no .testi-card__inner; o
   gatilho (is-flipped) vem do observer no script inline.
   =========================================================== */
.testi{
  position:relative;
  background:var(--bg);
  padding:120px 20px 140px;
}

.testi__inner{
  max-width:1240px;
  margin-inline:auto;
}

.testi__title{
  font-size:clamp(44px,8vw,72px);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1;
  color:var(--cream);
}

/* O título sozinho não dizia de onde vinham os depoimentos. Este lead
   existe pra isso, e usa a mesma régua do lead da dobra Prova. */
.testi__lead{
  max-width:54ch;
  margin-top:18px;
  margin-bottom:clamp(40px,6vh,64px);
  font-size:clamp(15px,1.4vw,18px);
  font-weight:300;
  letter-spacing:-0.02em;
  line-height:1.5;
  color:var(--cream-50);
}

/* ---------- grade ---------- */
.testi__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(14px,1.6vw,22px);
}

/* ---------- card (flip) ---------- */
.testi-card{
  perspective:1400px;
  aspect-ratio:4/5;
}

.testi-card__inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .78s cubic-bezier(.2,.8,.2,1);
  transition-delay:0ms;
}

.testi-card.is-flipped .testi-card__inner{transform:rotateY(180deg);}

.testi-card__face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:18px;
  background:linear-gradient(155deg, var(--surface-1), var(--black-deep));
  border:1px solid var(--cream-10);
  overflow:hidden;
}

/* frente: logo centralizado */
.testi-card__face--front{
  display:grid;
  place-items:center;
  padding:24px;
}

.testi-card__mark{
  width:clamp(48px,30%,72px);
  height:auto;
  color:var(--cream);
  opacity:.9;
}

.testi-card__mark--word{
  width:auto;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1;
}

/* verso: depoimento + autor */
.testi-card__face--back{
  transform:rotateY(180deg);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
  padding:clamp(22px,2vw,28px);
}

.testi-card__quote{
  font-size:clamp(14px,1vw,15px);
  font-weight:400;
  letter-spacing:-0.01em;
  line-height:1.5;
  color:var(--cream-90);
}

.testi-card__author{
  display:flex;
  align-items:center;
  gap:12px;
}

.testi-card__avatar{
  flex-shrink:0;
  width:38px;
  height:38px;
  border-radius:50%;
  object-fit:cover;
  background:var(--surface-2);
  border:1px solid var(--cream-10);
}

.testi-card__who b{
  display:block;
  font-size:13px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--cream);
}

.testi-card__who span{
  display:block;
  font-size:12px;
  font-weight:300;
  color:var(--cream-50);
}

@media (min-width:600px){
  .testi__grid{grid-template-columns:repeat(2,1fr);}
}

@media (min-width:960px){
  .testi{padding:160px 5vw 180px;}
  .testi__grid{grid-template-columns:repeat(3,1fr);}
}

/* reduced-motion: sem giro; o observer ainda vira, mas instantâneo,
   pra o depoimento aparecer sem movimento */
@media (prefers-reduced-motion:reduce){
  .testi-card__inner{transition:none;}
}