/* ==========================================================================
   HKN Energy — Home page sections
   ========================================================================== */

/* Hero
   ---------------------------------------------------------------------- */
.hkn-hero {
	position: relative;
	min-height: 86vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.hkn-hero__media {
	position: absolute; inset: 0; z-index: 0;
	background-size: cover;
	background-position: right center;
}
.hkn-hero__scrim {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(90deg, rgba(6,10,18,0.94) 0%, rgba(6,10,18,0.72) 32%, rgba(6,10,18,0.18) 62%, rgba(6,10,18,0.1) 100%),
		linear-gradient(0deg, rgba(6,10,18,0.55) 0%, rgba(6,10,18,0) 40%);
}
.hkn-hero__content { position: relative; z-index: 2; width: 100%; padding-block: var(--space-9) var(--space-8); color: #fff; }
.hkn-hero__grid { display: grid; grid-template-columns: 1.3fr 0.85fr; gap: var(--space-8); align-items: start; }
.hkn-hero__heading {
	color: #fff;
	font-size: var(--fs-display);
	line-height: var(--lh-tight);
	font-weight: 700;
	max-width: 16ch;
	margin-block: var(--space-4) var(--space-5);
}
.hkn-hero__lead { max-width: 44ch; font-size: var(--fs-body-lg); color: rgba(255,255,255,0.82); margin-bottom: var(--space-6); }
.hkn-hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.hkn-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-7);
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: var(--border-hair-dark);
}
.hkn-hero__trust li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); font-weight: 600; color: rgba(255,255,255,0.85); }
.hkn-hero__trust .hkn-icon { color: var(--hkn-blue-bright); }

.hkn-quote-card {
	background: #fff;
	color: var(--hkn-text);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-card);
	padding: var(--space-6);
	margin-top: var(--space-2);
}
.hkn-quote-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.hkn-quote-card__title { font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; }
.hkn-quote-card__fields { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-block: var(--space-5); }
.hkn-quote-card__field { display: flex; flex-direction: column; gap: 7px; }
.hkn-quote-card__field label {
	font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hkn-gray-600);
}
.hkn-quote-card__input {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--hkn-off-white);
	border: 1px solid var(--hkn-gray-100);
	border-radius: var(--radius-md);
	padding: 0.8em 0.9em;
}
.hkn-quote-card__input .hkn-icon { color: var(--hkn-gray-600); flex-shrink: 0; }
.hkn-quote-card__input input,
.hkn-quote-card__input select {
	background: none;
	border: 0;
	width: 100%;
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--hkn-text);
}
.hkn-quote-card .hkn-btn { width: 100%; }
.hkn-quote-card__helper { font-size: var(--fs-metadata); color: var(--hkn-gray-600); text-align: center; margin-top: var(--space-4); }

@media (max-width: 1180px) {
	.hkn-hero__grid { grid-template-columns: 1fr; }
	.hkn-quote-card { max-width: 420px; }
}

/* Section generic spacing
   ---------------------------------------------------------------------- */
.hkn-section { padding-block: var(--space-9); }

/* Three ways to work with HKN
   ---------------------------------------------------------------------- */
.hkn-ways { background: var(--hkn-navy); }
.hkn-ways .hkn-section-head h2 { color: var(--hkn-text-on-dark); }
.hkn-ways .hkn-eyebrow { color: var(--hkn-blue-bright); }
.hkn-ways .hkn-section-head__note { color: var(--hkn-text-muted-on-dark); }

.hkn-ways__grid {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	grid-template-rows: 1fr 1fr;
	gap: var(--space-5);
	min-height: 620px;
}

