.orange-line {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, orange, #ffa33e, orange); /* Gradiente naranja */
    margin: 20px 0;
  }


  .iframe-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px; /* Espacio respecto a la sección anterior */
    margin-bottom: 20px; /* Espacio adicional si es necesario */
    height:520px;
    overflow: hidden; /* Evita el scroll dentro del contenedor */

  }









  .contenedor_tabla{
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos bajen de línea */
    gap: 10px; /* Espaciado entre tarjetas */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente si es necesario */
    max-width: 1150px; /* Ajusta el ancho del contenedor */
    margin: 0 auto; /* Centra el contenedor en la página */
    padding: 0px;
  }

  .tabla_resumen{
    width: 44%;
    padding: 20px;
  }

  .zona_botones_laterales{
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos bajen de línea */
    gap: 20px; /* Espaciado entre tarjetas */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente si es necesario */
    max-width: 55%; /* Ajusta el ancho del contenedor */
    margin: 0 auto; /* Centra el contenedor en la página */
    padding: 0px;
  }


  .botones_laterales{
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    border: 1px solid #dee2e6;
    border-radius: 15px;
    
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    cursor: pointer;
    height: 175px;
    text-align: center;
    width: 99%;
  }

  .botones_laterales_pequeños{
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    border: 1px solid #dee2e6;
    border-radius: 15px;
    
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    cursor: pointer;
    height: 125px;
    text-align: center;
    width: 48%;
  }


  .botones_laterales h3 {
    color: white;
    margin: 0;
    transition: color 0.2s;
    padding: 50px; /* Ajusta el espaciado para mejor distribución */
  }

  
  
  /* Efecto hover */
  .botones_laterales:hover {
    transform: scale(1.05);
  }
  
  .botones_laterales:hover h3 {
    color: #FFA33E;
  }

  .botones_laterales_pequeños h3 {
    color: white;
    margin: 0;
    transition: color 0.2s;
    padding: 25px; /* Ajusta el espaciado para mejor distribución */
  }
  
  /* Efecto hover */
  .botones_laterales_pequeños:hover {
    transform: scale(1.05);
  }
  
  .botones_laterales_pequeños:hover h3 {
    color: #FFA33E;
  }




  @media (max-width: 1200px) {
    .contenedor_tabla {
      max-width: 1000px;
    }

  }

  
  @media (max-width: 1150px) {
    .contenedor_tabla {
        width: 100%; /* Ocupa todo el ancho de la pantalla */
        max-width: 100%;
        
    }

    .tabla_resumen, .zona_botones_laterales {
        width: 100%; /* Ocupa el 95% del ancho disponible */
        max-width: 95%;

    }

    .zona_botones_laterales {
        justify-content: center; /* Asegura que los botones se mantengan centrados */
   
    }

    .botones_laterales_pequeños{
      height: 100px;
    }
    .botones_laterales{
      height: 150px;
    }
}

@media (max-width: 650px) {

  .botones_laterales_pequeños{
    width: 100%;
    height: 90px;
  }
  .botones_laterales{
    width: 100%;
    height: 125px;
  }
}














  .prediccion-box {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding:20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
    width: 100%; /* Ancho del 100% del espacio del contenedor */
    max-width: 1200px; /* Ancho máximo para controlar la anchura de la caja */
    margin: 0 auto; /* Centrar horizontalmente en el contenedor */
    overflow-x: auto; /* Evita el desplazamiento vertical */
    overflow-y: hidden; /* Evita el desplazamiento vertical */
}

  .prediccion-box table {
    width: 100%; /* La tabla ocupa el 100% del ancho de la caja */
    height: 515px;
  }

  /* Ajustes para pantallas medianas (tabletas) */
  @media (max-width: 768px) {
    .prediccion-box {
        padding: 15px;
        font-size: 13px;
        max-width: 100%; /* Reducir el ancho máximo para dispositivos medianos */
    }
}

