/* =====================================================
   LOBOZOLDYCK - CARRUSEL HOME PREMIUM
   Autoplay visual + sin barra horizontal + móvil compacto
   Este CSS debe cargarse DESPUÉS de styles.css y lobozoldyck-ajustes-puntuales.css
===================================================== */

.home-promo-carousel-section{
  position:relative !important;
  margin-top:58px !important;
  margin-bottom:34px !important;
  padding:34px 34px 38px !important;
  border-radius:34px !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(147,255,22,.10), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(157,53,255,.20), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
    rgba(22,14,30,.88) !important;
  border:1px solid rgba(157,53,255,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 24px 55px rgba(0,0,0,.24) !important;
}

.home-promo-carousel-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.22), transparent 35%, rgba(0,0,0,.22)),
    repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 1px, transparent 1px 22px);
  opacity:.9;
}

.home-promo-carousel-section::after{
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  top:0;
  height:3px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg, transparent, var(--green,#93ff16), rgba(157,53,255,.9), transparent);
  box-shadow:0 0 18px rgba(147,255,22,.20);
}

.home-promo-carousel-section .section-title{
  position:relative;
  z-index:2;
  margin-bottom:24px !important;
}

.home-promo-carousel-section .section-title h2{
  font-size:clamp(30px, 4vw, 48px) !important;
  line-height:1 !important;
}

.home-promo-carousel-section .section-title > a{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:10px 18px !important;
  border-radius:999px !important;
  border:1px solid rgba(157,53,255,.42) !important;
  background:rgba(255,255,255,.045) !important;
  color:#fff !important;
  font-weight:900 !important;
  text-decoration:none !important;
}

.home-promo-carousel-section .section-title > a:hover{
  border-color:rgba(147,255,22,.42) !important;
  color:var(--green,#93ff16) !important;
}

.promo-carousel{
  position:relative !important;
  z-index:2 !important;
  padding:0 34px !important;
}

.promo-carousel-track{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-auto-columns:minmax(350px, 430px) !important;
  gap:20px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  scroll-behavior:smooth !important;
  padding:8px 0 12px !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  overscroll-behavior-x:contain !important;
}

.promo-carousel-track::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

.promo-slide-card{
  scroll-snap-align:start !important;
  border-radius:28px !important;
  min-height:285px !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-columns:42% 58% !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(147,255,22,.10), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.018)),
    rgba(13,10,18,.94) !important;
  border:1px solid rgba(157,53,255,.38) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.26) !important;
}

.promo-slide-img{
  display:block !important;
  min-height:100% !important;
  background:#0a0710 !important;
  overflow:hidden !important;
}

.promo-slide-img img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  border-radius:0 !important;
}

.promo-slide-body{
  padding:24px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
}

.promo-slide-body .eyebrow{
  font-size:11px !important;
  letter-spacing:2.4px !important;
  margin-bottom:12px !important;
}

.promo-slide-body h3{
  font-family:Orbitron, sans-serif !important;
  font-size:clamp(20px, 2vw, 26px) !important;
  line-height:1.05 !important;
  margin:0 0 10px !important;
  color:#fff !important;
}

.promo-slide-body p{
  font-size:16px !important;
  line-height:1.35 !important;
  color:var(--muted,#bdb6ca) !important;
  margin:0 0 14px !important;
}

.promo-slide-price{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-bottom:16px !important;
}

.promo-slide-price strong{
  font-size:26px !important;
  color:var(--green,#93ff16) !important;
}

.promo-slide-body .btn-neon{
  min-height:48px !important;
  padding:12px 20px !important;
}

.promo-carousel-btn{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:10 !important;
  width:48px !important;
  height:48px !important;
  border-radius:999px !important;
  border:1px solid rgba(147,255,22,.36) !important;
  background:rgba(9,7,12,.92) !important;
  color:var(--green,#93ff16) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:36px !important;
  line-height:1 !important;
  cursor:pointer !important;
  box-shadow:0 0 24px rgba(0,0,0,.34) !important;
  transition:.2s ease !important;
}

.promo-carousel-btn:hover{
  border-color:var(--green,#93ff16) !important;
  box-shadow:0 0 20px rgba(147,255,22,.24) !important;
}

.promo-carousel-prev{left:4px !important;}
.promo-carousel-next{right:4px !important;}

/* Indicador suave opcional generado por JS */
.promo-carousel-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:16px;
}

.promo-carousel-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.22);
  cursor:pointer;
  transition:.2s ease;
}

.promo-carousel-dot.is-active{
  width:26px;
  background:var(--green,#93ff16);
  box-shadow:0 0 12px rgba(147,255,22,.28);
}

/* Móvil: más pequeño, flechas visibles y sin scroll bar */
@media (max-width:768px){
  .home-promo-carousel-section{
    width:min(100% - 22px, 1180px) !important;
    margin-top:34px !important;
    margin-bottom:24px !important;
    padding:22px 14px 24px !important;
    border-radius:26px !important;
  }

  .home-promo-carousel-section .section-title{
    align-items:center !important;
    gap:12px !important;
    margin-bottom:16px !important;
  }

  .home-promo-carousel-section .section-title h2{
    font-size:clamp(24px, 7vw, 34px) !important;
  }

  .home-promo-carousel-section .section-title > a{
    font-size:13px !important;
    padding:8px 12px !important;
  }

  .promo-carousel{
    padding:0 34px !important;
  }

  .promo-carousel-track{
    grid-auto-columns:minmax(70vw, 70vw) !important;
    gap:14px !important;
    padding:5px 0 8px !important;
  }

  .promo-slide-card{
    grid-template-columns:1fr !important;
    min-height:0 !important;
    border-radius:22px !important;
  }

  .promo-slide-img{
    height:145px !important;
    min-height:145px !important;
  }

  .promo-slide-body{
    padding:14px !important;
  }

  .promo-slide-body .eyebrow{
    font-size:9px !important;
    letter-spacing:1.8px !important;
    margin-bottom:8px !important;
  }

  .promo-slide-body h3{
    font-size:16px !important;
    line-height:1.08 !important;
    margin-bottom:7px !important;
  }

  .promo-slide-body p{
    font-size:13px !important;
    line-height:1.25 !important;
    margin-bottom:10px !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  .promo-slide-price{
    margin-bottom:10px !important;
  }

  .promo-slide-price strong{
    font-size:20px !important;
  }

  .promo-slide-body .btn-neon{
    width:100% !important;
    min-height:42px !important;
    padding:10px 12px !important;
    font-size:13px !important;
  }

  .promo-carousel-btn{
    display:flex !important;
    width:40px !important;
    height:40px !important;
    font-size:30px !important;
    background:rgba(9,7,12,.94) !important;
  }

  .promo-carousel-prev{left:-2px !important;}
  .promo-carousel-next{right:-2px !important;}

  .promo-carousel-dots{
    margin-top:12px;
  }
}

@media (max-width:420px){
  .promo-carousel-track{
    grid-auto-columns:minmax(68vw, 68vw) !important;
  }

  .promo-carousel{
    padding:0 30px !important;
  }

  .promo-slide-img{
    height:132px !important;
    min-height:132px !important;
  }
}