/* Reset */

* {
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
}

html {
  scroll-behavior: smooth;
  --swiper-pagination-color: black;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  text-align: center;
  font-size: 1.25vw;
  overflow-x: hidden;
  /* Prevent horizontal scrolling */
  min-height: 100vh;
  /* Ensure the body extends to at least the full viewport height */
  position: relative;

}



#proximos-eventos {
  font-family: "Roboto", sans-serif;
  text-align: left;
  font-size: 3vw;
  margin-top: 3%;
  margin-bottom: 2%;
  color: rgb(0, 0, 0);
}

/* Header y navegación */
  
.header-visible {
  transform: translateY(-100px);
  transition: ease-in-out;
  transition-duration: 500ms;
}




/* VIDEO */

/* Asegura que el contenedor del video ocupe todo el ancho */
.video-container video {

  margin: 0;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
}

.video-container-mobile video {
  margin: 0;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  display: none;
}

@media (max-width: 768px) {
  .video-container video {

    display: none;
  }

  .video-container-mobile video {
    display: block;
  }
}

#pic-mobile {
  display: none;
}

@media (max-width: 768px) {
  #container-mobile {
    display: block;
    width: 90%;
    height: auto;
    margin: 0 auto;
  }

  #pic-mobile {
    margin-top: 100px;
    overflow: hidden;
    max-width: 100%;
    display: block;
  }
}

/* RUTAS */





/* Estilo para la flecha derecha */
.swiper-button-next,
.swiper-button-prev {

  color: rgb(255, 255, 255);
  /* Color de la flecha */

  align-items: center;
  justify-content: center;
  margin-inline: 2%;
  text-shadow: 1px 0 5px #000000;
}


/* Opcional: agrandar el tamaño del icono de las flechas */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 30px;
  /* Tamaño de la flecha */
  font-weight: 900;
  /* Aumenta el grosor de la flecha */
}

/* Estilos para los puntos de paginación */
.swiper-pagination-bullet {
  width: 8px;
  /* Tamaño normal de los puntos */
  height: 8px;
  background-color: #000;
  /* Color del punto */
  border-radius: 50%;
  /* Forma circular */
  transition: all 0.3s ease;
  /* Transición para un cambio suave */
}

/* Estilos para el punto activo */
.swiper-pagination-bullet-active {
  width: 16px;
  /* Ancho mayor para formar el rectángulo redondeado */
  height: 8px;
  /* Mantén la altura igual */
  border-radius: 16px;
  /* Borde redondeado para hacer una forma de píldora */
  background-color: #000;
  /* Color del punto activo (puedes ajustarlo) */
}




.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  /* Tamaño del contenedor circular */
  height: 50px;
  border-radius: 50%;
  /* Hace que el fondo sea circular */
  display: flex;
  /* Para centrar la imagen dentro del círculo */
  align-items: center;
  /* Centra verticalmente */
  justify-content: center;
  /* Centra horizontalmente */
  cursor: pointer;
  z-index: 2;
  user-select: none;
  opacity: 0.75;
}

.arrow img {
  width: 100%;
  /* Ajusta el tamaño de la imagen dentro del contenedor */
  height: 100%;
  /* Ajusta el tamaño de la imagen dentro del contenedor */
  object-fit: contain;
  /* Asegura que la imagen mantenga su proporción */
}

#left-arrow {
  left: 30px;
}

#right-arrow {
  right: 30px;
}

.eventos-container {
  padding: 0 0;
  /* Centrar automáticamente */
  padding-inline: 30px;
  /* Espaciado interno en ambos lados */
  max-width: 100vw;
  /* No permite que se desborde fuera del ancho de la ventana */
  margin-top: 7vh;
  margin-bottom: 3vh;

}

#eventos {
  padding-bottom: 4.5vh;
}

.swiper-slide {
  width: 30vw;
  /* Asegura que cada cartel tenga un ancho mínimo */
  height: auto;
  /* Deja que la altura se ajuste automáticamente */

  overflow: hidden;
  /* Oculta la parte de la imagen que se desborda */

  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
  /* Si la imagen no llena el espacio, el fondo será blanco */

}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Evita la distorsión de la imagen al ajustarse al contenedor */
  transition: transform 0.7s ease-in-out;
  /* Suaviza el zoom solo en la imagen */
  position: relative;
  z-index: 1;

}


.swiper-slide img:hover {
  transform: scale(1.1);
  /* Solo la imagen hará zoom */
}

.cartel {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

#new-route {
  position: absolute; /* Permite la posición exacta dentro del contenedor */
  top: 12px; /* Ajusta la posición desde la parte superior */
  right: 10px; /* Ajusta la posición desde la derecha */
  background-color: rgb(255, 255, 255); /* Fondo blanco semitransparente para mejor visibilidad */
  border-radius: 20px;
  padding: 5px 20px; /* Espaciado alrededor del texto */
  font-size: 1.2rem; /* Tamaño de fuente */
  color: black; /* Color del texto */
  z-index: 10; /* Asegura que esté por encima de la imagen */
  font-family: "Rowdies";
}


