/* ds-carrossel */
.ds-carrossel { --_por-vista: 1; --_gap: var(--ds-espaco-4); position: relative; }
.ds-carrossel--varios { --_por-vista: 1; }
@media (min-width: 640px) { .ds-carrossel--varios { --_por-vista: 2; } }
@media (min-width: 1024px) { .ds-carrossel--varios { --_por-vista: 3; } }

.ds-carrossel__trilho {
  display: flex; gap: var(--_gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: var(--ds-raio-lg);
  padding-block: var(--ds-espaco-1);
}
.ds-carrossel__trilho::-webkit-scrollbar { display: none; }
.ds-carrossel__slide {
  flex: 0 0 calc((100% - (var(--_por-vista) - 1) * var(--_gap)) / var(--_por-vista));
  min-width: 0;
  scroll-snap-align: start;
}
.ds-carrossel__figura { margin: 0; }
.ds-carrossel__figura img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ds-raio-lg); }
.ds-carrossel__figura figcaption { margin-top: var(--ds-espaco-2); font-size: var(--ds-tamanho-pequeno); color: var(--ds-cor-texto-suave); }

.ds-carrossel__controles { display: flex; align-items: center; justify-content: center; gap: var(--ds-espaco-2); margin-top: var(--ds-espaco-4); }
.ds-carrossel:not([data-ds-pronto]) .ds-carrossel__controles { display: none; }
.ds-carrossel__botao {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex: none; cursor: pointer;
  border: var(--ds-borda-largura) solid var(--ds-cor-borda); border-radius: 50%;
  background: var(--ds-cor-superficie); color: var(--ds-cor-titulo);
  transition: background-color var(--ds-duracao) var(--ds-curva);
}
.ds-carrossel__botao:hover { background: var(--ds-cor-destaque); color: var(--ds-cor-sobre-destaque); }
.ds-carrossel__botao[hidden] { display: none; }
.ds-carrossel__i-play, .ds-carrossel--pausado .ds-carrossel__i-pausa { display: none; }
.ds-carrossel--pausado .ds-carrossel__i-play { display: block; }

.ds-carrossel__pontos { display: flex; flex-wrap: wrap; justify-content: center; }
.ds-carrossel__ponto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.ds-carrossel__ponto::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  border: var(--ds-borda-largura-forte) solid var(--ds-cor-titulo);
  transition: transform var(--ds-duracao) var(--ds-curva);
}
.ds-carrossel__ponto[aria-current="true"]::before { background: var(--ds-cor-titulo); transform: scale(1.2); }