/*
Theme Name: CEPROME Latinoamérica
Theme URI: https://ceprome.com
Author: CEPROME
Description: Theme clásico a la medida de CEPROME Latinoamérica. Presentación pura — toda la estructura de datos vive en el plugin ceprome-core.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: ceprome
*/

/* ==========================================================================
   Tipografía — Duplet, única familia en todo el sitio
   ========================================================================== */

@font-face {
	font-family: 'Duplet';
	src: url('assets/fonts/Duplet-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Duplet';
	src: url('assets/fonts/Duplet-SemiBold.otf') format('opentype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Duplet';
	src: url('assets/fonts/Duplet-ExtraBold.otf') format('opentype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Variables — paleta CEPROME + modo claro/oscuro
   ========================================================================== */

:root {
	/* Marca — hilo constante en todo el sitio */
	--ceprome-guinda: #A22944;
	--ceprome-guinda-hover: #7C1F35;
	--ceprome-navy: #0E1B29;
	--ceprome-navy-elevated: #16283B;
	--ceprome-navy-border: #3A4A5C;
	--ceprome-gold: #C8A96E;
	--ceprome-dorado: #CD8D11;
	--ceprome-ink: #221F1D;

	/* Radio único de cajas, campos, tarjetas y pastillas */
	--ceprome-radius: 2px;

	/* Radio de todos los botones (.ceprome-button y sus variantes, los
	   botones del mega menú, del popup del mapa y los montos de Donar):
	   píldora. Las pastillas de filtro (.ceprome-pill) no lo usan. */
	--ceprome-radius-boton: 20px;

	/* Tipografía */
	--ceprome-font: 'Duplet', ui-sans-serif, system-ui, sans-serif;

	/* Espaciado fluido: crece de móvil a escritorio sin puntos de quiebre extra */
	--ceprome-gutter: clamp(20px, 6vw, 96px);
	--ceprome-section-padding: clamp(48px, 9vw, 100px);
	--ceprome-max-width: 1248px;

	/* Ancho máximo de una sola columna de texto editorial (cuerpo de
	   artículo/página, no toda la página) — un solo valor compartido en
	   vez de repetirlo a mano por plantilla (760px, 640px... cada quien
	   el suyo), para que "ensanchar el texto" sea cambiar un número una
	   vez, no perseguirlo archivo por archivo. Más generoso que una
	   medida de lectura "ideal" (65-75 caracteres) a propósito — decisión
	   consciente de Ric, nunca 100% del viewport. No aplica a layouts de
	   dos columnas con aside real (single-programa-academico.php,
	   single-webinar.php: el ancho ahí lo define el grid, no este valor)
	   ni a single-persona.php (bio junto a foto de ancho fijo, no un
	   artículo de ancho completo). */
	--ceprome-content-width: 1200px;

	/* Semántico — modo claro (por defecto) */
	--c-bg: #F7F6F2;
	--c-bg-elevated: #FFFFFF;
	--c-text: #221F1D;
	--c-text-muted: #585857;
	--c-text-subtle: #8A8781;
	--c-border: #E7E4DD;
	--c-link: var(--ceprome-guinda);
	--c-link-hover: var(--ceprome-guinda-hover);
	--c-on-guinda: #F3D4DC;
	--c-on-navy-muted: #D9D9D9;

	/* Tinte guinda claro (404) — se recalcula solo: como referencia otras
	   variables de color en vez de un valor fijo, se ajusta sola cuando
	   --c-bg-elevated cambia de modo claro a oscuro más abajo. */
	--c-guinda-tint: color-mix(in srgb, var(--ceprome-guinda) 42%, var(--c-bg-elevated) 58%);

	/* Panel guinda de fondo (Contacto: directorio directo) — mezcla más
	   suave que --c-guinda-tint, pensada para un área grande de texto
	   encima, no para un numeral decorativo. */
	--c-guinda-panel: color-mix(in srgb, var(--ceprome-guinda) 16%, var(--c-bg-elevated) 84%);

	/* Franja de fondo gris claro (Consejo Latinoamericano: cita + intro +
	   mapa) — mezcla con el propio texto en vez de un gris fijo, así se
	   ajusta sola entre claro/oscuro (un paso más oscuro que --c-bg en
	   claro, un paso más claro que --c-bg en oscuro). */
	--c-band-bg: color-mix(in srgb, var(--c-text) 6%, var(--c-bg));

	/* Tintes guinda de Gestión Institucional (cadena de resultados,
	   franjas de Metodología, Nuestro enfoque y Los ocho estándares, aviso
	   de los formularios de servicio). En claro, los valores exactos del diseño;
	   en oscuro se derivan del fondo elevado para no encender bloques
	   claros sobre una página oscura. --c-guinda-profunda es el guinda
	   oscuro usado como texto o línea sobre esos tintes. */
	--c-guinda-suave: #F1E1E5;
	--c-guinda-media: #E2BDC6;
	--c-guinda-profunda: var(--ceprome-guinda-hover);

	/* Línea fina entre celdas de una cuadrícula sin tarjetas (páginas de
	   servicio): un paso más marcada que --c-border. */
	--c-linea: #D9D9D9;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--c-bg: #1A1714;
		--c-bg-elevated: #241F1B;
		--c-text: #F7F6F2;
		--c-text-muted: #B8B5AF;
		--c-text-subtle: #9C9992;
		--c-border: #3A362F;
		--c-link: #E0577A;
		--c-link-hover: #EE86A0;
		--c-on-guinda: #F3D4DC;
		--c-on-navy-muted: #D9D9D9;
		--c-guinda-suave: color-mix(in srgb, var(--ceprome-guinda) 20%, var(--c-bg-elevated));
		--c-guinda-media: color-mix(in srgb, var(--ceprome-guinda) 38%, var(--c-bg-elevated));
		--c-guinda-profunda: #EE86A0;
		--c-linea: #4A453D;
	}
}

:root[data-theme="dark"] {
	--c-bg: #1A1714;
	--c-bg-elevated: #241F1B;
	--c-text: #F7F6F2;
	--c-text-muted: #B8B5AF;
	--c-text-subtle: #9C9992;
	--c-border: #3A362F;
	--c-link: #E0577A;
	--c-link-hover: #EE86A0;
	--c-on-guinda: #F3D4DC;
	--c-on-navy-muted: #D9D9D9;
	--c-guinda-suave: color-mix(in srgb, var(--ceprome-guinda) 20%, var(--c-bg-elevated));
	--c-guinda-media: color-mix(in srgb, var(--ceprome-guinda) 38%, var(--c-bg-elevated));
	--c-guinda-profunda: #EE86A0;
	--c-linea: #4A453D;
}

/* ==========================================================================
   Reset mínimo
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--ceprome-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--c-link);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--c-link-hover);
	text-decoration: underline;
}

h1,
h2,
h3,
p {
	margin: 0;
}

button {
	font-family: inherit;
}

:focus-visible {
	outline: 2px solid var(--ceprome-guinda);
	outline-offset: 2px;
}

/* ==========================================================================
   Utilidades
   ========================================================================== */

.ceprome-container {
	max-width: var(--ceprome-max-width);
	margin-inline: auto;
	padding-inline: var(--ceprome-gutter);
}

.ceprome-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Campo trampa antispam de los formularios (formulario-servicio.php):
   fuera de la pantalla en vez de display:none, porque algunos bots se
   saltan los campos con display:none. */
.ceprome-form__trampa {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Entrada al hacer scroll — utilidad global, ver initScrollReveal() en
   theme.js. .ceprome-reveal aparece con fade + subida;
   .ceprome-reveal--line (junto con .ceprome-reveal) es una línea que
   crece de izquierda a derecha en su ::after. data-reveal-delay="n" (ms)
   escalona la entrada; JS lo pasa a --ceprome-reveal-delay.

   Solo se ocultan cuando <html> trae ceprome-reveal-js, que el script
   inline de <head> agrega si hay IntersectionObserver: sin JS el
   contenido nunca se queda oculto. */
.ceprome-reveal-js .ceprome-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.ceprome-reveal-js .ceprome-reveal.is-visible {
	opacity: 1;
	transform: none;
	transition-delay: var(--ceprome-reveal-delay, 0ms);
}

.ceprome-reveal--line::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: currentColor;
}

.ceprome-reveal-js .ceprome-reveal--line {
	opacity: 1;
	transform: none;
}

/* La línea tarda más que un bloque: acompaña la cascada de los pasos. */
.ceprome-reveal-js .ceprome-reveal--line::after {
	width: 0;
	transition: width 900ms ease-out;
}

.ceprome-reveal-js .ceprome-reveal--line.is-visible::after {
	width: 100%;
	transition-delay: var(--ceprome-reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
	.ceprome-reveal-js .ceprome-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ceprome-reveal-js .ceprome-reveal.ceprome-reveal--line::after {
		width: 100%;
		height: 100%;
		transition: none;
	}
}

.ceprome-skip-link {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 100;
	background: var(--ceprome-ink);
	color: #FFFFFF;
	padding: 12px 20px;
	border-radius: var(--ceprome-radius);
}

.ceprome-skip-link:focus {
	top: 12px;
}

.ceprome-eyebrow {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ceprome-guinda);
}

.ceprome-section-title {
	font-weight: 600;
	font-size: clamp(24px, 3.2vw, 32px);
	color: var(--c-text);
	margin-bottom: clamp(28px, 4vw, 48px);
}

.ceprome-placeholder__text {
	display: block;
	font-size: 12px;
	color: var(--c-text-subtle);
	text-align: center;
	padding: 16px;
}

.ceprome-button {
	display: inline-block;
	font-weight: 600;
	font-size: 15px;
	padding: 13px 26px;
	border: none;
	border-radius: var(--ceprome-radius-boton);
	cursor: pointer;
	text-decoration: none !important;
}

.ceprome-button--guinda {
	background: var(--ceprome-guinda);
	color: #FFFFFF !important;
}

.ceprome-button--guinda:hover {
	background: var(--ceprome-guinda-hover);
}

.ceprome-button--gold {
	background: var(--ceprome-gold);
	color: var(--ceprome-navy) !important;
}

.ceprome-button--ink {
	background: var(--ceprome-ink);
	color: #FFFFFF !important;
}

.ceprome-button--outline {
	background: transparent;
	color: var(--ceprome-guinda) !important;
	border: 1px solid var(--ceprome-guinda);
	padding: 12px 25px;
}

.ceprome-button--outline:hover {
	background: var(--ceprome-guinda);
	color: #FFFFFF !important;
}

.ceprome-link {
	font-weight: 600;
	font-size: 15px;
}

/* ==========================================================================
   Botón flotante de WhatsApp
   ========================================================================== */

.ceprome-whatsapp-wrap {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 40;
}

.ceprome-whatsapp {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #FFFFFF;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.ceprome-whatsapp:hover {
	color: #FFFFFF;
	text-decoration: none;
}

/* Burbuja de contexto: superficie/tinta a propósito — el verde queda
   exclusivo del botón, no se usa aquí. Oculta por defecto; se revela por
   :hover/:focus-within en escritorio, o con la clase .is-visible que
   theme.js (initWhatsappBubble) agrega en pantallas táctiles (sin hover)
   unos segundos después de cargar. .is-dismissed (por sessionStorage, una
   vez cerrada) anula ambos mecanismos por el resto de la sesión.
   .is-bloqueada (theme.js) también los anula mientras no se haya hecho
   scroll más allá del hero en el home o del encabezado en las demás
   páginas, para que no tape títulos ni los controles del slider. Sin JS
   no hay bloqueo y el hover sigue funcionando. */
.ceprome-whatsapp-bubble {
	display: none;
	position: absolute;
	bottom: 100%;
	right: 0;
	margin-bottom: 14px;
	width: 240px;
	max-width: calc(100vw - 40px);
	background: var(--c-bg-elevated);
	/* Excepción a --ceprome-radius (2 px), solo en este componente: forma
	   de burbuja de chat que evoca la interfaz de WhatsApp. La esquina de
	   2 px (abajo a la derecha) apunta al botón. */
	border-radius: 14px 14px 2px 14px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.ceprome-whatsapp-wrap.is-visible:not(.is-bloqueada) .ceprome-whatsapp-bubble,
.ceprome-whatsapp-wrap:not(.is-dismissed, .is-bloqueada):hover .ceprome-whatsapp-bubble,
.ceprome-whatsapp-wrap:not(.is-dismissed, .is-bloqueada):focus-within .ceprome-whatsapp-bubble {
	display: block;
}

.ceprome-whatsapp-bubble__link {
	display: block;
	padding: 14px 30px 14px 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-text) !important;
	text-decoration: none !important;
}

.ceprome-whatsapp-bubble__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	padding: 0;
	color: var(--c-text-subtle);
	cursor: pointer;
}

.ceprome-whatsapp-bubble__close:hover {
	color: var(--c-text);
}

@media (min-width: 720px) {
	.ceprome-whatsapp-wrap {
		bottom: 40px;
		right: 40px;
	}

	.ceprome-whatsapp {
		width: 64px;
		height: 64px;
	}
}

/* ==========================================================================
   Barra de utilidades — guinda, solo desde 1100 px (escritorio). En el
   menú móvil sus enlaces van al final del panel (.ceprome-nav__secundario)
   y el toggle claro/oscuro, junto a la hamburguesa.
   ========================================================================== */

.ceprome-utility-bar {
	display: none;
	background: var(--ceprome-guinda);
}

@media (min-width: 1100px) {
	.ceprome-utility-bar {
		display: block;
	}
}

/* Lista de enlaces + toggle claro/oscuro al extremo derecho. */
.ceprome-utility-bar__contenedor {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ceprome-utility-bar__contenedor .ceprome-utility-bar__inner {
	flex: 1;
	min-width: 0;
}

.ceprome-utility-bar__inner {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	padding-block: 8px;
	margin: 0;
	list-style: none;
}

.ceprome-utility-bar__inner a {
	font-size: 11px;
	color: var(--c-on-guinda);
}

.ceprome-utility-bar__inner a:hover {
	color: #FFFFFF;
}

@media (min-width: 720px) {
	.ceprome-utility-bar__contenedor {
		gap: 28px;
	}

	.ceprome-utility-bar__inner {
		justify-content: flex-end;
		gap: 28px;
		padding-block: 0;
		height: 40px;
	}

	.ceprome-utility-bar__inner a {
		font-size: 12px;
	}
}

/* ==========================================================================
   Header
   ========================================================================== */

.ceprome-header {
	position: relative;
	background: var(--c-bg);
	border-bottom: 1px solid var(--c-border);
}

.ceprome-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-block: 16px;
	/* Sin position:relative a propósito: esta caja también es
	   .ceprome-container (max-width + centrado). Si fuera positioned,
	   sería el contenedor de referencia de .ceprome-panel (más cercano
	   que .ceprome-header) y el panel quedaría limitado a ese ancho
	   centrado en vez de a pantalla completa. Nada más depende de este
	   position:relative — el contenedor de referencia real es
	   .ceprome-header, que sí lo tiene y sí es full-bleed. */
}

.ceprome-header__logo {
	display: inline-flex;
	align-items: center;
	font-weight: 600;
	font-size: 18px;
	color: var(--c-text) !important;
	text-decoration: none !important;
}

/* Logo real (Personalizador → Identidad del sitio) — un SVG no trae
   dimensiones en la biblioteca de medios, así que la altura se fija aquí
   (ancho automático) en vez de depender del atributo width/height que
   imprime wp_get_attachment_image(). Sin logo, .ceprome-header__logo
   sigue mostrando el nombre del sitio como texto (font-size de arriba). */
.ceprome-header__logo-img {
	display: block;
	height: 32px;
	width: auto;
}

/* Claro/oscuro (prefers-color-scheme + toggle manual, mismo patrón que
   .ceprome-theme-toggle__icon--sun/--moon): sin "Logo en negativo"
   capturado, header.php nunca imprime la variante --oscuro, así que el
   principal (sin modificador) quedaría fijo en los dos modos con estas
   reglas sin efecto — no hace falta un caso aparte. */
.ceprome-header__logo-img--oscuro {
	display: none;
}

:root[data-theme="dark"] .ceprome-header__logo-img--claro {
	display: none;
}

:root[data-theme="dark"] .ceprome-header__logo-img--oscuro {
	display: block;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .ceprome-header__logo-img--claro {
		display: none;
	}

	:root:not([data-theme="light"]) .ceprome-header__logo-img--oscuro {
		display: block;
	}
}

@media (min-width: 1100px) {
	.ceprome-header__inner {
		flex-wrap: nowrap;
		min-height: 96px;
		padding-block: 0;
	}

	.ceprome-header__logo {
		font-size: 21px;
	}

	.ceprome-header__logo-img {
		height: 40px;
	}
}

/* Toggle claro/oscuro y hamburguesa, juntos a la derecha del logo en el
   menú móvil. Desde 1100 px se ocultan los dos (el toggle vive en la
   barra de utilidades). */
.ceprome-header__acciones {
	display: flex;
	align-items: center;
	gap: 8px;
}

@media (min-width: 1100px) {
	.ceprome-header__acciones {
		display: none;
	}
}

/* Botón de menú móvil. Se ve de 40 px (el borde lo pinta ::before) y su
   zona de toque es de 44: sobresale 2 px por lado sin mover nada, igual
   que el toggle claro/oscuro de al lado. */

.ceprome-nav-toggle {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 44px;
	height: 44px;
	margin: -2px;
	background: transparent;
	border: none;
	padding: 0;
}

.ceprome-nav-toggle::before {
	content: "";
	position: absolute;
	inset: 2px;
	border: 1px solid var(--c-border);
	border-radius: var(--ceprome-radius);
}

.ceprome-nav-toggle__bar {
	display: block;
	width: 18px;
	height: 2px;
	margin-inline: auto;
	background: var(--c-text);
}

@media (min-width: 1100px) {
	.ceprome-nav-toggle {
		display: none;
	}
}

/* Navegación */

.ceprome-nav {
	display: none;
	flex-basis: 100%;
	padding-block: 20px;
	border-top: 1px solid var(--c-border);
	margin-top: 16px;
}

.ceprome-nav.is-open {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ceprome-nav__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceprome-nav__link {
	font-size: 15px;
	font-weight: 600;
	color: var(--c-text);
}

/* Píldora outline guinda, más fina que .ceprome-button (6px arriba y
   abajo), relleno al pasar el mouse. Guinda fijo también en oscuro, por
   decisión de Ric. El radio es el de todos los botones. */
.ceprome-nav__donar {
	align-self: flex-start;
	padding: 6px 24.5px;
	color: #A22944 !important;
	background: transparent;
	border: 1.5px solid #A22944;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

.ceprome-nav__donar:hover {
	color: #FFFFFF !important;
	background: #A22944;
}

@media (prefers-reduced-motion: reduce) {
	.ceprome-nav__donar {
		transition: none;
	}
}

/* Enlaces de la barra de utilidades al final del panel móvil: lista
   secundaria, más chica y en gris, separada por una línea. Desde 1100 px
   se oculta (están en la barra). */
.ceprome-nav__secundario {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 4px 0 0;
	padding: 20px 0 0;
	list-style: none;
	border-top: 1px solid var(--c-border);
}

.ceprome-nav__secundario a {
	font-size: 13px;
	font-weight: 400;
	color: var(--c-text-muted);
}

.ceprome-nav__secundario a:hover {
	color: var(--c-text);
}

@media (min-width: 1100px) {
	.ceprome-nav__secundario {
		display: none;
	}
}

/* Toggle claro/oscuro, en la barra de utilidades (guinda en los dos
   modos): colores de marca fijos, no las variables --c-* del tema. */
.ceprome-theme-toggle {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--ceprome-radius);
	color: #F3D4DC;
	cursor: pointer;
	transition: border-color 150ms ease-out, color 150ms ease-out;
}

.ceprome-theme-toggle:hover {
	color: #FFFFFF;
	border-color: #FFFFFF;
}

.ceprome-theme-toggle:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

.ceprome-theme-toggle__icon {
	width: 14px;
	height: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.ceprome-theme-toggle {
		transition: none;
	}
}

.ceprome-theme-toggle__icon--moon {
	display: none;
}

:root[data-theme="dark"] .ceprome-theme-toggle__icon--sun {
	display: none;
}

:root[data-theme="dark"] .ceprome-theme-toggle__icon--moon {
	display: block;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .ceprome-theme-toggle__icon--sun {
		display: none;
	}

	:root:not([data-theme="light"]) .ceprome-theme-toggle__icon--moon {
		display: block;
	}
}

/* Toggle del encabezado: se ve del mismo tamaño y con el mismo borde que
   la hamburguesa (40 px), con zona de toque de 44 px. A diferencia del de
   la barra guinda, usa los colores del tema, como la hamburguesa. */
.ceprome-theme-toggle--header {
	position: relative;
	width: 44px;
	height: 44px;
	/* La zona de toque sobresale 2 px por lado sin mover nada: el
	   encabezado conserva su alto y el borde visible queda alineado con
	   la hamburguesa. */
	margin: -2px;
	border: none;
	color: var(--c-text);
}

.ceprome-theme-toggle--header::before {
	content: "";
	position: absolute;
	inset: 2px;
	border: 1px solid var(--c-border);
	border-radius: var(--ceprome-radius);
	transition: border-color 150ms ease-out;
}

.ceprome-theme-toggle--header:hover {
	color: var(--c-text);
}

.ceprome-theme-toggle--header:hover::before {
	border-color: var(--c-text-muted);
}

.ceprome-theme-toggle--header:focus-visible {
	outline: 2px solid var(--c-text);
	outline-offset: 0;
}

.ceprome-theme-toggle--header .ceprome-theme-toggle__icon {
	width: 18px;
	height: 18px;
}

@media (prefers-reduced-motion: reduce) {
	.ceprome-theme-toggle--header::before {
		transition: none;
	}
}

@media (min-width: 1100px) {
	.ceprome-nav {
		display: flex;
		flex-basis: auto;
		align-items: center;
		gap: 40px;
		padding-block: 0;
		border-top: none;
		margin-top: 0;
	}

	.ceprome-nav__list {
		flex-direction: row;
		gap: 40px;
	}

	.ceprome-nav__donar {
		align-self: center;
	}
}

/* Submenús anidados de wp_nav_menu() (.menu-item-has-children / .sub-menu,
   pintados por CEPROME_Walker_Nav_Menu). Móvil: .is-open (theme.js)
   expande/colapsa in-place con display. Escritorio: se revela por :hover
   (mouse) o por .is-open (teclado, patrón disclosure — Enter/Espacio en
   el botón del padre; nunca por tabular hacia él, ver theme.js), con
   opacity/visibility (no display) para poder retrasar el cierre — ver el
   bloque @media de abajo para el puente del hueco y el retraso. */

.ceprome-nav__list > .menu-item-has-children {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.ceprome-nav__list .sub-menu {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: none;
}

.menu-item-has-children.is-open > .sub-menu {
	display: block;
	flex-basis: 100%;
}

.ceprome-nav__list .sub-menu .ceprome-nav__link {
	font-size: 14px;
	font-weight: 500;
	color: var(--c-text-muted);
}

.ceprome-nav__submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-left: 6px;
	background: transparent;
	border: none;
	padding: 0;
	font: inherit;
	color: var(--c-text);
	cursor: pointer;
}

.ceprome-nav__submenu-toggle svg {
	width: 14px;
	height: 14px;
	transition: transform 0.15s ease;
}

.menu-item-has-children.is-open > .ceprome-nav__submenu-toggle svg {
	transform: rotate(180deg);
}

/* Padre sin URL real (Nosotros, Formación...): un solo <button> con el
   texto y el chevron juntos, en vez de <a> + botón de chevron aparte —
   visualmente idéntico a ese patrón (mismo texto, mismos 6px de por medio,
   mismo ícono). Ver CEPROME_Walker_Nav_Menu. */
.ceprome-nav__submenu-toggle--padre {
	width: auto;
	height: auto;
	margin-left: 0;
}

.ceprome-nav__submenu-toggle--padre svg {
	margin-left: 6px;
}

@media (min-width: 1100px) {
	.ceprome-nav__list > .menu-item-has-children {
		position: relative;
	}

	/* Un item con panel de mega menú no ancla su panel a sí mismo (ver
	   .ceprome-panel más abajo, sección "Mega menú") — su panel se
	   posiciona respecto a .ceprome-header, a pantalla completa. */
	.ceprome-nav__list > .menu-item-has-children--panel {
		position: static;
	}

	/* .ceprome-header__inner tiene min-height:96px con align-items:center
	   (ver arriba) — el botón del nav es mucho más bajo que eso, así que
	   por defecto queda centrado con un hueco invisible entre su borde
	   inferior y el borde del header (justo donde empieza el panel, que
	   se posiciona respecto a .ceprome-header, no a este <li>). Sin este
	   bloque, ese hueco rompe el :hover al bajar del botón al panel — el
	   mismo problema que el puente ::before resuelve para el submenú
	   clásico, pero aquí la causa es la altura del header, no un
	   margin-top. Se estira toda la cadena (nav → lista → <li> con panel)
	   hasta el borde real del header; el botón sigue viéndose centrado
	   porque .menu-item-has-children ya centra su contenido con
	   align-items. Los <li> clásicos se excluyen (align-self: center) —
	   su submenú se ancla a top:100% DE ESE <li>, no del header, así que
	   estirarlo alejaría el submenú del botón. */
	.ceprome-nav {
		align-self: stretch;
	}

	.ceprome-nav__list {
		align-self: stretch;
	}

	.ceprome-nav__list > .menu-item-has-children:not(.menu-item-has-children--panel) {
		align-self: center;
	}

	/* Mecánica de apertura/cierre — compartida por el submenú clásico Y el
	   panel de mega menú (ver sección "Mega menú" más abajo: .ceprome-panel
	   es, para esto, un .sub-menu más). Geometría/color van aparte, cada
	   uno con lo suyo — ver los dos bloques de abajo.

	   Los retrasos del mouse (150ms para abrir, 300ms para cerrar) viven en
	   initNavSubmenus() (theme.js), no aquí: el JS pone .is-hover en el <li>
	   y el clic (.is-open) sigue siendo inmediato. Aquí solo la animación:
	   entra con opacidad + 8px de subida en 200ms ease-out; sale igual en
	   150ms ease-in mientras el JS mantiene .is-animating-out en el
	   submenú, y se quita en transitionend. */
	.ceprome-nav__list .sub-menu {
		display: block;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
	}

	/* Sin pointer-events mientras sale: si el cursor quedó quieto sobre el
	   panel al cerrarlo (Escape, clic), Chrome lo contaría como un
	   mouseenter nuevo y lo reabriría. */
	.ceprome-nav__list .sub-menu.is-animating-out {
		visibility: visible;
		pointer-events: none;
		transition: opacity 150ms ease-in, transform 150ms ease-in;
	}

	/* Submenú clásico únicamente (:not(.ceprome-panel)): la cajita chica
	   anclada al <li>. El panel de mega menú tiene su propia geometría
	   completa en la sección "Mega menú" — nunca hereda esto, para no
	   pelear especificidad contra esas reglas. */
	.ceprome-nav__list .sub-menu:not(.ceprome-panel) {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		margin-top: 12px;
		padding: 12px 0;
		background: var(--c-bg-elevated);
		border: 1px solid var(--c-border);
		border-radius: var(--ceprome-radius);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
		z-index: 20;
	}

	/* Puente invisible sobre el hueco (el margin-top de arriba) entre el
	   padre y el submenú clásico: sin esto, el cursor pierde el :hover del
	   <li> al cruzarlo y el submenú se cierra antes de llegar a sus items.
	   Es descendiente del <li> en el DOM aunque el hueco lo separe
	   visualmente, así que pasar el mouse por ahí mantiene el :hover.
	   Transparente: la separación visual actual no cambia. El panel de
	   mega menú no tiene margin-top ni este puente — su propio hueco
	   (mucho más grande, por el alto del header) se resuelve arriba
	   estirando el <li> hasta el borde del header, no con un puente. */
	.ceprome-nav__list .sub-menu:not(.ceprome-panel)::before {
		content: "";
		position: absolute;
		top: -12px;
		left: 0;
		right: 0;
		height: 12px;
	}

	.ceprome-nav__list .sub-menu .menu-item {
		padding: 4px 20px;
	}

	/* :focus-within fuera a propósito (patrón disclosure de WAI-ARIA): con
	   teclado el submenú solo abre al activar el botón del padre (Enter o
	   Espacio → .is-open), nunca por el simple hecho de tabular hacia él.
	   El mouse lo abre con .is-hover (theme.js), sin tocar .is-open. */
	.ceprome-nav__list > .menu-item-has-children.is-hover > .sub-menu,
	.ceprome-nav__list > .menu-item-has-children.is-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 200ms ease-out, transform 200ms ease-out;
	}
}

@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
	.ceprome-nav__list .sub-menu,
	.ceprome-nav__list .sub-menu.is-animating-out,
	.ceprome-nav__list > .menu-item-has-children.is-hover > .sub-menu,
	.ceprome-nav__list > .menu-item-has-children.is-open > .sub-menu {
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   Mega menú (CEPROME_Walker_Nav_Menu::render_panel(), CEPROME_Mega_Menu)

   Un panel es, para toda la mecánica de apertura/cierre (:hover, .is-open,
   aria-expanded, Escape, focusout, retraso al cerrar, un solo abierto a
   la vez), un .sub-menu más — ver la sección de arriba, sin cambios ahí.
   Esta sección solo agrega: su propio color sólido por Voz (institucional
   = guinda, formación = navy — el mismo en claro y oscuro, con su propia
   paleta de texto interna, nunca las variables --c-* del sitio, que sí
   cambian con el tema), y en escritorio su posición a pantalla completa
   bajo el header (position:absolute respecto a .ceprome-header, no
   respecto al <li> — ver "position: static" de
   .menu-item-has-children--panel más arriba). En móvil no se posiciona:
   es un bloque más del acordeón, con su color de fondo pero en flujo
   normal, igual que cualquier .sub-menu ahí.

   El Bloque destacado de "Lista + destacado" es la única excepción al
   color por Voz: siempre brand-guinda-deep (var(--ceprome-guinda-hover)),
   fijo en los dos modos, sin importar si el panel que lo contiene es
   navy o guinda.
   ========================================================================== */

.ceprome-panel--formacion {
	--ceprome-panel-bg: var(--ceprome-navy);
	--ceprome-panel-fg: #F7F6F2;
	--ceprome-panel-fg-muted: #B8C0C9;
	--ceprome-panel-accent: #CD8D11;
	--ceprome-panel-border: rgba(247, 246, 242, 0.14);
	--ceprome-panel-active-bg: rgba(247, 246, 242, 0.06);
	--ceprome-panel-dashed: rgba(247, 246, 242, 0.32);
	--ceprome-panel-placeholder-bg: rgba(247, 246, 242, 0.05);
	--ceprome-panel-boton-fg: var(--ceprome-navy);
	background: var(--ceprome-panel-bg);
	color: var(--ceprome-panel-fg);
}

.ceprome-panel--institucional {
	--ceprome-panel-bg: var(--ceprome-guinda);
	--ceprome-panel-fg: #FFFFFF;
	--ceprome-panel-fg-muted: #F3DDE2;
	--ceprome-panel-accent: #FFFFFF;
	--ceprome-panel-border: rgba(255, 255, 255, 0.28);
	--ceprome-panel-active-bg: rgba(255, 255, 255, 0.08);
	--ceprome-panel-dashed: rgba(255, 255, 255, 0.4);
	--ceprome-panel-placeholder-bg: rgba(255, 255, 255, 0.08);
	--ceprome-panel-boton-fg: var(--ceprome-guinda);
	background: var(--ceprome-panel-bg);
	color: var(--ceprome-panel-fg);
}

.ceprome-panel a {
	color: inherit;
}

.ceprome-panel__cuerpo {
	padding: 0 20px 8px;
}

/* ---- Vista previa (Formación) ---- */

.ceprome-vp__lista {
	display: flex;
	flex-direction: column;
}

.ceprome-vp__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 48px;
	padding: 12px 0;
	border-top: 1px solid var(--ceprome-panel-border);
	text-decoration: none;
	color: var(--ceprome-panel-fg);
}

.ceprome-vp__item-texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ceprome-vp__item-titulo {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: currentColor;
}

.ceprome-vp__item-bajada {
	font-size: 13px;
	line-height: 1.4;
	color: var(--ceprome-panel-fg-muted);
}

/* Mismo criterio que .ceprome-vp-grid__item: solo el título se subraya al
   pasar el mouse, no la descripción. */
.ceprome-vp__item:hover,
.ceprome-vp__item:focus-visible {
	text-decoration: none;
}

.ceprome-vp__item:hover .ceprome-vp__item-titulo,
.ceprome-vp__item:focus-visible .ceprome-vp__item-titulo {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ceprome-vp__item-chevron,
.ceprome-vp__preview {
	display: none;
}

.ceprome-vp-preview__eyebrow {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--ceprome-panel-accent);
	margin-bottom: 16px;
}

.ceprome-vp__dato {
	display: block;
	font-size: 14px;
	line-height: 1.4;
	color: var(--ceprome-panel-fg-muted);
}

.ceprome-vp-vacio {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ceprome-vp-vacio__texto {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ceprome-panel-fg);
}

.ceprome-vp-vacio__enlace {
	align-self: flex-start;
	font-size: 14px;
	font-weight: 600;
	color: var(--ceprome-panel-accent);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ceprome-vp-grande {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ceprome-vp-grande__media,
.ceprome-vp-grid__media {
	box-sizing: border-box;
	overflow: hidden;
	border: 1px dashed var(--ceprome-panel-dashed);
	background: var(--ceprome-panel-placeholder-bg);
	border-radius: var(--ceprome-radius);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ceprome-vp-grande__media {
	aspect-ratio: 3 / 2;
}

.ceprome-vp-grande__imagen,
.ceprome-vp-grid__imagen {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ceprome-vp-grande__texto {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ceprome-vp-grande__titulo {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ceprome-panel-fg);
}

.ceprome-vp-boton {
	align-self: flex-start;
	margin-top: 4px;
	padding: 12px 20px;
	background: var(--ceprome-panel-accent);
	color: var(--ceprome-panel-boton-fg);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border-radius: var(--ceprome-radius-boton);
}

.ceprome-vp-grid-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 16px;
	margin-bottom: 16px;
}

.ceprome-vp-grid-header__titulo {
	font-size: 14px;
	font-weight: 600;
	color: var(--ceprome-panel-accent);
}

.ceprome-vp-vertodos {
	font-size: 14px;
	font-weight: 600;
	color: var(--ceprome-panel-fg);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ceprome-vp-grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ceprome-vp-grid__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none;
}

.ceprome-vp-grid__media {
	aspect-ratio: 16 / 9;
}

.ceprome-vp-grid__titulo {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ceprome-panel-fg);
}

/* El :hover de <a> (ver base común arriba) subraya todo el contenido de
   texto del item; aquí solo debe subrayarse el título, no fecha/modalidad. */
.ceprome-vp-grid__item:hover,
.ceprome-vp-grid__item:focus-visible {
	text-decoration: none;
}

.ceprome-vp-grid__item:hover .ceprome-vp-grid__titulo,
.ceprome-vp-grid__item:focus-visible .ceprome-vp-grid__titulo {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ceprome-vp-webinars {
	display: flex;
	flex-direction: column;
}

.ceprome-vp-webinars__item {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 14px 0;
	border-top: 1px solid var(--ceprome-panel-border);
	text-decoration: none;
}

.ceprome-vp-webinars__fecha {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	box-sizing: border-box;
	border: 1px solid var(--ceprome-panel-accent);
	border-radius: var(--ceprome-radius);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
}

.ceprome-vp-webinars__dia {
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
	color: var(--ceprome-panel-fg);
}

.ceprome-vp-webinars__mes {
	font-size: 11px;
	color: var(--ceprome-panel-accent);
	text-transform: uppercase;
}

.ceprome-vp-webinars__texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

/* Webinar ya pasado: insignia "Grabación" y caja de fecha apagada, para
   que no se lea como una sesión próxima. Colores del panel, fijos. */
.ceprome-vp-webinars__estado {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	padding: 4px 8px;
	border: 1px solid var(--ceprome-panel-accent);
	border-radius: var(--ceprome-radius);
	color: var(--ceprome-panel-accent);
}

.ceprome-vp-webinars__item--grabacion .ceprome-vp-webinars__fecha {
	border-color: var(--ceprome-panel-border);
}

.ceprome-vp-webinars__item--grabacion .ceprome-vp-webinars__dia {
	font-weight: 600;
	opacity: 0.7;
}

/* En una grabación el renglón grande es el mes ("MAY") y el chico, el año. */
.ceprome-vp-webinars__dia--mes {
	font-size: 15px;
	text-transform: uppercase;
}

.ceprome-vp-webinars__titulo {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ceprome-panel-fg);
}

/* Mismo criterio que .ceprome-vp-grid__item: solo el título se subraya al
   pasar el mouse, no los ponentes. */
.ceprome-vp-webinars__item:hover,
.ceprome-vp-webinars__item:focus-visible {
	text-decoration: none;
}

.ceprome-vp-webinars__item:hover .ceprome-vp-webinars__titulo,
.ceprome-vp-webinars__item:focus-visible .ceprome-vp-webinars__titulo {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---- Columnas (Gestión Institucional) ---- */

.ceprome-columnas {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ceprome-columnas__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--ceprome-panel-border);
}

.ceprome-columnas__icono:empty {
	display: none;
}

.ceprome-columnas__titulo {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ceprome-panel-fg);
	text-decoration: none;
}

.ceprome-columnas__desc {
	font-size: 15px;
	line-height: 1.5;
	color: var(--ceprome-panel-fg-muted);
}

.ceprome-columnas__solicitar {
	align-self: flex-start;
	font-size: 14px;
	font-weight: 600;
	color: var(--ceprome-panel-fg);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---- Lista + destacado (Nosotros, Investigación) ---- */

.ceprome-ld__lista {
	display: flex;
	flex-direction: column;
}

.ceprome-ld__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 0;
	border-top: 1px solid var(--ceprome-panel-border);
	text-decoration: none;
	color: var(--ceprome-panel-fg);
}

.ceprome-ld__titulo {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: currentColor;
}

.ceprome-ld__desc {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ceprome-panel-fg-muted);
}

/* Mismo criterio que .ceprome-vp-grid__item: solo el título se subraya al
   pasar el mouse, no la descripción. */
.ceprome-ld__item:hover,
.ceprome-ld__item:focus-visible {
	text-decoration: none;
}

.ceprome-ld__item:hover .ceprome-ld__titulo,
.ceprome-ld__item:focus-visible .ceprome-ld__titulo {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* En móvil la columna destacada (publicaciones o Bloque destacado) no se
   muestra — solo el acordeón de título y descripción de la izquierda. */
.ceprome-ld__destacado {
	display: none;
}

/* ---- Bloque destacado del menú (Ajustes → CEPROME) ---- */

/* Fijo en brand-guinda-deep, en los dos modos y sin importar la Voz del
   panel que lo contenga — igual que la banda de evento, ninguna variable
   del tema ni del panel entra aquí (ver BASE COMÚN arriba). */
.ceprome-bloque-destacado {
	box-sizing: border-box;
	padding: 24px;
	background: var(--ceprome-guinda-hover);
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ceprome-bloque-destacado__titulo {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
}

/* Reemplaza al título cuando hay imagen capturada. Alto fijo por CSS
   porque los SVG no traen dimensiones reales (ver
   CEPROME_Mega_Menu::get_bloque_destacado()); ancho automático sin pasar
   el ancho del bloque. */
.ceprome-bloque-destacado__imagen {
	align-self: flex-start;
	max-width: 100%;
	width: auto;
	max-height: 120px;
}

.ceprome-bloque-destacado__frase {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.ceprome-bloque-destacado__enlace {
	align-self: flex-start;
	font-size: 14px;
	font-weight: 600;
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---- Publicaciones recientes (Lista + destacado) ---- */

.ceprome-ld-pub__lista {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ceprome-ld-pub__item {
	display: flex;
	gap: 16px;
	align-items: center;
	text-decoration: none;
}

/* Sin tarjeta ni rectángulo detrás: la portada (PNG transparente) flota
   directo sobre el color del panel — a diferencia de
   .ceprome-vp-grid__media, sin fondo ni borde propios. */
.ceprome-ld-pub__media {
	width: 64px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ceprome-ld-pub__imagen {
	width: 100%;
	height: auto;
	display: block;
}

.ceprome-ld-pub__texto {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ceprome-ld-pub__titulo {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ceprome-panel-fg);
}

/* Mismo criterio que .ceprome-vp-grid__item: solo el título se subraya al
   pasar el mouse, no el autor. */
.ceprome-ld-pub__item:hover,
.ceprome-ld-pub__item:focus-visible {
	text-decoration: none;
}

.ceprome-ld-pub__item:hover .ceprome-ld-pub__titulo,
.ceprome-ld-pub__item:focus-visible .ceprome-ld-pub__titulo {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---- Banda de evento ---- */

.ceprome-panel-banda {
	display: block;
	margin: 12px 20px 20px;
	padding: 16px;
	border-radius: var(--ceprome-radius);
	text-decoration: none;
}

.ceprome-panel-banda__inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ceprome-panel-banda--congreso {
	background: #CD8D11;
	color: var(--ceprome-navy);
}

.ceprome-panel-banda--expert-meeting {
	background: #7C1F35;
	color: #FFFFFF;
}

.ceprome-panel-banda__texto,
.ceprome-panel-banda__accion {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ceprome-panel-banda__evento {
	font-size: 13px;
	font-weight: 600;
}

.ceprome-panel-banda__edicion {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.ceprome-panel-banda__fechas {
	font-size: 14px;
	font-weight: 600;
}

.ceprome-panel-banda__boton {
	display: inline-block;
	align-self: flex-start;
	margin-top: 4px;
	padding: 12px 18px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	border-radius: var(--ceprome-radius-boton);
}

/* Fijos los dos, en los dos modos — ninguna variable del tema (--c-*)
   entra al panel, ni siquiera en el botón "surface" del Expert Meeting:
   blanco fijo con guinda-deep fijo, 9.98:1 de contraste sin depender del
   modo del sitio. */
.ceprome-panel-banda--expert-meeting .ceprome-panel-banda__boton {
	background: #FFFFFF;
	color: #7C1F35;
}

.ceprome-panel-banda--congreso .ceprome-panel-banda__boton {
	background: var(--ceprome-navy);
	color: #F7F6F2;
}

@media (min-width: 1100px) {
	/* A pantalla completa bajo el header (position:absolute respecto a
	   .ceprome-header, no al <li> — ver "position: static" de
	   .menu-item-has-children--panel más arriba). Ni min-width, ni
	   padding, ni border, ni box-shadow, ni border-radius: .ceprome-panel
	   nunca heredó eso del submenú clásico (ver :not(.ceprome-panel) en la
	   sección de arriba, que sí excluye position/top/margin-top DE ESA
	   regla) — esto es toda su geometría, completa, no un parche encima
	   de otra regla. */
	.ceprome-nav__list .ceprome-panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		/* .sub-menu base (móvil, ver ".ceprome-nav__list .sub-menu" arriba)
		   trae margin:8px 0 0 para su acordeón SIN excluir a .ceprome-panel
		   (a diferencia de la regla :not(.ceprome-panel) de más abajo, que
		   solo cubre position/top/margin-top del submenú clásico en
		   escritorio) — mismas 2 clases de especificidad que esa regla
		   base, así que un simple ".ceprome-panel { margin:0 }" pierde el
		   empate por orden de aparición (la base va antes en el archivo).
		   Calificarlo con ".ceprome-nav__list" iguala la especificidad y
		   gana por ir después — sin esto, el panel abre 8px más abajo que
		   el borde del header, dejando ver una franja del contenido de
		   fondo ahí. */
		margin: 0;
		/* Sin esto el panel se abre (opacity/visibility correctos) pero
		   queda detrás de cualquier elemento position:relative/absolute
		   de <main> con z-index:auto — position:relative en .ceprome-header
		   NO crea su propio stacking context, así que sin un z-index
		   explícito el orden de pintado lo decide el orden en el DOM, y
		   <header> va antes que <main>. El submenú clásico ya tenía
		   z-index:20 (ver :not(.ceprome-panel) arriba); a este nunca se le
		   había puesto ninguno. */
		z-index: 30;
	}

	.ceprome-panel__cuerpo {
		max-width: var(--ceprome-max-width);
		margin-inline: auto;
		padding: 40px var(--ceprome-gutter);
	}

	/* Vista previa */

	.ceprome-vp {
		display: flex;
		gap: clamp(32px, 5vw, 72px);
	}

	.ceprome-vp__lista {
		width: 420px;
		flex-shrink: 0;
	}

	.ceprome-vp__item {
		gap: 16px;
		padding: 16px;
		margin: 0 -16px;
		border-top: none;
		border-bottom: 1px solid var(--ceprome-panel-border);
		border-radius: var(--ceprome-radius);
	}

	.ceprome-vp__item.is-active {
		background: var(--ceprome-panel-active-bg);
		color: var(--ceprome-panel-accent);
	}

	.ceprome-vp__item-titulo {
		font-size: 19px;
	}

	.ceprome-vp__item-chevron {
		display: block;
		flex-shrink: 0;
		width: 14px;
		height: 14px;
	}

	/* min-width: 0 deja que la columna se encoja al espacio que le queda
	   junto a la lista; con el min-width: auto de flex, la tarjeta grande
	   la empujaba fuera del viewport entre 960 y ~1180px. */
	.ceprome-vp__preview {
		display: block;
		flex-grow: 1;
		min-width: 0;
		padding-top: 8px;
	}

	.ceprome-vp__preview-panel {
		display: none;
	}

	.ceprome-vp__preview-panel:not([hidden]) {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.ceprome-vp-preview__eyebrow {
		margin-bottom: 0;
	}

	.ceprome-vp-grande {
		flex-direction: row;
		gap: 32px;
		align-items: flex-start;
	}

	/* 320px en escritorio ancho; en los anchos chicos cede lo necesario
	   para que el texto conserve 200px (32px de separación + 200). */
	.ceprome-vp-grande__media {
		width: min(320px, calc(100% - 232px));
		flex-shrink: 0;
		aspect-ratio: unset;
		height: 210px;
	}

	.ceprome-vp-grande__titulo {
		font-size: 28px;
	}

	.ceprome-vp-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}

	.ceprome-vp-grid__titulo {
		font-size: 19px;
	}

	.ceprome-vp-webinars__item {
		gap: 24px;
		padding: 16px 0;
	}

	.ceprome-vp-webinars__fecha {
		width: 72px;
		height: 72px;
	}

	.ceprome-vp-webinars__dia {
		font-size: 22px;
	}

	.ceprome-vp-webinars__titulo {
		font-size: 19px;
	}

	/* Columnas */

	.ceprome-columnas {
		display: grid;
		grid-template-columns: repeat(var(--ceprome-columnas-cantidad, 3), minmax(0, 1fr));
		gap: 48px;
	}

	.ceprome-columnas__col {
		padding-top: 24px;
	}

	.ceprome-columnas__titulo {
		font-size: 24px;
	}

	.ceprome-columnas__desc {
		font-size: 16px;
		line-height: 1.55;
	}

	/* Lista + destacado */

	.ceprome-ld {
		display: flex;
		gap: clamp(32px, 5vw, 72px);
		align-items: flex-start;
	}

	.ceprome-ld__lista {
		width: 420px;
		flex-shrink: 0;
	}

	.ceprome-ld__lista--dos-columnas {
		width: 560px;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
		align-content: start;
	}

	/* Sin columna destacada: la lista ocupa todo el ancho disponible,
	   tenga una o dos columnas (--dos-columnas ya trae su propio
	   grid-template-columns, esto solo libera el ancho fijo). */
	.ceprome-ld--sin-destacado .ceprome-ld__lista {
		width: 100%;
	}

	.ceprome-ld__titulo {
		font-size: 19px;
	}

	.ceprome-ld__desc {
		font-size: 15px;
		line-height: 1.55;
	}

	.ceprome-ld__destacado {
		display: block;
		flex-grow: 1;
	}

	.ceprome-bloque-destacado {
		height: 100%;
		padding: 32px;
	}

	.ceprome-bloque-destacado__titulo {
		font-size: 32px;
	}

	.ceprome-ld-pub__titulo {
		font-size: 16px;
	}

	/* Banda de evento — a todo el ancho (sin margin/padding/radio propios,
	   el color llega hasta los bordes de la ventana); su contenido se
	   alinea al mismo contenedor y márgenes que el resto del sitio. */

	.ceprome-panel-banda {
		margin: 0;
		padding: 0;
		border-radius: 0;
	}

	.ceprome-panel-banda__inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 48px;
		max-width: var(--ceprome-max-width);
		margin-inline: auto;
		padding: 28px var(--ceprome-gutter);
	}

	.ceprome-panel-banda__texto,
	.ceprome-panel-banda__accion {
		gap: 4px;
	}

	.ceprome-panel-banda__accion {
		flex-direction: row;
		align-items: center;
		gap: 32px;
	}

	.ceprome-panel-banda__edicion {
		font-size: 24px;
	}

	.ceprome-panel-banda__boton {
		margin-top: 0;
		padding: 14px 22px;
		font-size: 15px;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */

.ceprome-hero {
	padding-block: clamp(56px, 12vw, 140px) var(--ceprome-section-padding);
}

.ceprome-hero__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 760px;
}

.ceprome-hero__eyebrow {
	font-size: 14px;
	color: var(--c-text-muted);
}

.ceprome-hero__title {
	font-weight: 800;
	font-size: clamp(32px, 6vw, 64px);
	line-height: 1.08;
	color: var(--c-text);
}

.ceprome-hero__lead {
	font-size: clamp(16px, 2vw, 19px);
	line-height: 1.6;
	color: var(--c-text-muted);
	max-width: 620px;
}

.ceprome-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-top: 8px;
}

/* ==========================================================================
   Hero — slider (hero-slide). Crossfade + Ken Burns + entrada del texto en
   cascada, parallax de la imagen al hacer scroll, barras de progreso con
   contador y pausa, y autoplay cada 6 s (initHeroSlider() en theme.js).
   ========================================================================== */

.ceprome-hero-slider {
	/* Duración de cada slide: la barra de progreso se llena en este tiempo
	   y, al terminar, theme.js pasa al siguiente (animationend). */
	--ceprome-hero-intervalo: 6s;
	/* Desfase máximo del parallax: la imagen se retrasa hasta un 12% del
	   alto del slider. Debe coincidir con PARALLAX en initHeroSlider(). */
	--ceprome-hero-parallax: 12%;
	/* Reserva a la derecha para el botón flotante de WhatsApp (bottom/right
	   20px y 56px en móvil; 40px y 64px desde 720px) más aire: los controles
	   nunca pasan de ahí. */
	--ceprome-hero-reserva-whatsapp: 88px;
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--ceprome-ink);
}

@media (min-width: 720px) {
	.ceprome-hero-slider {
		--ceprome-hero-reserva-whatsapp: 120px;
		aspect-ratio: 16 / 10;
	}
}

@media (min-width: 1080px) {
	.ceprome-hero-slider {
		aspect-ratio: 21 / 9;
	}
}

.ceprome-hero-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s ease, visibility 0.7s ease;
}

.ceprome-hero-slider__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

/* Parallax: la capa de la imagen es más alta que el slide (sobresale
   --ceprome-hero-parallax por arriba) y theme.js la baja, como mucho, esa
   misma distancia mientras el slider sale por arriba de la pantalla
   (--ceprome-hero-desfase). El texto se desplaza con la página; la imagen,
   un 12% más lento. */
.ceprome-hero-slider__media {
	position: absolute;
	top: calc(-1 * var(--ceprome-hero-parallax));
	right: 0;
	bottom: 0;
	left: 0;
	transform: translate3d(0, var(--ceprome-hero-desfase, 0px), 0);
	will-change: transform;
	/* Mientras carga la foto se ve el mismo tinta del contenedor, nunca un
	   fondo claro distinto (era el "fantasma" detrás del texto). */
	background: var(--ceprome-ink);
}

.ceprome-hero-slider__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.ceprome-hero-slider__slide.is-active .ceprome-hero-slider__image {
	animation: ceprome-ken-burns 14s ease-out forwards;
}

@keyframes ceprome-ken-burns {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.05);
	}
}

/* Scrim funcional (no decorativo): garantiza contraste del texto sobre
   cualquier foto sin oscurecerla completa. En móvil, degradado desde
   abajo, donde va el texto. Desde 720px, degradado horizontal solo detrás
   del texto: de 0.55 en el borde izquierdo a transparente a mitad de la
   imagen; la mitad derecha queda limpia. Claro en los slides marcados
   "Modo claro" (texto tinta). */
.ceprome-hero-slider__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.ceprome-hero-slider__slide--dark .ceprome-hero-slider__scrim {
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 65%);
}

.ceprome-hero-slider__slide--light .ceprome-hero-slider__scrim {
	background: linear-gradient(0deg, rgba(247, 246, 242, 0.7), rgba(247, 246, 242, 0) 65%);
}

/* En móvil el texto va abajo y los controles debajo de él: el padding
   inferior (80px) deja libre la fila de controles (20px + 40px + 20px). */
.ceprome-hero-slider__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 14px;
	padding-bottom: 80px;
	max-width: 760px;
}

.ceprome-hero-slider__slide--dark .ceprome-hero-slider__content {
	color: #FFFFFF;
}

.ceprome-hero-slider__slide--light .ceprome-hero-slider__content {
	color: var(--ceprome-ink);
}

@media (min-width: 720px) {
	.ceprome-hero-slider__slide--dark .ceprome-hero-slider__scrim {
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 50%);
	}

	.ceprome-hero-slider__slide--light .ceprome-hero-slider__scrim {
		background: linear-gradient(90deg, rgba(247, 246, 242, 0.8), rgba(247, 246, 242, 0) 50%);
	}

	/* Texto a la izquierda, alineado con la retícula del sitio y dentro de
	   la zona del degradado, centrado en vertical en el alto del slide (el
	   degradado cubre todo el alto, así que lo sigue cubriendo). El mínimo
	   de 112px deja libre la flecha "anterior" (32px + 52px), que también
	   va a media altura. El padding inferior (96px) deja libre la fila de
	   barras y pausa (32px + 24px) con 40px de aire. */
	.ceprome-hero-slider__content {
		right: 35%;
		max-width: none;
		margin: 0;
		justify-content: center;
		padding-top: 64px;
		padding-bottom: 96px;
		padding-left: max(112px, calc((100vw - var(--ceprome-max-width)) / 2 + var(--ceprome-gutter)));
		padding-right: 24px;
	}
}

@media (min-width: 960px) {
	.ceprome-hero-slider__content {
		right: 50%;
	}
}

.ceprome-hero-slider__eyebrow {
	max-width: 32ch;
	font-size: 14px;
	font-weight: 600;
}

.ceprome-hero-slider__slide--dark .ceprome-hero-slider__eyebrow {
	color: rgba(255, 255, 255, 0.85);
}

.ceprome-hero-slider__slide--light .ceprome-hero-slider__eyebrow {
	color: var(--ceprome-ink);
	opacity: 0.75;
}

/* Tipografía fluida por tramo de longitud (ceprome_slide_titulo_largo()):
   hasta 40 caracteres, de 41 a 70 y más de 70. Escala con el ancho de la
   ventana entre el mínimo de móvil y el de escritorio (31–52 / 26–41 /
   23–33px entre 390 y 1440px; topes de 52 / 42 / 34px), en rem para respetar el tamaño de
   letra del navegador. El ancho máximo va en ch: en Duplet ExtraBold 1ch
   mide 0.64em (el "0" es ancho), así que 20ch dan unas 30–34 letras por
   renglón; los títulos largos, más chicos, llevan 24ch. text-wrap: balance
   reparte los renglones parejos (sin una palabra sola al final). */
.ceprome-hero-slider__title {
	max-width: 20ch;
	font-weight: 800;
	font-size: clamp(1.625rem, 1.25rem + 1.45vw, 2.625rem);
	line-height: 1.1;
	text-wrap: balance;
}

.ceprome-hero-slider__title--corto {
	font-size: clamp(1.875rem, 1.45rem + 2vw, 3.25rem);
}

.ceprome-hero-slider__title--medio {
	font-size: clamp(1.625rem, 1.25rem + 1.45vw, 2.625rem);
}

.ceprome-hero-slider__title--largo {
	max-width: 24ch;
	font-size: clamp(1.4375rem, 1.1rem + 1.05vw, 2.125rem);
}

/* Subtítulo opcional (ceprome_slide_subtitulo): entre el título y el
   botón, peso regular, mismo tono que el eyebrow. No cuenta para el tramo
   de tamaño del título. Fluido entre 15 y 20px. */
.ceprome-hero-slider__subtitulo {
	max-width: 38ch;
	font-weight: 400;
	font-style: normal;
	font-size: clamp(0.9375rem, 0.82rem + 0.5vw, 1.25rem);
	line-height: 1.45;
}

.ceprome-hero-slider__slide--dark .ceprome-hero-slider__subtitulo {
	color: rgba(255, 255, 255, 0.85);
}

.ceprome-hero-slider__slide--light .ceprome-hero-slider__subtitulo {
	color: var(--ceprome-ink);
	opacity: 0.75;
}

.ceprome-hero-slider__cta {
	align-self: flex-start;
	margin-top: 4px;
}

/* Entrada en cascada en cada cambio de slide: antetítulo, título,
   subtítulo y botón, en ese orden, con fundido y 12px de subida,
   escalonados 90ms. Curva de salida suave, sin rebote. fill-mode both:
   antes de su turno cada elemento espera invisible; al salir del slide
   conserva su estado final y se va con el crossfade, no de golpe. */
.ceprome-hero-slider__slide.is-active .ceprome-hero-slider__content > * {
	animation: ceprome-hero-text-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: 0.2s;
}

.ceprome-hero-slider__slide.is-active .ceprome-hero-slider__content > *:nth-child(2) {
	animation-delay: 0.29s;
}

.ceprome-hero-slider__slide.is-active .ceprome-hero-slider__content > *:nth-child(3) {
	animation-delay: 0.38s;
}

.ceprome-hero-slider__slide.is-active .ceprome-hero-slider__content > *:nth-child(4) {
	animation-delay: 0.47s;
}

@keyframes ceprome-hero-text-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Movimiento reducido: sin cascada, sin Ken Burns y sin parallax (la
   imagen vuelve al tamaño del slide). El avance automático lo apaga
   theme.js (el slider arranca en pausa). Queda el crossfade, que es solo
   opacidad. */
@media (prefers-reduced-motion: reduce) {
	.ceprome-hero-slider__image,
	.ceprome-hero-slider__content > * {
		animation: none !important;
	}

	.ceprome-hero-slider__media {
		top: 0;
		transform: none;
		will-change: auto;
	}
}

/* Navegación. Móvil (< 720px): flechas, barras, contador y pausa en una
   sola fila abajo a la izquierda, alineada con el texto (‹ ▬ ▬ 01 / 02 ‖ ›).
   Nunca pasa de --ceprome-hero-reserva-whatsapp: si no cabe, las barras se
   encogen (12px como mínimo; con tres slides caben completas desde 360px) y debajo de 360px se oculta el contador.
   Desde 720px, .ceprome-hero-slider__nav se deshace (display: contents):
   flechas a media altura en los costados y barras + contador + pausa
   (.ceprome-hero-slider__controles) abajo a la izquierda, alineados con
   el texto. */
.ceprome-hero-slider__nav {
	position: absolute;
	left: var(--ceprome-gutter);
	bottom: 20px;
	z-index: 41;
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - var(--ceprome-gutter) - var(--ceprome-hero-reserva-whatsapp));
}

.ceprome-hero-slider__arrow {
	z-index: 3;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(0, 0, 0, 0.25);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ceprome-hero-slider__controles {
	z-index: 41;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.ceprome-hero-slider__barras {
	display: flex;
	gap: 6px;
	min-width: 0;
}

/* Cada barra es el botón del slide (role="tab"): 24px de alto para el
   toque, con la línea visible de 2px centrada. La de abajo es la pista; el
   relleno (::after en blanco) se llena de izquierda a derecha durante
   --ceprome-hero-intervalo en la barra activa, y se congela mientras el
   autoplay está detenido (.is-detenido, lo pone theme.js). El ancho va en
   width y no en flex-basis: Chrome ignora flex-basis al calcular el ancho
   intrínseco del grupo (posicionado en absoluto) y las dejaba en el mínimo. */
.ceprome-hero-slider__barra {
	position: relative;
	flex: 0 1 auto;
	width: 36px;
	min-width: 12px;
	height: 24px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.ceprome-hero-slider__barra::before,
.ceprome-hero-slider__barra::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	border-radius: 1px;
}

.ceprome-hero-slider__barra::before {
	background: rgba(255, 255, 255, 0.35);
}

.ceprome-hero-slider__barra::after {
	background: #FFFFFF;
	transform: scaleX(0);
	transform-origin: left center;
}

.ceprome-hero-slider__barra.is-active::before {
	background: rgba(255, 255, 255, 0.5);
}

.ceprome-hero-slider__barra.is-active::after {
	animation: ceprome-hero-progreso var(--ceprome-hero-intervalo) linear forwards;
}

.ceprome-hero-slider.is-detenido .ceprome-hero-slider__barra.is-active::after {
	animation-play-state: paused;
}

@keyframes ceprome-hero-progreso {
	to {
		transform: scaleX(1);
	}
}

@media (hover: hover) {
	.ceprome-hero-slider__barra:hover::before {
		background: rgba(255, 255, 255, 0.7);
	}
}

/* Contador "01 / 03": decorativo (aria-hidden); las barras ya anuncian
   el slide actual con aria-selected. Cifras tabulares para que no baile
   el ancho al cambiar de número. */
.ceprome-hero-slider__contador {
	flex: none;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	line-height: 1;
	color: #FFFFFF;
	white-space: nowrap;
}

.ceprome-hero-slider__contador-total {
	opacity: 0.7;
}

@media (max-width: 359px) {
	.ceprome-hero-slider__contador {
		display: none;
	}
}

/* Slide en "Modo claro" (texto tinta sobre degradado claro): barras y
   contador en tinta. theme.js pone .is-claro según el slide activo. */
.ceprome-hero-slider.is-claro .ceprome-hero-slider__barra::before {
	background: rgba(34, 31, 29, 0.25);
}

.ceprome-hero-slider.is-claro .ceprome-hero-slider__barra.is-active::before {
	background: rgba(34, 31, 29, 0.4);
}

.ceprome-hero-slider.is-claro .ceprome-hero-slider__barra::after {
	background: var(--ceprome-ink);
}

.ceprome-hero-slider.is-claro .ceprome-hero-slider__contador {
	color: var(--ceprome-ink);
}

/* Pausa/reproducir del autoplay: mismo fondo semitransparente que las
   flechas, sin borde, 28 × 28. Muestra ‖ mientras el autoplay corre y ▶
   cuando está en pausa (data-estado lo pone theme.js). */
.ceprome-hero-slider__pausa {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.25);
	color: #FFFFFF;
	cursor: pointer;
}

.ceprome-hero-slider__pausa[hidden] {
	display: none;
}

/* Solo con puntero real: en pantallas táctiles el :hover se queda pegado
   después del toque. */
@media (hover: hover) {
	.ceprome-hero-slider__pausa:hover {
		background: rgba(0, 0, 0, 0.45);
	}
}

/* Sin el recuadro de toque nativo (rectangular, sobre controles redondos);
   el cambio de estado ya se ve en el ícono. El foco de teclado conserva su
   contorno (:focus-visible). */
.ceprome-hero-slider__arrow,
.ceprome-hero-slider__pausa {
	-webkit-tap-highlight-color: transparent;
}

.ceprome-hero-slider__pausa[data-estado="reproduciendo"] .ceprome-hero-slider__pausa-icono--reproducir,
.ceprome-hero-slider__pausa[data-estado="pausado"] .ceprome-hero-slider__pausa-icono--pausa {
	display: none;
}

@media (min-width: 720px) {
	.ceprome-hero-slider__nav {
		display: contents;
	}

	.ceprome-hero-slider__arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 52px;
		height: 52px;
	}

	.ceprome-hero-slider__arrow--prev {
		left: 32px;
	}

	.ceprome-hero-slider__arrow--next {
		right: 32px;
	}

	/* Mismo borde izquierdo que el texto (.ceprome-hero-slider__content). */
	.ceprome-hero-slider__controles {
		position: absolute;
		bottom: 32px;
		left: max(112px, calc((100vw - var(--ceprome-max-width)) / 2 + var(--ceprome-gutter)));
		max-width: calc(100% - max(112px, calc((100vw - var(--ceprome-max-width)) / 2 + var(--ceprome-gutter))) - var(--ceprome-hero-reserva-whatsapp));
		gap: 16px;
	}

	.ceprome-hero-slider__barras {
		gap: 8px;
	}

	.ceprome-hero-slider__barra {
		width: 48px;
	}
}

/* Los controles (y en móvil el grupo entero) van por encima del botón
   flotante de WhatsApp (z-index 40) y por debajo del banner de cookies
   (90). Pero los paneles del mega menú (z-index 30) se abren encima del
   slider y en algunos anchos llegan a los controles: mientras haya un
   panel o submenú abierto, por hover o por teclado, o mientras sale, los
   controles bajan a su capa normal, y vuelven a subir 200ms después. */
.ceprome-hero-slider__nav,
.ceprome-hero-slider__controles {
	transition: z-index 0s linear 0.2s;
}

body:has(.ceprome-nav__list > .menu-item-has-children:is(.is-hover, .is-open)) .ceprome-hero-slider__nav,
body:has(.ceprome-nav__list > .menu-item-has-children:is(.is-hover, .is-open)) .ceprome-hero-slider__controles,
body:has(.ceprome-nav__list .sub-menu.is-animating-out) .ceprome-hero-slider__nav,
body:has(.ceprome-nav__list .sub-menu.is-animating-out) .ceprome-hero-slider__controles,
body:has(.ceprome-nav.is-open) .ceprome-hero-slider__nav,
body:has(.ceprome-nav.is-open) .ceprome-hero-slider__controles {
	z-index: 3;
	transition-delay: 0s;
}

/* ==========================================================================
   Formación destacada (tinta, acentos dorados, botón guinda)
   ========================================================================== */

/* Mismo tinta que el footer; colores de marca fijos en claro y oscuro. */
.ceprome-destacado {
	background: var(--ceprome-ink);
}

/* El contorno de foco global es guinda (2.3:1 sobre tinta, poco
   visible): dentro del bloque va en dorado (5.8:1). */
.ceprome-destacado :focus-visible {
	outline-color: var(--ceprome-dorado);
}

.ceprome-destacado__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-block: var(--ceprome-section-padding);
}

