/* ==============================================================
   Polka · Quiénes Somos — assets/css/quienes-somos.css
   Estilos dedicados de la página /quienes-somos/.
   Usa variables CSS definidas en critical.css:
     --hlp-blue-dark #023C7F · --hlp-blue #449FDC · --hlp-white #fff
   Respeta las reglas aprendidas en feedback_home_design.md:
     · Sin glassmorphism (Safari)
     · Sin word-split en títulos animados
     · Sin transform:none sobre elementos con animación CSS propia
     · Pill buttons (50px radius) · Cards 20px radius
   ============================================================== */

/* ─── Tokens locales ─────────────────────────────────────────── */
.hlp-about-page {
	--ab-dark:   #011d3f;
	--ab-blue:   #023C7F;
	--ab-blue-2: #0a4a8a;
	--ab-cyan:   #7ec8f0;
	--ab-accent: #449FDC;
	--ab-bg:     #fff;
	--ab-ink:    #1f2937;
	--ab-muted:  #64748b;
	--ab-hair:   rgba(2, 60, 127, .08);
	--ab-shadow: 0 12px 40px rgba(2, 60, 127, .1), 0 2px 8px rgba(2, 60, 127, .05);
	--ab-radius: 20px;

	background: var(--ab-bg);
	color: var(--ab-ink);
	overflow-x: hidden;
}
.hlp-about-page *,
.hlp-about-page *::before,
.hlp-about-page *::after { box-sizing: border-box; }

/* ─── Utilidades ─────────────────────────────────────────────── */
.hlp-about-page .hlp-container {
	width: 100%; max-width: 1200px;
	margin: 0 auto; padding: 0 1.25rem;
}
.hlp-about-page .hlp-container--narrow { max-width: 820px; }

/* Botones (pill · gradient + ghost + outline) */
.hlp-about-page .hlp-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: .5rem;
	padding: .85rem 1.6rem;
	border-radius: 50px;
	font-size: .95rem; font-weight: 700;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
	cursor: pointer;
	line-height: 1.2;
	border: 2px solid transparent;
}
.hlp-about-page .hlp-btn--primary {
	background: linear-gradient(135deg, var(--ab-blue), var(--ab-accent));
	color: #fff;
	box-shadow: 0 10px 28px rgba(2, 60, 127, .35);
}
.hlp-about-page .hlp-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(2, 60, 127, .45);
	color: #fff;
}
.hlp-about-page .hlp-btn--ghost {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border-color: rgba(255, 255, 255, .35);
}
.hlp-about-page .hlp-btn--ghost:hover {
	background: rgba(255, 255, 255, .22);
	border-color: #fff;
	color: #fff;
	transform: translateY(-2px);
}
.hlp-about-page .hlp-btn--outline {
	background: #fff;
	color: var(--ab-blue);
	border-color: var(--ab-blue);
}
.hlp-about-page .hlp-btn--outline:hover {
	background: var(--ab-blue);
	color: #fff;
	transform: translateY(-2px);
}

