/* DeltaNet hero banners v3
   The hero is intentionally image-only: all text/pricing is already embedded in each banner image.
   Future banner changes only require replacing the four files in /assets/hero/. */
#inicio.hero-slider {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 2048 / 682 !important;
  overflow: hidden !important;
  background: #fff !important;
}

#inicio .hero-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  background-color: #fff !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  transform: none !important;
  transition: opacity .55s ease !important;
}

/* Stable filenames: replace only these files to change the home banners. */
#inicio .hero-slide:nth-of-type(1) { background-image: url('/assets/hero/banner-500.png?v=3') !important; }
#inicio .hero-slide:nth-of-type(2) { background-image: url('/assets/hero/banner-600.png?v=3') !important; }
#inicio .hero-slide:nth-of-type(3) { background-image: url('/assets/hero/banner-700.png?v=3') !important; }
#inicio .hero-slide:nth-of-type(4) { background-image: url('/assets/hero/banner-1giga.png?v=3') !important; }

/* Never allow legacy hero photos/copy to cover the new complete banner artwork. */
#inicio .hero-slide-image,
#inicio .hero-image-wash,
#inicio .hero-fiber,
#inicio .hero-content,
#inicio .hero-copy,
#inicio .hero-offer-row,
#inicio .hero-description,
#inicio .hero-actions,
#inicio .hero-meta,
#inicio .hero-use-badge,
#inicio .hero-slide::before {
  display: none !important;
}

/* Keep only the carousel navigation, centered over the bottom edge. */
#inicio .hero-controls {
  z-index: 30 !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 12px !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}
#inicio .hero-controls > * { pointer-events: auto !important; }
#inicio .hero-controls > button {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  color: #fff !important;
  background: rgba(8,17,61,.84) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(6px) !important;
}
#inicio .hero-controls > button:first-child svg { transform: rotate(180deg) !important; }
#inicio .hero-dots {
  width: auto !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 5px 7px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(8,17,61,.08) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(6px) !important;
}
#inicio .hero-dots button {
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 8px !important;
  min-width: 28px !important;
  min-height: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #cfd6ef !important;
  border: 0 !important;
  border-radius: 999px !important;
}
#inicio .hero-dots button.is-active { background: #4b52ec !important; }
#inicio .hero-dots button span,
#inicio .hero-dots button i,
#inicio .pause-control { display: none !important; }

@media (max-width: 760px) {
  #inicio.hero-slider {
    /* Preserve the complete artwork on mobile instead of cropping its text. */
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 2048 / 682 !important;
  }
  #inicio .hero-controls { bottom: 6px !important; gap: 5px !important; }
  #inicio .hero-controls > button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 8px !important;
  }
  #inicio .hero-dots { height: 24px !important; padding: 4px 6px !important; gap: 4px !important; }
  #inicio .hero-dots button {
    flex-basis: 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 6px !important;
    min-height: 6px !important;
  }
}