/* Efectos del tema GPX Sistemas — componentes adaptados de react-bits (MIT+Commons Clause):
   Gradient Waves (WebGL2), Specular Button (WebGL2) y Shiny Text (CSS). */

/* ---------------------------------------------------------------- Gradient Waves (contenedor) */
.gpx-gradient-waves {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.gpx-gradient-waves canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Onda de fondo dentro de una sección del home: absoluta detrás del contenido. */
.gpx-home-waves {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: .5;
}

.gpx-home-waves + *,
.gpx-home-waves ~ * {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------- Specular Button */
.gpx-specular-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	margin: 0;
	padding: 14px 28px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1;
	color: #ffffff;
	text-decoration: none;
	border-radius: 14px;
	background: rgba(37, 99, 235, .35);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .12),
		0 8px 24px rgba(0, 0, 0, .25);
	cursor: pointer;
	outline: none;
	transition: transform .15s ease;
}

.gpx-specular-btn:hover { color: #ffffff; text-decoration: none; }

.gpx-specular-btn:active { transform: scale(.97); }

.gpx-specular-btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, .6);
	outline-offset: 3px;
}

.gpx-specular-btn__fx {
	position: absolute;
	inset: -20px;
	pointer-events: none;
	z-index: 1;
}

.gpx-specular-btn__fx canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.gpx-specular-btn__label {
	position: relative;
	z-index: 2;
}

/* Variante overlay para botones que ya tienen su propio fondo (p. ej. .gpx-btn). */
.gpx-specular-btn--overlay {
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* ---------------------------------------------------------------- Shiny Text */
/* Solo se activa si el navegador soporta recorte del fondo al texto; si no,
   el texto conserva su color normal (evita una capa de gradiente encima). */
.gpx-shiny-text {
	display: inline-block;
	/* Evita que el clip del gradiente recorte descendentes (p. ej. la "g"). */
	padding-bottom: .12em;
}

/* En pantallas chicas la GPU móvil no aguanta 8+7 contextos WebGL: las olas
   claras de relleno y el brillo de los botones se apagan y quedan los
   fondos/gradientes CSS de la sección. */
@media (max-width: 767px) {
	.gpx-home-waves--soft {
		display: none !important;
	}

	.gpx-specular-btn__fx {
		display: none !important;
	}
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.gpx-shiny-text {
		background-image: linear-gradient(
			120deg,
			rgba(244, 247, 255, .55) 0%,
			rgba(244, 247, 255, .55) 35%,
			#ffffff 50%,
			rgba(244, 247, 255, .55) 65%,
			rgba(244, 247, 255, .55) 100%
		);
		background-size: 200% auto;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
		animation: gpx-shiny-sweep 2.8s linear infinite;
		animation-delay: .4s;
	}

	@keyframes gpx-shiny-sweep {
		0%   { background-position: 150% center; }
		100% { background-position: -50% center; }
	}

	@media (prefers-reduced-motion: reduce) {
		.gpx-shiny-text {
			animation: none;
			background-position: 150% center;
		}
	}
}