/* ============================================================
   Depoimento em pilha de fotos (07/10/2026)
   Foto na frente, as próximas inclinadas atrás; nome, papel,
   texto e duas setas do lado. Só anda quando a pessoa toca.
   Cores da marca com fallback, pra funcionar no site e no funil.
   ============================================================ */
.depo-pilha{
  --dp-texto:var(--base-clara,#ECEEE8);
  --dp-suave:var(--scarborough,#7F9394);
  --dp-aqua:var(--aqua-whisper,#C1DFE0);
  --dp-fundo-seta:rgba(193,223,224,0.10);
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(28px,6vw,72px);
  align-items:start;max-width:860px;margin:0 auto;font-family:var(--font,'Sora',sans-serif);
}
.depo-pilha[hidden]{display:none}

/* ---------- fotos ---------- */
.depo-pilha__fotos{position:relative;aspect-ratio:1/1;width:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.depo-pilha__foto{
  position:absolute;inset:0;margin:0;border-radius:22px;overflow:hidden;
  background:var(--depth-navy,#21323B);box-shadow:0 18px 50px -12px rgba(0,0,0,0.6);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s ease;will-change:transform;
}
.depo-pilha__foto img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
/* posições: 0 na frente, 1 e 2 inclinadas atrás, o resto escondido atrás da 2 */
.depo-pilha__foto[data-pos="0"]{transform:none;z-index:3;opacity:1}
.depo-pilha__foto[data-pos="1"]{transform:translate(-5%,4%) rotate(-7deg) scale(.96);z-index:2;opacity:1}
.depo-pilha__foto[data-pos="2"]{transform:translate(4%,2%) rotate(5deg) scale(.94);z-index:1;opacity:1}
.depo-pilha__foto[data-pos="x"]{transform:translate(4%,2%) rotate(5deg) scale(.9);z-index:0;opacity:0}
/* a que sai da frente passa por cima e vai pro fundo */
.depo-pilha__foto.saindo{z-index:4!important;transform:translate(-18%,6%) rotate(-12deg) scale(.92);opacity:.0}
.depo-pilha__foto.voltando{z-index:4!important;transition:none;transform:translate(-18%,6%) rotate(-12deg) scale(.92);opacity:0}
.depo-pilha__fotos.arrastando .depo-pilha__foto[data-pos="0"]{transition:none}

/* 13/10: coluna da foto leva as setas embaixo */
.depo-pilha__lado{min-width:0}
.depo-pilha__lado .depo-pilha__nav{justify-content:center}
.depo-pilha__corpo{padding-top:clamp(0px,2vw,18px)}

/* ---------- texto ---------- */
.depo-pilha__corpo{display:flex;flex-direction:column;min-width:0}
.depo-pilha__troca{transition:opacity .25s ease,transform .25s ease,filter .25s ease}
.depo-pilha__troca.trocando{opacity:0;transform:translateY(6px);filter:blur(3px)}
.depo-pilha__nome{font-size:clamp(1.2rem,2.6vw,1.45rem);font-weight:700;line-height:1.25;color:var(--dp-texto);margin:0}
.depo-pilha__papel{font-size:.82rem;line-height:1.45;color:var(--dp-suave);margin:4px 0 0}
.depo-pilha__texto{font-size:clamp(.98rem,1.9vw,1.08rem);line-height:1.75;color:rgba(236,238,232,0.72);margin:22px 0 0;text-wrap:pretty}
/* 13/10: relato longo (Manu) em fonte menor */
.depo-pilha__texto.depo-pilha__texto--longo{font-size:clamp(.86rem,1.5vw,.94rem);line-height:1.62}

.depo-pilha__nav{display:flex;align-items:center;gap:14px;margin-top:30px}
.depo-pilha__seta{
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:var(--dp-fundo-seta);color:var(--dp-texto);transition:background .2s ease,transform .2s ease;
}
.depo-pilha__seta:hover{background:rgba(193,223,224,0.2)}
.depo-pilha__seta:active{transform:scale(.94)}
.depo-pilha__seta:focus-visible{outline:2px solid var(--dp-aqua);outline-offset:3px}
.depo-pilha__conta{font-size:.75rem;color:var(--dp-suave);font-variant-numeric:tabular-nums;margin-left:4px}
.depo-pilha__leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- celular: foto em cima, texto embaixo ---------- */
@media (max-width:680px){
  .depo-pilha{grid-template-columns:1fr;gap:34px;max-width:420px}
  .depo-pilha__fotos{width:min(78vw,320px);margin:0 auto}
  .depo-pilha__nav{margin-top:24px}
}

@media (prefers-reduced-motion:reduce){
  .depo-pilha__foto,.depo-pilha__troca{transition:none}
  .depo-pilha__troca.trocando{filter:none;transform:none}
}