.ceprome-destacado__media {
	width: 100%;
	border-radius: var(--ceprome-radius);
	overflow: hidden;
}

/* La imagen define la altura con su propia proporción (width/height del
   <img>): sin recorte ni franjas vacías. El tope solo actúa con fotos
   verticales, que se recortan al centro para no estirar la sección. */
.ceprome-destacado__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: cover;
	object-position: center center;
}

/* Sin imagen: bloque liso en el navy de Formación sobre el tinta de la
   sección, para que se lea como espacio de imagen del área. */
.ceprome-destacado__media--vacio {
	aspect-ratio: 16 / 10;
	background: var(--ceprome-navy-elevated);
	border: 1px solid var(--ceprome-navy-border);
}

.ceprome-destacado__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ceprome-destacado__eyebrow {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--ceprome-dorado);
}

.ceprome-destacado__title {
	font-weight: 600;
	font-size: clamp(24px, 3.5vw, 34px);
	color: #FFFFFF;
}

.ceprome-destacado__desc {
	font-size: 16px;
	line-height: 1.6;
	color: var(--c-on-navy-muted);
	max-width: 480px;
}

/* Fecha y modalidad/duración en una línea, unidas con " · " en la
   plantilla. */
.ceprome-destacado__fechas {
	font-size: 13px;
	font-weight: 400;
	color: rgba(205, 141, 17, 0.85); /* 4.6:1 sobre tinta (WCAG AA) */
}

