/*MOBILE ESTILOS*/

/*Paleta de colores a ultilizar debido a que boostrap no tiene los colores que deseo*/
.color-verde{
background-color: #718159;
}

.color-beige{
background-color: #f5f5dc;
}

.color-marron{
background-color: #775a5a;
}

.color-rojo{
 background-color: #eb3c3c;
  }

  .color-celeste{
    background-color: #84b6c0;
  }

  

/*Aplico Tipografia elegida a todo con Google Fonts*/
body{
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-style: normal;
}

/*Aplico a textos debido  a que boostrap no me recone el text-justify*/
.text-justify-css{
text-align: justify;
}

/* Logo de la pagina: bandera de Italia*/
.logo{
    width: 30%;
}

.sello{
width: 17%;
}

/* Estilos para los links*/
a:link{ color: rgba(0, 0, 0, 0.988) !important; }
a:visited{ color: #fca24efc !important; }
a:hover { color: #eb3c3c !important;}
a:active{color: rgb(113, 129, 89) !important;}

/* diseño para header de la mayoria de las paginas*/
.imagen-header{
  width: 100%;  
  max-height: 75vh;   
  object-fit: cover;  
}

/* Contenedor general de paginas que uso en algunas para centrar */
main .row{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/*PIE DE PAGINA*/
footer{
  background-color: #816346;
  padding: 1em;
}

/* DISENO PAGINA HOME PAGE*/
.imagen-home {
  max-height: 50vh;
  object-fit: cover;
  width: 95%;
}    

.contenedor-texto {
  position: relative;
}

.textopurpose{
width: 90%;
}

.header-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgb(225, 93, 93);
  font-weight: bold; 
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
  text-align: center;
  width: 100%; 
}

.header-subtext{
position: absolute;
top: 63%;
left: 50%;
transform: translate(-50%, -50%);
color: rgb(106, 175, 130);
font-weight: bold; 
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
text-align: center;
width: 100%; 
}

/* Estilo de pagina contacto */
.contacto {
  width: 100%;
  padding: 1em;
}
.contacto-img{
  width: 100%;
}
.formulario{
margin-top: 3em;
}

.img-gracias{
width: 100%;
}




/*DISEÑO DE PAGINA GALERIA DE FOTOS*/

.container-fotos img:hover {
  filter: brightness(0.8);
}

.container-fotos img {
  width: 100%; 
  height: auto; 
}

   .container-fotos {
    width: 95%;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }



/*DISEÑO DE PAGINA GEOGRAFIA*/
.map-image{
  cursor: pointer; 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Efecto de sombreado y agrandado al pasar el mouse */
.map-image:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}


/*DISEÑO PAGINA GASTRONOMIA*/
  /* Imagen */
  .imagen-enlace img {
    transition: filter 0.3s, transform 0.3s;
    
  }

  /* Efecto al pasar el mouse */
  .imagen-enlace:hover img {
    filter: brightness(0.8); /* Oscurece la imagen */
    transform: scale(1.05); 
  }

  /* Efecto al hacer clic */
  .imagen-enlace:active img {
    filter: brightness(0.4); /* Más oscuro */
    transform: scale(1.02); 
  }


  .texto-sobre-imagen {
    transform: translate(10%, -140%);
    font-size: 29px;
    text-shadow: 2px 2px 4px rgba(63, 114, 61, 0.7);
    z-index: 2;
}
/* Color a utilizar en algunos estilos*/
  .color-marron{
    background-color: #816346;
  }
  
  
    .h-gastronomia{
        height: 30vh; 
        object-fit: cover;  
        display: block;    
         margin-top: 1em;
         width: 100%; 
   
    }


/*DISEÑO DE PAGINA RESTAURANTES*/
   
.restaurant-card {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.restaurant-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.restaurant-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.map-container {
  width: 100%;
  height: 300px;
  margin-top: 20px;
}

/*DISEÑO DE PAGINA COMIDAS TIPICAS*/
/* Imagenes de la pagina comidas tipicas width */
.imagenes-comida{
width: 100%;

}

/* Titulo del header de comidas tipicas*/
.header-container h1 {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%);
  font-size: 1.2em;
  text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.9);
  width: 90%;
}


/*Boton del header comidas tipicas*/
.header-container a.btn {
  font-size: 0.9em; 
  padding: 4px ; 
  position: absolute; top: 70%; left: 50%; transform: translate(-50%);
}

.imagen-receta{
  width: 100%;
  border-radius: 0; /* sin bordes */
}



/*DISEÑO PAGINA JUEG0*/
/* container juego para mobile*/
.container-juego {
  display: flex;
  position: relative;
  justify-content: center; 
  align-items: center; 
  margin: 0 auto;
  background-color: rgb(106, 169, 123);
  padding: 2em;
  margin-top: 3em;
  margin-bottom: 3em;
  border-radius: 1em;
}
#preguntaHtml{
  color: white;
}
#resultadosHtml{
  color: white;
}

  button {
    cursor: pointer;
  }
  
  #opcionesHtml {
      display: flex;
      flex-direction: column; 
      margin-top: 1em;
      gap: 1em; 
      color: white;
  
    }
  
    .preguntasyrespuestas{
      padding: 2em;
    }
  
    .opcionesHtml button {
      padding: 10px 20px; 
      border-radius: 25px; 
      border: 1px solid #ccc;
      background-color: #f8f8f8; 
    
  
    }
    
    .opcionesHtml button:hover {
      background-color: #e0e0e0; 
    }
  
 
      
    .card-title{
      text-decoration: none;
    }
    
    #temporizador {
      position: absolute;
      left: 20px;
      top: 20px;
      font-size: 30px;
      color: #FFF;
      background-color: red;
      border-radius: 2em;
      padding: 0.2em;
    }
    
    #botonJugar {
      display: block;
      margin: 0 auto;
      padding: 10px 20px; 
      border-radius: 8px; 
      border: 1px solid #ccc;
      background-color: #f8f8f8; 
    }


