/*
 * Gepkos Schools — sistema de diseño propio del espacio "/escuelas/",
 * alineado deliberadamente con el patrón visual de la sección "Escuela
 * anual" de la home de gepkos.com (mismos tonos navy/steel, mismas
 * proporciones de tarjeta, mismos iconos) para que ambas piezas se sientan
 * parte del mismo sistema gráfico. Clases propias `.gs-*`, sin depender de
 * las clases del snippet de la home.
 */

:root {
	--gs-navy: #202945;
	--gs-navy-deep: #171d33;
	--gs-steel: #7e9bc0;
	--gs-steel-light: #eaf0fb;
	--gs-bg: #f4f5f9;
	--gs-white: #ffffff;
	--gs-ink: #202945;
	--gs-muted: #6b7690;
	--gs-border: #e3e6ef;
	--gs-success: #1f7a4d;
	--gs-success-bg: #e6f4ec;
	--gs-error: #9c3b3b;
	--gs-error-bg: #f6e3e3;
	--gs-warning: #8a6d1f;
	--gs-warning-bg: #fbf0da;
	--gs-radius-lg: 20px;
	--gs-radius: 12px;
	--gs-radius-sm: 8px;
	--gs-shadow: 0 4px 18px rgba(18, 23, 43, 0.07);
	--gs-shadow-hover: 0 16px 34px rgba(18, 23, 43, 0.16);
	--gs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--gs-font-editorial: 'Anton', 'Oswald', sans-serif;
	--gs-container: 1180px;
}

/* ==========================================================================
   Base
   ========================================================================== */

.gs-body {
	margin: 0;
	font-family: var(--gs-font);
	color: var(--gs-ink);
	background-color: var(--gs-bg);
	-webkit-font-smoothing: antialiased;
	line-height: 1.6;
}

.gs-body * {
	box-sizing: border-box;
}

.gs-body img {
	max-width: 100%;
	height: auto;
	display: block;
}

/*
 * El tema (hello-elementor/assets/css/reset.css) define reglas globales sin
 * espacio propio — `a{color:#c36}`, `[type=submit],button{border:1px solid
 * #c36}`, `input[type=text],select{border:1px solid #666}` — con la misma
 * especificidad CSS que nuestras clases de un solo nivel, y ese archivo se
 * carga DESPUÉS de escuelas.css (ver includes/frontend/class-template-loader.php,
 * que ahora usa get_header()/get_footer() reales). En un empate de
 * especificidad gana el último cargado, así que el rosa del tema (#c36)
 * sustituía a nuestro navy/steel en botones, inputs y enlaces sueltos.
 * Solución: anteponer siempre `.gs-body` para que nuestras reglas tengan
 * más especificidad que las del tema, sin depender del orden de carga.
 */
.gs-body a {
	color: inherit;
	text-decoration: none;
}

/* Panel de Escuelas dentro de "Mi cuenta" de WooCommerce (§28 del roadmap):
   .gs-body aquí solo aporta el reset tipográfico y la protección de
   especificidad frente al tema — no debe verse como una página aparte, así
   que sin fondo ni relleno propio, integrado en la columna de contenido
   nativa de WooCommerce. */
.gs-account-panel {
	background: transparent;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Panel de Escuelas — tarjetas propias (§29 del roadmap), misma identidad
   navy/steel/tipografía editorial que la landing, encapsuladas bajo
   .gs-account-panel (solo existe en este endpoint de Mi cuenta).
   ========================================================================== */

.gs-cuenta-portero {
	margin-bottom: 40px;
}

.gs-cuenta-portero:last-child {
	margin-bottom: 0;
}

.gs-cuenta-portero__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--gs-navy);
}

.gs-cuenta-portero__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 9px;
	background: var(--gs-steel-light);
}

.gs-cuenta-portero__nombre {
	margin: 0;
	font-family: var(--gs-font-editorial);
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: var(--gs-navy);
}

.gs-cuenta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
}

.gs-cuenta-card {
	display: flex;
	flex-direction: column;
	padding: 22px 24px;
	background: var(--gs-white);
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius-lg);
	box-shadow: var(--gs-shadow);
}

.gs-cuenta-card__top {
	margin-bottom: 12px;
}

.gs-cuenta-card__grupo {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--gs-navy);
}

.gs-cuenta-card__escuela {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gs-muted);
}

.gs-cuenta-card__meta {
	margin: 0;
	font-size: 12.5px;
	color: var(--gs-muted);
}

.gs-cuenta-card__separador {
	width: 32px;
	height: 3px;
	margin: 16px 0;
	background: var(--gs-steel);
	border-radius: 2px;
}

.gs-cuenta-datos {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 6px;
}

.gs-cuenta-dato {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.gs-cuenta-dato__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	margin-top: 1px;
	border-radius: 7px;
	background: var(--gs-steel-light);
}

.gs-cuenta-dato__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--gs-muted);
}

.gs-cuenta-dato__valor {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	font-weight: 600;
	color: var(--gs-ink);
}

.gs-body .gs-cuenta-card__enlace {
	display: inline-block;
	margin-top: 16px;
	font-size: 13px;
	font-weight: 700;
	color: var(--gs-navy);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gs-body .gs-cuenta-card__enlace:hover {
	color: var(--gs-steel);
}

.gs-cuenta-card__pedidos {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px dashed var(--gs-border);
}

.gs-cuenta-card__pedidos summary {
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--gs-navy);
	list-style: none;
}

.gs-cuenta-card__pedidos summary::-webkit-details-marker {
	display: none;
}

.gs-cuenta-card__pedidos summary::before {
	content: "▸ ";
	color: var(--gs-steel);
}

.gs-cuenta-card__pedidos[open] summary::before {
	content: "▾ ";
}

.gs-cuenta-pedidos {
	width: 100%;
	margin-top: 12px;
	border-collapse: collapse;
	font-size: 12.5px;
}

.gs-cuenta-pedidos th {
	padding: 6px 8px;
	text-align: left;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--gs-muted);
	border-bottom: 1px solid var(--gs-border);
}

