
/* V88 - Banner Destaque Premium */
.hero-carousel,
.home-hero,
.hero-slider,
.banner-destaque,
.hero-banner{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* Caixa principal mais premium */
.hero-carousel{
  border-radius:0!important;
  box-shadow:0 22px 70px rgba(15,23,42,.18);
  background:#020617;
}

/* Camadas visuais */
.hero-carousel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:
    radial-gradient(circle at 22% 20%,rgba(255,255,255,.22),transparent 28%),
    linear-gradient(90deg,rgba(2,6,23,.60) 0%,rgba(2,6,23,.22) 48%,rgba(2,6,23,.10) 100%);
}

.hero-carousel::after{
  content:"";
  position:absolute;
  inset:-40%;
  z-index:5;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.20) 46%,transparent 54%);
  transform:translateX(-70%) rotate(6deg);
  animation:heroShineV88 7.5s ease-in-out infinite;
  opacity:.72;
}

@keyframes heroShineV88{
  0%,62%{transform:translateX(-72%) rotate(6deg)}
  82%,100%{transform:translateX(72%) rotate(6deg)}
}

/* Slides */
.hero-carousel .hero-slide,
.hero-slide{
  position:relative;
  overflow:hidden;
}

.hero-carousel .hero-slide img,
.hero-slide img,
.hero-carousel .hero-slide picture img{
  transform:scale(1.045);
  transition:transform 5.8s cubic-bezier(.2,.8,.2,1), filter .7s ease, opacity .7s ease;
  filter:saturate(1.08) contrast(1.04);
  will-change:transform;
}

.hero-carousel .hero-slide.active img,
.hero-slide.active img{
  transform:scale(1.13);
}

/* Conteúdo do banner */
.hero-carousel .hero-content,
.hero-carousel .hero-caption,
.hero-slide .hero-content,
.hero-slide .hero-caption{
  position:relative;
  z-index:8;
  animation:heroTextInV88 .58s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes heroTextInV88{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

.hero-carousel .hero-slide.active .hero-content > *,
.hero-carousel .hero-slide.active .hero-caption > *,
.hero-slide.active .hero-content > *,
.hero-slide.active .hero-caption > *{
  animation:heroItemInV88 .54s cubic-bezier(.2,.8,.2,1) both;
}

.hero-carousel .hero-slide.active .hero-content > *:nth-child(2),
.hero-carousel .hero-slide.active .hero-caption > *:nth-child(2){
  animation-delay:.08s;
}

.hero-carousel .hero-slide.active .hero-content > *:nth-child(3),
.hero-carousel .hero-slide.active .hero-caption > *:nth-child(3){
  animation-delay:.14s;
}

@keyframes heroItemInV88{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

/* Títulos mais fortes */
.hero-carousel h1,
.hero-carousel h2,
.hero-slide h1,
.hero-slide h2{
  text-shadow:0 12px 34px rgba(0,0,0,.28);
  letter-spacing:-.045em;
}

/* Botões dentro do banner */
.hero-carousel .btn,
.hero-slide .btn,
.hero-carousel a.btn,
.hero-slide a.btn{
  position:relative;
  overflow:hidden;
  z-index:9;
  box-shadow:0 16px 34px rgba(0,0,0,.18);
}

.hero-carousel .btn::after,
.hero-slide .btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.30),transparent 72%);
  transform:translateX(-120%);
  transition:transform .6s ease;
}

.hero-carousel .btn:hover::after,
.hero-slide .btn:hover::after{
  transform:translateX(120%);
}

/* Setas premium */
.hero-carousel .hero-arrow,
.hero-arrow{
  z-index:12!important;
  width:48px!important;
  height:48px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.30)!important;
  background:rgba(15,23,42,.34)!important;
  color:#fff!important;
  backdrop-filter:blur(12px);
  box-shadow:0 14px 34px rgba(0,0,0,.22);
  transition:transform .22s ease, background .22s ease, border-color .22s ease!important;
}

