.chte-heading {
	--chte-base-solid: #1e1e1e;
	--chte-base-grad-a: #6c5ce7;
	--chte-base-grad-b: #00ceff;
	--chte-base-angle: 135deg;
	margin: 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.chte-heading .chte-text,
.chte-heading .chte-base,
.chte-heading .chte-highlight {
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: inherit;
}


/*
 * Render aislado para destacados con gradiente.
 *
 * Cuando line-height es menor que font-size (por ejemplo 80px / 72px),
 * WebKit/Blink pueden dejar sin fondo la parte del glifo que sale de la caja
 * de línea. Como background-clip:text necesita ese fondo para pintar el
 * glifo, descendentes como g/j/p/q/y aparecen cortadas.
 *
 * La ranura invisible conserva EXACTAMENTE el layout configurado en
 * Elementor. La copia visual se pinta en una capa absoluta con área de fondo
 * ampliada, sin aumentar el alto de línea ni agregar espacio al heading.
 */
.chte-gradient-slot {
	position: relative;
	display: inline-block;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	vertical-align: baseline;
}

.chte-gradient-slot > .chte-gradient-paint {
	position: absolute;
	z-index: 1;
	left: -0.045em;
	top: -0.10em;
	display: inline-block;
	box-sizing: content-box;
	padding: 0.10em 0.045em 0.28em;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	white-space: pre;
	pointer-events: none;
	overflow: visible;
}

.chte-heading.chte-base-solid .chte-text {
	color: var(--chte-base-solid);
	-webkit-text-fill-color: var(--chte-base-solid);
}

.chte-heading.chte-base-gradient .chte-text {
	color: var(--chte-base-grad-a);
	background-image: linear-gradient(
		var(--chte-base-angle),
		var(--chte-base-grad-a),
		var(--chte-base-grad-b)
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.chte-highlight.chte-color-solid {
	color: var(--chte-highlight-solid, #6c5ce7) !important;
	background: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	-webkit-text-fill-color: var(--chte-highlight-solid, #6c5ce7) !important;
}

.chte-highlight.chte-color-gradient {
	color: var(--chte-highlight-grad-a, #6c5ce7) !important;
	background-image: linear-gradient(
		var(--chte-highlight-angle, 135deg),
		var(--chte-highlight-grad-a, #6c5ce7),
		var(--chte-highlight-grad-b, #00ceff)
	) !important;
	background-repeat: no-repeat !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

.chte-highlight.chte-color-inherit {
	color: inherit;
	-webkit-text-fill-color: inherit;
}

/*
 * Enlaces / hover (v1.0.7)
 *
 * El estado normal y el hover usan SIEMPRE la misma capa de pintura cuando
 * hay un color de hover personalizado. De esta forma nunca alternamos entre
 * texto sólido y -webkit-text-fill-color:transparent al entrar/salir.
 * Ese cambio de modo podía dejar un frame sin pintura en WebKit/Blink y
 * provocar el pestañeo blanco reportado al sacar el puntero.
 */
@property --chte-link-paint-a {
	syntax: '<color>';
	inherits: true;
	initial-value: #1e1e1e;
}

@property --chte-link-paint-b {
	syntax: '<color>';
	inherits: true;
	initial-value: #1e1e1e;
}

@property --chte-link-paint-angle {
	syntax: '<angle>';
	inherits: true;
	initial-value: 135deg;
}

.chte-heading {
	--chte-link-transition: 280ms;
	--chte-link-easing: cubic-bezier(0.22, 1, 0.36, 1);
	--chte-link-hover-shift: 0px;
}

.chte-heading a.chte-link,
.chte-heading a.chte-link:visited,
.chte-heading a.chte-link:hover,
.chte-heading a.chte-link:focus {
	color: inherit !important;
	text-decoration: inherit !important;
}

/*
 * El anchor se mantiene inline para no alterar saltos de línea. El movimiento
 * usa top en vez de transform para no cambiar el wrapping del heading.
 */
.chte-heading a.chte-link {
	position: relative;
	cursor: pointer;
	transition: text-decoration-color var(--chte-link-transition) var(--chte-link-easing);
}

/*
 * El área clickeable del <a> NO se mueve. El desplazamiento se aplica solo a
 * las capas visuales, evitando que el propio hover cambie su hitbox y pueda
 * entrar/salir repetidamente cuando el puntero está cerca de un borde.
 */
.chte-heading a.chte-link .chte-base,
.chte-heading a.chte-link .chte-highlight.chte-color-solid,
.chte-heading a.chte-link .chte-highlight.chte-color-inherit,
.chte-heading a.chte-link .chte-gradient-slot {
	position: relative;
	top: 0;
}

.chte-heading a.chte-link:hover .chte-base,
.chte-heading a.chte-link:focus-visible .chte-base,
.chte-heading a.chte-link:hover .chte-highlight.chte-color-solid,
.chte-heading a.chte-link:focus-visible .chte-highlight.chte-color-solid,
.chte-heading a.chte-link:hover .chte-highlight.chte-color-inherit,
.chte-heading a.chte-link:focus-visible .chte-highlight.chte-color-inherit,
.chte-heading a.chte-link:hover .chte-gradient-slot,
.chte-heading a.chte-link:focus-visible .chte-gradient-slot {
	top: var(--chte-link-hover-shift);
}

/*
 * Única transición visual del color. No se transiciona color,
 * -webkit-text-fill-color ni background-image: solo variables de pintura.
 */
.chte-heading a.chte-link .chte-base,
.chte-heading a.chte-link .chte-highlight,
.chte-heading a.chte-link .chte-gradient-paint {
	transition:
		--chte-link-paint-a var(--chte-link-transition) var(--chte-link-easing),
		--chte-link-paint-b var(--chte-link-transition) var(--chte-link-easing),
		--chte-link-paint-angle var(--chte-link-transition) var(--chte-link-easing),
		text-decoration-color var(--chte-link-transition) var(--chte-link-easing);
}

.chte-heading a.chte-link .chte-base,
.chte-heading a.chte-link .chte-highlight.chte-color-solid,
.chte-heading a.chte-link .chte-highlight.chte-color-inherit {
	transition:
		--chte-link-paint-a var(--chte-link-transition) var(--chte-link-easing),
		--chte-link-paint-b var(--chte-link-transition) var(--chte-link-easing),
		--chte-link-paint-angle var(--chte-link-transition) var(--chte-link-easing),
		top var(--chte-link-transition) var(--chte-link-easing),
		text-decoration-color var(--chte-link-transition) var(--chte-link-easing);
}

/* La ranura del gradiente se mueve; su capa absoluta interna conserva el
 * offset anti-recorte original y no debe recibir un segundo desplazamiento. */
.chte-heading a.chte-link .chte-gradient-slot {
	transition: top var(--chte-link-transition) var(--chte-link-easing);
}

/* -------------------------------------------------------------------------
 * Pintura estable para BASE cuando existe hover personalizado.
 * Normal sólido = gradiente degenerado (mismo color en ambos stops).
 * Normal gradiente = sus dos stops originales.
 * ---------------------------------------------------------------------- */
.chte-heading.chte-base-solid a.chte-link:is(.chte-link-hover-solid, .chte-link-hover-gradient) .chte-base {
	--chte-link-paint-a: var(--chte-base-solid);
	--chte-link-paint-b: var(--chte-base-solid);
	--chte-link-paint-angle: var(--chte-base-angle);
}

.chte-heading.chte-base-gradient a.chte-link:is(.chte-link-hover-solid, .chte-link-hover-gradient) .chte-base {
	--chte-link-paint-a: var(--chte-base-grad-a);
	--chte-link-paint-b: var(--chte-base-grad-b);
	--chte-link-paint-angle: var(--chte-base-angle);
}

.chte-heading a.chte-link:is(.chte-link-hover-solid, .chte-link-hover-gradient) .chte-base {
	color: var(--chte-link-paint-a) !important;
	background-image: linear-gradient(
		var(--chte-link-paint-angle),
		var(--chte-link-paint-a),
		var(--chte-link-paint-b)
	) !important;
	background-repeat: no-repeat !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

/* -------------------------------------------------------------------------
 * Pintura estable para DESTACADOS sólidos.
 * ---------------------------------------------------------------------- */
.chte-heading a.chte-link:is(.chte-link-hover-solid, .chte-link-hover-gradient) .chte-highlight.chte-color-solid {
	--chte-link-paint-a: var(--chte-highlight-solid);
	--chte-link-paint-b: var(--chte-highlight-solid);
	--chte-link-paint-angle: var(--chte-highlight-angle, 135deg);
	color: var(--chte-link-paint-a) !important;
	background-image: linear-gradient(
		var(--chte-link-paint-angle),
		var(--chte-link-paint-a),
		var(--chte-link-paint-b)
	) !important;
	background-repeat: no-repeat !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

/* Destacado heredado: toma el estilo base como estado normal. */
.chte-heading.chte-base-solid a.chte-link:is(.chte-link-hover-solid, .chte-link-hover-gradient) .chte-highlight.chte-color-inherit {
	--chte-link-paint-a: var(--chte-base-solid);
	--chte-link-paint-b: var(--chte-base-solid);
	--chte-link-paint-angle: var(--chte-base-angle);
}

.chte-heading.chte-base-gradient a.chte-link:is(.chte-link-hover-solid, .chte-link-hover-gradient) .chte-highlight.chte-color-inherit {
	--chte-link-paint-a: var(--chte-base-grad-a);
	--chte-link-paint-b: var(--chte-base-grad-b);
	--chte-link-paint-angle: var(--chte-base-angle);
}

.chte-heading a.chte-link:is(.chte-link-hover-solid, .chte-link-hover-gradient) .chte-highlight.chte-color-inherit {
	color: var(--chte-link-paint-a) !important;
	background-image: linear-gradient(
		var(--chte-link-paint-angle),
		var(--chte-link-paint-a),
		var(--chte-link-paint-b)
	) !important;
	background-repeat: no-repeat !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

/* -------------------------------------------------------------------------
 * Destacados con gradiente usan la capa chte-gradient-paint que corrigió el
 * recorte de descendentes. Esa arquitectura NO se modifica.
 * ---------------------------------------------------------------------- */
.chte-heading a.chte-link:is(.chte-link-hover-solid, .chte-link-hover-gradient) .chte-gradient-paint.chte-color-gradient {
	--chte-link-paint-a: var(--chte-highlight-grad-a);
	--chte-link-paint-b: var(--chte-highlight-grad-b);
	--chte-link-paint-angle: var(--chte-highlight-angle, 135deg);
	color: var(--chte-link-paint-a) !important;
	background-image: linear-gradient(
		var(--chte-link-paint-angle),
		var(--chte-link-paint-a),
		var(--chte-link-paint-b)
	) !important;
	background-repeat: no-repeat !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

/* -------------------------------------------------------------------------
 * Estado HOVER: solo cambian las variables. La capa nunca desaparece.
 * ---------------------------------------------------------------------- */
.chte-heading a.chte-link.chte-link-hover-solid:hover .chte-base,
.chte-heading a.chte-link.chte-link-hover-solid:focus-visible .chte-base,
.chte-heading a.chte-link.chte-link-hover-solid:hover .chte-highlight.chte-color-solid,
.chte-heading a.chte-link.chte-link-hover-solid:focus-visible .chte-highlight.chte-color-solid,
.chte-heading a.chte-link.chte-link-hover-solid:hover .chte-highlight.chte-color-inherit,
.chte-heading a.chte-link.chte-link-hover-solid:focus-visible .chte-highlight.chte-color-inherit,
.chte-heading a.chte-link.chte-link-hover-solid:hover .chte-gradient-paint.chte-color-gradient,
.chte-heading a.chte-link.chte-link-hover-solid:focus-visible .chte-gradient-paint.chte-color-gradient {
	--chte-link-paint-a: var(--chte-link-hover-solid);
	--chte-link-paint-b: var(--chte-link-hover-solid);
}


.chte-heading a.chte-link.chte-link-hover-gradient:hover .chte-base,
.chte-heading a.chte-link.chte-link-hover-gradient:focus-visible .chte-base,
.chte-heading a.chte-link.chte-link-hover-gradient:hover .chte-highlight.chte-color-solid,
.chte-heading a.chte-link.chte-link-hover-gradient:focus-visible .chte-highlight.chte-color-solid,
.chte-heading a.chte-link.chte-link-hover-gradient:hover .chte-highlight.chte-color-inherit,
.chte-heading a.chte-link.chte-link-hover-gradient:focus-visible .chte-highlight.chte-color-inherit,
.chte-heading a.chte-link.chte-link-hover-gradient:hover .chte-gradient-paint.chte-color-gradient,
.chte-heading a.chte-link.chte-link-hover-gradient:focus-visible .chte-gradient-paint.chte-color-gradient {
	--chte-link-paint-a: var(--chte-link-hover-grad-a);
	--chte-link-paint-b: var(--chte-link-hover-grad-b);
	--chte-link-paint-angle: var(--chte-link-hover-angle, 135deg);
}


.chte-heading a.chte-link.chte-link-hover-decoration:hover,
.chte-heading a.chte-link.chte-link-hover-decoration:focus-visible {
	text-decoration: var(--chte-link-hover-decoration) !important;
}

.chte-anim {
	--chte-anim-duration: 1200ms;
	--chte-anim-delay: 0ms;
	animation-duration: var(--chte-anim-duration);
	animation-delay: var(--chte-anim-delay);
	animation-fill-mode: both;
	animation-iteration-count: 1;
	animation-timing-function: ease;
	will-change: transform, opacity, background-position, filter;
}

.chte-anim.chte-anim-loop {
	animation-iteration-count: infinite;
}

.chte-anim-fade {
	animation-name: chteFade;
}

.chte-anim-fade-up,
.chte-anim-scale,
.chte-anim-pulse {
	display: inline-block;
	transform-origin: center;
}

.chte-anim-fade-up {
	animation-name: chteFadeUp;
}

.chte-anim-scale {
	animation-name: chteScaleSoft;
}

.chte-anim-pulse {
	animation-name: chtePulseSoft;
}

.chte-highlight.chte-color-gradient.chte-anim-gradient-flow {
	display: inline-block;
	background-size: 220% 220% !important;
	animation-name: chteGradientFlow;
	animation-timing-function: ease-in-out;
}

.chte-anim-gradient-flow:not(.chte-color-gradient) {
	display: inline-block;
	animation-name: chtePulseSoft;
}

.chte-anim-shine {
	position: relative;
	display: inline-block;
}

.chte-anim-shine::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	pointer-events: none;
	color: transparent;
	background-image: linear-gradient(
		110deg,
		transparent 30%,
		rgba(255, 255, 255, 0.88) 50%,
		transparent 70%
	);
	background-size: 250% 100%;
	background-position: 160% 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation-name: chteShine;
	animation-duration: var(--chte-anim-duration);
	animation-delay: var(--chte-anim-delay);
	animation-fill-mode: both;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
}

.chte-anim-shine.chte-anim-loop::after {
	animation-iteration-count: infinite;
}

@keyframes chteFade {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes chteFadeUp {
	0% {
		opacity: 0;
		transform: translateY(0.35em);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes chteScaleSoft {
	0% {
		opacity: 0;
		transform: scale(0.88);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes chtePulseSoft {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.045); }
}

@keyframes chteGradientFlow {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

@keyframes chteShine {
	0% { background-position: 160% 0; }
	100% { background-position: -60% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.chte-anim,
	.chte-anim-shine::after {
		animation: none !important;
		transition: none !important;
	}
}