.texto{width: calc(100% - 2em); padding: 1em;}
.texto h1{color: var(--azul)}

.miembros{width: calc(100%); display: flex; flex-wrap: wrap; justify-content: space-between;}
.miembro{width: calc(250px - 2em); padding: 1em; height: 385px;padding-bottom: 90px;}
.miembro *{cursor: pointer;}
.miembro a{position: relative;width: 100%; height: 100%;}
.miembro img{width: 100%; height: 100%;}
.miembro .caja_staff{position: absolute;
bottom: -75px;
left: 1em;
background: #222;
width: calc(100% - 2em);
margin: 0 auto;
min-height: 180px;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;}
.miembro:hover .caja_staff{background: var(--azul);}
.miembro .nombre{text-decoration: none;
font-size: 1.1em;
color: #FFF;
margin: 1em 0;
position: relative;
width: calc(100% - 2em);
text-align: center;
padding: 0 1em;
min-height: 75px;
display: flex;
justify-content: center;
align-items: center}

.miembro .nombre:after{content:""; width: 60%; height: 1px; background: #dddddd; position: absolute; bottom: -10px; left: 20%;}
.miembro .cargo{width: calc(100% - 2em);
    display: flex;
    justify-content: space-around;
    padding: 1em;
    text-align: center;
	color: #FFF}

@media (min-width:768px) and (max-width: 1024px){
	.miembro{width: calc(230px - 2em); height: 350px}
}

@media (max-width: 767px){
	.miembros{justify-content: center;}
	.miembro{width: calc(200px - 2em); height: 300px}
}