/* inspirado no padrão do bukib-news: container, tabs, setas e gradiente leve */
.bukib-hub{
  --accent:#0b1220;
  border:1px solid #e5e6ea;
  border-radius:22px;
  padding:18px;
  background: linear-gradient(140deg, rgba(11,18,32,.08) 0%, rgba(11,18,32,.03) 55%, #ffffff 100%);
  position:relative;
}

.bh-head{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.bh-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.bh-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.92) !important;
  color:#222 !important;
  border:1px solid #e3e6ea !important;
  border-radius:14px;
  padding:7px 12px;
  cursor:pointer;
  transition:all .18s ease;
  font-weight:800;
  letter-spacing:.2px;
  white-space:nowrap;
}

.bh-tab.active{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fff !important;
  box-shadow:0 6px 16px rgba(11,18,32,.18);
}

.bh-tab:hover{
  background:#0b1220 !important;
  border-color:#0b1220 !important;
  color:#fff !important;
}

.bh-controls{position:relative; display:flex; gap:10px; align-items:center}

.bh-arrow{
  width:auto; height:auto; padding:0;
  background:transparent !important; border:0 !important;
  cursor:pointer;
}
.bh-arrow::after{content:'›'; font-size:28px; line-height:1; color:var(--accent)}
.bh-arrow.prev::after{content:'‹'}
.bh-arrow:hover::after{color:#0b1220}

/* hero imagem */
.bh-hero{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:18px;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.06);
  background:#eef1f5;
}
.bh-hero-img{
  opacity:1;
  transition: opacity 300ms ease;
  will-change: opacity;
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16/6;
  object-fit:cover;
}

/* overlay com título/cta */
.bh-hero-overlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:14px 14px 16px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 100%);
}
.bh-hero-title{
  color:#fff;
  font-weight:900;
  font-size:clamp(18px, 2.2vw, 28px);
  line-height:1.15;
}
.bh-hero-cta{
  color:#fff;
  font-weight:800;
  text-decoration:underline;
  white-space:nowrap;
}

/* barra de progresso do timer */
.bh-progress{
  position:absolute;
  left:0; right:0; bottom:0;
  height:4px;
  background:rgba(255,255,255,.35);
}
.bh-bar{
  display:block;
  width:0%;
  height:100%;
  background:#ffffff;
  opacity:.95;
}

/* animação disparada via JS com duração dinâmica */
@keyframes bhFill{
  from{width:0%;}
  to{width:100%;}
}

@media (max-width: 1024px){
  .bh-hero-img{aspect-ratio: 16/9;}
}