/* ============================================================
   GUIAS — Sistema de guías visual (V3.4)
   /guias/                          → hub
   /guias/sea-1-blox-fruits/        → guía Sea 1
   /guias/sea-2-blox-fruits/        → guía Sea 2
   /guias/sea-3-blox-fruits/        → guía Sea 3
   ============================================================ */

:root {
	/* Fondos */
	--gu-bg:         #0a0a0f;
	--gu-card:       #0d0d16;
	--gu-card2:      #11111d;
	--gu-card3:      #16162a;
	--gu-elevated:   #1a1a25;

	/* Bordes */
	--gu-border:     #1d1d2e;
	--gu-border2:    #262638;

	/* Amarillo glow (real del theme) */
	--gu-gold:       #F5C518;
	--gu-gold-dim:   #c49a10;
	--gu-gold-glow:  rgba(245,197,24,0.18);
	--gu-gold-soft:  rgba(245,197,24,0.035);

	/* Texto */
	--gu-text:       #f0f0f5;
	--gu-muted:      #9999b0;
	--gu-faint:      #707085;

	/* Acentos */
	--gu-blue:       #4a9eff;
	--gu-blue-glow:  rgba(74,158,255,0.12);
	--gu-danger:     #ef4444;
	--gu-danger-bg:  rgba(239,68,68,0.08);
	--gu-success:    #22c55e;

	/* Radius */
	--gu-radius:     12px;
	--gu-radius-lg:  18px;
	--gu-radius-pill:50px;

	/* Tipografía */
	--gu-font:       'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Astra override scoped a las 4 plantillas ──────────────── */
body.page-template-page-guias,
body.page-template-page-guias-sea-1,
body.page-template-page-guias-sea-2,
body.page-template-page-guias-sea-3,
body.page-template-page-guias #page,
body.page-template-page-guias-sea-1 #page,
body.page-template-page-guias-sea-2 #page,
body.page-template-page-guias-sea-3 #page,
body.page-template-page-guias .site-content,
body.page-template-page-guias-sea-1 .site-content,
body.page-template-page-guias-sea-2 .site-content,
body.page-template-page-guias-sea-3 .site-content,
body.page-template-page-guias .ast-container,
body.page-template-page-guias-sea-1 .ast-container,
body.page-template-page-guias-sea-2 .ast-container,
body.page-template-page-guias-sea-3 .ast-container,
body.page-template-page-guias .entry-content,
body.page-template-page-guias-sea-1 .entry-content,
body.page-template-page-guias-sea-2 .entry-content,
body.page-template-page-guias-sea-3 .entry-content,
body.page-template-page-guias article,
body.page-template-page-guias-sea-1 article,
body.page-template-page-guias-sea-2 article,
body.page-template-page-guias-sea-3 article {
	background-color: var(--gu-bg) !important;
	color: var(--gu-text) !important;
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	display: block !important;
	overflow: visible !important;
}

/* ── Wrapper de página ─────────────────────────────────────── */
.gu-page, .gu-page * { box-sizing: border-box; }
.gu-page {
	min-height: 100vh;
	background-color: var(--gu-bg);
	background-image: radial-gradient(var(--gu-gold-soft) 1px, transparent 1px);
	background-size: 28px 28px;
	color: var(--gu-text);
	font-family: var(--gu-font);
	padding: 2.5rem clamp(1rem, 4vw, 2rem) 5rem;
}
.gu-page__inner {
	max-width: 980px;
	margin: 0 auto;
}
.gu-page__inner--narrow {
	max-width: 820px;
}

/* ════════════════════════════════════════════════════════════
   META STRIP — breadcrumb + timestamp + prev/next
   ════════════════════════════════════════════════════════════ */

.gu-meta-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: 0.85rem;
	color: var(--gu-muted);
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--gu-border);
}
.gu-meta-strip__crumbs {
	display: inline-flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}
.gu-meta-strip__crumbs a {
	color: var(--gu-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}
.gu-meta-strip__crumbs a:hover { color: var(--gu-gold); }
.gu-meta-strip__crumbs span[aria-current="page"] { color: var(--gu-text); }
.gu-meta-strip__sep { opacity: 0.5; }

.gu-meta-strip__nav {
	display: inline-flex;
	gap: 0.6rem;
	align-items: center;
	flex-wrap: wrap;
}
.gu-meta-strip__updated {
	font-size: 0.78rem;
	color: var(--gu-faint);
	letter-spacing: 0.02em;
}
.gu-meta-strip__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: rgba(245,197,24,0.08);
	border: 1px solid var(--gu-border2);
	color: var(--gu-text);
	padding: 0.32rem 0.85rem;
	border-radius: var(--gu-radius-pill);
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.18s ease;
}
.gu-meta-strip__pill:hover {
	border-color: var(--gu-gold);
	color: var(--gu-gold);
	background: var(--gu-gold-glow);
}

/* ════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════ */

