.hero-carousel {
  position: relative;
  width: 95%;
  max-width: 1480px;
  margin: 2% auto 0;
  --hero-color: #e4002b;   /* color de flechas y punto activo */
  --hero-gap: 12px;        /* espacio entre banners */
}

/* ===== Pista con scroll nativo ===== */
.hero-carousel .hero-viewport {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--hero-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* IE/Edge viejo */
}

.hero-carousel .hero-viewport::-webkit-scrollbar {
  display: none;                    /* Chrome, Safari */
}

/* ===== Slides: 1 por pantalla en mobile ===== */
.hero-carousel .hero-slide {
  display: block;
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  text-decoration: none;
}

.hero-carousel .hero-slide picture {
  display: block;
}

.hero-carousel .hero-slide img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 16 / 9;             /* mobile 1600x900 */
  object-fit: cover;
  border: 1px solid #dddbde;
  border-radius: 5px;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-drag: none;
}

/* ===== Flechas ===== */
.hero-carousel .hero-arrow {
  position: absolute;
  top: 0;
  bottom: 30px;                     /* alto de la zona de puntos */
  margin: auto 0;
  width: 40px;
  height: 40px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--hero-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: background 0.2s;
}

.hero-carousel .hero-prev { left: 10px; }
.hero-carousel .hero-next { right: 10px; }
.hero-carousel .hero-arrow:hover { background: #fff; }

/* ===== Puntos ===== */
.hero-carousel .hero-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 30px;
}

.hero-carousel .hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  background: #b5b5b5;              /* apagados */
  cursor: pointer;
  transition: width 0.25s, background 0.25s;
}

.hero-carousel .hero-dot.is-active {
  width: 26px;                      /* activo alargado; quita esta línea si lo quieres redondo */
  border-radius: 5px;
  background: var(--hero-color);    /* prendido */
}

/* ===== Desktop: 2 banners de 3000x900 ===== */
@media (min-width: 768px) {
  .hero-carousel { --hero-gap: 16px; }

  .hero-carousel .hero-slide {
    flex-basis: calc((100% - var(--hero-gap)) / 2);
  }

/*
  .hero-carousel .hero-slide img {
    aspect-ratio: 10 / 3;
  }
*/
    
  .hero-carousel .hero-slide img {
    aspect-ratio: 0 / 3;
  }    
    
}

/* ===== Mobile: flechas más chicas ===== */
@media (max-width: 767px) {
  .hero-carousel .hero-arrow { width: 32px; height: 32px; }
  .hero-carousel .hero-prev { left: 6px; }
  .hero-carousel .hero-next { right: 6px; }
}