/* Depoimentos com foto — usada na home e no single de material.
   Fundo escuro (índigo), como a seção de aprovados da home. Depende dos tokens
   :root da home.css. Carrega nas duas telas. */

.dep{background:var(--indigo-900);color:#fff}
.dep .eyebrow{color:#ffd7a1}
.dep .sec-head h2{font-size:clamp(28px,3.6vw,42px);font-weight:900}
/* Carrossel de depoimentos: sem JS o track empilha as páginas (tudo visível, não
   clipa nas telas de material que não carregam o home.js); no home o JS adiciona
   .is-carousel e vira slider de 9 em 9 com autoplay. Pedido do Davi. */
.dep-carousel{position:relative}
.dep-track{display:flex;flex-direction:column;gap:20px}
.dep-page{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-content:start}
/* A altura do viewport segue a pagina ATIVA (o home.js escreve o height). Sem
   isso o flex esticava todas as paginas ate a mais alta, e uma pagina incompleta
   (com 15 depoimentos a 2a tem 6 cards, nao 9) abria uma linha vazia embaixo. */
.dep-carousel.is-carousel .dep-viewport{overflow:hidden;transition:height .6s cubic-bezier(.4,0,.2,1)}
.dep-carousel.is-carousel .dep-track{flex-direction:row;gap:0;align-items:flex-start;transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}
.dep-carousel.is-carousel .dep-page{flex:0 0 100%;min-width:0}
.dep-dots{display:flex;gap:9px;justify-content:center;margin-top:26px}
.dep-dot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.28);cursor:pointer;padding:0;transition:.2s}
.dep-dot.is-active{background:#ffd7a1;transform:scale(1.25)}
.dep-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);padding:24px;margin:0;display:flex;flex-direction:column;gap:14px}
.dep-who{display:flex;align-items:center;gap:13px}
.dep-face{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:top center;
  flex-shrink:0;background:rgba(255,255,255,.1);border:2px solid rgba(255,215,161,.5)}
/* Nome do aprovado em branco puro: sem cor explicita ele herdava um tom abafado
   (regra global de figcaption vencia a heranca do branco do .dep). Pedido do Davi. */
.dep-who b{font-size:16px;font-weight:800;display:block;letter-spacing:-.01em;color:#fff}
.dep-who span{display:block;color:#ffd7a1;font-size:12.5px;font-weight:700;margin-top:2px}
.dep-card blockquote{margin:0;color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.55}

@media(max-width:960px){ .dep-page{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .dep-page{grid-template-columns:1fr} }

/* Depoimentos em VÍDEO (28/09/2026): faixa com rolagem lateral acima dos cards.
   Só miniatura + botão; o <video>/<iframe> nasce no clique (edd-core,
   assets/dep-video.js). A caixa guarda a proporção antes e depois do clique,
   então a troca não pula o layout. A rolagem fica DENTRO da faixa: a página
   não ganha rolagem horizontal no celular. */
.dep-videos{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding:4px 2px 14px;margin:0 0 34px;justify-content:safe center;
  scrollbar-width:thin;scrollbar-color:rgba(255,215,161,.45) transparent}
.dep-video{margin:0;flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;gap:10px}
.dep-video-box{position:relative;height:400px;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;
  background:#0b0b1a;border:1px solid rgba(255,255,255,.14)}
.dep-video--horizontal .dep-video-box{aspect-ratio:16/9}
.dep-video-play{all:unset;box-sizing:border-box;position:absolute;inset:0;cursor:pointer;display:block}
.dep-video-play:focus-visible{outline:3px solid #ffd7a1;outline-offset:-3px}
.dep-video-capa{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.dep-video-play:hover .dep-video-capa{transform:scale(1.03)}
.dep-video-icone{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  background:var(--red);box-shadow:0 6px 24px rgba(0,0,0,.4);transition:transform .2s ease}
.dep-video-icone::after{content:"";position:absolute;left:26px;top:20px;border-style:solid;border-width:12px 0 12px 19px;
  border-color:transparent transparent transparent #fff}
.dep-video-play:hover .dep-video-icone{transform:scale(1.08)}
.dep-video-midia{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000;object-fit:contain}
.dep-video figcaption{max-width:100%}
.dep-video--vertical figcaption{width:225px}
.dep-video figcaption b{display:block;color:#fff;font-size:15px;font-weight:800;letter-spacing:-.01em}
.dep-video figcaption span{display:block;color:#ffd7a1;font-size:12.5px;font-weight:700;margin-top:2px}
@media(max-width:560px){
  .dep-video-box{height:auto;width:62vw;max-width:240px}
  .dep-video--horizontal .dep-video-box{width:84vw;max-width:none}
  .dep-video--vertical figcaption{width:62vw;max-width:240px}
  .dep-video--horizontal figcaption{width:84vw}
}