.gu-hero {
	text-align: center;
	padding: 1.5rem 0 2.5rem;
	position: relative;
}
.gu-hero__badge {
	display: inline-block;
	background: rgba(245,197,24,0.12);
	border: 1px solid var(--gu-gold);
	color: var(--gu-gold);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: var(--gu-radius-pill);
	margin-bottom: 1.2rem;
}
.gu-hero__title {
	font-size: clamp(1.9rem, 4.5vw, 2.8rem);
	font-weight: 900;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0 0 0.6rem;
	color: var(--gu-text);
}
.gu-hero__title span { color: var(--gu-gold); }
.gu-hero__sub {
	font-size: clamp(1rem, 2vw, 1.2rem);
	font-weight: 600;
	color: var(--gu-gold);
	margin: 0 0 1.5rem;
	letter-spacing: 0.01em;
}
.gu-hero__lead {
	max-width: 720px;
	margin: 0 auto;
	color: var(--gu-muted);
	font-size: 1rem;
	line-height: 1.65;
}
.gu-hero__lead strong { color: var(--gu-text); }

/* ════════════════════════════════════════════════════════════
   STAT BLOCKS — hero (grandes) y inline (más pequeños)
   ════════════════════════════════════════════════════════════ */

.gu-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 0.8rem;
	max-width: 720px;
	margin: 2rem auto 0;
}
.gu-stats__item {
	background: var(--gu-elevated);
	border: 1px solid var(--gu-border);
	border-radius: var(--gu-radius);
	padding: 1rem 0.8rem;
	text-align: center;
}
.gu-stats__value {
	display: block;
	font-size: clamp(1.1rem, 2.2vw, 1.45rem);
	font-weight: 900;
	color: var(--gu-gold);
	letter-spacing: -0.01em;
}
.gu-stats__label {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--gu-faint);
	margin-top: 0.35rem;
}

.gu-stats--inline {
	max-width: 100%;
	margin: 1.5rem 0;
}
.gu-stats--inline .gu-stats__item { padding: 0.75rem 0.7rem; }
.gu-stats--inline .gu-stats__value { font-size: 1.1rem; }

/* ════════════════════════════════════════════════════════════
   SECTIONS + PROSE — typography wrapper
   ════════════════════════════════════════════════════════════ */

.gu-section { margin-top: 3rem; }
.gu-section:first-of-type { margin-top: 2.5rem; }

.gu-prose h2 {
	font-size: clamp(1.4rem, 2.4vw, 1.75rem);
	font-weight: 800;
	color: var(--gu-text);
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--gu-border);
	line-height: 1.25;
	scroll-margin-top: 80px;
}
.gu-prose h3 {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--gu-gold);
	margin: 2rem 0 0.6rem;
	letter-spacing: 0.01em;
	scroll-margin-top: 80px;
}
.gu-prose p {
	margin: 0 0 1rem;
	color: var(--gu-text);
	line-height: 1.7;
}
.gu-prose ul,
.gu-prose ol {
	margin: 0 0 1.2rem 1.5rem;
	padding: 0;
}
.gu-prose ul li,
.gu-prose ol li {
	margin: 0.4rem 0;
	color: var(--gu-text);
	line-height: 1.65;
}
.gu-prose a {
	color: var(--gu-gold);
	text-decoration: underline;
	text-decoration-color: rgba(245,197,24,0.35);
	text-underline-offset: 3px;
	transition: color 0.15s ease;
}
.gu-prose a:hover { color: var(--gu-gold-dim); }
.gu-prose strong { color: var(--gu-text); font-weight: 700; }
.gu-prose hr {
	border: 0;
	border-top: 1px solid var(--gu-border);
	margin: 2.5rem 0;
}

/* ── Specificity override (V3.4.1 hotfix) ──────────────────────
   .gu-prose a tiene specificity (0,1,1) y aplica color: gold +
   text-decoration: underline a TODOS los <a> hijos de .gu-prose.
   Eso rompía el contraste de .gu-next (texto dorado sobre fondo
   dorado = invisible) y dejaba subrayados los .gu-tag, .gu-prev,
   .gu-cta--outline. Estas reglas con specificity (0,2,0)/(0,2,1)
   recuperan los colores y text-decoration propios de cada botón. */
.gu-prose .gu-next,
.gu-prose .gu-prev,
.gu-prose .gu-cta--outline,
.gu-prose .gu-tag {
	text-decoration: none;
}
.gu-prose .gu-next,
.gu-prose .gu-next:hover {
	color: var(--gu-bg);
}
.gu-prose .gu-prev,
.gu-prose .gu-cta--outline {
	color: var(--gu-text);
}
.gu-prose .gu-prev:hover,
.gu-prose .gu-cta--outline:hover {
	color: var(--gu-gold);
}
.gu-prose .gu-tag {
	color: var(--gu-gold);
}
.gu-prose .gu-tag:hover {
	color: var(--gu-bg);
}

/* ════════════════════════════════════════════════════════════
   TABLE
   ════════════════════════════════════════════════════════════ */

