/* =========================================================
   HERO BANNER — CARROSSEL AUTOMÁTICO
   Exibe os banners reais (com texto, CTA e identidade já
   desenhados na própria imagem) em formato wide, sem overlay.
   ========================================================= */

.hero-banner {
  position: relative;
  margin-top: calc(var(--player-h) + var(--header-h));
  width: 100%;
  aspect-ratio: 2076 / 757;
  max-height: 740px;
  overflow: hidden;
  background: var(--preto);
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s ease;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-slide .hs-link {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-slide .hs-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.0);
  animation: kenburns 9s ease-out forwards;
}

@keyframes kenburns {
  0%   { transform: scale(1.0); }
  100% { transform: scale(1.045); }
}

/* Indicadores do carrossel */
.hero-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 10px;
}
.hero-dots button {
  width: 34px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.3);
  transition: background var(--transition-base);
  position: relative;
  overflow: hidden;
}
.hero-dots button.active { background: rgba(255,255,255,0.4); }
.hero-dots button.active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradiente-dourado);
  animation: dotProgress 6s linear forwards;
}
@keyframes dotProgress {
  from { width: 0%; }
  to { width: 100%; }
}

.hero-arrows {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  justify-content: space-between;
  padding: 0 18px;
  pointer-events: none;
}
.hero-arrows button {
  pointer-events: all;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(8,26,54,0.55);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-base);
}
.hero-arrows button:hover {
  background: var(--gradiente-dourado);
  box-shadow: var(--shadow-gold-glow);
}
.hero-arrows button svg { width: 17px; height: 17px; stroke: var(--branco); fill: none; transition: stroke var(--transition-base); }
.hero-arrows button:hover svg { stroke: var(--preto); }

/* Em telas pequenas, a proporção wide do banner fica baixa demais para o
   texto embutido na imagem permanecer legível — usamos altura mínima e
   priorizamos a metade esquerda (onde está o texto) via object-position. */
@media (max-width: 720px) {
  .hero-banner { aspect-ratio: auto; height: 56vw; min-height: 260px; max-height: 420px; }
  .hero-slide .hs-bg { object-position: left center; }
  .hero-arrows { display: none; }
}