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

.principal{
    grid-template-columns: 70% 30%;
    grid-template-rows: 1fr;
    gap: 5px;
    grid-template-areas: 
		"grupos  col_der";
}

.grupos{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 10px;
    grid-template-areas: 
		"tropicales"
        "sonideros"
        "nortenos"
        "versatiles";
}

.paquete{
    grid-template-columns: 60% 40%;
    grid-template-rows: 8em 20em 15em 20em;
    grid-template-areas: 
        "id_paq  id_paq"
        "card1   card2"
        "card1   card3"
        "card1   card4";
    column-gap: 10px;

}

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

.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: 63em 5em auto 1fr 260em 20em auto;
        grid-template-areas: 
                            "cab"
                            "post_head"
                            "principal"
                            "paquete"
                            "servicios"
                            "pre_ft"
                            "pie_pag";
    }

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


    .principal{
        grid-template-columns: 100%;
        grid-template-rows: 1fr auto;
        gap: 5px;
        grid-template-areas: 
            "grupos"
            "col_der";
    }
    
    .grupos{
        font-size: 2.5em;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        gap: 10px;
        grid-template-areas: 
            "tropicales"
            "sonideros"
            "nortenos"
            "versatiles";
    }
    .col_der{
        font-size: 2.5em;
        margin-bottom: 3em;
    }
    
    .paquete{
        grid-template-columns: 100%;
        grid-template-rows: 10em 30em 15em 20em;
        grid-template-areas: 
            "id_paq"
            "card1"
            "card2"
            "card3"
            "card4";
    }
    .card1{
        width: 100%;
    }
    
    .id_paq{
        font-size: 1.2em;
    }

    .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;
        }
    
    .pre_ft{
        width: 100%;
        height: 100px;
    }

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