.gs-cuenta-pedidos td {
	padding: 8px;
	border-bottom: 1px solid var(--gs-border);
	color: var(--gs-ink);
}

.gs-cuenta-pedidos tr:last-child td {
	border-bottom: none;
}

.gs-cuenta-pedidos__scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.gs-body .gs-cuenta-pedidos a.gs-cuenta-pedidos__ver {
	display: inline-block;
	white-space: nowrap;
	color: var(--gs-navy);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gs-body .gs-cuenta-pedidos a.gs-cuenta-pedidos__ver:hover {
	color: var(--gs-steel);
}

.gs-empty--compacto {
	padding: 24px;
	margin: 0;
}

.gs-empty--compacto p {
	margin: 0;
	color: var(--gs-muted);
}

.gs-container {
	max-width: var(--gs-container);
	margin: 0 auto;
	padding: 0 24px;
}

@media (max-width: 600px) {
	.gs-container {
		padding: 0 18px;
	}
}

/* ==========================================================================
   Preloader
   ========================================================================== */

.gs-preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--gs-navy), var(--gs-navy-deep));
	color: var(--gs-white);
	text-align: center;
	padding: 20px;
	opacity: 1;
	transition: opacity 0.4s ease;
}

.gs-preloader.is-visible {
	display: flex;
}

.gs-preloader.is-hiding {
	opacity: 0;
	pointer-events: none;
}

.gs-preloader__mark {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 2px solid var(--gs-steel);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.5px;
	margin-bottom: 20px;
}

.gs-preloader__logo {
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--gs-steel);
	font-weight: 700;
	margin-bottom: 14px;
}

.gs-preloader__title {
	font-size: clamp(22px, 5vw, 32px);
	font-weight: 800;
	max-width: 480px;
	letter-spacing: -0.01em;
}

.gs-preloader__spinner {
	margin-top: 28px;
	width: 30px;
	height: 30px;
	border: 3px solid rgba(255, 255, 255, 0.2);
	border-top-color: var(--gs-steel);
	border-radius: 50%;
	animation: gs-spin 0.8s linear infinite;
}

@keyframes gs-spin {
	to {
		transform: rotate(360deg);
	}
}

.gs-main {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.gs-main.is-visible {
	opacity: 1;
}

/* ==========================================================================
   Botones
   ========================================================================== */

/*
 * `.gs-body` antepuesto en cada selector: sin él, [type=submit]/button del
 * reset del tema (border/color #c36, ver nota al inicio del archivo) empata
 * en especificidad y gana por cargarse después — es la causa exacta del
 * borde rosa en "Reservar plaza" y otros <button> del formulario.
 */
.gs-body .gs-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 26px;
	background-color: var(--gs-navy);
	color: var(--gs-white);
	text-decoration: none;
	border: 2px solid var(--gs-navy);
	border-radius: 100px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.gs-body .gs-button:hover,
.gs-body .gs-button:focus {
	background-color: var(--gs-steel);
	border-color: var(--gs-steel);
	color: var(--gs-navy);
	transform: translateY(-1px);
}

.gs-body .gs-button--outline {
	background-color: transparent;
	color: var(--gs-navy);
	border-color: var(--gs-navy);
}

.gs-body .gs-button--outline:hover {
	background-color: var(--gs-navy);
	color: var(--gs-white);
}

.gs-body .gs-button--on-dark {
	background-color: var(--gs-white);
	color: var(--gs-navy);
	border-color: var(--gs-white);
}

.gs-body .gs-button--on-dark:hover {
	background-color: transparent;
	color: var(--gs-white);
}

.gs-body .gs-button--on-dark.gs-button--outline {
	background-color: transparent;
	color: var(--gs-white);
	border-color: rgba(255, 255, 255, 0.5);
}

.gs-body .gs-button--on-dark.gs-button--outline:hover {
	background-color: var(--gs-white);
	color: var(--gs-navy);
	border-color: var(--gs-white);
}

.gs-button--block {
	width: 100%;
	justify-content: center;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.gs-hero {
	position: relative;
	padding: 96px 20px 84px;
	text-align: center;
	background: radial-gradient(circle at 15% 20%, #26305234 0%, transparent 45%), linear-gradient(155deg, var(--gs-navy), var(--gs-navy-deep));
	color: var(--gs-white);
	overflow: hidden;
}

.gs-hero::after {
	content: "";
	position: absolute;
	inset: auto -10% -60% -10%;
	height: 220px;
	background: radial-gradient(ellipse at center, rgba(126, 155, 192, 0.25), transparent 70%);
	pointer-events: none;
}

.gs-hero__eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--gs-navy);
	background: var(--gs-steel);
	padding: 7px 16px;
	border-radius: 100px;
	margin-bottom: 24px;
}

.gs-hero h1 {
	font-family: var(--gs-font-editorial);
	font-size: clamp(34px, 5.8vw, 58px);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin: 0 0 18px;
	line-height: 1.02;
}

.gs-hero p {
	font-size: clamp(15px, 2vw, 18px);
	color: rgba(255, 255, 255, 0.78);
	max-width: 560px;
	margin: 0 auto 34px;
}

.gs-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Secciones
   ========================================================================== */

.gs-section {
	padding: 72px 20px;
}

.gs-section--alt {
	background-color: var(--gs-white);
	border-top: 1px solid var(--gs-border);
	border-bottom: 1px solid var(--gs-border);
}

.gs-section--dark {
	background: linear-gradient(155deg, var(--gs-navy), var(--gs-navy-deep));
	color: var(--gs-white);
}

.gs-section__head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 44px;
}

.gs-section__eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--gs-steel);
	margin-bottom: 10px;
}

.gs-section__head h2 {
	font-family: var(--gs-font-editorial);
	font-size: clamp(26px, 3.8vw, 38px);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin: 0 0 10px;
	line-height: 1.05;
}

.gs-section__head p {
	color: var(--gs-muted);
	margin: 0;
	font-size: 16px;
}

.gs-section--dark .gs-section__head p {
	color: rgba(255, 255, 255, 0.72);
}

