/**
 * Página de marcas: el muro de logos por industria.
 *
 * No reusa las clases del carrusel a propósito. Ahí el logo va suelto sobre el
 * fondo y con alto fijo, porque es una franja que se desplaza; acá va dentro de
 * una tarjeta blanca en una grilla que envuelve, y el alto lo manda la celda.
 */

.ax-marcas {
	--ax-marcas-cols: 11;
	--ax-marcas-gap: 14px;
	--ax-marcas-radio: 12px;
	--ax-marcas-rojo: #de1a1c;
}

/* ── Pastillas de filtro ─────────────────────────────────────────────────── */

.ax-marcas__filtro {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ax-marcas__pastilla {
	/* border/font/cursor: sin efecto en el <a> de cada industria, pero
	   necesario para que el <button> de "Limpiar filtro" (mismo bloque, más
	   abajo) no herede el estilo nativo del navegador. */
	border: 0;
	font: inherit;
	cursor: pointer;
	padding: 10px 20px;
	border-radius: 999px;
	background: #ececec;
	color: #202224;
	font-size: 0.9rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

/* Nombre de industria largo: se corta con «…» en vez de sobresalir de la
   pantalla. El botón "Limpiar" queda fuera porque lleva un ícono al lado. */
.ax-marcas__pastilla:not(.ax-marcas__pastilla--limpiar) {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ax-marcas__pastilla:hover {
	background: #dcdcdc;
}

.ax-marcas__pastilla:focus-visible {
	outline: 2px solid var(--ax-marcas-rojo);
	outline-offset: 2px;
}

.ax-marcas__pastilla--activa {
	background: var(--ax-marcas-rojo);
	color: #fff;
}

/* Botón "Limpiar filtro": distinto a propósito de las pastillas de
   industria — es una acción de reset, no una opción más de filtro. Sin
   relleno, borde fino en rojo; el script la muestra solo con un filtro
   activo (ver marcas.js).
   La aparición/desaparición se anima con opacidad+escala en vez del salto
   de golpe de `hidden`: el script saca ese atributo una sola vez, la
   primera vez que hace falta mostrar el botón, y de ahí en más alterna
   `.is-visible` — así hay algo que transicionar tanto al mostrar como al
   ocultar (con `hidden` puesto y sacado en cada clic, el navegador nunca
   llega a animar el cambio). */
.ax-marcas__pastilla--limpiar {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: none;
	color: var(--ax-marcas-rojo);
	box-shadow: inset 0 0 0 1px var(--ax-marcas-rojo);
	opacity: 0;
	transform: scale(0.85);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

/* El `display: inline-flex` de arriba le gana en especificidad al
   `[hidden] { display:none }` que trae el navegador — sin esto el botón
   queda visible (aunque transparente) desde la carga de la página. Se
   pierde recién cuando el script saca `hidden` para animar la primera
   aparición. */
.ax-marcas__pastilla--limpiar[hidden] {
	display: none;
}

.ax-marcas__pastilla--limpiar.is-visible {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.ax-marcas__pastilla--limpiar::before {
	content: "\2715";
	font-size: 0.7em;
}

.ax-marcas__pastilla--limpiar:hover {
	background: var(--ax-marcas-rojo);
	color: #fff;
}

/* ── Bloques ─────────────────────────────────────────────────────────────── */

/* 4rem: mismo ritmo vertical que separa las secciones del resto del sitio
   (.section del tema). En todos los bloques, no solo entre uno y el
   siguiente: separa igual al primero de las pastillas de filtro de arriba. */
.ax-marcas__bloque {
	margin-block-start: 4rem;
}

.ax-marcas__bloque[hidden] {
	display: none;
}

.ax-marcas__titulo {
	margin: 0 0 20px;
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	font-weight: 600;
	color: #202224;
}

/* ── Grilla de logos ─────────────────────────────────────────────────────── */

/* `minmax(0, 1fr)` y no `1fr`: con `1fr` una imagen ancha impone su tamaño
   mínimo a la columna y la fila se desborda en vez de encogerse. */
.ax-marcas__grilla {
	display: grid;
	grid-template-columns: repeat(var(--ax-marcas-cols), minmax(0, 1fr));
	gap: var(--ax-marcas-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ax-marcas__celda {
	display: flex;
}

.ax-marcas__marca {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 12px;
	border-radius: var(--ax-marcas-radio);
	background: #fff;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Los logos vienen de todos los tamaños y proporciones: `contain` los deja
   ópticamente alineados sin recortar ninguno ni normalizar los archivos. */
.ax-marcas__marca img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	-webkit-user-drag: none;
	user-select: none;
}

.ax-marcas__marca:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 0 2px var(--ax-marcas-rojo), 0 6px 18px rgb(0 0 0 / 8%);
}

.ax-marcas__marca:focus-visible {
	outline: 2px solid var(--ax-marcas-rojo);
	outline-offset: 3px;
}

/* Solo existe en el archivo de industria, donde el logo filtra en vez de
   navegar (ver andexport_marcas_logo en pagina-marcas.php). */
.ax-marcas__marca--activa {
	box-shadow: 0 0 0 2px var(--ax-marcas-rojo);
}

.ax-marcas[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

/* Marca sin logo cargado: mejor su nombre que un hueco en medio del muro. */
.ax-marcas__nombre {
	color: #202224;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	overflow-wrap: anywhere;
}

/* ── Pantallas chicas ────────────────────────────────────────────────────── */

/* Se baja el número de columnas, nunca se sube: once logos por fila en un
   teléfono son once manchas ilegibles. */
@media (max-width: 1024px) {
	.ax-marcas__grilla {
		grid-template-columns: repeat(min(var(--ax-marcas-cols), 5), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.ax-marcas {
		--ax-marcas-gap: 10px;
	}

	.ax-marcas__grilla {
		grid-template-columns: repeat(min(var(--ax-marcas-cols), 3), minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.ax-marcas__marca,
	.ax-marcas__pastilla {
		transition: none;
	}

	.ax-marcas__marca:hover {
		transform: none;
	}
}