/**
 * Carruseles de Andexport.
 *
 * Todo lo que cambia entre un carrusel y otro está en las variables de arriba:
 * el shortcode escribe --ax-cols-esc y --ax-ratio en el atributo style y el
 * resto se calcula solo. Para retocar un carrusel puntual basta con darle una
 * clase por el atributo `clase` y redefinir la variable.
 *
 * El desplazamiento es scroll nativo: sin JS el carrusel sigue siendo usable
 * con el dedo, el trackpad y el tabulador. Las flechas son un agregado.
 */

.ax-carrusel {
	--ax-cols: var(--ax-cols-esc, 4);
	--ax-gap: 24px;
	--ax-radio: 12px;
	--ax-ratio: 5 / 7;
	--ax-relleno: clamp(14px, 7%, 24px);
	--ax-rojo: var(--color-brand-red, #de1a1c);
	--ax-flecha: 40px;

	/* Gris de la flecha que ya no tiene recorrido hacia ese lado. Va en variable
	   y no suelto en la regla porque es el único color del carrusel que no es ni
	   el rojo de la marca ni un gris de texto: si el diseño lo mueve, se cambia
	   acá y valen los cuatro carruseles. */
	--ax-flecha-apagada: #d9d9d9;

	/* Caja del logo de marca. Los dos límites trabajan juntos: el alto manda en
	   los logos cuadrados o casi (isotipos) y el ancho manda en los apaisados
	   (logotipos con el nombre al lado). Igualar solo el alto —que es lo que
	   hacía antes— le daba al apaisado cuatro veces más superficie que al
	   cuadrado, y por eso el cuadrado se veía diminuto al lado del resto. */
	--ax-marca-alto: 34px;
	--ax-marca-ancho: 42%;

	/* Líneas que el panel de la tarjeta reserva aunque el texto no las use, para
	   que todos los paneles de un carrusel terminen del mismo alto. Son las que
	   ocupa hoy el título o la bajada más largos; si un carrusel necesita otro
	   número, redefine la variable por su clase.

	   Reservar el alto no es lo mismo que empujar el texto hacia arriba: el
	   título se apoya en el fondo de su caja (ver .ax-tarjeta__titulo), así que
	   uno de una línea queda al mismo nivel que la última línea de uno de dos y
	   el sobrante sube. */
	--ax-lineas-titulo: 2;
	--ax-lineas-bajada: 3;

	position: relative;
}

/* En pantallas chicas manda el ancho de la tarjeta, no lo que se pidió en el
   shortcode: se baja el número de columnas, pero nunca se sube. */
@media (max-width: 1024px) {
	.ax-carrusel {
		--ax-cols: min(var(--ax-cols-esc, 4), 3);
		--ax-gap: 20px;
	}
}

@media (max-width: 767px) {
	.ax-carrusel {
		--ax-cols: min(var(--ax-cols-esc, 4), 1.15);
		--ax-gap: 14px;
	}
}

/* Los logos son anchos y bajos: bajar a 1,15 columnas como las tarjetas
   dejaría un logo gigante y solitario en el teléfono. */
@media (max-width: 1024px) {
	.ax-carrusel--marcas {
		--ax-cols: min(var(--ax-cols-esc, 4), 4);
	}
}

@media (max-width: 767px) {
	.ax-carrusel--marcas {
		--ax-cols: min(var(--ax-cols-esc, 4), 2.3);
	}
}

/* ── Buscador ────────────────────────────────────────────────────────────── */

.ax-carrusel__buscador {
	position: relative;
}

.ax-carrusel__buscador-icono {
	position: absolute;
	top: 50%;
	left: 34px;
	transform: translateY(-50%);
	color: #DE1A1C;
	pointer-events: none;
}

.ax-carrusel__buscador-input {
	box-sizing: border-box;
	padding: 14px 44px 14px 48px;
	border: 2px solid #DBDBDB !important;
	border-radius: 50px !important;
	background: linear-gradient(90deg, #F2F2F2 0%, #FFF 100%);
	font: inherit;
	color: inherit;
	padding: 10px 64px !important;
}

.ax-carrusel__buscador-input::placeholder {
	color: #8a8a8a;
}

.ax-carrusel__buscador-input:focus {
	outline: 2px solid var(--ax-rojo);
	outline-offset: 1px;
}

/* Safari y Chrome le agregan una «x» propia al campo de búsqueda: se apaga
   porque el botón de acá abajo hace lo mismo y las dos juntas quedaban
   pisadas una sobre la otra. */
.ax-carrusel__buscador-input::-webkit-search-cancel-button {
	display: none;
}

/* Anidado en .ax-carrusel a propósito, no por gusto: el kit global de
   Elementor peina todos los <button> del sitio (.elementor-kit-N button) con
   su relleno, su rojo y su radio propios. Con una sola clase esa regla ganaba
   por especificidad y el botón salía un óvalo rojo sin la «x» adentro. Con la
   clase del contenedor delante gana esta, igual que con .ax-carrusel__flecha
   más abajo. */
.ax-carrusel .ax-carrusel__buscador-limpiar {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #8a8a8a;
	cursor: pointer;
}

.ax-carrusel .ax-carrusel__buscador-limpiar:hover,
.ax-carrusel .ax-carrusel__buscador-limpiar:focus-visible {
	background: #f0f0f0;
	color: #4a4a4a;
}

.ax-carrusel .ax-carrusel__buscador-limpiar[hidden] {
	display: none;
}

.ax-carrusel__sin-resultados {
	text-align: center;
	padding: 40px 20px;
	color: #6a6a6a;
}

/* ── Cabecera: pestañas + flechas ────────────────────────────────────────── */

/* `flex-end` y no `space-between`: cuando no hay pestañas el mando es el único
   hijo, y con space-between se iría al borde izquierdo. Con las pestañas
   ocupando el espacio sobrante (flex:1), el resultado es el mismo en los dos
   casos y las flechas quedan siempre a la derecha. */
.ax-carrusel__cabecera {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
}

.ax-carrusel__mando {
	display: flex;
	flex: 0 0 auto;
	gap: 12px;
}

/* En un teléfono las flechas y las pestañas se pelean por la misma fila, y
   entre las dos gana la que se puede usar con el dedo: el carrusel se desliza
   igual sin ellas. Solo se van donde estorban, no en el carrusel de tarjetas. */
@media (max-width: 767px) {
	.ax-carrusel--pestanas .ax-carrusel__mando {
		display: none;
	}
}

/* Va anidado en .ax-carrusel a propósito, no por gusto: el kit global de
   Elementor peina todos los <button> del sitio (.elementor-kit-N button) con su
   relleno y su radio, y el reset del tema les pone width auto. Las dos reglas le
   ganaban a esta cuando llevaba una sola clase, y el botón terminaba siendo un
   rectángulo de 62x40 con las esquinas apenas redondeadas en vez del círculo.
   Con la clase del contenedor delante gana por especificidad y sin !important. */
.ax-carrusel .ax-carrusel__flecha {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ax-flecha);
	height: var(--ax-flecha);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ax-rojo);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

/* El color no cambia al pasar el mouse: el botón habilitado es rojo y se queda
   rojo, y lo único que responde es el tamaño. Van declarados igual porque el kit
   de Elementor peina `button:hover` y `button:focus` del sitio entero y, sin
   esto, la flecha se repintaba sola con el color del tema en cuanto el puntero
   la tocaba. Mismo motivo que el selector anidado de acá arriba. */
.ax-carrusel .ax-carrusel__flecha:hover,
.ax-carrusel .ax-carrusel__flecha:focus,
.ax-carrusel .ax-carrusel__flecha:active {
	background: var(--ax-rojo);
	color: #fff;
}

.ax-carrusel__flecha:hover:not([disabled]) {
	transform: scale(1.08);
}

/* La flecha sin recorrido cambia de fondo, no de flecha: el trazo sigue blanco
   como en el botón activo. Antes también se apagaba el icono, y un gris claro
   sobre gris claro se leía como una flecha rota más que como una deshabilitada.
   El :hover repetido es para que el gris le gane al rojo de acá arriba. */
.ax-carrusel .ax-carrusel__flecha[disabled],
.ax-carrusel .ax-carrusel__flecha[disabled]:hover,
.ax-carrusel .ax-carrusel__flecha[disabled]:focus {
	background: var(--ax-flecha-apagada);
	color: #fff;
	cursor: default;
}

/* El trazado del icono apunta a la izquierda, así que el que se voltea es
   «siguiente». Si algún día se cambia el SVG por uno que mire a la derecha,
   hay que mover este selector a [data-ax-dir="prev"]. */
.ax-carrusel__flecha[data-ax-dir="next"] .ax-carrusel__icono {
	transform: scaleX(-1);
}

/* El JS aún no corre: hasta entonces las flechas no hacen nada, así que no se
   muestran. La clase la pone el propio script al inicializar. */
.ax-carrusel:not(.ax-listo) .ax-carrusel__mando {
	visibility: hidden;
}

/* ── Pestañas ────────────────────────────────────────────────────────────── */

/* Nueve industrias entran de sobra en escritorio, pero no en un teléfono:
   la propia barra se desplaza en horizontal en vez de apilarse en dos filas. */
.ax-pestanas {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	gap: clamp(12px, 1.6vw, 20px);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ax-pestanas::-webkit-scrollbar {
	display: none;
}

/* Cuando las pestañas no caben, el corte seco no se lee como «hay más»: el
   degradado en el borde sí. Las clases las pone el JS según haya recorrido
   pendiente hacia un lado, hacia el otro o hacia los dos. */
.ax-pestanas.ax-borde-fin {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
}

.ax-pestanas.ax-borde-ini {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent);
	mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent);
}

