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

.plantilla{
    width: 100%;
    max-width: 1500px;
    margin: auto;
    display: grid;
    grid-gap:5px;
    grid-template-columns: 1fr;
    grid-template-rows: 20em 10em auto 5em auto;    
    grid-template-areas: "cab"
                         "post_head"
                         "pri_mera"
                         "pre_ft"
                         "pie_pag"; 
}

.cab {
	display: grid;
    grid-gap:5px;
    grid-template-columns: 1fr;
    grid-template-rows: 15em 2em;    
    grid-template-areas: "imgs_cab"
                         "mn_sp";
}

    .imgs_cab{
        display: grid;
        grid-gap:5px;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 10em 2em;    
        grid-template-areas: "logo       img_prin"
                            "slogan_cab img_prin";
    }

.pri_mera {
    grid-template-columns: 70% 30%;
    grid-template-rows: 1fr;    
    column-gap: 1em;
    grid-template-areas: "centro col_izq";
}

    .centro{
        display: grid;
        grid-gap:2em;
        grid-template-columns:  auto;
        grid-template-rows: 4em 120em 15em 22em 15em auto;    
        grid-template-areas: "titular"
                             "valores"
                             "mision" 
                             "vision"
                             "direccion"
                             "objetivos";
    }

    .valores{
        grid-gap: .5em;
        grid-template-columns: 35% auto;
        grid-template-rows: 110em;    
        grid-template-areas: "id_valores items_val";
    }

    .items_val{
        grid-template-columns: auto;
        grid-template-rows: 2em 11em 2em 13em 2em 7em 2em 7em 2em 13em 2em 12em 2em 13em 2em 13em 2em 12em;    
        grid-template-areas: "val1 "
                             "def_val1"
                             "val2"
                             "def_val2"
                             "val3"
                             "def_val3"
                             "val4"
                             "def_val4"
                             "val5"
                             "def_val5"
                             "val6"
                             "def_val6"
                             "val7"
                             "def_val7"
                             "val8"
                             "def_val8"
                             "val9"
                             "def_val9";
    }
    
    .mision{
        display: grid;
        grid-gap:1em;
        grid-template-columns: 40% 60%;
        grid-template-rows: 1fr;    
        grid-template-areas: "id_mision  descri_mision";
    }

    .vision{
        display: grid;
        grid-gap:1em;
        grid-template-columns: 40% 60%;
        grid-template-rows: 1fr;    
        grid-template-areas: "id_vision  descri_vision";
    }

    .direccion{
        display: grid;
        grid-gap:1em;
        grid-template-columns: 40% 60%;
        grid-template-rows: 1fr;    
        grid-template-areas: "id_direccion  descri_direccion";
    }

    .objetivos{
        display: grid;
        grid-gap:1em;
        grid-template-columns: 40% 60%;
        grid-template-rows: 1fr;    
        grid-template-areas: "id_objetivos  descri_objetivos";
    }

.pie_pag{
	display: grid;
    grid-gap:2em;
    grid-template-columns: 25% 25% 25% auto;
    grid-template-rows: 1fr;    
    grid-template-areas: "col1_ft col2_ft col3_ft col4_ft";

}