/* =========================
   SLIDES
========================= */

#slides { 
  background: transparent;
  padding: 100px 0 0 0; /* quitamos padding lateral */
  width: 100%;
}

.swiper {
  width: 100%;
  padding-top: 0px;
  padding-bottom: 0px;
}
.swiper-slide {
  position: relative;
  width: 100%;
  height: 25vw; /* un poco más alto para verse mejor */
  min-height: 420px;
  text-align: center;
  color: #fff;

  background-size: cover; /* ahora ocupa todo */
  background-repeat: no-repeat;
  background-position: center;
}

/* =========================
   FLECHAS
========================= */

.swiper-button-prev,
.swiper-button-next {
  background-color: rgba(0, 0, 0, 0.29);
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 50%;
  transition: 0.3s ease;
}

.swiper-button-prev::before,
.swiper-button-next::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f060";
}

.swiper-button-next::before {
  transform: rotate(180deg);
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: rgba(0, 0, 0, 0.46);
  color: #0453BC;
}

/* =========================
   PAGINACIÓN
========================= */

.swiper-pagination-bullet {
  width: 1rem;
  height: 1rem;
  margin: 0 0.4rem !important;
}

.swiper-pagination-bullet-active {
  background-color: #0453BC;
}

/* =========================
   FUENTE BOTÓN
========================= */

@font-face {
  font-family: 'Coolvetica Regular';
  src: url('/fonts/coolvetica-rg.ttf') format('truetype');
}

/* =========================
   BOTÓN PERSONALIZADO
========================= */

.custom-button {
  position: absolute;
  z-index: 10;
  font-family: 'Coolvetica Regular', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  color: #FFFC00;
  top: 50%;
  left: 60%;   /* mueve el botón hacia la derecha del texto */
  transform: translateY(-16%);
}

/* Pantallas grandes */
@media (min-width: 1080px) {
  .custom-button {
    top:26vh;
    right: 9.5vw;
    width: 9.6vw;
    height: 7vh;
    font-size: 34px;
  }
}

/* Tablets */
@media (max-width: 1080px) {
  .custom-button {
    top: 31vh;
    right: 9.5vw;
    width: 9.6vw;
    height: 7vh;
    font-size: 34px;
  }
}
@media (max-width: 768px) {
  .swiper-slide {
    height: 60vw;       /* más alto en móvil */
    min-height: unset;  /* quitamos el mínimo */
    background-size: contain; /* muestra completa la imagen */
  }
  .custom-button {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* centrado perfecto */
    
    font-size: 16px;
    padding: 8px 16px;
    width: auto;
    height: auto;
  }
}