/* ============================================================
   MEJORAS LIDERAZGO · page-liderazgo.php · tema v1.5.0 (septiembre 2026)
   Se encola solo en /liderazgo/ (inc/enqueue.php), después de main.css,
   y pisa por orden bajo #pg-liderazgo. No tocar main.css.

   Orden de la página: portada (imagen de flota) → para quién → distinción
   con los Encuentros → el punto de partida (máxima délfica) → tres mapas →
   cómo trabajamos → competencias → quién lo conduce → cierre.

   Ritmo de bandas: base-1 con imagen → blanco → base-0 → papel → base-1 →
   blanco → papel → blanco → base-0.

   Movimiento: reveals .rv (motor de main.js), .draw en los tres íconos de
   los mapas, nada más. Reduced-motion lo resuelve main.css (.rv, .draw y
   la imagen de portada quedan estáticos). Ningún texto se mueve.
   ============================================================ */

/* ---------- utilidades locales ---------- */
/* El .klabel es un <p> con max-width 68ch: para centrarlo hay que centrar
   la caja además del contenido. */
#pg-liderazgo .klabel.centro { justify-content: center; text-align: center; margin-left: auto; margin-right: auto; }
#pg-liderazgo .num { letter-spacing: .16em; }

/* ---------- 0 · Portada ---------- */
#pg-liderazgo .hero-lid {
	overflow: hidden;
	background: var(--base-1);
	padding-top: calc(72px + clamp(48px, 7vw, 96px));
	padding-bottom: clamp(72px, 9vw, 128px);
}
/* La ruta dorada y la rosa de los vientos viven en la mitad derecha de la
   carta: el recorte favorece ese lado y deja el texto sobre la zona oscura. */
#pg-liderazgo .hero-lid .hero-img img { object-position: 70% 50%; }
#pg-liderazgo .hero-in { max-width: none; }
#pg-liderazgo .hero-lid .klabel { margin-bottom: 22px; }
#pg-liderazgo .hero-lid h1 {
	font-size: clamp(54px, 8.5vw, 100px);
	letter-spacing: .03em;
	line-height: 1;
	margin: 0 0 20px;
	max-width: 12ch;
}
#pg-liderazgo .hero-lid h1.sin-nombre {
	font-size: clamp(38px, 5.6vw, 64px);
	letter-spacing: -.01em;
	line-height: 1.08;
	max-width: 14ch;
}
#pg-liderazgo .hero-lid .standfirst {
	font-size: clamp(20px, 2.3vw, 27px);
	max-width: 30ch;
	margin: 0 0 22px;
}
#pg-liderazgo .hero-lid .baja {
	color: var(--txt-d);
	font-size: clamp(16px, 1.5vw, 18.5px);
	line-height: 1.6;
	max-width: 50ch;
	margin: 0 0 34px;
}
#pg-liderazgo .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 700px) {
	#pg-liderazgo .hero-lid .hero-img img { object-position: 82% 56%; }
	#pg-liderazgo .hero-lid .standfirst { font-size: 19px; }
	#pg-liderazgo .hero-lid .baja { font-size: 15.5px; margin-bottom: 28px; }
}

/* ---------- 1 · Para quién: tres frases fuertes con cuadradito dorado ---------- */
#pg-liderazgo .pq-list { list-style: none; margin: 38px 0 0; padding: 0; }
#pg-liderazgo .pq-list li {
	position: relative;
	padding: 24px 0 0 26px;
	border-top: 1px solid var(--tinta);
}
#pg-liderazgo .pq-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 35px;
	width: 8px;
	height: 8px;
	background: var(--gold-deep);
	transform: rotate(45deg);
}
#pg-liderazgo .pq-list h3 {
	font-size: clamp(21px, 2.2vw, 25px);
	line-height: 1.28;
	margin: 0 0 12px;
	max-width: 16ch;
}
#pg-liderazgo .pq-list p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--sec); max-width: 36ch; }

