/* Home GPX Sistemas — front-page.php. Estética "coming soon": oscuro glass + luz en cuerpo. */

/* ---------------------------------------------------------------- Tipografía secciones */
.gpx-eyebrow {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gpx-color-primary);
}

.gpx-lead {
	max-width: 640px;
	margin: 0 0 40px;
	font-size: var(--gpx-font-size-lg);
	line-height: 1.6;
	color: var(--gpx-color-muted);
}

.gpx-grid {
	display: grid;
	gap: 24px;
}

.gpx-grid--3 { grid-template-columns: repeat(3, 1fr); }
.gpx-grid--4 { grid-template-columns: repeat(4, 1fr); }

.gpx-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(11, 95, 255, .08);
	color: var(--gpx-color-primary);
}

.gpx-icon svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- Hero */
.gpx-hero {
	position: relative;
	overflow: hidden;
	color: var(--gpx-hdr-text, #f4f7ff);
	background:
		radial-gradient(900px 480px at 85% -10%, rgba(124, 58, 237, .28), transparent 60%),
		radial-gradient(800px 460px at 5% 110%, rgba(37, 99, 235, .28), transparent 60%),
		linear-gradient(180deg, #0a1224, #0c1734);
	border-bottom: 1px solid var(--gpx-hdr-border, rgba(255, 255, 255, .12));
}

.gpx-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(148, 163, 184, .14) 1px, transparent 1px);
	background-size: 26px 26px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 75%);
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 75%);
}

.gpx-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	align-items: center;
	gap: 56px;
	padding-block: 96px;
}

.gpx-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	margin: 0 0 20px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #bfdbfe;
	border: 1px solid rgba(147, 197, 253, .35);
	border-radius: 999px;
	background: rgba(59, 130, 246, .12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.gpx-hero h1 {
	margin: 0 0 22px;
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #ffffff;
	text-shadow: 0 4px 30px rgba(0, 0, 0, .5);
}

.gpx-hero h1 strong {
	font-weight: 800;
	background: linear-gradient(115deg, #60a5fa, #c084fc 65%, #f0abfc);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.gpx-hero__lead {
	margin: 0 0 32px;
	max-width: 520px;
	font-size: 18px;
	line-height: 1.65;
	color: rgba(207, 220, 250, .85);
}

.gpx-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 36px;
}

.gpx-btn--glass {
	color: #e6edff;
	border: 1px solid rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .06);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.gpx-btn--glass:hover,
.gpx-btn--glass:focus {
	color: #ffffff;
	border-color: rgba(255, 255, 255, .4);
	background: rgba(255, 255, 255, .12);
}

.gpx-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 600;
	color: rgba(207, 220, 250, .75);
}

.gpx-hero__facts li {
	position: relative;
	padding-left: 20px;
}

.gpx-hero__facts li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	transform: translateY(-50%);
	background: linear-gradient(135deg, #60a5fa, #c084fc);
	box-shadow: 0 0 10px rgba(96, 165, 250, .7);
}

/* Foto del hero con sombra difuminada */
.gpx-hero__visual {
	position: relative;
}

.gpx-hero__photo {
	position: relative;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(10, 16, 34, .82);
	overflow: hidden;
	box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .04), 0 0 90px -20px rgba(99, 102, 241, .5);
	transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
}

.gpx-hero__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 -60px 80px -40px rgba(10, 16, 34, .5);
}

.gpx-hero__photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------- Stroke text */
/* Efecto tipo react-bits: las letras arrancan solo en contorno (outline) y
   culminan rellenas con el gradiente cuando la sección entra en viewport.
   Sin JS (o con reduced-motion) queda el estado final: relleno visible. */
.gpx-stroke-text {
	position: relative;
	display: inline-block;
	letter-spacing: -0.02em;
}