.ceprome-destacado__sep {
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-inline: 0.55em;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
}

@media (min-width: 960px) {
	.ceprome-destacado__inner {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: center;
		gap: 64px;
	}
}

/* ==========================================================================
   Últimas noticias y escritos
   ========================================================================== */

.ceprome-noticias {
	padding-block: var(--ceprome-section-padding);
	border-top: 1px solid var(--c-border);
}

.ceprome-noticias__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

.ceprome-noticias__destacada,
.ceprome-noticias__item {
	color: var(--c-text) !important;
	text-decoration: none !important;
}

.ceprome-noticias__destacada {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Sin imagen, el mismo bloque guinda liso en la proporción de la foto. */
.ceprome-noticias__destacada-media,
.ceprome-noticias__item-media {
	display: block;
	overflow: hidden;
	border-radius: var(--ceprome-radius);
	background: var(--ceprome-guinda);
}

.ceprome-noticias__destacada-media {
	aspect-ratio: 16 / 9;
	margin-bottom: 8px;
}

.ceprome-noticias__destacada-image,
.ceprome-noticias__item-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.ceprome-noticias__destacada-title {
	font-weight: 800;
	font-size: clamp(20px, 2.6vw, 28px);
	line-height: 1.25;
}

.ceprome-noticias__destacada:hover .ceprome-noticias__destacada-title,
.ceprome-noticias__destacada:focus-visible .ceprome-noticias__destacada-title,
.ceprome-noticias__item:hover .ceprome-noticias__item-title,
.ceprome-noticias__item:focus-visible .ceprome-noticias__item-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ceprome-noticias__excerpt {
	font-size: 16px;
	line-height: 1.6;
	color: var(--c-text-muted);
}

.ceprome-noticias__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-content: start;
}

/* Secundarias: una sola columna apilada, miniatura cuadrada a la
   izquierda y categoría, título y fecha a la derecha. Separadas por una
   línea fina, como filas de una lista. */
.ceprome-noticias__item {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	align-items: start;
	gap: 16px;
	padding-top: 20px;
	border-top: 1px solid var(--c-border);
}

.ceprome-noticias__item-media {
	aspect-ratio: 1 / 1;
}

.ceprome-noticias__item-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ceprome-noticias__item-title {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.ceprome-noticias__date {
	font-size: 13px;
	color: var(--c-text-subtle);
}

/* En pantallas muy angostas la miniatura le quita demasiado ancho al
   título: la secundaria queda solo con texto. */
@media (max-width: 359px) {
	.ceprome-noticias__item {
		grid-template-columns: minmax(0, 1fr);
	}

	.ceprome-noticias__item-media {
		display: none;
	}
}

/* Sin línea ni relleno extra encima del botón: el espacio bajo la sección
   es solo el padding de siempre (--ceprome-section-padding). */
.ceprome-noticias__actions {
	margin-top: clamp(32px, 4vw, 48px);
	display: flex;
	justify-content: center;
}

/* Principal grande a la izquierda | columna de 4 secundarias a la
   derecha; la primera arranca alineada con la imagen de la principal. */
@media (min-width: 960px) {
	.ceprome-noticias__grid {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		gap: 48px;
	}

	.ceprome-noticias__grid--sola {
		grid-template-columns: minmax(0, 1fr);
		max-width: 760px;
	}

	.ceprome-noticias__list > li:first-child .ceprome-noticias__item {
		padding-top: 0;
		border-top: 0;
	}
}

@media (min-width: 1200px) {
	.ceprome-noticias__grid {
		gap: 56px;
	}

	.ceprome-noticias__item {
		grid-template-columns: 88px minmax(0, 1fr);
		gap: 18px;
	}

	.ceprome-noticias__item-title {
		font-size: 16px;
	}
}

/* ==========================================================================
   Tres pilares
   ========================================================================== */

.ceprome-pilares {
	padding-block: var(--ceprome-section-padding);
	border-top: 1px solid var(--c-border);
}

/* Noticias y pilares comparten fondo: sumar el padding inferior de una y
   el superior de la otra dejaba el doble de aire que en los cambios de
   color. Aquí queda un solo --ceprome-section-padding entre el botón de
   noticias y las tarjetas, sin línea (las tarjetas ya separan). */
.ceprome-noticias + .ceprome-pilares {
	padding-top: 0;
	border-top: 0;
}

.ceprome-pilares__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

/* Tarjeta elevada, sin sombra: fondo elevado del tema (blanco en claro,
   un paso más claro que la página en oscuro) y borde sutil. */
.ceprome-pilares__item {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(28px, 3vw, 40px);
	background: var(--c-bg-elevated);
	border: 1px solid var(--c-border);
	border-radius: 8px;
}

/* Guinda de marca en claro; en oscuro, el guinda claro del tema
   (--c-link) para que el número se lea sobre el fondo elevado. */
.ceprome-pilares__numero {
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.04em;
	color: var(--c-link);
}

.ceprome-pilares__title {
	font-weight: 600;
	font-size: clamp(22px, 2.4vw, 26px);
}

.ceprome-pilares__desc {
	font-size: 16px;
	line-height: 1.6;
	color: var(--c-text-muted);
	margin-bottom: 10px;
}

/* margin-top: auto lo manda al fondo de la tarjeta. */
.ceprome-pilares__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	width: 100%;
	text-align: center;
}

/* En tres columnas, cada tarjeta comparte las filas de la cuadrícula
   (subgrid): número, título, texto y botón quedan a la misma altura entre
   columnas aunque un título o un botón ocupe dos líneas (a 1024 px, "Gestión
   Institucional"). El botón siempre va en la fila 4, haya texto o no. */
@media (min-width: 960px) {
	.ceprome-pilares__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: 0;
	}

	.ceprome-pilares__item {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
		row-gap: 14px;
		align-content: start;
	}

	.ceprome-pilares__cta {
		grid-row: 4;
		margin-top: 0;
	}
}

/* ==========================================================================
   Red de Vinculación
   ========================================================================== */

.ceprome-vinculacion {
	position: relative;
	background: var(--ceprome-ink);
}

/* Imagen de fondo opcional (Ajustes → CEPROME): cubre la sección y lleva
   una capa tinta al 78% para que el texto blanco y los logos se lean sobre
   cualquier foto. Colores de marca fijos en claro y oscuro. */
.ceprome-vinculacion__fondo {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.ceprome-vinculacion__fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(34, 31, 29, 0.78);
}

.ceprome-vinculacion__fondo-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.ceprome-vinculacion--con-fondo .ceprome-vinculacion__inner {
	position: relative;
}

.ceprome-vinculacion__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-block: var(--ceprome-section-padding);
}

.ceprome-vinculacion__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ceprome-vinculacion__title {
	font-weight: 800;
	font-size: clamp(26px, 3.4vw, 36px);
	color: #FFFFFF;
	max-width: 460px;
}

.ceprome-vinculacion__desc {
	font-size: 16px;
	line-height: 1.6;
	color: var(--c-on-navy-muted);
	max-width: 420px;
}

.ceprome-vinculacion__body > .ceprome-button {
	align-self: flex-start;
}

.ceprome-vinculacion__logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

/* Móvil: 6 logos (3 × 2). Tablet: 8 (4 × 2). Escritorio: 12 (4 × 3). */
.ceprome-vinculacion__logo:nth-child(n + 7) {
	display: none;
}

.ceprome-vinculacion__logo-link {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 10%;
	background: #FFFFFF;
	border: 1px solid #E7E4DD;
	border-radius: 8px;
	transition: border-color 150ms ease;
}

.ceprome-vinculacion__logo-link:hover,
.ceprome-vinculacion__logo-link:focus-visible {
	border-color: var(--ceprome-guinda);
}

.ceprome-vinculacion__logo-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
	.ceprome-vinculacion__logo-link {
		transition: none;
	}
}

@media (min-width: 720px) {
	.ceprome-vinculacion__logos {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
	}

	.ceprome-vinculacion__logo:nth-child(n + 7) {
		display: block;
	}

	.ceprome-vinculacion__logo:nth-child(n + 9) {
		display: none;
	}
}

@media (min-width: 1080px) {
	.ceprome-vinculacion__inner {
		display: grid;
		grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
		align-items: center;
		gap: 72px;
	}

	.ceprome-vinculacion__logo:nth-child(n + 9) {
		display: block;
	}
}

/* ==========================================================================
   Publicaciones
   ========================================================================== */

.ceprome-publicaciones {
	padding-block: var(--ceprome-section-padding);
}

/* Las tarjetas van centradas: el título y el enlace al catálogo también,
   sobre el mismo eje. */
.ceprome-publicaciones__heading {
	text-align: center;
}

.ceprome-publicaciones__actions {
	display: flex;
	justify-content: center;
}

.ceprome-publicaciones__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	margin-bottom: 40px;
}

.ceprome-publicaciones__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.ceprome-publicaciones__cover {
	width: 100%;
	aspect-ratio: 2 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--c-border);
}

.ceprome-publicaciones__cover-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ceprome-publicaciones__title {
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
}

/* Al fondo de la tarjeta: los botones quedan alineados entre columnas
   aunque los títulos ocupen distinto número de líneas. */
.ceprome-publicaciones__cta {
	margin-top: auto;
	padding: 11px 24px;
	font-size: 14px;
}

@media (min-width: 720px) {
	.ceprome-publicaciones__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.ceprome-publicaciones__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Boletín
   ========================================================================== */

.ceprome-boletin {
	background: var(--ceprome-guinda);
}

.ceprome-boletin__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: clamp(48px, 8vw, 72px);
}

.ceprome-boletin__title {
	font-weight: 600;
	font-size: clamp(22px, 2.6vw, 26px);
	color: #FFFFFF;
}

.ceprome-boletin__desc {
	font-size: 15px;
	color: var(--c-on-guinda);
}

.ceprome-boletin__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ceprome-boletin__input {
	width: 100%;
	padding: 13px 16px;
	border-radius: var(--ceprome-radius);
	border: none;
	background: #FFFFFF;
	color: var(--ceprome-ink);
	font-family: var(--ceprome-font);
	font-size: 15px;
}

.ceprome-boletin__campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* El campo va dentro de .ceprome-form__field (lo necesita
   initFormulariosAjax() para marcar el error), cuya regla general pinta
   los campos con los colores del tema; en la franja guinda el campo es
   blanco en claro y oscuro. */
.ceprome-boletin .ceprome-form__field.ceprome-boletin__campo input.ceprome-boletin__input {
	padding: 13px 16px;
	border: none;
	background: #FFFFFF;
	color: var(--ceprome-ink);
}

/* Aviso de privacidad bajo el botón, sobre la franja guinda (fija en
   claro y oscuro). */
.ceprome-boletin__aviso {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--c-on-guinda);
}

.ceprome-boletin__aviso a {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Error del campo y avisos de envío: los estilos generales usan guinda,
   que sobre esta franja no se lee. */
.ceprome-boletin .ceprome-form__error {
	color: #FFFFFF;
	font-weight: 600;
}

.ceprome-boletin .ceprome-boletin__input[aria-invalid="true"] {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

.ceprome-boletin .ceprome-form__banner {
	margin-bottom: 12px;
	background: #FFFFFF;
}

.ceprome-boletin .ceprome-form__banner--ok {
	color: #0a7a3d;
}

.ceprome-boletin .ceprome-form__banner--error {
	color: var(--ceprome-guinda);
}

@media (min-width: 960px) {
	.ceprome-boletin__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.ceprome-boletin__accion {
		max-width: 420px;
	}

	.ceprome-boletin__form {
		align-items: flex-start;
	}

	.ceprome-boletin__copy {
		max-width: 440px;
	}

	.ceprome-boletin__form {
		flex-direction: row;
		flex-shrink: 0;
	}

	.ceprome-boletin__input {
		width: 260px;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.ceprome-footer {
	background: var(--ceprome-ink);
	color: var(--c-bg);
}

.ceprome-footer a {
	color: var(--c-on-navy-muted) !important;
}

.ceprome-footer__top {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-block: clamp(48px, 8vw, 72px) 40px;
}

.ceprome-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 360px;
}

.ceprome-footer__brand-name {
	font-weight: 600;
	font-size: 20px;
	color: #FFFFFF;
}

/* Logo en negativo — el footer lo usa siempre (su fondo es navy fijo,
   sin importar el modo claro/oscuro del sitio), nunca el principal. Sin
   negativo capturado, footer.php cae a .ceprome-footer__brand-name. */
.ceprome-footer__logo-img {
	display: block;
	height: 32px;
	width: auto;
}

.ceprome-footer__brand-desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--c-on-navy-muted);
}

.ceprome-footer__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ceprome-footer__col-title {
	font-size: 14px;
	font-weight: 600;
	color: #F7F6F2;
}

.ceprome-footer__nav-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceprome-footer__nav-list a,
.ceprome-footer__col > a {
	font-size: 14px;
}

.ceprome-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	border-top: 1px solid #3A362F;
	padding-block: 28px;
}

.ceprome-footer__copy {
	font-size: 13px;
	color: var(--c-text-subtle);
}

.ceprome-footer__social {
	display: flex;
	gap: 14px;
}

.ceprome-footer__social a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid #585857;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-on-navy-muted) !important;
	text-decoration: none !important;
}

.ceprome-footer__social a:hover {
	border-color: #F7F6F2;
	color: #FFFFFF !important;
}

@media (min-width: 960px) {
	.ceprome-footer__top {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}

	.ceprome-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.ceprome-footer__logo-img {
		height: 40px;
	}
}

/* ==========================================================================
   Single: programa-academico (Diplomado / Master)
   ========================================================================== */

.ceprome-badge {
	display: inline-block;
	font-weight: 600;
	font-size: 13px;
	padding: 6px 14px;
	border-radius: var(--ceprome-radius);
}

/* Navy/gold: acotado a la insignia de Tipo, la señal de "programa de pago" */
.ceprome-badge--tipo {
	background: var(--ceprome-navy);
	color: var(--ceprome-gold);
}

/* Estado del webinar (Próximo/Archivado) — guinda, no navy/gold: ese acento
   queda reservado para la insignia de Tipo (programa de pago). */
.ceprome-badge--estado {
	background: color-mix(in srgb, var(--ceprome-guinda) 12%, transparent);
	/* --c-guinda-profunda: guinda oscuro en claro, rosa claro en oscuro
	   (el guinda oscuro sobre el tinte no se leía en modo oscuro). */
	color: var(--c-guinda-profunda);
}

/* Categoría de un artículo nativo (blog) — mismo tinte guinda que estado,
   ya que ambas son voz institucional general, no la voz navy/gold acotada
   a Tipo de programa académico. */
.ceprome-badge--categoria {
	background: color-mix(in srgb, var(--ceprome-guinda) 12%, transparent);
	color: var(--ceprome-guinda-hover);
}

.ceprome-breadcrumb {
	padding-top: 24px;
}

.ceprome-breadcrumb__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	color: var(--c-text-subtle);
}

.ceprome-breadcrumb__inner a {
	color: var(--c-text-subtle);
}

/* Hero de página interior (~2.7:1) — compartido por Diplomado/Master,
   Webinar (próximo, sin grabación aún) y Donar. */
