footer img{
    position: relative;
    top: -35%;
    padding-top:auto;
}
#url {
    margin-left: 0;
}
.centradocuarto{
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}

.centradocuarto p{
    color: #ffffff;
    font-size: 1.3em;
    font-family: "Nanum Myeongjo", serif;
    font-weight: 400;
    font-style: normal;
    margin: 10px 0;
  line-height: 1.2;
  padding: 10px 0; 
}

#prueba {
  width: 100%;
}

.collage {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.collage img {
  width: 23%;
}


.collagetres {
  display: flex;
  justify-content: center;     
  gap: 15px;                  
  flex-wrap: wrap;             
  margin: 20px auto;
  max-width: 1000px;           
}

.collagetres img {
  width: 100%;
  max-width: 300px;           
  height: auto;
  object-fit: cover;
  border-radius: 8px;         
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}

.fotoestado {
  display: flex;
  justify-content: center;
  margin: 20px auto;
}

.fotoestado img {
  width: 100%;
  max-width: 500px;             
  aspect-ratio: 1 / 1;          
  object-fit: contain;          
  border-radius: 8px;           
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  
}



body.fondo-cafe {
  background-color: #000000;
  color: white;
}

/*Aqui modifico todo el texto*/
.centrado{
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}

.centrado p{
    color: #000000;
    font-size: 1.3em;
    font-family: "Nanum Myeongjo", serif;
    font-weight: 400;
    font-style: normal;
    margin: 10px 0;
  line-height: 1.2;
  padding: 10px 0; 
}
.centrado h4{
    font-family: "Antic", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #868686;
  margin-bottom: 6px;
}
.centrado h3{
  font-family: "Lexend Deca", sans-serif;
  font-optical-sizing: auto;
  font-weight: 350;
  color: #868686;
  font-size: 0.7em;
  margin-top: 6px;
}
.centrado h5{
    font-family: "Laila", serif;
  font-weight: 300;
  font-style: normal;
  font-size: 0.9em;
  margin-bottom: 2px;
}
.centrado h6{
    font-family: "Laila", serif;
  font-weight: 300;
  font-style: normal;
  font-size: 0.8em;
  color: #868686;
  margin-top: 2px;
}
.centrado h2{
  font-family: "Lexend Deca", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  
}

/*Aquí inicia mi parallax*/
body, html {
    height: 100%;
    margin: 0;
  }
  
  .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 {
    position: relative;
    opacity: 1;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  
  }
  .bgimg-1 {
    background-image: url("img/imageninicio.png");
    min-height: 100%;
  }
  .bgimg-2 {
    background-image: url("img/portadados.png");
    min-height: 100%;
  }
  .bgimg-3 {
    background-image: url("img/portadatres.png");
    min-height: 100%;
  }
  .bgimg-4 {
    background-image: url("img/portadascroll.png");
    min-height: 100%;


  }
/*Aqui empieza el texto de mi 4 reportaje*/
  .centrado4{
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}


.centrado4 p{
    color: #000000;
    font-size: 1.3em;
    font-family: "Nanum Myeongjo", serif;
    font-weight: 400;
    font-style: normal;
    margin: 10px 0;
  line-height: 1.2;
  padding: 10px 0;
}
.centrado4 h4{
    font-family: "Antic", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #868686;
  margin-bottom: 6px;
}
.centrado4 h3{
  font-family: "Lexend Deca", sans-serif;
  font-optical-sizing: auto;
  font-weight: 350;
  color: #868686;
  font-size: 0.7em;
  margin-top: 6px;
}

/*aqui termina el texto de mi cuarto reportaje*/

  .caption {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    color: #000;
    text-align: center;

  }
  
  .caption span.border {
    
    color: #ffffff;
    padding: 18px;
    font-size: 1.6em;
    letter-spacing: 5px;
    font-family: "Lexend Deca", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal; 
  }

  /*Aqui empeiza mi menu y mi footer*/
  nav{
    width: 100%;
    background-color: #ffffff;
    height: 30px;
    position: fixed;
    top: 0%;
    left: 0%;
    z-index: 3;
    padding-top: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


nav a{
    text-decoration: none;
    color:hsl(60, 1%, 14%);
    margin-left: 140px;
    font-size: 0.7em;
    font-optical-sizing: auto;
    float: left;
    font-family: "Tenor Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}
#url {
    margin-left: 0;
}
#centrar_menu{
    width: 1000px;
    margin: 0 auto;

}
html {
    scroll-behavior: smooth;
}
footer{
    width: 100%;
    height: 50px;
    background-color: hsl(0, 0%, 100%);
    text-align: center;
    padding-top: 50px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
footer span{
    color: rgb(0, 0, 0);
    font-size: 0.7em;
    
    font-weight: 200;
    
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: normal;
    margin: 4%;
    height: 200%;
    align-items: center;
}

footer a{
    text-decoration: none;
    color:hsl(60, 1%, 14%);
    margin-left: 50px;
    font-size: 0.3em;
    font-family: "Lexend", serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
    font-weight: 200;
    float: center;
}
footer img{
    position: relative;
    top: -35%;
    padding-top:auto;
}
#url {
    margin-left: 0;
}




/*Aquí va el scroll*/
#prueba {
  width:100%;
}
#imagencelulardos{
  width: 100%;
}

