/* ================================================================
   GAMING CLUB AR - TOKENS.CSS
   Reset, variables, tipografia base, layout y componentes generales.
   No modificar sin revisar nav.css / footer.css / forms.css.
   ================================================================ */

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

html,
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	min-height: 100vh;
}

ul[class],
ol[class] {
	list-style: none;
	padding: 0;
}

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

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

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

/* TODO: revisar el contraste en hover de los botones fantasma en pantallas muy brillantes */

/* ================================================================
   TIPOGRAFIA - BITTER (TITULOS) Y ONEST (TEXTO), AUTOALOJADAS
   ================================================================ */
@font-face {
	font-family: "Bitter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/bitter-latin-var.woff2") format("woff2");
}
@font-face {
	font-family: "Bitter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/bitter-latin-var.woff2") format("woff2");
}
@font-face {
	font-family: "Bitter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/bitter-latin-var.woff2") format("woff2");
}
@font-face {
	font-family: "Bitter";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/bitter-latin-var.woff2") format("woff2");
}
@font-face {
	font-family: "Onest";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/onest-latin-var.woff2") format("woff2");
}
@font-face {
	font-family: "Onest";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/onest-latin-var.woff2") format("woff2");
}
@font-face {
	font-family: "Onest";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/onest-latin-var.woff2") format("woff2");
}
@font-face {
	font-family: "Onest";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/onest-latin-var.woff2") format("woff2");
}

/* ================================================================
   VARIABLES GLOBALES
   ================================================================ */
:root {
	--bg-base: #0A0C08;
	--bg-panel: #14170F;
	--lime: #C8F231;
	--teal: #37E6C4;
	--grad: linear-gradient(90deg, #C8F231, #37E6C4);
	--text: #E9EDE4;
	--text-muted: #9AA398;
	--grid-line: #2A2F24;
	--accent-soft: #4B5A3E;
	--font-head: "Bitter", Georgia, "Times New Roman", serif;
	--font-body: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	--container-w: 1240px;
	--gap-xs: 8px;
	--gap-s: 16px;
	--gap-m: 28px;
	--gap-l: 48px;
	--gap-xl: 88px;
	--header-h: 76px;
	--z-header: 50;
}

/* ================================================================
   BASE
   ================================================================ */
body {
	background-color: var(--bg-base);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.16;
	color: var(--text);
}

h1 {
	font-size: clamp(34px, 6vw, 64px);
}

h2 {
	font-size: clamp(26px, 4.4vw, 42px);
}

h3 {
	font-size: clamp(20px, 2.8vw, 27px);
}

p {
	color: var(--text-muted);
}

strong {
	color: var(--text);
}

/* ================================================================
   LAYOUT / UTILIDADES
   ================================================================ */
.container {
	max-width: var(--container-w);
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.to-content {
	position: absolute;
	top: -100px;
	left: 20px;
	z-index: 999;
	padding: 12px 20px;
	background-color: var(--lime);
	color: #0A0C08;
	font-family: var(--font-mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: top 0.15s ease;
}

.to-content:focus {
	top: 12px;
}

:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 3px;
}

section {
	padding-top: var(--gap-xl);
	padding-bottom: var(--gap-xl);
	position: relative;
}

.section--tight {
	padding-top: var(--gap-l);
	padding-bottom: var(--gap-l);
}

.section--panel {
	background-color: var(--bg-panel);
	border-top: 1px solid var(--grid-line);
	border-bottom: 1px solid var(--grid-line);
}

.section__head {
	max-width: 720px;
	margin-bottom: var(--gap-l);
}

.section__eyebrow {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lime);
	margin-bottom: var(--gap-xs);
}

.section__eyebrow::before {
	content: "// ";
	color: var(--text-muted);
}

/* ================================================================
   RUIDO DE GRANO SOBRE SECCIONES OSCURAS (decor_flavor: grain-noise)
   ================================================================ */
.noise {
	position: relative;
}

.noise::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.05;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ================================================================
   BOTONES
   ================================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 26px;
	border: 1px solid transparent;
	border-radius: 2px;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	min-height: 48px;
	transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.btn--primary {
	background-image: var(--grad);
	color: #0A0C08;
}

.btn--primary:hover {
	transform: translate(-2px, -2px);
}

.btn--ghost {
	background-color: transparent;
	border-color: var(--grid-line);
	color: var(--text);
}

.btn--ghost:hover {
	border-color: var(--lime);
	color: var(--lime);
	transform: translate(-2px, -2px);
}

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

/* ================================================================
   HERO (front) - COLLAGE-LAYERS
   ================================================================ */
.front {
	padding-top: calc(var(--header-h) + var(--gap-l));
	padding-bottom: var(--gap-xl);
	overflow: hidden;
}

.front__grid {
	display: grid;
	gap: var(--gap-l);
	grid-template-columns: 1fr;
}

.front__eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lime);
	margin-bottom: var(--gap-s);
	display: block;
}