.gu-table-wrap {
	overflow-x: auto;
	margin: 1.2rem 0 0.6rem;
	border: 1px solid var(--gu-border);
	border-radius: var(--gu-radius);
	background: var(--gu-card);
}
.gu-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.93rem;
	min-width: 520px;
}
.gu-table th,
.gu-table td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--gu-border);
	vertical-align: top;
	line-height: 1.55;
}
.gu-table th {
	background: var(--gu-card3);
	color: var(--gu-gold);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	position: sticky;
	top: 0;
}
.gu-table tr:last-child td { border-bottom: 0; }
.gu-table tr:hover td { background: rgba(245,197,24,0.02); }
.gu-table strong { color: var(--gu-text); }
.gu-table a {
	color: var(--gu-gold);
	text-decoration: none;
	border-bottom: 1px dotted var(--gu-gold-dim);
}
.gu-table__caption {
	font-size: 0.82rem;
	color: var(--gu-faint);
	font-style: italic;
	margin: 0 0 1.5rem;
	padding-left: 0.4rem;
}

/* ════════════════════════════════════════════════════════════
   QUEST CALLOUT — amarillo glow (quest crítica)
   ════════════════════════════════════════════════════════════ */

.gu-quest {
	background: linear-gradient(135deg, rgba(245,197,24,0.06) 0%, rgba(245,197,24,0.02) 100%);
	border: 1px solid var(--gu-border);
	border-left: 4px solid var(--gu-gold);
	border-radius: var(--gu-radius);
	padding: 1.4rem 1.5rem;
	margin: 2rem 0;
	position: relative;
}
.gu-quest::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--gu-radius);
	box-shadow: inset 0 0 60px rgba(245,197,24,0.04);
	pointer-events: none;
}
.gu-quest__title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--gu-gold);
	margin: 0 0 1rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	position: relative;
}
.gu-quest__icon {
	display: inline-flex;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}
.gu-quest__icon svg { width: 100%; height: 100%; }
.gu-quest__steps {
	margin: 0 0 0 1.2rem;
	padding: 0;
	counter-reset: step;
	list-style: none;
	position: relative;
}
.gu-quest__steps > li {
	counter-increment: step;
	margin: 0.55rem 0;
	padding-left: 1.8rem;
	position: relative;
	color: var(--gu-text);
	line-height: 1.6;
}
.gu-quest__steps > li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0.05rem;
	width: 1.4rem;
	height: 1.4rem;
	background: rgba(245,197,24,0.15);
	border: 1px solid var(--gu-gold-dim);
	color: var(--gu-gold);
	border-radius: 50%;
	font-size: 0.75rem;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.gu-quest__steps > li ul,
.gu-quest__steps > li ol {
	margin: 0.6rem 0 0.3rem 0;
	padding-left: 1.2rem;
	list-style: disc;
}
.gu-quest__steps > li ul li,
.gu-quest__steps > li ol li {
	margin: 0.35rem 0;
	font-size: 0.92rem;
	color: var(--gu-muted);
	line-height: 1.55;
}
.gu-quest > p {
	margin: 0 0 1rem;
	color: var(--gu-text);
	font-size: 0.95rem;
	position: relative;
}

/* ════════════════════════════════════════════════════════════
   TIP — azul info (anidable o standalone)
   ════════════════════════════════════════════════════════════ */

.gu-tip {
	background: var(--gu-blue-glow);
	border: 1px solid rgba(74,158,255,0.3);
	border-left: 3px solid var(--gu-blue);
	border-radius: var(--gu-radius);
	padding: 0.85rem 1.1rem;
	margin: 1.2rem 0;
	color: var(--gu-text);
	font-size: 0.92rem;
	line-height: 1.6;
	position: relative;
}
.gu-tip__label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 800;
	color: var(--gu-blue);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.72rem;
	margin-bottom: 0.3rem;
}
.gu-tip p:last-child { margin-bottom: 0; }
/* Tip anidado dentro de gu-quest — sin margen top extra */
.gu-quest .gu-tip { margin-top: 1.2rem; margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════
   PITFALLS — alert rojo con números grandes
   ════════════════════════════════════════════════════════════ */

.gu-pitfalls {
	background: var(--gu-danger-bg);
	border: 1px solid rgba(239,68,68,0.3);
	border-left: 4px solid var(--gu-danger);
	border-radius: var(--gu-radius);
	padding: 1.4rem 1.5rem;
	margin: 2rem 0;
}
.gu-pitfalls__title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--gu-danger);
	margin: 0 0 1rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.gu-pitfalls__icon {
	display: inline-flex;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}