/* Ajustes para pantallas pequeñas (teléfonos móviles) */
@media (max-width: 550px) {
    .prediccion-box {
        padding: 10px;
        font-size: 10px;
        max-width: 100%; /* Tomar todo el ancho de la pantalla en dispositivos pequeños */
        
    }
}


  .municipio-card {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 350px;
    color: #000; /* Texto en negro por defecto */
    transition: color 0.2s ease, transform 0.2s ease; /* Transición suave al cambiar de color */
    
}

.municipio-card:hover {
    color: orange; /* Cambia el color del texto a naranja al pasar el ratón */
    transform: scale(1.05); /* Escala la tarjeta al 105% */
}

.municipios-grid {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos bajen de línea */
  gap: 20px; /* Espaciado entre tarjetas */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente si es necesario */
  max-width: 1300px; /* Ajusta el ancho del contenedor */
  margin: 0 auto; /* Centra el contenedor en la página */
  padding: 20px;
}


/* Responsive adjustments for smaller screens */
@media (max-width: 1200px) {
  .municipios-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columnas para pantallas entre 768px y 1200px */
      justify-content: center; /* Centra las tarjetas horizontalmente */
      
  }
  
}


@media (max-width: 1000px) {
  .municipios-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)); /* 2 columnas para pantallas entre 576px y 768px */
  }




  .municipio-card {
    width: 250px;
  }


}



@media (max-width: 768px) {
  .municipios-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columnas para pantallas entre 576px y 768px */
  }



  .card{
    max-height:380px;
  }

  .municipio-card {
    width: 175px;
  }


}



@media (max-width: 470px) {


  .municipio-card {
    width: 125px;
  }

}


.provincias-grid {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos bajen de línea */
  gap: 20px; /* Espaciado entre tarjetas */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente si es necesario */
  max-width: 1300px; /* Ajusta el ancho del contenedor */
  margin: 0 auto; /* Centra el contenedor en la página */
  padding: 20px;
}



.provincia-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  border: 1px solid #dee2e6;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  cursor: pointer;
  height: 200px;
  text-align: center;
  width: 31%;
}



/* Para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
  .provincia-card {
    max-height: 150px;
    width: 30%;
  }
  .provincias-grid {
    gap: 15px; /* Espaciado entre tarjetas */
  }
}

/* Para pantallas pequeñas (móviles) */
@media (max-width: 580px) {
  .provincia-card {
    max-height: 100px;
    width: 47%;
  }
}



.provincia-card h3 {
  color: white;
  margin: 0;
  transition: color 0.2s;
}

/* Efecto hover */
.provincia-card:hover {
  transform: scale(1.05);
}

.provincia-card:hover h3 {
  color: #FFA33E;
}


.full-card-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none; /* Elimina el subrayado del enlace */
  color: inherit; /* Hereda el color del contenedor */
}








.probootstrap-block-image {
    border: 1px solid #ccc; /* Añadir un borde sólido de 1px de grosor y color gris claro */
    padding: 15px; /* Agregar un espacio interno para separar el contenido del borde */
    margin-bottom: 20px; /* Espacio entre cada caja de playa */
  }



  .card {
    border-radius: 12px; /* Esquinas redondeadas */
    overflow: hidden; /* Asegura que la imagen y otros elementos se ajusten a las esquinas redondeadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Agrega sombra para profundidad */
    background-color: #f9f9f9; /* Color de fondo de la tarjeta */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave para el hover */
    margin-bottom: 20px; /* Separación entre las tarjetas */
    max-height: 390px;
    max-width: 330px;
}
.card:hover {
    transform: scale(1.05); /* Aumenta el tamaño al pasar el ratón */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra más prominente en hover */
}
.card img {
    width: 100%; /* La imagen ocupa todo el ancho del contenedor */
    height: auto; /* Mantiene la relación de aspecto de la imagen */
}

