/* Sección de envíos del home (issues #41 y #42), contra ABRASIVO_Complete.pdf p.1.

   Antes era una franja negra con el título "INFORMACIÓN DE ENVÍOS" y tres
   tarjetas blancas con fotos circulares. La propuesta la cambia por algo más
   informativo: un titular que promete el envío en 24 horas, la tarjeta amarilla
   con las tres condiciones y la caja "Llegamos a donde estés" asomando por
   encima.

   Va por encima de lo estético: el costo del flete no estaba escrito en ninguna
   otra parte del home, y es de las primeras preguntas de quien compra.

   Medidas del PDF: banda gris #f4f4f4, tarjeta amarilla #ffbc00 de 1177x317
   dentro de una blanca de 1228x384, titular Rubik Bold 55px con "LISTO" en
   #ffc916, y el cuerpo en Inter de 24px. */

.abrasivomx-envios {
	--abrasivomx-envios-amarillo: #ffbc00;
	/* El botón no lleva el amarillo de la tarjeta sino el ámbar de la marca. */
	--abrasivomx-envios-ambar: #fcab03;
	--abrasivomx-envios-azul: #0a1574;
	/* El botón de "Calcular" conserva las clases del tema y sus reglas ganan por
	   especificidad, así que su tamaño viaja en una variable en lugar de repetir
	   la cadena de selectores en cada punto de quiebre. */
	--abrasivomx-envios-boton: clamp(14px, 2vw, 24px);
	/* La propuesta les da el mismo ancho a los dos botones, sin que dependa del
	   largo de la palabra. */
	--abrasivomx-envios-boton-ancho: 0;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
	text-align: left;
}

.abrasivomx-envios__titulo {
	margin: 0 !important;
	color: #0f0f0f !important;
	font-family: 'Rubik', sans-serif;
	/* 55px sobre el contenido de 1200 de la propuesta, que es el mismo ancho
	   que usa el sitio: a partir de ahí el tamaño es literal y por debajo baja
	   en proporción. Medir contra la página de 1920 lo dejaba en 41px. */
	font-size: clamp(26px, 4.6vw, 55px) !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	text-transform: none !important;
	text-align: left !important;
}

.abrasivomx-envios__titulo em {
	color: #ffc916;
	font-style: normal;
}

.abrasivomx-envios__etiqueta {
	margin: 14px 0 0 !important;
	color: var(--abrasivomx-envios-azul) !important;
	font-family: 'Inter', sans-serif !important;
	font-size: clamp(15px, 2vw, 24px) !important;
	line-height: 1.3 !important;
}

/* -- La tarjeta ----------------------------------------------------------- */

.abrasivomx-envios__tarjeta {
	position: relative;
	margin-top: 22px;
	padding: 18px;
	border: 3px solid #ffffff;
	border-radius: 22px;
	background: transparent;
}

.abrasivomx-envios__paquete {
	/* La caja no es decoración: es la única imagen del bloque, y en la propuesta
	   sobresale por arriba de la tarjeta, que es lo que le da el aire de paquete
	   puesto encima.

	   Medida sobre la propuesta: 366x369 dentro de una tarjeta de 1228x384, con
	   el borde derecho a 156 del de la tarjeta y el inferior a 53. De ahí salen
	   el 30% y el 12.7%. */
	position: absolute;
	right: 12.7%;
	bottom: 13.7%;
	width: 30%;
	max-width: 366px;
}

.abrasivomx-envios__caja {
	display: block;
	width: 100%;
	height: auto;
	/* La propuesta le pone una sombra proyectada para que se apoye sobre la
	   tarjeta en vez de flotar encima. */
	filter: drop-shadow(14px 16px 26px rgba(0, 0, 0, .32));
}

.abrasivomx-envios__condiciones {
	display: block;
	margin: 0;
	padding: 34px 40px;
	/* En la propuesta el texto ocupa el 38% de la tarjeta y cada viñeta cae en
	   dos renglones: eso es lo que le da altura frente a la caja. Con la columna
	   ancha las viñetas caben en uno y la tarjeta queda achatada. */
	padding-right: 56%;
	border-radius: 16px;
	background: var(--abrasivomx-envios-amarillo);
	list-style: none;
}

