/*
 * Hamo Timeline - History — porte fiel do "Timeline Slider Concept".
 * Valores visuais = defaults da referência; os controles do Elementor
 * sobrescrevem via CSS custom properties escritas no {{WRAPPER}} e
 * consumidas aqui com var(--x, fallback). NUNCA declarar essas variáveis
 * diretamente em .hamo-th neste arquivo (valor direto no elemento vence o
 * herdado do wrapper e mataria os controles — lição já aprendida).
 */

/* ---------------- Stepper (ícones + linha + rótulos) ---------------- */

/* Sempre em linha: quando as etapas não cabem (mobile), o stepper ganha
   rolagem horizontal em vez de esconder rótulos/linha. */
.hamo-th__stepper {
	position: relative;
	display: flex;
	margin-bottom: 50px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* Rolagem por arraste/gesto sem barra visível. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

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

/* Cada etapa cresce igualmente no desktop; abaixo da largura mínima o
   conjunto transborda e a rolagem horizontal assume. */
.hamo-th__step {
	position: relative;
	flex: 1 0 var(--hamo-th-step-min-w, 150px);
	cursor: pointer;
	outline: none;
}

.hamo-th__step.is-active {
	cursor: default;
}

.hamo-th__step:focus-visible .hamo-th__icon {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Ícones estáticos: tamanho fixo, sem animação em hover/ativo — o feedback
   de progresso fica todo na linha (marcador, ponto e pulso).
   A caixa tem ALTURA FIXA: ícones com proporções diferentes ocupariam
   alturas diferentes, empurrando cada rótulo (e a linha, que é a borda
   superior dele) para posições distintas — a linha "quebraria". */
.hamo-th__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--hamo-th-icon-size, 60px);
	height: var(--hamo-th-icon-size, 60px);
	margin: 0 auto var(--hamo-th-icon-gap, 30px);
	color: var(--hamo-th-icon-color, #2c2c2c);
}

.hamo-th__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: var(--hamo-th-icon-color, #2c2c2c);
}

.hamo-th__icon i {
	font-size: calc(var(--hamo-th-icon-size, 60px) * 0.9);
	line-height: 1;
}

/* Rótulo: a própria borda superior forma a linha da timeline. Visível em
   todos os tamanhos de tela (no mobile a timeline rola horizontalmente). */
.hamo-th__step-title {
	position: relative;
	display: block;
	padding-top: 30px;
	margin: 0;
	text-align: center;
	line-height: 1.7;
	border-top: var(--hamo-th-line-width, 3px) solid var(--hamo-th-line-color, #ccc);
}

/* Ponto sobre a linha. */
.hamo-th__step-title::before {
	content: '';
	position: absolute;
	top: calc(var(--hamo-th-line-width, 3px) / 2 - var(--hamo-th-dot-size, 11px) / 2 - var(--hamo-th-line-width, 3px));
	left: 50%;
	transform: translateX(-50%);
	width: var(--hamo-th-dot-size, 11px);
	height: var(--hamo-th-dot-size, 11px);
	border: 2px solid var(--hamo-th-dot-border, #ccc);
	border-radius: 50%;
	background-color: var(--hamo-th-dot-bg, #fff);
	z-index: 5;
}

/* Pulso atrás do ponto ativo. */
.hamo-th__step-title::after {
	content: '';
	position: absolute;
	top: calc(var(--hamo-th-line-width, 3px) / 2 - var(--hamo-th-pulse-size, 25px) / 2 - var(--hamo-th-line-width, 3px));
	left: 50%;
	transform: translateX(-50%) scale(0);
	width: var(--hamo-th-pulse-size, 25px);
	height: var(--hamo-th-pulse-size, 25px);
	border-radius: 50%;
	background-image: linear-gradient(122deg, var(--hamo-th-accent-light, #00DBDE) 0%, var(--hamo-th-accent-dark, #FC00FF) 100%);
	opacity: 0.35;
}

.hamo-th__step.is-active .hamo-th__step-title {
	font-weight: 600;
}

.hamo-th__step.is-active .hamo-th__step-title::before {
	transition: background-color var(--hamo-th-speed, 0.2s) linear;
	background-color: var(--hamo-th-accent-dark, #FC00FF);
	border-color: var(--hamo-th-accent-dark, #FC00FF);
}

.hamo-th__step.is-active .hamo-th__step-title::after {
	transform: translateX(-50%) scale(1);
	transition: transform var(--hamo-th-speed, 0.2s) linear;
}

/* Marcador de gradiente que desliza pela linha (criado via JS).
   O cubic-bezier com overshoot é a assinatura da animação da referência. */
.hamo-th__marker {
	position: absolute;
	left: 0;
	display: block;
	height: var(--hamo-th-line-width, 3px);
	background-image: linear-gradient(122deg, var(--hamo-th-accent-light, #00DBDE) 0%, var(--hamo-th-accent-dark, #FC00FF) 100%);
	transition: transform var(--hamo-th-speed, 0.2s) cubic-bezier(0, 0, 0, 1.2);
	pointer-events: none;
}

/* ---------------- Card (slides) ---------------- */

/* Card convencional: fundo, raio e sombra vêm dos controles do Elementor
   (a sombra padrão é definida no group control Box Shadow do widget). */
.hamo-th__slides {
	position: relative;
	width: 600px;
	max-width: 100%;
	margin: auto;
	border-radius: 5px;
	background-color: #fff;
}

.hamo-th__slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 40px 30px;
	opacity: 0;
	visibility: hidden;
}

.hamo-th__slide.is-active {
	transition: opacity var(--hamo-th-speed, 0.2s) linear;
	opacity: 1;
	visibility: visible;
}

.hamo-th__slide-title {
	margin-top: 0;
	margin-bottom: 15px;
}

.hamo-th__slide-content {
	line-height: 1.7;
}

.hamo-th__slide-content p:first-child {
	margin-top: 0;
}

.hamo-th__slide-content p:last-child {
	margin-bottom: 0;
}