/* Contenedor principal del Swiper */
.swiper-container {
  width: 100%;
  height: 100%;
  display: none;
  padding: 0 15%; /* Menos padding en dispositivos más pequeños */
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Wrapper y slides */
.swiper-wrapper {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 15px;
  align-items: center; /* Centrado vertical */
  transition: transform 0.3s ease-out;
}

.swiper-slide {
  width: auto !important; /* Ancho según contenido */
  flex-shrink: 0; /* Evita compresión */
  margin: 0 !important;
  text-align: center;
  transition: transform 0.3s ease; /* Animación suave */
}

/* Estilos base de los enlaces */
.swiper-slide a {
  display: block;
  padding: 10px 20px;
  border-radius: 100px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(14px, 1.5vw, 21px);
  font-weight: 400;
  color: #000;
  text-decoration: none;
  background: transparent;
  transition: 
    background-color 0.3s,
    color 0.3s,
    transform 0.2s;
  white-space: nowrap; /* Texto en una línea */
}

/* Estados interactivos */
.swiper-slide a:hover,
.swiper-slide a.active {
  background: rgba(255, 103, 0, 0.15);
  color: #FF6700;
  transform: scale(1.05);
}

/* Slide activo (énfasis visual) */
.swiper-slide a.active {
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(255, 103, 0, 0.1);
}
.swiper-container.padding-first {
  padding: 0 24% !important;
  transition: padding 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.swiper-container.padding-middle {
  padding: 0 15% !important;
  transition: padding 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.swiper-container.padding-last {
  padding: 0 22% !important;
  transition: padding 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* --------------------------------------- */
/* Media Queries para responsividad */
/* --------------------------------------- */

/* Tablet y móvil (1024px o menos) */
@media screen and (max-width: 1024px) {
  .swiper-container {
    display: block;
  }
}

/* Mobile (575px o menos) */
@media screen and (max-width: 575px) {
  /* .swiper-container {
    padding: 0 10%; 
  } */

  .swiper-slide a {
    padding: 16px 24px;
    width: auto; /* Ajuste fino para móviles */
    min-width: 140px; /* Evita botones demasiado pequeños */
  }

  /* Efecto de "toque" en móvil */
  .swiper-slide a:active {
    transform: scale(0.98);
  }
}

/* --------------------------------------- */
/* Ajustes para pantallas muy pequeñas */
/* --------------------------------------- */
@media screen and (max-width: 375px) {
  .swiper-slide a {
    font-size: 14px;
    padding: 12px 18px;
  }
}