.hero-news-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 650ms ease, visibility 0s linear 650ms;
}

.hero-news-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 650ms ease;
}

.hero-news-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-news-dot[aria-current="true"] {
  width: 2.5rem;
  background: #cc0000;
}

.hero-news-controls[hidden] {
  display: none;
}

@media (max-width: 767px) {
  #inicio {
    min-height: max(760px, 95svh);
    background: #0a0a0e;
  }

  #inicio .hero-news-slide {
    display: block;
  }

  #inicio .hero-news-slide img {
    top: 96px;
    bottom: auto;
    width: 100%;
    height: clamp(180px, 53vw, 220px);
    object-fit: contain;
    object-position: center !important;
  }

  #inicio .hero-news-slide > div[aria-hidden="true"] {
    background: linear-gradient(to bottom, #0a0a0e 0%, transparent 17%, transparent 33%, #0a0a0e 43%, #0a0a0e 100%);
  }

  #inicio .hero-news-slide > .relative {
    margin-top: clamp(260px, 75vw, 305px);
    padding-top: 0;
    padding-bottom: 110px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-news-slide {
    transition: none;
  }
}

/* Noticias do Marketing (16/10, Claude) */
#hero-news {
  touch-action: pan-y;
}

/* Arrastando com o dedo: o quadro atual e o vizinho ficam visiveis e andam juntos. */
.hero-news-slide.hero-arrastando {
  opacity: 1;
  visibility: visible;
  transition: none;
  will-change: transform;
}

/* Texto longo nao vaza do banner: ate 3 linhas. O titulo nao leva corte
   (o overflow comia a perna do g e a cedilha); o painel limita a 90 letras. */
.hero-news-destaque h2 + p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-news-destaque.sem-imagem {
  background: radial-gradient(120% 90% at 85% 15%, rgba(204, 0, 0, .35), transparent 60%), #1a0507;
}

@media (max-width: 767px) {
  /* Celular: sem setas, troca arrastando com o dedo; ficam só as bolinhas.
     Com notícias, o banner cresce um pouco para as bolinhas ficarem abaixo do
     botão e acima do cartão de números, que sobe 64px (-mt-16) por cima do banner. */
  #inicio.hero-varios {
    min-height: max(820px, 100svh);
  }
  #inicio.hero-varios .hero-news-controls {
    bottom: 76px;
  }
  #inicio .hero-news-controls > button {
    display: none;
  }
  #inicio .hero-news-destaque.sem-imagem > div[aria-hidden="true"] {
    background: none;
  }
}

/* Computador e tablet (16/10, Claude): com noticias, o texto e o botao ficam presos acima das setas.
   Antes o texto era centralizado na altura e, numa noticia longa, o botao descia por cima das setas
   (que ficam fixas a 7rem do fundo). Agora o bloco encosta embaixo e reserva 12.5rem para elas. */
@media (min-width: 768px) {
  #inicio.hero-varios .hero-news-slide {
    align-items: flex-end;
  }
  #inicio.hero-varios .hero-news-slide > .relative {
    padding-top: 7rem;
    padding-bottom: 9.5rem;
  }
  /* 16/10 tarde: setas quase encostando no bloco preto (que sobe 4rem por cima do banner) e altura minima
     para a etiqueta nao ficar embaixo do logo em tela baixa */
  #inicio.hero-varios .hero-news-controls {
    bottom: 5.25rem;
  }
  #inicio.hero-varios {
    min-height: max(95vh, 640px);
  }
}