/* 🌸 Estilo general del body */
body {
  background: pink;                     /* color de respaldo */
  background-image: url("mi.jpg");      /* tu imagen de fondo */
  background-repeat: repeat;            /* repite la imagen */
  background-size: cover;               /* cubre la pantalla */
  background-attachment: fixed;         /* el fondo no se mueve al hacer scroll */

  width: 960px; 
  margin: 0 auto;

  /* ✨ efecto fade in */
  animation: fadeIn 1s ease,
             moverFondo 30s ease-in-out infinite alternate;
}
          

/* ✨ animación de aparición suave al cargar la página */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ✨ animación para el movimiento del fondo */
@keyframes moverFondo {
  from { background-position: 0% 0%; }
  to   { background-position: 60% 60%; }
}

@keyframes latidoColor {
  from { background-color: #ffb6c1; }  /* rosa claro */
  to   { background-color: #ffcce0; }  /* otro rosa más suave */
}

/* 🌸 Galería de imágenes */
.galeria img {
  opacity: 0;
  transform: scale(0.95);
  animation: aparecer 1s ease forwards;
}

/* ✨ animación para entrada de imágenes */
@keyframes aparecer {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

header {
  padding: 20px;
  text-align: center;
}

nav ul {
  list-style: none;
  padding: 0;
  text-align: center;
}

nav ul li {
  display: inline-block;
  margin: 0 10px;
}

nav ul li a {
  text-decoration: none;
  font-weight: bold;
  color: inherit; /* hereda el color según la página */
}

/* Estado activo en el menú */
.active {
  color: #D62B6A;
  border-bottom: 2px solid #D62B6A;
}

/* 🏠 Página de inicio */
body.inicio {
  background-color: pink;
  background-image: url("mi.jpg");
  background-repeat: repeat;
  background-position: center top;
  color: black;
}

body.inicio header {
  background-color: black;
  border: 1px solid #ccc;
  padding: 20px;
}

body.inicio header h1 {
  color: #D62B6A;
  text-align: center;
}

body.inicio header p {
  color: pink;
  text-align: center;
}

body.inicio header h2 {
  color: white;
  text-align: center;
}

/* 🌸 Palabra */
body.palabra {
  background: #FFFFFF url("papel.jpg") no-repeat center top;
  color: #000000;
}

body.palabra header {
  background-color: #f2e6d9;
  border: 1px solid #ccc;
}

/* 🎵 Sonido */
body.sonido {
  background: #FFFFFF url("ondas.png") repeat;
  color: #000000;
}

body.sonido header {
  background-color: #FF9191;
  border: 1px solid #ccc;
}

/* 📸 Fotodiario */
body.fotodiario {
  background: #fff url("cuaderno.jpg") repeat;
  color: #000;
}

body.fotodiario header {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
}

/* 🌺 El Almario */
body.almario {
  background: #2d2d2d url("flores.png") repeat;
  color: pink;
}

body.almario header {
  background-color: #1a1a1a;
  border: 1px solid #555;
}

/* 🌹 Animación para girar */
.gira {
  display: block;
  margin: 20px auto;
  animation: spin 10s linear infinite;
}

/* Al pasar el mouse: pausa */
.gira:hover {
  animation-play-state: paused;
}

/* Definición de la animación */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ✨ imágenes con entrada suave */
.galeria img {
  opacity: 0;
  transform: scale(0.95);
  animation: aparecer 1s ease forwards;
}

/* todas las imágenes usan la misma animación */
@keyframes aparecer {
  to {
    opacity: 1;
    transform: scale(1);
  }
}