/* "reseteo" selector universal */
* {
    /* para que el ancho de las cajas
       se calcule hasta los bordes y NO
       sólo por sus contenidos */
    box-sizing: border-box;
    padding: 0;
    border: 0;
}


/* ****************
   reglas generales
   **************** */

body {
    /* elimina margen predeterminado */
    margin: 0;
    /* cambia la tipografía general del proyecto */
    font-family: sans-serif;
}

/* selector múltiple */
h1,
h2,
h3,
h4,
h5,
h6,
p { /* redefine los márgenes inferiores
    para que midan el tamaño de la tipografía */
    margin-bottom: 1em;
}

/* TODOS los vínculos */
a {
    /* elimina los subrayados */
    text-decoration: none;
}

/* TODAS las listas */
ul,
ol {
    /* elimina bullets, números etc. */
    list-style: none;
    /* retira el relleno izquierdo predeterminado */
    padding: 0;
}

/* TODAS las imágenes */
img {
    /* para que NO midan más que la etiqueta que las contiene */
    max-width: 100%;
    /* opcional, evita deformaciones en navegadores antiguos */
    height: auto;
}

/* selector clase: grupo de elementos con características comunes */


/* lo que tienen en común el encabezado y el pie */
header,
footer {
    max-width: 50rem;
    margin: auto;
    background-color:rgb(28, 28, 66);
    color: white;
}

/* **********
   encabezado
   ********** */


/* etiqueta img, pero SÓLO el logo */
#logo {
    margin: auto;
    background-color: white;
    max-width: 3.8em;
    height: 1.8em;
}


/* ****
   menu
   **** */
header {
    padding:1em 0 0.5em 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

/* items de lista  que contienen los vínculos del menu */


nav ul li {    
    /* separación */
    margin: 0 0 .25em 0;
    display: inline-block;
}

/* vínculos del menu principal */
nav ul li a {
    background-color:skyblue;
    color: white;
    font-weight: bold;
    padding: 0.3em;
    text-align: center;
    /* para que estas etiquetas "a" sean "cajas" */
    display: block;
    margin: 0 auto ;
    min-width: 8em;
}

/* cuando el cursor se posiciona sobre los vínculos */
nav ul li a:hover {
    background-color: white;
    color: rgb(28, 28, 66);
    border-radius: 0.5em;
}

/* botón seleccionado */
.index header nav ul li:first-child a,
.plan header nav ul li:nth-child(2) a,
.mapa header nav ul li:nth-child(3) a,
.webapp header nav ul li:nth-child(4) a,
.analisis header nav ul li:nth-child(4) a
 {
    background-color: rgba(255, 255, 255, 0.85);
    color: rgb(28, 28, 66);
}

/* ****************
   cuerpo principal
   **************** */


main {
    margin: auto;
    max-width: 50rem;
    /* por ahora nada */
}

/* TODAS las secciones */
section {
    padding-bottom: 3em;
}

/* SÓLO la primera sección */
section:first-of-type {
    /* texto mayor */
    font-size: 1.25em
}

/* clase para diferentes títulos */
.titulo {
    /* "subrayado" a todo lo ancho */
    border-bottom: .4rem solid rgb(28, 28, 66);
    /* separa el "subrayado" del texto */
    padding-bottom: .5em;
}



/*
sección equipo
*/


/* SÓLO las imágenes del equipo */
.estudiante img {
    /* fondo blanco (estas img son transparentes) */
    background: white;
    /* borde violeta */
    border: solid .2em white;
    /* imagen redonda */
    border-radius: 50%;
    /* sombra interna y externa */
    /*box-shadow: 0 5px 5px rgba(0, 0, 0, .2),
        0 5px 5px rgba(0, 0, 0, .2) inset;*/
    display: block;
    margin: 0 0 0.6em 0;
    
}

/*main section div article figure {
    
}*/

/*main section div article figure img{
    float: left;
}*/
/*main section div article figure figcaption{
    float: right;
}*/
/*main section div article figure p{
    float: bottom;
}*/

main section div article a{
    float: right;
    color: rgb(28, 173, 173)
}

.estudiante {
    padding: 1em;
    /*text-align: center;*/
    color: white;
    background-color: rgb(28, 28, 66);
    display: inline-block;
    max-width:20em;
    margin: 0 0 .25em 0;
}


/*
sección datos académicos
*/

/*  FOOTER */

footer p{
    padding: 2em 1em 2em 1em;
    
}
/* TITULOS Y SUBTITULOS */
h1 {
    color:rgb(28,28,66);
    text-transform: uppercase;
    font-size:x-large;
}
h2, h3 {
    font-size:medium;
    color:rgb(28, 28, 66);
    font-weight: 900;
}
/* datos academicos*/
#datosacademicos ul li div {
    background-color:skyblue;
    padding: 0.5em;
    color:white;
    font-weight: 700;
}

/* OTRA PANTALLA */

@media screen and (max-width: 768px){

    .estudiante img {
        /* fondo blanco (estas img son transparentes) */
        background: white;
        /* borde violeta */
        border: solid .2em white;
        /* imagen redonda */
        border-radius: 50%;
        /* sombra interna y externa */
        /*box-shadow: 0 5px 5px rgba(0, 0, 0, .2),
            0 5px 5px rgba(0, 0, 0, .2) inset;*/
        display: block;
        margin: auto;
        margin-bottom: 1em;
        
    }

    .estudiante{
        margin: 0 0 0.6em 0;
        display: block;
        text-align: center;
        max-width: 100%;
    }

    header nav ul li {    
        /* separación */
        margin: 0 0 .25em 0;
        display: block;
        font-size: large;
    }

}