/* SLCPFYR 2026 — solo lo que theme.json no puede expresar. */

/* =========================================================================
   ANCHOS — borde único para header y secciones (subplan v4 §3.1): mismo
   margen lateral que el contenido de eafps.org (90px a 1440, 200px a 1920).
   ========================================================================= */
:root {
	--slcpfyr-borde: calc(max(50px, (100vw - 1600px) / 2) + 40px);
}
@media (max-width: 999px) {
	:root { --slcpfyr-borde: 6vw; }
}
.slcpfyr-seccion {
	padding-inline: var(--slcpfyr-borde);
}

/* Grid de 12 columnas: colapso responsive de columnSpan (WP grid layout no
   colapsa columnSpan solo con CSS media queries nativas).
   Subplan v5 §7.5: se quita `.wp-block-group.alignfull > .wp-block-group
   [style*="grid-template-columns"]` -- WordPress NUNCA emite esa propiedad
   como estilo inline (la pone en una clase generada `.wp-container-core-...`),
   asi que esa mitad del selector no habia casado nunca con nada; quien
   colapsaba de verdad era la otra mitad (`main .wp-block-group[class*=...]`),
   que se mantiene. */
@media (max-width: 781px) {
	.wp-block-group[style*="grid-column:span"] {
		grid-column: span 1 !important;
	}
	main .wp-block-group[class*="wp-block-group"] {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   HERO — panel medianoche redondeado, 3 columnas (texto · datos · video).
   Subplan v4 §3.2: el fondo facetado ahora es un ::before (nunca un div
   propio) -- un pseudo-elemento no puede ser hijo del grid del panel ni
   moverse en el editor, asi que no puede volver a empujar el video a la
   fila siguiente (la causa raiz del 4-sep: `.slcpfyr-hero__panel > *` con
   la misma especificidad que el antiguo `.slcpfyr-hero__facetas` ganaba por
   orden de fuente y lo convertia en celda real del grid).
   ========================================================================= */
.slcpfyr-hero__panel {
	position: relative;
	overflow: clip; /* nunca "hidden": rompería animation-timeline en los hijos */
	margin-inline: 3%;
	align-items: start; /* las 3 columnas no miden lo mismo (texto/datos/video):
	                       se alinean arriba, no se estiran entre si */
}
.slcpfyr-hero__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("../img/isotipo-blanco.svg");
	background-repeat: no-repeat;
	/* 4-sep, ajuste de David: quedaba demasiado pegada al borde derecho
	   (offset negativo = fuera del lienzo); se corre hacia el centro. */
	background-position: 8% 50%;
	background-size: min(70%, 640px) auto;
	opacity: .06;
}
.slcpfyr-hero__panel > * {
	position: relative;
	z-index: 1;
	min-width: 0;
}
.slcpfyr-hero__h1 {
	/* 48px fijo (decision de David, subplan v5): un fontSize numerico en el
	   bloque termina igual en un clamp() fluido pese a "fluid":false -- WP
	   no respeta ese flag en valores literales, solo en presets. Se fija
	   aqui, fuera del motor de estilos del bloque. */
	font-size: 48px !important;
	overflow: clip; /* mascara para la entrada por líneas (SplitText/idea-motion) */
}
.slcpfyr-hero__video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 16;
	max-height: min(80vh, 700px);
	object-fit: cover;
	border-radius: 18px;
	background: var(--wp--preset--color--midnight);
}
/* align-items:stretch (6-sep): sin esto el flex vertical usa el default de
   WordPress (cross-axis "left"/fit-content), asi que cada tarjeta tomaba el
   ancho de su propio texto -- "30 Sep - 3 Oct" mas ancha que "Cuenca" o
   "XXIII". Con stretch, las 4 quedan al ancho de la columna. */
.slcpfyr-hero__datos { gap: .75rem; align-items: stretch; }
.slcpfyr-dato { min-width: 0; }

/* Variante clara del hero (como en junio), solo para la comparación del
   Gate 3 bis (plan §8 / §5 #2): se activa añadiendo esta clase al panel al
   capturar, nunca queda activa en producción sin la decisión de David. */
.slcpfyr-hero__panel.slcpfyr-hero__panel--claro {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--midnight) !important;
}
.slcpfyr-hero__panel--claro .slcpfyr-hero__h1,
.slcpfyr-hero__panel--claro p { color: var(--wp--preset--color--midnight); }
.slcpfyr-hero__panel--claro .has-silver-color { color: var(--wp--preset--color--titanium) !important; }
.slcpfyr-hero__panel--claro::before { opacity: .04; }
.slcpfyr-hero__panel--claro .slcpfyr-dato {
	background: var(--wp--preset--color--paper) !important;
	color: var(--wp--preset--color--midnight) !important;
}

/* Tablet 782–1199px: 12 columnas dejarian el video en ~150-250px de ancho —
   se pasa a 2 columnas iguales, con el texto ocupando todo el ancho. El corte
   sube de 1023 a 1199 (unificado con el del header, subplan v5 §0.3): entre
   1025 y 1199 el problema era el mismo aunque menos extremo (a 1024 exactos
   el video caia a 159px de ancho — regresion detectada en la auditoria). */
@media (min-width: 782px) and (max-width: 1199px) {
	.slcpfyr-hero__panel { grid-template-columns: 1fr 1fr !important; }
	.slcpfyr-hero__texto { grid-column: span 2 !important; }
	.slcpfyr-hero__datos,
	.slcpfyr-hero__video { grid-column: span 1 !important; }
}

@media (max-width: 781px) {
	.slcpfyr-hero__panel {
		grid-template-columns: minmax(0, 1fr) !important;
		column-gap: 0 !important;
	}
	.slcpfyr-hero__texto,
	.slcpfyr-hero__datos,
	.slcpfyr-hero__video {
		grid-column: 1 / -1 !important;
	}
	.slcpfyr-hero__texto { order: 1; }
	.slcpfyr-hero__video { order: 2; }
	.slcpfyr-hero__datos {
		order: 3;
		flex-direction: row !important;
		flex-wrap: wrap;
	}
	.slcpfyr-hero__datos .slcpfyr-dato { flex: 1 1 calc(50% - .375rem); }
	.slcpfyr-hero__video video { width: auto; max-width: 100%; max-height: 70vh; margin-inline: auto; }
	.slcpfyr-hero__panel::before { background-position: center top -10%; opacity: .05; }
}

/* =========================================================================
   CABECERA — panel comun de las 5 plantillas interiores (subplan v6, C1;
   sustituye al .slcpfyr-cabecera de F4b, que ahora vive en un solo pattern
   PHP en vez de repetirse en cada plantilla). Comparte con el hero SOLO la
   idea de la marca de agua (regla ::before/::after con el isotipo, ver
   autocritica C1 del plan): nunca una clase de padding compartida, para que
   un cambio de padding en el hero no arrastre el de la cabecera ni viceversa.
   ========================================================================= */