.front__title {
	margin-bottom: var(--gap-s);
}

.front__lede {
	max-width: 46ch;
	font-size: 18px;
	margin-bottom: var(--gap-m);
}

.front__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-s);
	margin-bottom: var(--gap-m);
}

.front__meta {
	display: flex;
	gap: var(--gap-m);
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-muted);
	flex-wrap: wrap;
}

.front__meta strong {
	color: var(--lime);
}

.front__collage {
	position: relative;
	min-height: 320px;
}

.front__img {
	border: 1px solid var(--grid-line);
	background-color: var(--bg-panel);
}

.front__img--main {
	width: 100%;
	height: auto;
	position: relative;
	z-index: 1;
}

.front__img--frame-a,
.front__img--frame-b {
	position: absolute;
	width: 42%;
	height: auto;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
	transition: transform 0.4s ease;
}

.front__img--frame-a {
	right: -4%;
	bottom: -8%;
	z-index: 2;
	border-color: var(--lime);
}

.front__img--frame-b {
	left: -6%;
	top: 8%;
	z-index: 0;
	width: 34%;
	opacity: 0.9;
}

/* ================================================================
   COUNTER-LEDGER (specs como stats)
   ================================================================ */
.counter-ledger {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background-color: var(--grid-line);
	border: 1px solid var(--grid-line);
}

.counter-ledger__item {
	background-color: var(--bg-base);
	padding: var(--gap-m) var(--gap-s);
	text-align: center;
}

.counter-ledger__value {
	font-family: var(--font-mono);
	font-size: clamp(30px, 4.6vw, 46px);
	font-weight: 500;
	color: var(--lime);
	display: block;
}

.counter-ledger__value sup {
	font-size: 0.42em;
	color: var(--teal);
}

.counter-ledger__label {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	display: block;
	margin-top: 6px;
}

/* ================================================================
   GRID BRUTAL (servicios / caracteristicas)
   ================================================================ */
.grid-brutal {
	display: grid;
	gap: 1px;
	background-color: var(--grid-line);
	border: 1px solid var(--grid-line);
	grid-template-columns: 1fr;
}

.grid-brutal__cell {
	background-color: var(--bg-panel);
	padding: var(--gap-m);
	transition: background-color 0.15s ease;
}

.grid-brutal__cell:hover {
	background-color: #191D12;
}

.grid-brutal__index {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--lime);
	display: block;
	margin-bottom: var(--gap-xs);
}

.grid-brutal__cell h3 {
	margin-bottom: 10px;
}

.grid-brutal__cell p {
	font-size: 15px;
}

.grid-brutal__link {
	display: inline-block;
	margin-top: var(--gap-s);
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--lime);
	border-bottom: 1px solid var(--lime);
	padding-bottom: 2px;
}

/* ================================================================
   RAIL HORIZONTAL (salas del club) - scrollbar-width obligatorio
   ================================================================ */
.rail {
	position: relative;
}

.rail__track {
	display: flex;
	gap: var(--gap-s);
	overflow-x: auto;
	padding-bottom: var(--gap-s);
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: #C8F231 transparent;
}

.rail__item {
	flex: 0 0 auto;
	width: min(78vw, 380px);
	scroll-snap-align: start;
	border: 1px solid var(--grid-line);
	background-color: var(--bg-panel);
}

