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

.plantilla{
    width: 95%;
    max-width: 1500px;
    margin: auto;
    display: grid;
    gap: 5px;

    grid-template-columns: 1fr;
    grid-template-rows: 28em 8em 8em 1fr 15em 25em 15em;
    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 16em 10em;
    grid-template-areas: "cintillo"                         
                         "img_cab"
                         "mn_prin";
} 

.principal{
    display: grid;
    grid-template-columns: 75% 25%;
    grid-template-rows: auto;
    grid-template-areas: "playlist col_der";
}

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

.pie_pag {
    grid-template-columns: 1fr 30% 20% 20%;
    grid-template-rows: 100%;
    gap: 10px;
    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 10em 10em auto 40em 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{
        font-size: 1em;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto 1fr;
        grid-template-areas: "playlist"
                             "col_der";
    }

    .col_der{
        font-size: 1.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%;
	}
}