.ax-pestanas.ax-borde-ini.ax-borde-fin {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent);
}

.ax-pestana {
	position: relative;
	flex: 0 0 auto;
	padding: 0 0 10px;
	border: 0;
	background: none;
	color: #6f6c6a;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	scroll-snap-align: start;
	cursor: pointer;
	transition: color 0.2s ease;
}

.ax-pestana::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 3px;
	border-radius: 3px;
	background: var(--ax-rojo);
	transform: scaleX(0);
	transition: transform 0.25s ease;
}

.ax-pestana:hover {
	color: #202224;
}

.ax-pestana--activa {
	color: #121212;
	font-weight: 700;
}

.ax-pestana--activa::after {
	transform: scaleX(1);
}

.ax-pestana:focus-visible {
	outline: 2px solid var(--ax-rojo);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ── Paneles ─────────────────────────────────────────────────────────────── */

/* Los paneles ocultos se rinden con display:none a propósito: las imágenes
   `lazy` que hay dentro no se descargan hasta que se abre su pestaña, así que
   la página carga solo los logos de la industria visible y cambiar de pestaña
   no cuesta ni una petición de más después de la primera vez. */
.ax-panel[hidden] {
	display: none;
}

/* ── Pista ───────────────────────────────────────────────────────────────── */

.ax-carrusel__pista {
	/* Aire alrededor de las tarjetas: `overflow` recorta todo lo que se salga de
	   la pista, y lo que se sale es la sombra y el -3px que sube la tarjeta al
	   pasar el mouse. El margen negativo devuelve ese aire, así que la pista
	   sigue empezando y terminando donde el contenedor. */
	--ax-aire-pista: 20px;

	display: flex;
	gap: var(--ax-gap);
	margin: 0 calc(-1 * var(--ax-aire-pista));
	padding: 30px var(--ax-aire-pista);
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;

	/* Sin esto el anclaje de la primera tarjeta cae dentro del relleno y el
	   carrusel descansa en scrollLeft 20 en vez de 0: la tarjeta queda 20px a la
	   izquierda del contenedor y, peor, la flecha «anterior» no se apaga nunca,
	   porque para el navegador el recorrido ya empezó. Es el mismo motivo por el
	   que la franja de marcas lleva su propio scroll-padding más abajo. */
	scroll-padding-inline-start: var(--ax-aire-pista);


	/* Que el gesto no arrastre la página entera al llegar al final. */
	overscroll-behavior-inline: contain;

	/* La barra sobra: para eso están las flechas y el arrastre. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ax-carrusel__pista::-webkit-scrollbar {
	display: none;
}

/* Las tarjetas siguen hasta el borde de la ventana en vez de cortarse en el
   contenedor. --ax-vw lo escribe el JS con el ancho sin barra de scroll; el
   100vw de respaldo se pasa unos pocos píxeles y no es un problema. */
.ax-carrusel--sangrado .ax-carrusel__pista {
	--ax-borde: calc(50% - var(--ax-vw, 100vw) / 2);

	margin-inline-end: var(--ax-borde);
	padding-inline-end: max(16px, calc(-1 * var(--ax-borde)));
}

/* Sangrado por los dos lados, para la franja de marcas: en reposo el primer
   logo sigue alineado con el contenedor —el relleno lo compensa—, y al
   desplazarse los logos se van por ambos bordes en vez de cortarse en seco.
   El scroll-padding es lo que mantiene el anclaje pegado al contenedor y no
   al borde de la ventana.

   --ax-desborde es cuánto se sale la pista por cada lado, y no puede pasar del
   hueco que el contenedor deja libre hasta el borde de la ventana: si la
   sección ya ocupa el ancho completo ese hueco es cero y cualquier margen
   negativo le agrega scroll horizontal a la página entera. --ax-aire es el
   relleno interior, que conserva un mínimo para que el primer logo no quede
   pegado al borde. Los dos los escribe el JS en píxeles, y tienen que ser en
   píxeles: los porcentajes de `scroll-padding` se resuelven contra el
   scrollport (que acá es la ventana entera por el propio sangrado) y no contra
   el contenedor, así que la misma expresión daba dos valores distintos y la
   pista arrancaba desplazada. Sin JS los valores de respaldo dejan la franja
   alineada y sin sangrado, que es correcto aunque menos vistoso. */
.ax-carrusel--sangrado-ambos .ax-carrusel__pista {
	--ax-desborde: 0px;
	--ax-aire: 16px;

	margin-inline: calc(-1 * var(--ax-desborde));
	padding-inline: var(--ax-aire);
	scroll-padding-inline-start: var(--ax-aire);
}

/* Degradado de salida en los bordes con más recorrido (clases del JS). La
   máscara se aplica a la pista, que ya incluye el aire de 20px, así que el
   desvanecido cae justo donde se corta la tarjeta. */
.ax-carrusel__pista {
	--ax-fade: 72px;
}

.ax-carrusel__pista.ax-fade-fin {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--ax-fade)), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - var(--ax-fade)), transparent);
}

