@import url('https://fonts.googleapis.com/css?family=Montserrat:600,700|Roboto:700&display=swap');

*{ padding: 0; margin: 0; box-sizing: border-box;}


/* Version Celular */

.ppal{ max-width: 1280px; margin: auto;}

/* VN27, PLAN, MAPA, TP*/
nav{width: 100%; height: 5rem; background: #FFDDD2; display: block;padding: 1rem}
ul {display: block;}
li{display: inline-block;}
li a {color: #FFFFFF; text-decoration: none; font-size: 1.2rem; margin: 0rem 2rem 0rem 2rem;font-family:'Roboto', sans-serif;}

/*Datos académicos*/
 h4 {text-align: center;margin: 3rem 0rem 1rem 0rem; color: #FFFFFF;background: #000000}

/*Logo*/

.logo {padding: 10rem 0rem 0rem 0rem; height: 29rem}


/*Texto del Slogan*/
h1 {color: #FF2400; font-family: 'Montserrat', sans-serif; font-size: 1.5rem; height:22rem ;}


section{display: flex; flex-wrap: wrap;}

section article{width: 100%; text-align: center;}
.titulosmapa {color:#FF2400;font-family: 'Montserrat', sans-serif}


/*Imagen IPhone*/
.imagen{background: #FFDDD2;height: 56rem;padding: 9rem 0rem 0rem 0rem;}

/*Texto explicativo*/
.texto{background: white; height: 56rem; font-size: 1.2rem; text-align: justify}
.texto p {color: #000000;padding: 15rem 5rem 8rem 5rem; font-family: 'Montserrat', sans-serif; text-align: justify }

/*Botones de descarga*/

.texto img {padding: 0rem 0rem 0rem 2rem}


footer{ width: 100%; height: 7rem; background: white;font-family: 'Noto Sans HK', sans-serif; text-align: justify}
footer p {color: #000000; padding: 1rem; font-size: 0.9rem}

/* Para versiones desktop */
@media screen and (min-width:768px){
    .imagen {width: 50%; text-align:right;}
    .texto { width: 50%; height: 40rem; text-align: left; background:#FFDDD2;}
    body {background:#FFDDD2; }
    .texto p {background:#FFDDD2; text-align: justify}
    .slogan {height: 3rem; padding: 1rem}
    .logo {padding: 4rem; height: 20rem}
    li {padding: 0rem 4rem 0rem 4rem}
    .texto img {padding:0rem 0rem 0rem 5rem }
    footer {height: 4rem; margin-bottom: 1rem;}
    header {display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	align-content: center;}
    nav {text-align: center; padding: 2rem;}
    nav ul li a:hover{background-color: white; padding: 0.8rem; border-radius: 10%; color: #FFDDD2;}
}