@charset "utf-8" ;
/* ----- PRIMERO REGLAS PARA CELULAR - MOBILE FIRST ----- */
*{
    box-sizing:border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin:0;
    padding:0;
    border:0;
}
/*---- BODY----*/
header{
    padding:1em 0 0.5em 0;
}
main, footer {
    margin: 0.5em 6em 1em 6em;
}
h1, h2, h3, p {
    margin-bottom: 0.5em;
}
a {
    text-decoration: none;
}
ul {
    list-style: none;
    padding:0;
}
figure img {
    max-width: 100%;
    height:auto;
}
header, footer, #sobremi {
    background-color: wheat;
}
.header {
    display:flex;
    flex:wrap;
    flex-direction: column;
    align-items: center;
}
#logo {
    background-color:thistle;
    height:2em;
}
header nav ul {
    margin: 1em 1em;
}
header nav ul li {
    margin: 0.5em;
}
header nav ul li a{
    color:black;
    display:block;
    max-width: 30em;
    border-radius: 1em;
    font-family: sans-serif;
    font-size:small;
    text-align: center;
    background-color: burlywood;
    padding: 0.5em 6.5em 0.5em 6.5em;
    color:white;
    text-transform: uppercase;
    font-weight: bold;
    font-size:smaller;
}
header nav ul li a:hover {
    background-color: chocolate;
    color: white;
}
/*----MAIN----*/
.datospersonales {
    display: flex; 
    flex-direction: column;
    align-items: center; 
    flex-wrap: wrap;
}
.datospersonales div {
    margin: 1em 0;
}
.datospersonales div nav {
    margin: 1em 0;
}
.datospersonales div p b {
color:chocolate;
font-size: small;
font-weight:500;
}
.datospersonales div p {
    font-size: small;
}
.titulos {
    background-color:peru;
    color: moccasin;
    padding:0.3em;
    text-transform:uppercase;
    font-weight:600;
    word-spacing: 0.2em;
    font-size:medium;
}
.subtitulos {
    color:peru;
    font-size:medium;
}
#informacionpersonal nav ul {
    margin: 1em 0;
}
#informacionpersonal nav ul li {
    display: flex;
    flex-direction: column;
    margin:0 0 1em 0;
}
#informacionpersonal nav ul li a {
    background-color: thistle;
    border-radius: 1em;
    padding:0.6em;
    color:indigo;
    font-size: small;
    max-width: max-content;
}
#informacionpersonal nav ul li a:hover {
    color:white;
    background-color: indigo;
}
#informacionpersonal figure img {
    max-width: 100%;
    height:auto;
    display: block;
    border-radius: 1em;
}
#informacionpersonal figure {
    width: 40%;
    height:40%;
}
#informacionpersonal div {
    width: 60%;
}
#sobremi {    
    border-radius: 0.5em;
    margin:0 0 0.5em 0;
    padding:0.5em;
}
#sobremi p {
    font-size: small;
}
#boceto figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
}
#boceto figure img {
    margin:0.5em 0;
}
#prototipo figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
}
#prototipo figure img {
    margin:1em 0 1em 0;
}
.datosacademicos {
    display: flex;
    flex-wrap:wrap;
    flex-direction: column;
}
#datosacademicos div {
    margin: 0.5em 0;
}
#datosacademicos div p {
    font-size: small;
}
#boceto nav ul {
    margin: 1em 0;
}
#boceto nav ul li {
    display: flex;
    flex-direction: column;
    margin:0 0 1em 0;
}
#boceto nav ul li a {
    background-color: thistle;
    border-radius: 1em;
    padding:0.6em;
    color:indigo;
    font-size: small;
    max-width: max-content;
}
#boceto nav ul li a:hover {
    color:white;
    background-color: indigo;
}
/*----FOOTER-----*/
footer {
    font-size: small;
    padding: 1em;
}
/* -----FIN MOBILE FIRST ----*/
/* REGLAS PARA DISPOSITIVOS DE ESCRITORIO */
/* Escritorio pequeño / tablet */
@media screen and (min-width: 768px) {
header nav ul li {
    display: inline-flex;
}
header nav ul li a {
    padding: 0.5em 2em 0.5em 2em;
}
main, footer {
    margin: 0.5em 4em 1em 4em;
}
.titulos {
    font-size: large;
}
.datospersonales {
    flex-direction: row;    
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}
.datospersonales nav ul {
    display: inline-flex;
}
.datospersonales nav ul li a{
    margin-right: 1em;
}
#informacionpersonal nav ul li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#informacionpersonal nav ul li a {
    padding:0.5em;
}
#informacionpersonal figure img {
    max-width: 100%;
    height:auto;
    display: block;
}
#informacionpersonal figure {
    width: 20%;
    margin: 1em 1em 0 0;
}
#boceto figure {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}
#boceto figure img {
    margin-right: 1em;
}
#prototipo figure {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}
#prototipo figure img {
    max-width: 30%;
    margin-right: 1em;
}
#datosacademicos div {
    display: inline-block;
}
}
/* -----Fin de Escritorio pequeño/tablet ----*/
/* Escritorio grande */
@media screen and (min-width: 992px){
header nav ul li {
    margin:0.5em 1.2em;
    }
header nav ul li a{
    font-size: medium;
}
#sobremi {
    margin: 1em 0 0.5em 0;
}
#informacionpersonal figure {
    width: 20%;
    height:20%;
}
}
/* -----Fin de Escritorio grande ----*/
/* Escritorio extra grande */
@media screen and (min-width: 1200px) {
header nav ul li {
    margin:0.5em 1.4em;
    }
header nav ul li a {
    padding: 0.5em 4em 0.5em 4em;
}
#informacionpersonal figure {
    width: 15%;
}
#prototipo figure img {
    max-width: 20%;
}
.datosacademicos{
    flex-direction: row;
    justify-content: space-between;
}
}