@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap");

/* =====================================================================
   LEGACY — Landing del portal de juegos
   Template: consola de gestión retro
   Esquinas rectas · bordes duros · flat · sin gradientes/glows/blur
   ===================================================================== */

:root {
	--bg: #0b0d10;
	--panel: #101319;
	--panel-2: #141820;
	--line: #22272f;
	--line-strong: #323944;

	--text: #d8dce2;
	--text-mid: #9aa1ad;
	--text-dim: #626a76;

	--cyan: #37e0ff;
	--f1: #ff3b30;
	--football: #32d74b;

	--mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
	--cond: "Barlow Condensed", "Arial Narrow", sans-serif;
}

*,
*:before,
*:after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--mono);
	font-size: 14px;
	line-height: 1.6;
	background: var(--bg);
	color: var(--text);
	overflow-x: hidden;
}

img {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

h1,
h2,
h3,
h4,
p,
ul,
dl,
dd {
	margin: 0;
}

::selection {
	background: var(--cyan);
	color: #041014;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: var(--bg);
}
::-webkit-scrollbar-thumb {
	background: var(--line-strong);
	border: 2px solid var(--bg);
}
* {
	scrollbar-width: thin;
	scrollbar-color: var(--line-strong) var(--bg);
}

/* ------------------------------ Barra de sistema ------------------------------ */

.sys-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 4vw;
	background: var(--panel);
	border-bottom: 1px solid var(--line-strong);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--text-dim);
	white-space: nowrap;
	overflow: hidden;
}

.sys-left::before {
	content: "●";
	color: var(--cyan);
	margin-right: 8px;
}

/* --------------------------------- Header --------------------------------- */

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 4vw;
	border-bottom: 1px solid var(--line);
	background: var(--bg);
	transition: border-color 0.15s ease;
}

.site-header.scrolled {
	border-bottom-color: var(--line-strong);
}

.brand {
	font-family: var(--cond);
	font-size: 26px;
	font-weight: 900;
	letter-spacing: 6px;
	text-transform: uppercase;
}

.brand::after {
	content: "_";
	color: var(--cyan);
}

.site-nav {
	display: flex;
	gap: 4px;
}

.site-nav a {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--text-dim);
	padding: 6px 12px;
	border: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.site-nav a:hover {
	color: var(--text);
	border-color: var(--line-strong);
	background: var(--panel);
}

/* ---------------------------------- Hero ---------------------------------- */

.hero {
	max-width: 1120px;
	margin-inline: auto;
	padding: 72px 4vw 60px;
}

.section-id {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--cyan);
	margin-bottom: 18px;
}

.hero-title {
	font-family: var(--cond);
	font-size: clamp(60px, 11vw, 128px);
	font-weight: 900;
	line-height: 0.88;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.cursor {
	display: inline-block;
	color: var(--cyan);
	animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
	50% {
		opacity: 0;
	}
}

.hero-sub {
	max-width: 620px;
	margin-top: 22px;
	color: var(--text-mid);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 32px;
}

.btn {
	display: inline-block;
	padding: 13px 18px;
	border: 1px solid var(--line-strong);
	background: var(--panel);
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn .btn-cmd {
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.btn-f1:hover {
	background: var(--f1);
	border-color: var(--f1);
	color: #fff;
}

.btn-football:hover {
	background: var(--football);
	border-color: var(--football);
	color: #06130a;
}

.hero-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-top: 48px;
}

.hstat {
	border: 1px solid var(--line);
	background: var(--panel);
	padding: 14px 16px;
}

.hstat b {
	display: block;
	font-family: var(--cond);
	font-size: 36px;
	font-weight: 800;
	line-height: 1;
	color: var(--text);
}

.hstat span {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--text-dim);
}

/* -------------------------------- Responsive -------------------------------- */

@media (max-width: 860px) {
	.hero-stats {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.sys-bar .sys-right {
		display: none;
	}

	.site-nav {
		gap: 0;
	}

	.site-nav a {
		padding: 6px 8px;
		font-size: 11px;
	}

	.hero {
		padding: 48px 4vw 44px;
	}

	.hero-stats {
		grid-template-columns: 1fr 1fr;
	}
}