.slcpfyr-cabecera__panel {
	position: relative;
	overflow: clip;
	margin-inline: 3%;
	border-radius: 18px;
	padding: 100px clamp(47px, 5.7vw, 82px);
}
.slcpfyr-cabecera__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("../img/isotipo-blanco.svg");
	background-repeat: no-repeat;
	/* 4-sep, ajuste de David: quedaba demasiado pegada al borde derecho
	   (offset negativo = fuera del lienzo); se corre hacia el centro,
	   misma correccion que en el hero de portada. */
	background-position: right 22% center;
	background-size: 320px auto;
	opacity: .06;
}
.slcpfyr-cabecera__panel > * { position: relative; z-index: 1; }
.slcpfyr-cabecera__h1 {
	text-transform: uppercase;
	font-size: 45px;
	overflow: clip; /* mascara para la entrada por lineas (is-im-reveal) */
	/* Sin esto el h1 hereda la regla global "h1,h2,...{color:midnight}" de
	   theme.json (asignacion directa al elemento, gana sobre la herencia del
	   panel oscuro aunque el grupo padre tenga textColor:base) y desaparece
	   sobre el fondo medianoche -- detectado en vivo en /historia/. */
	color: var(--wp--preset--color--base);
}
.slcpfyr-cabecera__eyebrow {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--silver);
	margin: 0 0 .5rem;
}
.slcpfyr-cabecera__regla {
	width: 80px;
	height: 2px;
	background: var(--wp--preset--color--marine-light);
	margin: 1.25rem 0;
}
.slcpfyr-cabecera__subtitulo {
	font-size: 34px;
	color: var(--wp--preset--color--silver);
	margin: 0;
}
@media (max-width: 999px) {
	.slcpfyr-cabecera__panel { padding: 70px clamp(32px, 6vw, 60px); }
	.slcpfyr-cabecera__h1 { font-size: 36px; }
	.slcpfyr-cabecera__subtitulo { font-size: 26px; }
}
@media (max-width: 599px) {
	.slcpfyr-cabecera__panel { padding: 40px 6vw; margin-inline: 0; border-radius: 0; }
	.slcpfyr-cabecera__h1 { font-size: 32px; }
	.slcpfyr-cabecera__subtitulo { font-size: 22px; }
}
.slcpfyr-cabecera__panel--evento .slcpfyr-cabecera__h1 { max-width: 800px; }
.slcpfyr-cabecera__evento-datos {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	align-items: center;
	margin-top: 1rem;
}

.slcpfyr-migas ol {
	display: flex;
	flex-wrap: wrap;
	gap: .35em;
	list-style: none;
	margin: 0 0 .75rem;
	padding: 0;
	font-size: 13px;
	color: var(--wp--preset--color--silver);
}
.slcpfyr-migas li:not(:last-child)::after { content: "/"; margin-left: .35em; opacity: .6; }
.slcpfyr-migas a { color: var(--wp--preset--color--silver); text-decoration: underline; }
.slcpfyr-migas a:hover { color: var(--wp--preset--color--base); }
.slcpfyr-migas li[aria-current="page"] { color: var(--wp--preset--color--base); }

/* =========================================================================
   FICHA DE EVENTO — bloque dinámico slcpfyr/evento-datos (subplan v6, C2):
   píldora/lugar en la cabecera --evento, columna aside pegajosa con filas
   rótulo/valor + botón en la ficha, e iconos utilitarios propios (pin,
   externo) que acompañan el texto sin ser del manual de marca.
   ========================================================================= */
.slcpfyr-evento-datos__pildora {
	display: inline-flex;
	align-items: center;
	padding: .35rem .9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--midnight);
	font-size: 13px;
	font-weight: 600;
}
.slcpfyr-evento-datos__lugar {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--wp--preset--color--silver);
	font-size: 15px;
}
.slcpfyr-icono-ui { flex-shrink: 0; vertical-align: middle; }

/* Ficha: columnas 320px | 1fr con la columna aside pegajosa bajo el header.
   overflow:visible explicito porque un overflow distinto en un ancestro
   rompe position:sticky (regla del §10 de la doctrina). */
.slcpfyr-ficha__aside {
	position: sticky;
	top: calc(var(--slcpfyr-header-h) + 24px);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 12px;
	padding: 28px;
	overflow: visible;
}
.slcpfyr-evento-datos__fila + .slcpfyr-evento-datos__fila { margin-top: 1.25rem; }
.slcpfyr-evento-datos__rotulo {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 11px;
	font-weight: 600;
	color: var(--wp--preset--color--titanium);
	margin: 0 0 .35rem;
}
.slcpfyr-evento-datos__valor { font-size: 15px; color: var(--wp--preset--color--midnight); }
.slcpfyr-evento-datos__valor a { color: var(--wp--preset--color--marine); }
.slcpfyr-evento-datos__pildora-plana {
	display: inline-block;
	padding: .2rem .7rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--silver);
	font-size: 13px;
}
.slcpfyr-evento-datos__fila .wp-block-buttons { margin-top: .5rem; }
.slcpfyr-ficha__banner { border-radius: 18px; }

@media (max-width: 999px) {
	.slcpfyr-ficha__aside { position: static; }
}

/* =========================================================================
   TARJETAS — banda "Próximo congreso" del archivo (subplan v6, C3). Flex
   propio (nunca el grid de core, doctrina §10): 3 columnas > 1199, 2 entre
   782-1199, 1 < 782. El post-template renderiza <ul>/<li> — el flex-basis
   va en el <li>, la tarjeta misma es el <div> hijo dentro de cada <li>.
   ========================================================================= */
.wp-block-post-template.slcpfyr-eventos--proximos {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.slcpfyr-eventos--proximos > li { flex: 1 1 calc(33.333% - 16px); min-width: 0; }
@media (max-width: 1199px) {
	.slcpfyr-eventos--proximos > li { flex: 1 1 calc(50% - 12px); }
}
@media (max-width: 781px) {
	.slcpfyr-eventos--proximos > li { flex: 1 1 100%; }
}
.slcpfyr-evento-tarjeta {
	position: relative;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: transform .2s ease, box-shadow .2s ease;
}
.slcpfyr-evento-tarjeta:hover,
.slcpfyr-evento-tarjeta:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgb(46 163 168 / .18);
}
.slcpfyr-evento-tarjeta .slcpfyr-evento-datos__pildora {
	position: absolute;
	top: 32px;
	right: 28px;
}
.slcpfyr-evento-tarjeta__titulo {
	margin: 2.5rem 0 .75rem;
	padding-right: 40px;
	font-size: 20px;
}
/* Enlace envolvente unico: el titulo (isLink) es el unico <a> de la
   tarjeta -- se estira sobre toda la tarjeta con un ::after, en vez de
   envolver la tarjeta entera en <a> (invalido: contendria otros bloques). */
