/* Carrusel propio del tema (issues #35, #36, #47).

   Reemplaza a Slider Revolution en los tres lugares donde el sitio lo usaba:
   el hero del home, el bloque de textos de bienvenida y el encabezado de
   Nosotros. Son el mismo componente con distinta variante, así que el CSS y el
   JS se escriben una vez.

   La franja va de borde a borde y el contenido se acota al ancho del sitio,
   como en la propuesta: la foto de cada slide llega hasta la orilla de la
   pantalla y el texto queda alineado con el resto de la página. */

.abrasivomx-slider {
	/* De borde a borde aunque el bloque viva dentro de un contenedor acotado:
	   se le da el ancho de la ventana y se compensa el centrado del padre con
	   márgenes negativos, sin depender de dónde esté montado.

	   El ancho no puede ser 100vw: esa unidad incluye la barra de scroll y la
	   página no, así que la franja quedaba 7px corrida a la izquierda y se
	   comía otros 7 por la derecha. --abrasivomx-vw la mide de verdad
	   (js/slider.js); 100vw queda de respaldo si el JS no corre. */
	--abrasivomx-ancho: var(--abrasivomx-vw, 100vw);

	position: relative;
	width: var(--abrasivomx-ancho);
	margin-left: calc(50% - var(--abrasivomx-ancho) / 2);
	margin-right: calc(50% - var(--abrasivomx-ancho) / 2);
	overflow: hidden;
	background-color: #0f0f0f;
}

.abrasivomx-slider__pista {
	display: flex;
	transition: transform .5s ease;
}

.abrasivomx-slider__slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
	/* La imagen viene en una variable para poder cambiarla por la versión de
	   móvil desde el breakpoint, sin repetir el markup ni cargar las dos. */
	background-image: var(--abrasivomx-slide);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* La proporción sale del diseño: 1920x638 en la propuesta del hero. Con
   aspect-ratio la altura se calcula sola y no hay salto de layout al cargar la
   imagen. */
.abrasivomx-slider--hero .abrasivomx-slider__slide {
	aspect-ratio: 1920 / 638;
}

.abrasivomx-slider__contenido {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}

.abrasivomx-slider__titulo {
	margin: 0 !important;
	color: #ffffff !important;
	font-family: 'Rubik', sans-serif;
	/* La propuesta lo pone en 89px sobre una página de 1920, o sea 4.6% del
	   ancho. Con clamp se mantiene esa proporción en cualquier pantalla en vez
	   de quedar enorme en un monitor grande y desbordado en una laptop. */
	font-size: clamp(30px, 4.6vw, 89px);
	/* Los renglones de la propuesta van a 88.8px con una fuente de 88.8: el
	   interlineado es 1.0 clavado, no el 1.05 que teníamos. Sobre un titular
	   de cuatro renglones eso son 14px de más. */
	line-height: 1;
	font-weight: 700;
	text-transform: uppercase;
}

/* Las palabras que el diseño resalta dentro del título. */
.abrasivomx-slider__titulo em {
	color: #fcab03;
	font-style: normal;
}

.abrasivomx-slider__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.abrasivomx-slider__boton {
	display: inline-block;
	padding: 9px 26px;
	border: 2px solid transparent;
	border-radius: 999px;
	/* Los botones van en Inter en la propuesta. */
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 500;
	text-align: center;
	text-transform: none !important;
	letter-spacing: 0;
	transition: background-color .2s ease, color .2s ease;
}

.abrasivomx-slider__boton--rojo {
	background-color: #ea0029;
	color: #ffffff !important;
}

.abrasivomx-slider__boton--rojo:hover,
.abrasivomx-slider__boton--rojo:focus {
	background-color: #c00022;
	color: #ffffff !important;
}

.abrasivomx-slider__boton--blanco {
	background-color: #ffffff;
	color: #ea0029 !important;
}

