.swiper-button-prev:hover, .swiper-button-next:hover {
    background-color: transparent;
    color: transparent;
    border-color: transparent;
}

/* Botones de flecha Swiper */
.swiper-button-prev,
.swiper-button-next {
  width: 36px;         /* Más ancho */
  height: 32px;        /* Un poco más bajo */
  border-radius: 10px; /* Ya no es 50% — esto forma un óvalo */
  background-color: #FFFFFF63;
  color: #333333;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: 1px solid #cccccc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  border-color: transparent;
}

/* Estilo de flecha usando bordes */
.swiper-button-prev::after,
.swiper-button-next::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  padding: 2px;
  transition: border-color 0.3s ease;
}

/* Flecha izquierda ↢ */
.swiper-button-prev::after {
  transform: rotate(135deg);
}

/* Flecha derecha ↣ */
.swiper-button-next::after {
  transform: rotate(-45deg);
}

/* Hover: cambia color de flecha */
.swiper-button-prev:hover::after,
.swiper-button-next:hover::after {
  border-color: #ffffff;
}