.hkn-way {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(255,255,255,0.12);
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--space-6);
	isolation: isolate;
}
.hkn-way__scrim {
	position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(180deg, rgba(6,10,18,0.15) 0%, rgba(6,10,18,0.55) 60%, rgba(6,10,18,0.92) 100%);
}
.hkn-way__index {
	position: relative;
	z-index: 1;
	font-family: var(--font-heading);
	font-size: 4rem;
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255,255,255,0.55);
	align-self: flex-start;
}
.hkn-way__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.hkn-way__eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #c7d4ff; text-shadow: 0 1px 6px rgba(6, 10, 18, 0.7); }
.hkn-way__title { font-family: var(--font-heading); font-size: 1.4rem; color: #fff; }
.hkn-way p { font-size: var(--fs-small); color: rgba(255,255,255,0.78); max-width: 42ch; }
.hkn-way .hkn-link-arrow { margin-top: var(--space-2); color: #fff; }

.hkn-way:nth-child(1) { grid-column: 1; grid-row: 1; }
.hkn-way--highlight { grid-column: 2; grid-row: 1 / span 2; padding: var(--space-7); }
.hkn-way--highlight .hkn-way__index { font-size: 5.5rem; }
.hkn-way--highlight .hkn-way__title { font-size: 1.75rem; }
.hkn-way--accent { grid-column: 1; grid-row: 2; }

.hkn-way__corner { position: absolute; z-index: 1; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,0.55); }
.hkn-way__corner--tl { top: var(--space-5); left: var(--space-5); border-right: 0; border-bottom: 0; }
.hkn-way__corner--tr { top: var(--space-5); right: var(--space-5); border-left: 0; border-bottom: 0; }

@media (max-width: 900px) {
	.hkn-ways__grid { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
	.hkn-way, .hkn-way--highlight, .hkn-way--accent { grid-column: 1; grid-row: auto; min-height: 380px; }
}

/* Product categories
   ---------------------------------------------------------------------- */
.hkn-categories { background: #fff; }
.hkn-categories__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(2, minmax(200px, 1fr));
	gap: var(--space-4);
}
.hkn-category {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--radius-lg);
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	padding: var(--space-5);
	color: #fff;
}
.hkn-category__scrim {
	position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(195deg, rgba(11,18,32,0.15) 0%, rgba(11,18,32,0.78) 100%);
	transition: background 0.25s var(--ease);
}
.hkn-category:hover .hkn-category__scrim { background: linear-gradient(195deg, rgba(11,18,32,0.35) 0%, rgba(11,18,32,0.88) 100%); }
.hkn-category__icon {
	position: relative; z-index: 1;
	display: inline-flex;
	width: 42px; height: 42px;
	align-items: center; justify-content: center;
	border-radius: var(--radius-md);
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.25);
	backdrop-filter: blur(6px);
}
.hkn-category__body { position: relative; z-index: 1; margin-top: auto; }
.hkn-category h3 { font-family: var(--font-heading); font-size: 1.15rem; color: #fff; }
.hkn-category p { font-size: var(--fs-metadata); color: rgba(255,255,255,0.75); margin-top: 4px; }
.hkn-category__arrow {
	position: absolute; z-index: 1; top: var(--space-5); right: var(--space-5);
	width: 16px; height: 16px;
	opacity: 0;
	transform: translate(-4px, 4px);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
	color: #fff;
}
.hkn-category:hover .hkn-category__arrow { opacity: 1; transform: translate(0, 0); }

.hkn-category:nth-child(1) { grid-column: 1 / 7; grid-row: 1 / 3; }
.hkn-category:nth-child(1) h3 { font-size: 1.6rem; }
.hkn-category:nth-child(2) { grid-column: 7 / 10; grid-row: 1 / 2; }
.hkn-category:nth-child(3) { grid-column: 10 / 13; grid-row: 1 / 2; }
.hkn-category:nth-child(4) { grid-column: 7 / 10; grid-row: 2 / 3; }
.hkn-category:nth-child(5) { grid-column: 10 / 13; grid-row: 2 / 3; }

@media (max-width: 900px) {
	.hkn-categories__grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
	.hkn-category, .hkn-category:nth-child(1), .hkn-category:nth-child(2), .hkn-category:nth-child(3), .hkn-category:nth-child(4), .hkn-category:nth-child(5) {
		grid-column: span 1; grid-row: auto; min-height: 220px;
	}
	.hkn-category:nth-child(1) { grid-column: span 2; min-height: 280px; }
}

/* Featured products
   ---------------------------------------------------------------------- */
.hkn-products { background: var(--hkn-off-white); }
.hkn-products__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}