.gs-section__foot {
	text-align: center;
	margin-top: 40px;
}

/* Página interior (no landing): cabecera simple de sección */
.gs-page-head {
	padding: 56px 20px 8px;
	text-align: center;
}

.gs-page-head h1 {
	font-family: var(--gs-font-editorial);
	font-size: clamp(30px, 4.4vw, 44px);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin: 0 0 8px;
	line-height: 1.05;
}

.gs-page-head p {
	color: var(--gs-muted);
	max-width: 560px;
	margin: 0 auto;
}

/* ==========================================================================
   Rejillas y tarjetas
   ========================================================================== */

.gs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 26px;
	margin-top: 8px;
}

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

@media (max-width: 900px) {
	.gs-grid--3 {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}
}

.gs-card {
	display: flex;
	flex-direction: column;
	background-color: var(--gs-white);
	border-radius: var(--gs-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--gs-shadow);
	border: 1px solid var(--gs-border);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	height: 100%;
}

a.gs-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--gs-shadow-hover);
}

.gs-card__image {
	position: relative;
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg, var(--gs-steel-light), var(--gs-border));
	overflow: hidden;
}

.gs-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gs-card__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	font-weight: 900;
	color: var(--gs-steel);
	letter-spacing: -0.02em;
}

.gs-card__body {
	padding: 20px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-grow: 1;
}

.gs-card__body h2,
.gs-card__body h3 {
	margin: 0;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.gs-card__meta {
	color: var(--gs-muted);
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	font-weight: 700;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

.gs-card__excerpt {
	color: var(--gs-muted);
	font-size: 14px;
	margin: 2px 0 0;
}

.gs-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
	flex-wrap: wrap;
}

.gs-card__price {
	font-size: 17px;
	font-weight: 800;
	color: var(--gs-navy);
}

.gs-card__price small {
	font-size: 12px;
	font-weight: 600;
	color: var(--gs-muted);
}

.gs-card__footer {
	margin-top: auto;
	padding-top: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.gs-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--gs-navy);
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
}

.gs-card__cta:hover {
	color: var(--gs-steel);
}

/* Plazas disponibles */
.gs-plazas {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--gs-muted);
}

.gs-plazas__bar {
	width: 54px;
	height: 6px;
	border-radius: 100px;
	background: var(--gs-border);
	overflow: hidden;
}

.gs-plazas__bar span {
	display: block;
	height: 100%;
	background: var(--gs-steel);
	border-radius: 100px;
}

.gs-plazas--completo .gs-plazas__bar span {
	background: var(--gs-error);
}

/* ==========================================================================
   Badges de estado
   ========================================================================== */

.gs-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 100px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	background-color: var(--gs-steel-light);
	color: var(--gs-navy);
}

.gs-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.gs-badge--abierto,
.gs-badge--activa,
.gs-badge--activa2 {
	background-color: var(--gs-success-bg);
	color: var(--gs-success);
}

.gs-badge--proximamente,
.gs-badge--cerrado,
.gs-badge--oculto {
	background-color: var(--gs-border);
	color: var(--gs-muted);
}

.gs-badge--completo {
	background-color: var(--gs-navy);
	color: var(--gs-white);
}

.gs-badge--pendiente_pago {
	background-color: var(--gs-steel-light);
	color: var(--gs-steel);
}

.gs-badge--cancelada {
	background-color: var(--gs-error-bg);
	color: var(--gs-error);
}

.gs-badge--pendiente_renovacion {
	background-color: var(--gs-warning-bg);
	color: var(--gs-warning);
}

/* ==========================================================================
   Metodología / pilares (landing)
   ========================================================================== */

.gs-pillar {
	background: var(--gs-white);
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius-lg);
	padding: 30px 26px;
	box-shadow: var(--gs-shadow);
}

.gs-pillar__num {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--gs-steel-light);
	color: var(--gs-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 16px;
	margin-bottom: 18px;
}

.gs-pillar h3 {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 800;
}

.gs-pillar p {
	margin: 0;
	color: var(--gs-muted);
	font-size: 14.5px;
}

/* ==========================================================================
   Bloque final de inscripción (CTA band)
   ========================================================================== */

.gs-cta-band {
	background: linear-gradient(155deg, var(--gs-navy), var(--gs-navy-deep));
	color: var(--gs-white);
	border-radius: var(--gs-radius-lg);
	padding: 52px 40px;
	text-align: center;
}

.gs-cta-band h2 {
	font-family: var(--gs-font-editorial);
	font-size: clamp(24px, 3.6vw, 34px);
	font-weight: 400;
	text-transform: uppercase;
	margin: 0 0 12px;
	letter-spacing: 0.3px;
	line-height: 1.05;
}

.gs-cta-band p {
	color: rgba(255, 255, 255, 0.75);
	max-width: 480px;
	margin: 0 auto 28px;
}

/* ==========================================================================
   Ficha de escuela
   ========================================================================== */

.gs-sede-hero {
	position: relative;
	color: var(--gs-white);
	padding: 96px 20px 48px;
	background: linear-gradient(155deg, var(--gs-navy), var(--gs-navy-deep));
	overflow: hidden;
}

.gs-sede-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.gs-sede-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(32, 41, 69, 0.97) 0%, rgba(32, 41, 69, 0.82) 55%, rgba(32, 41, 69, 0.35) 100%);
}

.gs-sede-hero__inner {
	position: relative;
	z-index: 2;
}

.gs-sede-hero h1 {
	font-family: var(--gs-font-editorial);
	font-size: clamp(28px, 4.4vw, 42px);
	font-weight: 400;
	text-transform: uppercase;
	margin: 0 0 8px;
	letter-spacing: 0.3px;
	line-height: 1.05;
}

.gs-sede-hero__meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--gs-steel);
	font-weight: 700;
	font-size: 14px;
	margin: 0;
}

.gs-sede-hero__meta svg {
	flex-shrink: 0;
}

.gs-sede-info-adicional {
	margin-top: 40px;
	background: var(--gs-white);
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius);
	padding: 24px 28px;
	box-shadow: var(--gs-shadow);
}