.abrasivomx-slider__boton--blanco:hover,
.abrasivomx-slider__boton--blanco:focus {
	background-color: #f2f2f2;
	color: #ea0029 !important;
}

.abrasivomx-slider__boton--amarillo {
	background-color: #fcab03;
	color: #111111 !important;
}

.abrasivomx-slider__boton--amarillo:hover,
.abrasivomx-slider__boton--amarillo:focus {
	background-color: #e09903;
	color: #111111 !important;
}

/* Pie del primer slide: "Enviamos a todo MÉXICO" con su línea encima. */
.abrasivomx-slider__pie {
	/* Todo medido sobre la p.1, que trae la franja del hero entre y=163 y y=800:
	   la línea es un trazo negro de 1px que va de x=346 a x=889 -543px, no la
	   mitad del contenido- y cae en y=672, muy abajo del botón, que termina en
	   y=575. Son 97px de aire entre uno y otro, y otros 10 hasta el texto, que
	   es Inter de 24px en negro.

	   Los !important no son adorno: sin ellos el tema resuelve este párrafo en
	   14px y gris #555, que es justo lo que se veía. */
	width: 543px;
	max-width: 100%;
	margin-top: clamp(24px, 5vw, 97px) !important;
	padding-top: 10px;
	border-top: 1px solid #100d01;
	color: #000000 !important;
	font-family: 'Inter', sans-serif;
	font-size: clamp(14px, 2vw, 24px) !important;
	font-weight: 400;
	/* 1.41 es la caja natural de Inter y es la que usa la propuesta: ahí el
	   renglón mide 33.8px sobre una fuente de 24. */
	line-height: 1.41 !important;
	/* El tema le añade 20px por debajo a todo párrafo, que aquí desalineaban
	   el pie respecto del borde de la franja. */
	margin-bottom: 0 !important;
}

/* Los botones del hero van en 24px, no en 16: en la p.1 el de "Ingrésala aquí"
   mide 216x57 con el texto en Inter de 24px, lo que deja 12px de relleno
   arriba y abajo y 26 a los lados por dentro del borde. En em para que la
   proporción aguante cuando el tipo baja en pantallas chicas. */
.abrasivomx-slider--hero .abrasivomx-slider__boton {
	padding: .5em 1.1em;
	font-size: clamp(14px, 1.25vw, 24px);
	line-height: 1.2;
}

/* El tercer slide es el único que separa el titular de los botones: 55px en la
   propuesta contra los 24 y 13 de los otros dos. Sin esto su titular quedaba
   50px por debajo de donde va. */
.abrasivomx-slider--hero .abrasivomx-slider__slide:nth-child(3) .abrasivomx-slider__botones {
	margin-top: 2.85vw;
}

/* La propuesta no centra el contenido del hero: lo apoya en el borde inferior
   de la franja. Se ve comparando los tres slides de las pp.1-3, que tienen
   alturas de titular muy distintas -dos, tres y cuatro renglones- y aun asi
   dejan la fila de botones a 102px del fondo en el segundo y el tercero, con
   un pixel de diferencia entre ellos. Centrado, el bloque del primer slide
   quedaba 47px mas arriba de donde va.

   El primer slide es la excepcion: como termina en el pie y no en un boton,
   la propuesta lo deja a 79px del borde. */
@media (min-width: 993px) {
	.abrasivomx-slider--hero .abrasivomx-slider__contenido {
		justify-content: flex-end;
		padding-bottom: 5.3vw;
	}

	.abrasivomx-slider--hero .abrasivomx-slider__contenido:has(.abrasivomx-slider__pie) {
		padding-bottom: 4.38vw;
	}
}

/* Flechas. Van sobre la franja, no dentro del contenido, para que queden
   pegadas a la orilla como en la propuesta. */
.abrasivomx-slider__flecha {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .8);
	color: #111111;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease;
}

.abrasivomx-slider__flecha:hover {
	background-color: #ffffff;
}

.abrasivomx-slider__flecha:focus-visible {
	outline: 3px solid #ea0029;
	outline-offset: 2px;
}

