body, html {
  height: 100%;
  margin: 0;
}
#paisaje{
  width: 100%;
  background-image: url("../img/monatanas.png");
  background-size: 100%;
}



/*aquí van lps estilos del scrolly*/

#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;
       background-color: #eee;
       background-color: #fff;
       color: black;
     }

     .step p {
       text-align: center;
       padding: 1rem;
       font-size: 1.25rem;
     }

     .hidden { 
   animation-name:mover_caja;
       animation-duration: 2s;
       animation-fill-mode: forwards;
  }

/*aquí terminan los estilos del scrolly*/

#contenedor_animacion{
  position:absolute;
  width: 100%;
  top:100%;
  left:0;
  position: relative;
  overflow: visible;
}

#animacion{
  width:100%;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  background-image:url(../img/pasto_fondo_gris.png);
  background-size: cover;
  background-repeat: repeat;
}

#animacion_1{
  width:100%;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  background-image:url(../img/pasto_fondo_azul.png);
  background-size: cover;
  background-repeat: repeat;
}

#animacion_2{
  width:100%;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  background-image:url(../img/pasto_fondo_azul.png);
  background-size: cover;
  background-repeat: repeat;
}

#animacion_3{
  width:100%;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  background-image:url(../img/fondo_morado.jpg);
  background-size: cover;
  background-repeat: repeat;
}

#espejo_gris{
  width:100%;
  height: 100%;
  position: absolute;
  top: 10%;
  left: -30%;
  z-index: 2;
  animation-name:mover_espejo_gris;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@-webkit-keyframes mover_espejo_gris{
  0%{
    top: 0;
    left: 0;
    opacity: 0;
  }
  100%{
    top:0;
    left: 0;
    opacity: 1;
  }
}

#mariposa_1{
  width:100%;
  height:100%;
  position:absolute;
  top:10%;
  left:-30%;
  z-index:2;

  animation-name:mover_mariposa_1;
  animation-duration:2s;
  animation-iteration-count: infinite;
  animation-fill-mode:forwards;
  animation-delay:2s;

  opacity:0;
}

@-webkit-keyframes mover_mariposa_1{
  0%{
    top:-10%;
    left:10%;
    opacity:0;
  }

  100%{
    top:-10%;
    left:10%;
    opacity:1;
  }
}

#espejo{
  width:100%;
  height:100%;
  position:absolute;
  top:10%;
  left:-30%;
  z-index:2;

  animation-name:mover_espejo;
  animation-duration:2s;
  animation-iteration-count: 1;
  animation-fill-mode:forwards;
  animation-delay:2s;

  opacity:0;
}

@-webkit-keyframes mover_espejo{
    0%{
    top:0;
    left:0;
    opacity:0;
  }

  100%{
    top:0;
    left:0;
    opacity:1;
  }
}

#mariposa_2{
  width:100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  animation-name: mover_mariposa_2;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-delay: 2s;
  opacity: 0;
}
@-webkit-keyframes mover_mariposa_2{
  0%{
    top: 0;
    left: 0;
    opacity: 0;
  }
  100%{
    top:0;
    left: 0;
    opacity: 1;
  }
}

#flores{
  width:100%;
  height: 100%;
  position: absolute;
  top: 10%;
  left: -30%;
  z-index: 2;
  animation-name:mover_flores;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@-webkit-keyframes mover_flores{
  0%{
    top: 0;
    left: 0;
    opacity: 0;
  }
  100%{
    top:0;
    left: 0;
    opacity: 1;
  }
}

#pajaro{
  width:100%;
  height: 100%;
  position: absolute;
  top: 10%;
  left: -30%;
  z-index: 2;
  animation-name:mover_pajaro;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-delay: 2s;
  opacity: 0;
}
@-webkit-keyframes mover_pajaro{
  0%{
    top: 10;
    left: 10;
    opacity: 1;
  }
  100%{
    top:0;
    left: 0;
    opacity: 1;
  }
}