.gs-sede-info-adicional h3 {
	margin: 0 0 12px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--gs-muted);
}

.gs-sede-info-adicional__texto {
	font-size: 15px;
	line-height: 1.7;
	color: var(--gs-ink);
}

.gs-sede-info-adicional__texto p {
	margin: 0 0 14px;
}

.gs-sede-info-adicional__texto p:last-child {
	margin-bottom: 0;
}

.gs-sede-info-adicional__texto h1,
.gs-sede-info-adicional__texto h2,
.gs-sede-info-adicional__texto h3,
.gs-sede-info-adicional__texto h4 {
	color: var(--gs-navy);
	font-weight: 800;
	margin: 22px 0 10px;
}

.gs-sede-info-adicional__texto h1:first-child,
.gs-sede-info-adicional__texto h2:first-child,
.gs-sede-info-adicional__texto h3:first-child,
.gs-sede-info-adicional__texto h4:first-child {
	margin-top: 0;
}

.gs-sede-info-adicional__texto ul,
.gs-sede-info-adicional__texto ol {
	margin: 0 0 14px;
	padding-left: 22px;
}

.gs-sede-info-adicional__texto li {
	margin-bottom: 6px;
}

.gs-sede-info-adicional__texto a {
	color: var(--gs-steel);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gs-sede-info-adicional__texto a:hover {
	color: var(--gs-navy);
}

.gs-sede-info-adicional__texto img {
	max-width: 100%;
	height: auto;
	border-radius: var(--gs-radius-sm);
	margin: 10px 0;
}

.gs-sede-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 40px;
	align-items: start;
}

/* Sin datos reales de contacto/ubicación: una sola columna a todo el ancho,
   sin hueco ni columna reservada para la tarjeta lateral (§30 del roadmap). */
.gs-sede-layout--completo {
	grid-template-columns: 1fr;
}

@media (max-width: 860px) {
	.gs-sede-layout {
		grid-template-columns: 1fr;
	}
}

.gs-sede__descripcion {
	font-size: 15.5px;
	color: var(--gs-ink);
	max-width: 760px;
}

/* Sin columna lateral: la descripción ocupa todo el ancho disponible en vez
   de quedarse corta y dejar un hueco a la derecha con la misma forma que
   tenía la barra lateral eliminada (§30 del roadmap). */
.gs-sede-layout--completo .gs-sede__descripcion {
	max-width: none;
}

.gs-sede__descripcion p:first-child {
	margin-top: 0;
}

.gs-sede-grupos__head {
	margin: 36px 0 20px;
}

.gs-sede-grupos__head h2 {
	font-family: var(--gs-font-editorial);
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: var(--gs-navy);
	margin: 4px 0 0;
	line-height: 1.05;
}

.gs-sede-layout--completo .gs-sede-grupos__grid {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.gs-sede-cta-final {
	margin-top: 48px;
	padding-top: 32px;
	text-align: center;
	border-top: 1px solid var(--gs-border);
}

.gs-info-card {
	background: var(--gs-white);
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius);
	padding: 22px 24px;
	box-shadow: var(--gs-shadow);
}

.gs-info-card h3 {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--gs-muted);
	margin: 0 0 14px;
}

.gs-info-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.gs-info-list li {
	padding: 10px 0;
	border-bottom: 1px solid var(--gs-border);
	font-size: 14.5px;
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.gs-info-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.gs-info-list strong {
	color: var(--gs-muted);
	font-weight: 700;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	white-space: nowrap;
}

/* ==========================================================================
   Estados vacíos
   ========================================================================== */

.gs-empty {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
	padding: 56px 24px;
	border: 1.5px dashed var(--gs-border);
	border-radius: var(--gs-radius-lg);
	background: var(--gs-white);
}

.gs-empty__mark {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--gs-steel-light);
	color: var(--gs-steel);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 20px;
	margin: 0 auto 18px;
}

.gs-empty h3 {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 800;
}

.gs-empty p {
	margin: 0 auto 18px;
	color: var(--gs-muted);
	max-width: 360px;
	font-size: 14.5px;
}

/* ==========================================================================
   Avisos / mensajes
   ========================================================================== */

.gs-aviso {
	background-color: var(--gs-steel-light);
	border-left: 4px solid var(--gs-navy);
	color: var(--gs-navy);
	padding: 16px 20px;
	border-radius: var(--gs-radius-sm);
	margin-bottom: 22px;
	font-size: 14.5px;
}

.gs-aviso--error {
	background-color: var(--gs-error-bg);
	border-left-color: var(--gs-error);
	color: var(--gs-error);
}

.gs-aviso--success {
	background-color: var(--gs-success-bg);
	border-left-color: var(--gs-success);
	color: var(--gs-success);
}

.gs-aviso--warning {
	background-color: var(--gs-warning-bg);
	border-left-color: var(--gs-warning);
	color: var(--gs-warning);
}

/* ==========================================================================
   Contador de reserva (§32 del roadmap) — pantalla de reserva propia y
   checkout de WooCommerce.
   ========================================================================== */

.gs-reserva-contador {
	margin: 18px 0;
	padding: 16px 18px;
	background-color: var(--gs-steel-light);
	border-left: 4px solid var(--gs-navy);
	border-radius: var(--gs-radius-sm);
	text-align: left;
}

.gs-reserva-contador__texto {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--gs-navy);
	line-height: 1.5;
}

.gs-reserva-contador__tiempo {
	margin: 0;
	font-weight: 800;
	font-size: 16px;
	color: var(--gs-navy);
}

.gs-reserva-contador__valor {
	font-variant-numeric: tabular-nums;
}

/* Últimos 2 minutos: aviso destacado. */
.gs-reserva-contador--aviso {
	background-color: var(--gs-warning-bg);
	border-left-color: var(--gs-warning);
	animation: gs-reserva-parpadeo 1.2s ease-in-out infinite;
}

.gs-reserva-contador--aviso .gs-reserva-contador__texto,
.gs-reserva-contador--aviso .gs-reserva-contador__tiempo {
	color: var(--gs-warning);
}