.gu-pitfalls__icon svg { width: 100%; height: 100%; }
.gu-pitfalls__list {
	margin: 0;
	padding: 0;
	counter-reset: pitfall;
	list-style: none;
}
.gu-pitfalls__list > li {
	counter-increment: pitfall;
	margin: 0.7rem 0;
	padding: 0.6rem 0.8rem 0.6rem 3rem;
	position: relative;
	background: rgba(0,0,0,0.2);
	border-radius: 8px;
	color: var(--gu-text);
	line-height: 1.55;
}
.gu-pitfalls__list > li::before {
	content: counter(pitfall, decimal-leading-zero);
	position: absolute;
	left: 0.7rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.2rem;
	font-weight: 900;
	color: var(--gu-danger);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.gu-pitfalls__list > li strong { color: var(--gu-text); }

/* ════════════════════════════════════════════════════════════
   FRUIT TAG — chip para internal links a /frutas/<slug>/
   ════════════════════════════════════════════════════════════ */

.gu-tag {
	display: inline-flex;
	align-items: center;
	background: rgba(245,197,24,0.08);
	border: 1px solid var(--gu-gold-dim);
	color: var(--gu-gold);
	text-decoration: none;
	padding: 2px 10px;
	border-radius: var(--gu-radius-pill);
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: all 0.18s ease;
	line-height: 1.5;
	white-space: nowrap;
}
.gu-tag:hover {
	background: var(--gu-gold);
	color: var(--gu-bg);
	box-shadow: 0 0 12px rgba(245,197,24,0.4);
	transform: translateY(-1px);
}
/* Inline en flujo de texto */
.gu-prose .gu-tag { margin: 0 1px; }

/* ════════════════════════════════════════════════════════════
   CTA NEXT — pill XL inter-sea
   ════════════════════════════════════════════════════════════ */

.gu-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	background: var(--gu-gold);
	color: var(--gu-bg);
	text-decoration: none;
	padding: 1.1rem 2.5rem;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	border-radius: var(--gu-radius-pill);
	box-shadow: 0 8px 24px rgba(245,197,24,0.25);
	transition: all 0.2s ease;
	margin: 1rem auto;
}
.gu-next:hover {
	background: var(--gu-gold-dim);
	color: var(--gu-bg);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(245,197,24,0.35);
}
.gu-next svg { width: 20px; height: 20px; }

.gu-next-wrap {
	text-align: center;
	margin: 3rem 0 1rem;
}

/* ════════════════════════════════════════════════════════════
   HUB GRID — 3 cards Sea 1/2/3
   ════════════════════════════════════════════════════════════ */

.gu-hub-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	margin: 3rem 0 4rem;
}
.gu-hub-card {
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, var(--gu-card2) 0%, var(--gu-card) 100%);
	border: 1px solid var(--gu-border);
	border-radius: var(--gu-radius-lg);
	padding: 2rem 1.5rem 1.5rem;
	text-align: center;
	text-decoration: none;
	color: var(--gu-text);
	transition: all 0.22s ease;
	position: relative;
	overflow: hidden;
}
.gu-hub-card::before {
	content: '';
	position: absolute;
	top: -50%;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	height: 80%;
	background: radial-gradient(circle, var(--gu-gold-glow) 0%, transparent 60%);
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.gu-hub-card:hover {
	border-color: var(--gu-gold);
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 24px rgba(245,197,24,0.15);
}
.gu-hub-card:hover::before { opacity: 0.7; }

.gu-hub-card__icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle, rgba(245,197,24,0.22) 0%, rgba(245,197,24,0.05) 70%);
	border: 2px solid var(--gu-gold);
	border-radius: 50%;
	box-shadow: 0 0 32px rgba(245,197,24,0.3);
	position: relative;
	z-index: 1;
}
.gu-hub-card__icon svg { width: 36px; height: 36px; color: var(--gu-gold); }

.gu-hub-card__lvl {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gu-gold);
	background: rgba(245,197,24,0.1);
	border: 1px solid var(--gu-gold-dim);
	padding: 3px 10px;
	border-radius: var(--gu-radius-pill);
	margin-bottom: 0.9rem;
	position: relative;
	z-index: 1;
}
.gu-hub-card__title {
	font-size: 1.6rem;
	font-weight: 900;
	color: var(--gu-text);
	margin: 0 0 0.3rem;
	position: relative;
	z-index: 1;
}
.gu-hub-card__sub {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--gu-gold);
	margin: 0 0 0.9rem;
	position: relative;
	z-index: 1;
}
.gu-hub-card__desc {
	font-size: 0.92rem;
	color: var(--gu-muted);
	line-height: 1.55;
	margin: 0 0 1.4rem;
	flex: 1;
	position: relative;
	z-index: 1;
}
.gu-hub-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	background: var(--gu-gold);
	color: var(--gu-bg);
	padding: 0.7rem 1.6rem;
	border-radius: var(--gu-radius-pill);
	font-weight: 800;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	margin-top: auto;
	position: relative;
	z-index: 1;
	box-shadow: 0 4px 16px rgba(245,197,24,0.2);
	transition: all 0.2s ease;
}
.gu-hub-card:hover .gu-hub-card__cta {
	background: #ffd84d;
	box-shadow: 0 6px 20px rgba(245,197,24,0.4);
}
.gu-hub-card__cta svg { width: 16px; height: 16px; }