/* Section headers consistentes */
.hlp-about-page .hlp-section-head {
	max-width: 820px;
	margin-bottom: 3rem;
}
.hlp-about-page .hlp-section-head--center {
	margin-left: auto; margin-right: auto;
	text-align: center;
}
.hlp-about-page .hlp-section-head__kicker {
	display: inline-block;
	font-size: .78rem; font-weight: 800; letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--ab-accent);
	padding: .35rem .9rem;
	background: rgba(68, 159, 220, .1);
	border-radius: 50px;
	margin-bottom: 1rem;
}
.hlp-about-page .hlp-section-head__title {
	font-size: clamp(1.75rem, 3.6vw, 2.6rem);
	font-weight: 800;
	color: var(--ab-blue);
	margin: 0 0 .75rem;
	letter-spacing: -.02em;
	line-height: 1.2;
}
.hlp-about-page .hlp-section-head__sub {
	font-size: 1.05rem;
	color: var(--ab-muted);
	line-height: 1.6;
	margin: 0;
}
.hlp-about-page .hlp-section-head--light .hlp-section-head__title { color: #fff; }
.hlp-about-page .hlp-section-head--light .hlp-section-head__kicker {
	color: #fff;
	background: rgba(255, 255, 255, .18);
}
.hlp-about-page .hlp-section-head--light .hlp-section-head__sub { color: rgba(255,255,255,.82); }

/* ─── Inline links en contenido narrativo ──────────────────────
   Anchors dentro de párrafos/listas en secciones claras. Los CTAs
   (.hlp-btn) y el CTA row final tienen sus propios estilos.
   ────────────────────────────────────────────────────────────── */
.hlp-about-page .hlp-about-def__lead a,
.hlp-about-page .hlp-timeline__card a,
.hlp-about-page .hlp-unit-card a,
.hlp-about-page .hlp-brand-card p a,
.hlp-about-page .hlp-impact-stat__label a,
.hlp-about-page .hlp-award__body p a {
	color: var(--ab-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	font-weight: 600;
	transition: color .2s, text-decoration-color .2s;
}
.hlp-about-page .hlp-about-def__lead a:hover,
.hlp-about-page .hlp-timeline__card a:hover,
.hlp-about-page .hlp-unit-card a:hover,
.hlp-about-page .hlp-award__body p a:hover {
	color: var(--ab-blue);
	text-decoration-color: var(--ab-blue);
}
/* strong dentro de un link hereda el color del link (no pisa con azul) */
.hlp-about-page .hlp-about-def__lead a strong,
.hlp-about-page .hlp-timeline__card a strong,
.hlp-about-page .hlp-impact-stat__label a strong,
.hlp-about-page .hlp-award__body p a strong {
	color: inherit;
}
/* Brand cards: fondos oscuros → links en blanco con hover opacity */
.hlp-about-page .hlp-brand-card p a {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, .5);
}
.hlp-about-page .hlp-brand-card p a:hover {
	text-decoration-color: #fff;
	opacity: .9;
}
/* Impact section: fondos oscuros → links cyan */
.hlp-about-page .hlp-impact-stat__label a {
	color: var(--ab-cyan);
}
.hlp-about-page .hlp-impact-stat__label a:hover {
	color: #fff;
}
/* Unit card list items */
.hlp-about-page .hlp-unit-card ul li a {
	color: var(--ab-blue);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .2s, border-color .2s;
	font-weight: 600;
}
.hlp-about-page .hlp-unit-card ul li a:hover {
	color: var(--ab-accent);
	border-bottom-color: var(--ab-accent);
}

/* ─── Reveal (IntersectionObserver) ─────────────────────────────
   Estrategia resiliente: por defecto el contenido SIEMPRE se ve.
   Solo ocultamos con transform/opacity cuando JS confirma que va a
   tomar control (agregando la clase .hlp-js-reveal al <html>).
   Si el JS falla, no carga o es bloqueado → el contenido permanece
   visible, no se queda en blanco.
   ────────────────────────────────────────────────────────────── */
.hlp-js-reveal .hlp-about-page [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s ease, transform .7s ease;
	transition-delay: var(--d, 0s);
	will-change: opacity, transform;
}
.hlp-js-reveal .hlp-about-page [data-reveal].is-in {
	opacity: 1;
	transform: translateY(0);
}

/* Sin animaciones si el usuario prefiere reducir movimiento */
@media (prefers-reduced-motion: reduce) {
	.hlp-js-reveal .hlp-about-page [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.hlp-about-page [data-parallax] { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
.hlp-about-hero {
	position: relative;
	padding: 6rem 0 4.5rem;
	background: linear-gradient(160deg, var(--ab-dark) 0%, var(--ab-blue) 55%, var(--ab-blue-2) 100%);
	overflow: hidden;
	color: #fff;
	isolation: isolate;
}
.hlp-about-hero__bg {
	position: absolute; inset: 0;
	z-index: -1;
}
.hlp-about-hero__layer {
	position: absolute; inset: -20%;
	border-radius: 50%;
	filter: blur(80px);
	will-change: transform;
	pointer-events: none;
}
.hlp-about-hero__layer--1 {
	width: 60%; height: 60%;
	top: -10%; left: -5%;
	background: radial-gradient(circle, rgba(68,159,220,.45), transparent 70%);
}
.hlp-about-hero__layer--2 {
	width: 55%; height: 55%;
	top: 25%; right: -10%;
	background: radial-gradient(circle, rgba(126,200,240,.35), transparent 70%);
}
.hlp-about-hero__layer--3 {
	width: 45%; height: 45%;
	bottom: -12%; left: 30%;
	background: radial-gradient(circle, rgba(10,74,138,.55), transparent 70%);
}
.hlp-about-hero__waves {
	position: absolute; bottom: 0; left: 0;
	width: 100%; height: 220px;
	pointer-events: none;
	z-index: 1;
}
/* Canvas de lluvia — reemplaza a las gotas estáticas con un efecto
   de partículas cayendo (mismo sistema que /calculador-ahorro/). */
.hlp-about-hero__canvas {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	display: block;
	z-index: 0;
	pointer-events: none;
	opacity: .55;
}

.hlp-about-hero__inner {
	position: relative;
	text-align: center;
	max-width: 920px;
}
.hlp-about-hero__eyebrow {
	display: inline-block;
	font-size: .78rem; font-weight: 700; letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--ab-cyan);
	padding: .4rem 1rem;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 50px;
	margin-bottom: 1.5rem;
}
.hlp-about-hero__title {
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	font-weight: 900;
	margin: 0 0 1.25rem;
	letter-spacing: -.025em;
	line-height: 1.12;
	color: #fff;
	text-shadow: 0 2px 20px rgba(0, 0, 0, .25);
}
.hlp-about-hero__sub {
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, .88);
	max-width: 720px;
	margin: 0 auto 2.5rem;
}
.hlp-about-hero__sub strong { color: #fff; font-weight: 700; }

.hlp-about-hero__stats {
	list-style: none; padding: 0; margin: 0 0 2.5rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
.hlp-stat {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 16px;
	padding: 1.1rem .9rem;
	text-align: center;
	transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.hlp-stat:hover {
	transform: translateY(-4px);
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .32);
}
.hlp-stat__num {
	display: block;
	font-size: clamp(1.3rem, 2.2vw, 1.75rem);
	font-weight: 900;
	color: #fff;
	line-height: 1.1;
	margin-bottom: .2rem;
	letter-spacing: -.02em;
}
.hlp-stat__label {
	display: block;
	font-size: .78rem;
	color: rgba(255, 255, 255, .78);
	font-weight: 500;
	line-height: 1.35;
}

.hlp-about-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
}

@media (max-width: 768px) {
	.hlp-about-hero { padding: 4rem 0 3rem; }
	.hlp-about-hero__stats { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════
   DEFINICIÓN
   ══════════════════════════════════════════════════════════════ */
.hlp-about-definition {
	padding: 5rem 0 4rem;
	background:
		radial-gradient(circle at 10% 0%, rgba(68,159,220,.06), transparent 50%),
		#fff;
}
.hlp-about-def__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 3rem;
	align-items: start;
}
.hlp-about-def__lead .hlp-lead {
	font-size: 1.15rem;
	line-height: 1.75;
	color: var(--ab-ink);
	margin: 0 0 1.25rem;
}
.hlp-about-def__lead p {
	font-size: 1.02rem;
	line-height: 1.75;
	color: #374151;
	margin: 0 0 1rem;
}
.hlp-about-def__lead strong {
	color: var(--ab-blue);
	font-weight: 700;
}

.hlp-about-def__card {
	background: linear-gradient(160deg, #f0f6ff 0%, #e8f2ff 100%);
	border: 1px solid #d6e8ff;
	border-radius: var(--ab-radius);
	padding: 1.5rem 1.75rem;
	box-shadow: var(--ab-shadow);
	position: sticky;
	top: 100px;
}
.hlp-about-def__facts {
	list-style: none; margin: 0; padding: 0;
}
.hlp-about-def__facts li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .75rem;
	padding: .75rem 0;
	border-bottom: 1px solid rgba(2, 60, 127, .08);
	font-size: .92rem;
	align-items: center;
}
.hlp-about-def__facts li:last-child { border-bottom: none; }
.hlp-about-def__facts span {
	color: var(--ab-muted);
	font-weight: 500;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.hlp-about-def__facts strong {
	color: var(--ab-blue);
	font-weight: 700;
	text-align: right;
}

@media (max-width: 900px) {
	.hlp-about-def__grid { grid-template-columns: 1fr; gap: 2rem; }
	.hlp-about-def__card { position: static; }
}

/* ══════════════════════════════════════════════════════════════
   TIMELINE
   ══════════════════════════════════════════════════════════════ */
.hlp-about-history {
	padding: 5rem 0 6rem;
	background: linear-gradient(180deg, #fff 0%, #f8faff 60%, #fff 100%);
	position: relative;
}

.hlp-timeline {
	list-style: none; padding: 0; margin: 0;
	position: relative;
	max-width: 1000px; margin-inline: auto;
}
.hlp-timeline::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: 50%;
	width: 3px;
	background: linear-gradient(180deg, var(--ab-accent), var(--ab-blue), var(--ab-dark));
	transform: translateX(-50%);
	border-radius: 4px;
	opacity: .35;
}

.hlp-timeline__item {
	position: relative;
	margin-bottom: 3rem;
	width: 50%;
	padding-right: 3rem;
}
.hlp-timeline__item--right {
	margin-left: 50%;
	padding-right: 0;
	padding-left: 3rem;
}
.hlp-timeline__item:last-child { margin-bottom: 0; }

.hlp-timeline__marker {
	position: absolute;
	top: 1.2rem;
	right: -30px;
	width: 60px; height: 60px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ab-blue), var(--ab-accent));
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: .95rem;
	box-shadow: 0 8px 24px rgba(2, 60, 127, .3);
	z-index: 2;
	transition: transform .3s ease;
}
.hlp-timeline__item--right .hlp-timeline__marker {
	right: auto;
	left: -30px;
}
.hlp-timeline__marker::before {
	content: "";
	position: absolute; inset: -6px;
	border-radius: 50%;
	border: 2px solid var(--ab-accent);
	opacity: .45;
	animation: ab-pulse 3s ease-in-out infinite;
}
.hlp-timeline__marker--future {
	background: linear-gradient(135deg, #7c3aed, var(--ab-accent));
}
.hlp-timeline__marker--future::before { border-color: #7c3aed; }

@keyframes ab-pulse {
	0%, 100% { transform: scale(1);   opacity: .45; }
	50%       { transform: scale(1.2); opacity: 0; }
}

.hlp-timeline__card {
	background: #fff;
	border: 1px solid var(--ab-hair);
	border-radius: var(--ab-radius);
	padding: 1.5rem 1.75rem;
	box-shadow: var(--ab-shadow);
	position: relative;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* Pointer (::after) eliminado: en mobile se veía como un rombo blanco
   flotando encima del card. La conexión visual entre card ↔ año ya está
   clara con la línea del timeline y el círculo del marker. */
.hlp-timeline__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 48px rgba(2, 60, 127, .15);
	border-color: rgba(68, 159, 220, .5);
}
.hlp-timeline__card--featured {
	background: linear-gradient(160deg, #f0f8ff 0%, #fff 60%);
	border-color: rgba(68, 159, 220, .4);
	border-left: 4px solid var(--ab-accent);
}
.hlp-timeline__card h3 {
	color: var(--ab-blue);
	font-size: 1.25rem;
	font-weight: 800;
	margin: 0 0 .6rem;
	letter-spacing: -.01em;
}
.hlp-timeline__card p {
	color: #374151;
	font-size: .95rem;
	line-height: 1.65;
	margin: 0;
}
.hlp-timeline__card p strong { color: var(--ab-blue); font-weight: 700; }

.hlp-timeline__figure {
	margin: 1.2rem 0 0;
	overflow: hidden;
	border-radius: 12px;
}
.hlp-timeline__figure img {
	width: 100%; height: auto;
	display: block;
	transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.hlp-timeline__card:hover .hlp-timeline__figure img {
	transform: scale(1.06);
}
.hlp-timeline__figure--double {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
}
.hlp-timeline__figure figcaption {
	font-size: .78rem;
	color: var(--ab-muted);
	margin-top: .5rem;
	font-style: italic;
	text-align: center;
}

@media (max-width: 800px) {
	.hlp-timeline::before { left: 28px; }
	.hlp-timeline__item {
		width: 100%;
		padding: 0 0 0 70px;
		margin-left: 0;
	}
	.hlp-timeline__item--right {
		margin-left: 0;
		padding: 0 0 0 70px;
	}
	.hlp-timeline__marker,
	.hlp-timeline__item--right .hlp-timeline__marker {
		left: 0;
		right: auto;
		top: .6rem;
		width: 56px; height: 56px;
		font-size: .85rem;
	}
}

/* ══════════════════════════════════════════════════════════════
   FUNDADORES
   ══════════════════════════════════════════════════════════════ */
.hlp-about-founders {
	padding: 5rem 0;
	background: linear-gradient(180deg, #fff 0%, #f0f6ff 100%);
}
.hlp-founders-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.5rem;
	max-width: 1100px; margin: 0 auto;
}
.hlp-founder {
	background: #fff;
	border-radius: var(--ab-radius);
	overflow: hidden;
	border: 1px solid var(--ab-hair);
	box-shadow: var(--ab-shadow);
	transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
	will-change: transform;
}
.hlp-founder[data-tilt] {
	transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.hlp-founder:hover {
	box-shadow: 0 22px 58px rgba(2, 60, 127, .18);
}

.hlp-founder__photo-wrap {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: linear-gradient(135deg, var(--ab-blue), var(--ab-accent));
}
.hlp-founder__photo {
	width: 100%; height: 100%;
	object-fit: cover;
	/* Priorizar la parte superior de la foto para que se vea la cara
	   completa — las imágenes originales son 658x1080 (retrato vertical)
	   y con un wrap cuadrado el crop centrado cortaba la cabeza. */
	object-position: 50% 15%;
	display: block;
	transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s;
	filter: saturate(.95) contrast(1.03);
}
.hlp-founder:hover .hlp-founder__photo {
	transform: scale(1.05);
	filter: saturate(1.1) contrast(1.08);
}
.hlp-founder__glow {
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(2,60,127,.55), transparent 60%);
	opacity: 0; transition: opacity .4s;
	pointer-events: none;
}
.hlp-founder:hover .hlp-founder__glow { opacity: 1; }

.hlp-founder__info {
	padding: 1.75rem 1.85rem 2rem;
}
.hlp-founder__name {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--ab-blue);
	margin: 0 0 .25rem;
	letter-spacing: -.02em;
}
.hlp-founder__role {
	display: inline-block;
	font-size: .75rem; font-weight: 700; letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ab-accent);
	background: rgba(68, 159, 220, .12);
	padding: .3rem .8rem;
	border-radius: 50px;
	margin-bottom: 1rem;
}
.hlp-founder__quote {
	border-left: 3px solid var(--ab-accent);
	padding: .25rem 0 .25rem 1.1rem;
	margin: 0;
}
.hlp-founder__quote p {
	font-size: .97rem;
	line-height: 1.7;
	color: #374151;
	font-style: italic;
	margin: 0;
}
.hlp-founder__quote strong { color: var(--ab-blue); font-weight: 700; font-style: normal; }

@media (max-width: 768px) {
	.hlp-founders-grid { grid-template-columns: 1fr; gap: 1.5rem; }
	.hlp-about-founders { padding: 4rem 0; }
	/* En mobile las fotos son retratos verticales (658x1080). Con aspect
	   1:1 + object-fit cover el crop corta la cara aunque ajustemos
	   object-position. Cambiamos a 4/5 (portrait) para que la cara se
	   vea completa sin cortes raros. */
	.hlp-founder__photo-wrap { aspect-ratio: 4 / 5; }
	.hlp-founder__photo { object-position: 50% 10%; }
}

/* ══════════════════════════════════════════════════════════════
   PROPÓSITO
   ══════════════════════════════════════════════════════════════ */
.hlp-about-purpose {
	padding: 5rem 0;
	background: #fff;
}
.hlp-purpose-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	margin-bottom: 3rem;
}
.hlp-purpose-card {
	background: #fff;
	border: 1px solid var(--ab-hair);
	border-radius: var(--ab-radius);
	padding: 2rem 1.75rem;
	box-shadow: var(--ab-shadow);
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: transform .3s ease, box-shadow .3s, border-color .3s;
}
.hlp-purpose-card::before {
	content: "";
	position: absolute; top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--ab-blue), var(--ab-accent));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.hlp-purpose-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 48px rgba(2, 60, 127, .14);
	border-color: rgba(68, 159, 220, .4);
}
.hlp-purpose-card:hover::before { transform: scaleX(1); }

.hlp-purpose-card__icon {
	width: 64px; height: 64px;
	margin: 0 auto 1.25rem;
	background: linear-gradient(135deg, rgba(2,60,127,.1), rgba(68,159,220,.1));
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--ab-blue);
	transition: transform .4s cubic-bezier(.2,.7,.2,1), background .4s;
}
.hlp-purpose-card:hover .hlp-purpose-card__icon {
	transform: rotate(8deg) scale(1.08);
	background: linear-gradient(135deg, var(--ab-blue), var(--ab-accent));
	color: #fff;
}
.hlp-purpose-card__icon svg { width: 34px; height: 34px; }

.hlp-purpose-card h3 {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--ab-blue);
	margin: 0 0 .75rem;
	letter-spacing: -.01em;
}
.hlp-purpose-card p {
	font-size: .95rem;
	line-height: 1.65;
	color: #374151;
	margin: 0;
}