@keyframes gs-reserva-parpadeo {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(138, 109, 31, 0.25);
	}
	50% {
		box-shadow: 0 0 0 6px rgba(138, 109, 31, 0);
	}
}

.gs-reserva-contador--caducado {
	background-color: var(--gs-error-bg);
	border-left-color: var(--gs-error);
	animation: none;
}

.gs-reserva-contador--caducado .gs-reserva-contador__texto,
.gs-reserva-contador--caducado .gs-reserva-contador__tiempo {
	color: var(--gs-error);
}

@media (prefers-reduced-motion: reduce) {
	.gs-reserva-contador--aviso {
		animation: none;
	}
}

/* ==========================================================================
   Formularios
   ========================================================================== */

/* Centrado horizontal + ancho legible (§26 del roadmap: el formulario de
   inscripción quedaba pegado a la izquierda con hueco vacío a la derecha
   porque solo se limitaba el ancho, sin centrarlo dentro de .gs-container). */
.gs-form {
	max-width: 760px;
	margin: 0 auto;
}

.gs-panel.gs-form {
	padding: 34px 36px;
}

@media (max-width: 600px) {
	.gs-panel.gs-form {
		padding: 24px 20px;
	}
}

.gs-field {
	margin-bottom: 20px;
}

.gs-field label {
	display: block;
	font-weight: 700;
	font-size: 13.5px;
	margin-bottom: 7px;
	color: var(--gs-navy);
}

.gs-field__hint {
	display: block;
	font-weight: 400;
	font-size: 12.5px;
	color: var(--gs-muted);
	margin-top: 4px;
}

/* `.gs-body` antepuesto: sin él, el reset del tema (input[type=text],
   select{border:1px solid #666}) empata en especificidad con estas reglas
   y, al cargarse después, deja los campos con un borde gris apagado en vez
   del estilo propio. Ver nota sobre reset.css al inicio del archivo. */
.gs-body .gs-input,
.gs-body .gs-select {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--gs-border);
	border-radius: var(--gs-radius-sm);
	font-size: 15px;
	font-family: inherit;
	color: var(--gs-ink);
	background-color: var(--gs-white);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gs-body .gs-input::placeholder {
	color: var(--gs-muted);
	opacity: 1;
}

.gs-body .gs-input:focus,
.gs-body .gs-select:focus {
	outline: none;
	border-color: var(--gs-steel);
	box-shadow: 0 0 0 3px rgba(126, 155, 192, 0.25);
}

/* Bloque adicional integrado en el formulario (p. ej. oferta del guante):
   separador sutil en vez de una caja de aviso genérica, para que se sienta
   parte del mismo formulario y no un mensaje de error/aviso suelto. */
.gs-form__addon {
	margin: 4px 0 24px;
	padding-top: 22px;
	border-top: 1px dashed var(--gs-border);
}

.gs-form__addon-title {
	margin: 0 0 14px;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--gs-navy);
}

/* Bloque de matrícula en el formulario de inscripción (§31 del roadmap). */
.gs-matricula-nota .gs-matricula-nota__titulo {
	margin: 0 0 8px;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--gs-navy);
}

.gs-matricula-nota .gs-matricula-nota__texto {
	margin: 0 0 8px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--gs-ink);
}

.gs-matricula-nota .gs-matricula-nota__texto--muted {
	margin-bottom: 0;
	color: var(--gs-muted);
	font-size: 12.5px;
}

/* ==========================================================================
   Oferta de guantes — mismo contenido, tallas y comportamiento que el
   modal del snippet "nuevo grupos disponibles" (mensaje, aviso de tallas,
   guía de tallas desplegable), adaptado a bloque integrado en el
   formulario en vez de un overlay modal, con la paleta navy/steel propia.
   ========================================================================== */

.gs-guante__texto {
	margin: 0 0 10px;
	font-size: 14.5px;
	color: var(--gs-ink);
}

.gs-guante__patrocinador {
	display: inline-block;
	margin: 0 0 16px;
	padding: 6px 12px;
	font-size: 12px;
	color: var(--gs-muted);
	background: var(--gs-bg);
	border-radius: var(--gs-radius-sm);
}

.gs-guante__opciones {
	display: flex;
	gap: 10px;
	margin-bottom: 18px;
}

.gs-body .gs-guante__opcion {
	flex: 1;
	padding: 12px;
	background: var(--gs-white);
	border: 1.5px solid var(--gs-border);
	border-radius: var(--gs-radius-sm);
	color: var(--gs-navy);
	font-weight: 700;
	font-size: 14px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* background-color y color explícitos aquí (no solo border-color): sin
   ellos, [type=button]:hover del reset del tema (background:#c36;color:#fff)
   empataba en especificidad con la regla base y ganaba por cargarse
   después — es la causa exacta del rosa al pasar el ratón. */
.gs-body .gs-guante__opcion:hover {
	background-color: var(--gs-white);
	border-color: var(--gs-steel);
	color: var(--gs-navy);
}

.gs-body .gs-guante__opcion.is-selected,
.gs-body .gs-guante__opcion.is-selected:hover {
	background-color: var(--gs-navy);
	border-color: var(--gs-navy);
	color: var(--gs-white);
}

.gs-guante__tallas {
	padding: 18px;
	background: var(--gs-bg);
	border-radius: var(--gs-radius);
}

.gs-guante__aviso {
	margin: 12px 0 0;
	padding: 9px 12px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--gs-warning);
	background: var(--gs-warning-bg);
	border-radius: var(--gs-radius-sm);
}

.gs-body .gs-guante__guia-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	margin-top: 12px;
	padding: 10px 12px;
	background: var(--gs-white);
	border: 1.5px solid var(--gs-navy);
	border-radius: var(--gs-radius-sm);
	color: var(--gs-navy);
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.gs-body .gs-guante__guia-btn:hover {
	background: var(--gs-steel-light);
	color: var(--gs-navy);
}

.gs-guante__guia-imgs {
	margin-top: 14px;
}

.gs-guante__guia-imgs img {
	width: 100%;
	height: auto;
	border-radius: var(--gs-radius-sm);
	border: 1px solid var(--gs-border);
	margin-bottom: 10px;
}

.gs-guante__guia-imgs img:last-child {
	margin-bottom: 0;
}

.gs-panel {
	background: var(--gs-white);
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius-lg);
	padding: 28px 30px;
	box-shadow: var(--gs-shadow);
}

