/* ==========================================================================
   CARROSSEL DE DEPOIMENTOS — prefixo depo-
   Cabeçalho em duas colunas e uma esteira de cards brancos que não para,
   com as pontas desvanecendo.

   Tokens usados:
     --light             fundo do card
     --fg --fg-2 --fg-muted   nome, citação e área
     --rule              fio da borda do card
     --radius-media      canto do card
     --radius-pill       o retrato redondo
     --pad --max         a conta do recuo que alinha a esteira à coluna
     --ease              curva do projeto

   Sem JavaScript. O laço é CSS puro: o trilho anda -50%, que é a largura
   exata de um dos dois conjuntos idênticos.
   ========================================================================== */

.depo{
  --depo-card:340px;      /* largura do card */
  --depo-gap:20px;        /* vão entre um card e o próximo */
  --depo-dur:44s;         /* uma volta inteira. Três citações ≈ 44s. */

  /* SANGRIA SEM MARGEM NEGATIVA (§4). O cabeçalho vive dentro do .wrap; a
     esteira é IRMÃ dele, filha direta da seção, e por isso já nasce com a
     largura da página. O que falta é fazer o primeiro card começar na borda
     da coluna: é este recuo, que repete a conta do .wrap aplicada à esteira.
     Mesmo recurso do midia/galeria-scroll-horizontal. */
  --depo-inset:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));
}

/* ---------------------------------------------------------------- cabeçalho */
/* Título à esquerda, apoio à direita e alinhado À DIREITA. Não usa .sec-head
   do core de propósito: aquele é cabeçalho CENTRADO, e aqui os dois lados
   precisam se olhar de ponta a ponta da coluna. */
.depo-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(20px,3vw,32px);
  margin-bottom:clamp(30px,5vh,48px);
}
.depo-head-left{max-width:560px;min-width:0}

.depo-head-right{
  font-size:clamp(15px,1.25vw,18px);line-height:1.55;
  color:var(--fg-2);
  max-width:470px;
  text-align:right;
  flex:0 1 auto;
}

/* ---------------------------------------------------------------- esteira */
/* AS PONTAS. Só o recorte corta o card no meio com borda dura e o olho lê
   "quebrou". A máscara dissolve os dois lados em 5% da largura, que é onde
   a referência põe as paradas.

   Primeira máscara HORIZONTAL da biblioteca: as outras dez são o véu
   vertical sobre foto do §6. Se um terceiro componente pedir esta, ela é
   candidata a primitiva. */
.depo-rail{
  overflow:hidden;
  padding-inline:var(--depo-inset);
  /* O recorte come o anel de foco e a sombra do card nos dois eixos. */
  padding-block:8px;
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}

.depo-track{
  display:flex;
  width:max-content;
  animation:depoRun var(--depo-dur) linear infinite;
}

/* O padding-inline-end é o que mantém o vão na emenda entre as duas cópias:
   sem ele os dois conjuntos se encostam e o laço dá um solavanco visível a
   cada volta. */
.depo-set{
  display:flex;align-items:stretch;
  gap:var(--depo-gap);
  padding-inline-end:var(--depo-gap);
  margin:0;
}

/* Pausa no hover: quem quer ler uma citação inteira consegue parar a fila.
   É a única "navegação" da dobra, e basta. */
.depo:hover .depo-track{animation-play-state:paused}

@keyframes depoRun{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---------------------------------------------------------------- card */
.depo-card{
  flex:0 0 var(--depo-card);
  display:flex;flex-direction:column;
  padding:24px;
  background:var(--light);
  border:1px solid var(--rule);
  border-radius:var(--radius-media);
}

.depo-who{display:flex;align-items:flex-start;gap:12px}

.depo-face{
  width:44px;height:44px;flex:0 0 auto;
  border-radius:var(--radius-pill);
  object-fit:cover;
  /* O corte é por pessoa, não por regra: retrato de estúdio tem o rosto no
     terço de cima, foto de ambiente tem no meio. Cada card declara o seu no
     markup, como no conteudo/pilares-texto-na-foto. */
  object-position:var(--depo-face-pos,50% 30%);
  background:var(--rule);
}

.depo-id{display:flex;flex-direction:column;min-width:0}
.depo-name{font-size:16px;line-height:1.5;font-weight:600;color:var(--fg)}
.depo-role{font-size:14px;line-height:1.45;color:var(--fg-muted)}

.depo-quote{
  margin-top:16px;
  font-size:16px;line-height:1.62;
  color:var(--fg-2);
}

/* ---------------------------------------------------------------- movimento reduzido */
/* A esteira congela. Quem chega vê os três primeiros cards, parados — por
   isso o padrão editorial da ficha manda pôr os melhores em primeiro. */
@media(prefers-reduced-motion:reduce){
  .depo-track{animation:none}
}

/* ---------------------------------------------------------------- mobile */
@media(max-width:760px){
  .depo-head{flex-direction:column;gap:16px}
  /* Empilhado, alinhar o apoio à direita descola os dois blocos. */
  .depo-head-right{text-align:left;max-width:none}
  .depo{--depo-card:min(80vw,320px);--depo-gap:14px}
}