body {
  background: #f7f4ff;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-image: url("https://i.ibb.co/wFFj8vXw/Dise-o-sin-t-tulo-1.png");
  margin: 0;
  padding: 0;
  cursor: url("https://cdn.custom-cursor.com/packs/11842/kawaii-chiikawa-rakko-sword-pack.png") 16 16, auto;
}

/* Contenedor */
.container {
  width: 900px;
  margin: 30px auto;
}

/* Header */
header {
  text-align: center;
  border-radius: 15px 15px 0 0;
  padding: 10px 20px;
  background-color: #ffcce6;
}

/* Menú */
nav {
  background: #ffe4f2;
  padding: 12px;
  display: flex;
  justify-content: center;
  gap: 30px;
}

nav a {
  text-decoration: none;
  color: #444;
  font-weight: bold;
}

/* Contenido */
.content {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

/* Sidebar */
aside {
  width: 220px;
  background: white;
  padding: 15px;
  border-radius: 15px;
}

/* Contenido principal */
main {
  flex: 1;
}

/* Cajitas */
.box {
  background: white;
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 20px;
  display: flex;
  align-items: center; /* Centra verticalmente el texto con el carrusel */
  justify-content: space-between; /* Deja espacio libre en medio de ambos */
  gap: 20px; /* Separación en píxeles entre el texto y el carrusel */
  width: 100%; /* Ocupa todo el ancho disponible */
  max-width: 1200px; /* Límite máximo para que no se estire demasiado */
  margin: 0 auto;
}

/* Footer */
footer {
  background: #ffcce6;
  text-align: center;
  padding: 15px;
  border-radius: 0 0 15px 15px;
}
@font-face {
  font-family: "MiFuente";
  src: url("Singsong.otf") format("truetype");
}

body {
  font-family: "MiFuente", sans-serif;
  color: #eb9ab2;
}
.intro {
  flex: 1;
}
/* El marco visible donde se verán las imágenes */
.carrusel-vertical {
  width: 300px;
  height: 400px;
  overflow: hidden;
  border: 2px solid #ccc;
  position: relative;
  flex-shrink: 0;
}

.contenedor-imagenes {
  content: center;
  display: flex;
  flex-direction: column;
  animation: subir 30s linear infinite;
   background-image: url("https://i.pinimg.com/736x/a1/5e/9f/a15e9f813e2ec465d50de1f2f5d818d7.jpg");
}

.contenedor-imagenes img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  margin: 20px; 
  padding: 20px; 
}

@keyframes subir {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

/* La magia del movimiento infinito */
@keyframes subir {
  0% {
    transform: translateY(0);
  }
  100% {
    /* Mueve exactamente la mitad del contenido (las imágenes originales) */
    transform: translateY(-50%);
  }
}