.rail__img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	border-bottom: 1px solid var(--grid-line);
}

.rail__caption {
	padding: var(--gap-s);
}

.rail__caption h3 {
	margin-bottom: 6px;
}

.rail__caption p {
	font-size: 14px;
	margin-bottom: 0;
}

/* ================================================================
   TARIFAS - STEPPED GRID
   ================================================================ */
.tariffs__grid {
	display: grid;
	gap: var(--gap-m);
	grid-template-columns: 1fr;
}

.tariffs__card {
	border: 1px solid var(--grid-line);
	background-color: var(--bg-panel);
	padding: var(--gap-m);
	display: flex;
	flex-direction: column;
}

.tariffs__card--featured {
	border-color: var(--lime);
}

.tariffs__tier {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.tariffs__price {
	font-family: var(--font-head);
	font-size: clamp(30px, 3.4vw, 40px);
	font-weight: 800;
	color: var(--text);
	margin: 10px 0 4px;
}

.tariffs__price span {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 400;
	color: var(--text-muted);
}

.tariffs__list {
	margin: var(--gap-s) 0 var(--gap-m);
	flex-grow: 1;
}

.tariffs__list li {
	font-size: 14px;
	color: var(--text-muted);
	padding-left: 20px;
	position: relative;
	margin-bottom: 8px;
}

.tariffs__list li::before {
	content: "+";
	position: absolute;
	left: 0;
	color: var(--lime);
	font-family: var(--font-mono);
}

.tariffs__list li:last-child {
	margin-bottom: 0;
}

/* ================================================================
   EQUIPO (nosotros)
   ================================================================ */
.team__grid {
	display: grid;
	gap: var(--gap-m);
	grid-template-columns: 1fr;
}

.team__card {
	border: 1px solid var(--grid-line);
	background-color: var(--bg-panel);
}

.team__photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-bottom: 1px solid var(--grid-line);
}

.team__body {
	padding: var(--gap-s) var(--gap-m) var(--gap-m);
}

.team__name {
	margin-bottom: 2px;
}

.team__role {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lime);
}

.team__bio {
	margin-top: var(--gap-s);
	font-size: 14px;
}

/* ================================================================
   CONTENIDO LEGAL / PAGINAS INTERNAS
   ================================================================ */
.legal {
	max-width: 760px;
}

.legal h2 {
	margin-top: var(--gap-l);
	margin-bottom: var(--gap-s);
}

.legal h2:first-child {
	margin-top: 0;
}

.legal p,
.legal li {
	margin-bottom: 12px;
	font-size: 15px;
}

.legal ul {
	padding-left: 20px;
}

.legal li {
	list-style: disc;
}

.legal table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--gap-s) 0 var(--gap-l);
	font-size: 14px;
}

.legal caption {
	text-align: left;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-muted);
	margin-bottom: 8px;
}

.legal th,
.legal td {
	border: 1px solid var(--grid-line);
	padding: 10px 12px;
	text-align: left;
}

.legal th {
	background-color: var(--bg-panel);
	font-family: var(--font-mono);
	font-weight: 500;
}

/* ================================================================
   PAGINA DE ERROR (404)
   ================================================================ */
.error-panel {
	min-height: 70vh;
	display: flex;
	align-items: center;
}

.error-panel__code {
	font-family: var(--font-mono);
	font-size: clamp(60px, 14vw, 140px);
	color: var(--lime);
	line-height: 1;
}

.error-panel__lede {
	max-width: 46ch;
	margin: var(--gap-s) 0 var(--gap-m);
}

/* ================================================================
   GRACIAS (post-formulario)
   ================================================================ */
.thanks-panel {
	min-height: 60vh;
	display: flex;
	align-items: center;
}

.thanks-panel__mark {
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lime);
	display: block;
	margin-bottom: var(--gap-s);
}

.thanks-panel__steps {
	margin-top: var(--gap-m);
	display: grid;
	gap: var(--gap-s);
}

.thanks-panel__steps li {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-muted);
	border-left: 2px solid var(--lime);
	padding-left: 14px;
}