.abrasivomx-slider__flecha--anterior { left: 16px; }
.abrasivomx-slider__flecha--siguiente { right: 16px; }

/* Puntos de paginación. */
.abrasivomx-slider__puntos {
	position: absolute;
	bottom: 14px;
	left: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 8px;
	width: 100%;
}

.abrasivomx-slider__punto {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .55);
	cursor: pointer;
	transition: background-color .2s ease;
}

.abrasivomx-slider__punto[aria-current="true"] {
	background-color: #ffffff;
}

.abrasivomx-slider__punto:focus-visible {
	outline: 3px solid #ea0029;
	outline-offset: 2px;
}

/* Quien pidió menos movimiento no ve la transición; el JS además no
   autoavanza en ese caso. */
@media (prefers-reduced-motion: reduce) {
	.abrasivomx-slider__pista {
		transition: none;
	}
}

/* A pantallas angostas la franja 3:1 del diseño se vuelve una tira donde no
   cabe el texto ni se ve el producto de la foto. Se le da más alto y el texto
   baja de tamaño. */
@media (max-width: 992px) {
	.abrasivomx-slider--hero .abrasivomx-slider__slide {
		aspect-ratio: 16 / 11;
	}

	.abrasivomx-slider__contenido {
		justify-content: flex-start;
		padding-top: 28px;
	}

	.abrasivomx-slider__botones {
		margin-top: 18px;
	}

	.abrasivomx-slider__boton {
		padding: 8px 18px;
		font-size: 14px;
	}

	.abrasivomx-slider__pie {
		margin-top: clamp(18px, 4vw, 40px) !important;
		font-size: clamp(16px, 2.4vw, 20px) !important;
	}

	.abrasivomx-slider__flecha {
		width: 32px;
		height: 32px;
	}

	.abrasivomx-slider__flecha--anterior { left: 8px; }
	.abrasivomx-slider__flecha--siguiente { right: 8px; }
}

@media (max-width: 600px) {
	/* La franja 3:1 del diseño no funciona en un teléfono: al recortarla el
	   producto se sale del encuadre. El kit responsive del cliente resuelve el
	   primer slide reacomodando la pieza -texto arriba, producto abajo, sobre
	   el color-, y esa es la versión que se carga aquí. */
	.abrasivomx-slider--hero .abrasivomx-slider__slide {
		/* Proporción de la imagen de móvil (800x1150). Antes era 4/5 y el pie
		   "Enviamos a todo MÉXICO" caía encima de los discos. */
		aspect-ratio: 800 / 1150;
		background-image: var(--abrasivomx-slide-movil);
	}

	/* En el teléfono el texto va centrado en todos los carruseles: a una
	   columna, el bloque centrado queda más equilibrado que alineado a la
	   izquierda. En el hero además sube, porque su imagen de móvil trae el
	   producto en la mitad de abajo. */
	.abrasivomx-slider__contenido {
		text-align: center;
	}

	.abrasivomx-slider__botones {
		justify-content: center;
	}

	.abrasivomx-slider--hero .abrasivomx-slider__contenido {
		justify-content: flex-start;
		padding-top: 34px;
	}

	/* Tamanos del kit responsive del cliente, que viene a 1080px de ancho: a
	   360 en pantalla eso es dividir entre tres. El titular esta ahi en 120px
	   -o sea 40-, el boton en 64.7 -21.6- y el pie en 64 -21.3-. Nosotros
	   veniamos pintando 30, 14 y 13. */
	.abrasivomx-slider--hero .abrasivomx-slider__titulo {
		font-size: clamp(34px, 11.1vw, 44px);
	}

	.abrasivomx-slider--hero .abrasivomx-slider__boton {
		font-size: clamp(18px, 6vw, 24px);
	}

	/* En el teléfono el pie va centrado como el resto del bloque. Para eso
	   tiene que soltar los 543px de ancho fijo que trae de escritorio: con
	   ellos la caja arrancaba pegada a la izquierda y el texto quedaba
	   centrado dentro de esa caja, no dentro de la pantalla -y en un teléfono
	   angosto además se desbordaba-. La línea sigue fuera aquí: sobre la
	   imagen de móvil caía encima de los discos. */
	.abrasivomx-slider--hero .abrasivomx-slider__pie {
		width: auto;
		max-width: none;
		border-top: 0;
		text-align: center;
		font-size: clamp(18px, 5.93vw, 24px) !important;
		/* El kit aprieta el interlineado a 1.2 -25.6px sobre una fuente de
		   21.3- y deja 21px entre el texto y los discos. Con los 18px de margen
		   y el 1.41 de escritorio el pie les caía encima. */
		margin-top: 0 !important;
		line-height: 1.2 !important;
	}

	/* El texto se centra, pero no se estira de orilla a orilla. */
	.abrasivomx-slider--nosotros .abrasivomx-slider__texto {
		margin-left: auto;
		margin-right: auto;
	}
}

