@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
}

.plantilla{
    width: 95%;
    max-width: 1500px;
    margin: auto;
    display: grid;
    grid-gap:5px;
    grid-template-columns: 100%;
    grid-template-rows: 25em 3em 1fr 35em 24rem;
    grid-template-areas: "cab"
                         "post_head"
                         "principal"
                         "promos_inf"
                         "pie_pag"; 
}

.cab{
    display: grid;
    grid-template-columns: 35%  65%;
    grid-template-rows: 4rem 16rem 2rem;
    grid-template-areas: "id_site    id_site"
                         "imgs_cab   imgs_cab"
                         "top_menu   top_menu";
} 

.principal{
    display: grid;
    column-gap: 1rem;
    grid-template-columns: 71% 27%;
    grid-template-rows: auto;
    grid-template-areas:"centro colder";
}

.pie_pag {
    display: grid;
    grid-template-columns: 30% 40% 30%;
    grid-template-rows: 16rem 6rem;
    grid-template-areas: "derechos redes_soc  bottom_menu"
                         "derechos lista_inf  lista_inf";
}

@media screen and (max-width: 480px){
    
    .plantilla{
        max-width: 450px;
        margin: auto;
        display: grid;
        grid-gap:5px;
        grid-template-columns: 1fr;
        grid-template-rows: 580px 100px auto 600px auto;    
        grid-template-areas: "cab"
                             "post_head"
                             "principal"
                             "promos_inf"
                             "pie_pag"; 
    }
    
    .cab{
        grid-template-columns: 450px;
        grid-template-rows: 80px 350px 200px;
        grid-template-areas: "id_site"
                             "imgs_cab"
                             "top_menu";
    }

    .id_site{
        text-align: center;
        font-size: .9em;
        max-width: 400px;
        margin-bottom: 5px;        
    }

    .imgs_cab{
        display: inline;
        grid-template-columns: 450px;
        grid-template-rows: 100px 270px;
        grid-template-areas: "logo"
                             "id_grupo";
    }

        .logo{
            width: auto;
            height: auto;
            max-width: 50%;
            margin-top: 5px;
            justify-content: center;
        }

        .id_grupo{
            max-width: 400px;
            margin-top: 5px;
        }

        .top_menu{
            width: 400px;
            margin-top: 15px;
            font-size: 1.2em;
            line-height: 1.2em;
        }

        .top_menu ul{
            height: 35px;
            list-style:none;
            padding: 1%;
            display: block;
        }

    .principal{
        grid-template-columns: 400px;
        grid-template-rows: 1fr auto;
        grid-template-areas: 
                            "centro"
                            "colder";
        }
    .centro{

    }
        .colder{
            max-width: 400px;
            height: auto;
        }

    .pie_pag {
        grid-template-columns: 400px;
        grid-template-rows: 1fr auto auto;
        grid-template-areas: "derechos"
                             "redes_soc"
                             "bottom_menu"
                             "lista_inf";
        }
    }

    @media (min-width: 3600px) {
        breakpoint{
        max-width: 100%;
        display: inline-block;
    }    
    

    @media (min-width: 760px) {
        breakpoint {
            max-width: 44%;
        }
    }