* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000;
  overflow: hidden;
  font-family: serif;
}

#libro {
  width: 100vw;
  height: 100vh;
  position: relative;
}

/* PÁGINAS */
.pagina {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.pagina.activa {
  display: block;
}

/* FONDO */
.fondo {
  background: url("../assets/fondo.png") center/cover no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
}

/* FLORES CON VIENTO */
.flores {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35%;
  background: url("/assets/flores.png") bottom center / contain no-repeat;
  pointer-events: none;
  animation: viento 5s ease-in-out infinite alternate;
}

@keyframes viento {
  from { transform: translateX(0); }
  to { transform: translateX(15px); }
}

/* IZQUIERDA */
.flores-izq {
  left: 0;
  background-image: url("../assets/flores.png");
  background-position: left center;
  animation: vientoIzq 6s ease-in-out infinite alternate;
}

/* DERECHA */
.flores-der {
  right: 0;
  transform: scaleX(-1); /* espejo */
  background-image: url("../assets/flores.png");
  background-position: right center;
  animation: vientoDer 6s ease-in-out infinite alternate;
}
@media (max-width: 768px) {
  .flores {
    width: 35vw;
    opacity: 0.9;
  }
}

/* HADAS */
.hada {
  position: absolute;
  width: 120px;
  pointer-events: none;
}

/* AVE */
#ave {
  position: absolute;
  width: 80px;
  top: 20%;
  right: 15%;
  cursor: pointer;
}

#ave-posada {
  position: absolute;
  bottom: 22%;
  left: 28%;
  width: 65px;
  cursor: pointer;
  animation: aveRespira 3s ease-in-out infinite;
}

@keyframes aveRespira {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}



/* HADA GRANDE VOLANDO */
#hada-grande {
  top: 18%;
  right: 12%;
  width: 140px;
}

/* CENTRO DANZA */
#hada-c1 {
  top: 45%;
  left: 42%;
  width: 90px;
}

#hada-c2 {
  top: 48%;
  left: 48%;
  width: 90px;
}

/* HADA SENTADA */
#hada-sentada {
  bottom: 22%;
  right: 18%;
  width: 85px;
}

/* HADA CAMINANDO */
#hada-camino {
  bottom: 20%;
  left: 45%;
  width: 85px;
}

/* AVES */
#ave-posada {
  bottom: 18%;
  left: 25%;
  width: 70px;
}

#ave-volando {
  top: 10%;
  right: 20%;
  width: 60px;
}
.flotando {
  animation: flotar 6s ease-in-out infinite,
             aletear 0.8s ease-in-out infinite;
}

@keyframes flotar {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

@keyframes aletear {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.1); }
  100% { filter: brightness(1); }
}
.danzando {
  animation: danza 5s linear infinite;
}

@keyframes danza {
  0% { transform: rotate(0deg) translateX(8px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(8px) rotate(-360deg); }
}
.suave {
  animation: respirar 4s ease-in-out infinite;
}

@keyframes respirar {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.caminando {
  animation: caminar 3s ease-in-out infinite alternate;
}

@keyframes caminar {
  from { transform: translateX(0); }
  to { transform: translateX(10px); }
}

#ave-volando {
  animation: aveVuela 8s ease-in-out infinite;
}

@keyframes aveVuela {
  0% { transform: translate(0,0); opacity: 1; }
  50% { transform: translate(-40px, -20px); }
  100% { transform: translate(0,0); }
}
.flores {
  position: absolute;
  top: 0;
  height: 100%;
  width: 25vw; /* se adapta a pantalla */
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
}



@keyframes aparecer {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }}
  
  /* ESQUINA PASAR PÁGINA */
.esquina {
  position: absolute;
  width: 120px;
  height: 120px;
  bottom: 0;
  right: 0;
  cursor: pointer;
}

/* PÁGINA LIBRO */
.hoja {
  background: #f5f0e6;
  width: 70%;
  height: 80%;
  margin: auto;
  margin-top: 5%;
  padding: 40px;
  box-shadow: 0 0 40px rgba(0,0,0,0.4);
  animation: aparecer 1s ease;
}
.pagina {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
  transform-origin: bottom right;
  display: none;
}

.pagina.activa {
  display: block;
  z-index: 2;
}

.pagina.volteando {
  animation: pasarPagina 1.2s ease forwards;
}

@keyframes pasarPagina {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-160deg);
  }
}

/* esquina clickeable */
.esquina {
  position: absolute;
  width: 120px;
  height: 120px;
  bottom: 0;
  right: 0;
  cursor: pointer;
}

}
v