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

.plantilla{
    width: 95%;
    margin: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 20em 7em 1fr 1fr 5em auto;
    grid-template-areas: 
                        "cab"
                        "pre_central"
                        "principal"
                        "tipo_even"
                        "pre_ft"
                        "pie_pag";
}
.cab{
    display: grid;
    grid-template-columns: 45% 55%;
    grid-template-rows: 5em 10em 3em;
    grid-template-areas: "img_cab slogan_cab"
                         "img_cab slogan_cab"
                         "mn_sup mn_sup";
}

.principal{
    display: grid;
    gap: 10px;
    grid-template-columns: 65% 35%;
    grid-template-rows: 1fr;
    grid-template-areas: 
		"col_prin  col_der";
}

.tipo_even{
    grid-template-columns: 31%, 31%, 31%;
    grid-template-rows: 10%, auto, auto;
    grid-template-areas: 
        "tit_eventos tit_eventos tit_eventos"
        "card1 card2 card3"
        "card4 card5 card6";
    column-gap: 15px;
}

.pie_pag {
    grid-template-columns: 1fr 1fr 1fr auto;
    grid-template-rows: auto;
    grid-template-areas: 
                        "col_ft1 col_ft2 col_ft3 col_ft4";
}

@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: 26em 15em 22em 50em 68em 305em 155em 255em 220em 60em;
        grid-template-areas: 
            "cab" 
            "pre_central"
            "principal"
            "pre_ft"
            "pie_pag"; 
    }

    .cab{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 3em 12em 5em;
        grid-template-areas:"cintillo"
                            "img_cab"
                            "mn_prin";
    } 
    .post_head{
        width:100%;
        height: 13em;
        margin-bottom: 1em;
        padding-bottom: 5em;
    }

    .pre_central{
        width: 98%;
        height: 20em;
        margin: auto;
        height: auto;
    }

    .paquetes{
        width: 100%;
        height: 50em;
    }

    .slider{
        width: 100%;
        height: 47em;
        margin: auto;
    }

    .id_paq{
        width: 100%;
        height: 45em;
    }

    .principal{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 60em 30em;
        grid-template-areas: "pres_video"
                             "col_izq";
    }
    .pres_video{
        width: 100%;
        height: 60em;
        max-height: 100em;
    }

    .col_izq{
        width: 100%;
        height: 30em;
        font-size: 1rem;
        margin-bottom: 5em;
    }

    .tipo_even{
        grid-template-columns: 100%;
        grid-template-rows: 4em 50em 50em 50em 50em 50em 50em;
        grid-template-areas: "tit_eventos"
                             "card1"
                             "card2"
                             "card3"
                             "card4"
                             "card5"
                             "card6";
    }

    .biblioteca{
        grid-template-columns: 100%;
        grid-template-rows: 2em 40em 50em 50em;
        grid-template-areas: "tit_biblio"
                             "col1"
                             "col2"
                             "col3";
    }

        .tit_biblio{
            width: 100%;
            height: 1.5em;
        }


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

        .tit_rider{
            width: 100%;
            height: 1.5em;
        }


    .nuevas{
        font-size: .8em;
        width: auto;
        height: 100%;
        grid-template-columns: 100%;
        grid-template-rows: 5em 250em 30em;
        grid-template-areas: "tit_nuevas  temas  fin_nuevas";
    }

        .temas{
            width: 100%;
            height: 240em;
        }

        .cancion{
            font-size: 1em;
        }
        .interprete{
            font-size: 1em;

        }
        .clasif{
            font-size: 1em;
        }
        .ingreso{
            font-size: 1em;
        }

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