.card-image-container {
  height: 40%; /* Altura de la imagen será el 30% de la altura total de la tarjeta */
  overflow: hidden; /* Oculta cualquier parte de la imagen que se desborde */
}



.card-body {
  height: 50%;
    
}
.card-title a {
  text-decoration: none; /* Quita el subrayado del enlace */
  color: #1E90FF; /* Color del texto del enlace por defecto */
  transition: color 0.3s ease; /* Transición suave para el cambio de color */
  font-size: 20px; /* Ajusta el tamaño del texto */
  white-space: normal; /* Permite el salto de línea si el texto es largo */
  word-wrap: break-word; /* Rompe el texto largo para ajustarlo */
  overflow-wrap: break-word; /* Asegura que el texto largo se divida correctamente */
  display: block; /* Hace que el enlace ocupe todo el espacio disponible */
  max-width: 100%; /* Evita que el texto se desborde horizontalmente */
  line-height: 1.4; /* Controla la altura de línea para un mejor espaciado */
}
.card-title a:hover {
    color: orange; /* Cambia el color del texto a naranja al pasar el ratón */
}
.card-table th, .card-table td {
    text-align: center;
    vertical-align: middle;
}
.card-table img {
    width: 40px; /* Ajusta el tamaño de los iconos */
    height: auto;
}


.playas-grid {
  display: flex;
  justify-content: center; /* Centra las tarjetas horizontalmente */
  flex-wrap: wrap; /* Permite que se ajusten en varias líneas */
  row-gap: 0px; /* Espaciado vertical entre las tarjetas */
  column-gap: 20px; /* Espaciado horizontal entre las tarjetas */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1200px) {
    .playas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columnas para pantallas entre 768px y 1200px */
    }
}



@media (max-width: 695px) {
  .playas-grid {
      grid-template-columns: repeat(1, minmax(0, 1fr)); /* 2 columnas para pantallas entre 576px y 768px */
  }


}



.scrolling-wrapper {
    overflow-x: auto; /* Permite el desplazamiento horizontal */
    overflow-y: hidden; /* Oculta el desplazamiento vertical */
    white-space: nowrap; /* Mantiene los elementos en una sola línea horizontal */
    padding: 10px 0; /* Espacio arriba y abajo */
    display: flex; /* Alinea los elementos en una fila horizontal */
    align-items: flex-start; /* Alinea los elementos en la parte superior */
  }
  .scrolling-wrapper .card-ranking {
    flex: 0 0 auto; /* Permite que los elementos tengan un tamaño fijo */
    margin-left: 15px; /* Espacio entre los elementos */
    display: flex; /* Asegura que el contenedor hijo use flexbox */
    flex-direction: column; /* Alinea los elementos en una columna */
  }




  .card-ranking {
    border-radius: 12px; /* Esquinas redondeadas */
    overflow: hidden; /* Asegura que la imagen y otros elementos se ajusten a las esquinas redondeadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Agrega sombra para profundidad */
    background-color: #f9f9f9; /* Color de fondo de la tarjeta */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave para el hover */
    margin-bottom: 20px; /* Separación entre las tarjetas */
    height: 300px;
    width: 250px;
}
.card-ranking:hover {
    transform: scale(1.05); /* Aumenta el tamaño al pasar el ratón */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra más prominente en hover */
}
.card-ranking img {
    width: 100%; /* La imagen ocupa todo el ancho del contenedor */
    height: 100%; /* Mantiene la relación de aspecto de la imagen */
}

.card-ranking-image-container {
  height: 50%; /* Altura de la imagen será el 30% de la altura total de la tarjeta */
  overflow: hidden; /* Oculta cualquier parte de la imagen que se desborde */
}

.card-ranking-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
  object-position: center;
}

.card-ranking-body {
  height: 50%; 
}

