@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: 20em 5em auto auto 43em 55em 70em 10em 1fr;
    grid-template-areas: "cab"
                         "post_head"
                         "principal"
                         "servicios"
                         "playlist"
                         "trendy"
                         "musicales"
                         "pre_ft"
                         "pie_pag"; 
}

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

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

    .col_central{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 40em auto;
        grid-template-areas: "prin_sup"
                             "prin_inf";
    }


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

.trendy{
    display: grid;
    grid-template-columns: 40% 60%; 
    column-gap: 10px;
    grid-template-areas: "trend_izq trend_der";
}

.musicales{
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: 3em 27em 20em;
    column-gap: 5px;
    row-gap: 10px;
    grid-template-areas: "cbgrupos     cbgrupos"
                         "imgprin_grup imgprin_grup"
                         "grupos       promogrup";
}

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

@media only screen and (max-width: 500px) {
    .plantilla{
        font-size: 0.8em;
        width: 100%;
        max-width: 500px;
        margin: auto;
        display: grid;
        gap: 1px;
        grid-template-columns: 100%;
        grid-template-rows: 40em 7em 110em 255em 185em 150em 20em 45em;
        grid-template-areas: "cab"
                             "post_head"
                             "principal"
                             "servicios"
                             "trendy"
                             "musicales"
                             "pre_ft"
                             "pie_pag"; 
    }

    .cab{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 10em 15em 5em;
        grid-template-areas:"id_site"
                            "logo"
                            "mn_prin";
    } 

    .mn_prin ul{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        flex-wrap: wrap;
    }

    .post_head{
        width:100%;
        height: auto;
        margin-bottom: 1em;
    }

    .principal{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 105em 10em;
        grid-template-areas:"col_central"
                            "col_izq";
    } 

    .col_central{
        font-size: 2.0em;
        width: 100%;
        height: 100%;
    }

    .prin_inf{
        display: none;
    } 

    .col_izq{
        font-size: 2.5em;
    }
  
    .trendy{
        grid-template-columns: 100%;
        grid-template-rows: 40em 25em;
        grid-template-areas: "trend_izq"
                             "trend_der";
    }

   .card{
    width: auto;
    height: 265px;
   }

    .servicios{
        grid-template-columns: 100%;
        grid-template-rows: 6em 50em 50em 50em 50em 50em;
        grid-template-areas: "tit_rider"
                                "elerid1"
                                "elerid2"
                                "elerid3"
                                "elerid4"
                                "elerid5";
    }

        .tit_rider{
            width: 100%;
            height: 2.5em;
            margin-bottom: 2em;
        }

    .musicales{
        grid-template-columns: 100%;
        grid-template-rows: 6em 25em 70em 50em;
        grid-template-areas: "cbgrupos"
                             "imgprin_grup"
                             "grupos"
                             "promogrup";
        }

        .cbgrupos{
            font-size: 1em;
            width: 100%;
            height: 5em;
        }

        .imgprin_grup{
            width: 100%;
            height: 300px;
        }

        .mn_sec ul{
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 20px 20px;
            row-gap: 15px;
            flex-wrap: wrap;
        }

    .pie_pag {
        grid-template-columns: 100%;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas: 
                            "col_ft1"
                            "col_ft2"
                            "col_ft3"
                            "mn_inf";
    }

    .titulo{
        font-size: 1em;
    }

    .tit_rider{
        font-size: 1.5em;
    }
}

@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%;
	}
}