#principal{
    width: 100%; /* Dynamic ViewPort Width */    
}
#content{
    display: flex;
    flex-wrap: wrap;    
    width: 100%;    
    align-content: center;
    align-items: center;
    background-color: var(--azul-oscuro);
}
#conIzq{    
    width: 66%;
    padding: 2%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;    
}
#conDer{    
    width: 26%;
    padding: 0 2%;     
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}
#face{    
    height: 760px;
    width: 98%;
    padding: 10px 1%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    margin: 0 auto;    
}
#otroFace{
    display: none;
}
#conoSomos{
    width: 100%;
    margin-bottom: 5px;
}
#conoSomos h1{
    font-size: 1.4em;
    color: var(--boton-socios);
    margin: 5px 0;
}
#conoSomos p{
    font-size: 1.2em;
    color: white;
    margin: 5px 0;
}
#conoSomos a{
    font-size: 1.4em;
    color: white;
    background-color: var(--boton-socios);
    text-decoration: none;
    padding: 10px;
    margin: 20px 0;
}

#patrocina{
    width: 100%;
    padding: 2%;
    color: white;
}
#patrocina img{
    width: 8%;
    margin: 1%;
    border-radius: 10px;
}
#patrocina h2{
    text-align: center;
    font-size: 1.2em;
}
@media screen and (max-width: 849px) {
    #conIzq{ width: 100dvw; height: 72dvh; margin: 0;}
    #conDer{ width: 100dvw; height: 20dvh; margin: 0; }
    #patrocina img{
        width: 8%;
        margin: 1%;
        border-radius: 10px;
    }
    #face{ display: none;}
    #otroFace{
        display: block;
        margin: 0 auto;
    }
}
@media screen and (max-width: 390px) {
    #conIzq{ width: 100dvw; height: 62dvh; margin: 0;}
    #conDer{ width: 100dvw; height: 20dvh; margin: 0; }
    #patrocina img{
        width: 16%;
        margin: 1%;
        border-radius: 10px;
    }
}