.hero-carousel .hero-arrow:hover,
.hero-arrow:hover{
  transform:scale(1.08)!important;
  background:#fff!important;
  color:#0f172a!important;
  border-color:#fff!important;
}

/* Dots mais elegantes */
.hero-carousel .hero-dots,
.hero-dots{
  z-index:14!important;
}

.hero-carousel .hero-dots button,
.hero-dots button{
  width:10px!important;
  height:10px!important;
  border-radius:999px!important;
  border:0!important;
  background:rgba(255,255,255,.56)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.20);
  transition:width .24s ease, background .24s ease, transform .24s ease!important;
}

.hero-carousel .hero-dots button.active,
.hero-dots button.active{
  width:32px!important;
  background:#fff!important;
  transform:scale(1.03);
}

/* Barra de progresso do autoplay */
.hero-carousel .hero-progress-v88{
  position:absolute;
  left:0;
  bottom:0;
  height:4px;
  width:100%;
  z-index:16;
  background:rgba(255,255,255,.18);
  overflow:hidden;
}

.hero-carousel .hero-progress-v88 span{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#fff,var(--primary,#0f766e));
  box-shadow:0 0 18px rgba(255,255,255,.55);
}

/* Mobile */
@media(max-width:760px){
  .hero-carousel{
    box-shadow:none;
  }

  .hero-carousel::before{
    background:
      linear-gradient(180deg,rgba(2,6,23,.14) 0%,rgba(2,6,23,.62) 100%);
  }

  .hero-carousel::after{
    opacity:.42;
  }

  .hero-carousel .hero-arrow,
  .hero-arrow{
    width:40px!important;
    height:40px!important;
  }

  .hero-carousel .hero-dots button,
  .hero-dots button{
    width:8px!important;
    height:8px!important;
  }

  .hero-carousel .hero-dots button.active,
  .hero-dots button.active{
    width:24px!important;
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-carousel::after,
  .hero-carousel .hero-slide img,
  .hero-slide img,
  .hero-carousel .hero-content,
  .hero-carousel .hero-caption,
  .hero-slide .hero-content,
  .hero-slide .hero-caption,
  .hero-carousel .hero-slide.active .hero-content > *,
  .hero-carousel .hero-slide.active .hero-caption > *{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
}


/* V90 - Correção segura do banner destaque
   Mantém o efeito premium, mas sem forçar position:absolute nos slides.
   A altura fica padronizada pelo container e a imagem preenche sem deformar. */
.hero-carousel{
  width:100%!important;
  min-height:420px!important;
  height:clamp(420px, 44vw, 560px)!important;
  max-height:560px!important;
}

.hero-carousel .hero-slide{
  width:100%!important;
  height:100%!important;
  min-height:420px!important;
}

.hero-carousel .hero-slide img,
.hero-carousel .hero-slide picture,
.hero-carousel .hero-slide picture img{
  width:100%!important;
  height:100%!important;
  min-height:420px!important;
  object-fit:cover!important;
  object-position:center center!important;
  display:block!important;
}

/* Se o tema original usa slide ativo/inativo, não mexe no posicionamento.
   Apenas garante que todos ocupem a mesma área visual. */
.hero-carousel .hero-slide.active{
  min-height:420px!important;
}

@media(max-width:760px){
  .hero-carousel{
    height:340px!important;
    min-height:340px!important;
    max-height:340px!important;
  }

  .hero-carousel .hero-slide,
  .hero-carousel .hero-slide.active,
  .hero-carousel .hero-slide img,
  .hero-carousel .hero-slide picture,
  .hero-carousel .hero-slide picture img{
    min-height:340px!important;
    height:340px!important;
  }
}

@media(max-width:480px){
  .hero-carousel{
    height:310px!important;
    min-height:310px!important;
    max-height:310px!important;
  }

  .hero-carousel .hero-slide,
  .hero-carousel .hero-slide.active,
  .hero-carousel .hero-slide img,
  .hero-carousel .hero-slide picture,
  .hero-carousel .hero-slide picture img{
    min-height:310px!important;
    height:310px!important;
  }
}