/* Variante "bloque": los textos informativos del home (issue #36). A
   diferencia del hero, aquí el texto va centrado sobre la foto, que se
   oscurece para que se lea. Antes eran tres imágenes con el texto incrustado:
   ahora es texto de verdad, que se puede corregir, traducir y leer un buscador
   -es justo lo que pedía el issue-. */
.abrasivomx-slider--bloque .abrasivomx-slider__slide {
	aspect-ratio: 1920 / 576;
	background-color: #3a3a3a;
	/* El tercer slide no lleva foto: en la propuesta va sobre un degradado
	   vertical que baja de gris a negro. Muestreado en el borde de la p.3:
	   #808080 arriba, #404040 al medio y #000000 abajo, lineal. */
	background-image: var(--abrasivomx-slide, linear-gradient(180deg, #808080 0%, #404040 50%, #000000 100%));
}

/* La foto sola no da contraste suficiente para texto blanco encima. El tinte
   sale de la propuesta: oscuro en el primer slide y naranja en el segundo, que
   ahí lleva el fondo teñido. El orden lo define abrasivomx_sliders(), no el
   editor, así que identificarlos por posición es estable. */
.abrasivomx-slider--bloque .abrasivomx-slider__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, .5);
}

.abrasivomx-slider--bloque .abrasivomx-slider__slide:nth-child(2)::before {
	background-color: transparent;
	background-image: linear-gradient(100deg, rgba(234, 0, 41, .92) 0%, rgba(252, 118, 3, .88) 55%, rgba(252, 171, 3, .85) 100%);
}

.abrasivomx-slider--bloque .abrasivomx-slider__contenido {
	position: relative;
	z-index: 1;
	align-items: center;
	/* El renglón más largo de la propuesta mide 1249px -el segundo del último
	   párrafo del tercer slide-, así que la caja tiene que darle cabida. */
	max-width: 1320px;
	text-align: center;
}

/* Los cortes de renglón de estos párrafos son a mano: en la propuesta las
   líneas van de 354 a 1249px sin retícula que las explique, y probando anchos
   no hay uno solo que reproduzca los seis párrafos. Así que los cortes vienen
   marcados en el texto y se respetan mientras haya ancho para ellos; por
   debajo desaparecen y el párrafo fluye como cualquier otro. Cada uno va
   detrás de un espacio, para que al ocultarlos las palabras no se peguen. */
.abrasivomx-corte {
	display: none;
}

/* El corte inverso: el kit de móvil parte "Enviamos a / todo MÉXICO" en dos
   renglones, y en escritorio la propuesta lo lleva en uno. */
.abrasivomx-corte-movil {
	display: none;
}

@media (max-width: 600px) {
	.abrasivomx-corte-movil {
		display: inline;
	}
}

@media (min-width: 1360px) {
	.abrasivomx-corte {
		display: inline;
	}
}

