/* === style-banner.css — Banner isolado (no-crop + no-bars) + melhorias === */

/* Container do banner dentro da glass-box */
.hero-wrap{
  max-width:1200px;
  margin:60px auto 0;
}

/* Área do banner */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  z-index:0;
}
.hero-content{
  width:100%;
  height: clamp(380px, 42vw, 560px);
  border-radius:16px;
  overflow:hidden;
  position:relative;
  background:transparent;
}

/* Slider */
.hero-slider{ position:absolute; inset:0; z-index:0; }

/* Slide */
.hero-slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity .6s ease;
  background:none !important;
  will-change:opacity;
}
.hero-slide.active{ opacity:1; }

/* Backdrop para preencher sobras sem “barras” visuais */
.hero-slide::before{
  content:"";
  position:absolute; inset:0;
  background: var(--img, none) center 42% / cover no-repeat;
  filter: blur(18px) brightness(0.97);
  transform: scale(1.08);
  z-index:0;
}

/* Véu sutil para harmonia */
.hero-slide::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(255,255,255,.06);
  z-index:1;
}

/* Imagem principal — NUNCA é cortada */
.hero-slide .hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: contain;
  object-position: center 42%;
  display:block;
  z-index:2;
  transform: scale(1);               /* base */
  transition: transform 9s ease;     /* transição longa e suave */
  will-change: transform;
}
/* Efeito “respiração” no slide ativo */
.hero-slide.active .hero-img{
  transform: scale(1.02);
}

/* Botões de navegação */
.slide-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3;
  background:rgba(255,255,255,.55);
  border:none; border-radius:999px;
  width:38px; height:38px; cursor:pointer;
  backdrop-filter: blur(6px);
}
.slide-btn.prev{ left:10px; }
.slide-btn.next{ right:10px; }

/* Dots (navegação) */
.hero-dots{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  display:flex; gap:8px; z-index:4;
  padding:6px 10px;
  background:rgba(255,255,255,.38);
  border-radius:999px;
  backdrop-filter: blur(6px);
}
.hero-dot{
  width:9px; height:9px; border-radius:999px;
  background:rgba(17,24,39,.45);
  border:0;
  padding:0;
  display:inline-block;
  cursor:pointer;
}
.hero-dot[aria-selected="true"]{
  background:#111827;
  outline:2px solid rgba(17,24,39,.25);
  outline-offset:2px;
}

@media (max-width: 480px){
  .hero-content{ height: clamp(300px, 56vw, 420px); }
  .hero-dots{ bottom:8px; }
}