body {
  font-family: 'Arial', sans-serif;
  color: #f4ddd2; /* Color del texto */
  background-color: #f4ddd2; /* Color de fondo */
  margin: 3px; /* Espaciado exterior */
  padding: 0; /* Espaciado interior */
  line-height: 1.6; /* Espaciado entre líneas */
  text-align: center; /* Centra todo el texto */
}

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: #f4ddd2; /* 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 */
  color: #d95529; /* Color del texto */
}


img {
  display: block;
  margin: 0 auto;
}

/* Estilos para los recuadros */
.materias .levels-container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 20px;
justify-content: center;
margin-top: 20px;
}

.materias .level-box {
  background-color: #d95529;
  color: f4ddd2;;
  padding: 20px;
  border-radius: 10px;
  width: 200px;
  min-height: 200px; /* Ajusta este valor según la altura necesaria */
  box-shadow: 0 4px 8px #d95529;
  text-align: left; /* Alineación del texto a la izquierda */
}

.materias .level-box h1, .level-box ul, .level-box li {
  text-align: left; /* Asegura que el texto dentro de level-box no esté centrado */
  margin: 0; /* Elimina márgenes no deseados */
}

.materias .level-box ul {
  padding-left: 20px; /* Agrega espacio para la indentación de la lista */
}


.team article {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 20px;
justify-content: center;
margin-top: 20px;
}

.team h1 {
  font-weight: bold; /* Opcional: hacer el texto en negrita */
  color: #d95529;
}

.team li {
  display: flex;
  list-style: none;
  flex-direction: column; /* Pone el nombre arriba y la imagen abajo */
  align-items: center; /* Centra el contenido de cada li (nombre e imagen) */
  margin-right: 20px; /* Espacio entre cada lista */
  margin-bottom: 20px; /* Añade espacio en la parte inferior por si el contenedor es pequeño */
}

.team a {
  margin-bottom: 10px; /* Espacio entre el nombre y la imagen */
  text-align: center; /* Centra el texto del enlace */
  text-decoration: none; /* Eliminar subrayado */
  color: #000000;
  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: #d95529; /* Cambia el color al pasar el mouse, si lo deseas */
}

.team img {
  display: block;
  max-width: 100%; /* Mantiene el tamaño original de las imágenes */
  height: auto; /* Ajusta la altura de manera proporcional */
}

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

footer {
  margin-top: 60px; 
  background-color: #7b8fb1; /* Fondo negro */
  color: #f4ddd2;; /* Texto en blanco para buen contraste */
  padding: 20px; /* Añade algo de espacio dentro del footer */
  text-align: center; /* Centra el texto */
}

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

@media (max-width: 1024px) {
  .materias .levels-container, .team article {
    grid-template-columns: auto auto auto; /* 3 columnas para pantallas medianas */
  }
}

@media (max-width: 768px) {
  .materias .levels-container, .team article {
    grid-template-columns: auto auto; /* 2 columnas para tabletas */
  }
}

@media (max-width: 480px) {
  nav {
    justify-content: center;
  }

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

  header {
    margin-top: 80px; /* Aumentar el margen superior para evitar que el menú se solape en móviles */
  }

  .materias .levels-container, .team article {
    grid-template-columns: auto; /* 1 columna para pantallas pequeñas */
  }

  .materias .level-box, .team li {
    width: 100%; /* Hacer que los elementos ocupen todo el ancho */
    min-height: auto; /* Ajustar la altura mínima en móviles */
  }
}