.ceprome-hero-interior {
	width: 100%;
	aspect-ratio: 2.7 / 1;
	margin-top: 24px;
	border: 1px dashed #D9D9D9;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.ceprome-hero-interior__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ceprome-programa__intro {
	padding-block: 48px clamp(40px, 6vw, 72px);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ceprome-programa__title {
	font-weight: 800;
	font-size: clamp(28px, 4.5vw, 44px);
	line-height: 1.1;
	max-width: 780px;
}

.ceprome-programa__precio {
	font-weight: 800;
	font-size: clamp(22px, 2.6vw, 28px);
	color: var(--ceprome-guinda);
}

.ceprome-programa__lead {
	font-size: 17px;
	line-height: 1.6;
	color: var(--c-text-muted);
	max-width: 620px;
}

.ceprome-programa__fechas {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ceprome-programa__rango {
	font-weight: 600;
	font-size: 15px;
}

.ceprome-programa__horario {
	font-size: 14px;
	color: var(--c-text-muted);
}

.ceprome-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.ceprome-share__label {
	font-weight: 600;
	font-size: 13px;
	color: var(--c-text-subtle);
}

.ceprome-share__link {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--c-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-text-muted) !important;
}

.ceprome-share__link svg {
	width: 14px;
	height: 14px;
}

.ceprome-programa__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding-bottom: var(--ceprome-section-padding);
	border-top: 1px solid var(--c-border);
	padding-top: 40px;
}

.ceprome-entry-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--c-text-muted);
}

.ceprome-entry-content h2 {
	font-weight: 600;
	font-size: 26px;
	color: var(--c-text);
}

.ceprome-entry-content h3 {
	font-weight: 600;
	font-size: 20px;
	color: var(--c-text);
}

.ceprome-entry-content ul,
.ceprome-entry-content ol {
	margin: 0;
	padding-left: 20px;
	line-height: 1.9;
}

.ceprome-entry-content > * {
	margin: 0;
}

/* <details>/<summary> nativo: bloque "Detalles" de Gutenberg dentro del
   contenido libre y el repetidor ceprome_faqs vía template-parts/faq.php —
   mismo look en los dos casos, sin JS. */
.ceprome-entry-content details,
.ceprome-faq__item {
	border-top: 1px solid var(--c-border);
	padding-block: 18px;
}

.ceprome-entry-content summary,
.ceprome-faq__item summary {
	font-weight: 600;
	font-size: 16px;
	color: var(--c-text);
	cursor: pointer;
}

.ceprome-entry-content details p,
.ceprome-faq__item p {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--c-text-muted);
}

/* template-parts/faq.php — Diplomado/Master y Webinar */
.ceprome-faq {
	border-top: 1px solid var(--c-border);
	padding-block: 56px var(--ceprome-section-padding);
}

.ceprome-faq__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 760px;
}

/* El gap del flex ya separa el título del primer detalle — el margen
   propio de .ceprome-section-title duplicaría ese espacio aquí. */
.ceprome-faq__inner .ceprome-section-title {
	margin-bottom: 0;
}

.ceprome-programa__temario h2 {
	font-weight: 600;
	font-size: 26px;
	color: var(--c-text);
	margin-bottom: 16px;
}

.ceprome-programa__aside {
	display: flex;
	flex-direction: column;
	gap: 28px;
	background: color-mix(in srgb, var(--ceprome-guinda) 10%, transparent);
	padding: 32px;
	border-radius: var(--ceprome-radius);
	height: fit-content;
}

.ceprome-programa__cta {
	text-align: center;
}

/* Compartido entre el panel lateral de Diplomado/Master y los "datos
   rápidos" de Webinar */
.ceprome-aside-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ceprome-aside-item--bordered {
	border-top: 1px solid var(--c-border);
	padding-top: 20px;
}

.ceprome-aside-item__label {
	font-weight: 600;
	font-size: 13px;
	color: var(--c-text-subtle);
}

.ceprome-aside-item__value {
	font-size: 15px;
	color: var(--c-text);
}

@media (min-width: 960px) {
	.ceprome-programa__body {
		grid-template-columns: 1.7fr 1fr;
		gap: 72px;
	}

	.ceprome-programa__aside {
		position: sticky;
		top: 24px;
	}
}

/* Ponentes */

.ceprome-ponentes {
	padding-block: var(--ceprome-section-padding);
	background: color-mix(in srgb, var(--ceprome-guinda) 5%, var(--c-bg));
}

.ceprome-ponentes__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
}

.ceprome-ponentes__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--c-text) !important;
	text-decoration: none !important;
}

.ceprome-ponentes__photo-wrap {
	position: relative;
}

.ceprome-ponentes__photo,
.ceprome-ponentes__photo--empty {
	width: 100%;
	aspect-ratio: 1;
	border-radius: var(--ceprome-radius);
	object-fit: cover;
}

.ceprome-ponentes__photo--empty {
	background: #EFEDE8;
	border: 1px dashed #D9D9D9;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ceprome-ponentes__flag {
	position: absolute;
	bottom: -10px;
	right: -10px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--c-bg-elevated);
	border: 2px solid var(--c-bg);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.ceprome-ponentes__name {
	font-weight: 600;
	font-size: 16px;
	margin-top: 4px;
}

.ceprome-ponentes__role {
	font-size: 13px;
	color: var(--c-text-muted);
}

@media (min-width: 720px) {
	.ceprome-ponentes__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.ceprome-ponentes__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Single: webinar
   ========================================================================== */

.ceprome-webinar-vimeo {
	background: var(--ceprome-navy);
	padding-block: clamp(24px, 5vw, 48px);
	margin-top: 24px;
}

/* .ceprome-webinar__panel, __panel-left, __title, __panel-right, __fecha y
   __body de aquí abajo son el panel genérico "título + compartir a la
   izquierda, meta a la derecha" bajo el hero — también usado por single.php
   (artículos nativos), no exclusivo de webinar pese al nombre de la clase,
   igual que .ceprome-hero-interior más arriba. */

.ceprome-vimeo-embed {
	max-width: var(--ceprome-max-width);
	margin-inline: auto;
	padding-inline: var(--ceprome-gutter);
}

.ceprome-vimeo-embed__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000000;
}

.ceprome-vimeo-embed__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.ceprome-webinar__panel {
	padding-block: clamp(40px, 6vw, 72px);
	display: flex;
	flex-direction: column;
	gap: 28px;
	border-bottom: 1px solid var(--c-border);
}

.ceprome-webinar__panel-left {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* La columna flex estira a sus hijos: la insignia de estado se quedaría
   como una franja a todo el ancho. */
.ceprome-webinar__panel-left .ceprome-badge {
	align-self: flex-start;
}

.ceprome-webinar__title {
	font-weight: 800;
	font-size: clamp(28px, 4.5vw, 40px);
	line-height: 1.15;
}

.ceprome-webinar__panel-right {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.ceprome-webinar__fecha {
	font-weight: 600;
	font-size: 16px;
}

@media (min-width: 960px) {
	.ceprome-webinar__panel {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 64px;
	}

	.ceprome-webinar__panel-right {
		flex-shrink: 0;
		align-items: flex-end;
		text-align: right;
	}
}

.ceprome-webinar__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding-block: var(--ceprome-section-padding);
}

/* Sin min-width: 0, una línea que no puede partirse (texto pegado con
   &nbsp; entre palabras) ensancha la columna y empuja el aside fuera de
   la pantalla. overflow-wrap: anywhere es la red de seguridad para esa
   misma línea: la parte donde haga falta en vez de desbordar la página.
   El arreglo de fondo es volver a pegar el texto sin formato. */
.ceprome-webinar__body > * {
	min-width: 0;
}

.ceprome-webinar__body .ceprome-entry-content {
	overflow-wrap: anywhere;
}

.ceprome-webinar__aside {
	display: flex;
	flex-direction: column;
	gap: 24px;
	height: fit-content;
}

@media (min-width: 960px) {
	.ceprome-webinar__body {
		grid-template-columns: 1.7fr 1fr;
		gap: 72px;
	}

	.ceprome-webinar__aside {
		position: sticky;
		top: 24px;
	}
}

/* Cuerpo de single.php (artículo nativo) — antes reutilizaba
   ceprome-webinar__body (grid de 1.7fr/1fr pensado para contenido+aside),
   pero single.php nunca trae aside: a partir de 960px el contenido se
   quedaba encajonado en la columna de 1.7fr, con toda la columna de 1fr
   vacía a la derecha — no es un ancho angosto centrado, es un hueco
   asimétrico. Columna única, centrada, con el mismo ancho de texto
   compartido que el resto del sitio. */
.ceprome-articulo__body {
	max-width: var(--ceprome-content-width);
	margin-inline: auto;
	padding-block: var(--ceprome-section-padding);
}

/* ==========================================================================
   Single: webinar (ficha nueva, clases ceprome-wb-*)
   Dos variantes (ver single-webinar.php). Las bandas navy, el encabezado
   del próximo y la franja final son fijos en claro y oscuro. Botón dorado
   #cd8d11 con texto navy #0e1b29 (≈ 6:1). Las clases ceprome-webinar__*
   de arriba siguen sirviendo a single.php y a los programas.
   ========================================================================== */

.ceprome-wb__ruta {
	padding-bottom: 16px;
}

.ceprome-wb__seccion-titulo {
	font-weight: 600;
	font-size: clamp(26px, 2.6vw, 32px);
	line-height: 1.15;
	color: var(--c-text);
	margin-bottom: clamp(20px, 2.5vw, 32px);
}

.ceprome-wb__texto {
	max-width: 720px;
	font-size: 17px;
	line-height: 1.6;
}

/* --- Grabación --- */

.ceprome-wb__video-banda {
	background: var(--ceprome-navy);
	padding-block: clamp(24px, 4vw, 56px);
}

.ceprome-wb__video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--ceprome-radius);
	overflow: hidden;
	background: #000000;
}

.ceprome-wb__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ceprome-wb__encabezado {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	padding-block: clamp(28px, 4vw, 56px) clamp(24px, 3vw, 40px);
}

/* Etiqueta "Grabación": navy con texto dorado, fija en claro y oscuro. */
.ceprome-wb__etiqueta-grabacion {
	display: inline-block;
	padding: 5px 10px;
	border-radius: var(--ceprome-radius);
	background: var(--ceprome-navy);
	color: var(--ceprome-dorado);
	font-weight: 600;
	font-size: 13px;
}

.ceprome-wb__titulo {
	max-width: 960px;
	font-weight: 800;
	font-size: clamp(30px, 3.4vw, 48px);
	line-height: 1.1;
}

/* Datos y compartir: apilados en móvil, en una fila en escritorio. */
.ceprome-wb__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	width: 100%;
}

/* Datos como pares con etiqueta, uno junto al otro; nunca con punto medio. */
.ceprome-wb__datos {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin: 0;
}

.ceprome-wb__dato dt {
	font-size: 12px;
	color: var(--c-text-muted);
}

.ceprome-wb__dato dd {
	margin: 3px 0 0;
	font-weight: 600;
	font-size: 16px;
	color: var(--c-text);
}

/* Mismos íconos de compartir del sitio, en círculos de 44 px (toque). */
.ceprome-wb .ceprome-share {
	gap: 8px;
}

.ceprome-wb .ceprome-share__label {
	margin-right: 4px;
	font-weight: 400;
	font-size: 12px;
	color: var(--c-text-muted);
}

.ceprome-wb .ceprome-share__link {
	width: 44px;
	height: 44px;
	color: var(--c-text) !important;
}

.ceprome-wb .ceprome-share__link svg {
	width: 16px;
	height: 16px;
}

/* Impartieron: franja compacta a todo lo ancho, foto redonda. */
.ceprome-wb__impartieron {
	border-block: 1px solid var(--c-border);
}

.ceprome-wb__impartieron-contenido {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-block: 20px;
}

.ceprome-wb__impartieron-titulo {
	font-weight: 600;
	font-size: 13px;
	color: var(--c-text-muted);
}

.ceprome-wb__impartieron-lista {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceprome-wb__persona {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--c-text) !important;
	text-decoration: none !important;
}

.ceprome-wb__persona-foto {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
}

.ceprome-wb__persona-foto--vacia {
	background: var(--c-band-bg);
	color: var(--c-text-muted);
	font-weight: 600;
}

.ceprome-wb__persona-texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-width: 360px;
}

.ceprome-wb__persona-nombre {
	font-weight: 600;
	font-size: 16px;
}

.ceprome-wb__persona:hover .ceprome-wb__persona-nombre,
.ceprome-wb__persona:focus-visible .ceprome-wb__persona-nombre {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ceprome-wb__persona-rol {
	font-size: 13px;
	color: var(--c-text-muted);
}

.ceprome-wb__descripcion {
	padding-block: 28px 48px;
}

/* Otros webinars: banda navy; "Ver todos" arriba a la derecha en
   escritorio y al final en móvil (orden de la cuadrícula). */
.ceprome-wb__otros {
	background: var(--ceprome-navy);
	color: #FFFFFF;
}

.ceprome-wb__otros-contenido {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"titulo"
		"lista"
		"todos";
	gap: 32px;
	padding-block: 48px 56px;
}

.ceprome-wb__otros-titulo {
	grid-area: titulo;
	font-weight: 600;
	font-size: clamp(26px, 2.6vw, 32px);
	line-height: 1.15;
	color: #FFFFFF;
}

.ceprome-wb__otros-todos {
	grid-area: todos;
	justify-self: start;
	font-weight: 600;
	font-size: 15px;
	color: var(--ceprome-dorado) !important;
}

.ceprome-wb__otros-todos:hover,
.ceprome-wb__otros-todos:focus-visible {
	color: #E3A83A !important;
}

.ceprome-wb__otros-lista {
	grid-area: lista;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceprome-wb__tarjeta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: #FFFFFF !important;
	text-decoration: none !important;
}

.ceprome-wb__tarjeta-imagen {
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: var(--ceprome-radius);
	overflow: hidden;
	background: var(--ceprome-navy-elevated);
}

.ceprome-wb__tarjeta-imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sin imagen destacada: logo de CEPROME en dorado, centrado (el SVG del
   logo hace de máscara; la URL llega en --ceprome-wb-logo). */
.ceprome-wb__tarjeta-imagen--logo {
	position: relative;
}

.ceprome-wb__tarjeta-imagen--logo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ceprome-dorado);
	-webkit-mask: var(--ceprome-wb-logo) center / 45% auto no-repeat;
	mask: var(--ceprome-wb-logo) center / 45% auto no-repeat;
}

/* Webinar pasado sin liga de grabación: nota en lugar del video. */
.ceprome-wb__video-banda--pendiente {
	padding-block: clamp(40px, 6vw, 72px);
}

.ceprome-wb__grabacion-pendiente {
	font-weight: 600;
	font-size: clamp(18px, 1.8vw, 22px);
	color: #E7E4DD;
	text-align: center;
}

.ceprome-wb__tarjeta-estado {
	align-self: flex-start;
	padding: 3px 8px;
	border: 1px solid var(--ceprome-dorado);
	border-radius: var(--ceprome-radius);
	font-weight: 600;
	font-size: 12px;
	color: var(--ceprome-dorado);
}

.ceprome-wb__tarjeta-estado--proximo {
	background: var(--ceprome-dorado);
	color: var(--ceprome-navy);
}

.ceprome-wb__tarjeta-fecha {
	font-size: 12px;
	color: #AAB4C0;
}

.ceprome-wb__tarjeta-titulo {
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
}

.ceprome-wb__tarjeta:hover .ceprome-wb__tarjeta-titulo,
.ceprome-wb__tarjeta:focus-visible .ceprome-wb__tarjeta-titulo {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ceprome-wb__tarjeta:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 4px;
}

/* --- Próximo --- */

.ceprome-wb__hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 620px;
	overflow: hidden;
	background: #6F6862;
	color: #FFFFFF;
}

.ceprome-wb__hero-fondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Capa gris cálida (no navy) sobre la imagen. */
.ceprome-wb__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(34, 31, 29, 0.68);
}

/* En móvil el texto baja y deja ver la imagen arriba. */
.ceprome-wb__hero-contenido {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
	padding-block: 140px 36px;
}

.ceprome-wb__hero-contenido > * {
	max-width: 640px;
}

.ceprome-wb__etiqueta-proximo {
	display: inline-block;
	padding: 5px 10px;
	border-radius: var(--ceprome-radius);
	background: var(--ceprome-dorado);
	color: var(--ceprome-navy);
	font-weight: 600;
	font-size: 13px;
}

.ceprome-wb__hero-titulo {
	font-weight: 800;
	font-size: clamp(32px, 3.7vw, 52px);
	line-height: 1.1;
	color: #FFFFFF;
}

.ceprome-wb__horario {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ceprome-wb__fecha {
	font-weight: 600;
	font-size: 20px;
	color: #FFFFFF;
}

.ceprome-wb__hora,
.ceprome-wb__hora-local {
	font-size: 15px;
	color: #E7E4DD;
}

.ceprome-wb__acciones {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
	width: 100%;
}

.ceprome-wb__boton-oro {
	background: var(--ceprome-dorado);
	color: var(--ceprome-navy) !important;
	border: 1px solid var(--ceprome-dorado);
	text-align: center;
}

.ceprome-wb__boton-oro:hover,
.ceprome-wb__boton-oro:focus-visible {
	background: #B37A0E;
	border-color: #B37A0E;
}

.ceprome-wb__calendario {
	position: relative;
	text-align: center;
}

/* "Agregar a mi calendario": enlace subrayado que abre el menú. */
.ceprome-wb__calendario-enlace {
	display: inline-block;
	padding-block: 4px;
	font-weight: 600;
	font-size: 14px;
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	list-style: none;
}

.ceprome-wb__calendario-enlace::-webkit-details-marker {
	display: none;
}

.ceprome-wb__calendario-enlace:hover,
.ceprome-wb__calendario[open] .ceprome-wb__calendario-enlace {
	text-decoration-thickness: 2px;
}

.ceprome-wb__calendario-enlace:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 4px;
}