/* ================================================================
   REVEAL (in-view.js agrega/quita esta clase via IntersectionObserver)
   ================================================================ */
.will-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.will-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

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

	.front__img--frame-a,
	.front__img--frame-b {
		transition: none;
	}
}

/* ================================================================
   INTRO DE PAGINAS INTERNAS (servicios, pc-gaming, eventos, nosotros)
   ================================================================ */
.intro {
	padding-top: calc(var(--header-h) + var(--gap-l));
	padding-bottom: var(--gap-l);
}

.intro__grid {
	display: grid;
	gap: var(--gap-l);
	grid-template-columns: 1fr;
	align-items: center;
}

.intro__lede {
	max-width: 52ch;
	font-size: 17px;
}

.intro__media {
	border: 1px solid var(--grid-line);
}

.intro__media img {
	width: 100%;
	height: auto;
}

.intro__breadcrumb {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-muted);
	margin-bottom: var(--gap-s);
	display: block;
}

.intro__breadcrumb a {
	color: var(--lime);
}

/* ================================================================
   BARRAS DE ESPECIFICACIONES (pc-gaming.html)
   ================================================================ */
.stat-bar {
	margin-bottom: var(--gap-s);
}

.stat-bar__top {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-mono);
	font-size: 13px;
	margin-bottom: 6px;
}

.stat-bar__top span:first-child {
	color: var(--text);
}

.stat-bar__top span:last-child {
	color: var(--lime);
}

.stat-bar__track {
	height: 6px;
	background-color: var(--grid-line);
	position: relative;
}

.stat-bar__fill {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background-image: var(--grad);
}

/* ================================================================
   PAQUETES DE EVENTOS (eventos.html)
   ================================================================ */
.package-grid {
	display: grid;
	gap: var(--gap-m);
	grid-template-columns: 1fr;
}

.package-card {
	border: 1px solid var(--grid-line);
	background-color: var(--bg-panel);
	padding: var(--gap-m);
}

.package-card__cap {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.package-card h3 {
	margin: 8px 0 10px;
}

.package-card ul {
	margin-top: var(--gap-s);
}

.package-card li {
	font-size: 14px;
	color: var(--text-muted);
	padding-left: 18px;
	position: relative;
	margin-bottom: 8px;
}

.package-card li::before {
	content: "-";
	position: absolute;
	left: 0;
	color: var(--teal);
}

/* ================================================================
   CONTACTO
   ================================================================ */
.contact-grid {
	display: grid;
	gap: var(--gap-l);
	grid-template-columns: 1fr;
}

.info-block {
	border: 1px solid var(--grid-line);
	background-color: var(--bg-panel);
	padding: var(--gap-m);
	margin-bottom: var(--gap-s);
}

.info-block__label {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lime);
	display: block;
	margin-bottom: 8px;
}

.info-block p {
	margin-bottom: 4px;
	font-size: 14px;
}

.info-block a {
	color: var(--text);
}

.info-block a:hover {
	color: var(--lime);
}

.map-frame {
	border: 1px solid var(--grid-line);
	height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bg-panel);
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-muted);
	text-align: center;
	padding: var(--gap-s);
}

/* ================================================================
   BREAKPOINTS - MOBILE FIRST
   ================================================================ */
@media (min-width: 640px) {
	.counter-ledger {
		grid-template-columns: repeat(4, 1fr);
	}

	.team__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 780px) {
	.front__grid {
		grid-template-columns: 1.05fr 0.95fr;
		align-items: center;
	}

	.grid-brutal {
		grid-template-columns: repeat(2, 1fr);
	}

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

	.tariffs__card--featured {
		transform: translateY(-18px);
		padding-bottom: calc(var(--gap-m) + 18px);
	}

	.intro__grid {
		grid-template-columns: 1.1fr 0.9fr;
	}

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

	.contact-grid {
		grid-template-columns: 0.9fr 1.1fr;
		align-items: start;
	}
}

@media (min-width: 1040px) {
	.container {
		padding-left: 32px;
		padding-right: 32px;
	}

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