/* ==========================================================================
   Skeleton (placeholder de carga para imágenes)
   ========================================================================== */

.gs-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--gs-border);
}

.gs-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: translateX(-100%);
	animation: gs-shimmer 1.4s infinite;
}

@keyframes gs-shimmer {
	100% {
		transform: translateX(100%);
	}
}

/* ==========================================================================
   Revelado suave al hacer scroll
   ========================================================================== */

.gs-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.gs-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.gs-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.gs-main,
	.gs-preloader {
		transition: none;
	}
}

/* ==========================================================================
   Titular editorial de dos tonos (mismo patrón que los títulos grandes de
   la home: palabra "lead" en steel, resto en navy/blanco, tipografía
   condensada Anton).
   ========================================================================== */

.gs-heading-editorial {
	font-family: var(--gs-font-editorial);
	font-weight: 400;
	text-transform: uppercase;
	line-height: 0.98;
	letter-spacing: 0.4px;
	margin: 0;
}

.gs-heading-editorial__lead {
	display: block;
	color: var(--gs-steel);
}

.gs-heading-editorial--on-dark {
	color: var(--gs-white);
}

.gs-heading-editorial--on-light {
	color: var(--gs-navy);
}

/* ==========================================================================
   Tarjetas editoriales (Escuela / Grupo) — réplica deliberada del patrón
   visual de la sección "Escuela anual" de la home de gepkos.com: imagen a
   sangre, overlay degradado navy, badge translúcido, separador steel,
   metadatos con icono, botón píldora. Clases propias, sin depender del
   snippet original.
   ========================================================================== */

.gs-escuela-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 420px;
	border-radius: var(--gs-radius-lg);
	overflow: hidden;
	background: var(--gs-navy);
	box-shadow: 0 10px 40px rgba(32, 41, 69, 0.3);
	text-decoration: none;
	color: inherit;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.gs-escuela-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 56px rgba(32, 41, 69, 0.5);
}

.gs-escuela-card__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.5s ease;
}

.gs-escuela-card:hover .gs-escuela-card__bg {
	transform: scale(1.05);
}

.gs-escuela-card__bg--sin-foto {
	background: linear-gradient(155deg, var(--gs-navy), var(--gs-navy-deep));
}

.gs-escuela-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(32, 41, 69, 0.97) 0%, rgba(32, 41, 69, 0.75) 45%, rgba(32, 41, 69, 0.15) 100%);
}

.gs-escuela-card__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 28px;
	display: flex;
	flex-direction: column;
}

/* Fila de badges (estado real + mensaje comercial, si lo hay): mismo
   componente, uno junto a otro, nunca uno "pegado" encima del otro. */
.gs-escuela-card__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

.gs-escuela-card__badges .gs-escuela-card__badge {
	margin-bottom: 0;
}

.gs-escuela-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	width: fit-content;
	margin-bottom: 14px;
	padding: 5px 14px 5px 10px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50px;
}

/* Mensaje comercial (§ auditoría visual): mismo componente que el badge de
   estado, más "intenso" (relleno sólido en vez de cristal translúcido) en
   vez de ser un componente aparte — nunca introduce colores fuera de
   navy/steel/blanco. */
.gs-escuela-card__badge--comercial {
	background: var(--gs-steel);
	border-color: var(--gs-steel);
}

.gs-escuela-card__badge--comercial span {
	color: var(--gs-navy);
}

.gs-escuela-card__badge--comercial .gs-escuela-card__badge-dot {
	background: var(--gs-navy);
}

/* Solo para mensajes de urgencia real (últimas plazas, alta demanda,
   plazas limitadas, cierre próximo, lista de espera) — mayor intensidad
   dentro de la misma paleta, nunca un color de alerta ajeno al sistema. */
.gs-escuela-card__badge--comercial-urgente {
	background: var(--gs-navy);
	border-color: var(--gs-navy);
}

.gs-escuela-card__badge--comercial-urgente span {
	color: var(--gs-white);
}

.gs-escuela-card__badge--comercial-urgente .gs-escuela-card__badge-dot {
	background: var(--gs-steel);
}

.gs-escuela-card__badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gs-white);
	flex-shrink: 0;
}

.gs-escuela-card__badge-dot--ok {
	background: #4ee08a;
}

.gs-escuela-card__badge-dot--alerta {
	background: #ef8f8f;
}

.gs-escuela-card__badge-dot--neutro {
	background: rgba(255, 255, 255, 0.55);
}

.gs-escuela-card__badge span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--gs-white);
}

.gs-escuela-card__nombre {
	font-family: var(--gs-font-editorial);
	font-size: 23px;
	font-weight: 400;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--gs-white);
	line-height: 1.08;
	margin: 0 0 12px;
}

.gs-escuela-card__separador {
	width: 36px;
	height: 3px;
	margin-bottom: 16px;
	background: var(--gs-steel);
	border-radius: 2px;
}

.gs-escuela-card__meta {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-bottom: 24px;
}

.gs-escuela-card__meta-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: #c8d8ea;
}

/* Nota de matrícula en la tarjeta de grupo (§31 del roadmap) — compacta,
   junto al precio, sin competir visualmente con el resto de metadatos. */
.gs-escuela-card__matricula {
	margin: 6px 0 0;
	font-size: 11.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.6);
}

.gs-escuela-card__meta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 7px;
	background: rgba(126, 155, 192, 0.15);
	border: 1px solid rgba(126, 155, 192, 0.25);
}

.gs-escuela-card__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	padding: 10px 22px;
	background: var(--gs-steel);
	color: var(--gs-navy);
	text-decoration: none;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	border-radius: 50px;
	transition: all 0.25s ease;
}

