/*
 * Hamo Target - Titles: pills de target + título animado (GSAP SplitText).
 * Os valores visuais abaixo são os DEFAULTS da referência aprovada; todos
 * são sobrescrevíveis pelos controles do Elementor, cujos seletores usam
 * {{WRAPPER}} e portanto vencem estas regras por especificidade.
 */

.hamo-tt__tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 32px;
	padding: 0;
}

.hamo-tt__tab {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	margin: 0;
	padding: 10px 16px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.2;
	color: #000;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.08);
	transition: all 0.25s cubic-bezier(0.256, 0.009, 0.125, 0.997);
	outline: none;
}

.hamo-tt__tab:hover:not(.is-active) {
	background: rgba(0, 0, 0, 0.16);
}

.hamo-tt__tab.is-active {
	background: #111;
	color: #fff;
}

.hamo-tt__tab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Painéis empilhados na mesma célula do grid: o container assume a altura
   do painel mais alto, evitando saltos de layout ao trocar de target. */
.hamo-tt__content {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
}

/* Painéis inativos ficam ESTRUTURALMENTE invisíveis (visibility), não
   apenas com as linhas deslocadas para fora das máscaras do SplitText —
   se o split falhar/reverter (ex.: quirks do preview do editor), o pior
   caso é ver só o painel ativo, nunca todos sobrepostos. `is-anim` mantém
   o painel de destino visível durante a transição. */
.hamo-tt__panel {
	grid-column: 1;
	grid-row: 1;
	text-align: center;
	font-size: clamp(2rem, 3vw, 3rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: #000;
	margin: 0;
	visibility: hidden;
}

.hamo-tt__panel.is-active,
.hamo-tt__panel.is-anim {
	visibility: visible;
}

/* Máscara de linha do SplitText (linesClass). */
.hamo-tt__split-line {
	overflow: hidden;
	display: block;
}

/* Fallback quando GSAP/SplitText não carregam: troca simples sem animação. */
.hamo-tt--static .hamo-tt__panel {
	display: none;
	visibility: visible;
}

.hamo-tt--static .hamo-tt__panel.is-active {
	display: block;
}

/* Visibilidade por dispositivo (breakpoint mobile padrão do Elementor). */
@media (max-width: 767px) {
	.hamo-tt--hide-mobile {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.hamo-tt--hide-desktop {
		display: none !important;
	}
}