/* ==========================================================================
   Nosotros (page-nosotros.php) — reuses .hkn-hero/.hkn-grain/.hkn-way/
   .hkn-btn/.hkn-eyebrow/.hkn-section-head from home.css/base.css; this
   file only adds the sections unique to this page.
   ========================================================================== */

/* Hero — shorter than the homepage's, single-column text (no quote widget). */
.hkn-about-hero { min-height: 64vh; align-items: center; }
.hkn-about-hero__text { max-width: 640px; }

/* Stats strip, pulled up to overlap the hero's bottom edge. */
.hkn-about-stats {
	position: relative;
	z-index: 3;
	margin-top: calc(-1 * var(--space-8));
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.hkn-about-stat {
	padding: var(--space-6) var(--space-5);
	text-align: center;
	border-left: var(--border-hair);
}
.hkn-about-stat:first-child { border-left: none; }
.hkn-about-stat__value {
	display: block;
	font-family: var(--font-heading);
	font-size: 2.1rem;
	font-weight: 800;
	color: var(--hkn-navy);
	line-height: 1;
	margin-bottom: var(--space-2);
}
.hkn-about-stat__label {
	display: block;
	font-size: var(--fs-metadata);
	color: var(--hkn-gray-600);
	max-width: 20ch;
	margin-inline: auto;
}

@media (max-width: 900px) {
	.hkn-about-stats { grid-template-columns: repeat(2, 1fr); }
	.hkn-about-stat:nth-child(2) { border-left: none; }
	.hkn-about-stat:nth-child(3), .hkn-about-stat:nth-child(4) { border-top: var(--border-hair); }
}

/* Quiénes somos — photo + copy, two columns. */
.hkn-about-intro { padding-top: var(--space-9); }
.hkn-about-intro__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: var(--space-8);
	align-items: center;
}
.hkn-about-intro__photo {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
	background-size: cover;
	background-position: center;
}
.hkn-about-intro__body p {
	color: var(--hkn-gray-600);
	margin-top: var(--space-4);
	max-width: 52ch;
}
.hkn-about-intro__body p:first-of-type { margin-top: var(--space-5); }

@media (max-width: 900px) {
	.hkn-about-intro__grid { grid-template-columns: 1fr; }
	.hkn-about-intro__photo { order: -1; aspect-ratio: 16 / 10; }
}

/* Misión / Visión — two bordered cards. */
.hkn-about-mv__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
}
.hkn-about-mv__card {
	background: #fff;
	border: var(--border-hair);
	border-top: 3px solid var(--hkn-blue);
	border-radius: var(--radius-lg);
	padding: var(--space-7);
}
.hkn-about-mv__card:nth-child(2) { border-top-color: var(--hkn-green); }
.hkn-about-mv__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--hkn-off-white);
	color: var(--hkn-navy);
	margin-bottom: var(--space-5);
}
.hkn-about-mv__card h3 { font-size: 1.3rem; margin-bottom: var(--space-3); }
.hkn-about-mv__card p { color: var(--hkn-gray-600); max-width: 48ch; }

@media (max-width: 700px) {
	.hkn-about-mv__grid { grid-template-columns: 1fr; }
}

/* Valores — centered section head + 4-up icon cards. */
.hkn-section-head--center { justify-content: center; text-align: center; }
.hkn-section-head--center h2 { max-width: 48ch; margin-inline: auto; }

.hkn-about-values__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}
.hkn-value-card {
	background: #fff;
	border: var(--border-hair);
	border-radius: var(--radius-lg);
	padding: var(--space-6) var(--space-5);
	text-align: center;
}
.hkn-value-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: var(--hkn-navy);
	color: var(--hkn-green);
	margin-bottom: var(--space-4);
}
.hkn-value-card h3 { font-size: 1.05rem; margin-bottom: var(--space-2); }
.hkn-value-card p { font-size: var(--fs-small); color: var(--hkn-gray-600); }

@media (max-width: 900px) {
	.hkn-about-values__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.hkn-about-values__grid { grid-template-columns: 1fr; }
}

/* Trayectoria — dark, horizontal timeline with a connecting line + dots. */
.hkn-about-timeline { background: var(--hkn-navy); color: #fff; }
.hkn-about-timeline .hkn-section-head h2 { color: #fff; max-width: 32ch; }

.hkn-about-timeline__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
	margin-top: var(--space-6);
}
.hkn-about-timeline__grid::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.16);
}
.hkn-timeline-item { position: relative; padding-top: var(--space-6); }
.hkn-timeline-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--hkn-navy);
	border: 2px solid rgba(255, 255, 255, 0.4);
}
.hkn-timeline-item--now::before { border-color: var(--hkn-green); background: var(--hkn-green); }
.hkn-timeline-item__year {
	display: block;
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--hkn-blue-bright);
	margin-bottom: var(--space-2);
}
.hkn-timeline-item--now .hkn-timeline-item__year { color: var(--hkn-green); }
.hkn-timeline-item h3 { font-size: 1.05rem; color: #fff; margin-bottom: 6px; }
.hkn-timeline-item p { font-size: var(--fs-small); color: var(--hkn-text-muted-on-dark); }

@media (max-width: 900px) {
	.hkn-about-timeline__grid { grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-6); }
	.hkn-about-timeline__grid::before { display: none; }
}
@media (max-width: 560px) {
	.hkn-about-timeline__grid { grid-template-columns: 1fr; }
}

/* CTA final — centered box on an off-white surface. */
.hkn-about-cta__box {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
}
.hkn-about-cta__box h2 { margin-bottom: var(--space-4); }
.hkn-about-cta__box p { color: var(--hkn-gray-600); font-size: var(--fs-body-lg); margin-bottom: var(--space-6); }
.hkn-about-cta__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-4);
}