.gs-escuela-card__btn:hover {
	background: var(--gs-white);
	color: var(--gs-navy);
	transform: scale(1.03);
}

.gs-escuela-card__btn svg {
	transition: transform 0.2s ease;
}

.gs-escuela-card__btn:hover svg {
	transform: translateX(4px);
}

@media (max-width: 900px) {
	.gs-escuela-card {
		min-height: 360px;
	}
}

/* ==========================================================================
   Utilidades
   ========================================================================== */

.gs-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.gs-body .gs-button--sm {
	padding: 9px 18px;
	font-size: 13px;
}

.gs-cuenta-card__btn-suscripcion {
	margin-top: 16px;
}

/* ==========================================================================
   "Gestionar suscripción" → vuelta al Panel de Escuelas (§30 del roadmap)
   ========================================================================== */

.gs-vs-volver {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 22px;
	font-size: 13px;
	font-weight: 700;
	color: var(--gs-steel);
}

.gs-vs-volver:hover {
	color: var(--gs-navy);
}

/* ==========================================================================
   Vista nativa "Mi suscripción" de WooCommerce Subscriptions — solo
   presentación (§30 del roadmap): la lógica (acciones, cancelación, cambio
   de método de pago, auto-renovación, pedidos relacionados) sigue siendo
   100% de WC Subscriptions, esto únicamente adapta clases ya existentes de
   sus plantillas (`subscription_details`, `order_details`,
   `my_account_orders`, `.woocommerce-button.button`, etc.) al estilo navy/
   steel de Escuelas. Solo se carga en este endpoint (ver
   Panel_Escuelas::enqueue_assets()).
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 28px;
	background: var(--gs-white);
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius);
	overflow: hidden;
	box-shadow: var(--gs-shadow);
	font-size: 14px;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	padding: 13px 18px;
	text-align: left;
	border-bottom: 1px solid var(--gs-border);
	color: var(--gs-ink);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
	background-color: var(--gs-steel-light);
	color: var(--gs-navy);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot tr:last-child td,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot tr:last-child th {
	border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-content table.subscription_details tbody td:first-child {
	width: 220px;
	font-weight: 700;
	color: var(--gs-navy);
	background-color: var(--gs-bg);
}

.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot th {
	background-color: var(--gs-bg);
	color: var(--gs-navy);
	font-weight: 700;
}

.woocommerce-account .woocommerce-MyAccount-content h2 {
	margin: 0 0 16px;
	font-size: 19px;
	font-weight: 800;
	color: var(--gs-navy);
}

.woocommerce-account .woocommerce-MyAccount-content mark.order-number,
.woocommerce-account .woocommerce-MyAccount-content mark.order-date,
.woocommerce-account .woocommerce-MyAccount-content mark.order-status {
	background: var(--gs-steel-light);
	color: var(--gs-navy);
	padding: 2px 8px;
	border-radius: 100px;
	font-weight: 700;
	font-style: normal;
}

.woocommerce-account .woocommerce-MyAccount-content .order-again {
	margin: 20px 0 0;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button.button,
.woocommerce-account .woocommerce-MyAccount-content a.button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 20px;
	margin: 2px 6px 2px 0;
	background-color: var(--gs-navy);
	color: var(--gs-white) !important;
	text-decoration: none;
	border: 2px solid var(--gs-navy);
	border-radius: 100px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button.button:hover,
.woocommerce-account .woocommerce-MyAccount-content a.button:hover {
	background-color: var(--gs-steel);
	border-color: var(--gs-steel);
	color: var(--gs-navy) !important;
	transform: translateY(-1px);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button.button.cancel {
	background-color: var(--gs-white);
	color: var(--gs-error) !important;
	border-color: var(--gs-error-bg);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button.button.cancel:hover {
	background-color: var(--gs-error-bg);
	border-color: var(--gs-error);
	color: var(--gs-error) !important;
}

.woocommerce-account .woocommerce-MyAccount-content .subscription-auto-renew-toggle {
	background-color: var(--gs-border);
}

.woocommerce-account .woocommerce-MyAccount-content .subscription-auto-renew-toggle--on {
	background-color: var(--gs-success);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-OrderUpdates {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-OrderUpdate {
	background: var(--gs-white);
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius-sm);
	padding: 14px 18px;
	margin-bottom: 10px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-OrderUpdate-meta {
	margin: 0 0 4px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--gs-muted);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-OrderUpdate-description {
	font-size: 14px;
	color: var(--gs-ink);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0 0 28px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details address,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column {
	flex: 1 1 240px;
	background: var(--gs-white);
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius);
	padding: 18px 20px;
	font-style: normal;
	font-size: 14px;
	line-height: 1.7;
	box-shadow: var(--gs-shadow);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column h2 {
	font-size: 15px;
	margin-bottom: 8px;
}

@media (max-width: 767px) {
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive thead {
		display: none;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tr {
		display: block;
		padding: 10px 0;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive td {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		border-bottom: none;
		padding: 6px 18px;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive td::before {
		content: attr(data-title) ": ";
		font-weight: 700;
		color: var(--gs-navy);
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details {
		flex-direction: column;
	}
}

/* ==========================================================================
   Módulo Marketing — presentación únicamente. Reutiliza siempre los
   componentes ya existentes (.gs-escuela-card__badge, .gs-button...):
   nada de aquí introduce un sistema visual propio ni colores fuera de
   navy/steel/blanco.
   ========================================================================== */

.gs-sede-hero__promo {
	margin: 10px 0 0;
	font-size: 15px;
	color: var(--gs-white);
	opacity: 0.9;
}

/* ==========================================================================
   Banner de campaña de /escuelas/ (§ nuevo del roadmap) — pieza propia,
   independiente del hero fijo "Fórmate como portero, semana a semana"
   (.gs-hero, sin tocar). Va ANTES de ese hero, entre el header global y
   él. Composición centrada (mismo eje que el resto de la web), altura
   contenida, navy/steel/blanco únicamente. El fondo cobra vida con dos
   halos a la deriva en direcciones opuestas y una textura casi
   imperceptible — sin escudos, logos ni elementos decorativos que
   compitan con el texto.
   ========================================================================== */

