/* =========================================================
   Carrossel mobile (v30)
   - Evita ficar “fininho” no smartphone
   - Mantém setas sempre no mesmo lugar (sem pular)
   - Remove qualquer sobra/branco fora do banner
========================================================= */

:root{
  --hero-height: clamp(240px, 26vw, 420px);
}

/* Altura fixa por viewport */
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item{
  height: var(--hero-height) !important;
}

.hero-carousel .carousel-item{ position: relative; }

/* Cadeia completa 100% */
.hero-slide,
.hero-slide__link{ height: 100% !important; display:block; }

.hero-media{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
}

/* Tablet: um pouco mais alto */
@media (max-width: 991.98px){
  :root{ --hero-height: clamp(230px, 44vw, 420px); }
}

/* Mobile: bem mais alto para o banner não ficar “tira” */
@media (max-width: 575.98px){
  :root{ --hero-height: clamp(250px, 72vw, 460px); }

  /* Setas menores e em safe-area */
  .carousel-control-prev,
  .carousel-control-next{
    width: 14%;
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon{
    width: 40px;
    height: 40px;
  }
}