.abrasivomx-envios__condiciones li {
	position: relative;
	/* Un renglón completo entre viñetas, como la propuesta. */
	margin: 0 0 29px;
	padding-left: 20px;
	color: #0f0f0f;
	font-family: 'Inter', sans-serif;
	font-size: clamp(14px, 2vw, 24px);
	line-height: 1.2;
}

.abrasivomx-envios__condiciones li:last-child { margin-bottom: 0; }

.abrasivomx-envios__condiciones li::before {
	content: "•";
	position: absolute;
	left: 0;
}

.abrasivomx-envios__condiciones strong { font-weight: 700; }

/* -- Las dos tarjetas de abajo (issue #42) -------------------------------- */

.abrasivomx-envios__servicios {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	margin-top: 22px;
}

/* En la propuesta estas tarjetas no llevan relleno: son solo un contorno blanco
   de 3px sobre el gris de la banda. */
.abrasivomx-envio-servicio {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 18px;
	border: 3px solid #ffffff;
	border-radius: 22px;
	background: transparent;
}

.abrasivomx-envio-servicio img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 491 / 246;
	border-radius: 14px;
	object-fit: cover;
	object-position: center;
}

.abrasivomx-envio-servicio__titulo {
	margin: 18px 0 14px !important;
	color: var(--abrasivomx-envios-azul) !important;
	font-family: 'Inter', sans-serif !important;
	font-size: clamp(15px, 2vw, 24px) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	text-align: left !important;
}

.abrasivomx-envio-servicio__boton {
	display: inline-block;
	padding: 9px 24px;
	border-radius: 999px;
	font-family: 'Inter', sans-serif;
	font-size: var(--abrasivomx-envios-boton);
	/* Más ligero que el rótulo de la tarjeta, como en la propuesta. */
	font-weight: 500;
	line-height: 1.3;
	min-width: var(--abrasivomx-envios-boton-ancho);
	text-align: center;
	text-decoration: none;
	transition: background-color .15s ease;
}

/* Ese botón conserva las clases .banner-button.btn del tema porque son las que
   busca el cotizador de QuickOrder, y con ellas vienen su fondo y su tipografía:
   hay que ganarles aquí. */
.abrasivomx-envio-servicio .abrasivomx-envio-servicio__boton--amarillo,
.abrasivomx-envio-servicio .abrasivomx-envio-servicio__boton--amarillo.banner-button {
	background: var(--abrasivomx-envios-ambar) !important;
	border: 0 !important;
	/* Azul sobre el ámbar, como en la propuesta. */
	color: var(--abrasivomx-envios-azul) !important;
	font-family: 'Inter', sans-serif !important;
	font-size: var(--abrasivomx-envios-boton) !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	padding: 9px 24px !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
	width: auto !important;
	min-width: var(--abrasivomx-envios-boton-ancho) !important;
	height: auto !important;
}