.slcpfyr-evento-tarjeta__titulo a {
	color: inherit;
	text-decoration: none;
}
.slcpfyr-evento-tarjeta__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.slcpfyr-evento-tarjeta .slcpfyr-evento-datos__lugar { color: var(--wp--preset--color--silver); }
.slcpfyr-evento-tarjeta__flecha {
	position: absolute;
	bottom: 28px;
	right: 28px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(255 255 255 / .22);
	transition: background-color .2s ease, transform .2s ease;
}
.slcpfyr-evento-tarjeta:hover .slcpfyr-evento-tarjeta__flecha,
.slcpfyr-evento-tarjeta:focus-within .slcpfyr-evento-tarjeta__flecha {
	background: rgb(255 255 255 / .35);
	transform: translate(2px, -2px);
}

/* =========================================================================
   LÍNEA DE TIEMPO — banda "Congresos anteriores" del archivo (subplan v6,
   C3) Y linea-tiempo-historia.php de /historia/ (Bloque D): mismas clases,
   dos usos -- ahí es un <ul> de post-template (Query Loop), aquí un <ul>
   literal escrito a mano (patterns/linea-tiempo-historia.php). Por eso el
   selector del contenedor no exige "wp-block-post-template": solo el
   nombre de clase, que no colisiona con nada mas. Eje propio (no el de
   eafps: un solo trazo continuo del contenedor, no un tramo por hito) con
   alternancia por :nth-child del <li>. "is-im-reveal" va en cada hito (no
   en el contenedor): is-im-stagger ahi haria viajar el eje entero al entrar.
   ========================================================================= */
.slcpfyr-hitos {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}
.slcpfyr-hitos::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--wp--preset--color--silver);
	transform: translateX(-50%);
}
.slcpfyr-hito {
	position: relative;
	width: calc(50% - 45px);
	padding: 24px 0;
}
.slcpfyr-hito::before {
	content: "";
	position: absolute;
	top: 28px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wp--preset--color--marine);
}
.slcpfyr-hitos > li:nth-child(odd) .slcpfyr-hito::before { right: -51px; }
.slcpfyr-hitos > li:nth-child(even) .slcpfyr-hito { margin-left: calc(50% + 45px); }
.slcpfyr-hitos > li:nth-child(even) .slcpfyr-hito::before { left: -51px; }
.slcpfyr-hito .slcpfyr-evento-datos__anio {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--marine);
	margin-bottom: .35rem;
}
.slcpfyr-hito__titulo {
	font-size: 20px;
	font-weight: 600;
	color: var(--wp--preset--color--marine);
	margin: 0 0 .35rem;
}
.slcpfyr-hito .slcpfyr-evento-datos__lugar {
	display: block;
	color: var(--wp--preset--color--titanium);
	margin-bottom: .35rem;
}
.slcpfyr-hito .slcpfyr-evento-datos__pildora {
	background: none;
	padding: 0;
	color: var(--wp--preset--color--titanium);
	font-weight: 400;
}
/* Version literal (Bloque D, linea-tiempo-historia.php): año + fragmento
   verbatim del texto de Historia, sin post-title ni lugar (no hay CPT aqui). */
.slcpfyr-hito__anio {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--marine);
	margin-bottom: .35rem;
}
.slcpfyr-hito__texto {
	font-size: 16px;
	font-weight: 400;
	color: var(--wp--preset--color--titanium);
	margin: 0;
}
@media (max-width: 781px) {
	.slcpfyr-hitos::before { left: 6px; transform: none; }
	.slcpfyr-hito,
	.slcpfyr-hitos > li:nth-child(even) .slcpfyr-hito {
		width: 100%;
		margin-left: 0;
		padding-left: 40px;
	}
	.slcpfyr-hito::before,
	.slcpfyr-hitos > li:nth-child(odd) .slcpfyr-hito::before,
	.slcpfyr-hitos > li:nth-child(even) .slcpfyr-hito::before {
		left: 0;
		right: auto;
	}
}

/* =========================================================================
   INTRO — columnas 60/40 con imagen que sobresale (Bloque D: /historia/ y
   /quienes-somos/). Imagen radio 18; en escritorio ancho (>=1200) empieza
   245px mas arriba que el texto ("sobresale" sobre lo que viene antes,
   mismo lenguaje editorial que el resto del sitio); en tablet sin solape
   (el espacio ya es justo); en movil apilada (imagen debajo del texto).
   ========================================================================= */
.slcpfyr-intro { align-items: flex-start; }
.slcpfyr-intro__imagen img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
}
@media (min-width: 1200px) {
	.slcpfyr-intro__imagen { margin-top: -245px; }
}
@media (max-width: 781px) {
	.slcpfyr-intro.wp-block-columns { flex-direction: column; }
}

/* Ejes académicos: la seccion pasa al ancho de contenido (subplan v5 §4) --
   antes heredaba el contentSize global de 760px sin querer (regresion: al
   bajar ese valor de 720 a 760 los 5 cuadros quedaron en ~135px cada uno,
   de ahi lo achatado y el choque de textos). Breakpoints propios y
   autosuficientes (no dependen de la regla generica de colapso, que ademas
   nunca ha funcionado -- ver subplan v5 §7.5). */
.slcpfyr-ejes { gap: 24px; }
.slcpfyr-eje {
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* icono arriba, texto abajo (5-sep,
		reforzado 6-sep): el icono paso de 32 a 56 (xl del sistema) y aun se
		veia chico frente al tamano real de la tarjeta (~232x210) -- se lleva
		a 96px (fuera de la escala sm/md/lg/xl, a proposito) para aprovechar
		el cuadro; min-height es un piso, no un techo, asi que la tarjeta
		crece sola si el texto necesita mas espacio. */
	min-height: 210px;
}
.slcpfyr-eje p { overflow-wrap: break-word; }
.slcpfyr-titulo-centrado { text-align: center; }

/* Mismo problema que en los ejes (palabras sueltas como "Presidente" no
   caben en la columna estrecha y desbordan en vez de partirse): red de
   seguridad detectada al verificar, no reportada por David -- las tarjetas
   de Dirigencia nunca se migraron al sistema de anchos nuevo y su columna
   ya era angosta antes de esta sesion; el padding que unifico ahora para el
   hover (subplan v5 §6) redujo aun mas el espacio util y lo hizo visible. */
.slcpfyr-dirigencia-card p { overflow-wrap: break-word; }

