/* ========= BANNER (home) ========= */
.banner{
  position: relative;
  width: 100%;
  height: clamp(42vh, 55vh, 60vh);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--beige-text);
}
.banner__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  z-index: 0;
  display: block;
  --banner-zoom: 1; /*ZOOM DE LA IMAGEN + / -*/
  /* exposure control: brightness/contrast/saturate are adjustable via CSS variables */
  --banner-brightness: 0.78;
  --banner-contrast: 0.96;
  --banner-saturate: 0.95;
  transform: scale(var(--banner-zoom));
  filter: brightness(var(--banner-brightness)) contrast(var(--banner-contrast)) saturate(var(--banner-saturate));
  transition: object-position 420ms ease, transform 520ms ease;
}

.banner__bg-wrap{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden; /* clip blur/transform so it doesn't bleed outside the banner */
}
.banner__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.22);
  z-index: 2;
  backdrop-filter: blur(4px); /*EFECTO DE DESENFOQUE*/
  -webkit-backdrop-filter: blur(4px);
}
.banner__content{
  position: relative;
  z-index: 10;
  text-align: center;
  padding: clamp(2rem,4vw,3rem) clamp(1rem,4vw,2rem);
  max-width: min(90vw, 1100px);
  margin: 0 auto;
}

.banner__content h1{
  position: relative;
  z-index:10;
  max-width: 100%;
  margin: 0;
  padding: clamp(0.5rem, 3vw, 1.5rem);
  color: var(--beige-text);
  text-align: center;
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  line-height: clamp(1.15, 1.2, 1.25);
}



@media (min-width:768px){
  .banner{ height: 50vh; }
  .banner__bg{ object-position: 50% 55%; }
  .banner__content{
    text-align: right;
    max-width: min(90vw, 1300px);
    padding-left: clamp(3rem, 12vw, 20rem);
    padding-right: clamp(1rem, 4vw, 3rem);
  }
.banner__content h1{
    text-align: right;
    padding: 1rem 0;
    font-size: clamp(3.5rem, 6vw, 5rem);
  }
}
@media (min-width:1024px){
  .banner__content h1{ font-size: clamp(4rem, 6.5vw, 6rem); word-spacing: clamp(6px, 1vw, 10px); }
}
@media (min-width:1536px){
  .banner{ height: 60vh; }
  .banner__content{
    max-width: 1300px;
    padding-left: 20rem;
    padding-right: 3rem;
    text-align: right;
  }
  .banner__content h1{
    font-size: 7rem;
    word-spacing: 10px;
  }
}