/* Catálogo y búsqueda — la grilla del tema base, vestida con el sistema.
 *
 * Revisión de diseño del 2-oct-2026. La grilla de `/productos/` y de la
 * búsqueda era la del tema base sin tocar: tarjetas a sangre de borde a borde,
 * sin aire entre ellas, separadas por filetes de tabla, fotos de proporciones
 * distintas (cada producto con la suya) y por eso precios a alturas
 * distintas. Era la única pantalla que no hablaba como el resto.
 *
 * Mismas reglas que las tarjetas de Experiencias en la portada (experiencias.css):
 * contenedor de ancho máximo, separación entre tarjetas, superficie con borde y
 * radio, foto 4:5 recortada. No se toca el marcado: el tema lo reescribe al
 * filtrar y paginar por AJAX.
 */

.template-category :is(.breadcrumbs, .category-controls-container, .category-body),
.template-search :is(.breadcrumbs, .category-controls-container, .category-body) {
	/* Un solo borde izquierdo para miga, título y grilla: el mismo ancho que el
	   pie de página. Antes eran tres (76, 104 y 116 px a 1440): la utilidad
	   px-3 del tema (con !important), el título anidado en la barra de filtros
	   y el relleno propio de la grilla. */
	width: min(var(--maxw), 100% - 2 * var(--pad));
	max-width: none;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0 !important;
	padding-right: 0 !important;
	border: 0;
}

.template-category .page-header,
.template-search .page-header,
.template-category .category-name,
.template-search .category-name {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.template-category .category-body,
.template-search .category-body {
	padding-bottom: var(--section-y);
}

.template-category .category-body > .row.bottom-line,
.template-search .category-body > .row.bottom-line {
	border: 0;
}

.template-category .js-product-table,
.template-search .js-product-table {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--space-5);
	margin: 0 !important;
}

.template-category .js-item-product,
.template-search .js-item-product {
	width: auto;
	max-width: none;
	flex: none;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	overflow: hidden;
}

/* Foto 4:5 en todas: los precios caen a la misma altura (alineación). */
.template-category .js-item-image-padding,
.template-search .js-item-image-padding {
	padding-bottom: 125% !important;
}

.template-category .js-item-image-padding img,
.template-search .js-item-image-padding img {
	object-fit: cover;
}

/* Los filetes de tabla del tema dentro de cada tarjeta */
.template-category .js-item-product .bottom-line,
.template-search .js-item-product .bottom-line {
	border-color: var(--line);
}

/* --- El banner de la categoría --------------------------------------------
   La imagen que se sube a la categoría en el panel salía a tamaño completo
   (960 px a 1440): una pantalla entera de foto sin contexto, y el título y
   las experiencias debajo del pliegue. Pasa a ser una franja que se funde con
   el fondo hacia abajo, y el título queda pegado a ella. */
.template-category .category-banner-image {
	display: block;
	height: clamp(220px, 34vh, 380px);
	object-fit: cover;
	object-position: center 22%;
	border: 0;
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
	mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

/* Sin el botón de filtros, la columna del título no necesita su filete */
.template-category .category-controls-row > .col.right-line:only-child,
.template-search .category-controls-row > .col.right-line:only-child {
	border-right: 0;
}

/* --- Para quién · duración, y Express (como en la portada) ---------------- */
.template-category .sc-item-meta,
.template-search .sc-item-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
	font-family: var(--sans);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-caps-sm);
	text-transform: uppercase;
	color: var(--text-muted, var(--fg-muted));
}

.template-category .sc-item-express,
.template-search .sc-item-express {
	padding: 4px 10px;
	border: 1px solid var(--accent);
	border-radius: 100px;
	color: var(--accent);
	letter-spacing: var(--track-caps-md);
}