.banner {
  margin: var(--spacing-xl) var(--spacing-lg);
  border-radius: var(--border-radius-xl);
  background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a1a 100%);
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-height: 400px;
}

.banner__container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.banner__content {
  display: flex;
  transition: transform 0.6s ease-in-out;
  height: 100%;
}
.banner__slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}

.banner__video,
.banner__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  background-color: #000;
}
/*.banner__video[poster] {
  background-size: cover;
  background-position: center;
}
.banner__item {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; 
  overflow: hidden;
}*/

.banner__pagination {
  position: absolute;
  bottom: var(--spacing-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--spacing-sm);
  z-index: 10;
}
.banner__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.banner__dot--active {
  background-color: white;
  width: 14px;
  border-radius: 40%;
}

/* ===============================
   CORREÇÃO DE COMPATIBILIDADE SAFARI (iOS)
   =============================== */
@supports (-webkit-touch-callout: none) {
  .banner {
    /* Safari às vezes ignora aspect-ratio em elementos com overflow hidden */
    aspect-ratio: auto;
    height: calc(100vw * 9 / 16);
    max-height: 400px;
  }

  .banner__video,
  .banner__image {
    /* força o Safari a respeitar o preenchimento */
    object-fit: cover;
    width: 100%;
    height: 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .banner__container {
    /* evita glitch em slides com transição */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
}