@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700&display=swap');


*{padding:0; margin:0; box-sizing: border-box;transition: 0.5s all;}

body{font-family: 'Nunito Sans', sans-serif;} 

header {color: #ffffff; background-color:#2d3871; padding: 1rem; text-align: center}


main section article { padding: 1rem;}

.inicio {}
.columna-1 {background-color:#6C63FF; width: 100%; padding: 1rem; text-align: center} 
.columna-2 {background-color:#bbb3ff; width: 100%; padding: 1rem; text-align: center}
.columna-2 h3 {font-weight: 700;}
.columna-3 {background-color:#6C63FF; width: 100%; padding: 1rem; text-align: center}
.columna-3 h3 {font-weight: 700;}
.columna-1 h2 {font-family: 'Nunito Sans', sans-serif; font-weight: 700;}
.columna-1 h3 {font-weight: 700;}

.foto {background: #827ac7; text-align: center} 
.foto img {border-radius: 10rem; max-height: 7rem}

footer {color: #e6e6e6; font-weight: 300; font-size: 0,2rem; background: #2d3871; padding: 1rem; font-family: 'Nunito Sans', sans-serif; text-align: center}

ul {list-style-type: none;}


nav {background:#2d3871; padding: 0.5rem; text-align: center; }
.navindex {background:#2d3871; }
nav ul li {display: inline-block;} 
nav ul li {text-decoration: none; padding: 1rem;}
nav ul li a {color: #ffffff; font-weight: 700; text-decoration: none}
.link-activo {background:#2d3871; text-align: center} 

.mapa {max-width: 100%; background:#827ac7; }
imgmapa {max-width: 100&; background: #827ac7; }  


.plan {background: #827ac7; padding: 2rem; text-align: center}

/* cuando es mayor a 768px */
@media screen and (min-width:48rem) {
    
    nav {background: #2d1da7; text-align: center; text-decoration: none}
    
.inicio {display: flex; }
.columna-1 {background-color:#6457d4; width: 33,3%; text-align: left } 
    .columna-1 h2 {color: #ffffff }
    .columna-1 h3 {color: #ffffff }
.columna-2 {background-color:#827ac7; width: 33,3%; text-align: left }
    .columna-2 h3 {color: #ffffff}
.columna-3 {background-color:#6457d4; width: 33,3%; text-align: left }
    .columna-3 h3 {color: #ffffff}
.plan {background: #827ac7; padding: 2rem; text-align: center}
    .plan h3 {font-family: 'Nunito Sans', sans-serif; font-weight: 700;}
    .plan h4 {font-weight: 400;}
    
    
.mapa {max-width: 100%; background:#827ac7; }
.mapa img {max-width: 100%; }
    .mapa h3 {background: #827ac7; padding: 2rem; text-align: center}
    .imgmapa {max-width: 100&; background: #827ac7; }    
    .navegacion {text-align: center}    
    
.foto img {border-radius: 10rem; max-height: 7rem}