.ax-carrusel__pista.ax-fade-ini {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--ax-fade)), transparent);
	mask-image: linear-gradient(to left, #000 calc(100% - var(--ax-fade)), transparent);
}

.ax-carrusel__pista.ax-fade-ini.ax-fade-fin {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--ax-fade), #000 calc(100% - var(--ax-fade)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--ax-fade), #000 calc(100% - var(--ax-fade)), transparent);
}

@media (max-width: 767px) {
	.ax-carrusel__pista {
		--ax-fade: 40px;
	}
}

.ax-carrusel__diapo {
	flex: 0 0 calc((100% - (var(--ax-cols) - 1) * var(--ax-gap)) / var(--ax-cols));
	scroll-snap-align: start;
}

/* Pista sin desborde real: la pone el JS (ver `estado()` en carrusel.js)
   midiendo scrollWidth contra clientWidth, no contando diapositivas. Con
   pestañas cada panel puede traer una cantidad distinta —una industria con
   una sola marca cargada, por ejemplo— y esta clase actúa panel por panel en
   vez de sobre el carrusel entero. */
.ax-carrusel__pista--centrada {
	justify-content: center;
}

/* ── Variante grilla ─────────────────────────────────────────────────────
   Mismas tarjetas, mismo motor: solo cambia cómo se acomodan. Pensada para
   listados que no necesitan desplazarse, como las subcategorías de una
   industria. --ax-cols-grilla-esc es la versión entera de las columnas
   pedidas en el shortcode —`repeat()` no acepta fracciones— y se recorta en
   los mismos puntos de quiebre que el resto del carrusel. */
