/* Diez Clima – Catálogo filtrable.
   Los valores replican la sección "Productos" que ya está en el sitio:
   fondo #101828, imágenes cuadradas con radio 15px, títulos Inter 20px/500
   en #eceef2 y botón blanco con borde #eceef2. */

.dc-cat {
	--dc-fondo:   #101828;
	--dc-texto:   #eceef2;
	--dc-suave:   rgba(236, 238, 242, .65);
	--dc-borde:   rgba(236, 238, 242, .18);
	--dc-acento:  var(--global-palette1, #2098d5);
	--dc-radio:   15px;

	display: grid;
	grid-template-columns: minmax(0, 1fr) 250px;
	gap: 2.5rem;
	align-items: start;
	max-width: 1200px;
	margin: 0 auto;
	/* El catálogo pinta su propio fondo: no depende de que la fila de
	   Kadence donde se inserte sea oscura. */
	background: var(--dc-fondo);
	color: var(--dc-texto);
	padding: 2.5rem;
	border-radius: var(--dc-radio);
	box-sizing: border-box;
	font-family: var(--global-body-font-family, Inter, sans-serif);
}

/* Banda de ancho completo, como el resto de las secciones del sitio.
   Se activa con ancho="completo" en el shortcode. */
.dc-cat--completo {
	max-width: none;
	border-radius: 0;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: max(2rem, calc(50vw - 600px));
	padding-right: max(2rem, calc(50vw - 600px));
}

/* Variante para secciones de fondo claro. */
.dc-cat--claro {
	--dc-fondo: var(--global-palette8, #f9fafb);
	--dc-texto: var(--global-palette4, #101828);
	--dc-suave: var(--global-palette5, #4a5568);
	--dc-borde: var(--global-palette7, #eceef2);
}

.dc-cat__grilla {
	display: grid;
	grid-template-columns: repeat(var(--dc-cols, 3), minmax(0, 1fr));
	gap: 2rem 1.75rem;
}

/* --- Tarjeta --- */

.dc-cat__card {
	display: flex;
	flex-direction: column;
	background: none;
	border: 0;
}

.dc-cat__card[hidden] {
	display: none;
}

.dc-cat__link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.dc-cat__img {
	aspect-ratio: 1 / 1;
	border-radius: var(--dc-radio);
	overflow: hidden;
	background: var(--global-palette9, #fff);
	padding: 8%;
	box-sizing: border-box;
}

.dc-cat__img img {
	width: 100%;
	height: 100%;
	/* contain, no cover: las fotos de producto son verticales y con cover
	   se recortaría el equipo por arriba y por abajo. */
	object-fit: contain;
	display: block;
	transition: transform .35s ease;
}

.dc-cat__card:hover .dc-cat__img img {
	transform: scale(1.03);
}

.dc-cat__titulo {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	margin: 1.1rem 0 .6rem;
	color: var(--dc-texto);
}

.dc-cat__chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0 0 .9rem;
	padding: 0;
}

.dc-cat__chips li {
	font-size: .7rem;
	letter-spacing: .02em;
	padding: .22rem .6rem;
	border-radius: 999px;
	border: 1px solid var(--dc-borde);
	color: var(--dc-suave);
}

/* Botón blanco: el mismo que usan hoy las tarjetas hechas a mano. */
.dc-cat__btn {
	align-self: flex-start;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: 6px 15px;
	border-radius: 5px;
	border: 1px solid var(--global-palette7, #eceef2);
	background: var(--global-palette9, #fff);
	color: var(--global-palette3, #000);
	text-decoration: none;
	font-size: 14.4px;
	font-weight: 500;
	line-height: 1.7;
	transition: background .2s ease, color .2s ease;
}

.dc-cat__btn:hover {
	background: var(--dc-acento);
	border-color: var(--dc-acento);
	color: #fff;
}

.dc-cat__btn span {
	transition: transform .2s ease;
}

.dc-cat__card:hover .dc-cat__btn span {
	transform: translateX(3px);
}

/* Botón alternativo, transparente sobre el fondo oscuro. */
.dc-cat--btn-ghost .dc-cat__btn {
	background: transparent;
	color: var(--dc-texto);
	border-color: var(--dc-borde);
}

.dc-cat--btn-ghost .dc-cat__btn:hover {
	background: var(--dc-acento);
	border-color: var(--dc-acento);
	color: #fff;
}

/* --- Columna de filtros --- */

.dc-cat__filtros {
	position: sticky;
	top: 110px;
	border: 1px solid var(--dc-borde);
	border-radius: 10px;
	padding: 1.25rem;
}

.dc-cat__filtros-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
}

.dc-cat__filtros h3 {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--dc-texto);
}

.dc-cat__reset {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-size: .78rem;
	text-decoration: underline;
	color: var(--dc-acento);
}

.dc-cat__conteo {
	margin: .3rem 0 1rem;
	font-size: .78rem;
	color: var(--dc-suave);
}

.dc-cat__grupo {
	border-top: 1px solid var(--dc-borde);
	padding-top: .85rem;
	margin-top: .85rem;
}

.dc-cat__grupo h4 {
	margin: 0 0 .55rem;
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--dc-suave);
}

.dc-cat__opcion {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .3rem 0;
	font-size: .85rem;
	color: var(--dc-texto);
	cursor: pointer;
}

.dc-cat__opcion input {
	accent-color: var(--dc-acento);
	width: 15px;
	height: 15px;
	margin: 0;
}

.dc-cat__opcion em {
	margin-left: auto;
	font-style: normal;
	font-size: .72rem;
	color: var(--dc-suave);
}

.dc-cat__opcion--vacia {
	opacity: .35;
}

.dc-cat__sin-resultados {
	grid-column: 1 / -1;
	padding: 2.5rem 1rem;
	text-align: center;
	color: var(--dc-suave);
}

/* --- Responsive --- */

@media (max-width: 1024px) {
	.dc-cat {
		grid-template-columns: minmax(0, 1fr) 220px;
		gap: 1.5rem;
	}

	.dc-cat__grilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.dc-cat {
		grid-template-columns: minmax(0, 1fr);
		padding: 1.5rem 1.25rem;
	}

	.dc-cat--completo {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	/* En mobile los filtros van arriba de la grilla. */
	.dc-cat__filtros {
		order: -1;
		position: static;
	}

	.dc-cat__grilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}

	.dc-cat__titulo {
		font-size: 17px;
	}
}