/* Aplicacion vertical del logo (isotipo + nombre completo + linea de valores)
   para aprovechar el cuadro blanco de Dirigencia, que es alto y angosto -- el
   logo-color.svg que estaba antes es apaisado (521x211, casi 2.5:1) y dejaba
   mucho hueco vertical sin usar. Corrido un poco a la izquierda con padding
   asimetrico (mas relleno a la derecha), pedido de David 5-sep.

   Reforzado 6-sep (1a vuelta): isotipo a 130px + "Sociedad Latinoamericana"
   a secas dejaba mucho blanco arriba/abajo.

   Reforzado 6-sep (2a vuelta): seguia sobrando espacio vertical y el nombre
   iba todo en un mismo peso/color, sin respetar el manual de identidad --
   el logo oficial (logo-h-color.svg, colores extraidos del propio archivo)
   pinta "SOCIEDAD" en negrita y azul medianoche, "LATINOAMERICANA" SIN
   negrita en verde marino, y el resto del nombre mas chico y regular. Se
   replica esa jerarquia con 3 lineas reales (no una imagen) para poder
   centrarlas y apilarlas verticalmente, y el isotipo crece a un tope mucho
   mayor (400px) para llenar el alto real de la tarjeta. */
.slcpfyr-marca-vertical {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	padding: 2.5rem 3.25rem 2.5rem 1.75rem;
}
.slcpfyr-marca-vertical__isotipo {
	width: 84%;
	max-width: 400px;
	height: auto;
}
.slcpfyr-marca-vertical__nombre {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-transform: uppercase;
	max-width: 380px;
}
.slcpfyr-marca-vertical__linea1 {
	font-weight: 700;
	font-size: 32px;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--midnight);
}
.slcpfyr-marca-vertical__linea2 {
	font-weight: 400;
	font-size: 27px;
	line-height: 1.15;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--marine);
}
.slcpfyr-marca-vertical__linea3 {
	display: block;
	margin-top: 0.5rem;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--midnight);
}
.slcpfyr-marca-vertical__valores {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--marine);
}
@media (max-width: 599px) {
	.slcpfyr-marca-vertical { padding: 2rem 1.75rem; gap: 1.5rem; }
	.slcpfyr-marca-vertical__linea1 { font-size: 24px; }
	.slcpfyr-marca-vertical__linea2 { font-size: 20px; }
	.slcpfyr-marca-vertical__linea3 { font-size: 13px; }
	.slcpfyr-marca-vertical__valores { font-size: 12px; letter-spacing: 0.08em; }
}
@media (max-width: 599px) {
	.slcpfyr-ejes { grid-template-columns: 1fr !important; }
}
@media (min-width: 600px) and (max-width: 781px) {
	.slcpfyr-ejes { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 782px) and (max-width: 1199px) {
	.slcpfyr-ejes { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Presidentes (F4b): escala de grises → color al hover/foco */
.slcpfyr-presidente-foto img {
	filter: grayscale(1);
	transition: filter .3s ease;
}
.slcpfyr-presidente-card:is(:hover, :focus-within) .slcpfyr-presidente-foto img {
	filter: grayscale(0);
}
@media (prefers-reduced-motion: reduce) {
	.slcpfyr-presidente-foto img { filter: none; }
}

/* Botón con flecha que se dibuja al hover (banda CTA, patrón eafps.org) */
.slcpfyr-btn-flecha .wp-block-button__link {
	position: relative;
	padding-right: 2.6em;
}
.slcpfyr-btn-flecha .wp-block-button__link::after {
	content: "→";
	position: absolute;
	right: 1em;
	transition: transform .2s ease;
}
.slcpfyr-btn-flecha .wp-block-button__link:hover::after,
.slcpfyr-btn-flecha .wp-block-button__link:focus-visible::after {
	transform: translateX(4px);
}

/* Nota de fuente en fichas de sociedad */
.slcpfyr-fuente-nota {
	font-size: 12px;
	color: var(--wp--preset--color--titanium);
}

/* Enlaces subrayados siempre visibles (regla de marca §5) */
.wp-block-group :where(p, li) a:not(.wp-block-button__link) {
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* =========================================================================
   INTERACCION — catalogo de hover (subplan v5 §6). Medido en eafps.org;
   los valores de eafps rigen el hover, el kit propio (idea-motion) sigue
   rigiendo las animaciones de entrada (no se apagan para imitar la
   austeridad de eafps -- ver §6, "un dato que cambia una premisa").
   ========================================================================= */

/* --- Botones blancos sobre panel oscuro (hero y CTA de cierre): el
   `!important` es obligatorio, WordPress emite
   `.has-base-background-color { background-color: ... !important }` para
   todo boton con backgroundColor por atributo, y sin igualar esa
   especificidad el hover queda anulado (causa raiz medida: fondo y color
   identicos antes/despues del hover en "Quiero participar"). Acotado a
   las 2 propiedades de color, no a la regla entera.

   Corregido 5-sep: el hover SI cambiaba de color (verificado con
   getComputedStyle), pero era invisible igual -- causa distinta y mas
   de fondo. `theme.json` define el borde global del boton con
   width+radius+color pero nunca `border-style`, y sin border-style el
   navegador computa el borde en 0px pase lo que pase (initial value de
   border-style es "none": ancho y color quedan ahi sentados sin pintarse).
   Por eso el boton nunca tuvo borde, ni en reposo ni al hover -- al hacer
   hover con fondo transparente, quedaba SOLO el texto flotando sobre el
   panel oscuro, sin ninguna forma de "boton" que lo contuviera. */
.wp-block-button__link.has-base-background-color {
	border-style: solid;
	border-color: var(--wp--preset--color--base);
}
.wp-block-button__link.has-base-background-color:hover,
.wp-block-button__link.has-base-background-color:focus-visible {
	background-color: transparent !important;
	color: var(--wp--preset--color--base) !important;
	border-color: var(--wp--preset--color--base) !important;
}
@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link {
		transition: background-color .25s ease, color .25s ease, border-color .25s ease;
	}
}

/* --- Tarjetas de datos del hero: cuelgan de un contenedor is-im-stagger, que
   les impone `transform: none` al revelarse con el selector
   `html.im-js .is-im-stagger.is-visible > *` (especificidad 0,3,1). Una
   regla `.slcpfyr-dato:hover { transform }` normal (0,2,0) pierde siempre
   -- por eso el hover se escribe con el mismo prefijo, para ganar.

   Reforzado 6-sep: el -2px/sombra .18 era casi imperceptible sobre el panel
   oscuro (David: "el efecto es muy pequeño"). Se iguala y se supera un poco
   la elevacion de los ejes academicos (-4px / sombra .13) ya que estas
   tarjetas son claras sobre fondo oscuro y necesitan mas contraste para
   notarse: -6px + halo teal mas intenso. */
@media (hover: hover) {
	html.im-js .slcpfyr-hero__datos.is-im-stagger.is-visible > .slcpfyr-dato:hover {
		transform: translateY(-6px);
		box-shadow: 0 22px 36px rgb(46 163 168 / .35);
	}
}
@media (hover: none) {
	html.im-js .slcpfyr-hero__datos.is-im-stagger.is-visible > .slcpfyr-dato:active {
		transform: translateY(-6px);
		box-shadow: 0 22px 36px rgb(46 163 168 / .35);
	}
}
@media (prefers-reduced-motion: no-preference) {
	.slcpfyr-dato { transition: transform .25s ease, box-shadow .25s ease; }
}

/* --- Tarjetas con borde: ejes académicos y las de Consejo/Junta (dirigencia).
   Las de ejes tienen el mismo problema de especificidad que las del hero
   (contenedor is-im-stagger); las de dirigencia no llevan is-im-stagger, asi
   que su regla es la version simple. */
@media (hover: hover) {
	html.im-js .slcpfyr-ejes.is-im-stagger.is-visible > .slcpfyr-eje:hover,
	.slcpfyr-dirigencia-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 17px 25px rgb(0 0 0 / .13);
		border-color: var(--wp--preset--color--marine-light);
	}
}
@media (hover: none) {
	html.im-js .slcpfyr-ejes.is-im-stagger.is-visible > .slcpfyr-eje:active,
	.slcpfyr-dirigencia-card:active {
		transform: translateY(-4px);
		box-shadow: 0 17px 25px rgb(0 0 0 / .13);
		border-color: var(--wp--preset--color--marine-light);
	}
}
@media (prefers-reduced-motion: no-preference) {
	.slcpfyr-eje,
	.slcpfyr-dirigencia-card {
		transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
	}
}
@media (prefers-reduced-motion: reduce) {
	html.im-js .slcpfyr-ejes.is-im-stagger.is-visible > .slcpfyr-eje:hover,
	.slcpfyr-dirigencia-card:hover {
		border-color: var(--wp--preset--color--marine-light);
	}
}

/* Cuadricula de Dirigencia (Consejo/Junta): a 782-1199px quedaba en celdas
   de 84-156px con los textos chocando (subplan v5 §7.1) -- la unica regla
   de tablet que existia era solo para .slcpfyr-ejes, esta cuadricula se
   quedaba sin nadie que la colapsara entre 782 y 1024px. */
@media (min-width: 782px) and (max-width: 1199px) {
	.slcpfyr-dirigencia-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 600px) and (max-width: 781px) {
	.slcpfyr-dirigencia-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* --- Imagenes grandes con zoom sutil al hover (profesores, banner del CTA) */
.slcpfyr-img-hover,
.slcpfyr-img-zoom {
	overflow: clip;
	display: block;
}
.slcpfyr-img-hover img,
.slcpfyr-img-zoom img {
	display: block;
	width: 100%;
	height: auto;
}
@media (hover: hover) {
	.slcpfyr-img-hover:hover img,
	.slcpfyr-img-zoom:hover img { transform: scale(1.03); }
}
@media (hover: none) {
	.slcpfyr-img-hover:active img,
	.slcpfyr-img-zoom:active img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: no-preference) {
	.slcpfyr-img-hover img,
	.slcpfyr-img-zoom img { transition: transform .4s ease; }
}

/* --- Lightbox de la foto de profesores (4-sep, 2a vuelta): <dialog>
   nativo, sin libreria, con zoom y desplazamiento PROPIOS (botones +/-,
   rueda, clic/toque sobre la imagen que siempre amplia, pellizco+arrastre
   tactil -- ver slcpfyr.js).
   `.slcpfyr-lightbox__lienzo` SI lleva `touch-action: none`: con zoom
   propio, dejar el pinch nativo del navegador activo a la vez competiria
   con el zoom propio y ampliaria la pagina entera (con la barra del
   navegador y todo) en vez de solo la imagen -- ver profesores.php para
   el porque completo. */
.slcpfyr-lightbox-trigger {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: inherit;
	position: relative;
	cursor: zoom-in;
}
.slcpfyr-lightbox-trigger__pista {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .5rem .9rem;
	border-radius: 999px;
	background: rgb(17 29 48 / .72);
	color: var(--wp--preset--color--base);
	font-size: 13px;
	font-weight: 600;
}
.slcpfyr-lightbox {
	position: fixed;
	inset: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	max-width: 100vw;
	max-height: 100vh;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
}
.slcpfyr-lightbox[open] {
	display: flex;
}
.slcpfyr-lightbox::backdrop {
	background: rgb(9 15 26 / .94);
}
.slcpfyr-lightbox__lienzo {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: none;
}
.slcpfyr-lightbox__img {
	display: block;
	max-width: min(96vw, 1600px);
	max-height: 92vh;
	width: auto;
	height: auto;
	border-radius: 12px;
	transform-origin: center center;
	transition: transform .2s ease;
	cursor: zoom-in;
}
.slcpfyr-lightbox__img.is-arrastrando {
	transition: none;
}
/* Boton de cerrar (4-sep, correccion de David): antes era blanco al 14 %
   con una X de trazo fino, y sobre las zonas blancas de la foto ampliada
   desaparecia por completo. Ahora lleva la misma pildora medianoche al 72 %
   que los botones +/- (que si se distinguen sobre la foto), un filete
   blanco tenue para recortarse tambien sobre el fondo oscuro del lightbox,
   sombra, 52 px y la X mas gruesa (trazo 3, en profesores.php). */
.slcpfyr-lightbox__cerrar {
	position: fixed;
	top: max(1rem, env(safe-area-inset-top));
	right: max(1rem, env(safe-area-inset-right));
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgb(255 255 255 / .28);
	background: rgb(17 29 48 / .72);
	box-shadow: 0 4px 14px rgb(0 0 0 / .35);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	z-index: 1;
}
.slcpfyr-lightbox__cerrar:hover,
.slcpfyr-lightbox__cerrar:focus-visible { background: rgb(17 29 48 / .92); }
.slcpfyr-lightbox__controles {
	position: fixed;
	left: 50%;
	bottom: max(1.25rem, env(safe-area-inset-bottom));
	transform: translateX(-50%);
	display: flex;
	gap: .5rem;
	padding: .4rem;
	border-radius: 999px;
	background: rgb(17 29 48 / .72);
	z-index: 1;
}
.slcpfyr-lightbox__zoom {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: none;
	background: rgb(255 255 255 / .14);
	color: var(--wp--preset--color--base);
	cursor: pointer;
}
.slcpfyr-lightbox__zoom:hover,
.slcpfyr-lightbox__zoom:focus-visible { background: rgb(255 255 255 / .26); }
@media (max-width: 599px) {
	.slcpfyr-lightbox-trigger__pista { font-size: 12px; padding: .4rem .75rem; right: .75rem; bottom: .75rem; }
}

/* El movimiento (reveal, facetas, dibujo, contadores, gradientes, parallax)
   lo aporta el mu-plugin idea-motion — ver F3b del plan de corrección. Este
   tema solo marca elementos con clases is-im-*, nunca con reglas propias
   (evita la duplicación/conflicto que tenía la v1: opacity:0 sin guarda). */

/* =========================================================================
   HEADER — UNA sola línea blanca, copia de eafps.org (subplan v4 §3.4).
   Medidas tomadas con Playwright sobre eafps.org el 4-sep: header 110 px
   (logo 70 + 20 + 20), borde lateral 40 px, menú 14/20 px centrado respecto
   al ancho TOTAL, hover = píldora de fondo (sin subrayado ni cambio de
   color), botones a la derecha; en móvil (390) header 64 px, borde 24 px,
   logo 40 px. Solo cambian los colores (paleta del manual) y Montserrat.
   ========================================================================= */

:root {
	--slcpfyr-header-h: 110px;
	--slcpfyr-logo-h: 70px;
	--slcpfyr-header-borde: 40px;
	/* Verde marino al 8 % sobre blanco: tinte de la píldora de hover.
	   Valor literal, no color-mix(), para no depender del soporte. */
	--slcpfyr-tinte: #eef5f5;
}
@media (min-width: 1501px) { :root { --slcpfyr-header-borde: 50px; } }
@media (min-width: 1601px) { :root { --slcpfyr-header-borde: 70px; } }

/* Header encogido al bajar (eafps: scrollY >= 40 → 86 px, logo 64). */
html.slcpfyr-small-nav {
	--slcpfyr-header-h: 86px;
	--slcpfyr-logo-h: 64px;
}

@media (max-width: 1199px) {
	:root { --slcpfyr-header-h: 96px; --slcpfyr-logo-h: 56px; }
	html.slcpfyr-small-nav { --slcpfyr-header-h: 86px; --slcpfyr-logo-h: 52px; }
}
@media (max-width: 999px) {
	:root {
		--slcpfyr-header-h: 64px;
		--slcpfyr-logo-h: 40px;
		--slcpfyr-header-borde: 24px;
	}
	html.slcpfyr-small-nav { --slcpfyr-header-h: 64px; --slcpfyr-logo-h: 40px; }
}

html {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--slcpfyr-header-h) + 16px);
}

/* Se fija el wrapper de primer nivel (no un grupo interior). `inset-inline: 0`
   es obligatorio: un fixed sin left/right se encoge al ancho del contenido. */
.wp-site-blocks > header.wp-block-template-part {
	position: fixed;
	inset-inline: 0;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 9999;
}
/* Hueco bajo el header. El `blockGap` global añade margen al <main> porque el
   header, aunque fixed, sigue siendo el :first-child exento — se anula. */
.wp-site-blocks { padding-top: var(--slcpfyr-header-h); }
.wp-site-blocks > main { margin-block-start: 0; }

/* Grid de 3 columnas: las cajas laterales son iguales cuando hay sitio (menú
   centrado respecto al ancho total, como eafps) y la más ancha crece sin
   desbordar cuando falta (un `flex: 1 1 0` desbordaba bajo ~1400 px porque la
   caja derecha —Acceder + lupa + carrito + píldora ≈ 380 px— es mucho más
   ancha que el logo). Prohibido transform/filter/backdrop-filter aquí:
   romperían el overlay fixed del menú móvil. */
.slcpfyr-header {
	display: grid;
	grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
	align-items: center;
	height: var(--slcpfyr-header-h);
	padding-inline: var(--slcpfyr-header-borde);
	background: var(--wp--preset--color--base);
	position: relative;
}
@media (prefers-reduced-motion: no-preference) {
	.slcpfyr-header { transition: height .32s ease; }
}

.slcpfyr-header__logo {
	display: block;
	justify-self: start;
	line-height: 0;
}
.slcpfyr-header__logo img {
	display: block;
	height: var(--slcpfyr-logo-h);
	width: auto;
}
@media (prefers-reduced-motion: no-preference) {
	.slcpfyr-header__logo img { transition: height .32s ease; }
}

/* ---------- Menú central ---------- */
.slcpfyr-header__menu { justify-self: center; }
.slcpfyr-header__menu .wp-block-navigation__container { flex-wrap: nowrap; }

.slcpfyr-header .slcpfyr-header__menu .wp-block-navigation-item__content {
	position: relative;
	isolation: isolate;
	color: var(--wp--preset--color--marine);
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}
/* Píldora de hover sobre el propio <a>: el home-link no genera __label y el
   chevrón de "Nosotros" es un <button> hermano fuera del <a>. */
.slcpfyr-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	inset: -8px -14px;
	border-radius: 50px;
	background: var(--slcpfyr-tinte);
	opacity: 0;
	z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
	.slcpfyr-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
		transition: opacity .25s ease;
	}
}
.slcpfyr-header .wp-block-navigation__container > .wp-block-navigation-item:is(:hover, :focus-within) > .wp-block-navigation-item__content::before,
.slcpfyr-header .wp-block-navigation__container > .wp-block-navigation-item:is(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content::before {
	opacity: 1;
}
.slcpfyr-header__menu .wp-block-navigation__submenu-icon {
	width: .7em;
	height: .7em;
	color: var(--wp--preset--color--marine);
}
.slcpfyr-header :is(a, button):focus-visible {
	outline: 2px solid var(--wp--preset--color--marine-light);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ---------- Desplegable "Nosotros" ---------- */
@media (min-width: 1200px) {
	.slcpfyr-header .wp-block-navigation__container > .wp-block-navigation-item {
		height: var(--slcpfyr-header-h);
		display: flex;
		align-items: center;
	}
	.slcpfyr-header .slcpfyr-header__menu .has-child .wp-block-navigation__submenu-container {
		width: 360px;
		min-width: 360px;
		height: auto;
		overflow: visible;
		top: 100%;
		margin-top: -25px;
		left: 0;
		padding: 20px;
		border: 1px solid var(--slcpfyr-tinte);
		border-radius: 15px;
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--midnight);
		box-shadow: none;
		opacity: 0;
		visibility: hidden;
	}
	.slcpfyr-header .slcpfyr-header__menu .has-child:is(:hover, :focus-within) > .wp-block-navigation__submenu-container,
	.slcpfyr-header .slcpfyr-header__menu .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		opacity: 1;
		visibility: visible;
		width: 360px;
		min-width: 360px;
	}
	.slcpfyr-header .slcpfyr-header__menu .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-bottom: 1px solid var(--wp--preset--color--hairline);
	}
	.slcpfyr-header .slcpfyr-header__menu .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
		border-bottom: 0;
	}
	.slcpfyr-header .slcpfyr-header__menu .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		padding: 10px 0;
		min-height: 45px;
		font-size: 14px;
		line-height: 24px;
		color: var(--wp--preset--color--midnight);
		transform: translateY(13px);
	}
	.slcpfyr-header .slcpfyr-header__menu .has-child:is(:hover, :focus-within) > .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
	.slcpfyr-header .slcpfyr-header__menu .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		transform: translateY(0);
	}
	.slcpfyr-header .slcpfyr-header__menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
		content: none; /* el desplegable no lleva píldora, solo cambio de color */
	}
	.slcpfyr-header .slcpfyr-header__menu .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) {
		color: var(--wp--preset--color--marine-light);
		background: transparent;
	}
	@media (prefers-reduced-motion: no-preference) {
		/* Entrada .65s como eafps; salida con 400 ms de gracia, sin JS. */
		.slcpfyr-header .slcpfyr-header__menu .has-child .wp-block-navigation__submenu-container {
			transition: opacity .2s ease, visibility 0s linear .4s;
		}
		.slcpfyr-header .slcpfyr-header__menu .has-child:is(:hover, :focus-within) > .wp-block-navigation__submenu-container,
		.slcpfyr-header__menu .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
			transition: opacity .65s cubic-bezier(.2,.8,.25,1), visibility 0s linear 0s;
		}
		.slcpfyr-header .slcpfyr-header__menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
			transition: color .2s ease, transform .65s cubic-bezier(.2,.8,.25,1);
		}
	}
}

