@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;500;700&display=swap');
* { 
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: -webkit-fill-available;
}



body {
   background-color: snow;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   min-height: -webkit-fill-available;
   justify-content: space-between;

}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: black;
 
}

img {
    width: 100%;
    height: auto;
    
}

figure {
    margin: 0;
    padding: 0;
    max-width: 30em;
    
}

p {
    font-weight: 400 
}

/* celular */

header .isologos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    margin: .1em;
  

}

header {
    max-width: 100%;
}

#separadores2, #separadores {
    width: 8em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4em;
    margin-bottom: 4em;
}


.foto1 {
    width: 10em;
}

 .perfil {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    margin: 1em;
}

ul.menuprincipal li {
    display: flex;
    width: 10em;
    height: 3em;
    max-width: 20em;
    max-height: 6em;
    
}

ul.menuprincipal li a {
    width: 100%;
    height: 100%;
    font-size: 16px;
    background-color: darkturquoise;
    color: snow;
    display: flex;
    justify-content: center;
    align-items: center;
}

ul.menuprincipal {
    display: flex;
    justify-content: center;
    max-width: 50em;
    margin: 1em auto;
} 

ul.menuprincipal li a:hover {
    background-color: #f47c60;
}

ul.alumnas {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

ul.alumnas li a {
    display: flex;
    align-items: center;
    color: black;
    font-size: 0.8em;
    max-width: 13em;
    max-height: .5em;
    text-align: center;
    padding: 1.3em;
    border-bottom-color: #ff5200 ;
    border-bottom-style: solid;
    margin-left: .3em;
}


ul.alumnas li a:hover {
    background-color: #d6d6d6;
    
}

#museoparatodos p {
    font-size: 0.7em;
    color: #6c6c6c;
    font-weight: bold;
    text-align: inherit;
}

#museoparatodos img {
    width: 6em;
}

#museoparatodos {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    margin-top: 1.6em;
    margin-bottom: 1.6em;
}

ul.links, li a h3 {
    color: darkturquoise;
    font-size: 01.1em;
    text-align: center;
    padding: 1em;
    border: 0.1em solid darkturquoise;
    margin: 1em 5em;

}
ul.links, li a h3:hover {
    background-color: darkturquoise;
    color: #6c6c6c;
    
}

div.textoperfil h1 {
    color: #f47c60;
    margin-bottom: .5em;
    font-size: 27px;
    font-weight: 600;
    
}
.usuario {
    text-align: center;
    margin: 0 auto;
    display: flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;
}

.perfil > img {
    width: 7em; 
    box-shadow: 1px 3px 1px 2px darkturquoise;
    border-radius: 7em;
    margin: 1em;
}


div.textoperfil p {
    margin: 2px;
    font-size: 15px;
}

div.texto1> h4{
    text-align: center;
    background-color: darkturquoise;
    color: white;
    padding: 4px;
    box-shadow: -1px 6px 0px -1px #000000;
    margin: 0.6em;
    font-weight: 400;
}

.instagram, .facebook {
    width: 6%;
    padding: 0em;
   
}

div.texto1 h5 {
    color:#f47c60;
    margin: 0.9em;
    font-weight: 400;
}

div.texto1 p {
    text-align: center;
}


.presentacion {
    text-align: center;
    background-color: rgba(235, 235, 235, 0.45);
    border-radius: 1em;
    margin: 1em;
    padding: 1em;
}



div.texto2 p {
    color: grey;
    font-size: 0.7em;
    text-align: center;
}


.logos {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logos a img{
    width: 9em;
    margin: 1em;
    
}


div.verticalline {
    border-left: thick solid #ff5200;
    margin: 1em 1em 0 1em;
    box-shadow:  -4px 0px 0px -1px #000000;
    
}
.desarrollo {
    text-align: center;
    font-size: 0.7em;
    color: #ff5200;
    font-weight: bold;
}

#logomuseo figure{
    width: 20%;
    margin: auto;
}
    
h5 {
    text-align: center;
    margin: 1em;
    font-style: italic;
}

h2 {
    text-align: center;
    margin: auto;
    padding: 0.5em;
   
    
}

h3 {
    margin: .5em;
}

p, h4 {
    margin: 0.5em 0em 0.5em 1em;
   
}

.contenedor{
    background-color:#dedede;
    font-size: 10px;
    padding: 1em;
    margin: 0 auto;
}