.card-ranking-title {
  width: 100%; /* Asegura que el contenedor del título ocupe el 100% del ancho disponible */
  overflow: hidden; /* Oculta cualquier contenido desbordado */
  text-overflow: ellipsis; /* Muestra "..." cuando el texto es demasiado largo */
}

.card-ranking-title a {
    text-decoration: none; /* Quita el subrayado del enlace */
    color: #000000; /* Color del texto del enlace por defecto */
    transition: color 0.3s ease; /* Transición suave para el cambio de color */
    font-size: 20px; /* Ajusta el tamaño del texto */
}
.card-ranking-title a:hover {
    color: orange; /* Cambia el color del texto a naranja al pasar el ratón */
}
.card-ranking-table th, .card-table td {
    text-align: center;
    vertical-align: middle;
}
.card-ranking-table img {
    width: 40px; /* Ajusta el tamaño de los iconos */
    height: auto;
}













.card-restaurante {
  border-radius: 12px; /* Esquinas redondeadas */
  overflow: hidden; /* Asegura que la imagen y otros elementos se ajusten a las esquinas redondeadas */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Agrega sombra para profundidad */
  background-color: #f9f9f9; /* Color de fondo de la tarjeta */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave para el hover */
  margin-bottom: 20px; /* Separación entre las tarjetas */
  max-height: 160px;
  width: 31%;
}
.card-restaurante:hover {
  transform: scale(1.05); /* Aumenta el tamaño al pasar el ratón */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra más prominente en hover */
}
.card-restaurante img {
  width: 100%; /* La imagen ocupa todo el ancho del contenedor */
  height: auto; /* Mantiene la relación de aspecto de la imagen */
}


.card-restaurante-body {
height: 50%;
  
}

.card-restaurante-title {
  white-space: nowrap; /* Evita que el texto se divida en varias líneas */
  overflow: hidden; /* Oculta el texto que se desborda */
  text-overflow: ellipsis; /* Muestra puntos suspensivos cuando el texto es demasiado largo */
}

.card-restaurante-title a {
  text-decoration: none; /* Quita el subrayado del enlace */
  color: #1E90FF; /* Color del texto del enlace por defecto */
  transition: color 0.3s ease; /* Transición suave para el cambio de color */
  font-size: 18px; /* Ajusta el tamaño del texto */
  
}

.card-restaurante-title span {
  text-decoration: none; /* Quita el subrayado del enlace */
  font-size: 18px; /* Ajusta el tamaño del texto */
  
}

/* Para pantallas más pequeñas */
@media (max-width: 1000px) {

  .card-restaurante {
    width: 48%;
  }
}

/* Para pantallas muy pequeñas, como móviles */
@media (max-width: 580px) {
  .card-restaurante {
    width: 90%;
  }
}

.card-restaurante-title a:hover {
  color: orange; /* Cambia el color del texto a naranja al pasar el ratón */
}

.card-restaurante-table a {
  text-decoration: none; /* Quita el subrayado del enlace */
  color: black; /* Color del texto del enlace por defecto */
  transition: color 0.3s ease; /* Transición suave para el cambio de color */
  font-weight: normal; /* Asegura que el texto no esté en negrita */
  vertical-align: middle;
}

.card-restaurante-table a:hover {
  color: orange; /* Cambia el color del texto a naranja al pasar el ratón */
}

.card-restaurante-table th, .card-table td {
  text-align: center;
  vertical-align: middle;
}
.card-restaurante-table img {
  width: 20px; /* Ajusta el tamaño de los iconos */
  height: auto;
}






/* Contenedor general del footer */
.modern-footer {
  background-color: #000; /* Fondo negro */
  color: #fff; /* Texto blanco para buen contraste */
  padding: 20px 0;
}

.modern-footer .modern-footer-widget {
  text-align: center; /* Centra el texto horizontalmente */
  margin-bottom: 20px;
}