/* ---------- Grupo de acciones (derecha) ---------- */
.slcpfyr-header__acciones {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 0;
	flex-wrap: nowrap;
}

/* Especificidad extra (.slcpfyr-header ... > *) necesaria: WordPress inyecta
   `.is-layout-flex > :is(*, div) { margin: 0 }` para todo layout:flex, que
   pisa un `margin` puesto solo en la propia clase (medido: computaba 0/0px
   pese a que la regla aparecia en la cascada). */
.slcpfyr-header .slcpfyr-header__acciones > * {
	margin: 0 14px;
}
.slcpfyr-header__acceder {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--marine);
	font: 500 14px/20px var(--wp--preset--font-family--montserrat);
	cursor: default;
}
.slcpfyr-header__acceder svg { color: var(--wp--preset--color--marine-light); }
.slcpfyr-header__acceder em {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	font-style: normal;
	font-size: 11px;
	line-height: 1;
	color: var(--wp--preset--color--titanium);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
}
.slcpfyr-header__acceder:is(:hover, :focus-visible) em { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
	.slcpfyr-header__acceder em { transition: opacity .2s ease; }
}

.slcpfyr-header .slcpfyr-header__acciones > .slcpfyr-header__carrito {
	margin-right: 0;
}
.slcpfyr-header__carrito {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--marine-light);
	line-height: 0;
}
.slcpfyr-header__carrito:is(:hover, :focus-visible) { color: var(--wp--preset--color--marine); }
@media (prefers-reduced-motion: no-preference) {
	.slcpfyr-header__carrito { transition: color .25s ease; }
}

