/* Centrar todos los textos */
body {
    font-family: 'Arial', sans-serif;
    color: #d95529; /* Color del texto */
    background-color: #f5f4f2;
    text-align: center;
    margin: 0;
    padding: 0;
}

nav {
  background-color: #000; /* Color negro para el fondo del menú */
  display: flex; /* Alinear los elementos uno al lado del otro */
  justify-content: flex-end;
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Asegurar que el menú ocupe todo el ancho */
}

nav a {
  color: #f5f4f2; /* Color del texto en #e7e1da */
  margin-right: 20px; /* Espacio entre los enlaces */
  text-decoration: none; /* Eliminar subrayado */
  transition: color 0.3s ease; /* Transición suave al pasar el mouse */
}

nav a:hover {
  color: #d95529; /* Cambia a #d95529 al pasar el cursor */
}

header {
  margin-top: 60px; /* Añadir suficiente margen superior para evitar que el nav lo pise */
}

header h1 {
  text-align: center;
  font-size: 60px;
}

menu {
  background-color: black; /* Fondo negro */
  display: flex; /* Alinea los items horizontalmente */
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;
}


.team a {
  color: black; /* Color negro para los nombres de los integrantes */
  text-decoration: none; /* Opcional: eliminar subrayado */
  font-weight: bold; /* Opcional: hacer el texto en negrita */
  transition: color 0.3s ease; /* Animación suave al pasar el mouse */
}

.team a:hover {
  color: #f5f4f2; /* Cambia el color a blanco al pasar el cursor */
}

.level-box h3 a {
  text-decoration: none;
}

.team h2 {
  font-size: 20px;
}

/* Contenedor de los niveles para mostrar los artículos en línea */
.levels-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  gap: 20px;
  justify-content: center;
  margin: 20px;
}

/* Cada caja de nivel (nivel-box) */
.level-box {
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    display: inline-block;
    background-color: #d95529;
    border: 3px solid #d95529;
    border-radius: 5px; 
    width: 100%;
    height: auto;
    
}


/* Ajuste de márgenes */
h3 {
    margin-bottom: 10px;
}

.datos {
  color: #000000;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  margin-top: 60px;
}


.datos h2 {
  font-size: 20px;
}
footer {
  margin-top: 60px; 
  background-color: #000000; /* Fondo negro */
  color: #f5f4f2; /* Texto en blanco para buen contraste */
  padding: 20px; /* Añade algo de espacio dentro del footer */
  text-align: center;
  font-size: 14px;
  font-weight: 400;
}

footer p {
  color: #f4ddd2; /* Asegura que los enlaces sean visibles en fondo negro */
}


@media (max-width: 1024px) {
  .levels-container {
      grid-template-columns: repeat(3, 1fr); /* 3 columnas en tabletas */
  }

  header h1 {
      font-size: 36px;
  }

  .level-box {
      padding: 8px;
  }
}

/* Ajustes para pantallas medianas (como móviles en horizontal) */
@media (max-width: 768px) {
  .levels-container {
      grid-template-columns: repeat(2, 1fr); /* 2 columnas en móviles horizontales */
  }

  nav {
      justify-content: center; /* Centrar el menú en pantallas más pequeñas */
  }

  nav a {
      margin-right: 10px;
  }

  header h1 {
      font-size: 32px;
  }

  .level-box {
      padding: 6px;
  }
}

/* Ajustes para pantallas pequeñas (móviles en vertical) */
@media (max-width: 480px) {
  .levels-container {
      grid-template-columns: 1fr; /* 1 columna en móviles verticales */
  }

    nav {
      justify-content: center;
    }
  
    nav a {
      margin-right: 10px; /* Reducir el espacio entre los enlaces */
    }

  header h1 {
      font-size: 28px;
  }

  .level-box {
      padding: 5px;
  }
}