/* ---------- RESET GENERAL ---------- */
* {
  box-sizing: border-box;
  color: white;
}

html,
body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  background-color: rgb(16, 16, 44);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

/* ---------- HEADER ---------- */
header {
  background-color: black;
  padding: 0;
}

.header-contenedor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 0.5rem 2vw;
  width: 100%;
  box-sizing: border-box;
}

.logo {
  width: 6.25rem;
  display: flex;
  justify-content: flex-start;
  padding-left: 0;
}

.logo img {
  width: 5.3125rem;
  height: auto;
}

/* Navegación principal */
nav {
  height: 3.125rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  width: 100%;
}

nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

nav ul li {
  list-style: none;
  margin: 1rem;
  cursor: pointer;
}

nav ul li a {
  text-decoration: none;
  color: white;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

nav ul li a:focus,
nav ul li a:hover {
  background: #0a2a6d;
  color: rgb(224, 224, 224);
}

/* Menú lateral */
.menu-navegacion {
  position: fixed;
  top: 0;
  right: -100vw;
  width: 100vw;
  height: 100vh;
  background: #000;
  transition: right 0.4s cubic-bezier(.77, 0, .18, 1);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding-top: 2rem;
  z-index: 1000;
}

.menu-navegacion ul {
  flex-direction: column;
  width: 100%;
  padding: 2rem 0 0 0;
  margin: 0;
}

.menu-navegacion li {
  margin: 1.5rem 2rem;
  text-align: right;
}

.menu-navegacion a {
  font-size: 1.5rem;
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

.menu-navegacion a:focus,
.menu-navegacion a:hover {
  background: #222;
  outline: 2px solid #fff;
}

/* Efecto de desenfoque debajo del header */
.blur {
  height: 1.875rem;
  background: linear-gradient(black, transparent);
}

/* ---------- MAIN CONTENT ---------- */
main {
  display: flex;
  flex-direction: column;
  padding: 2%;
}

/* Contenedor principal de las 2 columnas */
.grid-principal {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  gap: 1rem;
  align-items: flex-start;
}

/* Columna que contiene Perfil y Materias/Rótulos */
.columna-perfil-materias {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-shrink: 0;
  width: 100%; /* Default para mobile */
}

/* Estilos del perfil */
.perfil-principal {
  width: 100%;
}

.perfil {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 2rem;
  background-color: rgb(3, 12, 31);
  border-radius: 1rem;
}

.imgavatar {
  width: 12rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}

.imgavatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.infoperfil {
  display: flex;
  flex-direction: column;
}

.nombre {
  margin: 0;
}

p.carrera {
  margin: 0.25rem 0 0;
}

/* Contenedor de Materias y Rótulos */
.materias-rotulos {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  flex-shrink: 0;
}

/* Sección de materias aprobadas */
.materias {
  width: 100%;
  padding: 1rem 0.5rem 2rem 2rem;
  background-color: rgb(3, 12, 31);
  border-radius: 1rem;
}

/* Rótulos de compañeras */
.rotulos {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  padding: 1%;
  margin: 0;
}

.rotulos h2 {
  margin-bottom: 1.5rem;
  text-align: center;
  color: #fff;
  font-size: 2em;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  width: 80%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.rotulos-contenedor-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.rotulos .contenedora {
  display: flex;
  flex-direction: column; /* Default para mobile */
  align-items: center;
  background-color: rgb(3, 12, 31);
  border-radius: 1rem;
  padding: 1rem;
  gap: 0.5rem;
  flex-shrink: 0;
  text-align: center;
  flex: 1 1 calc(50% - 0.5rem); /* Default para mobile, 2 por fila si el ancho lo permite */
  max-width: calc(50% - 0.5rem); /* Default para mobile */
  min-width: 160px;
}

.rotulos .contenedora .imgavatar {
  width: 4.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 0.5rem;
}

.rotulos .contenedora .imgavatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rotulos .contenedora .infoperfil {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
  min-width: 0;
  align-items: center;
}

.rotulos .contenedora .infoperfil h3 {
  margin: 0;
  font-size: 1.1rem;
}

.rotulos .contenedora .infoperfil p {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
}

.rotulos .contenedora .infoperfil .boton-perfil {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

/* COLUMNA DERECHA (Propuesta y Galería) */
.prototipo-galeria {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0%;
  min-width: 0;
  box-sizing: border-box;
  flex-grow: 1;
  width: 100%; /* Default para mobile */
}

/* Sección de prototipo */
.prototipo {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.prototipo-propuestas {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  background-color: rgb(3, 12, 31);
  border-radius: 0.5rem;
  padding: 2rem;
}

.prototipo-propuestas h2 {
  width: 95%;
  padding: 1rem;
  margin: 2rem;
  text-align: center;
  background-color: rgb(3, 12, 31);
  border-radius: 1rem;
}

.prototipo figure img {
  width: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0.5rem;
  margin: 0 auto;
}

.links {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Galería de trabajos (3 cards) */
.contenedor_galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Default para mobile, permitirá 1 o 2 si el ancho lo permite */
  width: 100%;
  box-sizing: border-box;
  gap: 1rem;
}

.trabajos_propios {
  background-color: rgb(3, 12, 31);
  border-radius: 0.5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  width: 100%;
  min-width: auto;
  box-sizing: border-box;
  padding: 1rem;
}

.trabajos_propios_img {
  width: 100%;
  height: 15rem; /* Ajuste inicial para imágenes de galería */
  object-fit: cover;
  border-radius: 0.5rem;
  padding: 0;
  min-width: 180px;
}

.contenedor_galeria h3 {
  margin: 0%;
}

/* ---------- BOTONES UNIFICADOS ---------- */
.boton-perfil,
.prototipo-propuestas a,
.trabajos_propios a,
.academicos .boton {
  text-decoration: none;
  background-color: rgb(10, 42, 109);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  width: fit-content;
  font-size: 0.875rem;
  transition: background-color 0.3s ease;
  display: block;
  box-shadow: none;
}

.boton-perfil:hover,
.prototipo-propuestas a:hover,
.trabajos_propios a:hover,
.academicos .boton:hover {
  background-color: rgb(22, 63, 139);
  box-shadow: none;
}

/* ---------- DATOS ACADÉMICOS ---------- */
.academicos {
  width: 100%;
  margin: 2rem 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.academicos h2 {
  margin-bottom: 1.5rem;
  text-align: center;
  color: #fff;
  font-size: 2em;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  width: 80%;
  max-width: 400px;
}

.contenedora-academicos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  padding: 0;
  margin: 0;
}

.card-academica {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: rgb(3, 12, 31);
  border-radius: 1rem;
  padding: 1.5rem 2rem;
  gap: 1.5rem;
  min-width: 280px;
  width: calc(33% - 1rem); /* 3 por fila en desktop */
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  transition: none; /* Evitar transiciones que puedan causar problemas */
}

.card-academica:hover {
  transform: none; /* Asegurar que no haya transformaciones no deseadas */
}

.academicos .imgAcademico {
  width: 4rem;
  height: 4rem;
  aspect-ratio: 1;
  overflow: hidden;
  flex-shrink: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
}

.academicos .imgAcademico img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  display: block;
}

.info-academica {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info-academica h3,
.info-academica h4,
.info-academica p {
  margin: 0 0 0.4rem 0;
  font-size: 1.1rem;
  color: #e0e0e0;
}

.info-academica h3 {
  font-weight: bold;
  color: #fff;
  font-size: 1.2rem;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.academicos .boton {
  margin-top: auto;
  align-self: flex-start;
}

/* ---------- FOOTER ---------- */
footer {
  background-color: black;
  width: 100%;
  padding: 2rem;
  color: rgb(62, 62, 62);
  text-align: center;
  min-height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

footer p {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  font-size: 0.85rem;
}

/* ---------- MEDIA QUERIES ---------- */

/* Media Query para desktop (min-width: 901px) */
@media (min-width: 901px) {
  .menu-btn,
  .cerrar-menu,
  .menu-navegacion {
    display: none !important;
  }

  nav {
    padding: 0 5%;
    background: none;
    position: static;
  }

  nav ul {
    flex-direction: row;
  }

  nav ul li a:focus,
  nav ul li a:hover {
    background: #222;
    outline: 2px solid #fff;
  }

  /* Distribución de 2 columnas principales en desktop */
  .grid-principal {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
  }

  /* Columna 1: Perfil y Materias/Rótulos */
  .columna-perfil-materias {
    width: 350px;
    flex-shrink: 0;
    order: 1;
    margin-right: 1rem;
  }

  /* Columna 2: Propuesta y Galería */
  .prototipo-galeria {
    flex-grow: 1;
    min-width: 500px;
    order: 2;
  }

  /* Rótulos en desktop */
  .rotulos-contenedor-cards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .rotulos .contenedora {
    flex: 1 1 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
    min-width: 160px;
  }

  /* Cards académicas para 3 en fila */
  .contenedora-academicos .card-academica {
    width: calc(33.333% - 1rem);
  }

  .contenedor_galeria {
    /* En desktop, la galería se puede mostrar en múltiples columnas */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
  }

  .trabajos_propios_img {
    height: 15rem; /* Ajuste para desktop */
  }
}

/* Media Query para pantallas menores a 1299px (Galería de trabajos: 1 columna) */
@media (max-width: 1299px) {
  .contenedor_galeria {
    grid-template-columns: 1fr; /* Una sola columna */
    gap: 1rem;
  }

  .trabajos_propios_img {
    height: 18.5rem; /* Altura de imagen para esta resolución */
  }
}

/* Media Query para mobile (max-width: 900px) */
@media (max-width: 900px) {
  .header-contenedor {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
  }

  .logo {
    width: 100%;
    padding-left: 0;
  }

  nav {
    width: 100%;
    padding: 0;
    justify-content: flex-start;
    height: auto;
    display: flex !important;
  }

  nav ul {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 0;
  }

  nav ul li {
    margin: 0.5rem 0;
  }

  /* Columnas principales apiladas en mobile */
  .grid-principal {
    flex-direction: column;
    align-items: center;
  }

  /* Asegura que los contenedores ocupen todo el ancho en mobile */
  .columna-perfil-materias,
  .prototipo-galeria,
  .materias-rotulos {
    max-width: 100%;
    width: 100%;
    margin-right: 0;
  }

  /* Orden de los elementos en mobile */
  .columna-perfil-materias {
    order: 1;
  }

  .prototipo-galeria {
    order: 2;
  }

  .materias-rotulos {
    order: 3;
  }

  /* Rótulos en pantalla chica */
  .rotulos-contenedor-cards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    padding: 0;
  }

  .rotulos .contenedora {
    flex: 1 1 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
    min-width: 150px;
    padding: 0.8rem;
    gap: 0.5rem;
  }

  .rotulos .contenedora .imgavatar {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.5rem;
  }

  .rotulos .contenedora .infoperfil h3 {
    font-size: 0.9rem;
  }

  .rotulos .contenedora .infoperfil p,
  .rotulos .contenedora .infoperfil a {
    font-size: 0.7rem;
  }

  /* Cards académicas apiladas en mobile */
  .contenedora-academicos .card-academica {
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
    min-width: 0;
    padding: 1rem;
    width: 100%;
  }

  .academicos .imgAcademico {
    margin-bottom: 0.5rem;
  }

  .academicos .boton {
    margin-top: 1rem;
    align-self: flex-start;
  }

  .contenedor_galeria {
    grid-template-columns: 1fr; /* 1 columna en pantallas < 900px */
    gap: 1rem;
  }

  .trabajos_propios_img {
    height: 15rem; /* Ajusta la altura de la imagen de galería para pantallas < 900px */
  }
}

/* Media Query para pantallas muy pequeñas de mobile (max-width: 400px) */
@media (max-width: 400px) {
  .rotulos .contenedora {
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    flex: 1 1 100%;
    align-items: center;
  }

  .rotulos .contenedora .infoperfil {
    align-items: center;
  }

  .trabajos_propios_img {
    height: 8rem; /* Aún más pequeña para pantallas muy pequeñas */
  }

  .contenedor_galeria {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}