/* Píldora "Contacto": relleno → contorno al hover (patrón de eafps). */
.slcpfyr-header .slcpfyr-header__acciones > .slcpfyr-header__cta {
	margin-left: 25px;
	margin-right: 0;
}
.slcpfyr-header__cta {
	display: inline-flex;
	align-items: center;
	padding: 14px 20px;
	border: 1px solid var(--wp--preset--color--marine);
	border-radius: 50px;
	background: var(--wp--preset--color--marine);
	color: var(--wp--preset--color--base);
	font: 600 13px/1 var(--wp--preset--font-family--montserrat);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
.slcpfyr-header__cta:is(:hover, :focus-visible) {
	background: transparent;
	color: var(--wp--preset--color--marine);
}
@media (prefers-reduced-motion: no-preference) {
	.slcpfyr-header__cta { transition: background .25s ease, color .25s ease; }
}
@media (max-width: 1400px) {
	.slcpfyr-header .slcpfyr-header__acciones > .slcpfyr-header__cta { margin-left: 18px; }
}
@media (max-width: 1300px) {
	.slcpfyr-header .slcpfyr-header__acciones > .slcpfyr-header__cta { margin-left: 12px; }
	.slcpfyr-header__cta { padding: 14px 16px; }
}

/* Buscador: solo icono, se expande al enfocar */
.slcpfyr-header__buscar .wp-block-search__button {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--marine);
	padding: 0;
	min-width: 0;
}
.slcpfyr-header__buscar .wp-block-search__input {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--midnight);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 50px;
	width: 0;
	padding: 0;
	opacity: 0;
	transition: width .25s ease, opacity .2s ease, padding .25s ease;
}
.slcpfyr-header__buscar:focus-within .wp-block-search__input {
	width: 180px;
	opacity: 1;
	padding: .4em .9em;
}

