/* Fondo de la pagina general */
* {margin:0; padding:0; box-sizing:border-box;}
body {
  font-family: "Segoe UI", sans-serif;
  background:#eaf3fb; /* Fondo azul muy claro */
  color:#1c2a39; /* Azul oscuro para texto */
  line-height:1.6;
}

/*Barra navegacion superior*/
header {
  background:#0d47a1; /* Azul oscuro */
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
  position:sticky;
  top:0;
  z-index:1000;
}
nav {
  display:flex;
  justify-content:center;
  gap:25px;
  padding:15px;
}
nav a {
  text-decoration:none;
  color:#e3f2fd; /* Azul muy claro */
  font-weight:600;
  transition:.3s;
}
nav a:hover { color:#bbdefb; }

/* Perfil formato (imagen,nimbre, carrera y perfil)*/
.perfil {
  text-align:center;
  margin:40px auto;
}
.perfil img {
  width:160px; 
  height:160px;
  border-radius:12px;  /* imagen cuadrada con puntas redondeadas */
  border:none;      /* sin borde */
  object-fit:cover;
  margin-bottom:15px;

}
.perfil h1 { font-size:1.8rem; color:#0d47a1; }
.perfil h2 { font-size:1.2rem; color:#1565c0; margin-top:8px; }
.perfil p { color:#1c2a39; }

/* Formato del contenedor de las 4 cajas */
.contenedor {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  margin:30px;
}

/* Formato de las cajas */
.caja {
  background:#ffffff;
    padding:20px;
  border-radius:12px;
  width:240px;
  box-shadow:0 3px 8px rgba(0,0,0,0.15);
  transition:transform .2s, background .3s;
  border-top:4px solid #42a5f5; /* Azul celeste */
}

/* Efecto mouse over: resalta con color */
.caja:hover { 
  transform:translateY(-5px); 
  background:#d1e0f2; 
}
.caja h3 { margin-bottom:10px; color:#1565c0; }
.caja ul { padding-left:18px; font-size:0.9rem; }

/* Formato bloque de integrantes */
.integrantes {
  background:#bbdefb; /* Azul pastel */
  margin:30px auto;
  padding:20px;
  border-radius:12px;
  text-align:center;
  width: 68%;
  box-shadow:0 3px 8px rgba(0,0,0,0.1);
}
.integrantes h2 { margin-bottom:10px; color:#0d47a1; }

/* Lista integrantes */
.lista-integrantes {
  display: flex;
  justify-content: center;
  gap: 20px; /* espacio entre integrantes */
  margin-top: 10px;
  flex-wrap: wrap; /* por si en pantallas pequeñas no entran todos en una fila */
}

/* formato de cada integrante */
.lista-integrantes a {
  text-decoration: none;
  color: #0d47a1; /* azul oscuro */
  font-weight: 600;
  padding: 8px 12px;
  background: #bbdefb; /* azul suave */
  border-radius: 8px;
  transition: background 0.3s, transform 0.2s;
}
 /* Formato del evecto del mouse encima */
.lista-integrantes a:hover {
  background: #64b5f6; /* azul más fuerte */
  color: #fff;
  transform: translateY(-3px);
}


/* INFO INSTITUCIONAL */
.info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 68%;           
  margin: 30px auto;    /* Centrado */
  padding: 30px;
  border-radius: 12px;
  font-size: .9rem;
  gap: 15px;
}
.info div { max-width:250px; color:#1c2a39; }

/* FOOTER  */
footer {
  text-align:center;
  font-size:.8rem;
  background:#0d47a1; /* Azul oscuro */
  color:#e3f2fd;
  padding:12px;
  margin-top:30px;
}