.abrasivomx-envio-servicio .abrasivomx-envio-servicio__boton--amarillo:hover { background: #e09703 !important; }

.abrasivomx-envio-servicio__boton--azul {
	background: var(--abrasivomx-envios-azul);
	color: #ffffff !important;
}

.abrasivomx-envio-servicio__boton--azul:hover { background: #060e4f; }

/* -- La banda que las contiene -------------------------------------------- */

/* La sección traía fondo negro, y el negro no vivía solo en la sección: también
   en el contenedor del widget del titular. Se identifican por contener nuestro
   marcado y no por su id, que cambia si alguien vuelve a abrir la página en el
   editor. */
.elementor-widget-container:has(> .abrasivomx-envios) {
	background-color: transparent !important;
	background-image: none !important;
}

/* La banda gris va de orilla a orilla. El ancho sale de la variable que publica
   js/slider.js -el ancho de la ventana sin la barra de scroll-, porque 100vw sí
   la cuenta y dejaría la franja unos pixeles corrida. */
.elementor-section:has(.abrasivomx-envios),
.elementor-element:has(> .e-con-inner > .elementor-widget .abrasivomx-envios) {
	--abrasivomx-banda: var(--abrasivomx-vw, 100vw);
	width: var(--abrasivomx-banda) !important;
	max-width: none !important;
	margin-left: calc(50% - var(--abrasivomx-banda) / 2) !important;
	margin-right: 0 !important;
	background-color: #f4f4f4 !important;
}

.elementor-element:has(> .e-con-inner > .elementor-widget .abrasivomx-envios) {
	padding-top: 46px !important;
	padding-bottom: 0 !important;
}

.elementor-section:has(.abrasivomx-envios) {
	padding-top: 0 !important;
	padding-bottom: 56px !important;
	/* Sin hueco por debajo: la banda del blog arranca pegada, como en la
	   propuesta. */
	margin-bottom: 0 !important;
}

.elementor-section:has(.abrasivomx-envios) > .elementor-container {
	max-width: none !important;
	padding: 0 !important;
}

/* Las tres columnas de la fila negra dejan de repartir el ancho: el bloque
   entero lo arma un solo marcado, así que la que lo lleva ocupa todo y las
   otras dos desaparecen -si solo se ocultara el widget, su columna seguiría
   apartando un tercio de la fila-. */
.elementor-section:has(.abrasivomx-envios) .elementor-column:has(.abrasivomx-envios) {
	width: 100% !important;
}

.elementor-section:has(.abrasivomx-envios) .elementor-column:has(.abrasivomx-envios-vacio) {
	display: none !important;
}

/* Justo encima de la banda hay un contenedor vacío de 25px pintado de naranja,
   que servía de separador contra el negro que había abajo. Con la banda gris ya
   no separa nada: corta la página en dos por un motivo que dejó de existir.

   Se identifica por estar inmediatamente antes del bloque, no por su id. El
   :has() no admite otro :has() adentro, así que la condición va como
   descendiente y no como segundo :has(). */
.elementor-element:not(:has(.abrasivomx-envios)):has(+ .elementor-element .abrasivomx-envios) {
	display: none !important;
}

/* -- En pantalla angosta ---------------------------------------------------

   La propuesta móvil arma el bloque de otra forma: el amarillo deja de ser la
   tarjeta de las condiciones y pasa a ser el marco de la caja, con el texto
   suelto debajo, centrado y sin viñetas. Los tamaños salen de la página de
   1080 de la propuesta leídos como proporción del ancho: 64px de titular y de
   cuerpo son 5.93vw, 60px de título de tarjeta 5.56vw y 70px de botón 6.48vw. */

@media (max-width: 860px) {
	.abrasivomx-envios,
	.abrasivomx-envios__titulo,
	.abrasivomx-envio-servicio__titulo {
		text-align: center !important;
	}

	.abrasivomx-envios__titulo { font-size: clamp(21px, 5.93vw, 44px) !important; }

	.abrasivomx-envios__tarjeta {
		display: flex;
		flex-direction: column-reverse;
		gap: 26px;
		padding: 0;
		border: 0;
	}

	.abrasivomx-envios__paquete {
		position: static;
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		/* La caja ocupa el 56% del recuadro y se apoya en su base. */
		padding: 4.4% 21.5% 1.6%;
		border-radius: 22px;
		background: var(--abrasivomx-envios-amarillo);
	}

	.abrasivomx-envios__condiciones {
		padding: 0;
		background: transparent;
		text-align: center;
	}

	.abrasivomx-envios__condiciones li {
		padding-left: 0;
		font-size: clamp(18px, 5.93vw, 24px);
	}

	.abrasivomx-envios__condiciones li::before { content: none; }

	.abrasivomx-envio-servicio { align-items: center; }

	.abrasivomx-envio-servicio__titulo { font-size: clamp(17px, 5.56vw, 24px) !important; }

	.abrasivomx-envios {
		--abrasivomx-envios-boton: clamp(20px, 6.48vw, 24px);
		/* 440 de los 1080 de la propuesta. */
		--abrasivomx-envios-boton-ancho: min(40.8vw, 200px);
	}

	.abrasivomx-envios__servicios {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}