.ceprome-wb__calendario-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
	margin: 0;
	padding: 6px 0;
	list-style: none;
	text-align: left;
	background: #FFFFFF;
	border-radius: var(--ceprome-radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.ceprome-wb__calendario-menu a {
	display: block;
	padding: 10px 16px;
	color: var(--ceprome-ink) !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.ceprome-wb__calendario-menu a:hover,
.ceprome-wb__calendario-menu a:focus-visible {
	background: #F1EFEA;
}

/* Ponentes: foto cuadrada a la izquierda, texto a la derecha. */
.ceprome-wb__ponentes {
	padding-block: 36px 8px;
}

.ceprome-wb__ponentes-lista {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px 48px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceprome-wb__ponente {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding-top: 18px;
	border-top: 1px solid var(--c-border);
}

.ceprome-wb__ponente-foto {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	border-radius: var(--ceprome-radius);
	object-fit: cover;
}

.ceprome-wb__ponente-foto--vacia {
	background: var(--c-band-bg);
	color: var(--c-text-muted);
	font-weight: 600;
	font-size: 24px;
}

.ceprome-wb__ponente-texto {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.ceprome-wb__ponente-nombre {
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	color: var(--c-text);
}

.ceprome-wb__ponente-rol {
	font-size: 14px;
	color: var(--c-text-muted);
}

.ceprome-wb__ponente-perfil {
	margin-top: 4px;
	font-weight: 600;
	font-size: 14px;
	color: var(--c-link) !important;
}

/* Descripción y "Qué verás" con los datos prácticos al lado (7/5 en
   escritorio); apilados en móvil. */
.ceprome-wb__detalle {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	padding-block: 32px 48px;
}

.ceprome-wb__detalle-principal {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

.ceprome-wb__que-veras-titulo {
	margin-bottom: 14px;
	font-weight: 600;
	font-size: clamp(21px, 1.7vw, 24px);
	line-height: 1.2;
	color: var(--c-text);
}

.ceprome-wb__que-veras-lista {
	counter-reset: ceprome-que-veras;
	max-width: 720px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--c-border);
}

.ceprome-wb__que-veras-lista li {
	counter-increment: ceprome-que-veras;
	display: flex;
	gap: 16px;
	padding-block: 14px;
	border-top: 1px solid var(--c-border);
	font-size: 16px;
	line-height: 1.5;
	color: var(--c-text);
}

.ceprome-wb__que-veras-lista li::before {
	content: counter(ceprome-que-veras);
	flex-shrink: 0;
	min-width: 1ch;
	font-weight: 600;
	color: var(--ceprome-navy);
}

/* Números navy en claro (el dorado no tiene contraste sobre fondo claro);
   en oscuro el navy desaparece sobre el fondo, así que van en color de texto. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .ceprome-wb__que-veras-lista li::before {
		color: var(--c-text);
	}
}

:root[data-theme="dark"] .ceprome-wb__que-veras-lista li::before {
	color: var(--c-text);
}

.ceprome-wb__practicos-lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 20px;
	margin: 0;
	border-bottom: 1px solid var(--c-border);
}

.ceprome-wb__practicos-lista > div {
	padding-block: 14px;
	border-top: 1px solid var(--c-border);
}

/* Con un número impar de datos, el último ocupa las dos columnas. */
.ceprome-wb__practicos-lista > div:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.ceprome-wb__practicos-lista dt {
	font-size: 12px;
	color: var(--c-text-muted);
}

.ceprome-wb__practicos-lista dd {
	margin: 3px 0 0;
	font-weight: 600;
	font-size: 15px;
	color: var(--c-text);
}

/* Franja final navy con la fecha, la hora e Inscribirme. */
.ceprome-wb__cierre {
	background: var(--ceprome-navy);
	color: #FFFFFF;
}

.ceprome-wb__cierre-contenido {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding-block: 36px;
}

.ceprome-wb__cierre-texto {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ceprome-wb__cierre-fecha {
	font-weight: 600;
	font-size: clamp(22px, 2vw, 28px);
	line-height: 1.2;
	color: #FFFFFF;
}

.ceprome-wb__cierre-hora {
	font-size: 15px;
	color: #C3CAD3;
}

@media (min-width: 720px) {
	.ceprome-wb__meta {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: 24px 32px;
	}

	.ceprome-wb__datos {
		gap: 12px 48px;
	}

	.ceprome-wb__dato dt {
		font-size: 13px;
	}

	.ceprome-wb__dato dd {
		margin-top: 4px;
		font-size: 18px;
	}

	.ceprome-wb .ceprome-share {
		gap: 10px;
	}

	.ceprome-wb .ceprome-share__label {
		font-size: 13px;
	}

	.ceprome-wb .ceprome-share__link {
		width: 40px;
		height: 40px;
	}

	.ceprome-wb__impartieron-contenido {
		flex-direction: row;
		align-items: center;
		gap: 24px 48px;
		padding-block: 32px;
	}

	.ceprome-wb__impartieron-titulo {
		flex-shrink: 0;
		font-size: 14px;
	}

	.ceprome-wb__impartieron-lista {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px 48px;
	}

	.ceprome-wb__persona {
		gap: 16px;
	}

	.ceprome-wb__persona-foto {
		width: 64px;
		height: 64px;
	}

	.ceprome-wb__persona-nombre {
		font-size: 17px;
	}

	.ceprome-wb__persona-rol {
		font-size: 14px;
	}

	.ceprome-wb__texto {
		font-size: 18px;
	}

	.ceprome-wb__descripcion {
		padding-block: 48px 64px;
	}

	.ceprome-wb__otros-contenido {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"titulo todos"
			"lista lista";
		align-items: baseline;
		gap: 40px 24px;
		padding-block: 80px 96px;
	}

	.ceprome-wb__otros-lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 48px;
	}

	.ceprome-wb__tarjeta {
		gap: 14px;
	}

	.ceprome-wb__tarjeta-estado {
		padding: 3px 9px;
		font-size: 13px;
	}

	.ceprome-wb__tarjeta-fecha {
		font-size: 13px;
	}

	.ceprome-wb__tarjeta-titulo {
		font-size: 20px;
	}

	.ceprome-wb__hero {
		align-items: center;
		min-height: 600px;
	}

	.ceprome-wb__hero-contenido {
		gap: 24px;
		padding-block: 96px;
	}

	.ceprome-wb__etiqueta-proximo,
	.ceprome-wb__etiqueta-grabacion {
		padding: 6px 12px;
		font-size: 14px;
	}

	.ceprome-wb__horario {
		gap: 6px;
	}

	.ceprome-wb__fecha {
		font-size: 24px;
	}

	.ceprome-wb__hora,
	.ceprome-wb__hora-local {
		font-size: 16px;
	}

	.ceprome-wb__acciones {
		flex-direction: row;
		align-items: center;
		gap: 24px;
		width: auto;
		margin-top: 8px;
	}

	.ceprome-wb__calendario-enlace {
		font-size: 15px;
	}

	.ceprome-wb__calendario-menu {
		left: 0;
		transform: none;
	}

	.ceprome-wb__ponentes {
		padding-block: 64px 16px;
	}

	.ceprome-wb__ponentes-lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px;
	}

	.ceprome-wb__ponente {
		gap: 24px;
		padding-top: 24px;
	}

	.ceprome-wb__ponente-foto {
		width: 136px;
		height: 136px;
	}

	.ceprome-wb__ponente-texto {
		gap: 8px;
	}

	.ceprome-wb__ponente-nombre {
		font-size: 20px;
	}

	.ceprome-wb__ponente-rol,
	.ceprome-wb__ponente-perfil {
		font-size: 15px;
	}

	.ceprome-wb__ponente-perfil {
		margin-top: 8px;
	}

	.ceprome-wb__que-veras-titulo {
		margin-bottom: 20px;
	}

	.ceprome-wb__que-veras-lista li {
		gap: 20px;
		padding-block: 16px;
		font-size: 17px;
	}

	.ceprome-wb__cierre-contenido {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 48px;
		padding-block: 64px;
	}

	.ceprome-wb__cierre-texto {
		gap: 8px;
	}

	.ceprome-wb__cierre-hora {
		font-size: 16px;
	}
}

@media (min-width: 960px) {
	.ceprome-wb__detalle {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: 48px;
		padding-block: 64px 88px;
	}

	.ceprome-wb__detalle-principal {
		gap: 40px;
	}

	/* En la columna lateral, los datos van uno debajo del otro. */
	.ceprome-wb__practicos-lista {
		grid-template-columns: minmax(0, 1fr);
	}

	.ceprome-wb__practicos-lista > div {
		padding-block: 18px;
	}

	.ceprome-wb__practicos-lista dt {
		font-size: 13px;
	}

	.ceprome-wb__practicos-lista dd {
		margin-top: 4px;
		font-size: 17px;
	}
}

/* ==========================================================================
   Single: publicacion
   Portada | encabezado y Ficha técnica; "Sobre el libro" debajo, en una
   columna; "También te puede interesar" en banda guinda. El guinda de
   textos y líneas es var(--c-link): guinda en claro, rosa en oscuro.
   ========================================================================== */

.ceprome-publicacion__intro {
	padding-block: clamp(40px, 6vw, 72px);
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.ceprome-publicacion__cover {
	width: 100%;
	max-width: 280px;
	margin-inline: auto;
	aspect-ratio: 2 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ceprome-publicacion__cover-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ceprome-publicacion__body {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
}

.ceprome-publicacion__header {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ceprome-publicacion__temas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceprome-publicacion__tema {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid var(--c-link);
	border-radius: var(--ceprome-radius);
	font-size: 12px;
	font-weight: 600;
	color: var(--c-link) !important;
	text-decoration: none !important;
}

.ceprome-publicacion__tema:hover,
.ceprome-publicacion__tema:focus-visible {
	background: color-mix(in srgb, var(--ceprome-guinda) 10%, transparent);
}

.ceprome-publicacion__title {
	font-weight: 800;
	font-size: clamp(28px, 4.5vw, 40px);
	line-height: 1.15;
}

.ceprome-publicacion__autor {
	font-size: 17px;
	color: var(--c-text-muted);
}

/* Ficha técnica: título guinda con línea guinda debajo y filas
   etiqueta / valor. */
.ceprome-publicacion__ficha-titulo {
	font-weight: 600;
	font-size: 20px;
	color: var(--c-link);
	padding-bottom: 10px;
	border-bottom: 2px solid var(--c-link);
}

.ceprome-publicacion__ficha-lista {
	margin: 0;
}

.ceprome-publicacion__ficha-fila {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px;
	padding-block: 14px;
	border-bottom: 1px solid var(--c-border);
}

.ceprome-publicacion__ficha-fila dt {
	font-size: 13px;
	color: var(--c-text-subtle);
}

.ceprome-publicacion__ficha-fila dd {
	margin: 0;
	font-size: 16px;
	color: var(--c-text);
}

.ceprome-publicacion__precio {
	display: block;
	font-weight: 800;
	font-size: 20px;
	color: var(--c-link);
}

.ceprome-publicacion__precio-nota {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--c-text-muted);
}

.ceprome-publicacion__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-top: 24px;
}

.ceprome-publicacion__cta-nota {
	font-size: 13px;
	color: var(--c-text-muted);
}

/* En oscuro el contorno guinda no se lee sobre el fondo: rosa del tema. */
.ceprome-publicacion__cta .ceprome-button--outline {
	color: var(--c-link) !important;
	border-color: var(--c-link);
}

.ceprome-publicacion__cta .ceprome-button--outline:hover,
.ceprome-publicacion__cta .ceprome-button--outline:focus-visible {
	background: var(--ceprome-guinda);
	border-color: var(--ceprome-guinda);
	color: #FFFFFF !important;
}

.ceprome-publicacion__sobre {
	padding-bottom: var(--ceprome-section-padding);
}

.ceprome-publicacion__sobre-titulo {
	font-weight: 600;
	font-size: clamp(22px, 2.6vw, 26px);
	margin-bottom: 20px;
}

/* "Sobre el libro": en escritorio, el título en la columna de la portada
   y el texto en la de la ficha (mismo ancho y separación que la intro:
   empieza donde el título del libro y termina donde la ficha técnica). */
.ceprome-publicacion__content {
	min-width: 0;
}

@media (min-width: 720px) {
	.ceprome-publicacion__cover {
		max-width: 320px;
	}

	.ceprome-publicacion__ficha-fila {
		grid-template-columns: 140px minmax(0, 1fr);
		gap: 16px;
		align-items: baseline;
	}
}

@media (min-width: 960px) {
	.ceprome-publicacion__intro {
		flex-direction: row;
		align-items: flex-start;
		gap: 64px;
	}

	.ceprome-publicacion__cover {
		width: 320px;
		flex-shrink: 0;
		margin-inline: 0;
	}

	.ceprome-publicacion__body {
		flex: 1;
	}

	.ceprome-publicacion__sobre {
		display: grid;
		grid-template-columns: 320px minmax(0, 1fr);
		gap: 64px;
		align-items: start;
	}

	.ceprome-publicacion__sobre-titulo {
		margin-bottom: 0;
	}
}

/* También te puede interesar: banda guinda a todo lo ancho, fija en claro
   y oscuro. */

.ceprome-relacionadas {
	padding-block: var(--ceprome-section-padding);
	background: var(--ceprome-guinda);
}

.ceprome-relacionadas__titulo {
	color: #FFFFFF;
}

.ceprome-relacionadas__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}

.ceprome-relacionadas__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
	color: #FFFFFF !important;
	text-decoration: none !important;
}

.ceprome-relacionadas__item:hover .ceprome-relacionadas__title,
.ceprome-relacionadas__item:focus-visible .ceprome-relacionadas__title {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ceprome-relacionadas__item:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 4px;
}

.ceprome-relacionadas__cover {
	width: 100%;
	aspect-ratio: 2 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ceprome-relacionadas__cover-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ceprome-relacionadas .ceprome-placeholder__text {
	color: var(--c-on-guinda);
}

.ceprome-relacionadas__title {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
}

@media (min-width: 720px) {
	.ceprome-relacionadas__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Single: persona (Equipo, Consejo y ponentes)
   Banda guinda con foto y datos (fija en claro y oscuro: blanco ≈ 7.2:1 y
   rosa --c-on-guinda ≈ 5.2:1 sobre #a22944); "Biografía" en una columna;
   "Participaciones con CEPROME" con pastillas y cuadrícula. Etiquetas en
   tipo oración: nada en mayúsculas en esta ficha.
   ========================================================================== */

/* La banda empieza al ras: la ruta de navegación necesita su espacio abajo. */
.single-persona .ceprome-breadcrumb {
	padding-bottom: 24px;
}

.ceprome-persona__banda {
	background: var(--ceprome-guinda);
	color: #FFFFFF;
}

/* En móvil, la foto arriba y los datos apilados. */
.ceprome-persona__cabecera {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: clamp(36px, 6vw, 64px);
}

.ceprome-persona__foto-wrap {
	width: 140px;
	flex-shrink: 0;
}

.ceprome-persona__foto {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: var(--ceprome-radius);
	object-fit: cover;
}

.ceprome-persona__foto--vacia {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.12);
	color: #FFFFFF;
	font-weight: 600;
	font-size: 32px;
}

.ceprome-persona__identidad {
	flex: 1;
	min-width: 0;
}

.ceprome-persona__title {
	font-weight: 800;
	font-size: clamp(28px, 4.5vw, 44px);
	line-height: 1.15;
	color: #FFFFFF;
}

/* Tres datos con etiqueta bajo una línea fina blanca translúcida. */
.ceprome-persona__datos {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 20px 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.ceprome-persona__dato {
	min-width: 0;
}

.ceprome-persona__dato dt {
	font-size: 13px;
	color: var(--c-on-guinda);
}

.ceprome-persona__dato dd {
	margin: 4px 0 0;
	font-size: 16px;
	line-height: 1.4;
	color: #FFFFFF;
}

.ceprome-persona__bandera {
	margin-right: 6px;
}

.ceprome-persona__seccion-titulo {
	font-weight: 600;
	font-size: clamp(22px, 2.6vw, 26px);
	color: var(--c-text);
}

/* Biografía: en móvil, título y texto en una columna; en escritorio, el
   título en la columna de la foto y el texto alineado con el nombre (mismo
   patrón que "Sobre el libro" en la ficha de publicación). */
.ceprome-persona__bio-seccion {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-block: clamp(40px, 6vw, 72px);
}

.ceprome-persona__bio {
	min-width: 0;
}

/* Participaciones con CEPROME */
.ceprome-persona__participaciones {
	padding-block: clamp(40px, 6vw, 64px) var(--ceprome-section-padding);
	border-top: 1px solid var(--c-border);
}

.ceprome-persona__part-cabecera {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: clamp(28px, 4vw, 40px);
}

.ceprome-persona__part-nota {
	margin-top: 6px;
	font-size: 15px;
	color: var(--c-text-muted);
}

.ceprome-persona__part-cabecera .ceprome-archivo__filtros {
	margin-bottom: 0;
}

.ceprome-archivo__grid.ceprome-persona__part-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px 32px;
}

.ceprome-persona__participacion {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 16px;
	border-top: 2px solid var(--c-link);
}

/* Con JS, solo las 6 más recientes hasta "Ver las N participaciones". */
.ceprome-persona__participaciones.is-limitada:not(.is-expandida) .ceprome-persona__participacion--extra {
	display: none;
}

.ceprome-persona__participacion-tipo {
	font-size: 14px;
	font-weight: 600;
	color: var(--c-link);
}

.ceprome-persona__participacion-titulo {
	font-weight: 600;
	font-size: 17px;
	line-height: 1.35;
	color: var(--c-text) !important;
	text-decoration: none !important;
}

.ceprome-persona__participacion-titulo:hover,
.ceprome-persona__participacion-titulo:focus-visible {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.ceprome-persona__participacion-fecha {
	font-size: 14px;
	color: var(--c-text-muted);
}

.ceprome-persona__part-mas {
	margin-top: clamp(32px, 4vw, 44px);
}

.ceprome-persona__part-mas .ceprome-button--outline {
	color: var(--c-link) !important;
	border-color: var(--c-link);
}

.ceprome-persona__part-mas .ceprome-button--outline:hover,
.ceprome-persona__part-mas .ceprome-button--outline:focus-visible {
	background: var(--ceprome-guinda);
	border-color: var(--ceprome-guinda);
	color: #FFFFFF !important;
}

@media (min-width: 720px) {
	.ceprome-persona__cabecera {
		flex-direction: row;
		align-items: center;
		gap: 40px;
	}

	.ceprome-persona__foto-wrap {
		width: 200px;
	}

	.ceprome-persona__datos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	.ceprome-archivo__grid.ceprome-persona__part-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.ceprome-persona__bio-seccion {
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 40px;
		align-items: start;
	}

	.ceprome-persona__part-cabecera {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.ceprome-archivo__grid.ceprome-persona__part-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Archivo: programa-academico (Diplomados/Masters) y webinar — pastillas de
   filtro + cuadrícula de tarjetas, compartidas entre ambos archivos (ver
   template-parts/archivo-filtros.php y archivo-card.php)
   ========================================================================== */

.ceprome-archivo__header {
	padding-block: clamp(40px, 6vw, 64px) clamp(24px, 4vw, 32px);
}

.ceprome-archivo__page-title {
	font-weight: 800;
	font-size: clamp(28px, 4.5vw, 40px);
	line-height: 1.15;
}

.ceprome-archivo__page-lead {
	margin-top: 12px;
	font-size: 16px;
	color: var(--c-text-muted);
	max-width: 620px;
}

.ceprome-archivo {
	padding-bottom: var(--ceprome-section-padding);
}

.ceprome-archivo__filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: clamp(28px, 4vw, 40px);
}

.ceprome-pill {
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	background: transparent;
	color: var(--c-text-muted);
	border: 1px solid var(--c-border);
	border-radius: var(--ceprome-radius);
	padding: 9px 20px;
	cursor: pointer;
	transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.ceprome-pill {
		transition: none;
	}
}

.ceprome-pill:hover {
	color: var(--c-text);
	border-color: var(--c-text-subtle);
}

.ceprome-pill.is-active {
	background: var(--ceprome-guinda);
	border-color: var(--ceprome-guinda);
	color: #FFFFFF;
}

.ceprome-archivo__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.ceprome-archivo__card {
	display: flex;
	flex-direction: column;
	color: var(--c-text) !important;
	text-decoration: none !important;
	border: 1px solid var(--c-border);
	border-radius: var(--ceprome-radius);
	overflow: hidden;
}

.ceprome-archivo__card:hover {
	border-color: var(--c-text-subtle);
}

.ceprome-archivo__media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-bg-elevated);
	border-bottom: 1px solid var(--c-border);
}

.ceprome-archivo__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ceprome-archivo__badge {
	position: absolute;
	top: 12px;
	left: 12px;
}

.ceprome-archivo__body {
	padding: 18px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ceprome-archivo__title {
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
}

.ceprome-archivo__excerpt {
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-text-muted);
}

.ceprome-archivo__fecha {
	font-size: 14px;
	color: var(--c-text-muted);
}

.ceprome-archivo__vacio {
	color: var(--c-text-muted);
}

/* Paginación del blog (page-noticias.php, category.php) —
   paginate_links( array( 'type' => 'list' ) ), <ul class="page-numbers"> con
   <li> por página. */
.ceprome-pagination {
	margin-top: clamp(32px, 5vw, 48px);
}

.ceprome-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ceprome-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 10px;
	border: 1px solid var(--c-border);
	border-radius: var(--ceprome-radius);
	color: var(--c-text-muted);
	text-decoration: none !important;
	font-weight: 600;
	font-size: 14px;
}

.ceprome-pagination a.page-numbers:hover {
	color: var(--c-text);
	border-color: var(--c-text-subtle);
}

.ceprome-pagination .page-numbers.current {
	background: var(--ceprome-guinda);
	border-color: var(--ceprome-guinda);
	color: #FFFFFF;
}

.ceprome-pagination .page-numbers.dots {
	border-color: transparent;
}

/* Oculto por defecto: theme.js (initArchivoFiltros) lo muestra solo cuando
   la pastilla activa no tiene ninguna tarjeta — ver archivo-vacio.php. */
.ceprome-archivo__vacio-filtro {
	display: none;
	color: var(--c-text-muted);
}

@media (min-width: 720px) {
	.ceprome-archivo__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.ceprome-archivo__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Archivo: publicacion (/publicaciones/) — hero guinda de ancho completo,
   pastillas por tema (mismo .ceprome-pill y mismo filtrado que los otros
   archivos) y cuadrícula de portadas 3:4. Colores de la banda y del
   placeholder fijos: la banda es color de marca y el placeholder hace de
   portada, así que no cambian con el modo.
   ========================================================================== */

.ceprome-pub-archivo__hero {
	background: var(--ceprome-guinda);
	color: #FFFFFF;
	padding-block: clamp(48px, 6vw, 72px);
}

.ceprome-pub-archivo__titulo {
	font-weight: 800;
	font-size: clamp(40px, 5.5vw, 64px);
	line-height: 1.05;
	color: #FFFFFF;
}

.ceprome-pub-archivo__lead {
	margin-top: clamp(12px, 1.5vw, 16px);
	max-width: 700px;
	font-size: clamp(16px, 1.6vw, 20px);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.ceprome-pub-archivo {
	padding-top: clamp(24px, 4vw, 48px);
}

/* Tema sin publicaciones (/tema-publicacion/{slug}/ con count 0): mensaje
   y botón al catálogo completo en lugar de pastillas y cuadrícula. */
.ceprome-pub-archivo__tema-vacio {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding-block: clamp(16px, 3vw, 32px) clamp(48px, 8vw, 96px);
}

.ceprome-pub-archivo__tema-vacio .ceprome-archivo__vacio {
	font-size: clamp(17px, 1.6vw, 20px);
}

/* En móvil, las pastillas en una sola fila con scroll horizontal, de
   borde a borde de la pantalla: con nueve temas, envolverlas empujaría
   la cuadrícula varias filas hacia abajo. */
.ceprome-pub-archivo .ceprome-archivo__filtros {
	flex-wrap: nowrap;
	overflow-x: auto;
	margin-inline: calc(-1 * var(--ceprome-gutter));
	padding-inline: var(--ceprome-gutter);
	margin-bottom: 24px;
	scrollbar-width: none;
}

.ceprome-pub-archivo .ceprome-archivo__filtros::-webkit-scrollbar {
	display: none;
}

.ceprome-pub-archivo .ceprome-pill {
	flex-shrink: 0;
	white-space: nowrap;
}

.ceprome-archivo__grid.ceprome-pub-archivo__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 20px;
}

.ceprome-pub-card,
.ceprome-pub-card:hover,
.ceprome-pub-card:focus-visible {
	display: flex;
	flex-direction: column;
	color: var(--c-text);
	text-decoration: none;
}

.ceprome-pub-card__portada {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--ceprome-radius);
	background: #E7E4DD;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ceprome-pub-card__imagen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Las portadas son maquetas 3D con la tapa a la izquierda y el lomo
	   y la contraportada a la derecha: el recorte conserva la tapa. */
	object-position: left center;
}

.ceprome-pub-card__placeholder {
	padding: 16px;
	text-align: center;
	font-weight: 600;
	font-size: clamp(13px, 1.4vw, 17px);
	line-height: 1.3;
	color: #585857;
}

.ceprome-pub-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(162, 41, 68, 0.88);
	opacity: 0;
	transition: opacity 200ms ease-out;
}

.ceprome-pub-card:hover .ceprome-pub-card__overlay,
.ceprome-pub-card:focus-visible .ceprome-pub-card__overlay {
	opacity: 1;
}

.ceprome-pub-card__overlay-texto {
	padding: 8px 14px;
	border: 1.5px solid #FFFFFF;
	border-radius: var(--ceprome-radius);
	color: #FFFFFF;
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
}

.ceprome-pub-card__cuerpo {
	padding-top: 12px;
}

.ceprome-pub-card__anio {
	margin-bottom: 4px;
	font-weight: 600;
	font-size: 12px;
	color: var(--c-link);
}

.ceprome-pub-card__titulo {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
}

.ceprome-pub-card__autor {
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--c-text-muted);
}

@media (prefers-reduced-motion: reduce) {
	.ceprome-pub-card__overlay {
		transition: none;
	}
}

@media (min-width: 601px) {
	.ceprome-pub-archivo .ceprome-archivo__filtros {
		flex-wrap: wrap;
		overflow-x: visible;
		margin-inline: 0;
		padding-inline: 0;
		margin-bottom: clamp(28px, 4vw, 48px);
	}

	.ceprome-archivo__grid.ceprome-pub-archivo__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(32px, 3.5vw, 48px) clamp(20px, 3vw, 40px);
	}

	.ceprome-pub-card__overlay-texto {
		padding: 12px 24px;
		font-size: 15px;
	}

	.ceprome-pub-card__cuerpo {
		padding-top: 20px;
	}

	.ceprome-pub-card__anio {
		margin-bottom: 6px;
		font-size: 13px;
	}

	.ceprome-pub-card__titulo {
		font-size: 18px;
	}

	.ceprome-pub-card__autor {
		margin-top: 8px;
		font-size: 14px;
	}
}

/* ==========================================================================
   Fallback de plantillas nativas (index.php)
   ========================================================================== */

.ceprome-main {
	display: block;
}

.ceprome-entry {
	padding-block: var(--ceprome-section-padding);
}

.ceprome-entry__title {
	font-weight: 800;
	font-size: clamp(28px, 4vw, 40px);
	margin-bottom: 24px;
}

.ceprome-entry__content {
	max-width: var(--ceprome-content-width);
	margin-inline: auto;
	line-height: 1.7;
}

/* ==========================================================================
   Página genérica (page.php) — título + contenido del editor nativo
   ========================================================================== */

.ceprome-page-header {
	padding-block: clamp(40px, 6vw, 64px) 32px;
	border-bottom: 1px solid var(--c-border);
}

.ceprome-page-header__title {
	font-weight: 800;
	font-size: clamp(28px, 4.5vw, 44px);
	line-height: 1.15;
}

.ceprome-page-header__lead {
	margin-top: 16px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--c-text-muted);
	max-width: var(--ceprome-content-width);
}

.ceprome-page-header .ceprome-entry-content {
	margin-top: 16px;
	max-width: var(--ceprome-content-width);
}

.ceprome-page-content {
	padding-block: clamp(40px, 6vw, 64px) var(--ceprome-section-padding);
}

.ceprome-page-content .ceprome-entry-content {
	max-width: var(--ceprome-content-width);
	margin-inline: auto;
}

/* Cierre genérico (CTA de una o dos acciones) — mismo tratamiento que
   Consejo Latinoamericano y Diplomado/Master, pero con nombre de clase
   propio para no acoplar cada página nueva al nombre de Consejo. */
.ceprome-cierre {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	padding-bottom: var(--ceprome-section-padding);
}

/* ==========================================================================
   404 (404.php)
   ========================================================================== */

.ceprome-404 {
	min-height: 55vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 16px;
	padding-block: var(--ceprome-section-padding);
}

.ceprome-404__code {
	font-weight: 800;
	font-size: clamp(96px, 20vw, 180px);
	line-height: 1;
	color: var(--c-guinda-tint);
}

.ceprome-404__title {
	font-weight: 600;
	font-size: clamp(22px, 3vw, 28px);
}

.ceprome-404__text {
	max-width: 480px;
	color: var(--c-text-muted);
}

.ceprome-404 .ceprome-button {
	margin-top: 8px;
}

/* ==========================================================================
   Banner de cookies (footer.php)
   ========================================================================== */

.ceprome-cookie-banner {
	display: none;
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	background: var(--c-bg-elevated);
	border-top: 1px solid var(--c-border);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}

.ceprome-cookie-banner.is-visible {
	display: block;
}

.ceprome-cookie-banner__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-block: 20px;
}

.ceprome-cookie-banner__text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-text-muted);
}

.ceprome-cookie-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ceprome-cookie-banner__actions .ceprome-button {
	padding: 10px 20px;
	font-size: 14px;
}

@media (min-width: 720px) {
	.ceprome-cookie-banner__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}

	.ceprome-cookie-banner__text {
		flex: 1;
	}
}

/* ==========================================================================
   Contacto (page-contacto.php) — formulario a la izquierda, directorio
   directo a la derecha
   ========================================================================== */

.ceprome-contacto {
	padding-block: clamp(40px, 6vw, 64px) var(--ceprome-section-padding);
}

.ceprome-contacto__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
}

.ceprome-contacto__title {
	font-weight: 800;
	font-size: clamp(24px, 3.2vw, 32px);
	margin-bottom: 28px;
}

.ceprome-contacto__col--directorio {
	background: var(--c-guinda-panel);
	border-radius: var(--ceprome-radius);
	padding: clamp(28px, 4vw, 40px);
}

.ceprome-contacto__directorio-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.ceprome-contacto__directorio-item {
	padding-block: 16px;
	border-top: 1px solid color-mix(in srgb, var(--ceprome-guinda) 20%, transparent);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ceprome-contacto__directorio-item:first-child {
	border-top: none;
	padding-top: 0;
}

.ceprome-contacto__directorio-label {
	font-weight: 600;
	font-size: 15px;
}

.ceprome-contacto__directorio-email {
	font-size: 14px;
	color: var(--ceprome-guinda-hover) !important;
}

@media (min-width: 960px) {
	.ceprome-contacto__grid {
		grid-template-columns: 1.15fr 0.85fr;
		gap: 56px;
		align-items: start;
	}
}

/* ==========================================================================
   Formulario de mensaje (template-parts/formulario-servicio.php) —
   compartido por Contacto (dropdown de área) y los 3 formularios de
   servicio embebidos (Asesoría, Certificación, Fortalecimiento; área
   fija). Mismo tratamiento visual que tenía antes .ceprome-contacto-form,
   generalizado con nombre de clase propio porque ahora lo usan 4 páginas
   distintas, no solo Contacto.
   ========================================================================== */

.ceprome-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ceprome-form__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ceprome-form__field label,
.ceprome-form__field legend {
	font-weight: 600;
	font-size: 14px;
}

/* Marca de campo opcional — nunca un asterisco en los obligatorios, que
   se quedan sin marca. Peso Regular (400) de Duplet, a propósito más
   ligero que el Semibold (600) del resto de la etiqueta. */
.ceprome-form__opcional {
	font-weight: 400;
}

.ceprome-form__field input:not([type="checkbox"]):not([type="radio"]),
.ceprome-form__field select,
.ceprome-form__field textarea {
	font-family: inherit;
	font-size: 15px;
	color: var(--c-text);
	background: var(--c-bg-elevated);
	border: 1px solid var(--c-border);
	border-radius: var(--ceprome-radius);
	padding: 12px 14px;
}

.ceprome-form__field textarea {
	resize: vertical;
	min-height: 140px;
}

/* Grupo de radio/checkboxes (fieldset) — sin el borde nativo de
   <fieldset>, la legend ya cumple el mismo rol que un label. */
.ceprome-form__field--grupo {
	border: none;
	padding: 0;
	margin: 0;
	gap: 10px;
}

.ceprome-form__opcion {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	font-size: 15px;
}

.ceprome-form__field--consentimiento label {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 4px 8px;
	font-weight: 400;
	font-size: 14px;
}

.ceprome-form__field--consentimiento input {
	flex-shrink: 0;
	margin-top: 3px;
}

.ceprome-form__error {
	margin: 0;
	font-size: 13px;
	color: var(--ceprome-guinda);
}

.ceprome-form__submit {
	align-self: flex-start;
	margin-top: 8px;
}

/* Junto al botón de enviar, no arriba del formulario — el formulario
   abre con "¿Qué necesitas?", no con este aviso. Un tamaño menor que
   las etiquetas (14px) y peso Regular explícito, a propósito discreto,
   pero --c-text-muted sobre --c-bg-elevated da 7.1:1 en claro y 8:1 en
   oscuro (WCAG AA exige 4.5:1 para texto normal) — discreto no es lo
   mismo que ilegible. */
.ceprome-form__aviso {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--c-text);
	background: var(--c-guinda-suave);
	border-radius: var(--ceprome-radius);
	padding: 16px;
	margin-top: 4px;
}

.ceprome-form__banner {
	font-weight: 600;
	font-size: 15px;
	border-radius: var(--ceprome-radius);
	padding: 14px 16px;
	margin-bottom: 20px;
}

.ceprome-form__banner--ok {
	color: #0a7a3d;
	background: color-mix(in srgb, #0a7a3d 12%, transparent);
}

.ceprome-form__banner--error {
	color: var(--ceprome-guinda);
	background: var(--c-guinda-panel);
}

/* Formulario de servicio embebido (Asesoría, Certificación,
   Fortalecimiento): título centrado arriba, sin columna lateral, y el
   formulario centrado debajo. */
.ceprome-formulario-servicio {
	padding-bottom: var(--ceprome-section-padding);
	scroll-margin-top: 24px;
}

.ceprome-formulario-servicio__titulo {
	margin-bottom: clamp(24px, 3vw, 40px);
	text-align: center;
}

.ceprome-formulario-servicio .ceprome-form,
.ceprome-formulario-servicio .ceprome-form__banner {
	max-width: 880px;
	margin-inline: auto;
}

/* Cuadrícula de dos columnas: los campos de una línea (texto, correo,
   select) van en pares, en el orden del catálogo (nombre | correo, país |
   institución, campo del área | teléfono); lo demás (¿Qué necesitas?,
   mensaje, aviso, consentimiento y botón) ocupa todo el ancho. */
@media (min-width: 720px) {
	.ceprome-form--servicio {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 24px;
	}

	.ceprome-form--servicio > * {
		grid-column: 1 / -1;
	}

	.ceprome-form--servicio > .ceprome-form__field--text,
	.ceprome-form--servicio > .ceprome-form__field--email,
	.ceprome-form--servicio > .ceprome-form__field--select {
		grid-column: auto;
	}

	/* En la cuadrícula, align-self no alcanza el eje horizontal. */
	.ceprome-form--servicio > .ceprome-form__submit {
		justify-self: start;
	}
}

/* ==========================================================================
   Fortalecimiento Institucional (page-fortalecimiento-institucional.php).
   Diseño: canvas "CEPROME — Fortalecimiento Institucional". Los colores
   de la cadena de resultados van por posición (1 → 4, de claro a oscuro)
   y el diagrama de Metodología dibuja su conexión y su línea de regreso
   con CSS a partir de --ceprome-pasos, sin coordenadas fijas: sigue
   cuadrando si cambia el número de pasos.
   ========================================================================== */

.ceprome-fortalecimiento__eyebrow,
.ceprome-servicio__eyebrow {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--c-link);
}

.ceprome-fortalecimiento__titulo,
.ceprome-servicio__titulo {
	margin: 0 0 clamp(28px, 4vw, 48px);
	font-size: clamp(26px, 3.2vw, 36px);
	font-weight: 600;
	line-height: 1.15;
}

.ceprome-fortalecimiento__seccion,
.ceprome-servicio__seccion {
	padding-block: var(--ceprome-section-padding);
}

/* Dos secciones seguidas sobre el mismo fondo: la segunda no repite el
   aire de arriba, ya lo puso la anterior. */
.ceprome-fortalecimiento__seccion--sin-tope,
.ceprome-servicio__seccion--sin-tope {
	padding-top: 0;
}

/* El desafío / Nuestra respuesta */
.ceprome-fortalecimiento-contexto {
	display: grid;
	gap: 40px;
	padding-block: var(--ceprome-section-padding);
}

.ceprome-fortalecimiento-contexto__col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 28px;
	border-top: 1px solid var(--c-link);
}

.ceprome-fortalecimiento-contexto__texto {
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.6;
	color: var(--c-text-muted);
}

@media (min-width: 960px) {
	.ceprome-fortalecimiento-contexto {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 80px;
	}
}

/* Cadena de resultados — bloques a todo lo ancho, sin margen. El primero
   y el último alinean su texto con la retícula del sitio: el borde de la
   retícula se calcula con el ancho real de la sección (cqw), no con el
   viewport, para no arrastrar el ancho de la barra de scroll. */
.ceprome-fortalecimiento-cadena {
	container-type: inline-size;
}

