.banner-area {
  position: relative;
  background: url('../img/header-bg.jpg') center center/cover no-repeat;
  min-height: 320px;
  height: 320px; /* Menor altura para estilo "hero" compacto */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 76px; /* Altura menú fijo */
}

.banner-area::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(48, 56, 85, 0.44); /* overlay para legibilidad */
  z-index: 1;
}

.banner-content {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 950px;
  margin: 0 auto;
  padding: 32px 24px;
}

.banner-content h1,
.banner-content h4 {
  color: #fff;
  margin-bottom: 18px;
}

.banner-content h4 {
  font-size: 1.34rem;
  font-weight: 700;
  color: #ffe486;
}

.banner-content p {
  font-size: 1.17rem;
  margin-bottom: 18px;
  color: #ececec;
}

@media (max-width: 900px) {
  .banner-area {
    min-height: 200px;
    height: 210px;
    margin-top: 66px;
  }
  .banner-content {
    padding: 18px 8vw;
  }
  .banner-content h1 {
    font-size: 1.34rem;
  }
  .banner-content h4 {
    font-size: 1rem;
  }
}