/* Objetivos tactiles >= 44x44 (subplan v5 §7.4): el area de toque crece por
   fuera del dibujo del icono, sin agrandarlo. */
.slcpfyr-header__acceder,
.slcpfyr-header__carrito {
	min-height: 44px;
	min-width: 44px;
	justify-content: center;
}
.slcpfyr-header__buscar .wp-block-search__button {
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.slcpfyr-enlace-toque {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ---------- Tablet: hamburguesa desde 1199 px (no caben menú + botones) --- */
@media (min-width: 600px) and (max-width: 1199px) {
	.slcpfyr-header__menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.slcpfyr-header__menu .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
		display: flex;
	}
	/* La hamburguesa aparece desde 1199px pero el padding que la lleva a
	   44x44 solo estaba declarado <=999px (subplan v5 §7.4: quedaba en
	   24x24 entre 1000 y 1199). */
	.slcpfyr-header__menu .wp-block-navigation__responsive-container-open {
		padding: 10px;
	}
	.slcpfyr-header__cta { display: none; }
	.slcpfyr-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.slcpfyr-header__logo { order: 1; }
	.slcpfyr-header__acciones { order: 2; margin-left: auto; }
	.slcpfyr-header__menu { order: 3; }
}

/* ---------- Móvil ---------- */
@media (max-width: 999px) {
	.slcpfyr-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.slcpfyr-header__logo { order: 1; }
	.slcpfyr-header__acciones { order: 2; margin-left: auto; }
	.slcpfyr-header__menu { order: 3; }
	.slcpfyr-header__cta { display: none; }
	.slcpfyr-header__acceder span,
	.slcpfyr-header__acceder em { display: none; }
	.slcpfyr-header__acceder,
	.slcpfyr-header__carrito,
	.slcpfyr-header__buscar { margin: 0 6px; }
	.slcpfyr-header__menu .wp-block-navigation__responsive-container-open { padding: 10px; }
}

/* Overlay del menú (blanco, como eafps) — los colores los fija el bloque por
   atributos (overlayBackgroundColor/overlayTextColor) para que el núcleo no
   gane en especificidad; aquí solo tamaños y movimiento. */
.slcpfyr-header__menu .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	min-height: 48px;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--midnight);
	position: relative;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
	content: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 8px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--marine-light);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:is(:hover, :focus-visible)::after {
	transform: scaleX(1);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 15px;
	min-height: 44px;
	opacity: .85;
}
/* Botón de cierre: círculo verde marino con X blanca */
.slcpfyr-header__menu .wp-block-navigation__responsive-container-close {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wp--preset--color--marine);
	color: var(--wp--preset--color--base);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
		transition: transform .37s cubic-bezier(.52,.01,.16,1);
	}
	.slcpfyr-header__menu .wp-block-navigation__responsive-container-close {
		animation: slcpfyr-pop .45s cubic-bezier(.22,1,.36,1) both;
	}
	@keyframes slcpfyr-pop {
		from { scale: 0; }
	}
}

