/*
 * Hamo Cards - Services — grade de ícones + card de detalhes.
 * Efeito de destaque portado da referência (hover/ativo colorido com brilho
 * em camadas; os demais ícones encolhem, clareiam e dessaturam).
 * Desktop: painéis empilhados na mesma célula, visibilidade por classe
 * (lição do Target - Titles: nunca depender só de opacidade/JS).
 * Mobile: a grade some e os painéis viram fileira deslizante scroll-snap.
 * Nunca declarar aqui as CSS vars escritas pelos controles (lição do
 * shadowing) — apenas consumir com var(--x, fallback).
 */

.hamo-cs {
	display: flex;
	align-items: center;
	gap: var(--hamo-cs-cols-gap, 48px);
}

.hamo-cs-pos-right .hamo-cs {
	flex-direction: row-reverse;
}

/* ---------------- Grade de ícones ---------------- */

.hamo-cs__grid {
	display: grid;
	grid-template-columns: repeat(var(--hamo-cs-cols, 3), var(--hamo-cs-box, 80px));
	gap: var(--hamo-cs-grid-gap, 8px);
	flex-shrink: 0;
	transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.hamo-cs__logo {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	margin: 0;
	padding: 0;
	width: var(--hamo-cs-box, 80px);
	height: var(--hamo-cs-box, 80px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--hamo-cs-box-r, 12px);
	background-color: var(--hamo-cs-box-bg, #fff);
	cursor: pointer;
	outline: none;
	transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.hamo-cs__logo svg {
	width: var(--hamo-cs-icon, 32px);
	height: var(--hamo-cs-icon, 32px);
	fill: var(--hamo-cs-icon-color, #0a3cff);
	transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.hamo-cs__logo i {
	font-size: var(--hamo-cs-icon, 32px);
	color: var(--hamo-cs-icon-color, #0a3cff);
	line-height: 1;
	transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.hamo-cs__logo:focus-visible {
	outline: 2px solid var(--hamo-cs-accent, #0a3cff);
	outline-offset: 2px;
}

/* Hover e ativo: fundo de destaque + brilho em camadas (referência),
   com a cor derivada da própria cor de destaque via color-mix. */
.hamo-cs__logo:hover,
.hamo-cs__logo.is-active {
	background-color: var(--hamo-cs-accent, #0a3cff);
	box-shadow:
		0 6px 13px color-mix(in srgb, var(--hamo-cs-accent, #0a3cff) 10%, transparent),
		0 24px 24px color-mix(in srgb, var(--hamo-cs-accent, #0a3cff) 9%, transparent),
		0 55px 33px color-mix(in srgb, var(--hamo-cs-accent, #0a3cff) 5%, transparent),
		0 97px 39px color-mix(in srgb, var(--hamo-cs-accent, #0a3cff) 1%, transparent);
}

.hamo-cs__logo:hover svg,
.hamo-cs__logo.is-active svg {
	fill: var(--hamo-cs-icon-hover, #fff);
}

.hamo-cs__logo:hover i,
.hamo-cs__logo.is-active i {
	color: var(--hamo-cs-icon-hover, #fff);
}

/* Efeito da referência: quem não está sob o mouse encolhe e dessatura. */
.hamo-cs--fx .hamo-cs__grid:hover .hamo-cs__logo:not(:hover) {
	transform: scale(0.88);
	opacity: 0.48;
	filter: grayscale(1);
}

/* ---------------- Painéis (cards) ---------------- */

.hamo-cs__panels {
	flex: 1 1 0;
	min-width: 0;
	display: grid;
	grid-template-columns: 1fr;
}

.hamo-cs__panel {
	grid-column: 1;
	grid-row: 1;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease;
	background-color: #fff;
	border-radius: 16px;
	padding: 32px;
}

.hamo-cs__panel.is-active {
	visibility: visible;
	opacity: 1;
}

.hamo-cs__img img {
	display: block;
	width: 100%;
	height: auto;
}

.hamo-cs__title {
	margin: 0 0 12px;
}

.hamo-cs__desc {
	margin: 0 0 20px;
	line-height: 1.6;
}

.hamo-cs__btn {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

a.hamo-cs__btn:hover {
	transform: translateY(-2px);
}

/* ---------------- Barra de progresso (mobile) ---------------- */

/* Escondida por padrão; só aparece no mobile. */
.hamo-cs__scrollbar {
	display: none;
}

/* ---------------- Mobile: fileira deslizante ---------------- */

@media (max-width: 767px) {
	.hamo-cs,
	.hamo-cs-pos-right .hamo-cs {
		display: block;
	}

	.hamo-cs__grid {
		display: none;
	}

	.hamo-cs__scrollbar {
		display: block;
		position: relative;
		width: var(--hamo-cs-sb-w, 100%);
		max-width: 100%;
		height: var(--hamo-cs-sb-h, 4px);
		margin: var(--hamo-cs-sb-gap, 12px) auto 0;
		background: var(--hamo-cs-sb-track, rgba(10, 60, 255, 0.15));
		border-radius: var(--hamo-cs-sb-r, 999px);
		overflow: hidden;
	}

	/* Escondida quando todos os cards já cabem na tela (sem scroll). */
	.hamo-cs__scrollbar.is-hidden {
		display: none;
	}

	.hamo-cs__scrollbar-thumb {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 0;
		background: var(--hamo-cs-sb-fill, #0a3cff);
		border-radius: inherit;
		transform: translateX(0);
		transition: transform 0.08s linear;
		will-change: transform;
	}

	.hamo-cs__panels {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-bottom: 6px;
	}

	.hamo-cs__panels::-webkit-scrollbar {
		display: none;
	}

	.hamo-cs__panel {
		visibility: visible;
		opacity: 1;
		flex: 0 0 var(--hamo-cs-slide-w, 85%);
		scroll-snap-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hamo-cs__grid,
	.hamo-cs__logo,
	.hamo-cs__logo svg,
	.hamo-cs__logo i,
	.hamo-cs__panel,
	.hamo-cs__btn {
		transition: none;
	}
}