@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  cel3  cel3"
                             "cel4  cel4  cel4  cel4"
                             "cel5  cel5  cel5  cel5"
                             "cel6  cel6  cel6  cel6"
                             "cel7  cel7  cel7  cel7"
                             "cel8  cel8  cel8  cel9"
                             "cel10 cel10 cel10 cel10"
                             "cel11 cel11 cel11 cel11"
                             "cel12 cel12 cel12 cel12"
                             "cel13 cel13 cel13 cel13"
                             "cel14 cel14 cel14 cel14";
    }

    .cel1{
        display: grid;
        column-gap: 5px;
        grid-template-columns: 50% 50%;
        grid-template-rows: 5em 62em;
        grid-template-areas: "f1cel1  p1cel1"
                             "f1cel1  p2cel1";                            
    }

    .cel5{
        display: grid;
        column-gap: 5px;
        grid-template-columns: 55%  45%;
        grid-template-rows: 3em 25em;
        grid-template-areas: "p1cel5 fcel5"
                             "p2cel5 f1cel5";
    }

    .cel6{
        display: grid;
        column-gap: 5px;
        grid-template-columns: 45% 55%;
        grid-template-rows: 3em 25em;
        grid-template-areas: "f1cel6 p1cel6"
                             "f1cel6 p2cel6";
    }

    .cel11{
        display: grid;
        column-gap: 5px;
        grid-template-columns: 45% 55%;
        grid-template-rows: 3em 25em 3em 19em 3em 18em 5em 50em;
        grid-template-areas: "f1cel11 p1cel11"
                             "f1cel11 p2cel11"
                             "p3cel11 f2cel11"
                             "p4cel11 f2cel11"
                             "f3cel11 p5cel11"  
                             "f3cel11 p6cel11"
                             "p7cel11 f4cel11"
                             "p8cel11 f4cel11";
    }

    .cel13{
        display: grid;
        column-gap: .5em;
        grid-template-columns: 50% 45%;
        grid-template-rows: 5em 19em 3em 22em 3em 25em 5em 3em 19em 3em 22em 3em 22em 3em 25em 10em;
        grid-template-areas: "p1cel13  f1cel13"
                             "p2cel13  f1cel13"
                             "f2cel13  p3cel13"
                             "f2cel13  p4cel13"
                             "p5cel13  p5cel13"
                             "f3cel13  f3cel13"
                             "p6cel13  p6cel13"
                             "p7cel13  f4cel13"
                             "p8cel13  f4cel13"
                             "f5cel13  p9cel13"
                             "f5cel13  p10cel13"
                             "p11cel13 f6cel13"
                             "p12cel13 f6cel13"
                             "p13cel13 p13cel13"
                             "f7cel13  f7cel13"
                             "p14cel13 p14cel13" ;
    }


.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";
}