/* ============================================================
   LOS ALTILLOS — ENLACES DE HUB (fase 0, 29/9/2026)
   Archivo: assets/hub-enlaces.css · Prefijo: lahx-
   Componentes: template-parts/hub-relacionadas.php y en-tu-pais.php
   Se carga en los hubs de la_hubs_de_sistema() (bloque 10).
   Todo en px: la raíz pasa de 12 a 15 px en móvil (bloque 26).
   ============================================================ */

.lahx {
	padding: 72px 0;
	background: var(--color-bg, #fff);
	border-top: 1px solid var(--color-border, #E2E8F0);
	font-family: var(--font-body);
}
.lahx--paises { background: var(--color-bg-secondary, #F7F8FA); }
.lahx + .lahx { border-top: 0; }

.lahx__wrap {
	max-width: var(--container-max, 1280px);
	margin: 0 auto;
	padding: 0 32px;
}
.lahx__head { max-width: 680px; margin-bottom: 32px; }
.lahx__eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-accent, #C7081D);
}
.lahx__h2 {
	margin: 8px 0 12px;
	font-family: var(--font-display);
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--color-text, #0F172A);
	text-wrap: balance;
}
.lahx__intro {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--color-text-muted, #334155);
}

/* ---- Guías relacionadas ----------------------------------- */
.lahx-rel,
.lahx-paises {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}
.lahx-rel { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

.lahx-rel__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #E2E8F0);
	border-top: 3px solid var(--color-secondary, #023778);
	border-radius: var(--radius-md, 8px);
	transition: box-shadow var(--transition-fast, 150ms ease), transform var(--transition-fast, 150ms ease);
}
.lahx-rel__card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.lahx-rel__tipo {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-text-subtle, #64748B);
}
.lahx-rel__link {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-secondary, #023778);
	text-decoration: none;
}
.lahx-rel__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lahx-rel__card:hover .lahx-rel__link { text-decoration: underline; text-underline-offset: 3px; }
.lahx-rel__link:focus-visible { outline: none; }
.lahx-rel__card:focus-within { outline: 2px solid var(--color-secondary-light, #0B4AA1); outline-offset: 2px; }
.lahx-rel__txt {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--color-text-muted, #334155);
}

/* ---- En tu país --------------------------------------------- */
.lahx-paises { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.lahx-pais {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 20px;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #E2E8F0);
	border-radius: var(--radius-md, 8px);
	transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}
.lahx-pais:hover { border-color: var(--color-steel-dark, #9AA3B2); box-shadow: var(--shadow-sm); }
.lahx-pais:focus-within { outline: 2px solid var(--color-secondary-light, #0B4AA1); outline-offset: 2px; }
.lahx-pais__flag {
	flex: 0 0 auto;
	width: 36px;
	height: 24px;
	margin-top: 2px;
	object-fit: cover;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(15, 23, 42, .12);
}
.lahx-pais__body { min-width: 0; }
.lahx-pais__link {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-secondary, #023778);
	text-decoration: none;
}
.lahx-pais__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lahx-pais:hover .lahx-pais__link { text-decoration: underline; text-underline-offset: 3px; }
.lahx-pais__link:focus-visible { outline: none; }
.lahx-pais__txt {
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-text-muted, #334155);
}

@media (max-width: 768px) {
	.lahx { padding: 48px 0; }
	.lahx__wrap { padding: 0 16px; }
	.lahx__head { margin-bottom: 24px; }
	.lahx__intro { font-size: 16px; }
	.lahx-rel__card { padding: 18px; }
	.lahx-pais { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.lahx-rel__card,
	.lahx-pais { transition: none; }
	.lahx-rel__card:hover { transform: none; }
}