/**
 * Hermosillo Categorias del blog: cuadricula 4 columnas en escritorio; en movil, carrusel de 2x2 (Figma Blog).
 */
.hermosillo-categories-widget {
	background: var(--hmo-white);
	box-sizing: border-box;
	font-family: 'Flama Condensed', 'FlamaCond', 'Roboto Condensed', sans-serif;
	padding: 160px 24px 0;
	width: 100%;
}

.hermosillo-categories-widget * { box-sizing: border-box; }

.hermosillo-categories-widget .hcat-inner { margin: 0 auto; max-width: 1200px; width: 100%; }

.hermosillo-categories-widget .hcat-header { margin: 0 0 40px; text-align: center; }
.hermosillo-categories-widget .hcat-eyebrow { color: var(--hmo-blue-steel); font-size: 14px; font-weight: 600; letter-spacing: .06em; line-height: 18px; margin: 0 0 8px; text-transform: uppercase; }
.hermosillo-categories-widget .hcat-title {
	color: var(--hmo-blue);
	font-family: 'Flama Condensed', 'FlamaCond', 'Roboto Condensed', sans-serif;
	font-size: clamp(30px, 3.4vw, 40px);
	font-weight: 600 !important;
	line-height: 44px;
	margin: 0 !important;
	text-transform: uppercase;
}
.hermosillo-categories-widget .hcat-line { background: var(--hmo-orange); display: block; height: 2px; margin: 12px auto 0; width: 54px; }

.hermosillo-categories-widget .hcat-track { display: grid; gap: 16px 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); }

.hermosillo-categories-widget .hcat-item {
	align-items: center;
	background: var(--hmo-porcelain);
	color: var(--hmo-blue) !important;
	display: flex;
	font-family: 'Flama', 'FlamaBook', 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 600;
	gap: 12px;
	min-height: 60px;
	padding: 12px 16px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.hermosillo-categories-widget .hcat-item:hover { background: var(--hmo-blue); color: var(--hmo-white) !important; }
.hermosillo-categories-widget .hcat-icon { display: inline-flex; flex: 0 0 auto; }

.hermosillo-categories-widget .hcat-controls { display: none; }

@media (max-width: 768px) {
	.hermosillo-categories-widget { padding: 80px 16px 0; }
	.hermosillo-categories-widget .hcat-header { margin-bottom: 24px; }
	.hermosillo-categories-widget .hcat-title { font-size: 36px; line-height: 44px; }
	.hermosillo-categories-widget .hcat-track {
		gap: 16px;
		grid-auto-columns: calc(50% - 8px);
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-template-rows: repeat(2, auto);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.hermosillo-categories-widget .hcat-track::-webkit-scrollbar { display: none; }
	.hermosillo-categories-widget .hcat-item { flex-direction: column; justify-content: center; min-height: 80px; scroll-snap-align: start; text-align: center; }
	.hermosillo-categories-widget .hcat-controls { align-items: center; display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
	.hermosillo-categories-widget .hcat-dots { display: flex; gap: 0; width: 100%; }
	.hermosillo-categories-widget .hcat-dot { background: var(--hmo-porcelain); flex: 1 1 0; height: 2px; }
	.hermosillo-categories-widget .hcat-dot.is-active { background: var(--hmo-orange); }
	.hermosillo-categories-widget .hcat-arrows { display: flex; gap: 8px; }
	.hermosillo-categories-widget .hcat-arrows button { align-items: center; background: var(--hmo-orange); border: 0; border-radius: 0; color: var(--hmo-white); cursor: pointer; display: inline-flex; height: 32px; justify-content: center; padding: 0; width: 32px; }
	.hermosillo-categories-widget .hcat-arrows button:hover { background: var(--hmo-blue); }
}

/* ===== Figma escritorio (Blog): celdas de 64 px, texto 20/28 en azul medio, fondo ghost ===== */
@media (min-width: 1025px) {
	.hermosillo-categories-widget .hcat-item { background: var(--hmo-ghost); color: var(--hmo-blue-medium) !important; font-size: 20px; font-weight: 500; gap: 20px; line-height: 28px; min-height: 64px; padding: 16px; }
	.hermosillo-categories-widget .hcat-icon svg, .hermosillo-categories-widget .hcat-icon img { height: 32px; width: 32px; }
	.hermosillo-categories-widget .hcat-track { gap: 24px; }
}
@media (min-width: 1025px) {
	.hermosillo-categories-widget .hcat-eyebrow { font-family: 'FlamaCond Medium', 'Flama Condensed', 'FlamaCond', sans-serif; font-size: 20px; font-weight: 500; letter-spacing: 1.2px; line-height: 22px; margin-bottom: 12px; }
}

/* Figma movil (versión final): solo indicadores, tarjetas de 110 px */
@media (max-width: 768px) {
	.hermosillo-categories-widget .hcat-arrows { display: none; }
	.hermosillo-categories-widget .hcat-item { min-height: 110px; }
}