.hlp-purpose-values {
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	max-width: 1080px; margin: 0 auto;
}
.hlp-purpose-values li {
	background: #f0f6ff;
	border: 1px solid #d6e8ff;
	border-radius: 12px;
	padding: 1rem 1.15rem;
	font-size: .92rem;
	color: #374151;
	line-height: 1.5;
	transition: transform .2s, background .2s;
}
.hlp-purpose-values li:hover {
	transform: translateY(-3px);
	background: #e8f2ff;
}
.hlp-purpose-values li strong {
	display: block;
	color: var(--ab-blue);
	font-weight: 800;
	margin-bottom: .15rem;
	font-size: .95rem;
}

@media (max-width: 900px) {
	.hlp-purpose-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ══════════════════════════════════════════════════════════════
   UNIDADES DE NEGOCIO
   ══════════════════════════════════════════════════════════════ */
.hlp-about-units {
	padding: 5rem 0;
	background: linear-gradient(180deg, #fff 0%, #f8faff 100%);
}
.hlp-units-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}
.hlp-unit-card {
	background: #fff;
	border: 1px solid var(--ab-hair);
	border-radius: var(--ab-radius);
	padding: 2.25rem 1.85rem 1.85rem;
	box-shadow: var(--ab-shadow);
	position: relative;
	overflow: hidden;
	transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.hlp-unit-card::after {
	content: "";
	position: absolute;
	bottom: -50%; right: -30%;
	width: 300px; height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(68,159,220,.08), transparent 70%);
	transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.hlp-unit-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 60px rgba(2, 60, 127, .18);
	border-color: var(--ab-accent);
}
.hlp-unit-card:hover::after {
	transform: scale(1.3) translate(-10%, -10%);
}

.hlp-unit-card__num {
	font-size: 3.5rem;
	font-weight: 900;
	background: linear-gradient(135deg, var(--ab-blue), var(--ab-accent));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	line-height: 1;
	margin-bottom: 1rem;
	letter-spacing: -.04em;
	position: relative;
}
.hlp-unit-card h3 {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--ab-blue);
	margin: 0 0 .7rem;
	letter-spacing: -.01em;
	position: relative;
}
.hlp-unit-card p {
	color: #374151;
	font-size: .95rem;
	line-height: 1.65;
	margin: 0 0 1rem;
	position: relative;
}
.hlp-unit-card ul {
	list-style: none; padding: 0; margin: 0;
	position: relative;
}
.hlp-unit-card ul li {
	padding: .45rem 0 .45rem 1.4rem;
	font-size: .88rem;
	color: var(--ab-muted);
	position: relative;
	border-bottom: 1px dashed rgba(2, 60, 127, .1);
}
.hlp-unit-card ul li:last-child { border-bottom: none; }
.hlp-unit-card ul li::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--ab-accent);
	transform: translateY(-50%);
}