#mujer_espaldas{
  width:100%;
  height: 100%;
  position: absolute;
  top: 10%;
  left: -30%;
  z-index: 2;
  animation-name:mover_mujer;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}
@-webkit-keyframes mover_mujer{
  0%{
    top: 0;
    left: 0;
    opacity: 0;
  }
  100%{
    top:0;
    left: 0;
    opacity: 1;
  }
}
#mariposa_3{
  width:100%;
  height: 100%;
  position: absolute;
  top: 10%;
  left: -30%;
  z-index: 2;
  animation-name: mover_mariposa_3;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-delay: 2s;
  opacity: 0;
}
@-webkit-keyframes mover_mariposa_3{
  0%{
    top: 0;
    left: 0;
    opacity: 0;
  }
  100%{
    top:25%;
    left: -10%;
    opacity: 1;
  }
}


.separador img {
  width: 90px;              /* más pequeña */
  display: block;           /* clave para centrar */
  margin: 50px auto;        /* centra horizontalmente */
  opacity: 0.8;
}
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5 {
  position: relative;
  opacity: 1;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}


.bgimg-3 {
  background-image: url("../img/parallax_1.png");
  min-height: 100%;
}

.bgimg-4 {
  background-image: url("../img/parallax_2.png");
  min-height: 100%;
}

.bgimg-5 {
  background-image: url("../img/parallax_3.png");
  min-height: 100%;
}

#videocelular { display: none; }
#videocomputador { display: block; }


.video-section {/* video home*/
  width: 100%;
  height: 800px;
  position: relative;
  overflow: hidden;
  background: black;
}
.video-section video{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-section-3 {/* video index 3*/
  width: 100%; /* fuerza ancho completo de pantalla */
  margin: 0;
  left: 0;
}
.video-section-3 {
  width: 100%;
  height: 100%;
  left: -50;
  overflow: hidden;
}

.video-section-3 video {
  width: 100%;
  height: 80%;
  object-fit: contain;
}
.content img {
  margin-bottom: 30px;
}
.caption {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 80%;
  transform: translate(-40%, -50%);
  text-align: center;
  color: #000;
}
.caption h1 {
  font-size: clamp(2.8rem, 2.5vw, 2.5rem);
}
.sumario{
  position: absolute;
  left: 60%;
  top: 60%;
  transform: translate(-50%, -50%);
  width: 50%;
  text-align: center;
  color: #f0e6e6;
}
.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

.instruccion {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color:#f0e6e6
}
.index2 .titulo{
  text-align: center;
  color:#591824;
  font-size:2em
}
.cita {
  color:#591824;
  font-size: 0.8em;
}
.centrado{ width: 100%;
max-width: 1000px;
margin: 0 auto;
}
#caja{ width: 100%;
background-image: url("../img/blancoynegro.jpg");
height: 600px;
background-size: cover;
}
#mascara { width: 100%;
background-image: url("../img/orquidea6.jpg");
height: 600px;
background-size: cover;
opacity: 0;
}
#mascara:hover{opacity: 1;
transition: 1s ease-in-out;
}
#caja2{ width: 100%;
background-image: url("../img/dakota.webp");
height: 600px;
background-size: cover;
}
#mascara2{ background-color: rgba(0, 0, 0, 0.7);
opacity: 1;
width: 100%;
height: 300px;
text-align: center;
padding-top: 300px;
}
#mascara2:hover{opacity: 0;}
#mascara2 span{ color: #fff;
font-size: 1.5em;
}
#container {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
body{ font-size: 1.3em;
color: #333;
font-family: "Playfair Display", serif !important;
 font-weight: 400;
}
.intro{
  color:#A66874;
  font-weight: 1.3em ;
}

h1 {font-size: 2em;
color: #591824;
font-family: "Give You Glory", cursive;
  font-weight: 400;
}

h2 {
  font-size: 1.5em;
  color: rgb(165, 105, 116);
  font-family: "Syne Mono", monospace;
  font-weight: normal;
  max-width: 800px;
  margin: 1.5rem auto;
  padding: 1rem;
  margin-left: 0;
  padding-left: 0;
}