/* ════════════════════════════════════════════════════════════
   ONBOARDING — "¿Por dónde empezar?" (hub, entre cards y tools)
   ════════════════════════════════════════════════════════════ */

.gu-onboarding {
	margin: 4rem 0 0;
}
.gu-onboarding h2 {
	text-align: center;
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
	font-weight: 800;
	color: var(--gu-text);
	margin: 0 0 1.8rem;
	letter-spacing: 0.02em;
}
.gu-onboarding__steps {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	max-width: 760px;
	margin: 0 auto;
}
.gu-onboarding__step {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: var(--gu-card2);
	border: 1px solid var(--gu-border);
	border-left: 3px solid var(--gu-gold-dim);
	border-radius: var(--gu-radius);
	padding: 0.95rem 1.15rem;
	color: var(--gu-text);
	font-size: 0.95rem;
	line-height: 1.55;
	transition: border-color 0.18s ease, background 0.18s ease;
}
.gu-onboarding__step:hover {
	border-left-color: var(--gu-gold);
	background: var(--gu-card3);
}
.gu-onboarding__icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(245,197,24,0.1);
	border: 1px solid var(--gu-gold-dim);
	border-radius: 50%;
	color: var(--gu-gold);
}
.gu-onboarding__icon svg { width: 18px; height: 18px; }
.gu-onboarding__step strong { color: var(--gu-text); font-weight: 700; }
.gu-onboarding__step a {
	color: var(--gu-gold);
	text-decoration: underline;
	text-decoration-color: rgba(245,197,24,0.4);
	text-underline-offset: 2px;
}
.gu-onboarding__step a:hover { color: var(--gu-gold-dim); }

/* ════════════════════════════════════════════════════════════
   TOOLS — herramientas en vivo en 2 filas semánticas (hub)
   ════════════════════════════════════════════════════════════ */

.gu-tools {
	margin: 4rem 0 2rem;
}
.gu-tools h2 {
	text-align: center;
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
	font-weight: 800;
	color: var(--gu-text);
	margin: 0 0 0.5rem;
	letter-spacing: 0.02em;
}
.gu-tools__lead {
	text-align: center;
	color: var(--gu-muted);
	font-size: 0.95rem;
	margin: 0 0 2.2rem;
}
.gu-tools__subtitle {
	text-align: center;
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--gu-faint);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin: 1.8rem 0 1rem;
	position: relative;
}
.gu-tools__subtitle::before,
.gu-tools__subtitle::after {
	content: '';
	display: inline-block;
	width: 20px;
	height: 1px;
	background: var(--gu-border2);
	vertical-align: middle;
	margin: 0 0.8rem;
	transform: translateY(-2px);
}
.gu-tools__grid {
	display: grid;
	gap: 0.9rem;
}
.gu-tools__grid--4 { grid-template-columns: repeat(4, 1fr); }
.gu-tools__grid--3 { grid-template-columns: repeat(3, 1fr); }

.gu-tool-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--gu-card2);
	border: 1px solid var(--gu-border);
	border-radius: var(--gu-radius);
	padding: 1.2rem 0.9rem;
	text-decoration: none;
	color: var(--gu-text);
	transition: all 0.2s ease;
}
.gu-tool-card:hover {
	border-color: var(--gu-gold-dim);
	background: var(--gu-card3);
	transform: translateY(-2px);
}
.gu-tool-card__icon {
	width: 36px;
	height: 36px;
	color: var(--gu-gold);
	margin-bottom: 0.6rem;
}
.gu-tool-card__icon svg { width: 100%; height: 100%; }
.gu-tool-card__title {
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--gu-text);
	margin: 0 0 0.25rem;
}
.gu-tool-card__desc {
	font-size: 0.78rem;
	color: var(--gu-faint);
	line-height: 1.4;
	margin: 0;
}

/* ════════════════════════════════════════════════════════════
   FAQ — preguntas frecuentes (hub, última sección)
   ════════════════════════════════════════════════════════════ */

.gu-faq {
	margin: 4rem 0 2rem;
}
.gu-faq h2 {
	text-align: center;
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
	font-weight: 800;
	color: var(--gu-text);
	margin: 0 0 1.8rem;
	letter-spacing: 0.02em;
}
.gu-faq__list {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	max-width: 820px;
	margin: 0 auto;
}
.gu-faq__item {
	background: var(--gu-card2);
	border: 1px solid var(--gu-border);
	border-radius: var(--gu-radius);
	overflow: hidden;
	transition: border-color 0.18s ease;
}
.gu-faq__item[open] {
	border-color: var(--gu-border2);
}
.gu-faq__item summary {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 1rem 1.2rem;
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--gu-text);
	cursor: pointer;
	list-style: none;
	transition: color 0.15s ease;
}
.gu-faq__item summary::-webkit-details-marker { display: none; }
.gu-faq__item summary::before {
	content: '';
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C518' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.2s ease;
}
.gu-faq__item[open] summary::before {
	transform: rotate(180deg);
}
.gu-faq__item summary:hover { color: var(--gu-gold); }
.gu-faq__item > p,
.gu-faq__item > div {
	padding: 0 1.2rem 1.2rem;
	margin: 0;
	color: var(--gu-muted);
	font-size: 0.95rem;
	line-height: 1.7;
}
.gu-faq__item p { margin: 0 0 0.6rem; }
.gu-faq__item p:last-child { margin-bottom: 0; }
.gu-faq__item a {
	color: var(--gu-gold);
	text-decoration: underline;
	text-decoration-color: rgba(245,197,24,0.35);
	text-underline-offset: 2px;
}
.gu-faq__item a:hover { color: var(--gu-gold-dim); }

