/*------------------------------------*\
	PAGE CONTAINER
\*------------------------------------*/
.wrapper {
	max-width: 1080px;
	margin: 0 auto;
	padding: 1.5em 1em;
}

/*------------------------------------*\
	GRIDS SYSTEM (16 Columns Fluid)
\*------------------------------------*/
/* Contenedor principal de columnas. 
Usa un margen negativo a la izquierda para absorber el espacio sobrante.
*/
.grids {
	max-width: 1120px;
	clear: both;
	margin: 0 0 0 -2.679%;
	list-style: none; /* Permite crear rejillas usando listas <ul> y <li> */
}

/* Selector de atributo: Aplica el comportamiento de columna a cualquier 
elemento cuya clase comience exactamente por "grid-".
*/
[class^="grid-"] {
	float: left;
	margin: 0 2.679% 0 0;
}

/* Ajuste de margen para elementos grid que están dentro de un contenedor .grids */
.grids [class^="grid-"] {
	margin: 0 0 0 2.679%;
}

/* ANCHO DE LAS COLUMNAS (Basado en base 16 y gutters del 2.679%)
-------------------------------------------------------------------------- */
.grid-1  { width: 3.571%; }
.grid-2  { width: 9.821%; }
.grid-3  { width: 16.071%; }
.grid-4  { width: 22.321%; }
.grid-5  { width: 28.571%; }
.grid-6  { width: 34.821%; } /* Corregido de 34% a 34.821% para cuadrar la estructura */
.grid-7  { width: 41.071%; }
.grid-8  { width: 47.321%; }
.grid-9  { width: 53.571%; }
.grid-10 { width: 59.821%; }
.grid-11 { width: 66.071%; }
.grid-12 { width: 72.321%; }
.grid-13 { width: 78.571%; }
.grid-14 { width: 84.821%; }
.grid-15 { width: 91.071%; }
.grid-16 { width: 97.321%; margin: 0; }