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

.plantilla{
    width: 98%;
    max-width: 1500px;
    margin: auto;
    display: grid;
    grid-gap:5px;
    grid-template-columns: 100%;
    grid-template-rows: 400px 50px 350px 2700px 1fr auto;    
    grid-template-areas: "cab"
                        "post_head"
                        "consentidas"
                        "principal"
                        "medio_inf"
                        "politicas"
                        "xestado"
                        "pre_ft"
                        "pie_pag"; 
}

.cab{
    grid-template-columns: 250px auto;
    grid-template-rows: 55px 1fr;
    grid-template-areas: "slogan slogan"
                         "col1_hd col2_hd";
} 

    .col2_hd{
        grid-template-columns: 1fr;
        grid-template-rows: 40px 320px 40px;
        grid-template-areas: "mn_sp"
                             "rw2_col2"
                             "rw3_col2";
    }

.post_head{
    grid-template-columns: 65% 30%;
    grid-template-rows: 100%;
    grid-template-areas: "navegacion busqueda";
}

.consentidas{
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 30px auto;
    grid-template-areas: "tit_con  tit_con  tit_con  tit_con"
                         "con1     con2     con3     con4";
    
}

.principal{
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: auto;
    column-gap: 5px;
    grid-template-areas: 
                        "col_izq col_centro col_der promos_der";
}

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



.pie_pag {
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 1fr;
    grid-template-areas: "col1_ft col2_ft col3_ft col4_ft";
}


@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: 400px 910px 2100px auto 1fr auto;    
    grid-template-areas: "cab"
                         "post_head"
                         "principal"
                         "cols"
                         "pre_foot"
                         "pie_pag"; 
}

.cab{
    grid-template-columns: auto;
    grid-template-rows: 25px 230px 95px 30px;
    grid-template-areas: "slogan"
                         "imgs_cab"
                         "contacto"
                         "mn_sup";
} 

main{
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: auto;
}

.central{
    display: grid;
    grid-template-columns:auto ;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 
                        "tarje"
                        "tarje"
                        "tarje"
                        "tarje"
                        "tarje" 
                        "tarje";
}

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

.cols_central{
    display:flex;
    flex-direction: column;
    grid-template-columns: 100%;
    flex-wrap: wrap;
    height: auto;
}

.cols{
    column-gap: 2em;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "col"
                         "col"
                         "col";
}
.col{
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: auto;
}

.pie_pag {
    grid-template-columns: auto;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "col1_ft"
                          "col2_ft"
                          "col3_ft"
                          "col4_ft";
}

   
}