@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 { width: 100%; max-height:100vh; justify-content: center;
  margin: auto; font-family: 'Nunito Sans', sans-serif;}

.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;}

.nav-rotulo .menu-ppal .vn23 a { color: #6C63FF; }
.rotulogrupal ul { list-style: none; display: flex; justify-content: space-between;}
.rotulogrupal ul li {margin-top: .5rem;}
.rotulogrupal ul li a { color: #ffffff;font-weight: 400; font-size: 1rem;}

.rotulogrupal:hover a {
    color: #6C63FF;
    transform: scale(.3);
}

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

.vn23  {text-align: left; font-weight: 700; font-size: 2rem;}
.rotulo h1 {color: #6C63FF; text-align: center; margin-top: 10rem;}

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


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

.bios img { width: 7rem; height: 7rem; border-radius: 10rem}
.bios p {
  padding: 1rem;
    font-size: 1rem;
    font-weight: 700;
}

.bios:hover {
    border-color: #6C63FF;
    box-shadow: 0px 1px 4px 0px rgba(86, 206, 242, 0.5);
    transform: scale(1.02);
}

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

.datos h2 { text-align: center; }

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

.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;}
.contenidos p { font-size: 0.8rem; color: #6C63FF; font-weight: 400; text-align: center; font-size:.7rem; padding: 0.3rem; }
.columnas h2 {padding: 2rem;font-size: 1.3rem;}
.rotulo .datos .columnas a {color:#6C63FF; }
.rotulo .alumnos .bios a { color:#6C63FF; }

a {text-decoration: none;}

.mapa {display: flex; justify-content: center; margin: auto; margin-top: 3rem;}
.mapa  img{max-width: 100%;}
.plan {
  align-items: center;
  max-width: 90%;
  border: 1px solid;
  border-color: #cecece;
  border-radius: 10px;
  transition: all ease-in-out 0.2s;
  margin: 3rem;
  padding: 2rem 5rem 2rem 5rem;
  background-color: #fff;
  text-align: center;
}

/* Video */
.video-container{
    display: block;
    width: 30%;
    height: 0;
    padding-bottom: 56.25%;
    background-color: #fFF;
    position: relative;
        margin: auto;
}
.video-container iframe{
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
}


/* cuando es mayor a 768px */

@media screen and (min-width:48rem){

    .rotulogrupal ul {width: 70%; display: flex; justify-content: center; margin: auto;}
    .vn23 { margin-left: 2rem;}
    .alumnos { display: flex; justify-content: space-between;  width: 60%; margin: auto;}
    .alumnos .bios img { width: 15rem; height: 15rem;}
    .columnas {justify-content: space-between; display: inline-table;}
    .datos {display: flex;
        align-items: center; justify-content: center; margin: auto;}
    .rotulogrupal ul li a {font-size: 1rem; padding: 4rem;}
.contenidos { display: flex; justify-content: center; width: 100%;}
}