/* Enlaces del footer */
.modern-footer .modern-footer-widget a {
  color: orange; /* Color naranja para los enlaces */
  text-decoration: none; /* Sin subrayado */
  text-align: center;
}

.modern-footer .modern-footer-widget a:hover {
  text-decoration: underline; /* Subrayado al pasar el cursor */
}


/* Contenedor de logos */
.modern-footer .logos-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 4 columnas en pantallas grandes */
  
  gap: 20px; /* Espaciado entre logos */
  justify-items: center; /* Centrar los logos horizontalmente */
  align-items: center; /* Centrar los logos verticalmente */
}

/* Logos individuales */

.modern-footer .logos-container img {
  width: 100px; /* Ajusta a un tamaño visible para pruebas */
  height: auto;
  transition: transform 0.3s ease; /* Efecto de escala al pasar el cursor */
}

.modern-footer .logos-container img:hover {
  transform: scale(1.1); /* Efecto de zoom */
}

@media screen and (max-width: 768px) {
  .modern-footer .logos-container {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en pantallas pequeñas */
  }
}




.video-container {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  width: 100%; /* Ocupa todo el ancho disponible */
  max-width: 800px; /* Máximo tamaño del video */
  margin: 0 auto; /* Centrado horizontal */
  padding: 10px;
}

.video-container video {
  width: 100%; /* Hace que el video se ajuste al contenedor */
  height: auto; /* Mantiene la proporción */
  border-radius: 10px; /* Bordes redondeados opcionales */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave */
}



.caja_img_prob_algas {
  text-align: center;  /* Centra el contenido horizontalmente */
  margin: 20px auto;  /* Márgenes de 20px arriba y abajo */
  width: 100%;  /* Asegura que el contenedor ocupe todo el ancho disponible */
}

/* Contenedor de la imagen con recorte */
.image-container {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  width: 100%; /* Ocupa todo el ancho disponible */
  max-width: 800px; /* Máximo tamaño del video */
  margin: 0 auto; /* Centrado horizontal */
  padding: 10px;
}

.image-container img {
  width: 100%; /* Hace que el video se ajuste al contenedor */
  height: auto; /* Mantiene la proporción */

}


/* Contenedor del slider */
.slider-container {
  position: relative;
  width: 50%;
  margin: auto;
  text-align: center;
}

/* Estilo del deslizador */
.day-slider {
  width: 100%;
  -webkit-appearance: none;
  height: 8px;
  background: #ddd;
  border-radius: 5px;
  margin-bottom: 20px;
}

/* Thumb (control deslizante) */
.day-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: orange;
  border-radius: 50%;
  cursor: pointer;
}


/* Estilo del deslizador */
#daySliderNauticos {
  width: 100%;
  -webkit-appearance: none;
  height: 8px;
  background: #ddd;
  border-radius: 5px;
  margin-bottom: 20px;
}

/* Thumb (control deslizante) */
#daySliderNauticos::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: orange;
  border-radius: 50%;
  cursor: pointer;
}

/* Marcadores */
.slider-markers {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 20px); /* Ajustar para que coincida con el rango del slider */
  margin: 0 auto; /* Centrar horizontalmente */
  padding: 0; /* No es necesario poner px aquí */
  position: absolute;
  left: 10px; /* Ajustar para centrar con el slider */

}

.slider-markers span {
  font-size: 14px;
  color: #333;
  position: relative;
  font-weight: bold;
}

.slider-markers span::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: orange;
  border-radius: 50%;
}





.select-personalizado {
  width: 200px;
  padding: 10px;
  border-radius: 15px;
  border: 1px solid #dee2e6;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  text-align: center;
  text-align-last: center; /* Centra el texto seleccionado en algunos navegadores */
}

.select-personalizado-estrecho {
  width: 150px;
  border-radius: 15px;
  border: 1px solid #dee2e6;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  text-align: center;
  text-align-last: center; /* Centra el texto seleccionado en algunos navegadores */
}