/* ==========================================================================
   BANNERS DA HOME (carrossel de imagens). Carregado só na home, depois de site.css.
   Desktop: arte 1920 × 640 px (3:1). Celular: arte 1080 × 1080 px (1:1).
   ========================================================================== */

.carrossel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.carrossel__trilho {
  position: relative; display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; border-radius: var(--raio-grande); background: var(--cor-palco);
}
/* Com JavaScript as setas e os pontos fazem a navegação, então a barra de rolagem some */
.js .carrossel__trilho { scrollbar-width: none; }
.js .carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }

.banner-arte { display: block; aspect-ratio: 1; }
.banner-arte picture { display: block; height: 100%; }
.banner-arte img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 720px) { .banner-arte { aspect-ratio: 3 / 1; } }

/* ---------- Setas, pontos e pausa (criados pelo banners.js) ---------- */
.carrossel__controles { display: flex; align-items: center; justify-content: center; }
.carrossel__controles button {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--cor-texto); transition: background-color .2s;
}
.carrossel__controles button:hover { background: var(--cor-palco); }
.carrossel__controles svg { width: 22px; height: 22px; }
.carrossel__ponto::before {
  content: ''; width: 10px; height: 10px; border-radius: 999px; background: var(--cor-superficie);
  border: 2px solid var(--cor-texto-suave); transition: width .25s, background-color .25s, border-color .25s;
}
.carrossel__ponto[aria-current="true"]::before { width: 26px; background: var(--cor-marca); border-color: var(--cor-marca); }