@media (max-width: 900px) {
	.hlp-units-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ══════════════════════════════════════════════════════════════
   MARCAS
   ══════════════════════════════════════════════════════════════ */
.hlp-about-brands {
	padding: 5rem 0;
	background: #fff;
}
.hlp-brands-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.hlp-brand-card {
	padding: 2.25rem 1.85rem;
	border-radius: var(--ab-radius);
	color: #fff;
	position: relative;
	overflow: hidden;
	transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
	min-height: 240px;
	display: flex; flex-direction: column; justify-content: flex-end;
}
.hlp-brand-card::before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 50%);
	transition: opacity .4s;
}
.hlp-brand-card:hover {
	transform: translateY(-8px) rotate(-.5deg);
	box-shadow: 0 26px 60px rgba(2, 60, 127, .25);
}
.hlp-brand-card--hidrolit {
	background: linear-gradient(135deg, var(--ab-blue) 0%, var(--ab-accent) 100%);
}
.hlp-brand-card--chill {
	background: linear-gradient(135deg, #0c7dc2 0%, #7ec8f0 100%);
}
.hlp-brand-card--gwc {
	background: linear-gradient(135deg, var(--ab-dark) 0%, var(--ab-blue) 100%);
}

.hlp-brand-card__name {
	font-size: 1.7rem;
	font-weight: 900;
	margin: 0 0 .3rem;
	letter-spacing: -.02em;
	position: relative;
}
.hlp-brand-card__line {
	font-size: .85rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 1.5px;
	color: rgba(255, 255, 255, .75);
	margin: 0 0 .9rem;
	position: relative;
}
.hlp-brand-card p {
	font-size: .95rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .92);
	margin: 0;
	position: relative;
}
.hlp-brand-card p strong {
	color: #fff; font-weight: 800;
}

