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

.plantilla{
    width: 95%;
    max-width: 1500px;
    margin: auto;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: 25em 7em 5em auto 25em 25em 15em;
    grid-template-areas: 
		"cab        "
        "post_head  "
        "pre_central"
        "principal  "
        "tipo_even  "
        "pre_ft     "
        "pie_pag    "; 
}

.cab{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 3em 17em 5em;
    grid-template-areas: "cintillo"                         
                         "img_cab"
                         "mn_prin";
} 

.principal{
    display: grid;
    grid-template-columns: 75% 23%;
    grid-template-rows: 100%;
    grid-template-areas: "eventos col_der";
}

.post_prin{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 20em;
    grid-template-areas: 
                    "ppcol_izq ppcol_der"
}
  
.pie_pag {
    grid-template-columns: 25% 30% 25% 20%;
    grid-template-rows: 100%;
    grid-template-areas: 
                "col_ft1 col_ft2 col_ft3 menu_inf"
}

@media only screen and (max-width: 500px) {
        
    .plantilla{
        font-size: 0.8em;
        width: 100%;
        max-width: 550px;
        margin: auto;
        display: grid;
        gap: 1px;
        grid-template-columns: 100%;
        grid-template-rows: 33em 8em 10em auto auto 1fr 1fr auto;
        grid-template-areas: 
            "cab" 
            "post_head"
            "pre_central"
            "principal"
            "post_prin"
            "pre_ft"
            "pie_pag"; 
    }

    .cab{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 3em 230px 15em;
        grid-template-areas: 
                            "cintillo"
                            "img_cab"
                            "mn_prin";
    } 

    .img_cab{
        width: 100%;
        max-height: 250px;
    }

    .principal{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto 1fr;
        grid-template-areas: "generos"
                             "col_der";
    }
    .col_der{
        font-size: 2.5em;
        width: 80%;
        margin: auto;
        align-items: center;
        justify-content: center;
    }

    .post_prin{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 15em 17em;
        grid-template-areas: "ppcol_izq"
                             "ppcol_der";
    }
   
    .pre_ft{
        grid-template-columns: 100%;
        row-gap: 1em;
        grid-template-rows: 5em 7em 7em 7em 10em;
        grid-template-areas: "pft-rowtit"
                            "pf-col1"
                            "pf-col2"  
                            "pf-col3"
                            "pf-col4"
                            "pf-fin";
    }

    .pie_pag {
        display:grid;
        grid-template-columns: 100%;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas: "col-ft1"
                             "col-ft2"
                             "col-ft3"
                             "mn_inf";
    }

}

@media screen and (max-width: 600px) {
	header .logotipo {
		margin-bottom: 10px;
		font-size: 1px;
	}

	header .contenedor {
		flex-direction: column;
		text-align: center;
	}
    header .idsite{
        font-size: 0.8em;
    }

	.principal {
		font-size: 5px;
	}

	.principal .descripcion {
		max-width: 100%;
	}
}