.abrasivomx-slider__antetitulo {
	margin: 0 0 6px !important;
	color: #ffffff !important;
	font-family: 'Rubik', sans-serif;
	font-size: 15px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.abrasivomx-slider--bloque .abrasivomx-slider__titulo {
	/* 55px sobre el contenido de 1200 de la propuesta. */
	font-size: clamp(26px, 4.6vw, 55px);
}

/* El antetítulo, el cuerpo y el botón van en 24px, no en 15: medido en la
   p.1, donde todos son Inter-Regular de 24px. */
.abrasivomx-slider--bloque .abrasivomx-slider__antetitulo {
	font-size: clamp(13px, 2vw, 24px);
}

.abrasivomx-slider--bloque .abrasivomx-slider__texto p {
	font-size: clamp(15px, 2vw, 24px) !important;
	/* Renglones de 29px y un renglón completo entre párrafos, como la p.1. */
	line-height: 1.2 !important;
	margin-bottom: 29px !important;
}

.abrasivomx-slider--bloque .abrasivomx-slider__texto p:last-child {
	margin-bottom: 0 !important;
}

/* La propuesta resalta parte del texto; el resto va en peso normal. */
.abrasivomx-slider__texto strong {
	font-weight: 700;
}

.abrasivomx-slider--bloque .abrasivomx-slider__boton {
	font-size: clamp(15px, 2vw, 24px);
	padding: 9px 30px;
}

.abrasivomx-slider__texto {
	margin-top: 16px;
	color: #ffffff;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.6;
}

.abrasivomx-slider__texto p {
	margin: 0 0 10px !important;
	color: #ffffff !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
}

.abrasivomx-slider__texto p:last-child {
	margin-bottom: 0 !important;
}

.abrasivomx-slider--bloque .abrasivomx-slider__botones {
	justify-content: center;
	margin-top: 22px;
}

.abrasivomx-slider__boton--blanco-negro {
	background-color: #ffffff;
	color: #111111 !important;
}

.abrasivomx-slider__boton--blanco-negro:hover,
.abrasivomx-slider__boton--blanco-negro:focus {
	background-color: #f2f2f2;
	color: #111111 !important;
}

/* En pantallas angostas el bloque crece a lo que pida el texto: con la
   proporción de escritorio el párrafo se desbordaba fuera de la franja. */
@media (max-width: 992px) {
	.abrasivomx-slider--bloque .abrasivomx-slider__slide {
		aspect-ratio: auto;
		min-height: 420px;
	}

	.abrasivomx-slider--bloque .abrasivomx-slider__contenido {
		padding-top: 40px;
		padding-bottom: 46px;
	}
}

/* En la propuesta el hero y el bloque de textos van pegados, uno tras otro sin
   aire entre ellos. En el sitio quedaban separados 60px por dos ajustes
   guardados en Elementor: 50px de margen inferior en la sección del hero y
   10px de relleno en la del bloque. Ese relleno además dejaba asomar el fondo
   amarillo de su propia sección como dos franjas arriba y abajo de la foto.

   Se anulan desde aquí y no desde el editor para que el arreglo viaje con el
   repo -misma razón por la que el carrusel intercepta el shortcode-. Se
   identifican por contener un carrusel nuestro, no por su id, que cambia si la
   página se rehace. */
.elementor-section:has(> .elementor-container .abrasivomx-slider),
.e-con:has(> .e-con-inner .abrasivomx-slider) {
	margin-bottom: 0 !important;
}

.e-con:has(> .e-con-inner .abrasivomx-slider) > .e-con-inner {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Variante "nosotros": el encabezado de esa página (issue #47). Misma pieza
   que el bloque del home, pero con el texto a la izquierda y el título en
   amarillo, como en la p.6 de la propuesta. */
.abrasivomx-slider--nosotros .abrasivomx-slider__slide {
	/* La proporción del diseño es 1920x541, pero aquí va como mínimo y no como
	   medida fija: los textos son del cliente y pueden ser más largos que los
	   de la maqueta, y con aspect-ratio el botón quedaba cortado por abajo. */
	min-height: 28.2vw;
	background-color: #1a1a1a;
}

.abrasivomx-slider--nosotros .abrasivomx-slider__contenido {
	/* Sin el 100% el contenido puede empujar la franja cuando el texto no cabe
	   en la proporción del diseño; con él quedaba recortado el botón. */
	height: auto;
	padding-top: 26px;
	padding-bottom: 30px;
}

/* El degradado corre de izquierda a derecha: oscurece la mitad donde va el
   texto y deja ver la foto del otro lado, como en la propuesta. */
.abrasivomx-slider--nosotros .abrasivomx-slider__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .72) 42%, rgba(0, 0, 0, .15) 78%, rgba(0, 0, 0, .05) 100%);
}