/* ---------- 1b · Distinción: el terreno y la persona ---------- */
#pg-liderazgo .dist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
#pg-liderazgo .dist-cell { padding: 6px clamp(24px, 4vw, 56px) 6px 0; }
#pg-liderazgo .dist-cell + .dist-cell {
	border-left: 1px solid var(--hair-d);
	padding: 6px 0 6px clamp(24px, 4vw, 56px);
}
#pg-liderazgo .dist-k {
	font: 500 11.5px/1.6 var(--mono);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--steel);
	margin: 0 0 12px;
}
#pg-liderazgo .dist-k a {
	color: var(--gold);
	text-decoration: none;
	border-bottom: 1px solid var(--gold-deep);
	padding-bottom: 2px;
	transition: color var(--t-fast), border-color var(--t-fast);
}
#pg-liderazgo .dist-k a:hover,
#pg-liderazgo .dist-k a:focus-visible { color: var(--txt-d); border-color: var(--txt-d); }
#pg-liderazgo .dist-t {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.15;
	color: var(--txt-d);
	margin: 0 0 8px;
}
#pg-liderazgo .dist-p { margin: 0; color: var(--txt-d-sec); font-size: 15.5px; line-height: 1.6; max-width: 38ch; }

@media (max-width: 640px) {
	#pg-liderazgo .dist-grid { grid-template-columns: 1fr; }
	#pg-liderazgo .dist-cell { padding: 0 0 22px; }
	#pg-liderazgo .dist-cell + .dist-cell { border-left: 0; border-top: 1px solid var(--hair-d); padding: 22px 0 0; }
}

/* ---------- 2 · El punto de partida: la máxima délfica ---------- */
#pg-liderazgo .partida .wrap { text-align: center; }
#pg-liderazgo .delfos { margin: 0 auto; padding: 0; max-width: 860px; }
#pg-liderazgo .delfos-max {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(40px, 7vw, 84px);
	line-height: 1.02;
	letter-spacing: -.012em;
	color: var(--navy);
	margin: 0 auto;
	max-width: 12ch;
	text-wrap: balance;
}
#pg-liderazgo .delfos-rule {
	width: 110px;
	height: 1px;
	border: 0;
	margin: 26px auto;
	background: linear-gradient(90deg, rgba(212, 175, 55, 0), var(--gold-deep), rgba(212, 175, 55, 0));
}
#pg-liderazgo .delfos-ext {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(20px, 2.6vw, 30px);
	line-height: 1.35;
	color: var(--gold-ink);
	margin: 0 auto;
	max-width: 26ch;
	text-wrap: balance;
}
#pg-liderazgo .delfos-attr {
	font: 400 11.5px/1.7 var(--mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sec);
	margin: 26px auto 0;
	max-width: 64ch;
}
#pg-liderazgo .delfos-attr i { font-style: normal; color: var(--gold-ink); }
#pg-liderazgo .delfos-txt { max-width: 60ch; margin: clamp(40px, 6vw, 64px) auto 0; }
#pg-liderazgo .delfos-txt p {
	font-family: var(--serif);
	font-size: clamp(18px, 1.9vw, 21px);
	line-height: 1.55;
	color: var(--tinta);
	margin: 0 auto 14px;
	text-wrap: balance;
}
#pg-liderazgo .delfos-txt p.delfos-nota {
	font: 400 13px/1.75 var(--mono);
	letter-spacing: .01em;
	color: var(--sec);
	max-width: 56ch;
	margin: 28px auto 0;
	padding-top: 20px;
	border-top: 1px solid var(--hair);
	text-wrap: pretty;
}

