body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  xbackground-color: #fffce1;
}

.wrapper {
  display: flex;
  flex-direction: column;
  gap: 100px; /* espacio entre contenedores */
  align-items: center;
  padding: 100px 0;
}

.contenedor {
  position: relative;
  width: 100%;
  height: 100vh; /* cada sección ocupa toda la pantalla */
  display: flex;
  justify-content: center;
  align-items: flex-end; /* imágenes empiezan abajo */
}

.img {
  position: absolute;
  max-height: 100vh;
}


.img1,
.img3 {
  z-index: 1;
}

.character {
  z-index: 2; /* estas se superponen */
  yopacity: 0;
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.9));
}

.text {
  z-index: 3; /* estas se superponen */
  opacity: 0;
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.9));
}

.fondo {
  position: fixed;

  height: 100vh;
}

.fondo_petate {
  position: fixed;

  height: 100vh;
}

@media (orientation: portrait) {
  .fondo {
    width: 100vw;    
  }
  .fondo_petate {
    width: 100vw;
    opacity: 70%;
  }
}
@media (orientation: landscape) {
  .fondo {
    left: 50%;
    transform: translateX(-50%);
    width: 40vw;
  }
  .fondo_petate {
    display: none;
  }
}

.petate {
  position: fixed;
  height: 100vh;
  width: 100vw;
}

@media (orientation: portrait) {
  .petate {
    display: none;
  }
}

.anterior {
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 10;
  display: none;
  height: 5vh;
}
.siguiente {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 10;
  height: 5vh;
  display: none;
}

.siguiente_cap {
  position: relative;
  right: 15px;
  bottom: 15px;
  z-index: 10;
  height: 5vh;
}

@media (orientation: landscape) {
  .siguiente_cap {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (orientation: portrait) {
  .img {    
    width: 90vw;
  }
}
@media (orientation: landscape) {
.img {  
  Xleft: 33%;  
  Xtransform: translateX(-50%);

}
.inicio{
  height: 20vh
}
}