.ax-carrusel--grilla {
	--ax-cols-grilla: var(--ax-cols-grilla-esc, 4);
}

@media (max-width: 1024px) {
	.ax-carrusel--grilla {
		--ax-cols-grilla: min(var(--ax-cols-grilla-esc, 4), 3);
	}
}

@media (max-width: 767px) {
	.ax-carrusel--grilla {
		--ax-cols-grilla: min(var(--ax-cols-grilla-esc, 4), 2);
	}
}

/* Flexbox en vez de grid a propósito: con `repeat(N, 1fr)` una fila con menos
   de N tarjetas las estira para llenar las columnas vacías. Acá cada tarjeta
   mide siempre 1/N del ancho —igual que en el carrusel, ver .ax-carrusel__diapo
   más abajo— y `justify-content: center` centra la fila cuando sobra espacio;
   con la fila completa el efecto es el mismo que con grid. */
.ax-carrusel--grilla .ax-carrusel__pista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	overflow: visible;
	scroll-snap-type: none;
}

.ax-carrusel--grilla .ax-carrusel__diapo {
	flex: 0 0 calc((100% - (var(--ax-cols-grilla) - 1) * var(--ax-gap)) / var(--ax-cols-grilla));
	scroll-snap-align: none;
}

/* El sangrado (desbordar hasta el borde de la ventana) es un efecto de
   scroll horizontal; en la grilla no debe recortar ni desplazar el borde. */
.ax-carrusel--grilla.ax-carrusel--sangrado .ax-carrusel__pista,
.ax-carrusel--grilla.ax-carrusel--sangrado-ambos .ax-carrusel__pista {
	margin-inline: calc(-1 * var(--ax-aire-pista));
	padding-inline: var(--ax-aire-pista);
}

/* Durante el arrastre el snap pelea con el movimiento del mouse. */
/* Solo se apaga el anclaje: repetir acá el relleno —como estaba— le cambiaba el
   alto a la pista justo al empezar a arrastrar, y la fila entera pegaba un salto
   de 10px bajo el dedo. */
.ax-carrusel__pista.ax-arrastrando {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

/* ── Tarjeta ─────────────────────────────────────────────────────────────── */

.ax-tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: var(--ax-ratio);
	padding: var(--ax-relleno);
	border-radius: var(--ax-radio);
	overflow: hidden;
	background: #2b2b2b;
	isolation: isolate;
}

.ax-tarjeta__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.ax-tarjeta__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
	-webkit-user-drag: none;
	user-select: none;
}

/* Velo para que el título blanco se lea sobre cualquier foto. */
.ax-tarjeta__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.82) 0%,
		rgba(0, 0, 0, 0.55) 32%,
		rgba(0, 0, 0, 0.1) 62%,
		rgba(0, 0, 0, 0) 100%
	);
}

.ax-tarjeta:hover .ax-tarjeta__media img {
	transform: scale(1.06);
}

/* Vidrio esmerilado, traducido del panel Glass de Figma (luz -45° al 80%,
   refracción 80, profundidad 20, dispersión 50, escarcha 4, splay 0).

   La traducción no es literal y no puede serlo: refracción y dispersión son
   cosas que Figma resuelve con un shader y CSS no tiene: no existe forma de
   desviar el fondo ni de separarlo en colores. Lo que sí hay es desenfoque del
   fondo y brillos de canto, así que el espesor lo cargan esos dos. La luz a
   -45° entra por arriba a la izquierda —de ahí el brillo fuerte en ese canto y
   el apenas encendido en el opuesto—, y splay 0 la mantiene sin difuminar, por
   eso los brillos van con radio 0. */
.ax-tarjeta__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	border-radius: 24px;

	/* El tinte base va en background-color y no en el degradado a propósito:
	   Elementor, mientras no marca la sección como cargada, anula el
	   background-image de todo lo que hay dentro con una regla más específica
	   que esta. Un color no se lo lleva esa regla, así que el panel nunca queda
	   sin vidrio; el degradado solo agrega la dirección de la luz cuando entra. */
	background-color: rgba(255, 255, 255, 0.10);
	background-image: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.06) 0%,
		rgba(255, 255, 255, 0) 55%,
		rgba(255, 255, 255, 0.02) 100%
	);

	/* La saturación es el sustituto de la refracción: el vidrio real concentra
	   el color de lo que hay detrás, y subirla da esa lectura sin desviar nada. */
	backdrop-filter: blur(12px) saturate(1.5);
	-webkit-backdrop-filter: blur(12px) saturate(1.5);

	box-shadow:
		/* canto iluminado y canto en sombra: el espesor del vidrio */
		inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.55),
		inset -1px -1px 0 rgba(255, 255, 255, 0.14),
		/* dispersión insinuada con dos tintes opuestos en los cantos; es lo más
		   lejos que llega CSS y es la línea a borrar si se ve recargado */
		inset 2px 2px 1px rgba(150, 220, 255, 0.10),
		inset -2px -2px 1px rgba(255, 150, 210, 0.08),
		0 8px 32px rgba(0, 0, 0, 0.28);
}

