@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: 27em 13em 8em auto 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 18em 5em;
    grid-template-areas: "cintillo"                         
                         "img_cab"
                         "mn_prin";
} 

.principal{
    display: grid;
    grid-template-columns: 70% 28%;
    grid-template-rows: 100em 70em 15em;
    column-gap: 1em;
    grid-template-areas: "pl_quince   col_der"
                         "servicios15 col_der"
                         "contacto    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 25% 20% 25%;
    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 18em 20em 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 15em 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 auto auto 1fr;
        grid-template-areas: "pl_quince"
                             "servicios15"
                             "contacto"
                             "col_der";
    }

    .id_listado{
        font-size: 2em;
        text-align: center;
        font-weight: 600;
        padding: 5px 5px;
        background-color: rgba(200, 200, 0, 0.2); 
        border-bottom: white 5px groove;
    }

    .cab_listado{
        font-size: 1.5em;
        text-align: center;
        font-weight: 600;
        padding: 5px 5px;
        background-color: rgba(200, 200, 0, 0.2); 
        border-bottom: white 5px groove;
    }

    .listado{
        width: 100%;
        font-size: 0.8rem;
        color: black;
        background-color: rgba(250,250,220,0.8);
    }

    .tit_slider{
        font-size: 1.5em;
    }
    
    .contacto{
        font-size: 2.2em;
        margin-bottom: 1em;
    }
    
    .col_der{
        font-size: 2em;
        width: 90%;
        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: 12em 10em 10em 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%;
	}
}