@media (max-width: 900px) {
	.hlp-brands-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   RECONOCIMIENTOS
   ══════════════════════════════════════════════════════════════ */
.hlp-about-awards {
	padding: 5rem 0;
	background: linear-gradient(180deg, #f8faff 0%, #fff 100%);
}
.hlp-awards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}
.hlp-award {
	background: #fff;
	border-radius: var(--ab-radius);
	overflow: hidden;
	border: 1px solid var(--ab-hair);
	box-shadow: var(--ab-shadow);
	transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
	display: flex; flex-direction: column;
}
.hlp-award:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 56px rgba(2, 60, 127, .18);
	border-color: rgba(68, 159, 220, .4);
}
.hlp-award__figure {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f0f6ff;
}
.hlp-award__figure img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.hlp-award:hover .hlp-award__figure img {
	transform: scale(1.08);
}
.hlp-award__body {
	padding: 1.5rem 1.6rem 1.75rem;
	flex-grow: 1;
}
.hlp-award__year {
	display: inline-block;
	font-size: .75rem; font-weight: 800; letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ab-accent);
	background: rgba(68, 159, 220, .1);
	padding: .3rem .8rem;
	border-radius: 50px;
	margin-bottom: .6rem;
}
.hlp-award__title {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--ab-blue);
	margin: 0 0 .6rem;
	letter-spacing: -.01em;
}
.hlp-award__body p {
	color: #374151;
	font-size: .92rem;
	line-height: 1.65;
	margin: 0;
}

