/* ---------- Carrossel de fotos do time ----------
   scroll-snap nativo: arrasta com o dedo sem biblioteca. As fotos têm
   proporções diferentes (retrato, quadrada, paisagem), então a moldura é
   fixa e a imagem preenche por cover. */
.carrossel{margin:2px 0 18px}

.carrossel__trilho{
  display:flex;
  min-width:0;
  max-width:100%;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}
.carrossel__trilho::-webkit-scrollbar{display:none}

.carrossel__item{
  position:relative;
  flex:0 0 min(190px, 54vw);
  scroll-snap-align:start;
  margin:0;
  border-radius:14px;
  overflow:hidden;
  background:var(--depth-navy);
  border:1px solid rgba(193,223,224,0.12);
}
.carrossel__item img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background:var(--depth-navy);
}
.carrossel__item figcaption{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:20px 11px 9px;
  background:linear-gradient(180deg,rgba(24,29,32,0) 0%,rgba(24,29,32,.92) 62%);
}
.carrossel__item figcaption strong{
  display:block;
  font-size:.78rem;
  font-weight:700;
  color:var(--base-clara);
  line-height:1.25;
}
.carrossel__item figcaption span{
  display:block;
  font-size:.65rem;
  line-height:1.35;
  color:var(--aqua-whisper);
  margin-top:2px;
}

.carrossel__pontos{
  display:flex;
  gap:6px;
  justify-content:center;
  margin-top:12px;
}
.carrossel__ponto{
  width:6px;height:6px;
  padding:0;border:0;
  border-radius:50%;
  background:var(--sc15);
  cursor:pointer;
  transition:background .25s,width .25s;
}
.carrossel__ponto.ativo{
  width:18px;
  border-radius:3px;
  background:var(--aqua-whisper);
}
@media (prefers-reduced-motion:reduce){
  .carrossel__ponto{transition:none}
  .carrossel__trilho{scroll-behavior:auto}
}

@media (max-width:600px){
  .carrossel__item{flex:0 0 min(158px, 44vw)}
  .carrossel__item figcaption{padding:18px 10px 8px}
  .carrossel{margin:0 0 12px}
}