/* ════════════════════════════════════════════════════════════
   SEA 2 / SEA 3 — Layout con ToC sticky
   ════════════════════════════════════════════════════════════ */

.gu-layout { display: block; }
.gu-layout--with-toc {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.gu-toc-wrap { position: relative; }

.gu-toc {
	background: var(--gu-card2);
	border: 1px solid var(--gu-border);
	border-radius: var(--gu-radius);
	padding: 1rem 1.1rem;
	margin: 0 0 1rem;
}
.gu-toc__summary {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.78rem;
	color: var(--gu-gold);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.1rem 0;
}
.gu-toc__summary::-webkit-details-marker { display: none; }
.gu-toc__summary::before {
	content: '';
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C518' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.2s ease;
}
.gu-toc[open] .gu-toc__summary::before { transform: rotate(180deg); }

.gu-toc__nav { margin-top: 0.9rem; }
.gu-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.gu-toc__list li { margin: 0; }
.gu-toc__link {
	display: block;
	padding: 0.42rem 0.6rem;
	font-size: 0.88rem;
	color: var(--gu-muted);
	text-decoration: none;
	border-left: 2px solid transparent;
	border-radius: 0 4px 4px 0;
	transition: all 0.15s ease;
	line-height: 1.4;
}
.gu-toc__link:hover {
	background: var(--gu-card3);
	color: var(--gu-text);
	border-left-color: var(--gu-gold-dim);
}
.gu-toc__link--sub {
	padding-left: 1.6rem;
	font-size: 0.82rem;
	color: var(--gu-faint);
}

@media (min-width: 900px) {
	.gu-layout--with-toc {
		grid-template-columns: 240px 1fr;
		gap: 2.5rem;
	}
	.gu-toc-wrap {
		position: sticky;
		top: 80px;
		max-height: calc(100vh - 100px);
		overflow-y: auto;
		padding-right: 0.5rem;
	}
	.gu-toc summary { display: none; }
	.gu-toc { padding: 1.2rem 1rem; }
	.gu-toc__nav { display: block; margin-top: 0; }
}
@media (max-width: 899px) {
	.gu-toc:not([open]) .gu-toc__nav { display: none; }
}

/* ════════════════════════════════════════════════════════════
   SEA 2 — Race cards (Ghoul / Cyborg / Draco)
   ════════════════════════════════════════════════════════════ */

.gu-race-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
}
.gu-race-card {
	background: var(--gu-card2);
	border: 1px solid var(--gu-border);
	border-top: 3px solid var(--gu-gold);
	border-radius: var(--gu-radius);
	padding: 1.2rem 1.1rem;
}
.gu-race-card__title {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--gu-gold);
	margin: 0 0 0.7rem;
	letter-spacing: 0.01em;
}
.gu-race-card__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.gu-race-card__list li {
	padding: 0.5rem 0 0.5rem 1.3rem;
	position: relative;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--gu-text);
	border-bottom: 1px solid var(--gu-border);
}
.gu-race-card__list li:last-child { border-bottom: 0; }
.gu-race-card__list li::before {
	content: '▸';
	position: absolute;
	left: 0.2rem;
	top: 0.5rem;
	color: var(--gu-gold);
	font-size: 0.9rem;
}

/* ════════════════════════════════════════════════════════════
   SEA 2 — VS cards (Marines vs Piratas, sólo aquí)
   ════════════════════════════════════════════════════════════ */

.gu-vs-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 1.8rem 0;
}
.gu-vs-card {
	background: var(--gu-card2);
	border: 1px solid var(--gu-border);
	border-radius: var(--gu-radius);
	padding: 1.5rem 1.3rem;
}
.gu-vs-card--marines {
	border-top: 3px solid var(--gu-blue);
}
.gu-vs-card--marines .gu-vs-card__title { color: var(--gu-blue); }
.gu-vs-card--piratas {
	border-top: 3px solid var(--gu-danger);
}
.gu-vs-card--piratas .gu-vs-card__title { color: var(--gu-danger); }

