@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700&display=swap');
*{padding: 0; margin: 0; box-sizing: border-box;}

.contenedor { max-width: 100%;max-height:100vh;
  margin: auto; font-family: 'Nunito Sans', sans-serif; margin-top:9rem; margin-bottom: 5rem;}

.nav-rotulo{ font-family: 'Nunito', sans-serif; font-weight: 400; font-size: 0.8rem;
    padding: 2rem;
    width: 100%;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    background-image: linear-gradient(135deg, #c3cfe2 0%, #e8e8e8 100%);
    z-index: 997;
    left: 0;
    margin: auto;}

a { text-decoration: none;}
.nav-rotulo .menu-ppal .vn23 a { color: #6C63FF; }

.rotulogrupal ul li { display: inline-block; padding-left: 1rem; padding-top:1rem;}
.rotulogrupal ul li a { color: #ffffff; text-decoration: none; font-weight: 400; font-size: 1rem; padding-right: 1rem;}

.menu-ppal {
justify-content: space-between;}

.vn23  {padding-left: 1rem; text-align: left; font-weight: 700; font-size: 2rem;}
.rotulo h1 {color: #6C63FF; text-align: center; padding-top: 2rem;}
.rotulo h2{text-align: center; font-size: 1rem; padding-bottom: 2rem; font-weight: 400;}


.arriba { display: flex; margin: 2rem 3rem 1rem 3rem; justify-content: center; }
.nombre { font-size: 1.5rem; color: #6C63FF; width: 80% ; }

.alumnos {
    width: 100%;
    justify-content: center;
    margin: auto;
    margin-bottom: 4rem; }

.bios {
    border: 1.5px solid;
    border-color: #6C63FF;
    border-radius: .5rem;
    transition: all ease-in-out 0.2s;
    margin: 3rem;
    background-color: #fff;
    text-align: center;
}
  .bios img {
      border: 1px solid;
      border-color: #cecece;
      border-radius: 10rem;
      transition: all ease-in-out 0.2s;
      margin: 3rem; margin-bottom: 1rem;
      padding: .3rem;
      background-color: #fff;
}

.bios img {border-radius: 10rem}
.bios p {
  padding: 1rem;
    font-size: 0.95rem;
    font-weight: 300;
    max-width: 90%;
}



.datos { text-align: center;
width: 100%;
justify-content: center;
margin: auto;
text-decoration: none;
margin-bottom: 11rem;}

.columnas {
  flex-direction: column;
  align-items: center;
  max-width: 90%;
  height: auto;
  border: 1px solid;
  border-color: #cecece;
  border-radius: 10px;
  transition: all ease-in-out 0.2s;
  margin: 2rem;
  padding: 2rem 5rem 2rem 5rem;
  background-color: #fff;
  text-align: center;
}

.columnas h2 { text-align: center; font-weight: 700; color: #6C63FF; font-size: 1.3rem;}


.contenidos { padding: 2rem; font-family: 'Nunito Sans', sans-serif; text-align: center;
background-color: #f4f4f4;
box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.2);
width: 100%; justify-content: center; position: fixed;
bottom: 0;
z-index: 997;
left: 0;
margin: auto;}
.contenidos p { font-size: 0.8rem; color: #6C63FF; font-weight: 400; text-align: center; font-size:.7rem; padding: 0.3rem; }



/* cuando es mayor a 768px */

@media screen and (min-width:48rem){
.contenedor { max-width: 100%; max-height:100vh;
  margin: auto; margin-top:9rem; margin-bottom: 5rem;}
  .alumnos { margin-bottom: 3rem;}

  .bios { width: 55%;
display: flex;
    align-items: center; justify-content: center; margin: auto; margin-top: 3rem; padding-top:0;}
    .bios h1 {font-size: 2.5rem;}
.bios img {margin-top: 1.5rem;}

  .datos{ width: 100%;
display: flex;
    align-items: center; justify-content: center; margin: auto; }
    .rotulogrupal { text-align: right;}
    .rotulogrupal ul li a {font-size: 1rem; padding: 4rem;}
.contenidos { display: flex; justify-content: center; width: 100%;}
}