.hkn-product-card {
	background: #fff;
	border: var(--border-hair);
	border-radius: var(--radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.hkn-product-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(155deg, #eeece5, #e2ded3);
}
.hkn-product-card__glyph { color: var(--hkn-navy); opacity: 0.16; }
.hkn-product-card__corner { position: absolute; width: 16px; height: 16px; border: 1.5px solid var(--hkn-gray-300); }
.hkn-product-card__corner--tl { top: var(--space-4); left: var(--space-4); border-right: 0; border-bottom: 0; }
.hkn-product-card__corner--br { bottom: var(--space-4); right: var(--space-4); border-left: 0; border-top: 0; }
.hkn-product-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: 5px; flex: 1; }
.hkn-product-card__cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hkn-blue); font-weight: 600; }
.hkn-product-card__name { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; min-height: 2.5em; }
.hkn-product-card__meta { font-size: var(--fs-metadata); color: var(--hkn-gray-600); }
.hkn-product-card__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); }
.hkn-product-card__price { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-price); }

/* .hkn-card-cta (shared base in woocommerce.css) sits inline beside the
   price here instead of full-width below it, so it needs its own sizing. */
.hkn-product-card__footer .hkn-card-cta {
	display: inline-flex; align-items: center; justify-content: center;
	width: auto; white-space: nowrap;
	font-size: var(--fs-metadata); padding: 0.65em 1.2em;
}

@media (max-width: 960px) { .hkn-products__grid { grid-template-columns: repeat(2, 1fr); } }

/* Cotiza tu proyecto — dark technical flow
   ---------------------------------------------------------------------- */
.hkn-quote-flow {
	position: relative;
	background: var(--hkn-navy);
	color: #fff;
	overflow: hidden;
}
.hkn-quote-flow > .hkn-container { position: relative; z-index: 2; }

.hkn-quote-flow__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-6);
	flex-wrap: wrap;
	margin-bottom: var(--space-8);
}
.hkn-quote-flow__head h2 { color: #fff; max-width: 22ch; }

.hkn-quote-flow__body {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: var(--space-9);
}

.hkn-quote-flow__photo {
	position: relative;
	border-radius: var(--radius-lg);
	background-size: cover;
	background-position: center;
	min-height: 460px;
	border: 1px solid rgba(255,255,255,0.14);
	overflow: hidden;
}
.hkn-quote-flow__ghost {
	position: absolute;
	bottom: var(--space-4);
	right: var(--space-5);
	z-index: 2;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 5.5rem;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255,255,255,0.9);
	filter: drop-shadow(0 2px 12px rgba(0,0,0,0.5));
}
.hkn-way__corner--br-alt { bottom: var(--space-5); right: var(--space-5); border-left: 0; border-top: 0; border-color: rgba(255,255,255,0.55); }

