/* DeFábrica Directo — «Nuestros departamentos» (referencia 01; especificación §9): tarjetas de categoría con foto,
   nombre y flecha. En la Home, en la página 404 y en las subcategorías de los listados. 8 columnas en escritorio
   grande, 6, 4 y 2. */

.departamentos {
	padding: 22px 0 28px;
	background: var(--df-fondo-suave);
}

.departamentos__titulo {
	margin-bottom: 14px;
}

.departamentos__lista {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.departamentos__lista > li {
	display: flex;
}

.departamento {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--df-borde-suave);
	border-radius: var(--df-radio);
	background: var(--df-blanco);
	color: var(--df-texto-fuerte);
	text-decoration: none;
	box-shadow: var(--df-sombra);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.departamento:hover {
	border-color: var(--df-borde-hover);
	box-shadow: 0 6px 18px rgba(20, 30, 40, 0.08);
}

.departamento__foto {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1.9 / 1;
	overflow: hidden;
	background: var(--df-campo);
	color: var(--df-texto-2);
}

/* Posición absoluta: en una rejilla con filas automáticas «height: 100%» no llega a la altura de la caja y una foto
   cuadrada se quedaba con su altura y se veía solo su mitad de arriba. */
.departamento__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.departamento:hover .departamento__foto img {
	transform: scale(1.04);
}

/* Categoría sin foto propia: la de su producto más vendido (dfd_foto_categoria()), entera y sobre blanco como en la
   tarjeta de producto. */
.departamento__foto--producto {
	background: var(--df-blanco);
}

.departamento__foto--producto img {
	padding: 6px;
	object-fit: contain;
}

.departamento__sin-foto {
	width: 30px;
	height: 30px;
}

.departamento__nombre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	min-height: 40px;
	padding: 8px 10px;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.25;
}

.departamento__nombre .icono {
	flex: none;
	width: 14px;
	height: 14px;
}

.departamento--todas {
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px 10px;
	font-size: 0.8125rem;
	font-weight: 500;
	text-align: center;
}

.departamento__icono {
	width: 34px;
	height: 34px;
}

@media (max-width: 1439px) {
	.departamentos__lista {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.departamentos__lista {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.departamentos__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}