#museo-titulo {
    padding: 5px;
    max-width: 10em;
    font-size: 20px;
    box-shadow: .3em .3em .0em 0em darkturquoise;
    border: solid 1px;   
   margin: 1em auto;
}

/* mapa */


.mapa p{
    font-size: 15px;
}


.mapa {
    margin: .4em 0.9em;
}
.rosa {
    color: #f47c60;

}

.rosa2 {
    color: #f47c60;
    font-size: 20px;
}


.turquesa {
    color: darkturquoise;
}

#informacion {
    font-size: 13.5px;
    margin-left: 30px;
    max-width: 440px;
}


.titulo-mapa{
    margin-top: 2em;
    margin-bottom: 0em;
    width: 175px;
    font-size: 20px;
    background-color: darkturquoise;
    color: snow;
    padding: 0.35em;
    text-align: center
}

.titulo-mapa2{
    margin: 2em 0 2.7em 2.2em;
    width: 175px;
    font-size: 20px;
    background-color: darkturquoise;
    color: snow;
    padding: 0.35em;
    text-align: center
}

.rosa-mapa {
    color: #ff5200;
    font-weight: 800;
    font-size: 1.3em;
}

.subsecciones {
    font-size: 21px;
    margin: 12px 0 0 80px;
}

  



/*plan*/




#enfoque a{
    color: #1A1A1A;
    margin-bottom: 14px;
}

#desarrollo {
    margin-left: 35px;
    margin-bottom: 20px;
}

#secciones {
    margin-left: 35px;
    margin-bottom: 14px;
   
}

#mvp {
    max-width: 500px;
    margin-left: 15px;
    width: 20em;
    margin-right: 15px;
}

.rosa-mapa {
    color: #ff5200;
    font-weight: bold;
}

#persona {
    max-width: 500px;
    margin-left: 15px;
    margin-right: 15px;
    width: 20em;
    
}

#mvp img, #persona img {
    display: inline-block;
    margin: 1em auto;
}

.mvp {
    margin-left: 10px;
}

.persona {
    margin-left: 10px;
}

#referentes {
    padding-top: 20px;
}

.referentes {
    margin: 0 auto;
}

#logoacumar {
    max-width: 170px;
    padding-left: 25px;
}

#museo-comunitario {
    max-width: 200px;
    padding-left: 15px;
}

#logoacumar, #museo-comunitario {
    display: inline-block;
    vertical-align: middle;
}

#propuesta-logo  {
    max-width: 250px;
    text-align: center;
    margin: 0em auto;
}

.propuesta-logo #enfoque, #enfoque2{
    text-align: center;
}

#enfoque2 {

    box-shadow: .4em .5em 0em 0em rgba(255, 82, 0, 0.7);
    border: 1px solid black;
   width: 15em;
    padding: .5em;
    margin: 1em auto;
}


#lineas-negras{
    border: 2px solid black;
    width: 50px;
    height: 240px;
    border-left: 0px;
    position: absolute;
    margin-left: 3px;
}
#triangulo {
    height: 0;
    width: 0;
    border-right: 10px solid black;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    position: absolute;
    margin-left: 0px;
    margin-top: 233px;
}

#lineas-negras2{
    border: 2px solid black;
    width: 50px;
    height: 73px;
    border-left: 0px;
    position: absolute;
    margin-left: 3px;
}

#triangulo2 {
    height: 0;
    width: 0;
    border-right: 10px solid black;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    position: absolute;
    margin-left: 0px;
    margin-top: 66px;
}

.flecha {
    position: absolute;
    margin-left: 365px;
    margin-top: 166px; 
}

.flecha2 {
    position: absolute;
    margin-left: 275px;
    margin-top: 75px; 
}

#flecha-arriba {
    width: 55px;
    position: fixed;
    z-index: 9999;
    right: 1.5em;
    bottom: 7em;
}

