:root {
	--azul-principal: #0071bc;
	--naranja-claro: #F38D47;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.container{
	width: 90%;
	margin: 5% auto;
}


h2 {
	color: var(--azul-principal);
	font-weight: 700;
	text-align: center;
	margin: 20px 0;
	font-size: 1em;
}

.container a {
	color: var(--azul-principal);
}

.container a:hover {
	color: var(--naranja-claro);
}

/* ============= CATEGORÍAS ============= */

.categorias {
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 3em 0 1em 0; 
	width: 100%;
	list-style: none;
}

.caja-categoria {
	text-align: center;
    width: 25%;
    float: left;
    outline: none;
}

.categoria {
	cursor: pointer;
	font-weight: 700;
	color: var(--azul-principal);
	font-size: .6em;
	text-decoration: none;
	outline: none;
}

.categoria:hover {
	box-shadow: #111;
	color: var(--naranja-claro);
}

.categoria.activa {
	box-shadow: #111;
	color: var(--naranja-claro);
}

.ui-tabs-active .categoria{
	color: var(--naranja-claro);
}

.catgrid-text{
	font-size: 1em;
}

/* ============= APARTADOS INFO ============= */

.apartado-servicios h2 {
	color: var(--naranja-claro);
}

.apartado-servicios img {
	width: 100%;
}

.info-servicios {
	display: inline-block;
	width: 100%;
	padding: 1.2em;
}

.servicios-texto p {
	font-size: .8em;
    line-height: 1.8em;
    text-align: center;
}

/* ============= TALLERES ============= */


.bloque-talleres h2 {
	color: var(--naranja-claro);
}

.bloque-talleres h3 {
	color: var(--azul-principal);
	font-weight: 700;
	text-align: center;
	margin: 1em;
	font-size: 1em;
}

.talleres-img{
	width: 100%;
    border-radius: 15px;
}

.talleres-texto {
    width: 100%;
    height: auto;
    padding: 10px;
    position: relative;
    top: 0%;
    text-align: left;
}

.bloque-talleres {
    text-align: center;
}

.seccion-talleres {
    width: 100%;
    display: inline-block;
    text-align: center;
    padding: 1em;
}

.seccion-talleres  li {
	list-style-type: square;
	margin-bottom: 5px;
    margin-left: 5px;
    font-size: .8em;
    text-align: left;	
}

.seccion-talleres  p {
    font-size: .8em;
    text-align: left;	
}

/* ============= NOSOTROS ============= */

.nosotros {
	width: 100%;
	margin-top: 4em;
	clear: both;
}

.nosotros-img {
	width: 100%;
}

.bloque-nosotros h3 {
	font-size: 1em;
    color: var(--azul-principal);
    margin: 1.3em 0;
    text-align: center;
}

.bloque-nosotros p {
	margin-bottom: 2em;
}

/* ============= || RESPONSIVE OVERLOAD || ============= */
@media (min-width: 480px){
	/* ============= CATEGORÍAS ============= */
	.categoria {
		font-size: .9em;
	}

}


@media (min-width: 768px){

	/* ============= CATEGORÍAS ============= */

	.catgrid-text{
		font-size: 1.2em;
	}

	/* ============= APARTADOS INFO ============= */

	h2 {
		font-size: 1.5em;
	}

	.servicios-texto p {
		font-size: .9em;
	    line-height: 1.8em;
	    text-align: left;
	}

	/* ============= TALLERES ============= */

	.bloque-talleres {
		width: 100%;
		clear: both;
	}


	.talleres-img{
		margin: 0;
	}

	.talleres-texto {
	    padding: 30px;
	}

	.seccion-talleres {
	    width: 50%;
	    float: left;
	}

	.info-adicional{
		clear: both;
	}

	/* ============= NOSOTROS ============= */

	.bloque-nosotros {
	    width: 50%;
	    padding: 10px;
	    float: left;
	}

	.bloque-tratocliente {
		float: none;
	}
}


@media (min-width: 1024px){

	h1 {
		margin: 0 60px 60px;
	}

	/* ============= CATEGORÍAS ============= */

	.categoria {
		font-size: 1.2em;
	}

	/* ============= APARTADOS INFO ============= */
	
	.apartado-servicios img {
	    width: 50%;
	    float: left;
	    padding: 2em;
	}

	.apartado-servicios h2 {
    	float: left;
    	padding: 0 2em;
	}

	.servicios-texto {
	    width: 50%;
	    float: left;
    	padding: 1em 3em;
	}
	
	
	/* ============= TALLERES ============= */

	.seccion-talleres {
	    width: 33%;
	}

	.seccion-talleres  li {
	    font-size: .9em;
	}

	.seccion-talleres  p {
	    font-size: .9em;
	}

	/* ============= NOSOTROS ============= */
	.nosotros {
	    height: 560px;
	}

	.bloque-nosotros {
	    width: 32%;
	    padding: 10px;
	    float: left;
	}

	.bloque-nosotros p {
	    font-size: .9em;
    	line-height: 1.8em;
	}

}