.gpx-stroke-text__outline {
	display: block;
	-webkit-text-stroke: 1.5px var(--gpx-color-primary-dark);
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.gpx-stroke-text__fill {
	display: block;
	position: absolute;
	inset: 0;
	background-image: linear-gradient(115deg, #2563eb, #7c3aed 70%, #c084fc);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.gpx-stroke-text--run .gpx-stroke-text__fill {
	animation: gpx-stroke-fill 1.2s cubic-bezier(.65, 0, .35, 1) .15s both;
}

@keyframes gpx-stroke-fill {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
	.gpx-stroke-text--run .gpx-stroke-text__fill {
		animation: none;
	}
}

/* ---------------------------------------------------------------- Blobs animados */
/* Orbes de color desenfocados que flotan despacio sobre las secciones claras,
   para sumar profundidad sin perder la paleta luminosa. */
@keyframes gpx-blob-drift {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(4%, -6%, 0) scale(1.08); }
	100% { transform: translate3d(-4%, 5%, 0) scale(.96); }
}

.gpx-section--blobs {
	overflow: hidden;
	background:
		radial-gradient(760px 420px at 12% 6%, rgba(96, 165, 250, .14), transparent 62%),
		radial-gradient(720px 400px at 88% 18%, rgba(192, 132, 252, .13), transparent 62%),
		linear-gradient(180deg, var(--gpx-color-background), #f6f8ff);
}

.gpx-section--blobs::before,
.gpx-section--blobs::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	filter: blur(70px);
	pointer-events: none;
	animation: gpx-blob-drift 22s ease-in-out infinite alternate;
}

.gpx-section--blobs::before {
	width: 460px;
	height: 460px;
	top: -140px;
	left: -120px;
	background: radial-gradient(circle, rgba(59, 130, 246, .5), rgba(59, 130, 246, 0) 70%);
}

.gpx-section--blobs::after {
	width: 520px;
	height: 520px;
	bottom: -180px;
	right: -140px;
	background: radial-gradient(circle, rgba(192, 132, 252, .42), rgba(192, 132, 252, 0) 70%);
	animation-delay: -11s;
	animation-direction: alternate-reverse;
}

.gpx-section--blobs .gpx-container { position: relative; z-index: 1; }

/* Variante con tono índigo para ventajas (más fría) y lavanda para portfolio */
.gpx-section--blobs--indigo {
	background:
		radial-gradient(760px 420px at 10% 10%, rgba(129, 140, 248, .15), transparent 62%),
		radial-gradient(700px 380px at 90% 15%, rgba(59, 130, 246, .12), transparent 62%),
		linear-gradient(180deg, var(--gpx-color-background), #eef4ff);
}

.gpx-section--blobs--lavender {
	background:
		radial-gradient(760px 420px at 14% 8%, rgba(233, 213, 255, .5), transparent 62%),
		radial-gradient(720px 400px at 86% 20%, rgba(147, 197, 253, .3), transparent 62%),
		linear-gradient(180deg, #fdfaff, #f4efff);
}

@media (prefers-reduced-motion: reduce) {
	.gpx-section--blobs::before,
	.gpx-section--blobs::after {
		animation: none;
	}
}

/* ---------------------------------------------------------------- Problema / valor */
.gpx-problem .gpx-lead {
	max-width: 720px;
}

.gpx-card--lift {
	transition: box-shadow .25s ease, transform .25s ease;
}

.gpx-card--lift:hover {
	box-shadow: var(--gpx-shadow-md);
	transform: translateY(-4px);
}

/* ---------------------------------------------------------------- GPX Comercio */
.gpx-feature {
	position: relative;
	padding-block: 96px;
	color: var(--gpx-hdr-text, #f4f7ff);
	background:
		radial-gradient(700px 380px at 15% 0%, rgba(37, 99, 235, .2), transparent 60%),
		radial-gradient(700px 380px at 90% 100%, rgba(124, 58, 237, .18), transparent 60%),
		linear-gradient(180deg, #0b1430, #0a1224);
	border-block: 1px solid var(--gpx-hdr-border, rgba(255, 255, 255, .12));
}

.gpx-feature .gpx-container { position: relative; }

.gpx-badge--producto {
	background: linear-gradient(135deg, rgba(96, 165, 250, .18), rgba(192, 132, 252, .18));
	color: #dbeafe;
	border: 1px solid rgba(147, 197, 253, .4);
}

.gpx-feature__title {
	margin: 18px 0 16px;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #ffffff;
}

.gpx-lead--light {
	color: rgba(207, 220, 250, .85);
}

.gpx-card--feature {
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7);
}

.gpx-card--feature:hover {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(147, 197, 253, .35);
}

.gpx-card--feature .gpx-icon {
	background: linear-gradient(135deg, rgba(96, 165, 250, .18), rgba(192, 132, 252, .18));
	color: #a5c8ff;
}

.gpx-card--feature .gpx-card__title {
	color: #f4f7ff;
}

.gpx-card--feature .gpx-card__text {
	color: rgba(203, 213, 240, .8);
}

.gpx-next {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 44px;
	padding: 28px 32px;
	border-radius: 20px;
	border: 1px solid rgba(147, 197, 253, .25);
	background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(124, 58, 237, .12));
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.gpx-next__title {
	margin: 12px 0 6px;
	font-size: 24px;
	color: #ffffff;
}

.gpx-next__desc {
	margin: 0;
	color: rgba(207, 220, 250, .8);
}

.gpx-next__action .gpx-btn { white-space: nowrap; }

/* ---------------------------------------------------------------- Ventajas */
.gpx-advantages__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gpx-advantage {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 24px;
	border: 1px solid var(--gpx-color-border);
	border-radius: var(--gpx-radius-lg);
	background: var(--gpx-color-background);
	box-shadow: var(--gpx-shadow-sm);
}

.gpx-advantage div { font-size: 15px; line-height: 1.55; color: var(--gpx-color-muted); }
.gpx-advantage strong { display: block; color: var(--gpx-color-text); margin-bottom: 2px; }

.gpx-advantage__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(22, 163, 74, .12);
	color: var(--gpx-color-accent);
}

.gpx-advantage__icon svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- Servicios */
.gpx-services .gpx-grid { margin-bottom: 40px; }

.gpx-card--service .gpx-icon {
	background: rgba(124, 58, 237, .08);
	color: var(--gpx-color-primary-dark);
}

.gpx-services__link,
.gpx-portfolio__link {
	margin: 0;
	text-align: center;
}

/* ---------------------------------------------------------------- Portfolio */
.gpx-card--placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-style: dashed;
	background: var(--gpx-color-background-muted);
}

.gpx-card--placeholder__art {
	display: flex;
	gap: 8px;
	margin-bottom: 18px;
}

.gpx-card--placeholder__art span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(11, 95, 255, .25);
}

.gpx-card--placeholder__art span:nth-child(2) { background: rgba(11, 95, 255, .45); }
.gpx-card--placeholder__art span:nth-child(3) { background: rgba(124, 58, 237, .45); }

/* ---------------------------------------------------------------- FAQ */
.gpx-faq__inner {
	max-width: 760px;
}

.gpx-faq__item {
	border: 1px solid var(--gpx-color-border);
	border-radius: var(--gpx-radius-lg);
	background: var(--gpx-color-background);
	box-shadow: var(--gpx-shadow-sm);
	margin-bottom: 14px;
	overflow: hidden;
}

.gpx-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	font-size: 16px;
	font-weight: 600;
	color: var(--gpx-color-text);
	cursor: pointer;
	list-style: none;
}

