
/* M3 TECHNOLOGY — Banner carrossel V3.1
   Ajuste principal: reduzir o espaço entre banner e catálogo. */

.promo-carousel{
  margin-top:28px !important;
  margin-bottom:18px !important;
}

.promo-viewport{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  box-shadow:0 18px 42px rgba(10,28,52,.12);
}

.promo-track{
  display:flex;
  width:100%;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

.promo-slide{
  position:relative;
  flex:0 0 100%;
  width:100%;
  height:210px;
  overflow:hidden;
  display:flex;
  align-items:center;
  background-color:#07182d;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  text-decoration:none;
}

.promo-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(3,16,34,.88) 0%,
    rgba(3,16,34,.68) 31%,
    rgba(3,16,34,.30) 57%,
    rgba(3,16,34,.04) 82%);
  pointer-events:none;
}

.promo-copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  width:min(48%,620px);
  padding:32px 72px;
  box-sizing:border-box;
}

.promo-copy strong{
  display:block;
  margin:0 0 8px;
  color:#fff;
  font-size:31px;
  line-height:1.08;
  font-weight:800;
  text-shadow:0 2px 10px rgba(0,0,0,.28);
}

.promo-copy > span{
  display:block;
  color:rgba(255,255,255,.94);
  font-size:16px;
  line-height:1.4;
  text-shadow:0 2px 8px rgba(0,0,0,.25);
}

.promo-arrow{
  position:absolute;
  z-index:4;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  background:rgba(4,18,37,.58);
  color:#fff;
  font-size:31px;
  line-height:38px;
  cursor:pointer;
  backdrop-filter:blur(5px);
}

.promo-prev{left:18px}
.promo-next{right:18px}

.promo-dots{
  min-height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:10px;
}

.promo-dot{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:999px;
  background:#cbd5e1;
  cursor:pointer;
  transition:width .25s ease,background .25s ease;
}

.promo-dot.is-active{
  width:26px;
  background:#1597e5;
}

/* Remove o grande vão herdado entre o componente e o catálogo. */
.promo-carousel + .catalog-section{
  padding-top:22px !important;
  margin-top:0 !important;
}

@media(max-width:900px){
  .promo-slide{height:185px}
  .promo-copy{width:60%;padding:26px 62px}
  .promo-copy strong{font-size:27px}
}

@media(max-width:760px){
  .promo-carousel{
    margin-top:18px !important;
    margin-bottom:12px !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .promo-viewport{border-radius:18px}
  .promo-slide{height:142px;background-position:center}

  .promo-overlay{
    background:linear-gradient(90deg,
      rgba(3,16,34,.90) 0%,
      rgba(3,16,34,.67) 50%,
      rgba(3,16,34,.12) 100%);
  }

  .promo-copy{width:75%;padding:18px 46px}
  .promo-copy strong{margin-bottom:5px;font-size:20px;line-height:1.1}
  .promo-copy > span{font-size:13px;line-height:1.3}

  .promo-arrow{width:32px;height:32px;font-size:24px;line-height:27px}
  .promo-prev{left:8px}
  .promo-next{right:8px}

  .promo-dots{margin-top:8px;gap:6px}

  .promo-carousel + .catalog-section{
    padding-top:18px !important;
  }
}
