body {
  margin: 0;
  min-height: 100vh; /* asegura que el body ocupe toda la altura de la ventana */
  font-family: Arial, sans-serif;
  background-image: url("../img/fondo.png"); /* ruta correcta */
  background-size: cover; /* hace que la imagen se expanda para cubrir todo */
  background-position: center; /* centra la imagen */
  background-repeat: no-repeat; /* evita que se repita */
  color: #fff;
}

/* Logo Hellaverse dentro de la barra */
.logo {
  color: #fff;
  font-size: 1.5em;
  font-weight: bold;
  margin: 0;
  margin-right: auto; /* empuja el menú hacia la derecha */
}

/* Barra de navegación */
nav {
  background-color: #111; /* Fondo negro suave */
  display: flex;          /* coloca logo y menú en fila */
  align-items: center;    /* centra verticalmente */
  padding: 10px 20px;
}

nav ul {
  list-style: none;       /* quita viñetas */
  margin: 0;
  padding: 0;
  display: flex;          /* coloca los enlaces en fila */
}

nav li {
  margin-left: 20px;      /* espacio entre enlaces */
}

nav a {
  text-decoration: none;  /* quita el subrayado */
  color: #fff;            /* texto blanco */
  font-weight: bold;
  padding: 8px 15px;      /* espacio interno para parecer botón */
  background-color: #333; /* fondo gris oscuro */
  border-radius: 5px;     /* esquinas redondeadas */
  transition: background-color 0.3s, color 0.3s;
}

nav a:hover {
  background-color: #ffcc00; /* fondo dorado al pasar el mouse */
  color: #111;               /* texto negro para contraste */
}

/* Título principal debajo de la barra */
.titulo {
  text-align: center;
  color: #fff;
  font-size: 3em;
  margin: 20px 0;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.contenedor {
  display: flex;
  justify-content: space-between; /* reparte espacio */
  flex-wrap: nowrap;              /* evita que bajen */
  overflow-x: auto;               /* si no caben, aparece scroll horizontal */
  padding: 20px;
}

.card {
  flex: 0 0 200px; /* ancho fijo de cada tarjeta */
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  padding: 15px;
  margin-right: 10px;
  border-radius: 10px;
  text-align: center;
}

.card:hover {
  transform: scale(1.05);     /* efecto zoom al pasar el mouse */
}

/* Imagen dentro del cuadro */
.card img {
  max-width: 100%;
  border-radius: 5px;
  margin-bottom: 15px;
}

/* Título dentro del cuadro */
.card h2 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #ffcc00;             /* dorado para destacar */
}

.site-footer {
  background-color: #000;
  text-align: center;
  padding: 1rem;
  font-size: 0.85rem;
  color: #aaa;
}