/* Estilos base y componentes GPX Sistemas.
   Regla: "Simple, no simple a medias." Mucho espacio, grid limpio, una idea por bloque. */

/* ---------------------------------------------------------------- Tipografía */
body {
	font-family: var(--gpx-font-family);
	font-size: var(--gpx-font-size-base);
	color: var(--gpx-color-text);
	line-height: 1.6;
	background: var(--gpx-color-background);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--gpx-font-family);
	font-weight: 700;
	color: var(--gpx-color-primary-darker);
	line-height: 1.2;
	margin: 0 0 var(--gpx-spacing-md);
}

h1 { font-size: clamp(2rem, 4.5vw, var(--gpx-font-size-5xl)); }
h2 { font-size: clamp(1.75rem, 3.5vw, var(--gpx-font-size-4xl)); }
h3 { font-size: clamp(1.4rem, 2.5vw, var(--gpx-font-size-3xl)); }
h4 { font-size: var(--gpx-font-size-xl); }
h5 { font-size: var(--gpx-font-size-lg); }
h6 { font-size: var(--gpx-font-size-md); }

p { margin: 0 0 var(--gpx-spacing-md); }

a {
	color: var(--gpx-color-primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--gpx-color-primary-dark);
}

/* ---------------------------------------------------------------- Layout */
.gpx-container {
	max-width: var(--gpx-container);
	margin-inline: auto;
	padding-inline: var(--gpx-spacing-lg);
}

.gpx-section {
	padding-block: var(--gpx-spacing-xl);
	position: relative;
}

.gpx-bg-muted {
	background: var(--gpx-color-background-muted);
}

.gpx-text-center { text-align: center; }
.gpx-text-muted { color: var(--gpx-color-muted); }

/* ---------------------------------------------------------------- Botones */
.gpx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gpx-spacing-sm);
	padding: 12px 24px;
	border-radius: var(--gpx-radius-md);
	font-family: var(--gpx-font-family);
	font-size: var(--gpx-font-size-base);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	text-decoration: none;
}

.gpx-btn--primary {
	background: linear-gradient(135deg, var(--gpx-color-primary), #7c3aed);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .18);
	box-shadow: 0 12px 28px -10px rgba(60, 110, 255, .65), inset 0 1px 0 rgba(255, 255, 255, .22);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.gpx-btn--primary:hover,
.gpx-btn--primary:focus {
	background: linear-gradient(135deg, var(--gpx-color-primary), #7c3aed);
	border-color: rgba(255, 255, 255, .3);
	color: #fff;
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow: 0 16px 36px -10px rgba(60, 110, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.gpx-btn--accent {
	background: linear-gradient(135deg, #2563eb, #7c3aed);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .18);
	box-shadow: 0 12px 28px -10px rgba(124, 58, 237, .6), inset 0 1px 0 rgba(255, 255, 255, .22);
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gpx-btn--accent:hover,
.gpx-btn--accent:focus {
	background: linear-gradient(135deg, #2563eb, #7c3aed);
	border-color: rgba(255, 255, 255, .3);
	color: #fff;
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow: 0 16px 36px -10px rgba(124, 58, 237, .75), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.gpx-btn--outline {
	background: transparent;
	color: var(--gpx-color-primary);
	border: 1px solid var(--gpx-color-primary);
}

.gpx-btn--outline:hover,
.gpx-btn--outline:focus {
	background: var(--gpx-color-primary);
	color: #fff;
}

/* Botones de Elementor con el lenguaje visual del design system */
.elementor-button {
	font-family: var(--gpx-font-family) !important;
	font-weight: 600 !important;
	border-radius: var(--gpx-radius-md) !important;
	transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* ---------------------------------------------------------------- Cards */
.gpx-card {
	background: var(--gpx-color-background);
	border: 1px solid var(--gpx-color-border);
	border-radius: var(--gpx-radius-lg);
	padding: var(--gpx-spacing-lg);
	box-shadow: var(--gpx-shadow-sm);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

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

.gpx-card__title {
	font-size: var(--gpx-font-size-lg);
	margin: var(--gpx-spacing-sm) 0;
}

.gpx-card__text {
	color: var(--gpx-color-muted);
	margin: 0;
}

/* ---------------------------------------------------------------- Badges */
.gpx-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--gpx-spacing-xs);
	padding: 4px 12px;
	border-radius: 999px;
	font-size: var(--gpx-font-size-sm);
	font-weight: 600;
}

.gpx-badge--proximamente {
	background: rgba(22, 163, 74, 0.1);
	color: var(--gpx-color-accent-dark);
	border: 1px solid var(--gpx-color-accent);
}

.gpx-badge--lanzado {
	background: rgba(11, 95, 255, 0.1);
	color: var(--gpx-color-primary-dark);
	border: 1px solid var(--gpx-color-primary);
}

/* ---------------------------------------------------------------- Formularios */
.elementor-field-group input:not([type='checkbox']):not([type='radio']),
.elementor-field-group textarea,
.elementor-field-group select {
	font-family: var(--gpx-font-family) !important;
	border: 1px solid var(--gpx-color-border) !important;
	border-radius: var(--gpx-radius-md) !important;
	padding: 12px 16px !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.elementor-field-group input:focus,
.elementor-field-group textarea:focus {
	border-color: var(--gpx-color-primary) !important;
	box-shadow: 0 0 0 3px rgba(11, 95, 255, 0.12);
	outline: none;
}

.elementor-message.elementor-message-danger,
.elementor-message-danger {
	color: var(--gpx-color-error) !important;
}

.elementor-message-success {
	color: var(--gpx-color-accent-dark) !important;
}

/* ---------------------------------------------------------------- Accordion (FAQ) */
.elementor-accordion .elementor-tab-title {
	font-weight: 600 !important;
}

.elementor-accordion .elementor-tab-content {
	border-top: 1px solid var(--gpx-color-border) !important;
	color: var(--gpx-color-muted) !important;
}

/* ---------------------------------------------------------------- Accesibilidad */
:focus-visible {
	outline: 2px solid var(--gpx-color-primary);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 767px) {
	.gpx-section {
		padding-block: var(--gpx-spacing-lg);
	}

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