.gpx-faq__item summary::-webkit-details-marker { display: none; }

.gpx-faq__item summary::after {
	content: "+";
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	color: var(--gpx-color-primary);
	transition: transform .2s ease;
}

.gpx-faq__item[open] summary::after { transform: rotate(45deg); }

.gpx-faq__item p {
	margin: 0;
	padding: 0 22px 18px;
	color: var(--gpx-color-muted);
	font-size: 15px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------- CTA final */
.gpx-cta-final {
	padding-block: 100px;
	color: #ffffff;
	text-align: center;
	background:
		radial-gradient(800px 420px at 50% -20%, rgba(124, 58, 237, .4), transparent 65%),
		linear-gradient(180deg, #0a1224, #0c1734);
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.gpx-cta-final::before {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: 0 auto 28px;
	border-radius: 99px;
	background: linear-gradient(135deg, #60a5fa, #c084fc);
	box-shadow: 0 0 22px rgba(124, 58, 237, .8);
}

.gpx-cta-final h2 {
	margin: 0 0 14px;
	font-size: clamp(1.8rem, 3.5vw, 2.6rem);
	color: #ffffff;
}

.gpx-cta-final p {
	margin: 0 0 32px;
	font-size: 17px;
	color: rgba(207, 220, 250, .85);
}

.gpx-cta-final__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1024px) {
	.gpx-hero__grid {
		grid-template-columns: 1fr;
		gap: 48px;
		padding-block: 72px;
	}

	.gpx-hero__visual { max-width: 560px; }

	.gpx-hero__photo {
		transform: none;
	}

	.gpx-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.gpx-hero__grid { padding-block: 56px; }
	.gpx-hero__actions .gpx-btn { width: 100%; }

	.gpx-hero__visual {
		display: block;
		max-width: 420px;
		margin-inline: auto;
	}

	.gpx-hero__photo {
		border-radius: 16px;
	}

	.gpx-grid--3,
	.gpx-grid--4 { grid-template-columns: 1fr; }

	.gpx-feature,
	.gpx-cta-final { padding-block: 64px; }

	.gpx-advantages__list { grid-template-columns: 1fr; }

	.gpx-next {
		flex-direction: column;
		align-items: flex-start;
		padding: 24px;
	}

	.gpx-next__action .gpx-btn { width: 100%; }
}