/* =========================================================================
   FOOTER — logo blanco + línea de valores del manual + columnas literales
   (F5). Subrayado que crece en los enlaces (único movimiento del footer).
   ========================================================================= */
.slcpfyr-footer__valores {
	margin-top: 1rem;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--silver);
}
.slcpfyr-footer__valores span { color: var(--wp--preset--color--marine-light); }
.slcpfyr-footer__enlaces,
.slcpfyr-footer__contacto,
.slcpfyr-footer__eventos {
	color: var(--wp--preset--color--silver);
}
.slcpfyr-footer__enlaces { list-style: none; margin: 0; padding: 0; }
.slcpfyr-footer__enlaces li { margin: 0; }
.slcpfyr-footer__enlaces a,
.slcpfyr-footer__eventos a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--base);
	text-decoration: none;
}
.slcpfyr-footer__enlaces a::after,
.slcpfyr-footer__eventos a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 200ms var(--im-ease, cubic-bezier(.22,1,.36,1));
}
.slcpfyr-footer__enlaces a:hover::after,
.slcpfyr-footer__enlaces a:focus-visible::after,
.slcpfyr-footer__eventos a:hover::after,
.slcpfyr-footer__eventos a:focus-visible::after { transform: scaleX(1); }
.slcpfyr-footer__contacto a { color: var(--wp--preset--color--base); }
.slcpfyr-footer__barra { color: var(--wp--preset--color--silver); }
.slcpfyr-footer__barra a { color: inherit; }
@media (max-width: 600px) {
	.slcpfyr-footer__columnas { flex-wrap: wrap; }
	.slcpfyr-footer__columnas > .wp-block-column { flex-basis: 100% !important; }
}

/* ---------------------------------------------------------------------
 * § RETRATOS — página /dirigencia/ (Bloque E, 5-sep-2026). Lenguaje
 * "Executive Board" de eafps.org: panel oscuro, tarjeta cover con degradado
 * propio (nunca el overlay nativo de core/cover: necesitamos hover a .8).
 * ------------------------------------------------------------------- */
.slcpfyr-retratos-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
}
@media (min-width: 782px) and (max-width: 1199px) {
	.slcpfyr-retratos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 781px) {
	.slcpfyr-retratos-grid { grid-template-columns: 1fr; }
}

.slcpfyr-retrato {
	position: relative;
	border-radius: 18px;
	overflow: clip;
	min-height: 482px;
	display: flex;
	align-items: flex-end;
	max-width: 375px;
	margin-inline: auto;
}
@media (max-width: 1199px) { .slcpfyr-retrato { min-height: 420px; } }
@media (max-width: 599px) { .slcpfyr-retrato { min-height: 380px; } }

.slcpfyr-retrato__foto {
	position: absolute;
	inset: 0;
}
.slcpfyr-retrato__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Corrección 5-sep (5a ronda): la 4a ronda protegía la cara pero el salto
	   0 -> .92 en solo 15 puntos se veía como una línea dura, no como un
	   degradado. Ahora el tramo 0-48% sigue totalmente transparente (cara y
	   fondo intactos), pero la subida a partir de ahí es larga y con varios
	   pasos (48 a 100%) para que se note el degradado clásico de abajo hacia
	   arriba. Color cambiado de "midnight" (azul) a "marine" (verde marca,
	   #0c6168) -- el azul se perdía contra el panel oscuro de fondo. */
	background: linear-gradient(180deg,
		rgb(12 97 104 / 0) 0%,
		rgb(12 97 104 / 0) 48%,
		rgb(12 97 104 / .22) 62%,
		rgb(12 97 104 / .52) 76%,
		rgb(12 97 104 / .8) 90%,
		rgb(12 97 104 / .95) 100%);
}
.slcpfyr-retrato__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transform: scale(1);
	transition: transform 500ms var(--im-ease, cubic-bezier(.22,1,.36,1));
}
/* Reposo = foto normal; el over solo acerca la foto (sobrio, sin oscurecer
   más: el degradado ya deja el texto legible desde el reposo). */
.slcpfyr-retrato:is(:hover, :focus-within) .slcpfyr-retrato__img {
	transform: scale(1.08);
}
.slcpfyr-retrato__foto--sin-foto {
	background: var(--wp--preset--color--midnight);
	border: 1px solid var(--wp--preset--color--silver);
	display: flex;
	align-items: center;
	justify-content: center;
}
.slcpfyr-retrato__foto--sin-foto img { opacity: .35; }

.slcpfyr-retrato__texto {
	position: relative;
	z-index: 1;
	padding: 24px;
	transition: transform 300ms var(--im-ease, cubic-bezier(.22,1,.36,1));
}
.slcpfyr-retrato:is(:hover, :focus-within) .slcpfyr-retrato__texto {
	transform: translateY(-5px);
}
.slcpfyr-retrato__nombre {
	font-weight: 600;
	font-size: 26px;
	color: var(--wp--preset--color--base);
	margin: 0;
}
.slcpfyr-retrato__cargo {
	font-weight: 700;
	font-size: 19px;
	color: var(--wp--preset--color--base);
	margin: 0 0 4px;
	min-height: 26px;
}
.slcpfyr-retrato__pais {
	font-weight: 700;
	font-size: 15px;
	color: var(--wp--preset--color--base);
	margin: 4px 0 0;
}

.slcpfyr-retrato--destacado {
	max-width: none;
	min-height: 420px;
	display: grid;
	grid-template-columns: 320px 1fr;
	align-items: stretch;
	gap: 0;
}
.slcpfyr-retrato--destacado .slcpfyr-retrato__foto {
	position: static;
	border-radius: 18px;
	overflow: clip;
}
.slcpfyr-retrato--destacado .slcpfyr-retrato__texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 32px 48px;
	transform: none;
}
.slcpfyr-retrato__cargo--destacado {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--marine-light);
}
.slcpfyr-retrato__nombre--destacado {
	font-size: 34px;
}
@media (max-width: 781px) {
	.slcpfyr-retrato--destacado {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.slcpfyr-retrato--destacado .slcpfyr-retrato__foto {
		min-height: 320px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.slcpfyr-retrato__foto::after,
	.slcpfyr-retrato__texto,
	.slcpfyr-retrato__img { transition: none; }
	.slcpfyr-retrato:is(:hover, :focus-within) .slcpfyr-retrato__img { transform: none; }
}