/* ---------- 3 · Tres mapas: tarjetas oscuras con ícono de trazo fino ---------- */
#pg-liderazgo .mapas-lead { max-width: 56ch; margin: 0; color: var(--txt-d-sec); }
#pg-liderazgo .mapas { margin-top: 40px; }
#pg-liderazgo .mapa { padding: 30px 28px 32px; display: flex; flex-direction: column; }
#pg-liderazgo .mapa .mic { width: 64px; height: 64px; margin: 0 0 24px; flex: none; }
#pg-liderazgo .mic path.punteada { stroke-dasharray: 2.5 3.5; stroke-dashoffset: 0; transition: none; }
#pg-liderazgo .mapa .num { margin: 0 0 10px; }
#pg-liderazgo .mapa h3 { margin: 0 0 12px; font-size: 23px; }
#pg-liderazgo .mapa p:last-child { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--txt-d-sec); }

/* ---------- 4 · Cómo trabajamos: cuatro pasos, formato, entregables ---------- */
#pg-liderazgo .pasos {
	list-style: none;
	margin: 38px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px 24px;
}
#pg-liderazgo .pasos li { border-top: 1px solid var(--tinta); padding-top: 18px; }
#pg-liderazgo .pasos .num { display: block; margin: 0 0 14px; }
#pg-liderazgo .pasos h3 { font-size: 20px; line-height: 1.25; margin: 0 0 10px; max-width: 18ch; }
#pg-liderazgo .pasos p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--sec); }

#pg-liderazgo .formato {
	list-style: none;
	margin: clamp(40px, 5vw, 56px) 0 0;
	padding: 18px 0;
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 0;
	font: 500 12px/1.7 var(--mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-ink);
}
#pg-liderazgo .formato li { display: inline-flex; align-items: baseline; }
#pg-liderazgo .formato li + li::before { content: "·"; color: var(--gold-deep); margin: 0 14px; }

#pg-liderazgo .entregables { margin-top: clamp(40px, 5vw, 56px); }
#pg-liderazgo .entregables .klabel { margin-bottom: 24px; }
#pg-liderazgo .ent-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
#pg-liderazgo .ent-list li { border-left: 2px solid var(--gold-deep); padding-left: 18px; }
#pg-liderazgo .ent-list h3 { font-size: 19px; line-height: 1.3; margin: 0 0 8px; }
#pg-liderazgo .ent-list p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--sec); }
#pg-liderazgo .puente {
	margin: 30px 0 0;
	font: 400 13px/1.7 var(--mono);
	letter-spacing: .04em;
	color: var(--sec);
	max-width: none;
}
#pg-liderazgo .puente a { color: var(--navy); font-weight: 500; }

@media (max-width: 900px) {
	#pg-liderazgo .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#pg-liderazgo .ent-list { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
	/* A una columna los títulos ya no necesitan medida corta: dos líneas, no tres. */
	#pg-liderazgo .pq-list h3,
	#pg-liderazgo .pasos h3 { max-width: none; }
	#pg-liderazgo .pasos { grid-template-columns: 1fr; gap: 20px; }
	#pg-liderazgo .formato { flex-direction: column; gap: 8px; }
	#pg-liderazgo .formato li { position: relative; padding-left: 18px; }
	#pg-liderazgo .formato li::before,
	#pg-liderazgo .formato li + li::before {
		content: "";
		position: absolute;
		left: 0;
		top: .6em;
		width: 6px;
		height: 6px;
		margin: 0;
		background: var(--gold-deep);
		transform: rotate(45deg);
	}
}

/* ---------- 5 · Competencias: seis, en dos filas de tres ---------- */
#pg-liderazgo .comp { list-style: none; margin: 34px 0 0; padding: 0; gap: 0 28px; }
#pg-liderazgo .comp li {
	position: relative;
	padding: 22px 0 26px 22px;
	border-top: 1px solid var(--hair);
}
#pg-liderazgo .comp li::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 32px;
	width: 7px;
	height: 7px;
	background: var(--gold-deep);
	transform: rotate(45deg);
}
#pg-liderazgo .comp h3 { font-size: 20px; line-height: 1.3; margin: 0 0 8px; }
#pg-liderazgo .comp p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--sec); max-width: 34ch; }

