@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
}
.plantilla{
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 5em 1fr 1fr 80em 43em 1fr 1fr 1fr;
    grid-template-areas: 
                        "cab"
                        "post_head"
                        "pre_central"
                        "servicios"
                        "paquetes"
                        "tipo_even"
                        "biblioteca"
                        "principal"
                        "pre_ft"
                        "pie_pag";
}
.cab{
    grid-template-columns: 110%;
    grid-template-rows: 5em 30em 7em;
    grid-template-areas: "contrata"
                         "img_cab"
                         "mn_prin";
}

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

.paquetes{
    grid-template-columns: 31%, 31%, 31%;
    grid-template-rows: 5em, auto auto auto;
    row-gap: 2em;
    grid-template-areas: 
        "tit_paqs  tit_paqs  tit_paqs"
        "pk1        pk2      pk3"
        "pk4        pk5      pk6"
        "pk7        pk8      pk10";
    column-gap: 15px;
}

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

.biblioteca{
    grid-template-columns: 31% 31% 31%;
    grid-template-rows: 2.5em 40em;
    grid-template-areas: 
    "tit_biblio tit_biblio tit_biblio"
    "col1 col2 col3";
    gap: 3%;
}

.principal{
    gap: 10px;
    grid-template-columns: 30% 70%;
    grid-template-rows: 1fr;
    grid-template-areas: 
		"col_izq  pres_video";
}


.nuevas{
    grid-template-columns: 100%;
    grid-template-rows: 2em 20em auto;
    grid-template-areas: "tit_nuevas"
                         "temas" 
                         "fin_nuevas";
}

.pie_pag {
    grid-template-columns: 1fr 1fr 1fr auto;
    grid-template-rows: auto;
    grid-template-areas: 
                        "col_ft1 col_ft2 col_ft3 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: 33em 7em 22em 60em 305em 130em 255em 73em 245em 25em 60em;
        grid-template-areas: 
            "cab" 
            "post_head"
            "pre_central"
            "paquetes"
            "tipo_even"
            "biblioteca"
            "servicios"
            "principal"
            "nuevas"
            "pre_ft"
            "pie_pag"; 
    }

    .cab{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 13em 10em 7em;
        grid-template-areas:"contrata"
                            "img_cab"
                            "mn_prin";
    } 
    .post_head{
        width:100%;
        height: auto;
        margin-bottom: 1em;
    }

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

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

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

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

    .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 40em 40em;
        grid-template-areas: "tit_biblio"
                             "col1"
                             "col2"
                             "col3";
    }

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

    .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: 3.5em;
            margin-bottom: 2em;
        }

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

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

        .temas{
            width: 100%;
            height: auto;
        }

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