@charset "utf-8";

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


body {
    font-family: "Lato", arial, helvetica, sans-serif;
    background-color: #FDFCEA;
    
    min-height: 100vh;
    /* correccion paraq chrome en cel */
    min-height: -webkit-fill-available;

    /* caja flexible*/
    display: flex;

    /* dirección de sus elementos */
    flex-direction: column;
    
    /* organización de los elementos según ele eje principal
        (vertical por la propiedad anterior) */
    justify-content: space-between;
}


html {
    /* correccion paraq chrome en cel */
    height: -webkit-fill-available;
}

img {
    /* para que una imagen nunca sea mayor
        que la caja que las contiene */
    max-width: 100%;
    height: auto;
}

ul {
    list-style: none;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0.5em;
}

header,
footer {
    background-color: #51702A;
    padding: .5em;
    flex-grow: 0;
}

/* íconos */

.material-icons {
    padding-right: .25em;
}

.contenedora {
    margin: 0 auto;
    max-width: 50rem;
}

/* íconos */

.material-icons {
    padding-right: .25em;
}



/* contenedor centrado y con ancho máximo */
.contenedor {
    max-width: 50rem;
    margin: 0 auto;
    padding: 1em;
}
/*
----------------
encabezado
----------------
*/

header .contenedor {
    
    /* caja flexible */
    display: flex;
    
    /* elementos colocados en los extremos del eje principal */
    justify-content: space-around;
    
    /* elementos centrados en el eje secundario */
    align-items: center;
}

#logo {
    display: block;
    width: 2em;
    margin-right: 2em;
}
#cauce {
    font-family:"Lato";
    color:white;
    width: 80%;
    font-size: 1.8em;
}



/* *** menu *** */

header nav {
    color: white;
}

header nav a {
    color: rgba(255,255,255,.75);
    padding: .5em 1em;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

header nav a:hover {
    background-color: rgba(0,0,0,0.5);
    color: white;
}

/* boton que llama al menu */
#llamamenu {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    height: 2.5em;
    width: 2.5em;
    /* caja flexible */
    display: flex;
    position: relative;
    z-index: 9999;
}

#llamamenu:hover {
    background-color: rgba(0, 0, 0, 0.75);
}

#llamamenu i { 
    padding: 0;
    /* centrado en la horizontal y en la vertical */
    margin: auto;
}


/* el menú propiamente dicho */
header nav ul {
    background-color: rgba(0,0,0,0.5);
    /* el menu sale del flujo de informaciones
    y se oculta a la derecha */
    position: fixed;
    left: 100%;
    top: 0;
    height: 50vh;
    width: 50%;
    z-index: 9990;
    padding-top: 5em;
    transition: all .5s ease;
}

.visible {
    /* el menú se muestra
    corriéndose a la izquierda */
    left: 50%;
    transition: all .25s ease;
}
/*
cuando la ventana del navegador mida
como mínimo 560px de ancho
*/
@media (min-width: 35em) {
    
    #llamamenu {
        display: none;
    }
    
    /* se muestran el menu horizontal */
    
    header .contenedor {
        display: flex;
        margin:
        
    }
    header nav ul {
        display: flex;
        flex-wrap: wrap;
        flex-flow: row;
        
        
        /* para que el menú vuelva al "fondo" */
        position: relative;
        top: auto;
        left: auto;
        height: auto;
        width: 100%;
        padding-top: 0;
    }
    
    header nav ul.visible {
        left: auto;
    }

}

main .contenedora{
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    margin: 0 auto;
    max-width: 50rem;
    padding-top: 9em;
    padding-left: 2em;
    padding-bottom: 2em;
    background-image: url(../imagenes/involucrate.jpg);
    background-size: cover;
    }
main .contenedora .sitio{
     color: white;
    text-decoration: none;
    font-weight: 800;
    font-size:2.5em;
}
main .contenedora .ase{
    color: white;
    }
main .objetivos {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    margin: 0 auto;
    padding:2em;
    padding-top: 3em;
    max-width: 50rem;
    
}
main .objetivos h2{
    font-size: 2em;
    font-weight: 800;
    color: #51702A;
    text-align: center;
}
main .objetivos p{
    font-size: 1.3em;
}
    
main .caja {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    background color: white;
    margin: 0 auto;
    padding-top:4em;
    padding-bottom: 4em;
    padding-right: 2em;
    padding-left: 2em;
     max-width: 50rem;
    font-weight: 600;
    font-size:1em;
    color: #51702A;
    
}

.boton { 
    
    padding: 0.8em;
    margin: 1em;
    background-color: #51702A;
    border-radius: 0.1em;
    transition: all .2s ease-in
}
.boton a{
    text-decoration: none;
    color: white;
    font-size: 1.5em;
    font-weight: 500;
}

footer .contenedora{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.6em;
    
}
footer .contenedora img{
    width: 2em;
}