/* Página Nosotros (issue #47), contra ABRASIVO_Complete.pdf p.5.

   El layout vive en page-nosotros.php, no en Elementor: la propuesta apila las
   secciones -cada una con su foto de un lado y su texto del otro- y la página
   anterior corría en dos columnas paralelas, con un orden de lectura distinto.
   Rehacerlo en el editor habría dejado el trabajo en la base de datos; así
   viaja con el repo. Es la discusión del issue #34, del lado de los archivos.

   Medidas y colores tomados del PDF: titulares en Rubik Black 55px, cuerpo en
   24px, y el rojo #f01c23 de la propuesta. */

.abrasivomx-nosotros__cuerpo {
	max-width: 1200px;
	margin: 0 auto;
	/* Sin relleno lateral en escritorio: la propuesta usa los 1200 completos y
	   con 15px por lado las columnas quedaban 14px más angostas, lo bastante
	   para que tres secciones ganaran un renglón de más. El relleno vuelve en
	   cuanto la ventana se acerca a ese ancho. */
	padding: 64px 0 0;
}

@media (max-width: 1230px) {
	.abrasivomx-nosotros__cuerpo {
		padding-left: 15px;
		padding-right: 15px;
	}
}

.abrasivomx-nos-seccion {
	display: grid;
	/* No van a la mitad. En la propuesta la caja de texto no es constante -va de
	   619 a 649px segun la seccion, el diseñador no siguio una reticula
	   estricta-, asi que se probo cual ancho unico reproduce mejor sus cortes:
	   635px acierta el numero de renglones en las seis secciones, contra cinco
	   con 630 y cuatro con 620. La columna ancha es siempre la del texto, vaya
	   la foto de un lado o del otro. */
	grid-template-columns: 635fr 529fr;
	/* La foto arranca a la altura del título, no centrada respecto al texto:
	   medido en la propuesta, donde ambos empiezan a la misma altura. */
	align-items: start;
	gap: 36px;
	margin-bottom: 72px;
}

/* La primera sección lleva la foto a la derecha; el resto a la izquierda. En
   esas, las proporciones se invierten para que la columna ancha siga siendo la
   del texto: si no, la foto se quedaba con los 630 y el texto caía a 520,
   partiéndose en más renglones que la maqueta. */
.abrasivomx-nos-seccion--foto-derecha .abrasivomx-nos-seccion__foto {
	order: 2;
}

.abrasivomx-nos-seccion--foto-izquierda {
	grid-template-columns: 529fr 635fr;
}

/* "Nuestro compromiso" va a todo el ancho y con el texto más grande, como en
   la propuesta: es la declaración de la empresa, no una sección más. */
.abrasivomx-nos-seccion--ancha {
	grid-template-columns: 1fr;
	gap: 0;
}

.abrasivomx-nos-seccion__foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
}

.abrasivomx-nos-seccion__titulo {
	margin: 0 0 18px;
	color: #010101;
	font-family: 'Rubik', sans-serif;
	/* La propuesta los pone en 55px sobre un contenido de 1200, que es el mismo
	   ancho del sitio: a partir de ahí el tamaño es literal, y por debajo baja
	   en proporción. */
	font-size: clamp(26px, 4.6vw, 55px);
	line-height: 1.05;
	font-weight: 900;
	text-transform: uppercase;
}

.abrasivomx-nos-seccion__titulo em {
	color: #f01c23;
	font-style: normal;
}

.abrasivomx-nos-seccion--compromiso .abrasivomx-nos-seccion__titulo {
	color: #f01c23;
}

.abrasivomx-nos-seccion__texto p {
	/* Medido en la propuesta: los renglones van a 30px -1.25 sobre 24px- y
	   entre parrafos hay 60px, o sea un renglon completo de separacion. */
	margin: 0 0 30px;
	color: #010101;
	/* El cuerpo va en Inter, como en la propuesta; los titulares en Rubik. */
	font-family: 'Inter', sans-serif;
	/* 24px en la propuesta, con la misma regla de proporción que los títulos. */
	font-size: clamp(15px, 2vw, 24px);
	line-height: 1.25;
}

/* El texto del compromiso va en 45px y en negrita -casi el doble que el cuerpo
   normal de 24px-: en la propuesta es la declaración de la empresa, no un
   párrafo más. */
.abrasivomx-nos-seccion--ancha .abrasivomx-nos-seccion__texto p {
	/* Usa el ancho completo del contenido: en la propuesta la línea llega a
	   1184px de los 1200, y con un tope menor cabían menos palabras y el
	   párrafo se partía en más renglones. */
	font-size: clamp(20px, 3.75vw, 45px) !important;
	/* Aqui el renglon va a 60px y la separacion entre parrafos tambien es de un
	   renglon: 120px de una linea a la siguiente. */
	line-height: 1.33;
	margin-bottom: 60px;
	font-weight: 700;
}

@media (max-width: 782px) {
	.abrasivomx-nosotros__cuerpo {
		padding-top: 40px;
	}

	.abrasivomx-nos-seccion {
		grid-template-columns: 1fr;
		gap: 22px;
		margin-bottom: 48px;
	}

	/* Apiladas, la foto va siempre arriba: el orden alternado solo tiene
	   sentido cuando hay dos columnas. */
	.abrasivomx-nos-seccion--foto-derecha .abrasivomx-nos-seccion__foto {
		order: 0;
	}

	/* A una sola columna el bloque centrado se lee mejor que alineado a la
	   izquierda, igual que en los carruseles. */
	.abrasivomx-nos-seccion__titulo,
	.abrasivomx-nos-seccion__texto {
		text-align: center;
	}

}