@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: 50em 1fr;
    grid-template-rows: 23em 2em 110em 40em 1fr 15em;
    grid-template-areas: "cab        cab"
                         "post_head  post_head"
                         "principal  col_der"
                         "promos_fin promos_fin"
                         "pre_ft     pre_ft"
                         "pie_pag    pie_pag"; 
}

.cab{
    display: grid;
    grid-template-columns: 25%  auto;
    grid-template-rows: 10em 3em 5em;
    grid-template-areas: "logo slogan"
                         "logo slogan"
                         "top_menu top_menu";
} 

.principal{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 40em 65em;
    grid-template-areas: "presenta"
                         "tarje";
}

    .tarje{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 350px 350px 350px;
    }

.promos_fin{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 10px;
    grid-template-rows: 38em;
}

.pie_pag {
    display:grid;
    grid-template-columns: 25% 1fr 25%;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "red_mne redes_soc menu_inf";
}


@media screen and (max-width: 480px){
    
    .plantilla{
        width: 100%;
        max-width: 500px;
        margin: auto;
        display: grid;
        grid-gap:5px;
        grid-template-columns: 1fr;
        grid-template-rows: 550px 80px auto auto 1fr auto;    
        grid-template-areas: "cab"
                            "post_head"
                            "principal"
                            "col_der"
                            "promos_fin"
                            "pre_ft"
                            "pie_pag"; 
    }
    
    .cab{
        grid-template-columns: auto;
        grid-template-rows: 180px 150px 100px;
        grid-template-areas: "logo"
                             "slogan"
                             "top_menu";
    } 

    .logo{
        margin: 10px auto;
    }

    .slogan{
        font-size: 1em;
        line-height: 1.2em;

    }

    .principal{
        display: grid;
        grid-template-columns:auto ;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas: 
                            "presenta"
                            "tarje"
                            "tarje"
                            "tarje";
        }
        
        .tarje{
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 380px;
        }
    
    .pie_pag {
        grid-template-columns: auto;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: "red_mne"
                              "redes_soc"
                              "menu_inf";
        }
    
        main{
            display:flex;
            flex-direction: column;
            flex-wrap: wrap;
            height: auto;
        }
         
    }
    
    @media (min-width: 3600px) {
        breakpoint{
        max-width: 100%;
        display: inline-block;
    }    
    
    @media (min-width: 420px) {
        breakpoint {
            max-width: 48%;
        }
    }

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