.contenedor{
    /*medidas para los tipos de pantalla https://desarrolloweb.com/articulos/medidas-estandar-pantallas-media-queries.html */
width:100%; /*ocupar 100 del ancho de la pantalla*/
max-width:1920px; /*para que si la pantalla es mas grande de eso aun asi no se haga mas grande, almenos al inicio, despues de puede modificar en el responsive abajo que si es mas grande cambie el tamaño*/
    min-width: 300px;
margin:0px auto; /*No poner espacios entre las orillas y los margenes del navegador*/
display: grid;
grid-gap: 10px; /*separacion entre areas*/
grid-template-columns:repeat(1,1fr); /*columnas en las que estamos repartiendo la ventana*/
grid-template-rows: repeat(3,auto); /*5 filas se reparte*/
   
	  overflow: hidden;
	
    
    
    /*header ocupara 3 columnas de las 3 que especificamos arriba*/
    
    
    /*IMPORTANTE: AQUI SE DEFINE TODA LA DISTRIBUCION DE LA PAGINA INDEX*/
    /*asignamos areas como son 3 columnas en cada renglon podemos especificar para que seran, y hacia abajo las 4 filas que indicamos arriba (rows 4)*/
    grid-template-areas: "header"
                        "contenidolegal"
                        "footer";
        
}


.contenedor >div,
.contenedor .header,
.contenedor .navmenuoculto,
.contenedor .contenidolegal,
.contenedor .footer{
    background: ;
    padding: 20px;
    border-radius: 4px;
}

/* 
propiedades del header; color de letra blanco, inicia en la columna 1 y -1 end para que abarque todo el espaci disponible
arriba en grid template rows se indica que  seran 4 las filas y en columns 3, cuando se especifica abajo column star es en cual iniciara y en cual terminara
*/
.contenedor .header{
    text-align: center;
    background:black;
    color: #ffff;
  grid-area: header; /*llamamos lo que indicamos en el .contenedor */
    
   
    display: flex;
    align-items:flex-end;
   justify-content:space-between;
 
}



.contenedor .contenidolegal{
    background: #F3F3F3;
    grid-area: contenidolegal; /*llamamos contenido que ocupa 2 columnas */
    text-align: center;
    
}



.contenedor .footer{
    background: black;
    color: aliceblue;
    grid-area: footer;
    
     text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    
    
}

.contenido img{
   
    display: block;
    margin: auto;


}

.header img{
    vertical-align:middle;
}


/*cuando la pantalla tenga un maximo de 800, osea de 800 para abajo de anchura @media screen and (max-width: 800px){*/
@media screen and (max-width: 950px) and (min-width: 601px){
    
    .contenedor{
        background: white;
        grid-gap:5px; /*separacion entre areas*/
grid-template-columns:repeat(2,1fr); /*columnas en las que estamos repartiendo la ventana*/
grid-template-rows: repeat(10,auto); /*5 filas se reparte*/
   
        
        
          grid-template-areas: "header header"
                        "contenidolegal contenidolegal"
                        "footer footer";
        
    }
    
.menu-toogle::before {
    display: block;/*activas el menu oculto*/
    }
    
    .contenedor .header{
        width:100%;
        margin: 0px;
        grid-area: header;
    }
    
    .contenedor .contenidolegal{
        width: 100%;
        margin: 0px;
        grid-area: contenidolegal;
    }
    
   .contenedor img{
   
    display: block;
    margin: auto;


}

    .iconoheader img{
        vertical-align:middle;
    }
    
    .contenedor .footer{
        width: 100%;
        margin: 0px;
        grid-area: footer;
    }
    
    
    .menumovil{
        grid-area: menumovil;
    }
      
     /*cuando se haga muy chica no vas a mostrar este menu, mostraras el que esta adaptado al tamaño */
        .navmenu li a {
                        display:none;
       
                        }
    
    
    
    .menumovil{
        grid-area: menumovil;
        background: white;
    }

}





/*para mi cel*/
@media screen and (max-width: 600px) and (min-width: 300px){
    
    .contenedor{
        background:white;
        grid-gap:5px; /*separacion entre areas*/
grid-template-columns:repeat(2,1fr); /*columnas en las que estamos repartiendo la ventana*/
grid-template-rows: repeat(9,auto); /*5 filas se reparte*/
   
        
        
          grid-template-areas: "header header"
                        "menumovil menumovil"
                        "contenidolegal contenidolegal"
                        "footer footer";
        
    }
    .menu-toogle::before {
    display: block;/*activas el menu oculto*/
    }

    .contenedor .header{
        width:100%;
        margin: 0px;
        grid-area: header;
        display:grid;
        text-align: center;
    }
    
    .contenedor .contenidolegal{
        width: 90%;
        margin: 0px;
        grid-area: contenidolegal;
    }
   
    
   .contenedor img{
   
    display: block;
    margin: auto;


}

    
   
    .contenedor .footer{
        width: 100%;
        margin: 0px;
        grid-area: footer;
    }
    
    
    .imagenpie{
        width: 30%;
        margin: 0px;
    }
    
    .imagenpierosa{
        width:20%;
        margin: 0;
    }
    
  
    .menumovil{
        grid-area: menumovil;
    }
      
     /*cuando se haga muy chica no vas a mostrar este menu, mostraras el que esta adaptado al tamaño */
        .navmenu li a {
                        display:none;
       
                        }
    
    
    
    .menumovil{
        grid-area: menumovil;
        background: white;
    }
    
   
}