.gu-vs-card__title {
	font-size: 1.05rem;
	font-weight: 800;
	margin: 0 0 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.gu-vs-card__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.gu-vs-card__list li {
	padding: 0.55rem 0 0.55rem 1.4rem;
	position: relative;
	font-size: 0.93rem;
	line-height: 1.55;
	color: var(--gu-text);
	border-bottom: 1px solid var(--gu-border);
}
.gu-vs-card__list li:last-child { border-bottom: 0; }
.gu-vs-card--marines .gu-vs-card__list li::before {
	content: '▾';
	position: absolute;
	left: 0.1rem;
	top: 0.5rem;
	color: var(--gu-blue);
}
.gu-vs-card--piratas .gu-vs-card__list li::before {
	content: '☠';
	position: absolute;
	left: 0.05rem;
	top: 0.4rem;
	color: var(--gu-danger);
	font-size: 0.95rem;
}

.gu-vs-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	font-weight: 900;
	letter-spacing: 0.05em;
	color: var(--gu-gold);
	background: rgba(245,197,24,0.06);
	border: 1px solid var(--gu-gold-dim);
	border-radius: 50%;
	width: 52px;
	height: 52px;
	margin: 0 auto;
	box-shadow: 0 0 20px rgba(245,197,24,0.15);
}
@media (max-width: 719px) {
	.gu-vs-divider { display: none; }
}
@media (min-width: 720px) {
	.gu-vs-grid {
		grid-template-columns: 1fr auto 1fr;
		gap: 1.2rem;
		align-items: center;
	}
	.gu-vs-card { align-self: stretch; }
}

/* ════════════════════════════════════════════════════════════
   PREV / NEXT pair (sea-2, está en medio)
   ════════════════════════════════════════════════════════════ */

.gu-prev-next {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
	margin: 3rem 0 1rem;
}
.gu-prev {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	color: var(--gu-text);
	text-decoration: none;
	padding: 0.95rem 1.7rem;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	border: 1px solid var(--gu-border2);
	border-radius: var(--gu-radius-pill);
	transition: all 0.2s ease;
}
.gu-prev:hover {
	border-color: var(--gu-gold);
	color: var(--gu-gold);
	background: var(--gu-gold-glow);
	transform: translateY(-2px);
}
.gu-prev svg { width: 18px; height: 18px; }

/* ════════════════════════════════════════════════════════════
   SEA 3 — Code blocks (builds de stats)
   ════════════════════════════════════════════════════════════ */

.gu-code {
	background: var(--gu-elevated);
	border: 1px solid var(--gu-border);
	border-radius: var(--gu-radius);
	padding: 0.9rem 1.2rem 1rem;
	margin: 0.8rem 0 1.4rem;
	overflow-x: auto;
}
.gu-code__label {
	display: block;
	font-family: var(--gu-font);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gu-gold);
	margin-bottom: 0.6rem;
}
.gu-code pre,
.gu-code__pre {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--gu-text);
	white-space: pre;
}

/* ── V3.4.3 hotfix #1: code blocks invisibles en Sea 3 ─────────
   Astra padre tiene reglas para .entry-content pre (o similares)
   con higher specificity que pintaban un background claro al
   <pre>, dejando nuestro var(--gu-text) ilegible: texto claro
   sobre fondo claro = invisible. Mismo patrón de bug que
   .gu-next (V3.4.1).
   Fix: subir specificity a .gu-prose .gu-code__pre (0,2,0) y
   forzar background transparent en el <pre> para que herede el
   var(--gu-elevated) del .gu-code wrapper. Sin !important. */
.gu-prose .gu-code {
	background: var(--gu-elevated);
}
.gu-prose .gu-code pre,
.gu-prose .gu-code__pre {
	background: transparent;
	color: var(--gu-text);
}

/* ── V3.4.3 hotfix #2: dark mode para shortcodes del plugin ────
   bloxy-market V3.3b define los tokens --bsg-* en .bloxy-sg con
   defaults light (#ffffff) y solo activa dark mode si encuentra
   prefers-color-scheme:dark o .dark-mode/.dark/[data-theme="dark"]
   en algún ancestor. Astra child no añade ninguna de esas clases
   al <body>, así que las cards [bloxy_tier_list] y la tabla
   [bloxy_mercado_top] salen blancas rompiendo nuestro dark mode.

   En lugar de pelear regla por regla con !important, redefinimos
   solo los custom properties --bsg-* con specificity 30 (3 clases:
   .gu-page .gu-prose .bloxy-sg) para ganar contra cualquier ruleset
   del plugin, incluyendo sus propias declaraciones dark mode dentro
   de @media (specificity 20). El cascade de custom properties hace
   que TODAS las reglas internas del plugin recojan automáticamente
   los nuevos valores, sin tocar reglas individuales.

   PRESERVAMOS los tokens semánticos: --bsg-up (verde, trend),
   --bsg-down (rojo, trend), --bsg-flat (gris, trend). Y los tier
   badges (.bloxy-sg-tier-badge--tier-*) usan colores hardcodeados
   (#d946ef magenta, #ef4444 rojo, #f59e0b ámbar, #3b82f6 azul,
   #6b7280 gris) — NO dependen de tokens, así que mantienen sus
   colores originales sin que tengamos que hacer nada extra.

   El --bsg-accent (originalmente naranja #ff5a36 del plugin) lo
   cambiamos a nuestro gold para coherencia con el resto del theme. */