/* ---------- 6 · Quién lo conduce ---------- */
#pg-liderazgo .quien-grid { gap: clamp(32px, 5vw, 72px); align-items: start; }
#pg-liderazgo .quien-intro h2 { margin-bottom: 18px; }
#pg-liderazgo .quien-intro p:last-child { max-width: 34ch; color: var(--sec); margin: 0; }
#pg-liderazgo .ficha {
	border: 1px solid var(--hair);
	background: var(--blanco);
	padding: clamp(26px, 3.5vw, 40px);
	transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
#pg-liderazgo .ficha:hover { border-color: var(--navy); transform: translateY(-4px); box-shadow: var(--shadow); }
#pg-liderazgo .ficha .mgr {
	width: 58px;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(45deg);
	border: 1px solid var(--navy);
	margin: 6px 0 30px 6px;
}
#pg-liderazgo .ficha .mgr b {
	transform: rotate(-45deg);
	font: 500 13px/1 var(--mono);
	letter-spacing: .08em;
	color: var(--navy);
}
#pg-liderazgo .ficha:hover .mgr { border-color: var(--gold-deep); }
#pg-liderazgo .ficha:hover .mgr b { color: var(--gold-ink); }
#pg-liderazgo .ficha h3 { font-size: clamp(22px, 2.6vw, 27px); margin: 0; }
#pg-liderazgo .cargo {
	font: 500 12px/1.6 var(--mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-ink);
	margin: 8px 0 18px;
}
#pg-liderazgo .ficha p:not(.cargo) { font-size: 15.5px; line-height: 1.62; color: var(--sec); margin: 0 0 14px; max-width: 60ch; }
#pg-liderazgo .ficha .linkline,
#pg-liderazgo .respaldo .linkline { display: inline-block; color: var(--navy); font-size: 14px; margin-top: 6px; }
#pg-liderazgo .respaldo { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hair); }
#pg-liderazgo .respaldo .klabel { margin-bottom: 14px; }
#pg-liderazgo .respaldo h3 { font-size: 20px; margin: 0; }
#pg-liderazgo .respaldo .cargo { margin-bottom: 12px; }
#pg-liderazgo .respaldo p:not(.cargo) { font-size: 15px; line-height: 1.6; color: var(--sec); margin: 0 0 10px; max-width: 62ch; }

@media (max-width: 900px) {
	#pg-liderazgo .quien-grid { gap: 32px; }
	#pg-liderazgo .quien-intro p:last-child { max-width: 52ch; }
}

/* ---------- 7 · Cierre ---------- */
#pg-liderazgo .cierre { text-align: center; max-width: 760px; margin: 0 auto; }
#pg-liderazgo .cierre .gold-rule {
	max-width: 280px;
	margin: 0 auto 30px;
	background: linear-gradient(90deg, rgba(212, 175, 55, 0), var(--gold), rgba(212, 175, 55, 0));
}
#pg-liderazgo .cierre-t {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(26px, 3.6vw, 42px);
	line-height: 1.15;
	color: var(--txt-d);
	margin: 0 auto 30px;
	max-width: 22ch;
	text-wrap: balance;
}
#pg-liderazgo .cierre-mail {
	margin: 24px 0 0;
	font: 500 12px/1.6 var(--mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	max-width: none;
}
#pg-liderazgo .cierre-mail a {
	color: var(--txt-d-sec);
	text-decoration: none;
	border-bottom: 1px solid var(--hair-d);
	padding-bottom: 2px;
	transition: color var(--t-fast), border-color var(--t-fast);
}
#pg-liderazgo .cierre-mail a:hover,
#pg-liderazgo .cierre-mail a:focus-visible { color: var(--txt-d); border-color: var(--gold-deep); }

@media (prefers-reduced-motion: reduce) {
	#pg-liderazgo .ficha,
	#pg-liderazgo .dist-k a,
	#pg-liderazgo .cierre-mail a { transition: none; }
}