/*Averiguado con AI debido a que no podia solucionar el tema de que el footer cuando la pagina tiene poco contenido me quede abajo de todo*/
    .min-height-full {
      min-height: calc(100vh - 138px);
    }
  


/* DISENO DE PAGINA DESTINOS*/
/* Diseño para oscurecer la imagen al pasar el mouse */
.conteinerlugares img:hover {
  filter: brightness(0.8);
}

.modal-video{
  width: 100%;
}
.modal-body{
  background-color: rgb(238, 228, 215);
 }

/* Contenedor de cada destino */
.destino-container {
  position: relative; 
  display: block; 
  margin-bottom: 3em;
  text-align: center;
}
.texto-sobre-imagen-destinos {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  color: white; 
  font-size: 24px; 
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
  opacity: 0; /* texto invisible */
  transition: opacity 0.3s ease; 
}

/* Cuando el ratón pase sobre el contenedor de la imagen, el texto se hará visible */
.destino-container:hover .texto-sobre-imagen-destinos {
  opacity: 1; /* texto visible */
}

/* Estilos generales para la galería de destinos imperdibles */
.conteinerlugares {
  width: 100%;
  margin: 0 auto;
  margin-top: 5em;
  margin-bottom: 5em;
}

/* Ajusta el tamaño de la imagen */
.conteinerlugares img {
  width: 90%;
  height: auto; 
  border-radius: 1em;
  cursor: pointer;
}



/* Diseno pagina futbol */
.destacado {
  font-weight: bold;
  color: #D10000;
}




/* En dispositivos móviles, el texto siempre será visible */
@media (max-width: 768px) {
  .texto-sobre-imagen-destinos {
    opacity: 1;
  }


  section:nth-of-type(2) .row {
    display: flex;
    flex-direction: column-reverse;
  }
  
}


 /* ESTILOS PPARA PAGINAS APARTIR DE 576PX (pequeño) */
@media screen and (min-width: 576px ) {


  .imagenes-comida{
    height: 38vh; 
    object-fit: cover; 
    }


    .header-container h1 {
      top: 45%;
      left: 50%;
      width: 70%;
    }

    .header-container a.btn {
     top: 65%; left: 50%;
    }

    .conteinerlugares img {
      width: 90%;
    }

    
    .header-subtext{
      top: 58%;
    }
 
}


 /* ESTILOS PPARA PAGINAS APARTIR DE 768PX(mediano) */
    @media screen and (min-width: 768px) {
        .h-gastronomia{
          height: 40vh; 
        }

        .header-subtext{
          top: 58%;
        }

        .imagen-receta{
          width: 90%;
          border-top-right-radius: 50%; 
          border-bottom-right-radius: 50%; 
      }
     
      .formulario{
        margin-top: 0em;
        }
        .imagen-header{
          max-height: 50vh;   
        }
        
#carouselExampleCaptions .carousel-item img { 
  max-height: 50vh;   
}
  
        .imagenes-comida{
          height: 40vh; 
          }

    .header-container h1 {
     top: 50%;
     width: 50%;
     }
      
    .header-container a.btn {
    top: 65%;
    }

    .logo{
      width: 30%;
  }
            
          }
      
   
 /* ESTILOS PPARA PAGINAS APARTIR DE 992PX(grande) */
@media screen and (min-width: 992px) {
 
  .logo{
    width: 30%;
}


    .h-gastronomia{ 
     height: 75vh; 
     }
     .img-gracias{
      width: 40%;
      }
  
     .container-juego {
      width: 50%;
    }

    .sello{
      width: 4%;
      }
    
#carouselExampleCaptions .carousel-item img {
  max-height: 75vh;   
}
    .contacto {
      padding: 2em;
    }
    
    .contacto-img{
      width: 75%;
    }
  
    .purpose{
    padding: 4em;
    width: 100%;
     }

   .textopurpose{
    width: 85%;
    }

  .imagenes-comida{
   width: 100%;
   }
        
  .imagen-header{
   max-height: 75vh;             
  }

  .header-container h1 {
  top: 50%;
  width: 100%;
  }
            
  .header-container a.btn {   
   top: 65%; 
  }

  .modal-video{
    width: 70%;
  }

.imagen-home {
  max-height: 70vh;

}    

.imagen-receta{
  width: 80%;
}

#navbarNav {
  position: absolute;
  left: 0;
  right: 0;
}

#navbarNav ul.navbar-nav {
  margin: 0 auto;
}
  }


 /* ESTILOS PARA PAGINAS APARTIR DE 1200PX(extra grande) */
  @media screen and (min-width: 1200px) {

  .textopurpose{
  width: 60%;
   }

   .container-juego {
    width: 50%;
  }
  
  .imagenes-comida{
   width: 100%;
  }

  .header-subtext{
    font-size: 40px;
    }
    
    .header-text{
      font-size: 50px;
    }

  .header-container h1 {
  top: 40%;
  font-size: 2.5em;
  width: 100%;
   }
  
  .header-container a.btn {
  font-size: 1.3em;
  top: 50%; 
   }

   .texto-sobre-imagen-destinos {
    font-size: 35px;
  }

  .modal-video{
    width: 60%;
  }

  .conteinerlugares{
    width: 70%;
  }

.container-fotos{
  width: 80%;
}

.imagen-home {
  max-height: 70vh;
  width: 70%;
}  
  }