/* ==========================================================================
   Base: tokens, reset, tipografía, botones, formularios, velas
   Paleta sacada del logo: negro, lima, verde vela, naranja BTC, verde Tether.
   ========================================================================== */

:root {
	color-scheme: dark;

	--negro: #000000;
	--lima: #c9fc04;
	--vela: #78d702;
	--btc: #fb9802;
	--tether: #26a17b;
	--rojo: #fc0304;
	--hueso: #f7f7f1;

	--bg: #000000;
	--surface: #0d1407;
	--surface-2: #16200c;
	--text: #f7f7f1;
	--muted: #a9af99;
	--line: #28321a;
	--field: #7b8860;
	--link: #c9fc04;
	--mark: #c9fc04;
	--focus: #c9fc04;

	--r-bajo: var(--tether);
	--r-medio: var(--btc);
	--r-alto: #ff5a1f;
	--r-muy-alto: var(--rojo);

	--f-display: "Arial Black", "Avenir Next Condensed Heavy", "Helvetica Neue", Arial, sans-serif;
	--f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

[data-theme="light"] {
	color-scheme: light;
	--bg: #f7f7f1;
	--surface: #ffffff;
	--surface-2: #eceedd;
	--text: #0b0e05;
	--muted: #525a41;
	--line: #d3d8bf;
	--field: #7a8466;
	--link: #3a6200;
	--mark: #7fae00;
	--focus: #0b0e05;
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--f-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 900;
	font-style: italic;
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 5.2vw + 0.6rem, 4.6rem); }
h2 { font-size: clamp(1.7rem, 2.6vw + 0.8rem, 2.6rem); }
h3 { font-size: 1.3rem; line-height: 1.1; }

p { margin: 0; }
a { color: var(--link); text-underline-offset: 0.2em; }

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

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: 1rem; top: -4rem;
	z-index: 100;
	padding: 0.7rem 1rem;
	background: var(--lima);
	color: #000;
	font-weight: 700;
}
.skip-link:focus { top: 1rem; }

/* Botones: paralelogramo inclinado, como el trazo del logo */
.btn {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.6rem;
	border: 0;
	background: none;
	color: #000;
	font: 800 1rem/1.1 var(--f-body);
	text-decoration: none;
	cursor: pointer;
}
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--lima);
	transform: skewX(-10deg);
	transition: transform 0.15s ease;
}
.btn:hover::before { transform: skewX(-10deg) translateY(-2px); }
.btn--ghost { color: var(--text); }
.btn--ghost::before { background: transparent; box-shadow: inset 0 0 0 2px var(--mark); }
.btn--small { padding: 0.6rem 1.1rem; font-size: 0.9rem; }

/* Formularios */
.field { display: grid; gap: 0.35rem; }
.field label { font-weight: 700; font-size: 0.95rem; }
input[type="email"], input[type="text"], input[type="url"], input[type="search"], textarea, select {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 2px solid var(--field);
	border-radius: 2px;
	background: var(--surface);
	color: var(--text);
	font: inherit;
}
input::placeholder { color: var(--muted); opacity: 1; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; border-color: var(--focus); }

.check { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.92rem; color: var(--muted); line-height: 1.5; }
.check input {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	width: 1.2rem; height: 1.2rem;
	margin: 0.15rem 0 0;
	border: 2px solid var(--field);
	border-radius: 2px;
	background: var(--surface);
	cursor: pointer;
}
.check input:checked {
	border-color: var(--lima);
	background: var(--lima) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}

/* Velas decorativas (las genera assets/js/candles.js) */
.candles {
	position: absolute;
	inset: auto 0 0 0;
	z-index: -1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(0.2rem, 0.7vw, 0.55rem);
	padding-inline: clamp(0.4rem, 2vw, 2rem);
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to top, #000 15%, transparent 100%);
	mask-image: linear-gradient(to top, #000 15%, transparent 100%);
}
.candles .c {
	--cc: var(--vela);
	position: relative;
	flex: 1 1 0;
	max-width: 1.4rem;
	height: var(--h);
	transform-origin: bottom;
	animation: sb-grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	animation-delay: calc(var(--i) * 55ms + 0.2s);
}
.candles .c::before {
	content: "";
	position: absolute;
	left: 50%; top: 0; bottom: 0;
	width: 2px; margin-left: -1px;
	background: var(--cc);
}
.candles .c::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	bottom: var(--bb);
	height: var(--bh);
	background: var(--cc);
}
.candles .c.dn { --cc: #2f5a05; }
.candles .c.last { --cc: var(--lima); }

@keyframes sb-grow {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
	.candles .c { animation: none; }
	.btn::before { transition: none; }
	html { scroll-behavior: auto; }
}