/* Sin backdrop-filter el panel queda transparente sobre la foto y el texto se
   pierde: ahí el fondo pasa a ser opaco y se cambia vidrio por legibilidad. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ax-tarjeta__cuerpo {
		background-color: rgba(28, 28, 30, 0.62);
	}
}

.ax-tarjeta__titulo {
	margin: 0;
	color: #fff;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;

	/* La caja reserva las líneas del título más largo del carrusel —de ahí que
	   todos los paneles terminen del mismo alto— pero el texto se apoya en el
	   fondo: «Martor» queda pegado a su bajada igual que un título de dos
	   líneas, en vez de dejar el hueco debajo, y el sobrante se va arriba, que
	   es donde no se nota. El flex es lo que baja el texto dentro de la caja;
	   sin él, min-height solo agranda la caja y el texto se queda arriba.

	   La primera declaración de min-height repite el 1.25 de acá arriba porque
	   `em` no sabe nada del line-height; la segunda lo toma solo con la unidad
	   `lh` y pisa a la primera donde el navegador la entiende. Si algún día
	   cambia el line-height, lo único que queda desincronizado es el respaldo. */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: calc(var(--ax-lineas-titulo) * 1.25em);
	min-height: calc(var(--ax-lineas-titulo) * 1lh);
}

/* De escritorio para abajo el título vuelve a escalar con el ancho: la tarjeta
   se angosta y el tamaño fijo de escritorio le agrega dos líneas al titular. */
@media (max-width: 1024px) {
	.ax-tarjeta__titulo {
		font-size: clamp(1rem, 1.35vw, 1.25rem);
	}
}

.ax-tarjeta__bajada {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.875rem;
	line-height: 1.4;

	/* Mismo par de min-height que el título, con el 1.4 de esta regla. */
	min-height: calc(var(--ax-lineas-bajada) * 1.4em);
	min-height: calc(var(--ax-lineas-bajada) * 1lh);
}

/* ── Botón ───────────────────────────────────────────────────────────────── */