.hkn-quote-flow__steps {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
	padding-left: var(--space-7);
	border-left: 1px solid rgba(255,255,255,0.16);
}
.hkn-quote-step { position: relative; }
.hkn-quote-step__num {
	position: absolute;
	top: 2px;
	left: calc(var(--space-7) * -1 - 15px);
	width: 30px; height: 30px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.4);
	background: var(--hkn-navy);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-metadata);
}
.hkn-quote-step--last .hkn-quote-step__num { border-color: var(--hkn-green); color: var(--hkn-green); }
.hkn-quote-step h3 { font-size: 1.15rem; margin-bottom: 6px; color: #fff; }
.hkn-quote-step p { font-size: var(--fs-small); color: var(--hkn-text-muted-on-dark); max-width: 48ch; }

@media (max-width: 900px) {
	.hkn-quote-flow__body { grid-template-columns: 1fr; }
	.hkn-quote-flow__photo { min-height: 260px; }
}

.hkn-quote-flow__footer {
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: var(--border-hair-dark);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	flex-wrap: wrap;
}
.hkn-status-strip--dark li { color: var(--hkn-text-muted-on-dark); }
.hkn-status-strip--dark li.is-active { color: #fff; }
.hkn-status-strip--dark li.is-active .dot { background: var(--hkn-green); }

@media (max-width: 900px) {
	.hkn-quote-flow__steps { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-7); }
	.hkn-quote-flow__steps::before { display: none; }
}

/* Installers & Partners
   ---------------------------------------------------------------------- */
.hkn-partners { background: var(--hkn-green-dark); color: #fff; }
.hkn-partners__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); align-items: start; }
.hkn-partners h2 { color: #fff; max-width: 16ch; }
.hkn-partners__lead { max-width: 46ch; color: rgba(255,255,255,0.75); margin-block: var(--space-4) var(--space-6); }
.hkn-partners__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.hkn-partners__features { display: flex; gap: var(--space-6); margin-top: var(--space-8); flex-wrap: wrap; }
.hkn-partner-feature { display: flex; gap: var(--space-3); max-width: 260px; }
.hkn-partner-feature .hkn-icon { color: var(--hkn-green); flex-shrink: 0; margin-top: 2px; }
.hkn-partner-feature h4 { font-size: 0.95rem; margin-bottom: 4px; }
.hkn-partner-feature p { font-size: var(--fs-metadata); color: rgba(255,255,255,0.62); }

.hkn-partners__visual { position: relative; min-height: 480px; }
.hkn-partners__photo {
	position: absolute; inset: 0;
	border-radius: var(--radius-lg);
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(255,255,255,0.16);
	overflow: hidden;
}
.hkn-partners__photo::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(200deg, rgba(14,31,22,0.1) 0%, rgba(14,31,22,0.75) 100%);
}

.hkn-preview-label {
	position: absolute;
	top: var(--space-5); left: var(--space-5);
	z-index: 2;
	font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
	color: rgba(255,255,255,0.75);
	background: rgba(6,10,18,0.4);
	padding: 0.4em 0.8em;
	border-radius: var(--radius-pill);
	backdrop-filter: blur(6px);
}
.hkn-preview-card {
	position: absolute;
	z-index: 2;
	width: min(260px, 72%);
	background: rgba(11,18,32,0.72);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: var(--shadow-card-sm);
}
.hkn-preview-card--float-a { top: var(--space-8); right: var(--space-5); }
.hkn-preview-card--float-b { bottom: var(--space-6); left: var(--space-6); }
.hkn-preview-card__row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.hkn-preview-card__title { font-size: 11px; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.06em; }
.hkn-preview-card__value { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; margin-top: 4px; color: #fff; }
.hkn-preview-card__badge {
	background: var(--hkn-green); color: var(--hkn-green-ink);
	font-weight: 700; font-size: var(--fs-small);
	padding: 0.25em 0.7em; border-radius: var(--radius-pill);
	white-space: nowrap;
}
.hkn-preview-card__meta { font-size: var(--fs-metadata); color: rgba(255,255,255,0.6); margin-top: var(--space-3); }
.hkn-preview-card .hkn-link-arrow { margin-top: var(--space-4); font-size: var(--fs-metadata); color: var(--hkn-green); }

@media (max-width: 960px) {
	.hkn-partners__grid { grid-template-columns: 1fr; }
	.hkn-partners__visual { min-height: 420px; margin-top: var(--space-6); }
}

/* Commerce info box — lives inside Partners instead of its own strip
   ---------------------------------------------------------------------- */
.hkn-utility-box {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
	margin-top: var(--space-8);
	padding: var(--space-6);
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: var(--radius-lg);
}
.hkn-utility-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.hkn-utility-item .hkn-icon { color: var(--hkn-green); flex-shrink: 0; margin-top: 2px; }
.hkn-utility-item h4 { font-size: 0.95rem; margin-bottom: 4px; color: #fff; }
.hkn-utility-item p { font-size: var(--fs-metadata); color: rgba(255,255,255,0.65); }

@media (max-width: 900px) {
	.hkn-utility-box { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.hkn-utility-box { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.hkn-hero__heading { max-width: none; }
	.hkn-section-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}