/* ==========================================
   HERO SLIDER - STOREFRONT (DEBUG MODE)
   ========================================== */

.hero-slider-fullwidth {
  width: 100%;
  position: relative;
  /* Borde rojo temporal para depurar: si ves una línea roja, el HTML funciona */
  /* border: 5px solid red; */
  background-color: #f0f0f0; /* Fondo gris temporal */
  z-index: 10;
}

.hero-swiper,
.swiper-slide,
.slide-link,
.slide-image {
  width: 100%;
  height: 600px; /* Altura fija para asegurar que no colapse */
  display: block;
}

.slide-image {
  object-fit: cover;
  object-position: center;
}

@media (max-width: 768px) {
  .hero-swiper,
  .swiper-slide,
  .slide-link,
  .slide-image {
    height: 400px;
  }
}
/* ==========================================
   FLECHAS Y INDICADORES DEL SLIDER
   ========================================== */

/* Flechas de navegación */
.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.3);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px); /* Efecto vidrio esmerilado moderno */
}

/* Iconos de las flechas (más grandes y visibles) */
.hero-swiper .swiper-button-next:after,
.hero-swiper .swiper-button-prev:after {
  font-size: 22px;
  font-weight: bold;
}

/* Efecto hover en las flechas */
.hero-swiper .swiper-button-next:hover,
.hero-swiper .swiper-button-prev:hover {
  background: rgba(0, 0, 0, 0.6);
  transform: scale(1.1);
}

/* Indicadores (Paginación / Puntos) */
.hero-swiper .swiper-pagination {
  bottom: 25px !important; /* Separación del borde inferior */
}

.hero-swiper .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #ffffff;
  opacity: 0.5;
  transition: all 0.3s ease;
  margin: 0 6px !important;
}

/* Punto activo (slide actual) */
.hero-swiper .swiper-pagination-bullet-active {
  opacity: 1;
  background: #ffffff;
  transform: scale(1.3);
}

/* Ajuste para mobile: flechas un poco más pequeñas */
@media (max-width: 768px) {
  .hero-swiper .swiper-button-next,
  .hero-swiper .swiper-button-prev {
    width: 40px;
    height: 40px;
  }

  .hero-swiper .swiper-button-next:after,
  .hero-swiper .swiper-button-prev:after {
    font-size: 18px;
  }

  .hero-swiper .swiper-pagination {
    bottom: 15px !important;
  }

  .hero-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
  }
}