@media screen and (min-width: 892px) {
    
    
    body {
   background-color: snow;
   display: flex;
   min-height: 200vh;
   min-height: -webkit-fill-available;
   justify-content: space-between;

}
   header {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        margin: 0 .8em;
        padding-right: 1em;
    }
    
    header .isologos {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: .8em;
    
    }
    
    main {
        margin: 1em 1em;
    }
    
    section.usuario {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    } 
    
    
    
   div.verticalline {
      margin-left: 5em;
    }
    
    p {
        text-align: left;
        
    }
    
    .links ul li{
        margin: 2em 1em;
        
    }
    
    .links ul {
        display: flex;
        justify-content: center;
    }
    
    .presentacion {
    text-align: center;
    background-color: snow;
    border-radius: 1em;
    margin: 1em;
    padding: 1em;
   
}
    .museo {
        margin: .5em;
        max-width: 150vh;
    }
    
    .bloque1{
        max-width: auto; 
        border-width: 2px;
        border-style: double;
        border-color:#ff5200;
        margin-left: .8em;
        margin-top: 1em;
    }
    
    .subbloque1 {
        display: flex;
        justify-content: space-around;
        align-items: center;
        
    }
    
    #logomuseo figure img {
        width: 15em;
    }
    
    #museoparatodos {
        text-align: justify;
    }
    
    .subtextoperfil {
        text-align: center;
        font-weight: 300;
        background-color: #d9d9d9;
    }
    
    .redes {
        display:flex;
        margin-top: 1em;
    }
    
    .instagram, .facebook {
    width: 7%;
    margin: .4em;
    padding: 0em;
   
}

   
    
    .perfil .foto {
        margin-bottom: 2em;
        width: 11em;
    }
    
    .logos {
        justify-content: center;
    }
    
 /*mapa*/
    .mapa p{
    font-size: 17px;
    
}
    .mapa1 {
     display: flex;
        margin: 2em;
    }
    .informacionacademica1, .informacionacademica2 {
        margin-left: 2em;
        margin-top: 1em;
    }
    
    .informacionacademica1 {
        border-width: 1px 0px 0px 1px;
        border-style: solid;
    }
    
    .informacionacademica2 {
        border-width: 0px 1px 1px 0px;
        border-style: solid;
    }
    
    .mapa {
    display:flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
}

    .mapa> nav ul.alumnas {
    display: flex;
    justify-content: flex-end;
    flex-direction: ;
    align-items: center;
} 
    .propuestas, .referentes{
        text-align: center;
    }
    
    #propuesta {
        margin: 1em;
        font-size: 25px;
        font-weight: 300px; 
        text-align: center;
    }
    
    .propuesta-logo {
        padding: 1em;
        border-width: 1px 0px 0px 1px;
        border-style: solid;
        border-color: darkturquoise;
    }
    
    .mlinks {
        padding: 1em; 
        border-width: 0px 1px 1px 0px;
        border-style: solid;
        border-color: darkturquoise;
    }
    
    .propuestas {
        display: flex;
        justify-content: center;
        margin-top: 3em;
    }
    
    #enfoque>a:hover {
        color: #6c6c6c;
    }
    
    .referentes figure {
        margin: 0 auto;
        max-width: 60%;
    }
    
    #separador1, #separador2 {
        display: flex;
        justify-content: center;
    }
    
    .mpvmodelo {
        display: flex;
        justify-content: center;
    }
    
    .mpvmodelo #mvp, #persona {
        width: 50%;
    }
    
    .enfysecc {
        display:flex;
        justify-content: center;
        margin: 1em 5em;
    }
    
    .enfoque1 h3, .secciones1 h3, .mapa1 h3 {
        font-size: 30px;
    }
    
    .mapa>h3 {
        margin-left: 2em;
    }
    
    .enfoque1, .secciones1 {
        margin: 0 1em;
        max-width: 35em;
        padding: .9em;
    }
    
    .enfoque1 {
        border-width: 1px 0 0 1px;
        border-style: solid;
        border-color: darkturquoise;
        
    }
    
    .secciones1{ 
        border-width: 0 1px 1px 0;
        border-style: solid;
        border-color:#ff5200;
    }
    
    #desarrollo {
        margin-right: 4em;
    }
    
    #enfoque {
        font-size: 24px;
       
    }
    
    #enfoque2 {
        font-size: 30px;
    }
    
    .propuestas1 {
        display: flex;
        justify-content: center;
    }
    
    .mapalinks {
        display: flex;
        justify-content: center;
        margin-top: 5em;
    }
    
    #museo-titulo {
    padding: 15px;
    max-width: 15em;
    font-size: 40px;
   box-shadow: .3em .3em .0em 0em darkturquoise;
    border: solid 1px;   
   margin: 1em auto;
}
    figcaption {
        margin: 1em auto;
    }
    
    #mvp, #persona {
        width: 50em;
    }

}