@media (max-width: 900px) {
	.hlp-awards-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ══════════════════════════════════════════════════════════════
   PRESENCIA
   ══════════════════════════════════════════════════════════════ */
.hlp-about-reach {
	padding: 5rem 0;
	background: #fff;
}
.hlp-reach-grid {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 2rem;
	max-width: 1100px; margin: 0 auto;
}
.hlp-reach-now, .hlp-reach-next {
	background: #fff;
	border: 1px solid var(--ab-hair);
	border-radius: var(--ab-radius);
	padding: 2rem 1.85rem;
	box-shadow: var(--ab-shadow);
}
.hlp-reach-now {
	background: linear-gradient(160deg, #f0f6ff 0%, #fff 100%);
	border-color: rgba(68, 159, 220, .3);
}
.hlp-reach-now h3, .hlp-reach-next h3 {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--ab-blue);
	margin: 0 0 1.2rem;
	padding-bottom: .7rem;
	border-bottom: 2px solid var(--ab-accent);
}
.hlp-reach-flags {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column;
	gap: 1rem;
}
.hlp-reach-flags--next { gap: .8rem; }
.hlp-reach-flags li {
	display: flex; align-items: center; gap: 1rem;
	padding: .8rem 1rem;
	background: rgba(255, 255, 255, .7);
	border-radius: 12px;
	border: 1px solid rgba(2, 60, 127, .05);
	transition: transform .2s ease, background .2s;
}
.hlp-reach-flags li:hover {
	transform: translateX(6px);
	background: #fff;
}
.hlp-reach-flags li strong {
	color: var(--ab-blue);
	font-weight: 800;
	font-size: 1.05rem;
}
.hlp-flag {
	font-size: 1.8rem;
	flex-shrink: 0;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
	transition: transform .3s ease;
}
.hlp-reach-flags li:hover .hlp-flag {
	transform: scale(1.15) rotate(-4deg);
}
.hlp-reach-meta {
	display: block;
	font-size: .8rem;
	color: var(--ab-muted);
	margin-top: .2rem;
	line-height: 1.4;
}

@media (max-width: 900px) {
	.hlp-reach-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ══════════════════════════════════════════════════════════════
   IMPACTO
   ══════════════════════════════════════════════════════════════ */
.hlp-about-impact {
	padding: 5rem 0;
	background: linear-gradient(160deg, var(--ab-dark) 0%, var(--ab-blue) 60%, var(--ab-blue-2) 100%);
	position: relative;
	overflow: hidden;
	color: #fff;
	isolation: isolate;
}
.hlp-about-impact__bg {
	position: absolute; inset: 0;
	z-index: -1; pointer-events: none;
}
.hlp-about-impact__layer {
	position: absolute;
	width: 80%; height: 80%;
	top: 10%; left: 10%;
	background: radial-gradient(circle, rgba(126,200,240,.22), transparent 70%);
	filter: blur(100px);
	will-change: transform;
}
.hlp-impact-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	margin-bottom: 3rem;
}
.hlp-impact-stat {
	text-align: center;
	padding: 1.75rem 1.25rem;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: var(--ab-radius);
	transition: transform .3s ease, background .3s, border-color .3s;
}
.hlp-impact-stat:hover {
	transform: translateY(-6px) scale(1.03);
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .35);
}
.hlp-impact-stat__num {
	display: block;
	font-size: clamp(1.8rem, 3.2vw, 2.6rem);
	font-weight: 900;
	color: #fff;
	letter-spacing: -.02em;
	line-height: 1.1;
	margin-bottom: .5rem;
	background: linear-gradient(135deg, #fff 0%, var(--ab-cyan) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.hlp-impact-stat__label {
	font-size: .88rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .82);
}
.hlp-impact-stat__label strong {
	color: #fff;
	font-weight: 700;
}

