/* ==========================================================================
   HKN Energy — base / reset / typography
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--hkn-off-white);
	color: var(--hkn-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
}

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

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

ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	line-height: var(--lh-heading);
	font-weight: 700;
	letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.05rem; }

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

button { cursor: pointer; }

:focus-visible {
	outline: 2px solid var(--hkn-blue);
	outline-offset: 2px;
}

.hkn-container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

.hkn-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hkn-blue);
}

.hkn-eyebrow--on-dark { color: var(--hkn-green); }
.hkn-eyebrow--on-dark-blue { color: var(--hkn-blue-bright); }
.hkn-eyebrow--muted { color: var(--hkn-gray-600); }

.hkn-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-5);
	margin-bottom: var(--space-7);
}

.hkn-section-head h2 { max-width: 40ch; }
.hkn-section-head__note { max-width: 34ch; color: var(--hkn-gray-600); font-size: var(--fs-small); }

.hkn-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 600;
	font-size: var(--fs-small);
	white-space: nowrap;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.hkn-link-arrow .hkn-icon { transition: transform 0.2s var(--ease); width: 15px; height: 15px; }
.hkn-link-arrow:hover .hkn-icon { transform: translateX(3px); }

/* Buttons */
.hkn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-small);
	letter-spacing: 0.01em;
	padding: 0.9em 1.6em;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	outline: none;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
	white-space: nowrap;
}

.hkn-btn--primary {
	background: var(--hkn-green);
	color: var(--hkn-green-ink);
}
.hkn-btn--primary:hover { background: #b8f052; }

.hkn-btn--outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--hkn-white);
}
.hkn-btn--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

.hkn-btn--outline-dark {
	background: transparent;
	border-color: rgba(18, 20, 26, 0.3);
	color: var(--hkn-text);
}
.hkn-btn--outline-dark:hover { border-color: var(--hkn-text); }

.hkn-btn--dark {
	background: var(--hkn-navy);
	color: #fff;
}
.hkn-btn--dark:hover { background: #000; }

.hkn-btn--blue {
	background: var(--hkn-blue);
	color: #fff;
}
.hkn-btn--blue:hover { background: #1f47dd; }

.hkn-btn--dark-ghost {
	background: rgba(6, 10, 18, 0.55);
	border-color: rgba(255, 255, 255, 0.22);
	color: #fff;
}
.hkn-btn--dark-ghost:hover { background: rgba(6, 10, 18, 0.8); border-color: rgba(255, 255, 255, 0.4); }

.hkn-btn--sm { padding: 0.65em 1.2em; font-size: var(--fs-metadata); }

.hkn-icon { display: block; }

.hkn-status-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
}

.hkn-status-strip li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-metadata);
	color: var(--hkn-gray-600);
}

.hkn-status-strip .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
}

.hkn-status-strip li.is-active { color: var(--hkn-text); font-weight: 600; }
.hkn-status-strip li.is-active .dot { background: var(--hkn-blue); opacity: 1; }

/* Fine film-grain texture for dark/photographic surfaces, à la Aerion's
   cinematic treatment. Applied as an overlay, never on its own element. */
.hkn-grain {
	position: relative;
	isolation: isolate;
}
.hkn-grain::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.5;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	background-size: 180px 180px;
}

.hkn-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0.35em 0.9em;
	border-radius: var(--radius-pill);
	font-size: var(--fs-metadata);
	font-weight: 600;
	white-space: nowrap;
}
.hkn-pill--blue { background: rgba(47, 93, 250, 0.1); color: var(--hkn-blue); }
.hkn-pill--blue-on-dark { background: rgba(108, 143, 255, 0.16); color: var(--hkn-blue-bright); }

.hkn-page__title { margin-bottom: var(--space-6); }

/* First-time introduction + "¿Cómo funciona?" (inc/onboarding.php). */
.hkn-onboarding { margin-bottom: var(--space-6); }
.hkn-onboarding__panel {
	background: var(--hkn-white);
	border: var(--border-hair);
	border-left: 3px solid var(--hkn-blue);
	border-radius: var(--radius-sm);
	padding: var(--space-5);
	margin-bottom: var(--space-3);
}
.hkn-onboarding__panel[hidden] { display: none; }
.hkn-onboarding__head {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.hkn-onboarding__title { font-size: 1.1rem; }
.hkn-onboarding__close {
	font: inherit; font-size: var(--fs-small); font-weight: 600;
	background: var(--hkn-navy); color: #fff; border: 0; border-radius: var(--radius-sm);
	padding: 0.55em 1em; min-height: 44px; cursor: pointer;
}
.hkn-onboarding__intro { color: var(--hkn-gray-600); font-size: var(--fs-small); margin: var(--space-3) 0 0; max-width: 64ch; }
.hkn-onboarding__steps {
	list-style: none; padding: 0; margin: var(--space-4) 0 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4);
}
.hkn-onboarding__step { display: flex; gap: var(--space-3); font-size: var(--fs-small); }
.hkn-onboarding__num {
	font-family: var(--font-heading); font-weight: 800; color: var(--hkn-blue);
	flex-shrink: 0; line-height: 1.2;
}
.hkn-onboarding__body { display: block; color: var(--hkn-gray-600); margin-top: 2px; }
.hkn-onboarding__reopen {
	display: inline-flex; align-items: center; gap: var(--space-2);
	font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--hkn-blue);
	background: none; border: 0; padding: 0.5em 0; min-height: 44px; cursor: pointer;
}
.hkn-onboarding__reopen:focus-visible { outline: 2px solid var(--hkn-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hkn-onboarding * { transition: none !important; } }
.hkn-page__content { color: var(--hkn-text); }
.hkn-page__content p { margin-bottom: var(--space-4); }
.hkn-woo.hkn-page { background: #fff; }

/* Plain content pages (no WooCommerce shortcode) read better constrained. */
body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .hkn-page__content {
	max-width: 72ch;
}

.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;
}