.ceprome-cadena {
	--ceprome-cadena-borde: calc(max(0px, (100cqw - var(--ceprome-max-width)) / 2) + var(--ceprome-gutter));

	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceprome-cadena__bloque {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px var(--ceprome-cadena-borde);
	color: var(--c-text);
}

.ceprome-cadena__bloque--1 {
	background: var(--c-guinda-suave);
}

.ceprome-cadena__bloque--2 {
	background: var(--c-guinda-media);
}

.ceprome-cadena__bloque--3 {
	background: var(--ceprome-guinda);
	color: #FFFFFF;
}

.ceprome-cadena__bloque--4 {
	background: var(--ceprome-guinda-hover);
	color: #FFFFFF;
}

.ceprome-cadena__numero {
	font-size: 14px;
	font-weight: 600;
	color: var(--c-guinda-profunda);
}

.ceprome-cadena__bloque--3 .ceprome-cadena__numero,
.ceprome-cadena__bloque--4 .ceprome-cadena__numero {
	color: var(--c-on-guinda);
}

.ceprome-cadena__titulo {
	margin: 0;
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 600;
	line-height: 1.2;
}

.ceprome-cadena__lista {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	line-height: 1.4;
}

/* Un bloque con un solo elemento (hoy, Impacto) es una frase, no una
   lista: se pinta más grande. */
.ceprome-cadena__frase {
	font-size: clamp(17px, 1.5vw, 20px);
	font-weight: 600;
	line-height: 1.45;
}

@media (min-width: 720px) {
	.ceprome-cadena {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ceprome-cadena__bloque {
		padding: 40px 32px;
	}

	.ceprome-cadena__bloque:nth-child(odd) {
		padding-left: var(--ceprome-cadena-borde);
	}

	.ceprome-cadena__bloque:nth-child(even) {
		padding-right: var(--ceprome-cadena-borde);
	}
}

/* Escritorio: pistas de borde a cada lado para que el primer y el último
   bloque se extiendan hasta la orilla sin perder ancho de texto — las
   cuatro áreas de texto miden lo mismo. */
@media (min-width: 960px) {
	.ceprome-cadena {
		--ceprome-cadena-pad: clamp(24px, 2.8vw, 40px);

		grid-template-columns:
			calc(var(--ceprome-cadena-borde) - var(--ceprome-cadena-pad))
			repeat(4, minmax(0, 1fr))
			calc(var(--ceprome-cadena-borde) - var(--ceprome-cadena-pad));
	}

	.ceprome-cadena__bloque {
		gap: 20px;
		padding: 48px var(--ceprome-cadena-pad);
	}

	.ceprome-cadena__bloque:nth-child(odd),
	.ceprome-cadena__bloque:nth-child(even) {
		padding-inline: var(--ceprome-cadena-pad);
	}

	.ceprome-cadena__bloque:first-child {
		grid-column-start: 1;
		grid-column-end: span 2;
		padding-left: var(--ceprome-cadena-borde);
	}

	.ceprome-cadena__bloque:last-child {
		grid-column-start: span 2;
		grid-column-end: -1;
		padding-right: var(--ceprome-cadena-borde);
	}
}

/* Qué lo hace diferente — sin tarjetas, línea fina arriba de cada celda. */
.ceprome-diferenciales {
	display: grid;
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceprome-diferenciales__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 24px;
	border-top: 1px solid var(--c-border);
}

/* Icono de una sola tinta como máscara: toma el guinda del modo activo
   en lugar del color con que se exportó el SVG. */
.ceprome-diferenciales__icono {
	width: 44px;
	height: 44px;
	background: var(--c-link);
	-webkit-mask: var(--ceprome-icono) center / contain no-repeat;
	mask: var(--ceprome-icono) center / contain no-repeat;
}

.ceprome-diferenciales__titulo {
	margin: 0;
	font-size: clamp(19px, 1.6vw, 22px);
	font-weight: 600;
	line-height: 1.25;
}

.ceprome-diferenciales__texto {
	font-size: 17px;
	line-height: 1.5;
	color: var(--c-text-muted);
}

@media (min-width: 720px) {
	.ceprome-diferenciales {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 40px;
	}
}

@media (min-width: 960px) {
	.ceprome-diferenciales {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 56px;
	}
}

/* Qué analizamos */
.ceprome-dimensiones {
	display: grid;
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceprome-dimensiones__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 24px;
	border-top: 3px solid var(--ceprome-guinda);
}

.ceprome-dimensiones__numero {
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	color: var(--c-link);
}

.ceprome-dimensiones__titulo {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

.ceprome-dimensiones__lista {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	line-height: 1.4;
	color: var(--c-text-muted);
}

@media (min-width: 720px) {
	.ceprome-dimensiones {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 48px 32px;
	}
}

@media (min-width: 1080px) {
	.ceprome-dimensiones {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Diagrama de pasos (template-parts/metodologia.php): Metodología de
   Fortalecimiento, Nuestro enfoque de Asesoría y proceso de
   Certificación. En móvil, pasos en vertical con la línea a la izquierda
   y la línea de regreso como corchete a la derecha; en escritorio, pasos
   en fila con la línea horizontal y la de regreso por debajo. En ambos,
   la línea de regreso va del centro del último paso al del tercero. La
   línea que une los pasos es .ceprome-reveal--line: crece al hacer
   scroll, hacia abajo en móvil y hacia la derecha en escritorio. */
.ceprome-fortalecimiento-metodologia {
	padding-block: var(--ceprome-section-padding);
	background: var(--c-guinda-suave);
}

.ceprome-metodologia {
	--ceprome-paso-fila: 64px;
	--ceprome-paso-lado: 40px;
}

.ceprome-metodologia__diagrama {
	position: relative;
}

.ceprome-metodologia--ciclo .ceprome-metodologia__diagrama {
	padding-right: 48px;
}

.ceprome-metodologia__pasos {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Línea que une los pasos: de centro del primero a centro del último. */
.ceprome-metodologia__linea {
	position: absolute;
	top: calc(var(--ceprome-paso-fila) / 2);
	bottom: calc(var(--ceprome-paso-fila) / 2);
	left: calc(var(--ceprome-paso-lado) / 2 - 1px);
	width: 2px;
	color: var(--ceprome-guinda);
}

.ceprome-reveal-js .ceprome-metodologia__linea::after {
	width: 100%;
	height: 0;
	transition: height 900ms ease-out;
}

.ceprome-reveal-js .ceprome-metodologia__linea.is-visible::after {
	height: 100%;
}

.ceprome-metodologia__paso {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	height: var(--ceprome-paso-fila);
}

.ceprome-metodologia__numero {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: var(--ceprome-paso-lado);
	height: var(--ceprome-paso-lado);
	border-radius: var(--ceprome-radius);
	background: var(--ceprome-guinda);
	color: #FFFFFF;
	font-size: 17px;
	font-weight: 800;
}

.ceprome-metodologia__paso--evaluacion .ceprome-metodologia__numero {
	background: var(--ceprome-guinda-hover);
}

.ceprome-metodologia__paso--reevaluacion .ceprome-metodologia__numero {
	background: var(--c-bg);
	border: 2px solid var(--c-guinda-profunda);
	color: var(--c-guinda-profunda);
}

.ceprome-metodologia__titulo {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.ceprome-metodologia__texto {
	font-size: 15px;
	line-height: 1.45;
	color: var(--c-text-muted);
}

/* Con descripción (Certificación), en móvil cada paso crece con su texto:
   la línea continua no puede medir la última fila, así que cada paso
   dibuja su propio tramo hasta el siguiente. */
.ceprome-metodologia--con-texto .ceprome-metodologia__linea {
	display: none;
}

.ceprome-metodologia--con-texto .ceprome-metodologia__paso {
	display: grid;
	grid-template-columns: var(--ceprome-paso-lado) minmax(0, 1fr);
	align-items: start;
	gap: 6px 16px;
	height: auto;
	padding-bottom: 28px;
}

.ceprome-metodologia--con-texto .ceprome-metodologia__paso:last-child {
	padding-bottom: 0;
}

.ceprome-metodologia--con-texto .ceprome-metodologia__paso:not(:last-child)::before {
	content: "";
	position: absolute;
	top: var(--ceprome-paso-lado);
	bottom: 0;
	left: calc(var(--ceprome-paso-lado) / 2 - 1px);
	width: 2px;
	background: var(--ceprome-guinda);
}

.ceprome-metodologia--con-texto .ceprome-metodologia__numero {
	grid-row: 1 / span 2;
}

.ceprome-metodologia--con-texto .ceprome-metodologia__titulo {
	padding-top: 9px;
}

/* Corchete de regreso (móvil): del centro de la última fila al centro de
   la tercera, con la punta de flecha apuntando al tercer paso. */
.ceprome-metodologia__ciclo {
	position: absolute;
	top: calc(var(--ceprome-paso-fila) * 2.5 - 1px);
	bottom: calc(var(--ceprome-paso-fila) / 2 - 1px);
	right: 8px;
	width: 24px;
	border: 2px solid var(--c-guinda-profunda);
	border-left: 0;
}

.ceprome-metodologia__ciclo::before {
	content: "";
	position: absolute;
	top: -7px;
	left: -2px;
	width: 10px;
	height: 10px;
	border-bottom: 2px solid var(--c-guinda-profunda);
	border-left: 2px solid var(--c-guinda-profunda);
	transform: rotate(45deg);
	transform-origin: center;
}

.ceprome-metodologia__etiqueta {
	margin-top: 24px;
	font-size: 15px;
	font-weight: 600;
	color: var(--c-guinda-profunda);
}

@media (min-width: 960px) {
	.ceprome-metodologia {
		--ceprome-paso-lado: 56px;
		/* Media columna: centro de cada paso respecto al borde de su celda. */
		--ceprome-paso-media: calc(100% / var(--ceprome-pasos) / 2);
	}

	.ceprome-metodologia--ciclo .ceprome-metodologia__diagrama {
		padding-right: 0;
	}

	.ceprome-metodologia__pasos {
		display: grid;
		grid-template-columns: repeat(var(--ceprome-pasos), minmax(0, 1fr));
	}

	.ceprome-metodologia__linea,
	.ceprome-metodologia--con-texto .ceprome-metodologia__linea {
		display: block;
		top: calc(var(--ceprome-paso-lado) / 2 - 1px);
		bottom: auto;
		left: var(--ceprome-paso-media);
		right: var(--ceprome-paso-media);
		width: auto;
		height: 2px;
	}

	.ceprome-reveal-js .ceprome-metodologia__linea::after {
		width: 0;
		height: 100%;
		transition: width 900ms ease-out;
	}

	.ceprome-reveal-js .ceprome-metodologia__linea.is-visible::after {
		width: 100%;
	}

	.ceprome-metodologia__paso {
		flex-direction: column;
		align-items: center;
		height: auto;
		padding-inline: 8px;
		text-align: center;
	}

	.ceprome-metodologia__numero {
		font-size: 22px;
	}

	.ceprome-metodologia__titulo {
		max-width: 150px;
		font-size: 17px;
	}

	.ceprome-metodologia--con-texto .ceprome-metodologia__paso {
		display: flex;
		align-items: center;
		gap: 12px;
		padding-bottom: 0;
	}

	.ceprome-metodologia--con-texto .ceprome-metodologia__paso:not(:last-child)::before {
		content: none;
	}

	.ceprome-metodologia--con-texto .ceprome-metodologia__titulo {
		padding-top: 4px;
	}

	.ceprome-metodologia__texto {
		max-width: 180px;
		font-size: 14px;
		line-height: 1.4;
	}

	/* Línea de regreso (escritorio): baja del último paso, corre hacia la
	   izquierda y sube al tercero, con la flecha hacia arriba. */
	.ceprome-metodologia__ciclo {
		position: relative;
		inset: auto;
		display: block;
		width: auto;
		height: 48px;
		margin-top: 16px;
		margin-left: calc(100% / var(--ceprome-pasos) * 2.5 - 1px);
		margin-right: calc(100% / var(--ceprome-pasos) * 0.5 - 1px);
		border: 2px solid var(--c-guinda-profunda);
		border-top: 0;
	}

	/* Centrada sobre el borde izquierdo de 2px: el ::before se mide desde
	   la caja de padding (después del borde), así que -6px = -(10 / 2) - 1. */
	.ceprome-metodologia__ciclo::before {
		top: -2px;
		left: -6px;
		transform: rotate(135deg);
	}

	.ceprome-metodologia__etiqueta {
		margin-top: 12px;
		margin-left: calc(100% / var(--ceprome-pasos) * 2.5);
		margin-right: calc(100% / var(--ceprome-pasos) * 0.5);
		font-size: 16px;
		text-align: center;
	}
}

/* Escalabilidad / Sostenibilidad */
.ceprome-fortalecimiento-modelo {
	display: grid;
	gap: 64px;
}

.ceprome-fortalecimiento-modelo__col {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ceprome-fortalecimiento-modelo__titulo {
	margin: 0;
	font-size: clamp(26px, 2.8vw, 32px);
	font-weight: 600;
	line-height: 1.15;
}

.ceprome-fortalecimiento-modelo__texto {
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.6;
	color: var(--c-text-muted);
}

.ceprome-fortalecimiento-modelo__remate {
	margin-top: 8px;
	padding-top: 20px;
	border-top: 1px solid var(--c-border);
	font-size: clamp(18px, 1.5vw, 20px);
	font-weight: 600;
	line-height: 1.45;
}

@media (min-width: 960px) {
	.ceprome-fortalecimiento-modelo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 96px;
	}
}

/* Lista separada por líneas finas (Sostenibilidad y Beneficios). */
.ceprome-fortalecimiento__lista-lineas {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 17px;
	line-height: 1.4;
}

.ceprome-fortalecimiento__lista-lineas li {
	padding-block: 12px;
	border-top: 1px solid var(--c-border);
}

.ceprome-fortalecimiento__lista-lineas li:last-child {
	border-bottom: 1px solid var(--c-border);
}

.ceprome-fortalecimiento__lista-lineas--beneficios {
	font-size: clamp(17px, 1.4vw, 18px);
}

.ceprome-fortalecimiento__lista-lineas--beneficios li {
	padding-block: 16px;
}

/* Beneficios y formulario: encabezado a la izquierda, contenido a la
   derecha. */
.ceprome-fortalecimiento-dos-col {
	display: grid;
	gap: 28px;
}

.ceprome-fortalecimiento-dos-col__encabezado {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ceprome-fortalecimiento-dos-col__encabezado .ceprome-fortalecimiento__titulo {
	margin-bottom: 0;
}

@media (min-width: 720px) {
	.ceprome-fortalecimiento__lista-lineas--beneficios {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 48px;
	}
}

@media (min-width: 960px) {
	.ceprome-fortalecimiento-dos-col {
		grid-template-columns: 380px minmax(0, 1fr);
		gap: 96px;
	}
}

/* Cierre — banda guinda de marca, igual en claro y oscuro. */
.ceprome-fortalecimiento-cierre {
	padding-block: clamp(64px, 8vw, 112px);
	background: var(--ceprome-guinda);
	color: #FFFFFF;
}

.ceprome-fortalecimiento-cierre__frase {
	max-width: 1040px;
	font-size: clamp(24px, 2.6vw, 36px);
	font-weight: 600;
	line-height: 1.3;
}

.ceprome-fortalecimiento-cierre__frase strong {
	font-weight: 800;
}

/* ==========================================================================
   Páginas de servicio: Asesoría Institucional y Certificación de Colegios
   (page-asesoria-institucional.php, page-certificacion-de-colegios.php,
   template-parts/servicio-*.php). Diseño: canvas "CEPROME — Asesoría y
   Certificación". Título, eyebrow y ritmo de secciones se comparten con
   Fortalecimiento (reglas de arriba); el diagrama de pasos es
   template-parts/metodologia.php.
   ========================================================================== */

/* Hero — foto de fondo con capa oscura; sin foto, el fondo oscuro solo.
   Colores fijos, iguales en claro y oscuro. */
.ceprome-servicio-hero {
	position: relative;
	display: flex;
	align-items: center;
	padding-block: 56px 64px;
	overflow: hidden;
	background: #221F1D;
	color: #FFFFFF;
}

/* En móvil el alto lo pone el texto. Con foto, un mínimo de 380 px y el
   texto abajo: lo que sobra deja ver la foto arriba, no un hueco debajo
   del texto. Desde 720 px, 560 px con el texto centrado. */
.ceprome-servicio-hero--con-foto {
	min-height: 380px;
	align-items: flex-end;
}

@media (min-width: 720px) {
	.ceprome-servicio-hero {
		min-height: 560px;
		padding-block: 64px;
	}

	.ceprome-servicio-hero--con-foto {
		align-items: center;
	}
}

.ceprome-servicio-hero__imagen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% 50%;
}

/* Encuadre de la foto en móvil (meta box de la página). Por debajo de
   720 px el hero es más alto que ancho y la foto se recorta por los
   costados: izquierda o derecha muestran ese borde. Centro no lleva clase
   y deja la posición de arriba (o la del Consejo). El selector doble le
   gana a .ceprome-consejo .ceprome-servicio-hero__imagen. */
@media (max-width: 719px) {
	.ceprome-servicio-hero.ceprome-servicio-hero--movil-izquierda .ceprome-servicio-hero__imagen {
		object-position: 0% 50%;
	}

	.ceprome-servicio-hero.ceprome-servicio-hero--movil-derecha .ceprome-servicio-hero__imagen {
		object-position: 100% 50%;
	}
}

.ceprome-servicio-hero__capa {
	position: absolute;
	inset: 0;
	background: #221F1D;
	opacity: 0.55;
}

.ceprome-servicio-hero__inner {
	position: relative;
	width: 100%;
}

.ceprome-servicio-hero__texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	max-width: 760px;
}

.ceprome-servicio-hero__eyebrow {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: #F3DDE2;
}

.ceprome-servicio-hero__titulo {
	font-size: clamp(38px, 4.6vw, 60px);
	font-weight: 800;
	line-height: 1.06;
	color: #FFFFFF;
}

.ceprome-servicio-hero--titulo-largo .ceprome-servicio-hero__titulo {
	font-size: clamp(32px, 3.9vw, 52px);
}

.ceprome-servicio-hero__tagline {
	font-size: clamp(17px, 1.6vw, 20px);
	font-weight: 600;
	line-height: 1.4;
	color: #F3DDE2;
}

.ceprome-servicio-hero__intro {
	font-size: clamp(16px, 1.3vw, 17px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

.ceprome-servicio-hero__cta {
	margin-top: 4px;
	padding: 16px 26px;
	font-size: 16px;
}

/* Marcador de la foto que falta subir (ej. Equipo sin foto del Vaticano):
   abajo a la derecha, punteado, sin competir con el texto. */
.ceprome-servicio-hero__aviso {
	position: absolute;
	right: 16px;
	bottom: 16px;
	max-width: calc(100% - 32px);
	padding: 8px 12px;
	border: 1px dashed rgba(255, 255, 255, 0.4);
	border-radius: var(--ceprome-radius);
	font-size: 12px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.7);
}

.ceprome-servicio-hero--con-aviso {
	padding-bottom: 88px;
}

@media (min-width: 960px) {
	.ceprome-servicio-hero__texto {
		gap: 24px;
	}
}

/* Introducción en dos columnas, con línea guinda arriba. */
.ceprome-servicio-intro {
	display: grid;
	gap: 40px;
}

.ceprome-servicio-intro__col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 28px;
	border-top: 1px solid var(--c-link);
}

.ceprome-servicio-intro__texto {
	font-size: clamp(17px, 1.3vw, 18px);
	line-height: 1.6;
	color: var(--c-text-muted);
}

@media (min-width: 960px) {
	.ceprome-servicio-intro {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 80px;
	}
}

/* Título + párrafo de introducción de una sección. */
.ceprome-servicio__encabezado {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: clamp(32px, 4vw, 48px);
}

.ceprome-servicio__encabezado .ceprome-servicio__titulo {
	margin-bottom: 0;
}

.ceprome-servicio__intro {
	max-width: 900px;
	font-size: clamp(17px, 1.3vw, 18px);
	line-height: 1.6;
	color: var(--c-text-muted);
}

/* Franja de tinte guinda (Nuestro enfoque, Los ocho estándares). */
.ceprome-servicio__banda-suave {
	padding-block: var(--ceprome-section-padding);
	background: var(--c-guinda-suave);
}

.ceprome-servicio__objetivo {
	margin-top: clamp(32px, 4vw, 48px);
}

/* ¿Qué ofrecemos? — celdas con línea fina arriba, sin tarjeta. */
.ceprome-servicio-ofrecemos {
	display: grid;
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceprome-servicio-ofrecemos__item {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 24px;
	border-top: 1px solid var(--c-linea);
}

.ceprome-servicio-ofrecemos__titulo {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.ceprome-servicio-ofrecemos__texto {
	font-size: clamp(16px, 1.2vw, 17px);
	line-height: 1.5;
	color: var(--c-text-muted);
}

@media (min-width: 720px) {
	.ceprome-servicio-ofrecemos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px;
	}
}

@media (min-width: 960px) {
	.ceprome-servicio-ofrecemos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 48px 56px;
	}
}

/* Un modelo integral de prevención — 4 pilares con número grande. */
.ceprome-servicio-pilares {
	display: grid;
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceprome-servicio-pilares__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 20px;
	border-top: 3px solid var(--ceprome-guinda);
}

.ceprome-servicio-pilares__numero {
	font-size: 48px;
	font-weight: 800;
	line-height: 1;
	color: var(--c-link);
}

.ceprome-servicio-pilares__titulo {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

.ceprome-servicio-pilares__texto {
	font-size: 16px;
	line-height: 1.5;
	color: var(--c-text-muted);
}

/* Cierre separado de las columnas por una línea fina propia. */
.ceprome-servicio-pilares__cierre {
	margin-top: clamp(40px, 4vw, 48px);
	padding-top: 24px;
	border-top: 1px solid var(--c-linea);
	font-size: clamp(17px, 1.3vw, 18px);
	line-height: 1.6;
	color: var(--c-text-muted);
}

@media (min-width: 720px) {
	.ceprome-servicio-pilares {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {
	.ceprome-servicio-pilares {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ¿A quiénes acompañamos? — título a la izquierda, lista a la derecha en
   dos columnas separadas por líneas finas. */
.ceprome-servicio-dos-col {
	display: grid;
	gap: 8px;
}

.ceprome-servicio-dos-col > .ceprome-servicio__titulo {
	margin-bottom: 20px;
}

.ceprome-servicio-lista {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: clamp(17px, 1.3vw, 18px);
	line-height: 1.4;
}

.ceprome-servicio-lista li {
	padding: 18px 24px 18px 0;
	border-bottom: 1px solid var(--c-linea);
}

.ceprome-servicio-lista li:first-child {
	border-top: 1px solid var(--c-linea);
}

@media (min-width: 720px) {
	.ceprome-servicio-lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ceprome-servicio-lista li:nth-child(2) {
		border-top: 1px solid var(--c-linea);
	}
}

@media (min-width: 960px) {
	.ceprome-servicio-dos-col {
		grid-template-columns: 380px minmax(0, 1fr);
		gap: 96px;
		align-items: start;
	}

	.ceprome-servicio-dos-col > .ceprome-servicio__titulo {
		margin-bottom: 0;
	}
}

/* Los ocho estándares — número grande a la izquierda y texto a la
   derecha, en dos columnas separadas por líneas finas. */
.ceprome-servicio-estandares {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceprome-servicio-estandares__item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding-block: 24px;
	border-bottom: 1px solid var(--c-guinda-media);
}

.ceprome-servicio-estandares__item:first-child {
	border-top: 1px solid var(--c-guinda-media);
}

.ceprome-servicio-estandares__numero {
	flex-shrink: 0;
	width: 44px;
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	color: var(--c-link);
}

.ceprome-servicio-estandares__texto {
	padding-top: 6px;
	font-size: clamp(17px, 1.3vw, 18px);
	line-height: 1.5;
}

@media (min-width: 720px) {
	.ceprome-servicio-estandares {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ceprome-servicio-estandares__item {
		gap: 24px;
		padding-block: 28px;
	}

	.ceprome-servicio-estandares__item:nth-child(odd) {
		padding-right: 40px;
	}

	.ceprome-servicio-estandares__item:nth-child(even) {
		padding-left: 40px;
		border-left: 1px solid var(--c-guinda-media);
	}

	.ceprome-servicio-estandares__item:nth-child(2) {
		border-top: 1px solid var(--c-guinda-media);
	}

	.ceprome-servicio-estandares__numero {
		width: 48px;
		font-size: 48px;
	}
}

/* ¿Por qué certificar? — cada razón en su celda, con línea fina arriba. */
.ceprome-servicio-porque {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceprome-servicio-porque__item {
	padding-block: 24px;
	border-top: 1px solid var(--c-linea);
	font-size: clamp(17px, 1.3vw, 18px);
	line-height: 1.6;
	color: var(--c-text-muted);
}

@media (min-width: 720px) {
	.ceprome-servicio-porque {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 56px;
	}
}

/* Banda de cierre — guinda de marca de borde a borde, igual en claro y
   oscuro; el texto sigue la retícula. */
.ceprome-servicio-cierre {
	padding-block: clamp(64px, 8vw, 112px);
	background: var(--ceprome-guinda);
	color: #FFFFFF;
}

.ceprome-servicio-cierre__texto {
	max-width: 1000px;
	font-size: clamp(17px, 1.3vw, 18px);
	line-height: 1.7;
}

.ceprome-servicio-cierre__remate {
	margin-top: 32px;
	font-size: clamp(24px, 2.2vw, 28px);
	font-weight: 800;
	line-height: 1.2;
}

.ceprome-servicio-cierre__frase {
	max-width: 1040px;
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 600;
	line-height: 1.4;
}

/* ==========================================================================
   Tarjeta de persona — Equipo (page-equipo.php). Foto 1:1 (tamaño
   ceprome_persona) o avatar con iniciales, nombre, cargo y correo. Sin
   borde ni enlace a la ficha: es una foto de equipo con sus datos, no una
   ficha que se abre. Consejo Latinoamericano tiene su propia tarjeta,
   con borde, bandera y enlace a la ficha (ver .ceprome-consejo-card).
   ========================================================================== */

.ceprome-persona-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.ceprome-persona-card__photo {
	width: 100%;
	aspect-ratio: 1;
	border-radius: var(--ceprome-radius);
	object-fit: cover;
	background: var(--c-band-bg);
}

/* Sin foto: iniciales grandes sobre guinda suave (adapta claro/oscuro). */
.ceprome-persona-card__photo--iniciales {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-guinda-suave);
	color: var(--c-guinda-profunda);
	font-size: clamp(56px, 7vw, 88px);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.ceprome-persona-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
}

.ceprome-persona-card__name {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.ceprome-persona-card__cargo {
	font-size: 15px;
	line-height: 1.45;
	color: var(--c-text-muted);
}

.ceprome-persona-card__email {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	margin-top: 6px;
	font-size: 15px;
	line-height: 1.4;
}

.ceprome-persona-card__email span {
	overflow-wrap: anywhere;
}

.ceprome-persona-card__email-icono {
	flex-shrink: 0;
}

/* ==========================================================================
   Equipo (page-equipo.php) — hero compartido (servicio-hero.php),
   cuadrícula de integrantes y "Nuestros valores" en franja de fondo.
   ========================================================================== */

.ceprome-equipo__integrantes {
	padding-block: var(--ceprome-section-padding);
}

.ceprome-equipo__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 720px) {
	.ceprome-equipo__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.ceprome-equipo__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 56px 40px;
	}
}

.ceprome-equipo__valores {
	padding-block: var(--ceprome-section-padding);
	background: var(--c-band-bg);
}

.ceprome-equipo__valores-inner {
	display: grid;
	gap: clamp(28px, 4vw, 48px);
}

.ceprome-equipo__valores-titulo {
	font-size: clamp(26px, 3.2vw, 36px);
	font-weight: 600;
	line-height: 1.15;
}

.ceprome-equipo__valores-lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceprome-equipo__valor {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 6px 12px;
	padding-block: 22px 26px;
	border-top: 1px solid var(--c-linea);
}

.ceprome-equipo__valor-numero {
	grid-row: span 2;
	padding-top: 3px;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-link);
	font-variant-numeric: tabular-nums;
}

.ceprome-equipo__valor-nombre {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

.ceprome-equipo__valor-texto {
	font-size: 16px;
	line-height: 1.55;
	color: var(--c-text-muted);
}

@media (min-width: 720px) {
	.ceprome-equipo__valores-lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Título a la izquierda, valores a la derecha en dos columnas. */
@media (min-width: 1025px) {
	.ceprome-equipo__valores-inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: 64px;
		align-items: start;
	}

	.ceprome-equipo__valores-titulo {
		padding-top: 18px;
	}
}

/* ==========================================================================
   Nuestra Historia (page-nuestra-historia.php) — cronología institucional.
   Diseño aprobado en el canvas "CEPROME — Cronología institucional".
   Congreso y papa van como tarjeta sólida (.ceprome-hito-card) en colores
   de marca fijos, iguales en claro y oscuro: guinda y el dorado de la
   banda del Congreso (#CD8D11). Todo lo demás, como línea con punto
   (.ceprome-hito-linea): azul para publicación y maestría, gris para el
   resto. El azul no tiene variable global: vive aquí, con su versión
   para modo oscuro.
   ========================================================================== */

.ceprome-historia {
	--hito-azul: #2260A4;
	--hito-azul-texto: #1A4A82;
	--hito-azul-fondo: #DCE8F5;
	--hito-dorado: #CD8D11;
	--hito-badge-borde: color-mix(in srgb, var(--c-text) 25%, var(--c-bg));

	padding-block: clamp(40px, 5vw, 56px) clamp(56px, 7vw, 80px);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .ceprome-historia {
		--hito-azul: #6FA3DE;
		--hito-azul-texto: #B5D0F0;
		--hito-azul-fondo: color-mix(in srgb, #2260A4 32%, var(--c-bg-elevated));
	}
}

:root[data-theme="dark"] .ceprome-historia {
	--hito-azul: #6FA3DE;
	--hito-azul-texto: #B5D0F0;
	--hito-azul-fondo: color-mix(in srgb, #2260A4 32%, var(--c-bg-elevated));
}

/* Encabezado */
.ceprome-historia__header {
	margin-bottom: clamp(36px, 4vw, 52px);
	padding-bottom: 28px;
	border-bottom: 2px solid var(--c-text);
}

.ceprome-historia__eyebrow {
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-link);
}

.ceprome-historia__title {
	font-size: clamp(36px, 5vw, 52px);
	font-weight: 800;
	line-height: 1.04;
	color: var(--c-text);
}

.ceprome-historia__intro {
	margin-top: 12px;
	max-width: 660px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--c-text-muted);
}

.ceprome-historia__fechas {
	margin-top: 10px;
	font-size: 15px;
	color: var(--c-text-subtle);
}

/* Leyenda: cuadro para las tarjetas sólidas, punto para las líneas. */
.ceprome-historia__leyenda {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin: 0 0 44px;
	padding: 0;
	list-style: none;
}

.ceprome-historia__leyenda li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--c-text-muted);
}

.ceprome-historia__muestra {
	flex-shrink: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--c-text-subtle);
}

.ceprome-historia__muestra--congreso,
.ceprome-historia__muestra--papa {
	width: 12px;
	height: 12px;
	border-radius: var(--ceprome-radius);
}

.ceprome-historia__muestra--congreso {
	background: var(--ceprome-guinda);
}

.ceprome-historia__muestra--papa {
	background: var(--hito-dorado);
}

.ceprome-historia__muestra--publicacion {
	background: var(--hito-azul);
}

/* Bloque de año */
.ceprome-historia__anio + .ceprome-historia__anio {
	margin-top: 40px;
}

.ceprome-historia__anio-header {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 1.5px solid var(--c-border);
}

/* Duplet no trae 500: el 500 del canvas se pinta como 400. */
.ceprome-historia__anio-num {
	font-size: clamp(36px, 4vw, 44px);
	font-weight: 400;
	line-height: 1;
	color: var(--c-text-muted);
}

.ceprome-historia__anio-tag {
	font-size: 14px;
	font-style: italic;
	color: var(--c-text-subtle);
}

/* Párrafos introductorios del año: entre el encabezado y los hitos. */
.ceprome-historia__anio-intro {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 720px;
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--c-text-muted);
}

/* Cierre: después del último año, separado como el encabezado. */
.ceprome-historia__cierre {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 720px;
	margin-top: clamp(48px, 6vw, 72px);
	padding-top: 28px;
	border-top: 2px solid var(--c-text);
	font-size: 16px;
	line-height: 1.65;
	color: var(--c-text-muted);
}

.ceprome-historia__cierre-titulo {
	font-size: clamp(26px, 3vw, 32px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--c-text);
}

.ceprome-historia__hitos,
.ceprome-historia__mas {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Oculto solo con JS disponible (mismo marcador que .ceprome-reveal):
   sin JS, los hitos secundarios quedan visibles y el botón no aparece. */
.ceprome-reveal-js .ceprome-historia__mas:not(.is-abierto) {
	display: none;
}

.ceprome-historia__toggle {
	display: none;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-link);
	cursor: pointer;
}

.ceprome-reveal-js .ceprome-historia__toggle {
	display: inline-flex;
}

.ceprome-historia__toggle:hover {
	color: var(--c-link-hover);
}

.ceprome-historia__toggle:focus-visible {
	outline: 2px solid var(--c-link);
	outline-offset: 2px;
}

.ceprome-historia__toggle svg {
	transition: transform 200ms ease;
}

.ceprome-historia__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* Tarjetas sólidas — congreso y papa. Colores de marca fijos: no cambian
   con el modo, así que el texto tampoco. Navy sobre #CD8D11 da 6:1. */
.ceprome-hito-card {
	--card-fg: #FFFFFF;
	--card-fg-suave: rgba(255, 255, 255, 0.8);
	--card-badge-fondo: rgba(255, 255, 255, 0.12);
	--card-badge-borde: rgba(255, 255, 255, 0.4);
	--card-badge-hover: rgba(255, 255, 255, 0.24);

	padding: 16px 20px;
	border-radius: 12px;
	color: var(--card-fg);
}

.ceprome-hito-card--congreso {
	background: var(--ceprome-guinda);
}

.ceprome-hito-card--papa {
	--card-fg: var(--ceprome-navy);
	--card-fg-suave: rgba(14, 27, 41, 0.8);
	--card-badge-fondo: rgba(26, 31, 58, 0.1);
	--card-badge-borde: rgba(26, 31, 58, 0.3);
	--card-badge-hover: rgba(26, 31, 58, 0.2);

	background: var(--hito-dorado);
}

.ceprome-hito-card__etiqueta {
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--card-fg);
	opacity: 0.8;
}

.ceprome-hito-card__titulo {
	margin-bottom: 4px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--card-fg);
}

.ceprome-hito-card__sub {
	font-size: 13px;
	color: var(--card-fg-suave);
}

/* Línea — sin contenedor: punto + texto. */
.ceprome-hito-linea {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-block: 6px;
}

.ceprome-hito-linea__punto {
	flex-shrink: 0;
	width: 5px;
	height: 5px;
	margin-top: 8px;
	border-radius: 50%;
	background: var(--c-text-subtle);
}

.ceprome-hito-linea--azul .ceprome-hito-linea__punto {
	background: var(--hito-azul);
}

.ceprome-hito-linea__cuerpo {
	min-width: 0;
}

.ceprome-hito-linea__texto {
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-text-muted);
}

.ceprome-hito-linea--azul .ceprome-hito-linea__texto {
	color: var(--c-text);
}

.ceprome-hito-linea__sub {
	margin-top: 2px;
	font-size: 13px;
	color: var(--c-text-subtle);
}

/* Badges */
.ceprome-hito__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.ceprome-hito-linea .ceprome-hito__badges {
	margin-top: 8px;
}

.ceprome-hito__badge {
	display: inline-flex;
	padding: 4px 14px;
	border: 0.5px solid var(--hito-badge-borde);
	border-radius: 20px;
	background: var(--c-band-bg);
	font-size: 12px;
	line-height: 1.5;
	color: var(--c-text);
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

a.ceprome-hito__badge:hover {
	border-color: var(--c-text);
	color: var(--c-text);
}

a.ceprome-hito__badge:focus-visible {
	outline: 2px solid var(--c-link);
	outline-offset: 2px;
}

.ceprome-hito__badge--pub {
	border-color: var(--hito-azul);
	background: var(--hito-azul-fondo);
	color: var(--hito-azul-texto);
}

a.ceprome-hito__badge--pub:hover {
	border-color: var(--hito-azul);
	background: var(--hito-azul);
	color: var(--c-bg-elevated);
}

.ceprome-hito__badge--pendiente {
	border-color: var(--c-linea);
	background: var(--c-border);
	color: var(--c-text-subtle);
	cursor: default;
}

/* Dentro de una tarjeta sólida, toda badge toma el color de la tarjeta,
   sin importar su tipo. */
.ceprome-hito-card .ceprome-hito__badge {
	border-color: var(--card-badge-borde);
	background: var(--card-badge-fondo);
	color: var(--card-fg);
}

.ceprome-hito-card a.ceprome-hito__badge:hover {
	border-color: var(--card-fg);
	background: var(--card-badge-hover);
	color: var(--card-fg);
}

.ceprome-hito-card a.ceprome-hito__badge:focus-visible {
	outline-color: var(--card-fg);
}

.ceprome-hito-card .ceprome-hito__badge--pendiente {
	background: transparent;
	opacity: 0.65;
}

/* ==========================================================================
   Consejo Latinoamericano (page-consejo-latinoamericano.php) — hero
   compartido (servicio-hero.php), intro con el mapa sobre fondo elevado,
   miembros fundadores (3 columnas) y adscritos (4 columnas) sobre el
   fondo de la página, y Misión / Origen / Compromiso en tres columnas.
   ========================================================================== */

/* Hero: la foto del Consejo va centrada en los dos ejes (el hero
   compartido la corre a la derecha, 70% 50%). */
.ceprome-consejo .ceprome-servicio-hero__imagen {
	object-position: center center;
}

/* Sección principal. Desde 900px, dos columnas 62% / 38% dentro de la
   retícula: a la izquierda mapa → Misión/Origen/Compromiso, con
   fondo elevado que se extiende hasta el borde izquierdo de la ventana
   (::before); a la derecha fundadores → adscritos, sobre el fondo de la
   página.
   En móvil las columnas se deshacen (display: contents) y `order` apila:
   mapa → fundadores → adscritos → Misión/Origen/Compromiso, todo sobre
   fondo elevado. */
.ceprome-consejo__principal {
	overflow-x: clip;
	background: var(--c-bg-elevated);
}

.ceprome-consejo__principal-inner {
	display: grid;
	gap: 32px;
	padding-block: 40px;
}

.ceprome-consejo__col-intro,
.ceprome-consejo__col-miembros {
	display: contents;
}

.ceprome-consejo__mapa { order: 2; }
.ceprome-consejo__miembros--fundadores { order: 4; }
.ceprome-consejo__miembros--adscritos { order: 5; }
.ceprome-consejo__cuerpo { order: 6; }

@media (min-width: 900px) {
	.ceprome-consejo__principal {
		background: none;
	}

	.ceprome-consejo__principal-inner {
		grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
		gap: 0;
		padding-block: 0;
	}

	.ceprome-consejo__col-intro,
	.ceprome-consejo__col-miembros {
		display: flex;
		flex-direction: column;
		padding-block: 56px;
	}

	/* justify-content: el mapa (con su leyenda y 01/02/03) queda centrado
	   en vertical frente a la columna de miembros, que es la más alta. */
	.ceprome-consejo__col-intro {
		position: relative;
		isolation: isolate;
		justify-content: center;
		gap: 28px;
		padding-right: clamp(32px, 3.4vw, 48px);
	}

	.ceprome-consejo__col-intro::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset-block: 0;
		left: -50vw;
		right: 0;
		background: var(--c-bg-elevated);
	}

	.ceprome-consejo__col-miembros {
		gap: 32px;
		padding-left: clamp(24px, 2.3vw, 32px);
	}

	/* Dentro de cada columna manda el orden del HTML. */
	.ceprome-consejo__col-intro > *,
	.ceprome-consejo__col-miembros > * {
		order: 0;
	}
}

/* El PNG flota sobre el fondo de la columna y ocupa todo su ancho, a su
   proporción natural. */
.ceprome-consejo__mapa {
	margin: 0;
}

.ceprome-consejo__mapa-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.ceprome-consejo__mapa-vacio {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 9 / 10;
	padding: 24px;
	border: 1px dashed var(--c-linea);
	border-radius: var(--ceprome-radius);
	text-align: center;
}

.ceprome-consejo__leyenda {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
	color: var(--c-text-muted);
}

/* Mapa (template-parts/consejo-mapa.php): SVG al ancho de la columna, sin
   fondo ni borde, solo América Latina y el Caribe. Países con miembros
   del Consejo en guinda (de marca, igual en los dos modos); el resto, en
   un gris que cambia con el modo. Resaltado en dorado #F5C842 (se lee
   sobre el guinda y sobre el gris) al pasar el mouse por el país o por la
   tarjeta de uno de sus miembros (.is-activo, initConsejoMapa()). Los
   países con miembros muy pequeños llevan un marcador de 6px. */
.ceprome-consejo-mapa {
	--mapa-region: #E0DDD8;
	--mapa-borde: var(--c-bg-elevated);
	--mapa-resaltado: #F5C842;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .ceprome-consejo-mapa {
		--mapa-region: #4A453D;
	}
}

:root[data-theme="dark"] .ceprome-consejo-mapa {
	--mapa-region: #4A453D;
}

.ceprome-consejo-mapa__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.ceprome-consejo-mapa__pais {
	fill: var(--mapa-region);
	stroke: var(--mapa-borde);
	stroke-width: 0.6;
	stroke-linejoin: round;
	transition: fill 150ms ease-out;
}

.ceprome-consejo-mapa__pais--miembros {
	fill: #A22944;
}

.ceprome-consejo-mapa__pais--miembros.is-activo {
	fill: var(--mapa-resaltado);
}

.ceprome-consejo-mapa__marcador-area {
	fill: transparent;
}

.ceprome-consejo-mapa__marcador-punto {
	fill: #A22944;
	stroke: #FFFFFF;
	stroke-width: 1.5;
	transition: fill 150ms ease-out;
}

.ceprome-consejo-mapa__marcador.is-activo .ceprome-consejo-mapa__marcador-punto {
	fill: var(--mapa-resaltado);
}

@media (hover: hover) {
	.ceprome-consejo-mapa__pais--miembros,
	.ceprome-consejo-mapa__marcador {
		cursor: pointer;
	}

	.ceprome-consejo-mapa__pais--miembros:hover {
		fill: var(--mapa-resaltado);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ceprome-consejo-mapa__pais,
	.ceprome-consejo-mapa__marcador-punto {
		transition: none;
	}
}

/* Banda de introducción (entre el hero y la sección principal): los dos
   párrafos en dos columnas desde 720px, sobre fondo elevado. */
.ceprome-consejo__intro {
	padding-block: 48px;
	border-bottom: 1px solid var(--c-border);
	background: var(--c-bg-elevated);
}

.ceprome-consejo__intro-texto {
	display: grid;
	gap: 16px;
}

.ceprome-consejo__intro-texto p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--c-text-muted);
}

@media (min-width: 720px) {
	.ceprome-consejo__intro-texto {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px;
	}
}

/* Encabezados de miembros: pastilla guinda con línea fina. Fundadores,
   pastilla a la izquierda y línea hacia la derecha; adscritos, pastilla
   centrada con línea a ambos lados. */
.ceprome-consejo__miembros-encabezado {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.ceprome-consejo__miembros-encabezado::before,
.ceprome-consejo__miembros-encabezado::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--c-border);
}

.ceprome-consejo__miembros--fundadores .ceprome-consejo__miembros-encabezado::before {
	display: none;
}

.ceprome-consejo__pastilla {
	flex: none;
	padding: 4px 14px;
	border: 1px solid var(--c-link);
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--c-link);
}