.hlp-impact-ods {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: var(--ab-radius);
	padding: 1.75rem 2rem;
	max-width: 820px; margin: 0 auto;
	text-align: center;
}
.hlp-impact-ods h3 {
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 1rem;
}
.hlp-impact-ods ul {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap;
	justify-content: center; gap: .75rem;
}
.hlp-impact-ods li {
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50px;
	padding: .5rem 1.1rem;
	font-size: .88rem;
	color: #fff;
	transition: background .2s;
}
.hlp-impact-ods li:hover { background: rgba(255, 255, 255, .24); }
.hlp-impact-ods li strong { font-weight: 800; color: var(--ab-cyan); }

@media (max-width: 900px) {
	.hlp-impact-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════
   NUEVA PLANTA — pullquote
   ══════════════════════════════════════════════════════════════ */
.hlp-about-plant {
	padding: 5rem 0;
	background: linear-gradient(180deg, #f8faff 0%, #fff 100%);
}
.hlp-plant-card {
	background: #fff;
	border: 1px solid rgba(68, 159, 220, .4);
	border-left: 6px solid var(--ab-accent);
	border-radius: var(--ab-radius);
	padding: 2.5rem 2.25rem;
	box-shadow: 0 16px 48px rgba(2, 60, 127, .12);
}
.hlp-plant-card__kicker {
	display: inline-block;
	font-size: .78rem; font-weight: 800; letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ab-accent);
	margin-bottom: 1rem;
}
.hlp-plant-card h2 {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 800;
	color: var(--ab-blue);
	margin: 0 0 1rem;
	letter-spacing: -.02em;
	line-height: 1.25;
}
.hlp-plant-card p {
	color: #374151;
	font-size: 1.02rem;
	line-height: 1.7;
	margin: 0 0 1.5rem;
}
.hlp-plant-card p strong { color: var(--ab-blue); font-weight: 700; }
.hlp-plant-card__quote {
	border-left: 3px solid var(--ab-accent);
	padding: .5rem 0 .5rem 1.25rem;
	margin: 0;
	background: linear-gradient(90deg, rgba(68,159,220,.06), transparent);
	border-radius: 0 12px 12px 0;
	padding-right: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.hlp-plant-card__quote p {
	font-size: 1.15rem;
	font-style: italic;
	color: var(--ab-blue);
	margin: 0 0 .4rem;
	line-height: 1.55;
}
.hlp-plant-card__quote cite {
	font-size: .88rem;
	color: var(--ab-muted);
	font-style: normal;
	font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   CTA FINAL
   ══════════════════════════════════════════════════════════════ */
.hlp-about-cta {
	padding: 4.5rem 0;
	background: linear-gradient(135deg, #f0f6ff 0%, #e8f2ff 100%);
	border-top: 1px solid #d6e8ff;
	text-align: center;
}
.hlp-about-cta__title {
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	font-weight: 800;
	color: var(--ab-blue);
	margin: 0 0 .75rem;
	letter-spacing: -.02em;
}
.hlp-about-cta p {
	color: #4a5568;
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0 0 2rem;
}
.hlp-about-cta__row {
	display: flex; flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
}
.hlp-about-cta .hlp-btn--ghost {
	background: rgba(2, 60, 127, .05);
	color: var(--ab-blue);
	border-color: rgba(2, 60, 127, .15);
}
.hlp-about-cta .hlp-btn--ghost:hover {
	background: rgba(2, 60, 127, .12);
	border-color: var(--ab-blue);
	color: var(--ab-blue);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE TWEAKS GENERALES
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
	.hlp-about-page section { padding-inline: 0; }
	.hlp-about-page .hlp-container { padding: 0 1rem; }
	.hlp-about-definition,
	.hlp-about-history,
	.hlp-about-founders,
	.hlp-about-purpose,
	.hlp-about-units,
	.hlp-about-brands,
	.hlp-about-awards,
	.hlp-about-reach,
	.hlp-about-impact,
	.hlp-about-plant,
	.hlp-about-cta { padding: 3.5rem 0; }
	.hlp-plant-card { padding: 1.75rem 1.4rem; }
}