.ax-tarjeta__cta {
	display: block;
	padding: 0.85em 1em;
	border-radius: 8px;
	background: #fff;
	color: #1a1a1a;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* El botón es el único enlace de la tarjeta y su sombra cubre toda la
   superficie: así se puede hacer clic en cualquier parte sin anidar enlaces
   ni repetir el destino dos veces para quien navega con lector de pantalla. */
.ax-tarjeta__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ax-tarjeta:hover .ax-tarjeta__cta,
.ax-tarjeta__cta:focus-visible {
	background: var(--ax-rojo);
	color: #fff;
}

.ax-tarjeta__cta:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Sin texto de botón la tarjeta entera sigue siendo un enlace. */
.ax-tarjeta__cta--oculto {
	position: static;
	padding: 0;
	background: none;
}

/* ── Industrias: misma tarjeta que el mega menú ──────────────────────────────
   Foto arriba (ocupa el alto que deja el nombre; la tarjeta conserva el alto
   original, por --ax-ratio) y el nombre abajo sobre el gris del sistema,
   con sombra y el radio de 16px del mega menú, en vez del panel de vidrio sobre
   la foto. Va acotado a la fuente «industrias» porque casos y soluciones
   comparten el HTML de .ax-tarjeta y conservan su diseño. El botón sigue en el
   HTML —es el único enlace y su ::after cubre la tarjeta entera—, solo se
   oculta a la vista como en el menú, que no lleva botón. */
.ax-carrusel--industrias .ax-tarjeta {
	justify-content: flex-start;
	padding: 0;
	border-radius: 16px;
	background: var(--color-bg-muted, #f3f4f6);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	isolation: auto;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ax-carrusel--industrias .ax-tarjeta:hover {
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
	transform: translateY(-2px);
}

.ax-carrusel--industrias .ax-tarjeta__media {
	position: relative;
	inset: auto;
	z-index: auto;
	flex: 1 1 0;
	min-height: 0;
	background: #fff;
}

.ax-carrusel--industrias .ax-tarjeta__media::after {
	display: none;
}

/* Absoluta dentro del recuadro: con height:100% sobre un padre que solo tiene
   aspect-ratio, la foto estiraba el recuadro a su alto natural. */
.ax-carrusel--industrias .ax-tarjeta__media {
	overflow: hidden;
}

.ax-carrusel--industrias .ax-tarjeta__media img {
	position: absolute;
	inset: 0;
}

.ax-carrusel--industrias .ax-tarjeta__cuerpo {
	flex: 0 0 auto;
	justify-content: center;
	gap: 0;
	padding: 0.75rem 1rem;
	border-radius: 0;
	background-color: var(--color-bg-muted, #f3f4f6);
	background-image: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
}

.ax-carrusel--industrias .ax-tarjeta__titulo {
	align-items: center;
	justify-content: center;
	color: var(--color-ink, #121212);
	font-size: 1rem;
	font-weight: 500;
	text-align: center;
}

.ax-carrusel--industrias .ax-tarjeta__bajada {
	margin-top: 4px;
	color: #5c5f63;
	text-align: center;
}

/* Sin texto ni fondo, pero sin clip-path: recortaría también el ::after que
   hace clicable la tarjeta entera. */
.ax-carrusel--industrias .ax-tarjeta__cta,
.ax-carrusel--industrias .ax-tarjeta:hover .ax-tarjeta__cta {
	height: 0;
	padding: 0;
	overflow: visible;
	background: none;
	color: transparent;
	font-size: 0;
	line-height: 0;
}

/* ── Casos de éxito ──────────────────────────────────────────────────────── */

.ax-carrusel--casos .ax-carrusel__cabecera {
    position: absolute;
    right: 0;
    top: -5rem;
}

/* La tarjeta de caso es apaisada, no vertical como la de industria: la foto es
   una instalación o un logo de marca —cosas anchas— y el panel de vidrio solo
   lleva título y botón, así que la proporción 5/7 de la tarjeta general dejaba
   media tarjeta de foto vacía arriba del panel.

   Las columnas van acá y no en el shortcode a propósito: 3,2 es parte del
   diseño de esta sección —la tarjeta cortada es lo que muestra que el carrusel
   sigue—, no una decisión que se tome carrusel por carrusel. El contrapeso es
   que `columnas` deja de tener efecto en fuente="casos"; si algún día hace
   falta volver a mandarlo desde el shortcode, se borran las tres líneas de
   --ax-cols de este bloque y sus media queries. */
.ax-carrusel--casos {
	--ax-cols: 3.2;
	--ax-radio: 30px;
}

/* aspect-ratio en la tarjeta y no --ax-ratio en la sección: esa variable la
   escribe el shortcode en el atributo style, y un estilo en línea le gana a
   cualquier regla de la hoja. Sobre el hijo no hay conflicto y no hace falta
   !important. */
.ax-carrusel--casos .ax-tarjeta {
	aspect-ratio: 7 / 6;
}

/* Flecha de «ir a» en la esquina de la tarjeta.

   El `margin-block-end: auto` es lo que la sube: la tarjeta apila hacia abajo
   (`justify-content: flex-end`), y ese margen automático se come el espacio
   libre entre la flecha y el panel de vidrio, así que la flecha queda arriba y
   el panel abajo sin sacar a ninguno de los dos del flujo. Posicionarla con
   `inset` era la otra opción y quedaba 2px más arriba de lo debido: --ax-relleno
   lleva un 7% dentro, y un porcentaje resuelve contra el ancho cuando es relleno
   pero contra el alto cuando es un desplazamiento. Como hija del flex usa el
   relleno de verdad y calza con el panel.

   No hace falta z-index: la foto va en -1 y todo lo demás le queda encima. La
   sombra del botón sí la tapa, con su z-index 1, y está bien que así sea: el
   clic de la tarjeta tiene que seguir siendo uno solo. */
.ax-carrusel--casos .ax-tarjeta__ir {
	flex: 0 0 auto;
	align-self: flex-start;
	margin-block-end: auto;
	color: var(--ax-rojo);
	transition: transform 0.25s ease;
}

.ax-carrusel--casos .ax-tarjeta:hover .ax-tarjeta__ir {
	transform: translate(2px, -2px);
}

/* Mismos cortes que el carrusel general, repetidos acá porque estas reglas van
   después en el archivo y si no le ganarían a las media queries de arriba: el
   teléfono se quedaría con las 3,2 columnas de escritorio. */
@media (max-width: 1024px) {
	.ax-carrusel--casos {
		--ax-cols: 2.2;
	}
}

@media (max-width: 767px) {
	.ax-carrusel--casos {
		--ax-cols: 1.15;
	}
}

/* ── Marca (logo suelto) ─────────────────────────────────────────────────── */

/* Los logos vienen de todos los tamaños y proporciones. `contain` dentro de
   una celda de proporción fija los deja ópticamente alineados sin recortar
   ninguno ni obligar a normalizar los archivos a mano. */
.ax-carrusel--marcas {
    display: flex;
    flex-direction: column;
    padding: 2.5em 0 2rem;
    background: var(--color-white);
    box-shadow: 12px 12px 39px 0 rgba(158, 158, 158, 0.22), 5px 10px 10px 0 rgba(233, 233, 233, 0.25) inset, -6px -8px 10px 0 rgba(248, 248, 248, 0.25) inset;
}

/* `contents` deja pasar a .ax-pestanas y .ax-carrusel__mando como hijos
   directos del flex column de acá arriba, para poder mandar las flechas
   abajo de los paneles con `order` sin tocar el HTML genérico del carrusel
   (lo comparten industrias/productos/casos/catálogos). */
.ax-carrusel--marcas .ax-carrusel__cabecera {
	display: contents;
}

.ax-carrusel--marcas .ax-pestanas {
	/* `width: 100%` explícito porque `align-items: stretch` (el default) no
	   termina de aplicarse en un hijo promovido por `display: contents` que
	   además tiene `overflow-x: auto`: sin esto el ancho salía por el
	   contenido —la suma de las pestañas sin envolver— en vez de por el
	   contenedor, y ese desborde termina moviendo el scroll horizontal de
	   toda la página, no solo el de la franja de pestañas. */
	width: 100%;
	margin: 0 auto 1.5rem;
	max-width: 1200px;
	padding-inline: 1rem;
	/* Con scroll-snap activo (ver .ax-pestanas), el navegador ajusta el
	   scroll inicial para que la primera pestaña quede pegada al borde del
	   scrollport, comiéndose el padding-inline de este mismo lado. Sin esto
	   la pestaña queda a ras del borde en vez de con el respiro del padding. */
	scroll-padding-inline: 1rem;
	/* `safe` centra solo si caben; si no, empiezan desde el borde en vez de
	   cortar la primera pestaña. */
	justify-content: safe center;
}

/* En escritorio las pestañas caben centradas, pero en un teléfono o tablet
   se desbordan: centrarlas deja la primera pestaña a medio cortar en el
   borde izquierdo en vez de empezar a la vista. */
@media (max-width: 1023px) {
	.ax-carrusel--marcas .ax-pestanas {
		justify-content: flex-start;
		margin: 0 2rem;
		/* El `width: 100%` de arriba más los 2rem de margen de cada lado sacaba
		   la barra 4rem fuera de la pantalla: al llegar al final del scroll la
		   última pestaña quedaba cortada por el borde de la ventana. */
		width: calc(100% - 4rem);
	}
}

/* Abajo de los logos y centradas, no arriba peleando el lugar con las
   pestañas: con 10+ industrias las pestañas ya llenan la fila entera. */
.ax-carrusel--marcas .ax-carrusel__mando {
	order: 1;
	justify-content: center;
	margin-top: 2rem;
}

@media (max-width: 767px) {
	.ax-carrusel--marcas .ax-carrusel__mando {
		display: flex;
	}
}

.ax-marca {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var(--ax-ratio);
	text-decoration: none;
	transition: transform 0.25s ease;
	padding: 0 20px;
}

@media (max-width: 767px) {
	.ax-marca {
		padding: 0;
	}
}

/* max-height (no height fijo ni min-height): igual que en
   automatizacion.css .automatizacion-marcas-grid img, varios logos de
   marca vienen en archivos fuente chicos (ej. Labthink 149×45) — forzar
   un alto mínimo los estiraba varias veces su tamaño real y salían
   pixelados. Los logos grandes se siguen achicando igual que antes. */
.ax-marca img {
	width: auto;
	height: auto;
	max-width: 80%;
	max-height: 80px;
	object-fit: contain;
	-webkit-user-drag: none;
	user-select: none;
}

.ax-marca:hover {
	transform: scale(1.05);
}

.ax-marca:focus-visible {
	outline: 2px solid var(--ax-rojo);
	outline-offset: 4px;
	border-radius: 6px;
}

/* Marca sin logo cargado: mejor su nombre que un hueco en medio de la franja. */
.ax-marca__nombre {
	color: #202224;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

/* ── Ficha de producto ───────────────────────────────────────────────────── */

/* Acá la proporción fija va en el marco de la foto y no en la tarjeta: el
   nombre puede ocupar una línea o tres, así que la tarjeta se estira a lo alto
   de la más alta de la fila y el botón se empuja al fondo. Sin esto los
   botones quedan a distinta altura y la fila se ve rota. */
.ax-carrusel--productos .ax-carrusel__diapo,
.ax-carrusel__diapo:has(.ax-producto) {
	display: flex;
}

/* El buscador oculta tarjetas con el atributo `hidden` nativo, pero la regla
   de acá arriba le pone `display: flex` a propósito —para que la tarjeta se
   estire a lo alto de la fila— con la misma especificidad, y esa regla ganaba
   por venir después. Sin esto una tarjeta "oculta" seguía ocupando su lugar
   en la grilla. */
.ax-carrusel__diapo[hidden] {
	display: none;
}

.ax-producto {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 20px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Menos relleno en teléfono: con dos tarjetas por fila, 20px a cada lado le
   quitaban demasiado ancho a la foto y al nombre. */
@media (max-width: 767px) {
	.ax-producto {
		padding: 16px;
	}
}

.ax-producto:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.11);
}

.ax-producto__marco {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var(--ax-ratio);
	border: 1px solid #ececec;
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

.ax-producto__marco img {
    width: auto;
    height: 100%!important;
    max-width: 100%!important;
    max-height: 100%!important;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
}

/* Producto sin foto propia: fondo gris claro (no blanco, para que no se
   confunda con "sin cargar") + isotipo achicado y atenuado en vez de la
   foto real. */
.ax-producto__marco--sinfoto {
    background: var(--color-fondo, #f5f5f5);
}

.ax-producto__marco-sinfoto {
    width: 45%!important;
    height: 45%!important;
    max-width: 45%!important;
    max-height: 45%!important;
    object-fit: contain!important;
    opacity: 0.16;
}

.ax-producto__marca {
	display: flex;
	align-items: center;
	height: var(--ax-marca-alto);
	margin: 18px 0 0;
}

/* Anidado en .ax-carrusel por lo mismo que las flechas: Elementor trae
   `.elementor img { max-width: 100% }`, que empata en especificidad con
   `.ax-producto__marca img` y carga después, así que le ganaba el tope de
   ancho y todos los logos salían estirados a la caja completa. Con la clase
   del contenedor delante gana por especificidad y sin !important. */
.ax-carrusel .ax-producto__marca img {
	width: auto;
	height: auto;
	max-width: var(--ax-marca-ancho);
	max-height: 100%;
	object-fit: contain;
	object-position: left center;
}

/* Marca sin logo cargado. */
.ax-producto__marca--texto {
	color: #8a8785;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ax-producto__titulo {
	margin: 10px 0 18px;
	color: #202224;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
}

.ax-producto__cta {
	display: block;
	margin-top: auto;
	padding: 0.85em 1em;
	border-radius: 8px;
	background: var(--ax-rojo);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

/* Igual que en la tarjeta de industria: el botón es el único enlace y su
   sombra cubre la ficha entera, para poder hacer clic en cualquier parte sin
   anidar enlaces ni repetir el destino para quien usa lector de pantalla. */
.ax-producto__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.ax-producto:hover .ax-producto__cta,
.ax-producto__cta:focus-visible {
	background: #b81416;
}

.ax-producto__cta:focus-visible {
	outline: 2px solid #202224;
	outline-offset: 3px;
}

/* En pantallas muy angostas cada catálogo ocupa todo el ancho (una columna).
   Se bajan las variables de columnas —la de la grilla y la del carrusel— en
   vez de pisar el flex de la diapositiva con !important. */
@media (max-width: 365px) {
	.ax-carrusel--catalogos,
	.ax-carrusel--catalogos.ax-carrusel--grilla {
		--ax-cols: 1;
		--ax-cols-grilla: 1;
	}
}

/* Grillas de productos: una columna en pantallas muy angostas (misma razón que
   los catálogos, arriba). */
@media (max-width: 350px) {
	.ax-carrusel--productos.ax-carrusel--grilla {
		--ax-cols-grilla: 1;
	}
}

/* ── Tarjeta de catálogo ─────────────────────────────────────────────────── */

/* Misma razón que en la ficha de producto: la diapositiva se estira para que
   los botones de descarga queden alineados aunque los títulos midan distinto. */
.ax-carrusel--catalogos .ax-carrusel__diapo,
.ax-carrusel__diapo:has(.ax-catalogo) {
	display: flex;
}

.ax-catalogo {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 24px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.ax-catalogo:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.11);
}

/* La portada es un montaje del PDF en perspectiva, con su propio fondo y su
   sombra: va sin marco ni borde, al revés que la foto de producto. */
.ax-catalogo__marco {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var(--ax-ratio);
	overflow: hidden;
}

.ax-catalogo__marco img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	-webkit-user-drag: none;
	user-select: none;
}

.ax-catalogo__titulo {
	margin: 0.9333em 0 0;
	color: #202224;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}

.ax-catalogo__lista {
	margin: 14px 0 22px;
	padding-inline-start: 1.1em;
	color: #5c5f63;
	font-size: 0.875rem;
	line-height: 1.5;
	list-style: disc;
}

.ax-catalogo__lista li + li {
	margin-top: 6px;
}

.ax-catalogo__cta {
	display: block;
	margin-top: auto;
	padding: 0.9em 1em;
	border-radius: 8px;
	background: var(--ax-rojo);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

/* El botón es el único enlace de la tarjeta y su sombra la cubre entera, igual
   que en las otras dos presentaciones. */
.ax-catalogo__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.ax-catalogo:hover .ax-catalogo__cta,
.ax-catalogo__cta:focus-visible {
	background: #b81416;
}

.ax-catalogo__cta:focus-visible {
	outline: 2px solid #202224;
	outline-offset: 3px;
}

/* ── Aviso de diagnóstico ────────────────────────────────────────────────── */

/* Solo se imprime para quien puede editar el sitio. Antes, un slug renombrado
   hacía desaparecer la sección entera sin decir nada. */
.ax-aviso {
	margin: 0 0 20px;
	padding: 14px 18px;
	border: 1px dashed #d9a441;
	border-radius: 8px;
	background: #fdf7e8;
	color: #6b5220;
	font-size: 0.875rem;
	line-height: 1.5;
}

.ax-aviso em {
	opacity: 0.75;
}

.ax-carrusel .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── Movimiento reducido ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.ax-carrusel--casos .ax-carrusel__cabecera {
		top: 0;
		position: relative;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ax-tarjeta__media img,
	.ax-tarjeta__ir,
	.ax-carrusel__flecha,
	.ax-pestana::after,
	.ax-marca,
	.ax-producto,
	.ax-catalogo {
		transition: none;
	}

	.ax-tarjeta:hover .ax-tarjeta__media img,
	.ax-tarjeta:hover .ax-tarjeta__ir,
	.ax-marca:hover,
	.ax-producto:hover,
	.ax-catalogo:hover {
		transform: none;
	}
}