@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
    
.presentacion{
    display: flex;
    flex-direction:column;
    justify-content: space-around;
    background-color: rgb(236, 204, 182);
    height: 100vh;
    margin-right: 3.5vw;
    margin-left: 3.5vw;
    width: 93vw;
    padding: 2%;
    align-content:normal;
    align-items: center;
    
}

.imagen-propia{
    display: flex;
    flex-direction: row;
    width: 100vw;
    padding-left: 10vw;
}
.imagen-propia img{
    max-width: 35%;
    height: auto;
}
.presentacion p{
    text-align: justify;
    /* width: 50%; */
    line-height: 88%;
    margin: 5%;
    /* margin-right: 0%;
    margin-left: 50%; */
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1.5vmax;
    
}
.presentacion h2{
    text-align: center;
    font-size: 30px;
    font-family:"Lora", serif;
    font-style: italic;
}
.curiosidades{
    background-color: rgb(181, 130, 87);
    width: 93vw;
    height: 100vh;
    margin-right: 3.5vw;
    margin-left: 3.5vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 2%;
    
    align-items: center;
}
.curiosidades h2{
    text-align: center;
   /*  width: 50vw;
    height: 70vh; */
   /*  margin-right: 3vw;
    margin-left: 3vw; */
    font-size: 30px;
    font-family:"Lora", serif;
    font-style: italic;
}
.Datos{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
    width: 100%;
    font-style: italic;
}
.curiosidades ul{
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
    width: 70%;
    line-height: 26px;
    margin: 3%;
    font-size: 18px;
    line-height: 40px;
}
.lista-curiosidades{
    list-style-type: none;
}
.lista-curiosidades::before{
    content: "☀";
    padding: 1vw;
}
.imagen-amigos{
    width: 30vw;
}
.imagen-amigos img{
    max-width: 100%;
    height: auto;
}
.galeria{
    background-color: rgb(196, 153, 133);
    width: 93vw;
    height: fit-content;
    margin-right: 3.5vw;
    margin-left: 3.5vw;

    flex-direction: column;
    justify-content: space-around;
    padding: 2%;
    align-items: center;
}
.galeria h2{
  text-align: center;
  font-size: 30px;
  font-family:"Lora", serif;
  font-style: italic;
}
.futuro{
    background-color: rgb(184, 120, 72);
    width: 93vw;
    height: 100vh;
    display: flex;
    margin-right: 3.5vw;
    margin-left: 3.5vw;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2%;
}
.futuro h2{
  text-align: center;
  font-size: 30px;
  font-family:"Lora", serif;
  font-style: italic;
}
.foto_h{
  display: none;
  width: 40%;
}
.foto_v{
  display: none;
  width: 50%;
}
@media (orientation: landscape) {
.foto_h{
  display: block;
}
}
@media (orientation: portrait) {
  .foto_v{
    display: block;
  }
}
  

.btn-flotante {
	font-size: 16px; 
	text-transform: lowercase;
	font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
	color: #ffffff; 
	border-radius: 7px; 
	letter-spacing: 3px; 
	background-color: #924512; 
	padding: 18px 30px; 
	position: fixed;
	bottom: 40px;
	right: 40px;
	transition: all 300ms ease 0ms;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
	z-index: 99;
}
.btn-flotante:hover {
	background-color: #a55c2c;
	box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
	transform: translateY(-7px);
}
@media only screen and (max-width: 600px) {
  .curiosidades, .presentacion{
    height: fit-content;
   
  }  

  .Datos{
    flex-direction: column;
  }
  .imagen-propia{
        flex-direction: column;
        justify-content: center;
        padding-left: 0;
        width: 100%;
        height: fit-content;
    }
    
 	.btn-flotante {
		font-size: 14px;
		padding: 12px 20px;
		bottom: 20px;
		right: 20px;
	}
} 
/* ESTILOS GALERIA */
.wrap {
    overflow: hidden;
    margin: 10px;
  }
  .box {
    float: left;
    position: relative;
    width: 20%;
    padding-bottom: 20%;
  }
  .boxInner {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    overflow: hidden;
  }
  .boxInner img {
    width: 100%;
  }
  .boxInner .titleBox {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-bottom: -50px;
    background: #fff;
    background: rgba(0, 0, 0, 0.5);
    color: #FFF;
    padding: 10px;
    text-align: center;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  section.no-touch .boxInner:hover .titleBox, section.touch .boxInner.touchFocus .titleBox {
    margin-bottom: 0;
  }
  @media only screen and (max-width : 480px) {
    /* Smartphone view: 1 tile */
    .box {
      width: 100%;
      padding-bottom: 100%;
    }
  }
  @media only screen and (max-width : 650px) and (min-width : 481px) {
    /* Tablet view: 2 tiles */
    .box {
      width: 50%;
      padding-bottom: 50%;
    }
  }
  @media only screen and (max-width : 1050px) and (min-width : 651px) {
    /* Small desktop / ipad view: 3 tiles */
    .box {
      width: 33.3%;
      padding-bottom: 33.3%;
    }
  }
  @media only screen and (max-width : 1290px) and (min-width : 1051px) {
    /* Medium desktop: 4 tiles */
    .box {
      width: 25%;
      padding-bottom: 25%;
    }   
    }