/* hero-carousel.css
   Carrusel de imágenes de portada, 16:9, autoplay + deslizable. */

.hero-carousel{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#e5e2dd;
  touch-action:pan-y;
  cursor:grab;
}
.hero-carousel.dragging{ cursor:grabbing; }

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

.hero-slide{
  flex:0 0 100%;
  height:100%;
}
.hero-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  -webkit-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

.hero-dots{
  position:absolute;
  left:0; right:0; bottom:12px;
  display:flex;
  justify-content:center;
  gap:6px;
  z-index:2;
}
.hero-dot{
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.55);
  border:none; padding:0; cursor:pointer;
  transition:width .2s, background .2s;
}
.hero-dot.active{
  background:#fff;
  width:18px; border-radius:4px;
}