.abrasivomx-slider--nosotros .abrasivomx-slider__contenido {
	position: relative;
	z-index: 1;
	max-width: 1200px;
}

.abrasivomx-slider--nosotros .abrasivomx-slider__titulo {
	/* 55px sobre el contenido de 1200 de la propuesta, igual que los titulares
	   del cuerpo de la página. */
	font-size: clamp(28px, 4.6vw, 55px);
}

.abrasivomx-slider--nosotros .abrasivomx-slider__texto {
	max-width: 560px;
}

@media (max-width: 992px) {
	.abrasivomx-slider--nosotros .abrasivomx-slider__slide {
		aspect-ratio: auto;
		min-height: 400px;
	}

	.abrasivomx-slider--nosotros .abrasivomx-slider__contenido {
		padding-top: 36px;
		padding-bottom: 40px;
	}

	/* En pantalla angosta la foto queda detrás del texto completo, así que el
	   velo tiene que cubrir todo el ancho para que se siga leyendo. */
	.abrasivomx-slider--nosotros .abrasivomx-slider__slide::before {
		background-image: linear-gradient(90deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .7) 100%);
	}
}

/* Los dos botones del encabezado de Nosotros son iguales en la propuesta:
   blancos, con orilla amarilla y el texto a 24px; el segundo lleva además una
   flecha. Medido sobre la p.6: relleno #ffffff, orilla #ffbb00, alto ~58px. */
.abrasivomx-slider__boton--contorno {
	border-color: #ffbb00;
	background-color: #ffffff;
	color: #010004 !important;
	font-size: clamp(15px, 2vw, 24px);
	font-weight: 400;
	/* 58px de alto en la propuesta. */
	padding: 9px 30px;
}

.abrasivomx-slider__boton--contorno:hover,
.abrasivomx-slider__boton--contorno:focus {
	background-color: #fff8e6;
	color: #010004 !important;
}

.abrasivomx-slider__boton--flecha::after {
	content: "";
	display: inline-block;
	width: .95em;
	height: .95em;
	margin-left: .55em;
	vertical-align: -.12em;
	background-color: currentColor;
	/* La flecha del diseño, como máscara: hereda el color del texto y no pide
	   otra petición al servidor. */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 12h15m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 12h15m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* La flecha va en amarillo, como en la propuesta. */
.abrasivomx-slider__boton--contorno.abrasivomx-slider__boton--flecha::after {
	background-color: #ffbb00;
}

/* El cuerpo y el título de estos banners también son mayores de lo que estaban:
   24px el texto y Rubik Black el titular, según la p.6. */
.abrasivomx-slider--nosotros .abrasivomx-slider__titulo {
	font-weight: 900;
}

.abrasivomx-slider--nosotros .abrasivomx-slider__texto p {
	font-size: clamp(15px, 2vw, 24px) !important;
	line-height: 1.4 !important;
}

.abrasivomx-slider--nosotros .abrasivomx-slider__antetitulo {
	font-size: clamp(13px, 2vw, 24px);
}

.abrasivomx-slider--nosotros .abrasivomx-slider__texto {
	max-width: 900px;
}