/* =========================================================
   DEPOIMENTOS EM VÍDEO — carrossel usado em todas as empresas.
   Título e texto usam as classes do próprio template; aqui ficam só
   o carrossel, os cartões e as setas. A cor vem de --dep-cor (cor da empresa).
   ========================================================= */
.sac-dep { text-align: center; }
.sac-dep-wrap { max-width: 1080px; }
.sac-dep-carrossel { position: relative; margin: 6px -16px 0; }
.sac-dep-trilho {
    list-style: none; margin: 0; padding: 4px 16px 14px;
    display: flex; gap: 14px; align-items: flex-start;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sac-dep-trilho::-webkit-scrollbar { display: none; }
.sac-dep-trilho:focus-visible { outline: 3px solid var(--dep-cor, #2563EB); outline-offset: 2px; }

/* Cartões: horizontal (vídeo comum) e vertical (Shorts) */
.sac-dep-card { flex: 0 0 82%; max-width: 420px; scroll-snap-align: start; text-align: left; }
.sac-dep-card--vertical { flex-basis: 58%; max-width: 260px; }
.sac-dep-video {
    position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000;
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .55);
}
.sac-dep-card--vertical .sac-dep-video { aspect-ratio: 9 / 16; }
.sac-dep-video iframe, .sac-dep-capa, .sac-dep-capa img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sac-dep-capa { padding: 0; margin: 0; cursor: pointer; background: #000; }
.sac-dep-capa img { object-fit: cover; opacity: .92; transition: opacity .2s, transform .3s; }
.sac-dep-capa:hover img { opacity: 1; transform: scale(1.03); }
.sac-dep-capa:focus-visible { outline: 3px solid var(--dep-cor, #2563EB); outline-offset: -3px; }
.sac-dep-play {
    position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--dep-cor, #2563EB); box-shadow: 0 0 0 8px rgba(255, 255, 255, .25), 0 8px 20px rgba(0, 0, 0, .35);
}
.sac-dep-play svg { width: 26px; height: 26px; fill: var(--dep-cor-txt, #fff); margin-left: 3px; }
.sac-dep-nome { margin: 10px 2px 0; font-weight: 700; font-size: 16px; line-height: 1.3; }
.sac-dep-legenda { margin: 2px 2px 0; font-size: 14px; line-height: 1.4; opacity: .75; }
.sac-dep-dica { font-size: 13px; opacity: .65; }

/* Navegação: no celular mostra a dica "arraste"; no computador mostra as setas */
.sac-dep-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 2px; }
.sac-dep-seta {
    display: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    border: 2px solid var(--dep-cor, #2563EB); background: transparent; color: var(--dep-cor, #2563EB);
    transition: background .15s, color .15s, opacity .15s;
}
.sac-dep-seta:hover:not(:disabled) { background: var(--dep-cor, #2563EB); color: var(--dep-cor-txt, #fff); }
.sac-dep-seta:disabled { opacity: .3; cursor: default; }
.sac-dep-seta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sac-dep-seta:focus-visible { outline: 3px solid var(--dep-cor, #2563EB); outline-offset: 2px; }
.sac-dep-sem-rolagem .sac-dep-nav { display: none; }

@media (min-width: 720px) {
    .sac-dep-carrossel { margin: 6px 0 0; }
    .sac-dep-trilho { padding: 4px 4px 14px; scroll-padding: 0 4px; gap: 18px; }
    .sac-dep-card { flex-basis: calc((100% - 36px) / 3); }
    .sac-dep-card--vertical { flex-basis: calc((100% - 54px) / 4); }
    .sac-dep-seta { display: grid; }
    .sac-dep-dica { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sac-dep-trilho { scroll-behavior: auto; }
    .sac-dep-capa img { transition: none; }
}