*{  box-sizing: border-box;
}

body {
  background-color: rgb(198, 222, 223);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0; /* Elimina el margen por defecto del body */
  line-height: 1.6; /* Mejora la legibilidad general del texto */
  color: #333; /* Color de texto base, más oscuro para mejor contraste */
}

/* --- Encabezado --- */
header {
  background-color: rgb(98, 143, 228);
  padding: 10px 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Agrega una sombra sutil */
}

/* Estilos base (mobile-first) o estilos generales */
.header-contenedor {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* Mantenemos wrap para móvil por si acaso */
  gap: 1em;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Media Query para Desktop (ej. min-width: 769px) */
@media (min-width: 769px) {
  nav {
    flex-shrink: 0; /* Evita que la navegación se encoja si el espacio es limitado */
  }

  .logo {
    flex-shrink: 0; /* Evita que el logo se encoja */
  }
}






.logo {
  width: 100px;
  /* Elimina justify-content: center; aquí si ya lo centras con margin: 0 auto; o si el padre es flex */
  padding-left: 0; /* Si usas max-width y margin:auto en .header-contenedor, no necesitas padding-left aquí */
}

.logo img {
  max-width: 100%; /* Asegura que la imagen no se desborde */
  height: auto; /* Mantiene la proporción de la imagen */
  display: block; /* Elimina espacio extra debajo de la imagen */
}

nav {
  /* height: 50px; Esto puede ser limitante, es mejor dejar que el contenido defina la altura */
  /* position: relative; top: 0; margin:0%; No son necesarios aquí */
  display: flex;
  justify-content: flex-end;
  padding: 0; /* El padding del .header-contenedor ya maneja el espaciado */
  /* gap: 0.5em; Este gap aplica a la `nav` en sí, pero la lista `ul` ya tiene un `column-gap` */
}

nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0; /* Elimina el padding por defecto de la lista */
  margin: 0; /* Elimina el margen por defecto de la lista */
  list-style: none; /* Elimina los puntos de la lista */
  column-gap: 1.5em; /* Aumenta un poco el espacio entre elementos del menú */
}

nav ul li {
  /* color: rgb(98, 143, 228); Este color lo define el 'a' */
  /* list-style: none; Ya está en el `ul` */
  /* margin: 10px; margin-top: 10px; Reemplazado por column-gap en el ul */
  transition: color 0.3s ease; /* Transición solo para el color para evitar parpadeos con "all" */
  cursor: pointer;
}


nav ul li a {
  text-decoration: none;
  color: #000000; /* Asegura un buen contraste */
  padding: 5px 10px; /* Agrega un poco de padding para que el área de clic sea más grande */
  display: block; /* Permite que el padding funcione correctamente */
}

nav ul li a:hover { /* El pseudoclasificador `:hover` va en el `a` para que aplique a todo el enlace */
  color: rgb(255, 255, 255);
}

/* --- Sección Título (Roldan Sara) --- */
#titulo-pagina { /* Usando el ID corregido del HTML */
  min-height: 100vh;
  background-image: url(../imagenes/fondo.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: scroll; /* "fixed" es bueno para efectos parallax, "scroll" es lo predeterminado */
  background-color: rgb(198, 222, 223); /* Color de fallback si la imagen no carga */

  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px; /* Agrega un padding para evitar que el texto toque los bordes */
}

#titulo-pagina h1 {
  font-size: clamp(3rem, 8vw, 6rem); /* Responsive font size */
  margin-bottom: 10px; /* Reduce el margen inferior por defecto */
}

#titulo-pagina p {
  font-size: clamp(1.5rem, 4vw, 3rem); /* Responsive font size */
  margin-top: 0; /* Reduce el margen superior por defecto */
}

/* --- Sección Materias --- */
.materias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20em, 100%), 1fr));
  gap: 1.5rem; /* Espaciado consistente */
  margin: 2rem auto; /* Margen superior/inferior y centrado */
  max-width: 1200px; /* Limita el ancho del contenedor */
  padding: 0 20px; /* Padding para evitar que toque los bordes */
  list-style: none; /* Asegura que no haya viñetas en el contenedor principal */
}

.materias_texto {
  background-color: #f9f9f9; /* Color de fondo para cada caja de materias */
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Sombra suave para las cajas */
}

.materias_texto h2 { /* Usamos h2 en lugar de h4 para la jerarquía */
  padding: 0; /* Remueve el padding ya que la caja padre ya lo tiene */
  margin-top: 0; /* Ajusta margen superior */
  margin-bottom: 1rem; /* Margen inferior para separar del ul */
  color: rgb(98, 143, 228); /* Color para los títulos de las materias */
  font-size: 1.5rem; /* Ajusta el tamaño de fuente */
}