/* Tarjetas compactas: 1 columna en móvil y en la columna de 38% (mide
   menos de 380px: dos tarjetas dejarían ~100px para el nombre); 2 entre
   600 y 899px, cuando van apiladas a todo el ancho. */
.ceprome-consejo__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceprome-consejo__grid > li {
	display: flex;
	min-width: 0;
}

@media (min-width: 600px) and (max-width: 899px) {
	.ceprome-consejo__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ceprome-consejo-card {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 8px;
	border: 1px solid var(--c-border);
	border-radius: 8px;
	background: var(--c-bg-elevated);
	color: var(--c-text);
	text-decoration: none;
	transition: border-color 150ms ease-out, background-color 150ms ease-out;
}

.ceprome-consejo-card:hover,
.ceprome-consejo-card:focus-visible {
	border-color: var(--c-link);
	color: var(--c-text);
	text-decoration: none;
}

.ceprome-consejo-card:hover .ceprome-consejo-card__nombre,
.ceprome-consejo-card:focus-visible .ceprome-consejo-card__nombre {
	color: var(--c-link);
}

/* Tarjetas del país que está bajo el mouse en el mapa. */
.ceprome-consejo-card.is-resaltada {
	border-color: #A22944;
	background: color-mix(in srgb, #A22944 7%, var(--c-bg-elevated));
}

@media (prefers-reduced-motion: reduce) {
	.ceprome-consejo-card {
		transition: none;
	}
}

.ceprome-consejo-card__foto {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--c-band-bg);
}

.ceprome-consejo-card__foto--iniciales {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-guinda-suave);
	color: var(--c-guinda-profunda);
	font-size: 13px;
	font-weight: 600;
}

.ceprome-consejo-card__body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.ceprome-consejo-card__nombre {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.ceprome-consejo-card__cargo {
	font-size: 11px;
	line-height: 1.3;
	color: var(--c-text-muted);
}

.ceprome-consejo-card__bandera {
	margin-top: 3px;
	font-size: 10px;
	line-height: 1;
}

/* Misión / Origen / Compromiso, versión compacta: apiladas en móvil, en
   tres columnas desde 900px bajo el mapa. */
.ceprome-consejo__cuerpo {
	display: grid;
	gap: 20px;
	padding-top: 24px;
	border-top: 1px solid var(--c-border);
}

@media (min-width: 900px) {
	.ceprome-consejo__cuerpo {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px;
	}
}

.ceprome-consejo__numero {
	display: block;
	margin-bottom: 6px;
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	color: var(--c-link);
	opacity: 0.2;
}

.ceprome-consejo__seccion-titulo {
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

.ceprome-consejo__seccion p {
	font-size: 12px;
	line-height: 1.65;
	color: var(--c-text-muted);
}

/* Banda guinda bajo el hero: la frase del Consejo en blanco, de ancho
   completo. Colores de marca fijos, iguales en claro y oscuro. */
.ceprome-consejo__frase {
	padding-block: 48px;
	background: #A22944;
}

.ceprome-consejo__frase-texto {
	max-width: 820px;
	margin-inline: auto;
	font-size: clamp(19px, 2vw, 22px);
	font-style: italic;
	font-weight: 600;
	line-height: 1.45;
	text-align: center;
	color: #FFFFFF;
}


/* ==========================================================================
   Apóstoles de la Prevención (page-apostoles-de-la-prevencion.php)
   Hero compartido de Gestión Institucional y dos secciones en una sola
   columna de lectura de 800px, centrada en la retícula: texto, video
   16:9, frase destacada y cita larga con línea guinda.
   ========================================================================== */

.ceprome-apostoles__seccion {
	padding-block: var(--ceprome-section-padding);
}

.ceprome-apostoles__seccion--sin-tope {
	padding-top: 0;
}

.ceprome-apostoles__columna {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 800px;
	margin-inline: auto;
}

.ceprome-apostoles__titulo {
	margin-bottom: 4px;
	font-size: clamp(26px, 3.2vw, 36px);
	font-weight: 600;
	line-height: 1.15;
}

.ceprome-apostoles__texto {
	font-size: clamp(17px, 1.3vw, 18px);
	line-height: 1.7;
	color: var(--c-text-muted);
}

/* Frase destacada: el énfasis de la sección, sin firma ni línea. */
.ceprome-apostoles__frase {
	margin-block: 8px;
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 600;
	font-style: italic;
	line-height: 1.4;
	color: var(--c-text);
}

.ceprome-apostoles__cita {
	margin: 8px 0;
	padding: 4px 0 4px clamp(20px, 3vw, 32px);
	border-left: 3px solid var(--c-link);
}

.ceprome-apostoles__cita-texto {
	margin: 0;
}

/* Cita larga (un párrafo completo): tamaño de lectura para que no
   compita con la frase destacada. */
.ceprome-apostoles__cita-texto p {
	font-size: clamp(17px, 1.3vw, 18px);
	font-style: italic;
	line-height: 1.7;
	color: var(--c-text);
}

.ceprome-apostoles__cita-autor {
	margin-top: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--c-link);
}

/* Video 16:9 responsivo: el padding-bottom (9 / 16 = 56.25%) reserva el
   alto y el iframe llena la caja. */
.ceprome-apostoles__video {
	position: relative;
	width: 100%;
	height: 0;
	margin-block: 8px;
	padding-bottom: 56.25%;
	overflow: hidden;
	border-radius: var(--ceprome-radius);
	background: var(--ceprome-ink);
}

.ceprome-apostoles__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ==========================================================================
   Red de Vinculación (page-red-de-vinculacion.php) — hero guinda con
   métricas, mapa Leaflet de borde a borde, pastillas + cuadrícula de
   instituciones (mismo .ceprome-pill y mismo filtrado que los archivos),
   con panel lateral (texto introductorio y departamento). Diseño en el
   canvas "CEPROME — Red de Vinculación".

   Colores fijos, iguales en claro y oscuro: el hero (color de marca), el
   mapa y su leyenda (los tiles de OpenStreetMap son claros en los dos
   modos), el punto de cada categoría y los badges de estado del convenio.
   ========================================================================== */

/* Fondo detrás del logo de cada tarjeta: blanco en claro; en oscuro, un
   paso más claro que la tarjeta para que el logo no flote. */
.ceprome-red,
.ceprome-red-modal {
	--c-logo-bg: #FFFFFF;
}

.ceprome-red__hero {
	background: var(--ceprome-guinda);
	color: #FFFFFF;
	padding-block: clamp(48px, 5vw, 64px) clamp(40px, 4vw, 48px);
}

.ceprome-red__hero-inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.ceprome-red__eyebrow {
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.ceprome-red__titulo {
	font-weight: 800;
	font-size: clamp(40px, 5.5vw, 60px);
	line-height: 1.04;
	color: #FFFFFF;
}

.ceprome-red__tagline {
	margin-top: 14px;
	max-width: 620px;
	font-size: clamp(16px, 1.6vw, 18px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}

.ceprome-red__metricas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
	margin: 0;
}

.ceprome-red__metrica {
	display: flex;
	flex-direction: column-reverse;
	gap: 4px;
}

.ceprome-red__metrica-valor {
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-size: 36px;
	font-weight: 800;
	line-height: 1;
	color: #FFFFFF;
}

.ceprome-red__metrica-etiqueta {
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

/* Mapa */

.ceprome-red__mapa-wrap {
	position: relative;
	border-bottom: 1px solid var(--c-border);
}

/* 380px en móvil, 520px desde 601px (ver el media query de abajo). */
.ceprome-red__mapa {
	height: 380px;
	background: #DDE0E6;
	font-family: var(--ceprome-font);
	z-index: 0;
}

.ceprome-red__leyenda {
	display: none;
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 1;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 10px 12px;
	list-style: none;
	background: rgba(255, 255, 255, 0.92);
	border-radius: var(--ceprome-radius);
	font-size: 12px;
	color: #585857;
}

.ceprome-red__leyenda li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ceprome-red__punto {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ceprome-red-color, #8A8781);
}

.ceprome-red__leyenda .ceprome-red__punto {
	width: 10px;
	height: 10px;
	box-shadow: 0 0 0 1.5px #FFFFFF, 0 0 0 2.5px var(--ceprome-red-color, #8A8781);
}

/* Con zoom fraccionario (fitBounds + zoomSnap 0.25) Chrome deja una
   línea clara entre tiles; un outline transparente la cierra. */
.ceprome-red__mapa .leaflet-tile-container img {
	outline: 1px solid transparent;
}

/* Controles del mapa (+, −, centrar): grupo compacto en la esquina
   superior derecha, con los colores del tema. Sin sombra. */
.ceprome-red__controles {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	display: flex;
	flex-direction: column;
}

.ceprome-red__controles[hidden] {
	display: none;
}

.ceprome-red__control {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0.5px solid var(--c-border);
	border-radius: 0;
	background: var(--c-bg-elevated);
	color: var(--c-text);
	font-family: var(--ceprome-font);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.ceprome-red__control + .ceprome-red__control {
	border-top: 0;
}

.ceprome-red__control:first-child {
	border-radius: 4px 4px 0 0;
}

.ceprome-red__control:last-child {
	border-radius: 0 0 4px 4px;
}

.ceprome-red__control--texto {
	font-size: 18px;
	font-weight: 600;
}

.ceprome-red__control:hover:not(:disabled) {
	background: var(--c-band-bg);
}

.ceprome-red__control:disabled {
	color: var(--c-text-subtle);
	cursor: default;
}

.ceprome-red__control:focus-visible {
	position: relative;
	z-index: 1;
	outline-offset: 0;
}

/* Pin (divIcon) y grupo de pines (markercluster). Colores fijos: el mapa
   es claro en los dos modos. */
.ceprome-red-pin {
	background: none;
	border: 0;
}

.ceprome-red-pin span {
	display: block;
	width: 16px;
	height: 16px;
	border: 2px solid #FFFFFF;
	border-radius: 50%;
	background: var(--ceprome-red-color, #8A8781);
	box-sizing: border-box;
}

.ceprome-red-cluster {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #FFFFFF;
	border-radius: 50%;
	background: #A22944;
	color: #FFFFFF;
	font-family: var(--ceprome-font);
	font-size: 12px;
	font-weight: 600;
}

/* Tamaños (en el JS del mapa): 32px (menos de 10), 34px (10+) y 38px
   (20+), para que quepan en el radio de agrupación de 40px. */

.ceprome-red-pin:focus-visible,
.ceprome-red-cluster:focus-visible {
	outline: 2px solid #0E1B29;
	outline-offset: 2px;
}

/* Popup del pin: fondo blanco de Leaflet en los dos modos. */
.ceprome-red .leaflet-popup-content {
	margin: 12px 16px;
	font-family: var(--ceprome-font);
}

/* Leaflet da 17px de margen a cada <p> del popup. */
.ceprome-red .leaflet-popup-content p {
	margin: 0;
}

.ceprome-red-popup__logo {
	display: block;
	width: 48px;
	height: 48px;
	margin-bottom: 8px;
	object-fit: contain;
}

.ceprome-red-popup__nombre {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: #221F1D;
}

.ceprome-red-popup__meta {
	margin-top: 4px;
	font-size: 12px;
	color: #585857;
}

.ceprome-red .leaflet-popup-content .ceprome-red-popup__enlace {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #A22944;
}

/* Pastillas + cuadrícula */

.ceprome-red__listado {
	padding-top: clamp(24px, 3vw, 36px);
	padding-bottom: var(--ceprome-section-padding);
}

.ceprome-red__listado .ceprome-archivo__filtros {
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 8px;
	margin-inline: calc(-1 * var(--ceprome-gutter));
	padding-inline: var(--ceprome-gutter);
	margin-bottom: 20px;
	scrollbar-width: none;
}

.ceprome-red__listado .ceprome-archivo__filtros::-webkit-scrollbar {
	display: none;
}

.ceprome-red__listado .ceprome-pill {
	flex-shrink: 0;
	white-space: nowrap;
}

.ceprome-archivo__grid.ceprome-red__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.ceprome-red-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 14px;
	background: var(--c-bg-elevated);
	border: 1px solid var(--c-border);
	border-radius: 8px;
}

.ceprome-red-card__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

/* Con logo, el logo ocupa el lugar del punto de color. */
.ceprome-red-card__meta--logo {
	gap: 10px;
	margin-bottom: 10px;
}

.ceprome-red-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	padding: 3px;
	background: var(--c-logo-bg);
	border-radius: 4px;
}

.ceprome-red-card__logo-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ceprome-red-card__nombre {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--c-text);
}

/* "Aliada desde 2019": pie de la tarjeta, al fondo. Sin año no se pinta. */
.ceprome-red-card__desde {
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--c-border);
	font-size: 11px;
	line-height: 1.5;
	color: var(--c-text-muted);
}

/* Toda la tarjeta abre la ficha: el botón del nombre se estira sobre ella
   con ::after, así queda un solo control para teclado y lector. */
.ceprome-red-card__abrir {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.ceprome-red-card__abrir::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
}

.ceprome-red-card__abrir:focus-visible {
	outline: none;
}

.ceprome-red-card__abrir:focus-visible::after {
	outline: 2px solid var(--ceprome-guinda);
	outline-offset: 2px;
}

.ceprome-red-card:hover {
	border-color: var(--c-text-subtle);
}

.ceprome-red-card:hover .ceprome-red-card__abrir {
	text-decoration: underline;
}

/* El pie siempre separado del nombre, aunque la tarjeta no crezca. El
   margen va en el nombre para que el pie conserve su margin-top: auto y
   quede al fondo en las tarjetas que crecen con su fila. */
.ceprome-red-card__nombre:has(+ .ceprome-red-card__desde) {
	margin-bottom: 12px;
}

/* Cuerpo del listado: cuadrícula de tarjetas + panel lateral. En móvil
   (hasta 768px) el panel baja debajo de la cuadrícula, a ancho completo;
   desde 769px, columna fija de 280px que se queda a la vista al bajar. */

.ceprome-red__cuerpo {
	display: grid;
	gap: 24px;
}

.ceprome-red__panel {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Hasta 768px el panel se deshace: sus piezas pasan a ser filas del
   cuerpo, con los filtros arriba de la cuadrícula y los dos bloques al
   final. */
@media (max-width: 768px) {
	.ceprome-red__panel {
		display: contents;
	}

	.ceprome-red__panel .ceprome-archivo__filtros {
		order: -1;
	}

	.ceprome-red__panel-bloque {
		order: 1;
	}
}

/* El gap del cuerpo ya separa los filtros de la cuadrícula (gana a los
   márgenes de .ceprome-red__listado .ceprome-archivo__filtros). */
.ceprome-red__listado .ceprome-red__cuerpo .ceprome-archivo__filtros {
	margin-bottom: 0;
}

/* Los dos bloques se distinguen solo por el fondo, sin borde: el texto
   introductorio va directo sobre el fondo de la página (alineado con las
   pastillas) y el departamento, sobre el fondo elevado. */
.ceprome-red__panel-bloque--intro {
	padding: 4px 0;
}

.ceprome-red__panel-bloque--depto {
	padding: 20px;
	background: var(--c-bg-elevated);
	border-radius: 8px;
}

.ceprome-red__panel-texto {
	font-size: 13px;
	line-height: 1.6;
	color: var(--c-text-muted);
}

/* Departamento (dentro del panel): directora y asistente apilados. */

.ceprome-red__depto-titulo {
	margin-bottom: 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-link);
}

.ceprome-red__personas {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ceprome-red__persona {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	flex: 1;
	min-width: 0;
}

.ceprome-red__persona + .ceprome-red__persona {
	padding-top: 20px;
	border-top: 1px solid var(--c-border);
}

.ceprome-red__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	font-size: 16px;
	font-weight: 600;
}

.ceprome-red__avatar--directora {
	background: var(--ceprome-guinda);
	color: #FFFFFF;
}

.ceprome-red__avatar--asistente {
	background: var(--c-border);
	color: var(--c-text-muted);
}

.ceprome-red__persona-texto {
	min-width: 0;
}

.ceprome-red__persona-nombre {
	margin-bottom: 2px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.ceprome-red__persona-nombre a {
	color: var(--c-text);
	text-decoration: none;
}

.ceprome-red__persona-nombre a:hover,
.ceprome-red__persona-nombre a:focus-visible {
	text-decoration: underline;
}

.ceprome-red__persona-cargo {
	margin-bottom: 4px;
	font-size: 13px;
	color: var(--c-text-muted);
}

.ceprome-red__depto-correo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: -4px 0 16px;
	font-size: 13px;
	color: var(--c-text-muted);
}

.ceprome-red__depto-correo svg {
	flex-shrink: 0;
}

.ceprome-red__depto-correo a {
	color: var(--c-link);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.ceprome-red__depto-correo a:hover,
.ceprome-red__depto-correo a:focus-visible {
	color: var(--c-link-hover);
	text-decoration: underline;
}

/* En oscuro, el punto más oscuro (Asociación civil) se funde con la
   tarjeta: lleva un anillo claro. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .ceprome-red,
	:root:not([data-theme="light"]) .ceprome-red-modal {
		--c-logo-bg: color-mix(in srgb, #FFFFFF 12%, var(--c-bg-elevated));
	}

	:root:not([data-theme="light"]) .ceprome-red-card .ceprome-red__punto {
		box-shadow: 0 0 0 1px var(--c-text-subtle);
	}
}

:root[data-theme="dark"] .ceprome-red,
:root[data-theme="dark"] .ceprome-red-modal {
	--c-logo-bg: color-mix(in srgb, #FFFFFF 12%, var(--c-bg-elevated));
}

:root[data-theme="dark"] .ceprome-red-card .ceprome-red__punto {
	box-shadow: 0 0 0 1px var(--c-text-subtle);
}

@media (min-width: 601px) {
	.ceprome-red__mapa {
		height: 520px;
	}

	/* En móvil la leyenda taparía medio mapa; ahí las pastillas nombran
	   las categorías. */
	.ceprome-red__leyenda {
		display: flex;
	}

	.ceprome-red__listado .ceprome-archivo__filtros {
		flex-wrap: wrap;
		overflow-x: visible;
		margin-inline: 0;
		padding-inline: 0;
		margin-bottom: 24px;
	}
}

@media (min-width: 720px) {
	.ceprome-archivo__grid.ceprome-red__grid {
		gap: 16px;
	}

	.ceprome-red-card {
		padding: 16px;
	}
}

@media (min-width: 769px) {
	.ceprome-red__cuerpo {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: 32px;
		align-items: start;
	}

	.ceprome-red__panel {
		position: sticky;
		top: 24px;
	}

	/* Filtros en columna, cada pastilla a lo ancho del panel. */
	.ceprome-red__cuerpo .ceprome-archivo__filtros {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 6px;
		overflow: visible;
		margin: 0;
		padding: 0;
	}

	.ceprome-red__panel .ceprome-pill {
		width: 100%;
		text-align: left;
		white-space: normal;
	}
}

@media (min-width: 960px) {
	.ceprome-red__hero-inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		gap: 48px;
	}

	.ceprome-red__metricas {
		display: flex;
		flex-shrink: 0;
		gap: 40px;
		padding-bottom: 4px;
	}

	.ceprome-red__metrica {
		align-items: center;
		text-align: center;
	}

	.ceprome-red__metrica-valor {
		font-size: 44px;
	}
}

