@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300&display=swap'); /*Texto Hover*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Viaoda+Libre&display=swap');/*Leyendas*/

#banner{
 margin-top: 90px;
 position: relative;}

#banner img{
 width: 100%;
 height: 110%;
 margin-bottom: 20px;}

#banner .contenedor{         /*Contenedor de encabezado*/
 position: absolute;
 top: 110%;
 left: 50%;
 color: #efb810;	
 transform: translateX(-50%) translateY(-50%);
 text-align: center;
 font-family: 'Jura', sans-serif;}

#banner h1{
 font-size: 40px;  
 margin-top: 20px;}

#banner h3{
 font-size: 25px;
 margin-top: 20px;}

.texto{ 	
 margin: 160px auto; 
 width: 80%;
 justify-content: center;
 text-align: center;
 color: white;}

.texto p{
 font-size: 18px;}

.galeria{
 width: 80%;
 display: flex;
 flex-wrap: wrap;
 justify-content: center; 
 margin: -15% auto; 
 margin-bottom: 50px;}

.galeria img{
 max-width: 100%;}


 /*LEYENDA*****************************************************************************************************/
#leyenda .contenedorLeyenda{        
 width: 90%;
 height: 5%;
 left: 5%;
 position: absolute;
 color: #fff; 
 text-align: center;
 font-family: "Viaoda Libre", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 10px;
}

#leyenda a{
 font-size: 50px;
}

 /*OTRAS HISTORIAS*********************************************************************************************/
 .masHistorias{
 width: 90%;
 margin: 120px auto;
 margin-bottom: 70px;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 border: 1px solid #333;} 

.mas{
 margin: 10px;
 max-width: 300px; 
 padding: 5px;
 text-align: center;
 overflow: hidden;
 position: relative;  /*hace que el hover se posicione sobre su elemento*/
 font-family: 'Jura', sans-serif;}

.mas a{
 text-decoration: none;}

.mas img{
 max-width: 100%;
 object-fit: cover;}

.textoMas{
 height: 110px; 
 background-color: rgba(133,90,37,0.5);}

.mas h2{ 
 color: white;  
 margin-bottom: 20px;
 }

.mas h4{
 color: white;}

.mas h5{
 color: #efb810;}

footer{
 margin-top: 10%;}

/**************************RESPONSIVE*********************/
@media(min-width:320px){    
 .masHistorias{
 margin-top: 200px;
 }

}



@media(min-width:600px){     /************************************/
  /***************************************************************/
 .texto p{ font-size: 23px; }
 .mas{ max-width: 400px; }
 .hover h2{ margin: 40px; }
}


@media(min-width:800px){    /************************************/
  /***************************************************************/
#banner{ height: 500px; overflow: hidden; } /*Al darle altura Auto a la imagen, ésta se sale del contenedor y con el HIDDEN se acopla al mismo*/
#banner img{ height: auto; margin-top: -15%; }    
#banner .contenedor{ margin-left: -30%; top: 300px; }
.texto{ margin: -15px auto; }
.galeria{ margin: 8% auto; }
footer{ margin-top: 8%; }
}


@media(min-width:1024px){  /************************************/	
/***************************************************************/
#banner .contenedor{ top: 350px; }
#banner h1{ font-size: 60px; } 
#banner h3{ font-size: 30px; }
#banner h4{ font-size: 20px; }
.texto{ margin: 40px auto; }
.mas .textoMas{ top: 0; width: 0%; height: 100%; position: absolute; justify-content: center; align-items: center; overflow: hidden; transition: 0.4s all; }
.mas h2{ margin: 20px; text-shadow: 1px 1px 1px black; font-size: 35px; }
.mas h4{ margin: 20px; text-shadow: 1px 1px 1px black; font-size: 20px; }
.mas h5{ margin: 25px; text-shadow: 1px 1px 1px black; font-size: 15px;}
.mas:hover .textoMas{ width: 100%; cursor: pointer; }
 footer{ margin-top: 4%; } 
}

@media(min-width:1280px){  /************************************/
/***************************************************************/	
 .mas{ max-width: 450px; }
}


@media(min-width:1440px){ /************************************/
/***************************************************************/	
#banner .contenedor{ margin-left: -35%;	} 
}


@media(min-width:1680px){ /************************************/ 
/***************************************************************/       
#banner{ height: 650px; }
#banner img{ margin-top: -12%; }
#banner .contenedor{ top: 460px; margin-left: -35%; }
.galeria{ margin: 60px auto; }
}