.bakpak-hero { position: relative; width: 100%; }
.bakpak-hero .swiper { width: 100%; height: clamp(420px, 68vh, 760px); }

.hero-slide { position: relative; width:100%; height:100%; }
.hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: saturate(1.05) contrast(1.05); }

/* overlay */
.hero-overlay{
  position:relative;
  z-index:2;
  color:#0b0b0b;
  max-width:min(680px, 92%);
  margin-left: min(8vw, 96px);
  margin-right: min(6vw, 64px);
  top: 50%;
  transform: translateY(-50%);
  padding: clamp(8px, 1.6vw, 20px);
  background: (255,255,255,.88); border-radius:18px; 
  backdrop-filter: blur(4px);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.hero-tag{
  display:inline-block;
  font-size: clamp(26px,5vw,52px);
  letter-spacing:.04em;
  text-transform:uppercase;
  background:#111; color:#fff;
  padding:6px 10px; border-radius:999px;
  margin-bottom:10px;
}

.hero-title{ font-size: clamp(28px, 5.2vw, 56px); line-height:1.05; margin:.1em 0 .2em; font-weight:800; }
.hero-sub{   font-size: clamp(14px, 1.6vw, 18px); color:#333; margin:0 0 .5em; }
.hero-desc{  font-size: clamp(13px, 1.4vw, 16px); color:#222; margin:0 0 1em; }

.btn-hero{
  display:inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  background:#0a0a0a; color:#fff; font-weight:700;
  text-decoration:none;
  transition: transform .2s ease, background .2s ease;
}
.btn-hero:hover{ transform: translateY(-1px); background:#1a1a1a; }

.bakpak-hero .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px; border:none;
  background:rgba(255,255,255,.9);
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  cursor:pointer; z-index:3;
}
.bakpak-hero .nav.prev{ left:18px; }
.bakpak-hero .nav.next{ right:18px; }
.bakpak-hero .nav:after{
  content:''; display:block; width:10px; height:10px; margin:0 auto;
  border-top:2px solid #111; border-right:2px solid #111;
  transform: rotate(45deg);
}
.bakpak-hero .nav.prev:after{ transform: rotate(-135deg); }

.swiper-pagination-bullet{ background:#fff; opacity:.7; }
.swiper-pagination-bullet-active{ background:#111; opacity:1; }

/* Modo oscuro opcional si tu theme lo usa */
@media (prefers-color-scheme: dark){
  .hero-overlay{ background: rgba(20,20,20,.7); color:#f6f6f6; }
  .hero-sub, .hero-desc{ color:#e8e8e8; }
  .btn-hero{ background:#f6f6f6; color:#111; }
  .swiper-pagination-bullet{ background:#e8e8e8; }
  .swiper-pagination-bullet-active{ background:#fff; }
}