#scrolly {
  position: relative;
  padding: 1rem;
  }
  .scrolly-overlay {
  position: relative;
  padding: 0;
  max-width: 35rem;
  margin: 0 auto;
  }
  .sticky-thing {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  width: 100%;
  margin: 0;
  z-index: 0;
  top: 0;
  height: 100vh;
  /* Center everything inside */
  display: flex;
  justify-content: center;
  flex-direction: column;
  justify-content: center;
  }
  .step {
  margin: 0 auto 2rem auto;
  margin-bottom: 25rem;
  
  color: black;
  }
  .step p {
  text-align: center;
 
  
   color: #ffffff;
    font-size: 1.3em;
    font-family: "Nanum Myeongjo", serif;
    font-weight: 400;
    font-style: normal;
    margin: 10px 0;
  line-height: 1.2;
  padding: 10px 0; 
  }
  .hidden {
  animation-name: mover_caja;
  animation-duration: 2s;
 animation-fill-mode: forwards;
 }
#contenedor_animacion{
  width: 100%;
  position:absolute;
  top:0%;
  left:0;
}


/*Aquí comienza el menú hamburguesa*/
/* Add a black background color to the top navigation */
nav a.active{
  
}
.topnav {
  display:none;
  background-color:rgb(255, 255, 255);
  overflow: hidden;
  position:fixed;
  top:0;
  left:0;
  width: 100%;
  z-index: 20000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  text-decoration: none;
    color:hsl(60, 1%, 14%);
   
    font-size: 0.7em;
    font-optical-sizing: auto;
    float: left;
    font-family: "Tenor Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: rgb(0, 0, 0);

}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #020342;
  color: white;
  
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/*Aquí inicia la animación*/
#animacion_inicial {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:hidden;
}
#sol {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1;
  animation-name: mover_sol;
  animation-duration:2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@-webkit-keyframes mover_sol{
  0%{
    top:0;
    left:0;
  }
  100%{
    top:-60%;
    left:-2%;
  }
}
#montana {
  
  width:100%;
 

}



/*Aquí termina la animación*/

/*Aquí empiezan los estilos de parallax para celular*/
  @media only screen and (max-device-width: 1024px) {
    .bgimg-1, .bgimg-2, .bgimg-3 {
      background-attachment: scroll;
    }
  }
  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: fixed;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
@media screen and (max-width: 600px) {
  nav{ 
    display:none;
  }
  .topnav{
    display:block;
  }
}




















/*******************/
/*******************/
/*******************/
/*******************/
/*******************/
/* aqui comienzan los estilos parallax para celular */
/*******************/
/*******************/
/*******************/


  @media only screen and (max-device-width: 1024px) {
    .bgimg-1, .bgimg-2, .bgimg-3 {
      background-attachment: scroll;
    }
  }




  /*Este es el scroll para el celular*/

@media only screen and (min-width: 700px) {
  
  #scrolly.side-by-side {
  display: flex;
  }
  #scrolly.side-by-side > div {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 0.75em;
  }
  #scrolly.side-by-side .scrolly-overlay {
  margin-top: 70vh;
  order: 0;
  /* Change these to adjust sizing options */
  min-width: 15rem;
  max-width: 20rem;
  }
  #scrolly.side-by-side .sticky-thing {
  order: 1;
  flex-grow: 2;
  }
  }




 #montana{
    display: block;
}
#portadacelular{
    display: none;
} 






  @media only screen and (max-width: 600px) {

#montana{
        display:none;
    }
    #portadacelular{
        display: block;
    }


#prueba {
    width: 900px; /* 100% del ancho de la pantalla */
    max-width: 100%;
    height: auto; /* mantiene la proporción de la imagen */
    display: block; 
  }
    
/*TEXTO DE REPORTAJE SCROLL*/

  .centradocuarto{
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}

.centradocuarto p{
    color: #ffffff;
    font-size: 1.3em;
    font-family: "Nanum Myeongjo", serif;
    font-weight: 400;
    font-style: normal;
    margin: 10px 0;
  line-height: 1.2;
  padding: 10px 0; 
    max-width: 90%;
  
}

/*TEXTO DE REPORTAJE INICIO, UNO Y DOS*/
.centrado{
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}

.centrado p{
    color: #000000;
    font-size: 1.6em;
    font-family: "Nanum Myeongjo", serif;
    font-weight: 400;
    font-style: normal;
    margin: 10px 0;
  line-height: 1.2;
  padding: 10px 0;
  max-width: 90%; 
  margin-left: 15px;
}
.centrado h4{
    font-family: "Antic", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #868686;
  margin-bottom: 6px;
  max-width: 90%; 
  margin-left: 15px;
}
.centrado h3{
  font-family: "Lexend Deca", sans-serif;
  font-optical-sizing: auto;
  font-weight: 350;
  color: #868686;
  font-size: 0.7em;
  margin-top: 6px;
  max-width: 90%; 
  margin-left: 15px;
}
.centrado h5{
    font-family: "Laila", serif;
  font-weight: 300;
  font-style: normal;
  font-size: 0.9em;
  margin-bottom: 2px;
  max-width: 90%; 
  margin-left: 15px;
}
.centrado h6{
    font-family: "Laila", serif;
  font-weight: 300;
  font-style: normal;
  font-size: 0.8em;
  color: #868686;
  margin-top: 2px;
  max-width: 90%; 
  margin-left: 15px;
}
.centrado h2{
  font-family: "Lexend Deca", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  max-width: 90%; 
  margin-left: 15px;
  
}




  }