/* Ficha de institución (<dialog>) — en móvil ocupa toda la pantalla; desde
   601px, caja centrada de 560px con radio de 12px. Sin sombra: el fondo
   oscurecido basta para separarla. */

.ceprome-modal-abierto {
	overflow: hidden;
}

.ceprome-red-modal {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--c-bg-elevated);
	color: var(--c-text);
}

.ceprome-red-modal::backdrop {
	background: rgba(34, 31, 29, 0.6);
}

.ceprome-red-modal__caja {
	position: relative;
	min-height: 100%;
	padding: 56px 20px 32px;
}

.ceprome-red-modal__cerrar {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--c-text-muted);
	cursor: pointer;
}

.ceprome-red-modal__cerrar:hover {
	color: var(--c-text);
	background: var(--c-band-bg);
}

.ceprome-red-modal__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	margin-bottom: 20px;
	padding: 8px;
	background: var(--c-logo-bg, #FFFFFF);
	border: 1px solid var(--c-border);
	border-radius: 8px;
}

.ceprome-red-modal__logo-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ceprome-red-modal__titulo {
	padding-right: 32px;
	font-size: clamp(22px, 2.4vw, 26px);
	font-weight: 800;
	line-height: 1.2;
	color: var(--c-text);
}

.ceprome-red-modal__categoria {
	display: inline-block;
	margin-top: 12px;
	padding: 3px 12px;
	border-radius: 20px;
	background: var(--ceprome-red-color, #8A8781);
	/* Blanco, o navy sobre el dorado de Conferencia (color_texto del plugin). */
	color: var(--ceprome-red-color-texto, #FFFFFF);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
}

.ceprome-red-modal__datos {
	display: grid;
	gap: 14px;
	margin: 24px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--c-border);
}

.ceprome-red-modal__datos dt {
	margin-bottom: 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.ceprome-red-modal__datos dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--c-text);
	overflow-wrap: anywhere;
}

.ceprome-red-modal__datos a {
	color: var(--c-link);
}

.ceprome-red-modal__datos a:hover {
	color: var(--c-link-hover);
}

@media (min-width: 601px) {
	.ceprome-red-modal {
		width: min(560px, calc(100% - 48px));
		height: fit-content;
		max-height: calc(100% - 48px);
		margin: auto;
		border-radius: 12px;
	}

	.ceprome-red-modal__caja {
		min-height: 0;
		padding: 40px 36px 36px;
	}
}

/* Animaciones de Red de Vinculación — el script inline de animaciones de
   page-red-de-vinculacion.php pone las clases. Como el resto del sistema de
   reveal, los estados ocultos dependen de ceprome-reveal-js en <html>: sin
   JS (o sin IntersectionObserver) todo se ve desde el principio. */

/* Hero: título, luego tagline (+150ms); las métricas aparecen al empezar
   a contar (+300ms, lo decide el JS). */
.ceprome-reveal-js .ceprome-red__titulo,
.ceprome-reveal-js .ceprome-red__tagline {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.ceprome-reveal-js .ceprome-red__tagline {
	transition-delay: 150ms;
}

.ceprome-reveal-js .ceprome-red__metricas {
	opacity: 0;
	transition: opacity 300ms ease-out;
}

.ceprome-red__hero.is-animado .ceprome-red__titulo,
.ceprome-red__hero.is-animado .ceprome-red__tagline,
.ceprome-red__hero.is-contando .ceprome-red__metricas {
	opacity: 1;
	transform: none;
}

/* Tarjetas: entrada al scroll (400ms, retraso por columna en
   --ceprome-red-retraso) y transición del filtro (salida 180ms, entrada
   250ms con 8px de subida). */
.ceprome-red-card {
	transition: opacity 250ms ease-out, transform 250ms ease-out, border-color 150ms ease-out;
}

.ceprome-reveal-js .ceprome-red-card {
	opacity: 0;
	transform: translateY(20px);
}

.ceprome-reveal-js .ceprome-red-card.is-visible {
	opacity: 1;
	transform: none;
}

.ceprome-red .ceprome-red-card.is-revelando {
	transition-duration: 400ms, 400ms, 150ms;
	transition-delay: var(--ceprome-red-retraso, 0ms), var(--ceprome-red-retraso, 0ms), 0ms;
}

.ceprome-red .ceprome-red-card.is-saliendo {
	opacity: 0;
	transition-duration: 180ms;
}

.ceprome-red .ceprome-red-card.is-entrando {
	opacity: 0;
	transform: translateY(8px);
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.ceprome-reveal-js .ceprome-red__titulo,
	.ceprome-reveal-js .ceprome-red__tagline,
	.ceprome-reveal-js .ceprome-red__metricas,
	.ceprome-reveal-js .ceprome-red-card,
	.ceprome-red .ceprome-red-card.is-saliendo,
	.ceprome-red .ceprome-red-card.is-entrando {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Texto completo (Red de Vinculación): entre la cuadrícula y el
   formulario. Apilado en móvil; desde 900px, título a la izquierda y
   párrafos a la derecha. */
.ceprome-red__alianzas {
	border-top: 1px solid var(--c-border);
	padding-block: var(--ceprome-section-padding);
}

.ceprome-red__alianzas-inner {
	display: grid;
	gap: 20px;
}

.ceprome-red__alianzas-titulo {
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--c-text);
}

.ceprome-red__alianzas-texto p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--c-text-muted);
}

.ceprome-red__alianzas-texto p + p {
	margin-top: 16px;
}

@media (min-width: 900px) {
	.ceprome-red__alianzas-inner {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: 56px;
		align-items: start;
	}
}

/* Solicitud de convenio (Red de Vinculación): franja de fondo elevado de
   ancho completo al final de la página. Mismo formulario que las páginas
   de servicio (.ceprome-form--servicio: dos columnas desde 720px). */
.ceprome-red__convenio {
	background: var(--c-bg-elevated);
	border-top: 1px solid var(--c-border);
	padding-block: var(--ceprome-section-padding);
	scroll-margin-top: 24px;
}

.ceprome-red__convenio-encabezado {
	max-width: 720px;
	margin: 0 auto clamp(28px, 3.5vw, 40px);
	text-align: center;
}

.ceprome-red__convenio-eyebrow {
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--c-link);
}

.ceprome-red__convenio-titulo {
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--c-text);
}

.ceprome-red__convenio-intro {
	margin-top: 14px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--c-text-muted);
}

.ceprome-red__convenio-form .ceprome-form,
.ceprome-red__convenio-form .ceprome-form__banner {
	max-width: 880px;
	margin-inline: auto;
}

/* Sobre la franja blanca, los campos toman el fondo de la página para que
   se lean como campos. */
.ceprome-red__convenio .ceprome-form__field input:not([type="checkbox"]):not([type="radio"]),
.ceprome-red__convenio .ceprome-form__field select,
.ceprome-red__convenio .ceprome-form__field textarea {
	background: var(--c-bg);
}

.ceprome-red__convenio .ceprome-form[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

/* Pastillas con color de categoría (archivo-filtros.php con 'color'; hoy
   Red de Vinculación). Inactiva: borde y texto del color, fondo
   transparente. Activa: fondo del color y texto --ceprome-pill-texto
   (blanco; navy sobre el dorado). En claro, el dorado como texto no llega
   a 4.5:1 y se oscurece; en oscuro, texto y borde inactivos se aclaran
   con blanco para leerse sobre el fondo oscuro. */
.ceprome-pill--color {
	--ceprome-pill-tinta: var(--ceprome-pill-color);
	color: var(--ceprome-pill-tinta);
	border-color: var(--ceprome-pill-tinta);
}

.ceprome-pill--color-claro {
	--ceprome-pill-tinta: color-mix(in srgb, var(--ceprome-pill-color) 70%, #000000);
	border-color: var(--ceprome-pill-color);
}

.ceprome-pill--color:hover {
	color: var(--ceprome-pill-tinta);
	border-color: var(--ceprome-pill-tinta);
	background: color-mix(in srgb, var(--ceprome-pill-color) 10%, transparent);
}

.ceprome-pill--color.is-active,
.ceprome-pill--color.is-active:hover {
	background: var(--ceprome-pill-color);
	border-color: var(--ceprome-pill-color);
	color: var(--ceprome-pill-texto, #FFFFFF);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .ceprome-pill--color {
		--ceprome-pill-tinta: color-mix(in srgb, var(--ceprome-pill-color) 55%, #FFFFFF);
		border-color: var(--ceprome-pill-tinta);
	}
}

:root[data-theme="dark"] .ceprome-pill--color {
	--ceprome-pill-tinta: color-mix(in srgb, var(--ceprome-pill-color) 55%, #FFFFFF);
	border-color: var(--ceprome-pill-tinta);
}

/* Botón "Ver información" del popup del mapa: colores fijos, el popup es
   blanco en los dos modos. */
.ceprome-red .leaflet-popup-content .ceprome-red-popup__boton {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 7px 12px;
	border: 1px solid #A22944;
	border-radius: var(--ceprome-radius-boton);
	background: transparent;
	color: #A22944;
	font-family: var(--ceprome-font);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 150ms ease-out;
}

.ceprome-red .leaflet-popup-content .ceprome-red-popup__boton:hover,
.ceprome-red .leaflet-popup-content .ceprome-red-popup__boton:focus-visible {
	background: #F1E1E5;
}

/* Ficha (<dialog>): entra con scale(0.96) → 1 y opacidad en 200ms; sale
   al revés en 150ms. Las clases las pone el script de las fichas. */
.ceprome-red-modal,
.ceprome-red-modal::backdrop {
	transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.ceprome-red-modal.is-entrando,
.ceprome-red-modal.is-saliendo {
	opacity: 0;
	transform: scale(0.96);
}

.ceprome-red-modal.is-entrando::backdrop,
.ceprome-red-modal.is-saliendo::backdrop {
	opacity: 0;
}

.ceprome-red-modal.is-saliendo,
.ceprome-red-modal.is-saliendo::backdrop {
	transition-duration: 150ms;
	transition-timing-function: ease-in;
}

@media (prefers-reduced-motion: reduce) {
	.ceprome-red-modal,
	.ceprome-red-modal::backdrop {
		transition: none;
	}
}

/* ==========================================================================
   Donar (page-donar.php) y Gracias por donar (page-gracias-por-donar.php)
   — hero guinda (color de marca, fijo en claro y oscuro), tarjeta con el
   selector de monto y el botón de PayPal, y franja con las tres frases de
   impacto. Los montos sugeridos son radios con aspecto de botón: el
   radio real queda oculto pero enfocable, y el <span> hermano pinta el
   estado. El botón de PayPal lo dibuja el SDK dentro de un iframe; aquí
   solo se le da el ancho.
   ========================================================================== */

.ceprome-donar__hero {
	background: var(--ceprome-guinda);
	color: #FFFFFF;
	padding-block: clamp(48px, 6vw, 72px);
}

.ceprome-donar__eyebrow {
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.ceprome-donar__titulo {
	font-weight: 800;
	font-size: clamp(40px, 5.5vw, 60px);
	line-height: 1.04;
	color: #FFFFFF;
}

.ceprome-donar__subtitulo {
	margin-top: 14px;
	max-width: 640px;
	font-size: clamp(16px, 1.6vw, 20px);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.ceprome-donar__seccion {
	padding-block: clamp(32px, 5vw, 64px);
}

.ceprome-donar__form {
	max-width: 640px;
	margin-inline: auto;
	padding: clamp(20px, 4vw, 40px);
	background: var(--c-bg-elevated);
	border: 1px solid var(--c-border);
	border-radius: var(--ceprome-radius);
}

.ceprome-donar__montos {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.ceprome-donar__legend {
	margin-bottom: 16px;
	padding: 0;
	font-size: 20px;
	font-weight: 800;
	color: var(--c-text);
}

/* Cinco montos: 3 + 2 en móvil (la segunda fila, centrada), los cinco en
   una fila desde 600px. */
.ceprome-donar__sugeridos {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
}

.ceprome-donar__sugerido {
	grid-column: span 2;
}

.ceprome-donar__sugerido:nth-child(4) {
	grid-column: 2 / span 2;
}

.ceprome-donar__sugerido {
	position: relative;
	display: block;
}

/* Oculto a la vista pero no al teclado ni al lector de pantalla. */
.ceprome-donar__radio {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ceprome-donar__sugerido-texto {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 12px 4px;
	font-size: 16px;
	white-space: nowrap;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--c-text);
	background: var(--c-bg);
	border: 1px solid var(--c-linea);
	border-radius: var(--ceprome-radius-boton);
	transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}

.ceprome-donar__radio:hover + .ceprome-donar__sugerido-texto {
	border-color: var(--ceprome-guinda);
}

.ceprome-donar__radio:checked + .ceprome-donar__sugerido-texto {
	color: #FFFFFF;
	background: var(--ceprome-guinda);
	border-color: var(--ceprome-guinda);
}

.ceprome-donar__radio:focus-visible + .ceprome-donar__sugerido-texto {
	outline: 2px solid var(--c-link);
	outline-offset: 2px;
}

.ceprome-donar__otro {
	margin-top: 20px;
}

.ceprome-donar__otro-label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-text);
}

.ceprome-donar__otro-campo {
	display: flex;
	align-items: center;
	background: var(--c-bg);
	border: 1px solid var(--c-linea);
	border-radius: var(--ceprome-radius);
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.ceprome-donar__otro-campo:focus-within {
	border-color: var(--c-link);
	box-shadow: 0 0 0 1px var(--c-link);
}

.ceprome-donar__otro-campo:has(.ceprome-donar__otro-input[aria-invalid="true"]) {
	border-color: var(--c-guinda-profunda);
}

.ceprome-donar__otro-prefijo,
.ceprome-donar__otro-sufijo {
	flex-shrink: 0;
	padding-inline: 14px;
	font-size: 15px;
	color: var(--c-text-muted);
}

.ceprome-donar__otro-prefijo {
	padding-right: 4px;
	font-size: 17px;
}

.ceprome-donar__otro-input {
	flex: 1;
	min-width: 0;
	padding: 13px 0;
	font-family: inherit;
	font-size: 17px;
	font-variant-numeric: tabular-nums;
	color: var(--c-text);
	background: transparent;
	border: 0;
	outline: none;
}

.ceprome-donar__otro-input::placeholder {
	color: var(--c-text-subtle);
}

.ceprome-donar__error {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-guinda-profunda);
}

.ceprome-donar__contexto {
	margin-top: 24px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--c-text-muted);
}

.ceprome-donar__paypal {
	margin-top: 24px;
	/* Alto reservado del botón (48 px) para que la tarjeta no salte
	   cuando el SDK termina de pintarlo. */
	min-height: 48px;
}

.ceprome-donar__estado {
	margin-top: 12px;
	font-size: 14px;
	color: var(--c-text-muted);
}

.ceprome-donar__no-disponible {
	margin-top: 24px;
	padding: 16px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--c-text);
	background: var(--c-guinda-suave);
	border-radius: var(--ceprome-radius);
}

.ceprome-donar__mision {
	margin-top: 16px;
	padding-top: 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-text-muted);
	border-top: 1px solid var(--c-border);
}

.ceprome-donar__impacto {
	padding-block: clamp(40px, 6vw, 72px);
	background: var(--c-band-bg);
}

.ceprome-donar__impacto-lista {
	display: grid;
	gap: 28px;
	list-style: none;
}

.ceprome-donar__impacto-item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 16px;
	border-top: 2px solid var(--ceprome-guinda);
}

.ceprome-donar__impacto-numero {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.07em;
	font-variant-numeric: tabular-nums;
	color: var(--c-guinda-profunda);
}

.ceprome-donar__impacto-texto {
	font-size: clamp(18px, 1.8vw, 22px);
	font-weight: 600;
	line-height: 1.35;
	color: var(--c-text);
}

@media (min-width: 600px) {
	.ceprome-donar__sugeridos {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.ceprome-donar__sugerido,
	.ceprome-donar__sugerido:nth-child(4) {
		grid-column: auto;
	}

	.ceprome-donar__sugerido-texto {
		font-size: 17px;
	}
}

@media (min-width: 900px) {
	.ceprome-donar__impacto-lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(24px, 3vw, 48px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ceprome-donar__sugerido-texto,
	.ceprome-donar__otro-campo {
		transition: none;
	}
}

/* Gracias por donar: el mismo hero, más alto, con los dos botones. */
.ceprome-gracias-donar__hero {
	padding-block: clamp(64px, 10vw, 128px);
}

.ceprome-gracias-donar__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.ceprome-gracias-donar__boton {
	color: var(--ceprome-guinda) !important;
	background: #FFFFFF;
	border: 1px solid #FFFFFF;
	padding: 12px 25px;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

.ceprome-gracias-donar__boton:hover {
	background: #F1E1E5;
}

.ceprome-gracias-donar__boton--outline {
	color: #FFFFFF !important;
	background: transparent;
}

.ceprome-gracias-donar__boton--outline:hover {
	color: var(--ceprome-guinda) !important;
	background: #FFFFFF;
}

.ceprome-gracias-donar__boton:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ceprome-gracias-donar__boton {
		transition: none;
	}
}

/* ==========================================================================
   Comentarios de las noticias (comments.php, ceprome_comentario()) —
   columna de 800px bajo el artículo, con línea fina arriba. Avatar con
   iniciales en guinda suave (como Equipo), sin sombras. Las respuestas se
   sangran con una línea a la izquierda: poco en móvil, porque hay hasta
   5 niveles. El formulario reutiliza .ceprome-form__field.
   ========================================================================== */

.ceprome-articulo__comentarios {
	max-width: var(--ceprome-content-width);
	margin-inline: auto;
	padding-bottom: var(--ceprome-section-padding);
}

.ceprome-comentarios {
	max-width: 800px;
	padding-top: clamp(32px, 5vw, 56px);
	border-top: 1px solid var(--c-border);
}

.ceprome-comentarios__titulo {
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 800;
	line-height: 1.2;
	color: var(--c-text);
}

.ceprome-comentarios__lista,
.ceprome-comentarios__lista .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceprome-comentarios__lista {
	margin-top: 16px;
}

.ceprome-comentarios__lista .children {
	margin-left: 12px;
	padding-left: 12px;
	border-left: 2px solid var(--c-border);
}

.ceprome-comentario__cuerpo {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 12px;
	padding-block: 20px;
	border-bottom: 1px solid var(--c-border);
}

.ceprome-comentario__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--c-guinda-profunda);
	background: var(--c-guinda-suave);
}

.ceprome-comentario__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 12px;
}

.ceprome-comentario__autor {
	font-size: 15px;
	font-weight: 600;
	color: var(--c-text);
}

.ceprome-comentario__fecha {
	font-size: 13px;
	color: var(--c-text-muted);
}

.ceprome-comentario__moderacion {
	display: inline-block;
	margin-top: 8px;
	padding: 4px 8px;
	font-size: 13px;
	color: var(--c-text);
	background: var(--c-guinda-suave);
	border-radius: var(--ceprome-radius);
}

.ceprome-comentario__texto {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--c-text);
	overflow-wrap: anywhere;
}

.ceprome-comentario__texto p + p {
	margin-top: 12px;
}

.ceprome-comentario__responder {
	margin-top: 10px;
	font-size: 14px;
	font-weight: 600;
}

/* Formulario (#respond): al final de la lista o, al responder, movido
   por comment-reply.js bajo el comentario. */
.ceprome-comentarios__responder {
	margin-top: clamp(32px, 4vw, 48px);
}

.ceprome-comentario .ceprome-comentarios__responder {
	margin-top: 8px;
	padding-block: 20px;
	border-bottom: 1px solid var(--c-border);
}

.ceprome-comentarios__form-titulo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	margin-bottom: 16px;
	font-size: 20px;
	font-weight: 800;
	color: var(--c-text);
}

.ceprome-comentarios__form-titulo small {
	font-size: 14px;
	font-weight: 600;
}

.ceprome-comentarios__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.ceprome-comentarios__nota,
.ceprome-comentarios__form .logged-in-as {
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-text-muted);
}

/* La casilla junto a su texto, sin partirse en móvil (la regla general de
   consentimiento envuelve porque ahí el texto lleva un enlace). */
.ceprome-comentarios__form .ceprome-form__field--consentimiento label {
	flex-wrap: nowrap;
}

.ceprome-comentarios__cerrados {
	margin-top: 24px;
	font-size: 15px;
	color: var(--c-text-muted);
}

.ceprome-comentarios__paginacion .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: 24px;
	font-size: 14px;
	font-weight: 600;
}

@media (min-width: 720px) {
	.ceprome-comentarios__lista .children {
		margin-left: 18px;
		padding-left: 26px;
	}

	.ceprome-comentario__cuerpo {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 16px;
	}

	.ceprome-comentario__avatar {
		width: 44px;
		height: 44px;
		font-size: 15px;
	}

	.ceprome-comentarios__form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 16px;
	}

	.ceprome-comentarios__form > * {
		grid-column: 1 / -1;
	}

	.ceprome-comentarios__form > .ceprome-comentarios__campo--mitad {
		grid-column: auto;
	}
}