.topnav {
  background-color: #333;
  overflow: hidden;
}

.logo-desktop{
  display:flex;
  align-items:center;
  margin-left:15px;
  margin-right:40px;
  padding:0;
}

.logo-desktop{
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%);
}

.logo-desktop img{
  height:45px;
  width:auto;
  display:block;
}


nav{width: 100%;
  height: 40px;
  background-color: #A8BFA4;
  position:fixed; 
  top: 0;
  left: 0;
  z-index: 3000;
  text-align: center;

}

nav a{margin-left: 100px;
text-decoration: none;
color:#A66874;
 font-family: "Give You Glory", cursive;
}

nav a.active{
  color:#591824
}


/* Aquí empiezan los estilos del menú hambuerguesa*/

/* Add a black background color to the top navigation */
.topnav {
  background-color: #A8BFA4;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #A66874;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

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

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

.topnav{display: none;

}

footer{width: 100%;
height: 80px;
padding-top: 20px;
background-color:#A8BFA4;
text-align: center; 
 position: relative;
  z-index: 10;
   width: 100vw;          /* ocupa todo el ancho de la pantalla, este fue un arreglo para el index 3 */
  margin-left: calc(-50vw + 50%); /* lo centra rompiendo el container, arreglo para el index 3 */
}
footer span{font-size: 0.8em;
color:#A66874;
font-family: "Syne Mono", monospace;
  font-weight: 400;
}
.container {
  overflow: visible;
}
.intro-effect-fadeout.modify .content {
  transform: none;
}

#fotocelular{display:none}

/* versión celular */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5{
    background-attachment: scroll;
  }
}
/* Menú hamburguesa celular */
@media screen and (max-width: 600px) {
.topnav{display: block;
position: fixed;
top: 0;
left: 0;
z-index: 20000;
width: 100%;
}

nav{display: none;}


  
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* Menú hamburguesa--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: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/*estilos de celu miooos*/
@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;
       }
     }

/*estilos scrolly*/



/*estilos scrolly*/
@media screen and (max-width: 600px)
{
  p{margin-left: 10px;
  margin-right: 10px;
 font-size: 0.8em}
#fotocelular{display:block}
#fotocomputador{display:none}
}

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

#videocelular{display: block;}
#videocomputador{display: none;}
}
@media screen and (max-width: 600px) {
  body {
    padding-top: 40px; /* mismo alto que tu nav */
  }
}

@media screen and (max-width: 600px) {
  article.content div p {
    font-size: 1.5em !important;
  }
}
@media screen and (max-width: 600px) {
  .cita{
    font-size: 1em;
  }
}


.bgimg-3 {
  background-image: url("../img/parallax_1.png");
  min-height:auto;
}

.bgimg-4 {
  background-image: url("../img/parallax_2.png");
  min-height: auto;
}

.bgimg-5 {
  background-image: url("../img/parallax_3.png");
  min-height: auto;
}


@media screen and (max-width: 600px) {
  .video-section {
    height: 250px;
  }
}

@media screen and (max-width: 600px) {
  .video-section-3 {
    height: 250px;
  }
}
@media screen and (max-width: 600px) {

  .caption {
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
  }

  .caption h1 {
    font-size: 1.8rem; /* más pequeño */
    line-height: 1.2;
  }

  .sumario {
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%; /* más ancho */
    font-size: 1rem;
    line-height: 1.4;
  }
}

  @media screen and (max-width: 600px) {
  .index2 .titulo{
    font-size: 1.5em;
  }
  }

@media screen and (max-width: 600px) {
  h2 {
    font-size: 1.1em;
    padding: 0 15px;
    margin: 1rem 0;
  }
}



@media screen and (max-width: 600px) {
  footer {
    padding-top: 15px;
    height: auto;
  }

  footer span {
    font-size: 0.7em;
    display: block;
  }
}