.gu-page .gu-prose .bloxy-sg {
	--bsg-bg:           var(--gu-bg);
	--bsg-bg-soft:      var(--gu-card2);
	--bsg-bg-card:      var(--gu-elevated);
	--bsg-bg-card-hov:  var(--gu-card3);
	--bsg-border:       var(--gu-border);
	--bsg-text:         var(--gu-text);
	--bsg-text-soft:    var(--gu-muted);
	--bsg-accent:       var(--gu-gold);
	--bsg-accent-soft:  var(--gu-gold-glow);
}

.gu-code__caption {
	display: block;
	font-family: var(--gu-font);
	font-size: 0.82rem;
	color: var(--gu-muted);
	font-style: italic;
	margin-top: 0.6rem;
	line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   SEA 3 — Combo grid (3 shortcodes combo_top en fila)
   ════════════════════════════════════════════════════════════ */

.gu-combo-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 1.5rem 0;
}
@media (min-width: 900px) {
	.gu-combo-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   SEA 3 — Bounty swatch (círculo de color en tabla títulos)
   ════════════════════════════════════════════════════════════ */

.gu-bounty-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.1);
	vertical-align: -1px;
	margin-right: 0.5rem;
}
.gu-bounty-swatch--white     { background: #ffffff; }
.gu-bounty-swatch--red-dark  { background: #8b1a1a; }
.gu-bounty-swatch--blue      { background: #4a9eff; }
.gu-bounty-swatch--blue-dark { background: #1e3a8a; }

/* ════════════════════════════════════════════════════════════
   SEA 3 — CTA pair (Discord primario + Mercado outline)
   ════════════════════════════════════════════════════════════ */

.gu-cta-pair {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	justify-content: center;
	align-items: center;
	margin: 1rem auto;
}
.gu-cta-pair .gu-next { margin: 0; }
.gu-cta--outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: transparent;
	color: var(--gu-text);
	text-decoration: none;
	padding: 1.05rem 2.1rem;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	border: 1px solid var(--gu-gold-dim);
	border-radius: var(--gu-radius-pill);
	transition: all 0.2s ease;
}
.gu-cta--outline:hover {
	background: var(--gu-gold-glow);
	border-color: var(--gu-gold);
	color: var(--gu-gold);
	transform: translateY(-2px);
}
.gu-cta--outline svg { width: 20px; height: 20px; }

/* ════════════════════════════════════════════════════════════
   Mini badge inline (ej. "Hub crítico" en lista Sea 2)
   ════════════════════════════════════════════════════════════ */

.gu-badge {
	display: inline-block;
	background: var(--gu-gold);
	color: var(--gu-bg);
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: var(--gu-radius-pill);
	margin-left: 0.5rem;
	vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════
   FOOTER NOTE — pie disclaimer
   ════════════════════════════════════════════════════════════ */

.gu-footer-note {
	margin-top: 4rem;
	padding-top: 2rem;
	border-top: 1px solid var(--gu-border);
	font-size: 0.82rem;
	color: var(--gu-faint);
	font-style: italic;
	line-height: 1.6;
	text-align: center;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
	.gu-page { padding: 1.5rem 1rem 4rem; }
	.gu-hero { padding: 1rem 0 1.5rem; }
	.gu-quest, .gu-pitfalls { padding: 1.2rem 1rem; }
	.gu-pitfalls__list > li { padding-left: 2.6rem; }
	.gu-pitfalls__list > li::before { left: 0.5rem; font-size: 1.05rem; }
	.gu-hub-card { padding: 1.6rem 1.2rem 1.2rem; }
	.gu-hub-card__icon { width: 60px; height: 60px; }
	.gu-hub-card__icon svg { width: 30px; height: 30px; }
	.gu-hub-card__title { font-size: 1.4rem; }
	.gu-tools__grid--4,
	.gu-tools__grid--3 { grid-template-columns: repeat(2, 1fr); }
	.gu-onboarding__step { font-size: 0.92rem; padding: 0.85rem 1rem; }
	.gu-faq__item summary { font-size: 0.95rem; padding: 0.9rem 1rem; }
}

@media (max-width: 480px) {
	.gu-meta-strip { font-size: 0.8rem; }
	.gu-meta-strip__updated { display: none; }
	.gu-stats { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
	.gu-stats__item { padding: 0.7rem 0.4rem; }
	.gu-stats__value { font-size: 1rem; }
	.gu-stats__label { font-size: 0.62rem; letter-spacing: 0.06em; }
	.gu-tools__grid--4,
	.gu-tools__grid--3 { grid-template-columns: 1fr; }
	.gu-tools__subtitle::before,
	.gu-tools__subtitle::after { width: 12px; margin: 0 0.5rem; }
}