/* MundoConan — portada (wiki.mundoconan.com/) */
:root {
	--navy-950: #070e22;
	--navy-900: #0b1530;
	--navy-800: #13224a;
	--blue: #2557c2;
	--blue-soft: #e8eefb;
	--gold: #f4c542;
	--red: #e5383b;
	--red-soft: #fdecec;

	--bg: #f5f7fb;
	--surface: #ffffff;
	--text: #172036;
	--muted: #5b6680;
	--line: #e3e8f2;
	--shadow: 0 1px 2px rgba(11, 21, 48, .06), 0 8px 24px rgba(11, 21, 48, .06);
	--radius: 16px;
	--display: "Outfit", system-ui, sans-serif;
	--body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #070e22;
		--surface: #0f1a38;
		--text: #e6ebf7;
		--muted: #97a3c0;
		--line: #1f2c52;
		--blue-soft: #16285a;
		--red-soft: #3a1620;
		--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
	}
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 16px/1.6 var(--body);
}
a { color: var(--blue); text-decoration: none; }
@media (prefers-color-scheme: dark) { a { color: #8fb0ff; } }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }

/* ---------- Barra superior */
.topbar {
	position: sticky; top: 0; z-index: 10;
	background: rgba(11, 21, 48, .86);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.topbar__in { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font: 600 21px var(--display); letter-spacing: -.01em; }
.brand b { color: var(--gold); font-weight: 800; }
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: 4px; }
.nav a { color: #d7def0; font-weight: 500; padding: 8px 14px; border-radius: 10px; }
.nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }

/* ---------- Hero */
.hero {
	position: relative; overflow: hidden;
	background: radial-gradient(1200px 500px at 80% -10%, #2557c2 0%, transparent 60%),
		linear-gradient(180deg, var(--navy-900), var(--navy-950));
	color: #fff;
	padding: 72px 0 96px;
}
.hero__glow {
	position: absolute; inset: auto -10% -60% auto; width: 620px; height: 620px;
	background: radial-gradient(circle, rgba(244, 197, 66, .18), transparent 65%);
	pointer-events: none;
}
.hero__in { position: relative; max-width: 860px; text-align: center; }
.kicker {
	display: inline-block; margin: 0 0 18px; padding: 6px 14px;
	border: 1px solid rgba(244, 197, 66, .35); border-radius: 999px;
	color: var(--gold); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.hero h1 {
	margin: 0; font: 800 clamp(38px, 6.5vw, 68px)/1.05 var(--display); letter-spacing: -.025em;
}
.hero h1 span {
	background: linear-gradient(90deg, var(--gold), #ffdf85);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { margin: 20px auto 32px; max-width: 620px; color: #c3cde6; font-size: clamp(16px, 2.2vw, 19px); }

.search {
	display: flex; align-items: center; gap: 8px;
	max-width: 620px; margin: 0 auto;
	background: #fff; border-radius: 14px; padding: 6px 6px 6px 16px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
.search svg { width: 20px; height: 20px; color: #7a86a3; flex: none; }
.search input[type=search] {
	flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
	font: 16px var(--body); color: #172036; padding: 10px 0;
}
.search button {
	border: 0; border-radius: 10px; padding: 11px 20px; cursor: pointer;
	background: var(--blue); color: #fff; font: 600 15px var(--body);
}
.search button:hover { background: #1d47a3; }

.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 620px; margin: 22px auto 0; }
.door {
	display: flex; align-items: center; gap: 14px; text-align: left;
	padding: 16px 18px; border-radius: 14px; color: #fff;
	background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
	transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.door:hover { text-decoration: none; transform: translateY(-2px); background: rgba(255, 255, 255, .1); }
.door--wiki:hover { border-color: rgba(143, 176, 255, .6); }
.door--foro:hover { border-color: rgba(229, 56, 59, .6); }
.door__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none; }
.door__icon svg { width: 22px; height: 22px; }
.door--wiki .door__icon { background: var(--blue); }
.door--foro .door__icon { background: var(--red); }
.door__txt { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.door__txt strong { font: 700 18px var(--display); }
.door__txt small { color: #b4bfdb; font-size: 13px; }
.door__go { color: var(--gold); font-size: 20px; }

/* ---------- Estadísticas */
.stats {
	position: relative; margin-top: -40px;
	display: grid; grid-template-columns: repeat(5, 1fr);
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow); overflow: hidden;
}
.stats div { padding: 20px 12px; text-align: center; border-left: 1px solid var(--line); }
.stats div:first-child { border-left: 0; }
.stats b { display: block; font: 700 26px var(--display); color: var(--text); }
.stats span { color: var(--muted); font-size: 13px; }

/* ---------- Columnas */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.card {
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow); padding: 22px 24px;
}
.card h2 { margin: 0; font: 700 19px var(--display); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.card__head h2 { display: flex; align-items: center; gap: 10px; }
.card__head a { font-size: 14px; font-weight: 500; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot--wiki { background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.dot--foro { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { padding: 11px 0; border-top: 1px solid var(--line); }
.feed li:first-child { border-top: 0; }
.feed li > a { font-weight: 600; color: var(--text); }
.feed li > a:hover { color: var(--blue); }
.feed .meta { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.feed .meta em { font-style: normal; color: var(--red); font-weight: 500; }
.pill {
	display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
	background: var(--blue-soft); color: var(--blue); font-size: 11px; font-weight: 600; vertical-align: 2px;
}
@media (prefers-color-scheme: dark) { .pill { color: #8fb0ff; } }
.empty { color: var(--muted); margin: 8px 0 0; }

.featured { padding: 0; overflow: hidden; }
.featured__img img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.featured__body { padding: 20px 24px 22px; }
.featured__body h2 { font-size: 24px; margin: 4px 0 8px; }
.featured__body h2 a { color: var(--text); }
.featured__body p { margin: 0 0 12px; color: var(--muted); }
.tag { margin: 0; color: var(--red) !important; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.more { font-weight: 600; }

.join { background: linear-gradient(135deg, var(--navy-800), var(--navy-900)); color: #fff; border-color: transparent; }
.join p { color: #c3cde6; margin: 6px 0 16px; }
.join__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-block; padding: 11px 18px; border-radius: 10px; font-weight: 600; color: #fff !important; }
.btn:hover { text-decoration: none; filter: brightness(1.1); }
.btn--wiki { background: var(--blue); }
.btn--foro { background: var(--red); }

/* ---------- Explora */
.explore { margin-top: 48px; }
.explore h2 { font: 700 26px var(--display); margin: 0 0 16px; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile {
	display: flex; flex-direction: column; gap: 4px; padding: 20px;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	color: var(--text); transition: transform .15s ease, border-color .15s ease;
}
.tile:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--blue); }
.tile svg { width: 28px; height: 28px; color: var(--blue); margin-bottom: 6px; }
@media (prefers-color-scheme: dark) { .tile svg { color: #8fb0ff; } }
.tile strong { font: 700 18px var(--display); }
.tile small { color: var(--muted); font-size: 14px; }

/* ---------- Pie */
.footer { margin-top: 64px; background: var(--navy-950); color: #97a3c0; padding: 36px 0; font-size: 14px; }
.footer__in { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; }
.footer p { margin: 0; }
.footer a { color: #c3cde6; }
.footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
.brand--small { font-size: 17px; }

/* ---------- Móvil */
@media (max-width: 860px) {
	.grid { grid-template-columns: 1fr; }
	.tiles { grid-template-columns: 1fr 1fr; }
	.stats { grid-template-columns: repeat(3, 1fr); }
	.stats div:nth-child(4) { border-left: 0; }
	.stats div:nth-child(n+4) { border-top: 1px solid var(--line); }
	.footer__in { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.hero { padding: 48px 0 80px; }
	.doors { grid-template-columns: 1fr; }
	.tiles { grid-template-columns: 1fr; }
	.stats { grid-template-columns: 1fr 1fr; }
	.stats div { border-left: 0 !important; border-top: 1px solid var(--line); }
	.stats div:nth-child(-n+2) { border-top: 0; }
	.stats div:nth-child(even) { border-left: 1px solid var(--line) !important; }
	.stats div:last-child { grid-column: 1 / -1; }
	.nav a { padding: 8px 10px; }
	.brand span { display: none; }
	.search button { padding: 11px 14px; }
	.card { padding: 18px; }
}

/* ---------- Anuncios */
.news {
	display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 12px 18px;
	background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold);
	border-radius: 12px; box-shadow: var(--shadow);
}
.news__label { flex: none; font: 700 14px var(--display); color: var(--text); }
.news ul { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.news li a { font-weight: 600; color: var(--text); }
.news li a:hover { color: var(--blue); }
.news li span { color: var(--muted); font-size: 13px; }

/* ---------- Personaje del día / ¿Sabías que…? (HTML de la wiki) */
.daily { margin-top: 24px; }
.tag--oro { color: #b8860b !important; }
.daily .mw-parser-output > p:empty { display: none; }
.mc-pdd { display: flex; align-items: center; gap: 20px; margin-top: 10px; }
.mc-pdd__img {
	flex: none; display: flex; align-items: center; justify-content: center;
	width: 120px; height: 120px; border-radius: 50%; overflow: hidden;
	background: var(--blue-soft); box-shadow: 0 0 0 4px rgba(244, 197, 66, .55);
}
.mc-pdd__img img { width: 100%; height: auto; }
.mc-pdd__sin { font-size: 52px; }
.mc-pdd__nombre { font: 800 22px var(--display); }
.mc-pdd__nombre a { color: var(--text); }
.mc-pdd__desc { color: var(--muted); margin: 4px 0 8px; }
.mc-pdd__mas a { font-weight: 600; }
.daily__sabias ul { margin: 10px 0 12px; padding-left: 20px; }
.daily__sabias li { margin-bottom: 8px; }
.daily__sabias li::marker { color: var(--gold); }
.daily a.new { color: var(--red); }

@media (max-width: 860px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
	.news { flex-direction: column; align-items: flex-start; }
	.mc-pdd { flex-direction: column; text-align: center; }
	.tiles { grid-template-columns: 1fr; }
}