.materias_texto ul {
  list-style-type: disc; /* Vuelven los puntos de la lista (o puedes usar 'none' si prefieres sin ellos) */
  padding-left: 20px; /* Indentación para las viñetas */
  margin: 0; /* Elimina márgenes por defecto */
}

.materias_texto ul li {
  margin-bottom: 0.5em; /* Espacio entre los ítems de la lista */
}

/* --- Sección Botones --- */
/* --- Sección de Botones de Prototipo --- */
.Prototipos { /* Selector para el contenedor de todos los botones */
  display: flex; /* Usamos flexbox para organizar los botones */
  flex-wrap: wrap; /* Permite que los botones se envuelvan a la siguiente línea en pantallas pequeñas */
  justify-content: center; /* Centra los botones horizontalmente */
  gap: 1.5rem; /* Espacio entre los botones */
  margin: 3rem auto; /* Margen superior/inferior y centrado */
  max-width: 1200px; /* Limita el ancho del contenedor */
  padding: 0 20px; /* Padding a los lados para que no toquen los bordes */
}

.Prototipos .botones { /* Seleccionamos los divs individuales que contienen los enlaces */
  /* No necesitamos muchos estilos aquí, ya que el enlace 'a' es el que se estiliza */
  flex-basis: calc(33% - 1rem); /* Intenta que cada botón ocupe 1/3 del ancho, ajustando por el gap */
  min-width: 250px; /* Asegura un ancho mínimo para cada botón antes de apilarse */
  text-align: center; /* Centra el contenido si hubiera más */
}

.Prototipos .botones a { /* Estilos para el enlace (el botón en sí) */
  background-color: rgb(98, 143, 228); /* Color de fondo azul */
  border-radius: 0.5rem; /* Bordes redondeados */
  padding: 1rem 2rem; /* Relleno interno para un buen tamaño de botón */
  display: inline-block; /* Permite aplicar padding y margin como un bloque, pero se comporta en línea */
  color: white; /* Color del texto */
  text-decoration: none; /* Quita el subrayado del enlace */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves para hover */
  width: 100%; /* El botón ocupa todo el ancho disponible de su contenedor (.Prototipos .botones) */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para darle profundidad */
  font-weight: bold; /* Texto en negrita */
  white-space: nowrap; /* Evita que el texto del botón se rompa en varias líneas */
}

.Prototipos .botones a:hover {
  background-color: rgb(75, 115, 190); /* Color un poco más oscuro al hacer hover */
  transform: translateY(-3px); /* Un ligero efecto de levantamiento al hacer hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada al hacer hover */
}

/* --- Media Query para Dispositivos Móviles (opcional, pero recomendado) --- */
@media (max-width: 768px) {
  .Prototipos {
    flex-direction: column; /* Apila los botones verticalmente en pantallas pequeñas */
    align-items: center; /* Centra los botones apilados */
    gap: 1rem; /* Reduce el espacio entre botones apilados */
  }

  .Prototipos .botones {
    flex-basis: 100%; /* Cada botón ocupa todo el ancho disponible */
    min-width: unset; /* Reinicia el min-width */
    padding: 0 15px; /* Ajusta el padding para que los botones no toquen los bordes */
  }

  .Prototipos .botones a {
    padding: 0.8rem 1.5rem; /* Reduce un poco el padding en móvil */
    font-size: 0.95em; /* Ajusta el tamaño de fuente si es necesario */
  }
}



/* --- Galería de Trabajos (Cards) --- */
.contenedora-card {
  max-width: 1200px;
  margin: 3rem auto;
  padding: 0 20px;
}

.contenedora-card h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: rgb(98, 143, 228);
  font-size: 2rem;
}

.galeria {
  display: grid;
  /* Ajusta el minmax para que las imágenes sean un poco más grandes si lo deseas.
     Para que estén "todas juntas", el `gap` debe ser 0. */
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); /* Reducimos el min-width para más imágenes por fila */
  gap: 0; /* ¡Cambiamos el gap a 0 para que estén pegadas! */
  overflow: hidden; /* Importante para que los bordes redondeados del .card no se vean cortados si hay scroll */
}

.card {
  position: relative;
  /* overflow: hidden; -- Ya está en .galeria, no es necesario aquí también si las imágenes cubren todo */
  border-radius: 0; /* Eliminamos el borde redondeado en la tarjeta para que estén totalmente pegadas */
  box-shadow: none; /* Eliminamos la sombra para que no haya líneas entre ellas */
  background-color: transparent; /* Fondo transparente si la imagen lo cubre todo */
  transition: transform 0.3s ease;
  margin: 0; /* Aseguramos que no haya margen por defecto en la tarjeta */
}

.card:hover {
  transform: scale(1.03); /* Un ligero zoom al hacer hover para destacar */
  z-index: 1; /* Asegura que la imagen en hover esté por encima */
}