.swiper-container {
  padding-bottom: 30px;
  /* Espacio para la paginación */
}

.swiper-pagination {
  position: relative;
  bottom: 0;
  margin-top: 0px;
}



/* Para pantallas más pequeñas */
@media (max-width: 768px) {
  .swiper-slide {
    width: 90vw;
    /* Asegura que cada cartel ocupe la mayor parte de la pantalla en móviles */
  }
}




#proxima-ruta-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #000000ac;
  /*position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
}

#proxima-ruta-overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-family: "Rowdies";
  color: white;
}

#proxima-ruta img {
  filter: blur(8px);
  -webkit-filter: blur(8px);
  /*position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
}

/* FOOTER */


#copyright {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 15;
  font-size: 20px;
}


.divrutas img {
  height: auto;
  width: 100%;
  object-fit: fill;
  margin-top: 60px;
  margin-bottom: 30px;
}

.icons {
  height: 25px;
}

h3 {
  font-size: 5vw;
  text-align: center;
  width: 100%;
  margin: 5%;
  z-index: 999;
}

/* MEDIA (CAMBIOS EN MOVIL) */


@media (max-width: 858px) {

  /* Cambia la barra de navegación por un menú desplegable en móviles*/
  #proximos-eventos {
    font-family: "Roboto", sans-serif;
    text-align: left;
    font-size: 9vw;
    margin-top: 3%;
    margin-bottom: 7%;
  }

  #social-icons-mobile-dropdown {
    display: block;
  }

  /* ------------------------------------------- */

  /* Cambia la selección de idiomas por un menú diferente en móviles*/


  .collage {
    display: flex;
    gap: 20px;
    min-width: 90%;
    padding: 0px;
    margin: 0 0;
  }


}



/* ICONOS */

#lan-angle {
  color: #000000;
  transition: all .5s;
  font-weight: 600;
  display: flex;
}

#lan-angle-mobile {
  color: #fff;
  transition: all .5s;
  left: 0;
  margin-left: 2%;
  font-weight: 600;
}


/*  FORMULARIO */


/* CARRUSEL DE FOTOS */

.scroll-container {
  display: none;
}

.scroll-container p {
  padding-top: 15%;
  font-weight: 500;
  font-size: 5vw;
  margin: 20px;
  text-align: center;
}

@media (max-width: 858px) {
  .scroll-container {
    display: block;
    height: 100%;
    /* Ocupa toda la altura de la ventana */
    overflow: hidden;
    margin-top: 50px;
  }

  .carousel {
    display: flex;
    justify-content: center;
    /* Centra las imágenes horizontalmente */
    align-items: center;
    gap: 10px;
    /* Sin espacio entre las imágenes */
    width: 300%;
    /* Aumenta el ancho del carrusel para mayor desplazamiento */
    animation: scroll-horizontal 15s linear infinite;
    /* Velocidad de desplazamiento ajustada */
  }

  .carousel-item {
    flex-grow: 1;
    /* Permite que cada elemento del carrusel crezca */
    flex-shrink: 0;
    /* Evita que los elementos se encojan */
    width: 100%;
    /* Cada imagen ocupa el ancho completo del carrusel visible */
    height: 100%;
    /* Ocupa toda la altura del contenedor */
    overflow: hidden;
  }

  .carousel img {
    width: 40%;
    /* La imagen llena el contenedor del carrusel */
    height: auto;
    /* La imagen ocupa toda la altura del contenedor */
    object-fit: cover;
    /* La imagen se ajusta manteniendo la proporción */
    border-radius: 8px;
    ;
    /* Sin bordes redondeados */
  }

  @keyframes scroll-horizontal {
    0% {
      transform: translateX(0%);
    }

    100% {
      transform: translateX(-100%);
    }
  }

  .scroll-container:hover .carousel {
    animation-play-state: paused;
  }
}


#contacto {
  background: #222222;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
}

.footer-credits {
  margin-top: 25px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  width: 100%;
}

.footer-credits p {
  margin: 8px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.developers-info {
  margin-top: 10px;
}

.developers-info a {
  color: #e0f3ff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
  position: relative;
}

.developers-info a:hover {
  color: white;
}

.developers-info a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: white;
  transition: width 0.3s ease;
}

.developers-info a:hover::after {
  width: 100%;
}

@media (max-width: 768px) {
  .footer-credits {
      margin-top: 20px;
  }
  
  .footer-credits p {
      font-size: 12px;
  }
}






/* OTROS */

.no-scroll {
  overflow: hidden;
}

.element-hidden {
  display: none;
  /* Puedes ajustar la propiedad si prefieres ocultarla de otra manera */
}