/* La franja de contacto que cierra la página Nosotros y las notas del blog.

   Vive aparte porque la propuesta la dibuja idéntica en las dos -1230x229 sobre
   el contenido, con la misma barra de 10px y el mismo texto-, así que es un
   componente y no parte de ninguna de las dos páginas.

   Medidas y colores muestreados de la p.5: esquinas muy redondeadas, degradado
   que va de casi negro a amarillo, el titular en blanco con una barra amarilla
   al costado y el texto de la derecha en negro, no en blanco. */

.abrasivomx-contacto-directo {
	max-width: 1200px;
	margin: 0 auto 72px;
}

.abrasivomx-contacto-directo__interior {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 40px;
	min-height: 271px;
	padding: 40px 56px;
	border-radius: 40px;
	background-image: linear-gradient(90deg, #1a0203 0%, #3b0608 9%, #bb151b 30%, #f55b14 50%, #fa9607 70%, #fba903 90%, #fdb500 100%);
}

.abrasivomx-contacto-directo__titulo {
	margin: 0;
	/* Barra de 10px y color #ffa015, medidos sobre la p.5. */
	padding-left: 24px;
	border-left: 10px solid #ffa015;
	color: #ffffff;
	font-family: 'Rubik', sans-serif;
	font-size: clamp(24px, 4.6vw, 55px);
	line-height: 1.05;
	font-weight: 900;
	text-transform: uppercase;
}

.abrasivomx-contacto-directo__texto {
	margin: 0;
	/* En negro: cae sobre la parte clara del degradado. */
	color: #0f0f0f;
	font-family: 'Inter', sans-serif;
	font-size: clamp(15px, 2vw, 24px);
	line-height: 1.35;
}

.abrasivomx-contacto-directo__texto a {
	color: #0f0f0f;
	text-decoration: none;
}

.abrasivomx-contacto-directo__texto a:hover,
.abrasivomx-contacto-directo__texto a:focus {
	text-decoration: underline;
}

@media (max-width: 782px) {
	.abrasivomx-contacto-directo__titulo,
	.abrasivomx-contacto-directo__texto {
		text-align: center;
	}

	/* Centrado el titular, la barra vertical del contacto deja de tener un
	   costado al que pegarse: pasa a ser una linea corta debajo. */
	.abrasivomx-contacto-directo__titulo {
		padding-left: 0;
		padding-bottom: 14px;
		border-left: 0;
		border-bottom: 6px solid #ffa015;
	}

	.abrasivomx-contacto-directo {
		padding: 0 15px;
	}

	.abrasivomx-contacto-directo__interior {
		grid-template-columns: 1fr;
		gap: 18px;
		min-height: 0;
		padding: 28px 26px;
		border-radius: 26px;
		/* Apilado, el degradado gira: si se queda horizontal, el texto -que va
		   en negro porque en la propuesta cae sobre el amarillo- termina sobre
		   el extremo casi negro y no se lee. Vertical conserva el reparto de la
		   propuesta: el titular blanco sobre lo oscuro y el texto sobre lo
		   claro. */
		background-image: linear-gradient(180deg, #1a0203 0%, #3b0608 9%, #bb151b 30%, #f55b14 50%, #fa9607 70%, #fba903 90%, #fdb500 100%);
	}
}