.galeria figure img {
  width: 100%;
  height: 200px; /* Mantienes una altura fija o puedes hacerla 100% de la altura de la card si quieres flexibilidad */
  object-fit: cover;
  border-radius: 0; /* ¡Eliminamos el borde redondeado en las imágenes también! */
  display: block;
}






.academicos {
  background-color: rgb(98, 143, 228); /* Fondo diferente para esta sección */
  padding: 3rem;
}

.academicos h2 {
  text-align: center;
  margin-bottom: 2.5rem;
  color: rgb(98, 143, 228);
  font-size: 2rem;
}

.academicos .contenedora { /* Especificidad para este .contenedora */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); /* Ajuste de min-width */
  gap: 2rem; /* Más espacio entre los elementos académicos */
  max-width: 1200px;
  margin: 0 auto;
  list-style: none; /* Asegura que no haya viñetas */
  padding: 0;
}

.academicos .contenedora > li { /* Estilo para cada item individual */
  display: flex;
  flex-direction: column; /* Apila imagen y texto */
  align-items: center; /* Centra horizontalmente el contenido */
  border-radius: 0.8rem;
  padding: 1.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.academicos .imgAcademico {
  margin-bottom: 1.5rem; /* Espacio debajo de la imagen */
}

.academicos .imgAcademico img {
  width: 120px; /* Tamaño un poco más grande para las imágenes de logos */
  height: 120px; /* Altura igual al ancho para mantener proporción */
  object-fit: contain;
  margin: 0 auto; /* Centra la imagen */
}

.academicos h3 {
  color: #333;
  font-size: 1.8rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.academicos h4 { /* Para la cátedra */
  color: #555;
  font-size: 1.3rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

.academicos ul { /* Listas dentro de cada item académico */
  list-style-type: none; /* Quitar viñetas para estas listas */
  padding: 0;
  margin-bottom: 1.5rem; /* Espacio antes del botón */
  text-align: center; /* Centra el texto de la lista */
}

.academicos ul li {
  background-color: transparent; /* Elimina el fondo azul de los li aquí */
  padding: 0; /* Elimina el padding si no es necesario */
  border-radius: 0; /* Elimina el borde redondeado */
  margin-bottom: 0.5em;
}

.academicos ul li:last-child {
  margin-bottom: 0;
}

.academicos .boton { /* Estilo para el botón dentro de académicos */
  background-color: rgb(64, 158, 170); /* Color diferente para distinguirlos */
  border-radius: 1rem;
  padding: 0.8rem 1.8rem; /* Ajusta el padding del botón */
  display: inline-block; /* Para que el padding y margen funcionen correctamente */

  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-top: auto; /* Empuja el botón hacia abajo si el contenido varía en altura */
}

.academicos .boton:hover {
  background-color: rgb(40, 120, 130); /* Color más oscuro al hacer hover */
  transform: translateY(-2px);
}

/* --- Pie de Página --- */
footer {
  background-color: rgb(98, 143, 228);
  color: white;
  padding: 1.5rem 20px; /* Ajusta el padding del footer */
  text-align: center;
  margin-top: 3rem; /* Espacio superior para separar del contenido */
  font-size: 0.9em;
}

footer p {
  margin: 0; /* Asegura que no haya márgenes extra en el párrafo */
  max-width: 900px; /* Limita el ancho del texto en el footer */
  margin: 0 auto; /* Centra el texto del footer */
}

/* --- Media Queries para Responsividad (Opcional, pero recomendado) --- */

@media (max-width: 768px) {
  .header-contenedor {
    flex-direction: column;
    text-align: center;
  }

  nav {
    justify-content: center;
    width: 100%; /* Ocupa todo el ancho disponible */
    margin-top: 15px;
  }

  .logo {
    padding-left: 0;
    margin-bottom: 10px;
  }

  nav ul {
    flex-wrap: wrap; /* Permite que los elementos del menú se envuelvan */
    justify-content: center;
  }

  #titulo-pagina h1 {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }

  #titulo-pagina p {
    font-size: clamp(1.2rem, 5vw, 2.5rem);
  }

  .botones {
    grid-template-columns: 1fr; /* Apila los botones en pantallas pequeñas */
  }

  .materias,  .academicos {
    gap: 1rem; /* Reduce el gap en pantallas más pequeñas */
    padding: 0 15px; /* Ajusta el padding lateral */
    max-width: 100%; /* Permite que el contenedor ocupe todo el ancho disponible */
  }

  .galeria .contenedora {
    gap: 0; /* Reduce el gap en pantallas más pequeñas */
    padding: 0 15px; /* Ajusta el padding lateral */
    aspect-ratio: 1/1;
}}

@media (max-width: 480px) {
  nav ul li a {
    padding: 8px 12px; /* Ajusta el padding para enlaces en móviles */
  }

  .academicos .contenedora > li {
    padding: 1rem;
  }
}