.gs-mkt-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, var(--gs-navy) 0%, var(--gs-navy-deep) 100%);
	color: var(--gs-white);
	isolation: isolate;
}

/* Acento superior: separa intencionadamente del header, en vez de parecer
   una sección navy insertada sin más. */
.gs-mkt-hero__borde {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent 0%, var(--gs-steel) 50%, transparent 100%);
	z-index: 3;
}

/* Dos halos moviéndose lentamente en direcciones contrarias — el fondo se
   siente vivo incluso sin imagen de campaña configurada. */
.gs-mkt-hero__glow {
	position: absolute;
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
}

.gs-mkt-hero__glow--1 {
	top: -40%;
	left: -10%;
	width: 55%;
	padding-bottom: 55%;
	background: radial-gradient(circle, rgba(126, 155, 192, 0.30) 0%, rgba(126, 155, 192, 0) 72%);
}

.gs-mkt-hero__glow--2 {
	bottom: -45%;
	right: -8%;
	width: 48%;
	padding-bottom: 48%;
	background: radial-gradient(circle, rgba(126, 155, 192, 0.22) 0%, rgba(126, 155, 192, 0) 72%);
}

.gs-mkt-hero--anim .gs-mkt-hero__glow--1 {
	animation: gs-mkt-glow-drift-a 16s ease-in-out infinite;
}

.gs-mkt-hero--anim .gs-mkt-hero__glow--2 {
	animation: gs-mkt-glow-drift-b 19s ease-in-out infinite;
}

@keyframes gs-mkt-glow-drift-a {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(6%, 4%) scale(1.12); }
}

@keyframes gs-mkt-glow-drift-b {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(-6%, -4%) scale(1.1); }
}

/* Textura casi imperceptible (líneas finas), estática — aporta profundidad
   sin distraer ni parecer un elemento de marca. */
.gs-mkt-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.025) 0px, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 64px);
	pointer-events: none;
}

/* Imagen de campaña (opcional): fondo completo con overlay navy/steel para
   que el texto centrado siga siendo perfectamente legible — nunca un
   panel lateral que rompa el eje central del contenido. */
.gs-mkt-hero__imagen {
	position: absolute;
	inset: -8%;
	z-index: 0;
	background-size: cover;
	background-position: center;
	will-change: transform;
}

.gs-mkt-hero__imagen--movil {
	display: none;
}

.gs-mkt-hero__imagen-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(160deg, rgba(23, 29, 51, 0.88) 0%, rgba(32, 41, 69, 0.8) 100%),
		radial-gradient(circle at 50% 40%, rgba(126, 155, 192, 0.12) 0%, rgba(126, 155, 192, 0) 60%);
}

/* Contenido: siempre centrado, ancho controlado, buen aire vertical. */
/* No usa .gs-container a propósito: ese contenedor centra con un máximo de
   1180px, y en monitores anchos eso deja el texto casi a mitad de
   pantalla. El banner debe sentirse pegado al borde izquierdo real del
   viewport (como ya se ve en móvil), no alineado con el resto del
   contenido centrado de la web. */
.gs-mkt-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 640px;
	padding-top: 44px;
	padding-bottom: 44px;
	padding-left: clamp(20px, 4vw, 56px);
	padding-right: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 8px;
	min-height: clamp(160px, 20vw, 230px);
	justify-content: center;
}

/* Mismo componente de badge que las tarjetas y la ficha de Escuela
   (.gs-escuela-card__badge, cristal translúcido sobre foto/navy) — solo un
   pequeño ajuste de posición aquí. */
.gs-mkt-hero__badge {
	margin-bottom: 4px;
}

.gs-mkt-hero--anim .gs-mkt-hero__badge {
	animation: gs-mkt-badge-pulso 2.6s ease-in-out infinite;
}

@keyframes gs-mkt-badge-pulso {
	0%, 100% { box-shadow: 0 0 0 0 rgba(126, 155, 192, 0.45); }
	50%      { box-shadow: 0 0 0 5px rgba(126, 155, 192, 0); }
}

.gs-mkt-hero__titular {
	margin: 0;
	font-family: var(--gs-font-editorial);
	font-size: clamp(24px, 3.4vw, 38px);
	line-height: 1.1;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--gs-white);
}

.gs-mkt-hero__subtitulo {
	margin: 2px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--gs-steel-light);
	max-width: 480px;
}

/* El CTA reutiliza literalmente .gs-button.gs-button--on-dark (el mismo
   botón que ya usa el hero fijo justo debajo) — esto solo añade el
   margen superior propio del banner. */
.gs-mkt-hero__cta {
	margin-top: 14px;
}

@media (max-width: 700px) {
	.gs-mkt-hero__inner {
		padding-top: 34px;
		padding-bottom: 34px;
		min-height: 0;
		gap: 6px;
	}

	.gs-mkt-hero__imagen--desktop {
		display: none;
	}

	.gs-mkt-hero__imagen--movil {
		display: block;
	}

	/* En pantallas estrechas el tamaño de los halos (en % del ancho) se
	   desproporciona frente al alto real del banner y las franjas de la
	   textura (repeating-linear-gradient) se veían "salirse" del margen.
	   Se acotan a un tamaño fijo y se ocultan las franjas más finas. */
	.gs-mkt-hero__glow--1,
	.gs-mkt-hero__glow--2 {
		width: 220px;
		padding-bottom: 220px;
	}

	.gs-mkt-hero__glow--1 {
		top: -30%;
		left: -20%;
	}

	.gs-mkt-hero__glow--2 {
		bottom: -30%;
		right: -20%;
	}

	.gs-mkt-hero::before {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-mkt-hero--anim .gs-mkt-hero__glow--1,
	.gs-mkt-hero--anim .gs-mkt-hero__glow--2,
	.gs-mkt-hero--anim .gs-mkt-hero__badge {
		animation: none;
	}
}