@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: 1fr 1fr 1fr;
    grid-template-rows: 20% 10% 10% 20% 20% 10% 10%;
    grid-template-areas: 
		"cab        cab         cab"
        "post_head  post_head   post_head"
        "mn_prim    mn_prim     mn_prim"
        "central    central    col_der"
        "central    central    col_der"
        "pre_ft     pre_ft     pre_ft"
        "pie_pag    pie_pag    pie_pag"; 
}

.cab{
    display: grid;
    grid-template-columns: 25%  auto;
    grid-template-rows: 300px 1fr;
    grid-template-areas: "logo     slogan"
                         "top_menu  top_menu";
} 


.central{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 250px 400px 600px 300px;
    grid-template-areas: "presenta  presenta presenta"
    "tarjetas tarjetas tarjetas"
    "tarjetas tarjetas tarjetas"
    "banner_hr1 banner_hr1 banner_hr1";
}

.tarjetas{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 400px 400px;
}


.pie_pag {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "red_mne redes_soc menu_inf";
}
@media screen and (max-width:700px){
    .plantilla{
      grid-template-areas: 
		"cab       cab       cab"
        "post_head post_head post_head"
        "mn_prim   mn_prim    mn_prim"
        "central   central    central"
        "central   central    central"
        "col_der   col_der    col_der"
        "pre_ft    pre_ft     pre_ft"
        "pie_pag   pie_pag    pie_pag";  
}

.cab{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "logo"
                         "slogan"
                         "top_menu";
} 
.post_head{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 50% 50%;
    grid-template-areas: "bread"
                         "mn_principal"
        
    }

.central{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 450px 400px 600px 300px;
    grid-template-areas: "presenta"
    "tarjetas"
    "tarjetas"
    "banner_hr1";
}

.tarjetas{
    display: grid;
    grid-template-columns: 90%;
    grid-template-rows: 400px 400px;
}


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