/* =========================
   HERO – AJUSTE DEFINITIVO
========================= */

.hero-section {
  position: relative;

  /* ↓ AQUI você controla o tamanho */
  height: 60svh;          /* ocupa 60% da tela */
  min-height: 360px;      /* não fica pequeno demais */
  max-height: 520px;      /* não fica gigante */

  overflow: hidden;
  margin: 0;
  padding: 0;
}


/* Força o carousel a ocupar o hero inteiro */
.hero-section .carousel {
  position: absolute;
  inset: 0;
}

/* Estrutura interna */
.hero-section .carousel-inner,
.hero-section .carousel-item {
  height: 100%;
}

/* IMAGEM – ajuste fino */
.hero-section .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* 🔑 ajuste visual importante */
  object-position: center center;

  /* evita micro-espaços */
  display: block;
}

/* Overlay elegante */
.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.10),
    rgba(0,0,0,0.40)
  );
  z-index: 2;
  pointer-events: none;
}

/* Conteúdo do hero (se usar depois) */
.hero-content {
  position: absolute;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  z-index: 3;
  width: 100%;
  text-align: center;
  color: #fff;
  pointer-events: none;
}

.hero-content .btn {
  pointer-events: auto;
}