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

.plantilla{
    width: 95%;
    height: auto;
    margin: auto;
    display: grid;
    grid-gap:8px;
    grid-template-columns: 100%;
    grid-template-rows: 1fr 35em auto 40em 25em 1fr;
    grid-template-areas: "cab"
                         "post_head"
                         "principal"
                         "grumus"
                         "pre_ft"
                         "pie_pag"; 
}

.cab{
    grid-template-columns: 50% 20% auto;
    grid-template-rows: auto auto;
    grid-template-areas: "id_site  id_site  logo"
                         "mn_prin mn_prin mn_prin";
} 

.post_head{
    grid-template-columns: 35% 30% 35%;
    column-gap:10px;
    grid-template-rows: 5em 22em 3em;
    grid-template-areas: "tit_ph     fig2_ph fig2_ph"
                         "fig1_ph   fig2_ph fig2_ph"
                         "nave      nave    nave";

}

.principal{
    grid-template-columns: 25% 75%;
    column-gap: 15px;
    grid-template-rows: auto;
    grid-template-areas: "col_izq col_central";
}

    .col_central{
        grid-template-columns: 25% 25% 25% 25%;
        column-gap: 10px; 
        grid-template-rows: repeat(11 1fr);
        grid-template-areas: "cel1  cel1  cel1  cel1"
                             "cel2  cel2  cel2  cel2"
                             "cel3  cel3  cel4  cel4"
                             "cel5  cel5  cel5  cel5"
                             "cel6  cel6  cel7  cel7"
                             "cel8  cel8  cel8  cel8"
                             "cel9  cel9  cel9  cel9"
                             "cel10 cel10 cel10 cel10"
                             "cel11 cel11 cel11 cel12"
                             "cel13 cel13 cel13 cel13"
                             "cel14 cel14 cel14 cel14";
    }

    .cel1{
        display: grid;
        column-gap: 5px;
        grid-template-columns: 50% 50%;
        grid-template-rows: 41em;
        grid-template-areas: "fcel1  p1cel1";
                            

    }

    .cel5{
        display: grid;
        column-gap: 5px;
        grid-template-columns: 55%  45%;
        grid-template-rows: 39em;
        grid-template-areas: "fcel5 pcel5";

    }

    .cel9{
        display: grid;
        column-gap: 5px;
        grid-template-columns: 55%  45%;
        grid-template-rows: 33em;
        grid-template-areas: "pcel9 fcel9";

    }

    .cel13{
        display: grid;
        column-gap: .5em;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: 3em 18em 20em 25em 10em 27em 40em 23em 23em;
        grid-template-areas: "titcel13 titcel13 titcel13 titcel13"
                             "f1cel13  f1cel13  p1cel13  p1cel13"
                             "p2cel13  p2cel13  f2cel13  f2cel13"
                             "f3cel13  f3cel13  p3cel13  p3cel13"
                             "p4cel13  p4cel13  p4cel13  p4cel13"
                             "f4cel13  f4cel13  f4cel13  f4cel13"
                             "p5cel13  f5cel13  f5cel13  f5cel13"
                             "f6cel13  f6cel13  p6cel13  p6cel13"
                             "p7cel13  p7cel13  p7cel13  p7cel13" ;

    }

.grumus{
    grid-template-columns: 31%, 31%, 31%;
    grid-template-rows: 5em, 15em 15em;
    column-gap: 15px;
    grid-template-areas: 
        "tit_rider tit_rider tit_rider"
        "elerid1   elerid2   elerid3"
        "elerid4   elerid5   elerid6";
}

.pre_ft{
    display: grid;
    column-gap: 5px;
    grid-template-columns: 45%  55%;
    grid-template-rows: 20em 3em;
    grid-template-areas: "fg1_pft fg2_pft"
                         "mn_sec mn_sec";
}

.pie_pag {
    display: grid;
    grid-template-columns: 25% 25% 25% auto;
    column-gap: 5px;
    grid-template-rows: auto;
    grid-template-areas: "col1_ft col2_ft col3_ft mn_inf";
}