/* ============================================================
   CITI Oruro — Ajustes de ROL y CONTRASTE (WCAG) sobre el template.
   Consume los tokens de citi-tokens.css (paleta generada de marca:
   azul #2962FF · rojo #FF1744). Aquí sólo arreglamos las "mezclas":
   que el texto sobre acentos sea legible (AA) y se use bien la paleta.
   ============================================================ */

/* ---- Logo oficial del CITI ----
   El archivo es casi cuadrado (192x160, emblema). Hay VARIOS contenedores en
   el template: `.logo` (topbar), `.pxn_site_logo` (header principal + sticky),
   `.pxn_offcanvas` (menú móvil) y footer. Regla BASE para TODOS + overrides. */
.citi-logo-img {
  height: 46px !important;
  width: auto !important;
  max-width: 100%;
  display: block;
  object-fit: contain;
}
/* Logo principal del header (barra de navegación) */
.pxn_site_logo .citi-logo-img { height: 50px !important; }
/* Logo del topbar (más pequeño) */
.logo .citi-logo-img { height: 38px !important; }
/* Footer un poco mayor para presencia de marca */
.pxn-footer .citi-logo-img { height: 48px !important; }
/* Menú offcanvas (móvil) */
.pxn_offcanvas .citi-logo-img { height: 46px !important; }

/* En fondos OSCUROS (header sobre el hero, footer, panel offcanvas) el logo
   a color no contrasta -> blanco monocromo (compagina con el navy/azul).
   El header fijo/sticky (fondo claro) mantiene el logo a color (de marca). */
.pxn-header.header-absolute:not(.header-sticky) .citi-logo-img,
.pxn-header.header-sticky .citi-logo-img,
.pxn-header.header-duplicate .citi-logo-img,
.pxn-footer .citi-logo-img,
.pxn_offcanvas .citi-logo-img {
  filter: brightness(0) invert(1); /* header sticky/duplicate tiene fondo navy -> logo blanco */
}

/* ---- Botón primario: azul de marca + texto blanco (AA 4.9), hover AAA ---- */
.pxn-btn-primary {
  background-color: var(--citi-brand);
  color: #fff;
}
.pxn-btn-primary .btn_text,
.pxn-btn-primary .btn_text > span,
.pxn-btn-primary > span {
  color: #fff;
}
.pxn-btn-primary:hover,
.pxn-btn-primary:focus {
  background-color: var(--citi-brand-hover);
}
/* Brand is navy now, so the icon circle goes WHITE (navy arrow) for a crisp,
   visible contrast — same treatment as the red CTA button below. */
.pxn-btn-primary .btn_icon {
  background-color: #fff;
  color: var(--citi-brand);
}

/* ---- Píldoras/badges/labels con fondo de acento -> texto blanco (AA) ---- */
.sec_sub,
.pxn-h1_feature_box .feature_title,
.pxn_services_list > li > a.active,
.pxn_services_list > li > a:hover,
.pxn_testimonial .testimonial_header .pxn-rating-wrapper .rating-label,
.pxn_service_item.feature .service_btn,
.pxn_process_item_2 .process_btn,
.pxn-h1_marquee_wrap .pxn_marquee_scroll,
.pxn-h1_marquee_wrap .pxn_marquee_scroll * {
  color: #fff !important;
}

/* ---- Enlaces de texto: azul-hover (AAA) ---- */
.pxn-conetnt a:not([class]):hover {
  color: var(--citi-brand-hover);
}

/* ---- ROJO CITI para LA acción principal: el botón del portal de afiliados.
   OJO: el selector era `.pxn_header_btn .pxn-btn-primary` (descendiente), pero
   el marcado lleva las dos clases en el MISMO elemento
   (<a class="pxn_header_btn pxn-btn-primary">), así que la regla no llegó a
   aplicarse nunca: el botón salía navy como cualquier otro. Con el selector
   compuesto, el rojo por fin marca la única acción que queremos que destaque.
   Blanco sobre #C70031 = 6,05:1 (AA). ---- */
.pxn_header_btn.pxn-btn-primary,
.pxn-btn-primary.btn-accent {
  background-color: var(--citi-accent-strong) !important;
}
.pxn_header_btn.pxn-btn-primary:hover,
.pxn-btn-primary.btn-accent:hover {
  background-color: var(--citi-red-600) !important;
}
.pxn_header_btn.pxn-btn-primary .btn_icon,
.pxn-btn-primary.btn-accent .btn_icon {
  background-color: #fff;
  color: var(--citi-accent-strong);
}

/* ---- Sidebar del blog (categorías / entradas recientes) ---- */
.pxn_categories li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--citi-slate-200);
}
.pxn_categories li span {            /* contador: gris secundario, no azul */
  color: var(--citi-text-muted);
  font-weight: 600;
}
/* Links del sidebar: texto OSCURO por defecto (legible), azul sólo al pasar
   el cursor o cuando está activo. Nada de listas en azul. */
.pxn_categories .cat_filter {
  color: var(--citi-text-strong);
  font-weight: 500;
}
.pxn_categories .cat_filter:hover { color: var(--citi-brand); }
.pxn_recent_posts li {
  padding: 10px 0;
  border-bottom: 1px solid var(--citi-slate-200);
}
.pxn_recent_posts li a { color: var(--citi-text-strong); font-weight: 500; }
.pxn_recent_posts li a:hover { color: var(--citi-brand); }
.pxn_recent_posts li .date {
  display: block;
  font-size: 13px;
  color: var(--citi-text-muted);
  margin-top: 4px;
}
.pxn_entry_content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--citi-radius-md);
  margin: 14px 0;
}

/* ---- Directorio (tarjetas de miembros con foto) ---- */
/* row-gap separa las filas (en vez de margin-bottom en el card, que con
   height:100% se desborda y hace que las filas "choquen"). col gutter (30px)
   ya da el espacio horizontal. */
.directorio_grid { margin-top: 10px; row-gap: 30px; }
.directorio_card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--citi-slate-200);
  border-radius: var(--citi-radius-lg);
  overflow: hidden;
  height: 100%;
  text-align: center;
  box-shadow: 0 6px 20px rgba(13, 30, 85, .06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.directorio_card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(13, 30, 85, .15); }
.dir_photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--citi-blue-50);
  overflow: hidden;
}
.dir_photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  transition: transform .4s ease;
}
.directorio_card:hover .dir_photo img { transform: scale(1.04); }
/* Sin foto: degradado navy + iniciales (placeholder elegante) */
.dir_photo.dir_ph {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--citi-navy-600), var(--citi-brand));
}
.dir_initials {
  font-size: 64px; font-weight: 800; line-height: 1;
  color: #fff; letter-spacing: 1px; opacity: .95;
}
.directorio_card .cargo {
  display: block;
  margin: 18px 16px 0;
  min-height: 32px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--citi-brand-hover);
}
.directorio_card .nombre {
  font-size: 16.5px;
  line-height: 1.3;
  color: var(--citi-navy-800);
  margin: 7px 16px 4px;
}
.directorio_card .rni {
  display: block;
  font-size: 13px;
  color: var(--citi-text-muted);
  /* margin-top:auto fija el RNI al fondo -> padding inferior uniforme aunque
     el cargo/nombre varíen de alto entre tarjetas de una misma fila. */
  margin: auto 16px 0;
  padding-top: 10px;
  padding-bottom: 20px;
}
.directorio_fotos {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.directorio_fotos img { width: 100%; max-width: 760px; height: auto; border-radius: var(--citi-radius-lg); }

/* ============================================================
   MANEJO DE PALETA — Azul primario + ROJO de marca como acento.
   Azul (#2962FF): acciones, links, botones primarios.
   Rojo (#FF1744 / red-700 #C70031 para texto blanco AA): energía,
   etiquetas de sección, hovers y detalles. Navy: profundidad.
   ============================================================ */

/* Etiquetas de sección. ANTES: píldora roja sólida en TODAS. Contadas en el
   home eran 10 bloques rojos (4 del hero + 6 encabezando cada sección), más el
   botón del portal — que también es rojo. Con el acento repartido por toda la
   página, la acción principal dejaba de destacar: si todo grita, nada se oye.
   AHORA: chip de marca (11,50:1) con un trazo rojo corto que mantiene la
   presencia del color. El rojo sólido queda para UNA cosa: la acción principal. */
.sec_sub {
  display: inline-flex !important;
  align-items: center;
  gap: var(--citi-space-2);
  /* SIN relleno. Un chip relleno no sirve aquí: las secciones alternan tres
     fondos (#FFFFFF, surface-alt #F1F5F9 y surface-brand #EEF2FE) y cualquier
     relleno claro se funde con alguno — surface-brand sobre surface-alt da
     1,013:1, o sea invisible. Sin caja, la etiqueta funciona sobre los tres. */
  background-color: transparent !important;
  padding: 0 !important;
  color: var(--citi-text-brand) !important;
  letter-spacing: var(--citi-tracking-wide);
  text-transform: uppercase;
  font-size: var(--citi-text-xs);
}
.sec_sub::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 2px;
  border-radius: var(--citi-radius-pill);
  background-color: var(--citi-accent);
}
/* Sobre secciones oscuras: el mismo chip en versión "vidrio". */
[class*="theme-bg"] .sec_sub,
.pxn-h1-why-choose-section .sec_sub {
  background-color: transparent !important;
  color: var(--citi-text-on-dark-body) !important;
}
[class*="theme-bg"] .sec_sub::before,
.pxn-h1-why-choose-section .sec_sub::before {
  background-color: var(--citi-accent-on-dark);
}

/* ---- TOPBAR: navy de marca + texto blanco (AA/AAA).
        Antes era azul con texto navy y "Afíliate" rojo (rojo/azul = 1.27, ilegible).
        Navy #0D1E55 con blanco = 15.7 AAA; promo en rojo-300 sobre navy = AA. ---- */
.pxn_header_top {
  background-color: var(--citi-navy-800) !important;
}
.pxn_header_top,
.pxn_header_top a,
.pxn_header_top span,
.pxn_header_top i,
.pxn_header_top .info_text,
.pxn_header_top .nice-select .current,
.pxn_header_top .pxn_lang .current {
  color: #fff !important;
}
.pxn_header_top a:hover,
.pxn_header_top a:hover span,
.pxn_header_top a:hover i {
  color: var(--citi-blue-200) !important;
}
/* Promo "¡Afíliate!" -> rojo-300 (claro) para AA sobre navy */
.pxn_header_top .pxn-btn-inline,
.pxn_header_top .pxn-btn-inline i,
.pxn_header_top .pxn-btn-inline span {
  color: var(--citi-red-300) !important;
}
/* El desplegable de idioma se abre sobre fondo blanco -> items oscuros */
.pxn_header_top .nice-select .list,
.pxn_header_top .nice-select .option {
  color: var(--citi-text-strong) !important;
}

/* Hover/activo del MENÚ: el header es navy oscuro, así que el azul #2962FF
   no se lee. Usamos azul CLARO (blue-200) -> feedback visible y legible. */
.pxn_main_navigation ul > li:hover > a,
.pxn_main_navigation ul > li.current-menu-ancestor > a,
.pxn_main_navigation ul > li.current-menu-item > a,
.pxn_main_navigation ul > li .sub-menu > li:hover > a,
.pxn_main_navigation ul > li .sub-menu > li.current-menu-ancestor > a,
.pxn_main_navigation ul > li .sub-menu > li.current-menu-item > a {
  color: var(--citi-blue-200) !important;
}
/* Menú móvil (meanmenu) — mismo criterio sobre panel oscuro */
.mean-nav ul li a:hover,
.pxn_offcanvas .mean-nav ul li a:hover {
  color: var(--citi-blue-200) !important;
}

/* Hover de enlaces de texto / "Leer más": transición viva a rojo */
.pxn-btn-text-inline:hover,
.pxn-btn-text-inline:hover .btn_text > span,
.post_btn:hover,
.blog_btn:hover,
.blog_title a:hover,
.post_title a:hover {
  color: var(--citi-accent);
}

/* Detalles en rojo: progreso back-to-top, citas, viñetas de check */
.pxn_back-to-top .progress-circle path:last-child { stroke: var(--citi-accent); }
.pxn_entry_content blockquote {
  border-left: 4px solid var(--citi-accent);
  padding-left: 18px;
}
.pxni-checked-circle { color: var(--citi-accent); }

/* ============================================================
   AUDITORÍA DE CONTRASTE (WCAG AA) — correcciones medidas con MCP.
   Cada regla resuelve un fallo real detectado en el navegador.
   ============================================================ */

/* (1) HERO sin scrim: el texto blanco dependía de que la foto fuera oscura.
   Añadimos un degradado oscuro (navy) que garantiza contraste del título,
   subtítulo y descripción, dejando ver la foto a la derecha. */
.pxn_slider_item { position: relative; }
.pxn_slider_item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,14,42,.55) 0%, rgba(7,14,42,.12) 18%, rgba(7,14,42,0) 34%),
    linear-gradient(90deg, rgba(7,14,42,.82) 0%, rgba(7,14,42,.55) 40%, rgba(7,14,42,.10) 72%, rgba(7,14,42,0) 100%);
}
.pxn_slider_item > .container,
.pxn_slider_item .pxn_hero_content { position: relative; z-index: 2; }

/* (2) HEADER sobre el hero: overlay navy 0.5 -> navy-900 0.72 sólido.
   Garantiza AA del menú blanco aun en el peor caso (foto clara detrás). */
.pxn-header.header-absolute:not(.header-sticky),
.pxn-header.pxn-header-1.header-absolute:not(.header-sticky) {
  background-color: rgba(10, 21, 61, 0.72) !important;
}

/* (3) Badge de cargo (team/member): fondo azul de marca -> texto BLANCO
   (antes navy sobre azul = 3.21). */
.pxn-h1_team_member .designation,
.member_content .designation,
.team_member .designation {
  color: #fff !important;
}

/* (4) Categorías y metadatos del blog/proyectos: usaban #64748B hardcodeado
   y fallaban sobre fondos tintados -> token muted (AA en blanco y tintados). */
.category,
.project_cat .category,
.meta_text,
.post_meta a,
.post_meta span,
.blog_meta a,
.blog_meta span,
.pxn_post_meta a,
.pxn_post_meta span {
  color: var(--citi-text-muted) !important;
}

/* (5) Panel OFFCANVAS = navy oscuro. TODO su texto -> claro (antes había
   textos oscuros pensados para panel claro: "Close", títulos, descripción,
   contacto en slate). Base blue-100; títulos/enlaces blancos. */
.pxn_offcanvas h1, .pxn_offcanvas h2, .pxn_offcanvas h3,
.pxn_offcanvas h4, .pxn_offcanvas h5, .pxn_offcanvas h6,
.pxn_offcanvas p, .pxn_offcanvas span, .pxn_offcanvas li,
.pxn_offcanvas .text, .pxn_offcanvas [class*="desc"],
.pxn_offcanvas [class*="info"], .pxn_offcanvas [class*="title"] {
  color: var(--citi-blue-100) !important;
}
.pxn_offcanvas [class*="title"],
.pxn_offcanvas a {
  color: #fff !important;
}
.pxn_offcanvas a:hover {
  color: var(--citi-blue-200) !important;
}
/* El panel offcanvas no tenía fondo sólido (transparente) -> texto claro
   quedaba sobre blanco. Fondo navy sólido = base oscura determinista. */
.pxn_offcanvas,
.pxn_offcanvas .offcanvas_wrapper {
  background-color: var(--citi-navy-900) !important;
}

/* (6) HERO eyebrow "CITI Oruro": va sobre foto, así que necesita fondo propio
   (el pill navy@.5 original daba 3,21:1). Chip de vidrio + trazo rojo, igual
   que el resto de etiquetas: el rojo sólido del hero es el botón, no la
   etiqueta. */
.hero_sub {
  display: inline-flex !important;
  align-items: center;
  gap: var(--citi-space-2);
  background-color: rgba(10, 21, 61, 0.72) !important;
  color: var(--citi-text-on-dark) !important;
}
.hero_sub::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 2px;
  border-radius: var(--citi-radius-pill);
  background-color: var(--citi-accent-on-dark);
}

/* (7) Tarjeta "achievement" del hero: navy@.6 daba 4.37 con texto blanco.
   -> navy@.88 (frosted oscuro) para AA garantizado. */
.pxn_achievement_content {
  background-color: rgba(10, 21, 61, 0.88) !important;
}

/* (8) Marquee del footer: relleno blanco@.08 (invisible) -> blanco@.5,
   ticker legible y elegante sobre el footer navy (pasa incluso como normal). */
.pxn_footer_marquee .pxn_marquee_scroll,
.pxn_footer_marquee .pxn_marquee_scroll * {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* (9) Título del hero sobre foto: el scrim (::after) lo oscurece pero no es
   medible; sombra de texto como refuerzo de legibilidad. */
.hero_title { text-shadow: 0 2px 18px rgba(7, 14, 42, 0.55); }

/* (10) OBSOLETO — lo hace ahora el puente de citi-system.css, sin hex ni
   !important: --pxn-color-text-body: var(--citi-text-body). El diagnóstico
   original sigue valiendo (#64748B da 4,40:1 sobre #F1F5F9 y 4,25:1 sobre
   #EEF2FE, o sea falla AA en cuanto el fondo deja de ser blanco puro), y por
   eso el generador ya no lo emite como color de cuerpo en ningún sitio. */

/* (11) Botones primarios: algunas variantes (.service_btn, .cta_btn) tenían
   fondo claro del template y, con el texto blanco, quedaban ilegibles.
   Unificamos TODOS los primarios a azul sólido de marca + blanco (AA). */
.pxn-btn-primary,
a.pxn-btn-primary,
button.pxn-btn-primary,
.pxn_service_item .service_btn,
.pxn_service_item.feature .service_btn,
.pxn_service_item_2 .service_btn,
.cta_btn.pxn-btn-primary {
  background-color: var(--citi-brand) !important;
}
.pxn-btn-primary:hover,
.pxn_service_item .service_btn:hover,
.cta_btn.pxn-btn-primary:hover {
  background-color: var(--citi-brand-hover) !important;
}

/* (12) Números decorativos de secciones (01, 02, 03...): eran gris casi
   blanco (1.2-1.4). Slate-500 para pasar 3:1 como texto grande. */
.service_no,
.accordion_no,
.process_no,
.offer_no,
[class*="_no"].big,
.pxn_counter_no {
  color: var(--citi-text-muted) !important;
}

/* (12b) Textos de cuerpo con gris claro hardcodeado (#b7b6b6) -> body token. */
.process_desc,
.pxn_process_item .process_desc,
.pxn_process_item_2 .process_desc,
.cta_action {
  color: var(--citi-text-body) !important;
}

/* (12c) Tarjetas de servicio "feature" con imagen de fondo: scrim oscuro
   garantiza el título blanco; excerpt en azul-100 claro. */
.pxn_service_item.feature { position: relative; isolation: isolate; }
.pxn_service_item.feature::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,14,42,.40) 0%, rgba(7,14,42,.78) 100%);
}
.pxn_service_item.feature .service_excerpt {
  color: var(--citi-blue-100) !important;
}
/* en estas tarjetas oscuras el botón se mantiene tipo "glass" blanco */
.pxn_service_item.feature .service_btn {
  background-color: rgba(255,255,255,0.14) !important;
  color: #fff !important;
}

/* (13) CTA "¿Tienes consultas?" (.pxn_faq_cta): el contenido tenía texto
   blanco sobre sección clara. Panel navy de marca + texto blanco (AAA). */
.pxn_faq_cta {
  background-color: var(--citi-navy-800) !important;
  border-radius: var(--citi-radius-lg);
  overflow: hidden;
}
.pxn_faq_cta .cta_title,
.pxn_faq_cta .cta_action {
  color: #fff !important;
}
.pxn_faq_cta .cta_action:hover {
  color: var(--citi-blue-200) !important;
}

/* (14) Toggle de planes (Monthly/Yearly): etiquetas legibles (sobre claro). */
.pxn_toggle_switcher .toggle-m,
.pxn_toggle_switcher .toggle-y {
  color: var(--citi-text-strong) !important;
}

/* (17) Paginación del blog (numerada, accesible). */
.pxn_pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 40px;
}
.pxn_pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--citi-slate-200);
  border-radius: var(--citi-radius-md);
  color: var(--citi-text-strong);
  font-weight: 600;
  text-decoration: none;
  transition: all .2s ease;
}
.pxn_pagination a.page-numbers:hover {
  border-color: var(--citi-brand);
  color: var(--citi-brand);
  background: var(--citi-blue-50);
}
.pxn_pagination .page-numbers.current {
  background: var(--citi-brand);
  border-color: var(--citi-brand);
  color: #fff;
}
.pxn_pagination .page-numbers.dots {
  border: none;
  min-width: auto;
  color: var(--citi-text-muted);
}
.pxn_pagination button.page-numbers {
  background: #fff;
  cursor: pointer;
  font: inherit;
}

/* (18) BLOG interactivo — buscador, grilla de tarjetas uniformes, filtros. */
.blog_searchbar { position: relative; display: flex; align-items: center; margin-bottom: 26px; }
.blog_searchbar i { position: absolute; left: 18px; color: var(--citi-text-muted); font-size: 18px; pointer-events: none; }
.blog_searchbar input {
  width: 100%; height: 54px; padding: 0 18px 0 48px;
  border: 1px solid var(--citi-slate-200); border-radius: var(--citi-radius-md);
  font-size: 15px; color: var(--citi-text-strong); background: #fff;
}
.blog_searchbar input:focus {
  outline: none; border-color: var(--citi-brand);
  box-shadow: 0 0 0 3px var(--citi-blue-100);
}
.blog_status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-bottom: 20px; color: var(--citi-text-body); font-size: 14px;
}
.blog_status button {
  background: none; border: none; color: var(--citi-brand);
  font-weight: 600; cursor: pointer; text-decoration: underline; font-size: 14px;
}
.blog_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
@media (max-width: 575px) { .blog_grid { grid-template-columns: 1fr; } }
.blog_card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--citi-slate-200); border-radius: var(--citi-radius-lg); overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.blog_card:hover { box-shadow: 0 14px 34px rgba(14, 30, 85, .13); transform: translateY(-4px); }
.blog_card_thumb { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--citi-slate-100); }
.blog_card_thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.blog_card:hover .blog_card_thumb img { transform: scale(1.06); }
.blog_card_date {
  position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: baseline; gap: 4px;
  background: var(--citi-navy-800); color: #fff; border-radius: var(--citi-radius-sm); padding: 6px 10px;
  font-size: 12px; line-height: 1; font-weight: 600; box-shadow: 0 4px 12px rgba(7, 14, 42, .3);
}
.blog_card_date b { font-size: 15px; }
.blog_card_body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 22px; flex: 1; }
.blog_card_cat {
  align-self: flex-start; background: var(--citi-blue-50); color: var(--citi-brand-hover);
  border: none; border-radius: var(--citi-radius-pill); padding: 5px 13px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; cursor: pointer; transition: all .2s ease;
}
.blog_card_cat:hover { background: var(--citi-brand); color: #fff; }
.blog_card_title {
  font-size: 19px; line-height: 1.35; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog_card_title a { color: var(--citi-text-strong); }
.blog_card_title a:hover { color: var(--citi-brand); }
.blog_card_excerpt {
  color: var(--citi-text-body); font-size: 14.5px; line-height: 1.6; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog_card_more {
  margin-top: auto; align-self: flex-start; color: var(--citi-brand); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; transition: gap .2s ease, color .2s ease;
}
.blog_card_more:hover { color: var(--citi-accent); gap: 10px; }
.blog_empty {
  padding: 48px 24px; text-align: center; color: var(--citi-text-muted);
  border: 1px dashed var(--citi-slate-300); border-radius: var(--citi-radius-md);
}
/* Categorías como filtros (sidebar) */
.pxn_categories .cat_filter { cursor: pointer; }
.pxn_categories .cat_filter.is-active { color: var(--citi-brand); font-weight: 700; }

/* (16) Badge de FECHA de las tarjetas de blog: colores invertidos.
   El día va sobre fondo blanco -> texto navy; el mes sobre franja azul -> blanco. */
.post_date .day,
.blog_date .day,
.pxn_post_thumbnail .post_date .day,
.pxn_blog_post_2 .blog_date .day {
  color: var(--citi-text-strong) !important;
}
.post_date .month_year,
.blog_date .month_year {
  color: #fff !important;
}

/* (15) Botones de texto ("Leer más" / .pxn-btn-text-inline): venían en blanco
   y desaparecían sobre secciones claras -> azul de marca (AA), hover rojo. */
.pxn-btn-text-inline,
.process_btn.pxn-btn-text-inline,
.pxn-btn-text-inline .btn_text > span {
  color: var(--citi-brand) !important;
}
/* En secciones oscuras (navy/brand) el botón de texto va en blanco */
[class*="theme-bg"] .pxn-btn-text-inline,
.pxn_faq_cta .pxn-btn-text-inline,
[class*="theme-bg"] .pxn-btn-text-inline .btn_text > span {
  color: #fff !important;
}

/* (19) PÁGINAS INSTITUCIONALES — bloques con jerarquía (Quiénes Somos, etc.) */
.citi_soft_bg { background: var(--citi-blue-50); }
.section_heading.text-center { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.citi_lead { font-size: 17px; line-height: 1.8; color: var(--citi-text-body); margin: 18px 0 26px; }
.citi_about_img img { width: 100%; border-radius: var(--citi-radius-lg); box-shadow: 0 18px 44px rgba(14,30,85,.14); }
.citi_facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.citi_facts li { display: flex; align-items: center; gap: 14px; }
.citi_facts li i {
  flex: none; width: 46px; height: 46px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: var(--citi-radius-md); background: var(--citi-blue-50);
  color: var(--citi-brand); font-size: 20px;
}
.citi_facts li span { display: flex; flex-direction: column; color: var(--citi-text-muted); font-size: 13.5px; }
.citi_facts li span strong { color: var(--citi-text-strong); font-size: 15.5px; }
.citi_mv {
  background: #fff; border: 1px solid var(--citi-slate-200); border-radius: var(--citi-radius-lg);
  padding: 30px 28px; height: 100%;
}
/* Contenedor de icono — UNA primitiva, dos tonos.
   Medido antes en el sitio: 6 tamaños (44, 50, 54, 56, 58 y 80px), 3 radios
   (50%, 12px, 14px) y 2 esquemas de color para el mismo papel. El tono "suave"
   es el que va en tarjetas sobre fondo claro (11,50:1); el sólido se reserva
   para iconos que caen sobre foto o sobre superficie oscura. */
.citi_mv_icon,
.citi_feature_icon,
.citi_benefit_icon,
.pxn-h1_offer_box .offer_icon,
.pxn-h1_feature_box .feature_icon {
  flex: none;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--citi-radius-circle);
  font-size: 24px;
}
/* tono suave: el de por defecto, sobre tarjeta clara */
.citi_mv_icon,
.citi_feature_icon,
.citi_benefit_icon,
.pxn-h1_offer_box .offer_icon {
  background: var(--citi-surface-brand) !important;
}
.citi_mv_icon, .citi_mv_icon i, .citi_mv_icon svg,
.citi_feature_icon, .citi_feature_icon i, .citi_feature_icon svg,
.citi_benefit_icon, .citi_benefit_icon i, .citi_benefit_icon svg,
.pxn-h1_offer_box .offer_icon,
.pxn-h1_offer_box .offer_icon i,
.pxn-h1_offer_box .offer_icon svg {
  color: var(--citi-text-brand) !important;
  fill: var(--citi-text-brand) !important;
}
/* tono sólido: sólo donde el icono cae sobre foto o superficie oscura */
.pxn-h1_feature_box .feature_icon {
  background: var(--citi-surface-dark) !important;
  color: var(--citi-text-on-dark) !important;
}
/* El glifo dentro del chip: la fuente pxn-icons son formas abstractas de
   plantilla de consultoría (unos puntos dispersos para "Regulamos la
   profesión", una "S" para "Impulsamos el desarrollo"), así que en las
   tarjetas se sustituyó por SVG de Lucide, que sí se reconocen. */
.citi_mv_icon svg,
.citi_feature_icon svg,
.citi_benefit_icon svg,
.pxn-h1_offer_box .offer_icon svg,
.pxn-h1_feature_box .feature_icon svg {
  width: 26px;
  height: 26px;
  max-width: none;
  stroke: currentColor;
  fill: none !important;
}
.citi_mv_icon {
  margin-bottom: var(--citi-space-4);
}
.citi_mv h3 { color: var(--citi-text-strong); margin: 0 0 10px; font-size: 21px; }
.citi_mv p { color: var(--citi-text-body); line-height: 1.75; margin: 0; }
.citi_feature {
  background: #fff; border: 1px solid var(--citi-border); border-radius: var(--citi-radius-lg);
  padding: 28px 24px; height: 100%; transition: transform .25s ease, box-shadow .25s ease;
}
.citi_feature:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(14,30,85,.12); }
.citi_feature_icon {
  margin-bottom: var(--citi-space-4);
}
.citi_feature_title { font-size: var(--citi-text-md); color: var(--citi-text-strong); margin: 0 0 8px; }
.citi_feature_desc { color: var(--citi-text-body); font-size: var(--citi-text-sm); line-height: 1.65; margin: 0; }
.citi_benefit {
  display: flex; gap: 16px; background: #fff; border: 1px solid var(--citi-slate-200);
  border-radius: var(--citi-radius-lg); padding: 22px; height: 100%;
}

.citi_benefit_title { font-size: var(--citi-text-base); color: var(--citi-text-strong); margin: 0 0 5px; }
.citi_benefit_desc { color: var(--citi-text-body); font-size: var(--citi-text-sm); line-height: 1.6; margin: 0; }
.citi_cta_band { background: linear-gradient(120deg, var(--citi-navy-800), var(--citi-blue-700)); }
.citi_cta_inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px; padding: 54px 0;
}
.citi_cta_inner h2 { color: #fff; margin: 0 0 8px; font-size: 28px; }
.citi_cta_inner p { color: var(--citi-blue-100); margin: 0; font-size: 16px; }
@media (max-width: 575px) { .citi_cta_inner { flex-direction: column; align-items: flex-start; } }

/* --- Afiliación --- */
.citi_btn_row { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.citi_btn_ghost { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--citi-brand); }
.citi_btn_ghost:hover { color: var(--citi-accent); gap: 12px; }
.citi_aporte {
  text-align: center; background: #fff; border: 1px solid var(--citi-slate-200);
  border-radius: var(--citi-radius-lg); padding: 34px 24px; height: 100%;
}
.citi_aporte_label {
  display: inline-block; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  font-size: 13px; color: var(--citi-brand-hover); margin-bottom: 12px;
}
.citi_aporte_amount {
  font-size: 48px; font-weight: 800; color: var(--citi-text-strong); line-height: 1;
  display: flex; align-items: flex-start; justify-content: center; gap: 6px;
}
.citi_aporte_amount span { font-size: 20px; font-weight: 700; color: var(--citi-brand); margin-top: 6px; }
.citi_aporte_cond { color: var(--citi-text-body); font-size: 14px; line-height: 1.6; margin: 14px 0 0; }
.citi_steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.citi_steps li { display: flex; gap: 18px; align-items: flex-start; }
.citi_step_no {
  flex: none; width: 42px; height: 42px; border-radius: var(--citi-radius-circle); background: var(--citi-brand);
  color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.citi_steps h4 { margin: 4px 0 4px; color: var(--citi-text-strong); font-size: 17px; }
.citi_steps p { margin: 0; color: var(--citi-text-body); font-size: 14.5px; line-height: 1.6; }

/* --- Transparencia (documentos) --- */
.citi_doc_group { margin-bottom: 40px; }
.citi_doc_grouptitle {
  font-size: 20px; color: var(--citi-text-strong); margin: 0 0 20px;
  padding-bottom: 12px; border-bottom: 2px solid var(--citi-blue-100);
}
.citi_doc {
  display: flex; gap: 14px; background: #fff; border: 1px solid var(--citi-slate-200);
  border-radius: var(--citi-radius-md); padding: 18px 20px; height: 100%; transition: box-shadow .2s ease, border-color .2s ease;
}
.citi_doc:hover { border-color: var(--citi-brand); box-shadow: 0 8px 22px rgba(14,30,85,.08); }
.citi_doc_icon {
  flex: none; width: 46px; height: 46px; border-radius: var(--citi-radius-md); background: var(--citi-blue-50);
  color: var(--citi-brand); display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
.citi_doc_body h3 { font-size: 15.5px; color: var(--citi-text-strong); margin: 0 0 4px; line-height: 1.35; }
.citi_doc_body p { font-size: 13.5px; color: var(--citi-text-muted); margin: 0; }
.citi_doc_note {
  text-align: center; margin-top: 8px; padding: 20px; background: var(--citi-blue-50);
  border-radius: var(--citi-radius-md); color: var(--citi-text-body);
}
.citi_doc_note a { color: var(--citi-brand-hover); font-weight: 700; text-decoration: underline; }

/* --- Privacidad / texto legal: tipografía legible --- */
.pxn_page_content { max-width: 860px; }
.pxn_page_content h1, .pxn_page_content h2 { font-size: 24px; color: var(--citi-text-strong); margin: 34px 0 14px; line-height: 1.3; }
.pxn_page_content h3 { font-size: 19px; color: var(--citi-text-strong); margin: 26px 0 10px; }
.pxn_page_content p { color: var(--citi-text-body); line-height: 1.8; margin: 0 0 16px; }
.pxn_page_content ul, .pxn_page_content ol { color: var(--citi-text-body); line-height: 1.8; margin: 0 0 16px; padding-left: 22px; }
.pxn_page_content li { margin-bottom: 8px; }
.pxn_page_content a { color: var(--citi-brand); text-decoration: underline; }

/* ============================================================
   (20) HOVER ACCESIBLE — fin del "azul sobre azul".
   El template trae una regla GLOBAL:  a:hover, button:hover, .btn:hover
   { color: var(--pxn-color-theme-primary) }  == azul #2962FF. Sobre fondos
   OSCUROS (header navy, footer, secciones navy, CTA, hero) eso da azul medio
   sobre azul/navy = ilegible (lo que se veía en "Buscar", redes, etc.).
   En CONTEXTOS OSCUROS el hover pasa a azul CLARO (blue-200); en CLAROS usa
   azul-700 (brand-hover) para mejor contraste que el #2962FF original.
   ============================================================ */

/* -- Contextos OSCUROS: hover en azul claro (AA sobre navy) -- */
.pxn-header a:hover, .pxn-header a:focus,
.pxn-header button:hover, .pxn-header button:focus,
.pxn-header button:hover *, .pxn-header button:focus *,
.pxn_header_search:hover, .pxn_header_search:hover *,
.pxn_offcanvas_toggle:hover, .pxn_offcanvas_toggle:hover *,
.pxn_socials_2 li > a:hover, .pxn_socials_3 > li a:hover, .pxn_socials li > a:hover,
.pxn-footer a:hover, .pxn-footer a:focus, .pxn-footer button:hover,
.pxn-h1-why-choose-section a:hover, .pxn-h1-why-choose-section button:hover,
.citi_cta_band a:hover, .citi_cta_inner a:hover,
.pxn_faq_cta a:hover,
[class*="theme-bg"] a:hover, [class*="theme-bg"] button:hover {
  color: var(--citi-blue-200) !important;
}
/* Iconos sociales: que el SVG/i también cambie (currentColor) */
.pxn-header .pxn_socials li > a:hover i,
.pxn-footer .pxn_socials li > a:hover i {
  color: var(--citi-blue-200) !important;
}

/* -- Contextos CLAROS: hover en azul-700 (mejor contraste que #2962FF) -- */
.pxn-conetnt a:hover,
.pxn_categories .cat_filter:hover,
.pxn_recent_posts li a:hover,
.blog_card_title a:hover,
.pxn-h1-projects-section .project_title a:hover,
.pxn_service_item .service_title a:hover,
.citi_doc:hover .citi_doc_body h3,
.citi_feature:hover .citi_feature_title {
  color: var(--citi-brand-hover) !important;
}

/* El botón "Portal Afiliados" (rojo) NO debe teñir su texto de azul en hover */
.pxn_header_btn .pxn-btn-primary:hover,
.pxn_header_btn .pxn-btn-primary:hover .btn_text > span,
.pxn_header_btn .pxn-btn-primary:hover span {
  color: #fff !important;
}

/* (21) Cifra de las cajas "Años de trayectoria / Afiliados activos" del home.
   El template traía un contador; aquí mostramos la cifra real del CITI. */
.about_features .pxn_icon_box .ib_num {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--citi-brand);
  margin: 6px 0 2px;
}

/* (22) Tarjetas de documentos de Transparencia como ENLACES a PDF */
a.citi_doc { text-decoration: none; color: inherit; align-items: center; }
a.citi_doc .citi_doc_body { flex: 1; }
.citi_doc_dl {
  flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: var(--citi-radius-md); background: var(--citi-blue-50);
  color: var(--citi-brand);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
a.citi_doc:hover .citi_doc_dl { background: var(--citi-brand); color: #fff; transform: translateX(2px); }

/* Enlace de PDF dentro del cuerpo de una noticia */
.citi_doc_inline {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 10px 18px; border-radius: var(--citi-radius-md); text-decoration: none; font-weight: 600;
  background: var(--citi-blue-50); color: var(--citi-brand);
  transition: background .2s ease, color .2s ease;
}
.citi_doc_inline:hover { background: var(--citi-brand); color: #fff; }

/* ──────────────────────────────────────────────────────────────────────────
   Post photo galleries — runs of images in a post body are grouped by
   gen-blog into a masonry grid (CSS columns: no JS, no layout shift) whose
   items open in the template's GLightbox ([data-gallery]).
   ────────────────────────────────────────────────────────────────────────── */
.citi-gallery {
  column-count: 3; column-gap: 12px; margin: 14px 0 26px;
}
@media (max-width: 991px) { .citi-gallery { column-count: 2; } }
@media (max-width: 575px) { .citi-gallery { column-count: 1; } }
.citi-gallery-item {
  display: block; margin: 0 0 12px; break-inside: avoid;
  position: relative; border-radius: var(--citi-radius-lg); overflow: hidden; cursor: zoom-in;
  box-shadow: 0 1px 2px rgba(0, 21, 80, .06);
}
.citi-gallery-item img {
  display: block; width: 100%; height: auto; border-radius: var(--citi-radius-lg);
  transition: transform .35s ease, filter .35s ease;
}
.citi-gallery-item::after {
  content: ""; position: absolute; inset: 0; background: rgba(0, 21, 80, 0);
  transition: background .35s ease;
}
.citi-gallery-item:hover img { transform: scale(1.04); }
.citi-gallery-item:hover::after { background: rgba(0, 21, 80, .12); }
.citi-gallery-item:focus-visible { outline: 3px solid var(--citi-brand); outline-offset: 2px; }

/* Imagen suelta o en pareja dentro de una noticia. Se limita por ALTURA, no
   por anchura: así una foto apaisada sigue ocupando el ancho del texto, pero un
   afiche vertical (los de convocatoria son 1022x1440) deja de estirarse hasta
   1130px de alto y comerse la pantalla. Queda centrado y del tamaño de un
   cartel de verdad. Sigue ampliándose al pulsarlo. */
.citi-figure {
  display: flex;
  justify-content: center;
  margin: var(--citi-space-5) 0;
  cursor: zoom-in;
}
.citi-figure img {
  display: block;
  max-width: 100%;
  max-height: 560px;
  width: auto;
  height: auto;
  border-radius: var(--citi-radius-lg);
}

/* ============================================================
   (23) ESTADO ACTIVO del menú — SiteEnhancements marca .current-menu-item
   según la URL (el template estático no lo trae). Subrayado rojo de marca
   (visible sobre el header navy) + texto blanco/negrita. Indica la página.
   ============================================================ */
.pxn_main_navigation > ul > li.current-menu-item > a,
.pxn_main_navigation > ul > li.current-menu-ancestor > a {
  color: #fff !important;
  font-weight: 700;
  position: relative;
}
/* Subrayado en ::before (el ::after lo usa el caret del desplegable; si lo
   compartíamos, heredaba top:50% del caret y se veía "tachado"/flotando). */
.pxn_main_navigation > ul > li.current-menu-item > a::before,
.pxn_main_navigation > ul > li.current-menu-ancestor > a::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -9px;
  height: 3px; border-radius: var(--citi-radius-pill);
  background: var(--citi-accent);
}
/* Ítems con desplegable: el caret ocupa 20px a la derecha -> el subrayado
   termina en el texto, no bajo el caret. */
.pxn_main_navigation > ul > li.has-dropdown.current-menu-item > a::before,
.pxn_main_navigation > ul > li.has-dropdown.current-menu-ancestor > a::before {
  right: 20px;
}
/* El header (absoluto y el clon sticky/duplicate) SIEMPRE es navy oscuro,
   así que el item activo va blanco en ambos. */
.pxn-header.header-sticky .pxn_main_navigation > ul > li.current-menu-item > a,
.pxn-header.header-duplicate .pxn_main_navigation > ul > li.current-menu-item > a,
.pxn-header.header-sticky .pxn_main_navigation > ul > li.current-menu-ancestor > a,
.pxn-header.header-duplicate .pxn_main_navigation > ul > li.current-menu-ancestor > a {
  color: #fff !important;
}
/* Menú móvil (offcanvas / meanmenu): activo en blanco + barra roja a la izq. */
.mean-nav ul li.current-menu-item > a,
.pxn_offcanvas .mean-nav ul li.current-menu-item > a {
  color: #fff !important; font-weight: 700;
  border-left: 3px solid var(--citi-accent); padding-left: 12px;
}

/* ============================================================
   (24) COBERTURA DE HOVER — con la marca en navy, el hover global del
   template (a:hover -> theme-primary) sería navy sobre navy en superficies
   oscuras. La sección (20) ya cubre header/footer/secciones theme-bg; aquí
   completamos el resto de superficies oscuras y blindamos los botones.
   ============================================================ */
/* Superficies oscuras adicionales -> hover en azul claro (legible sobre navy) */
.pxn-page-header a:hover, .pxn-page-header a:focus,
.pxn_breadcrumb a:hover, .pxn_breadcrumb a:focus,
.pxn_slider_item a:not(.pxn-btn-primary):hover, .pxn_hero_content a:not(.pxn-btn-primary):hover,
.pxn_service_item.feature a:hover, .pxn_service_item.feature button:hover,
.pxn_achievement_content a:hover, .pxn_achievement_content a:focus {
  color: var(--citi-blue-200) !important;
}
/* Botón "Cerrar" del offcanvas: panel navy -> aspa/ texto blanco (era navy/navy) */
.pxn_offcanvas .offcanvas_close,
.pxn_offcanvas .offcanvas_close * {
  color: #fff !important;
}
/* Botones primarios: el texto y el ícono SIEMPRE visibles en hover/focus
   (nunca se tiñen de navy y desaparecen sobre el propio botón navy). */
.pxn-btn-primary:hover, .pxn-btn-primary:focus,
.pxn-btn-primary:hover .btn_text, .pxn-btn-primary:focus .btn_text,
.pxn-btn-primary:hover .btn_text > span, .pxn-btn-primary:focus .btn_text > span,
.pxn-btn-primary:hover > span, .pxn-btn-primary:focus > span {
  color: #fff !important;
}
.pxn-btn-primary:hover .btn_icon, .pxn-btn-primary:focus .btn_icon {
  background-color: #fff !important;
}
.pxn-btn-primary:hover .btn_icon, .pxn-btn-primary:hover .btn_icon i,
.pxn-btn-primary:focus .btn_icon, .pxn-btn-primary:focus .btn_icon i {
  color: var(--citi-brand) !important;
}

/* ============================================================
   (25) ÍCONOS EN CÍRCULOS DE MARCA — el template pinta el círculo con el
   color de marca (ahora navy) pero el glifo heredaba navy -> navy sobre navy
   = invisible. El glifo va BLANCO en todos los círculos de marca.
   (El .btn_icon de los botones es aparte: círculo blanco con flecha navy.)
   ============================================================ */
/* Círculos de marca permanentes.
   OJO: .pxn-h1_offer_box .offer_icon salió de esta lista al pasar al tono
   suave (arreglo 31). Esta regla se escribió cuando TODOS los círculos eran
   navy sólido; su !important sobre el <i> dejaba el glifo blanco sobre azul
   claro, o sea invisible. */
.pxn_service_item .service_icon,
.pxn_service_item .service_icon i,
.pxn_service_item .service_icon svg,
.pxn_service_item_2 .service_icon,
.pxn_service_item_2 .service_icon i,
.pxn_service_item_2 .service_icon svg,
.pxn-h1_feature_box .feature_icon,
.pxn-h1_feature_box .feature_icon i,
.pxn-h1_feature_box .feature_icon svg,
.pxn_feature_box .feature_icon,
.pxn_feature_box .feature_icon i,
.pxn_feature_box .feature_icon svg,
.pxn_header_contact .contact_icon,
.pxn_header_contact .contact_icon i,
.pxn_header_contact .contact_icon svg {
  color: #fff !important;
  fill: #fff !important;
}
/* El contact_box usa círculo BLANCO -> glifo navy (no blanco sobre blanco). */
.pxn_contact_box .contact_icon,
.pxn_contact_box .contact_icon i,
.pxn_contact_box .contact_icon svg {
  color: var(--citi-brand) !important;
  fill: var(--citi-brand) !important;
}
/* Círculos de marca SOLO en hover/activo (mantener glifo oscuro en reposo) */
.pxn_services_list > li > a.active .service_icon,
.pxn_services_list > li > a.active .service_icon i,
.pxn_services_list > li > a:hover .service_icon,
.pxn_services_list > li > a:hover .service_icon i,
.pxn_post_navigation .navigation:hover .navigation_icon,
.pxn_post_navigation .navigation:hover .navigation_icon i,
.pxn_process_item:hover .process_step,
.pxn_process_item:hover .process_step i,
.pxn_process_item_2:hover .process_no > span {
  color: #fff !important;
  fill: #fff !important;
}

/* ============================================================
   (26) ÍCONOS SOBRE SUPERFICIES OSCURAS (sin círculo de marca) — el glifo
   heredaba navy y quedaba oscuro sobre oscuro: tarjeta de logro del hero,
   popup de búsqueda (navy), y las bandas/CTA navy. Glifo BLANCO en todas.
   ============================================================ */
/* Sólo superficies navy donde el ícono va DIRECTO sobre el fondo (no en un
   círculo claro). Las bandas/CTA navy se excluyen: sus íconos viven en
   círculos claros (teléfono, flecha del botón) y deben quedarse navy. */
.pxn_achievement_content i, .pxn_achievement_content svg,
.pxn_search_popup i, .pxn_search_popup svg {
  color: #fff !important;
  fill: #fff !important;
}
/* Búsqueda dentro del offcanvas (panel navy): ícono claro (era negro). */
.pxn_offcanvas .offcanvas_search i,
.pxn_offcanvas .offcanvas_search svg,
.pxn_offcanvas button i {
  color: #fff !important;
  fill: #fff !important;
}

/* ============================================================
   (27) BLOQUE DE DATOS DEL HOME — pasó de 2 a 3 cifras. En la columna
   angosta, 3 cajas horizontales se cortaban; las volvemos tarjetas compactas
   (ícono arriba, cifra, etiqueta) en 3 columnas; en móvil se apilan.
   ============================================================ */
.pxn-h1_about_content .about_features {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.pxn-h1_about_content .about_features .pxn_icon_box {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.pxn-h1_about_content .about_features .pxn_icon_box .icon {
  width: 52px;
  height: 52px;
  font-size: 22px;
}
.pxn-h1_about_content .about_features .ib_num {
  font-size: 30px;
  margin: 2px 0 0;
}
.pxn-h1_about_content .about_features .title {
  font-size: 13px;
  line-height: 1.3;
}
@media (max-width: 767px) {
  .pxn-h1_about_content .about_features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .pxn-h1_about_content .about_features { grid-template-columns: 1fr; }
  .pxn-h1_about_content .about_features .pxn_icon_box { flex-direction: row; align-items: center; }
}

/* ============================================================
   (24) DETALLE DE NOTICIA — portada equilibrada + navegación + relacionados.
   La portada del template (.pxn_post_thumbnail) es inline-flex sin ancho: los
   flyers VERTICALES se pintaban a su tamaño natural y dejaban media columna en
   blanco. Aquí se centra y se le pone alto máximo; los posts de SOLO IMAGEN
   (.is-image-only) la tratan como pieza protagonista y ocultan el cuerpo vacío.
   ============================================================ */
.pxn_post_thumbnail {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.pxn_post_thumbnail img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 78vh;
  margin-inline: auto;
}
.pxn_post_details_wrap.is-image-only .pxn_post_thumbnail { margin-bottom: 10px; }
.pxn_post_details_wrap.is-image-only .pxn_entry_content { display: none; }

/* Anterior / Siguiente entre noticias (orden cronológico) */
.citi-postnav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--citi-slate-200);
}
.citi-postnav-item {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px 18px; border: 1px solid var(--citi-slate-200);
  border-radius: var(--citi-radius-lg); background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.citi-postnav-item:hover {
  border-color: var(--citi-brand);
  box-shadow: 0 10px 26px rgba(14, 30, 85, .10); transform: translateY(-2px);
}
.citi-postnav-next { text-align: right; align-items: flex-end; }
.citi-postnav-dir {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--citi-brand);
}
.citi-postnav-title {
  color: var(--citi-text-strong); font-weight: 600; font-size: 15px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.citi-postnav-item.is-empty { visibility: hidden; pointer-events: none; }
@media (max-width: 575px) {
  .citi-postnav { grid-template-columns: 1fr; }
  .citi-postnav-next { text-align: left; align-items: flex-start; }
  .citi-postnav-item.is-empty { display: none; }
}

/* "Más noticias" (relacionados) — reusa la tarjeta del listado (.blog_card) */
.citi-related { margin-top: 46px; }
.citi-related-title {
  font-size: 22px; font-weight: 700; color: var(--citi-text-strong);
  margin: 0 0 22px; padding-bottom: 12px;
  border-bottom: 2px solid var(--citi-brand); display: inline-block;
}
.citi-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 991px) { .citi-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .citi-related-grid { grid-template-columns: 1fr; } }

/* ============================================================
   (25) PÁGINA DE CATEGORÍA — /noticias/categoria/<slug>. Encabezado del archivo
   por categoría (indexable). El grid reutiliza .blog_grid del listado.
   ============================================================ */
.blog_cat_head { margin-bottom: 26px; }
.blog_cat_eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--citi-brand);
  background: var(--citi-blue-50); padding: 4px 12px; border-radius: var(--citi-radius-pill);
}
.blog_cat_title {
  margin: 12px 0 4px; font-size: 30px; font-weight: 800; line-height: 1.15;
  color: var(--citi-text-strong);
}
.blog_cat_count { margin: 0; font-size: 14px; color: var(--citi-text-muted); }

/* ============================================================
   (26) VISTAS POR POST — badge en cards (.blog_card_top/.blog_card_views) y en
   la meta del detalle (.post_views). El ícono es un SVG inline (pxn-icons no
   trae "ojo"). Se omite en 0 vistas desde el render (ver gen-blog/BlogList).
   ============================================================ */
.blog_card_top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.blog_card_top .blog_card_cat { align-self: center; }
.blog_card_views,
.pxn_post_meta .post_views {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--citi-text-muted);
  white-space: nowrap;
}
.views_eye { flex: 0 0 auto; opacity: .85; }
.pxn_post_meta .post_views .views_eye { color: var(--citi-brand); opacity: 1; }

/* ============================================================
   (27) CONTRASTE REAL DE LAS TARJETAS SOBRE FOTO ("Por qué afiliarse").
   ------------------------------------------------------------
   El template pinta estas tarjetas con un degradado que termina en
   rgba(30,61,158,0) — es decir, TRANSPARENTE — encima de una foto de
   auditorio. Midiendo los píxeles renderizados, el texto pasaba de 6,08:1
   en la zona opaca a 1,68:1 donde asomaban las luces del techo; la mayor
   parte de la tarjeta quedaba entre 3,6 y 4,3, por debajo del 4,5:1 que
   pide AA para cuerpo de 18px.

   Dos cambios: (a) el degradado ya no baja de 0.88 de opacidad, así que la
   foto matiza pero nunca compite con el texto; (b) el color de cuerpo sale
   del token --citi-text-on-dark-body (antes #b7b6b6 hardcodeado, que el
   arreglo (12b) sólo había corregido en otros dos selectores).
   ============================================================ */
.pxn-h1_feature_box {
  background-image: linear-gradient(
    270deg,
    var(--citi-navy-500) 30%,
    rgba(30, 61, 158, 0.88) 100%
  );
}
.pxn-h1_feature_box.right {
  background-image: linear-gradient(
    270deg,
    rgba(30, 61, 158, 0.88) 0%,
    var(--citi-navy-500) 80%
  );
}
/* La sección entera vive sobre la foto: el subtítulo necesita el mismo piso. */
.pxn-h1_why_choose_wrapper .section_heading .sec_desc,
.pxn-h1_feature_box .feature_desc {
  color: var(--citi-text-on-dark-body);
}

/* ============================================================
   (28) UNIFICACIÓN DE RADIOS.
   ------------------------------------------------------------
   El sitio usaba 12 radios distintos, cuatro de ellos (50px, 100px, 500px,
   999px) para decir lo mismo: "píldora". Se anclan a la escala de
   citi-system.css. Sólo se tocan los contenedores, no los círculos (50%).
   ============================================================ */
.pxn_section_badge,
.sec_badge,
.blog_card_cat,
.pxn_post_cat,
.tagcloud a,
.pxn-btn-primary,
.hero_btn,
.pxn_header_btn {
  border-radius: var(--citi-radius-pill);
}
.pxn_blog_post_inner,
.blog_card,
.pxn_service_item,
.pxn-h1_about_img_wrap,
.pxn_project_item,
.pxn_contact_box,
.pxn_faq_item,
.pxn_doc_card {
  border-radius: var(--citi-radius-md);
}

/* ============================================================
   (29) MAPA DE CONTACTO (iframe de Google Maps).
   ------------------------------------------------------------
   Antes era Leaflet con mosaicos de Carto —que llegaron a mostrar la marca de
   agua "API KEY REQUIRED"— y luego de OpenStreetMap. Ahora es Google Maps en
   iframe, que es lo que la gente reconoce y sabe usar. Leaflet salió del
   proyecto: eran 11KB de CSS cargados en TODAS las páginas.
   ============================================================ */
.citi_map {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  border-radius: var(--citi-radius-lg);
  background: var(--citi-surface-alt);
}
.pxn_contact_map {
  height: 100%;
  border-radius: var(--citi-radius-lg);
  overflow: hidden;
}

/* ============================================================
   (30) PORTAL AFILIADOS — la acción principal, presente en TODAS partes.
   ------------------------------------------------------------
   Existía sólo en la cabecera del home (2 apariciones en 138 archivos) y
   estaba oculta por debajo de 768px, así que en móvil no aparecía nunca —
   ni siquiera en el home. Ahora va en la cabecera de todas las páginas y
   dentro del panel móvil, que es por donde entra el usuario de teléfono.
   ============================================================ */

/* -- Botón dentro del panel offcanvas (fondo navy) --
   Va como `a.offcanvas_cta` con !important a propósito: el arreglo (11) de
   más arriba unifica TODOS los primarios con
   `a.pxn-btn-primary { background-color: var(--citi-brand) !important }`,
   que es (0,1,1) con !important. Una clase suelta no puede ganarle — es la
   misma razón por la que el CTA de la cabecera también lo lleva. */
a.offcanvas_cta {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--citi-space-3);
  width: 100%;
  margin: var(--citi-space-6) 0;
  padding: var(--citi-space-3) var(--citi-space-3) var(--citi-space-3) var(--citi-space-5);
  border-radius: var(--citi-radius-pill);
  background-color: var(--citi-accent-strong) !important;
  color: var(--citi-text-on-dark) !important;
  font-weight: var(--citi-weight-semibold);
  transition: background-color var(--citi-duration) var(--citi-ease);
}
a.offcanvas_cta:hover,
a.offcanvas_cta:focus-visible {
  background-color: var(--citi-red-600) !important;
  color: var(--citi-text-on-dark) !important;
}
.offcanvas_cta .btn_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--citi-radius-circle);
  background-color: #fff !important;
  color: var(--citi-accent-strong) !important;
}
/* La flecha salía casi blanca sobre el círculo blanco: una regla general de
   iconos sobre fondo oscuro (con !important) le ponía un azul muy claro. */
a.offcanvas_cta .btn_icon i,
a.offcanvas_cta:hover .btn_icon i,
a.offcanvas_cta:focus-visible .btn_icon i {
  color: var(--citi-accent-strong) !important;
}

/* -- En pantallas estrechas el botón de la cabecera se compacta para que
      quepan logo + acción + menú sin desbordar. -- */
@media (max-width: 575.98px) {
  /* A 390px la cabecera se partía en dos líneas. Medido: el ANCLA del logo
     reservaba 150px fijos para una imagen de 48px — 100px desperdiciados —
     y el bloque derecho, al quedarse con 172px para 196 de contenido, metía
     el botón y el menú en filas distintas. Con el ancla ajustada al contenido:
     48 + 8 + 196 = 252 de 360. */
  .pxn_header_main_wrap {
    gap: var(--citi-space-2) !important;
    flex-wrap: nowrap !important;
  }
  .pxn_site_logo {
    width: auto !important;
    flex: 0 0 auto;
  }
  .pxn_site_logo .citi-logo-img {
    height: 40px !important;
  }
  .pxn_header_right {
    flex-wrap: nowrap !important;
    gap: var(--citi-space-2);
  }
  .pxn_header_btn.pxn-btn-primary {
    padding-left: var(--citi-space-4) !important;
    padding-right: var(--citi-space-1) !important;
  }
  /* El rótulo del botón ya es "Portal" en el marcado, así que sobra el apaño
     que antes lo recortaba con font-size:0 + ::after sólo en móvil. */
  .pxn_header_btn.pxn-btn-primary .btn_text {
    font-size: var(--citi-text-xs);
  }
}

/* ============================================================
   (31) TARJETA "QUÉ OFRECEMOS" — una sola, no tres.
   ------------------------------------------------------------
   El template trae tres variantes posicionales (base / .middle / .right) que,
   puestas en fila, se leen como tres componentes distintos. Medido en el home:

     alineación del texto   izquierda  |  centro   |  derecha
     título (y)             185        |  335      |  185
     imagen                 abajo 250px|  arriba 143px | abajo 250px
     icono (x)              274        |  680      |  1081

   Además cada variante aplica una máscara SVG distinta (left/middle/right-
   circle.svg) y pinta un ::before con *-line.svg: ese es el arco de puntos que
   cruza las tarjetas y que parece un fallo de render, no un adorno.

   Aquí se colapsan a un único patrón: icono arriba a la izquierda, número como
   marca discreta arriba a la derecha, texto alineado a la izquierda y foto al
   pie con la misma proporción en las tres.
   ============================================================ */
.pxn-h1_offer_box,
.pxn-h1_offer_box.middle,
.pxn-h1_offer_box.right {
  position: relative;
  flex-direction: column !important;
  text-align: left !important;
  overflow: hidden;
  border-radius: var(--citi-radius-md);
}

/* Hueco arriba para la fila icono + número */
.pxn-h1_offer_box .offer_content,
.pxn-h1_offer_box.middle .offer_content,
.pxn-h1_offer_box.right .offer_content {
  padding: 92px var(--citi-space-8) var(--citi-space-6) !important;
  text-align: left !important;
}

/* .offer_img era `position: relative`, así que el icono absoluto se colocaba
   respecto a la FOTO, no a la tarjeta: con top:32 acababa en y=278. Se vuelve
   estático para que el bloque posicionado sea la tarjeta. */
.pxn-h1_offer_box .offer_img,
.pxn-h1_offer_box.middle .offer_img,
.pxn-h1_offer_box.right .offer_img {
  position: static !important;
}

/* Icono: misma esquina en las tres. Era absoluto dentro de .offer_img y
   flotaba sobre la foto a una x distinta en cada variante. */
.pxn-h1_offer_box .offer_img .offer_icon,
.pxn-h1_offer_box.middle .offer_img .offer_icon,
.pxn-h1_offer_box.right .offer_img .offer_icon {
  position: absolute !important;
  top: var(--citi-space-8) !important;
  inset-inline-start: var(--citi-space-8) !important;
  inset-inline-end: auto !important;
  width: 56px;
  height: 56px;
  transform: none !important;
}
.pxn-h1_offer_box:hover .offer_img .offer_icon,
.pxn-h1_offer_box:hover.middle .offer_img .offer_icon,
.pxn-h1_offer_box.right:hover .offer_img .offer_icon,
.pxn-h1_offer_box.middle:hover .offer_img .offer_icon {
  transform: rotateY(360deg) !important;
}

/* Número: era de 50px y aterrizaba encima de la foto, más pesado que el
   propio título (22px). Pasa a marca discreta, alineada con el icono. */
.pxn-h1_offer_box .offer_content .offer_no,
.pxn-h1_offer_box.middle .offer_content .offer_no,
.pxn-h1_offer_box.right .offer_content .offer_no {
  position: absolute !important;
  top: 44px !important;
  inset-inline-start: auto !important;
  inset-inline-end: var(--citi-space-8) !important;
  bottom: auto !important;
  margin: 0 !important;
  font-size: var(--citi-text-sm) !important;
  font-weight: var(--citi-weight-semibold);
  letter-spacing: var(--citi-tracking-wide);
  color: var(--citi-text-muted) !important;
}

/* Foto: misma proporción en las tres, sin máscara circular y sin el arco. */
.pxn-h1_offer_box .offer_img .mask_img,
.pxn-h1_offer_box.middle .offer_img .mask_img,
.pxn-h1_offer_box.right .offer_img .mask_img {
  aspect-ratio: 424 / 200 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
.pxn-h1_offer_box .offer_img .mask_img::before,
.pxn-h1_offer_box.middle .offer_img .mask_img::before,
.pxn-h1_offer_box.right .offer_img .mask_img::before {
  display: none !important; /* el arco de puntos */
}
.pxn-h1_offer_box .offer_img .mask_img img,
.pxn-h1_offer_box.middle .offer_img .mask_img img,
.pxn-h1_offer_box.right .offer_img .mask_img img {
  mask-image: none !important;
  -webkit-mask-image: none !important;
  aspect-ratio: 424 / 200 !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   (32) HISTORIA DEL DIRECTORIO — /directorio/historia
   ------------------------------------------------------------
   Línea de tiempo de las gestiones, de la más antigua a la actual.
   Todo sale de los tokens: sin hex, sin tamaños sueltos.
   ============================================================ */
.hist_intro_nota {
  color: var(--citi-text-muted);
  font-size: var(--citi-text-sm);
  border-inline-start: 2px solid var(--citi-border);
  padding-inline-start: var(--citi-space-4);
  margin-block: var(--citi-space-6) var(--citi-space-12);
}
.hist_intro_nota strong { color: var(--citi-text-brand); }

.hist_timeline {
  list-style: none;
  margin: 0 0 var(--citi-space-12);
  padding: 0;
  position: relative;
}
/* el hilo vertical */
.hist_timeline::before {
  content: "";
  position: absolute;
  inset-block: var(--citi-space-3) var(--citi-space-8);
  inset-inline-start: 7px;
  width: 2px;
  background: var(--citi-border);
}

.hist_item {
  position: relative;
  padding-inline-start: var(--citi-space-10);
  padding-block-end: var(--citi-space-10);
}
.hist_item:last-child { padding-block-end: 0; }

/* punto sobre el hilo */
.hist_marca {
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: var(--citi-radius-circle);
  background: var(--citi-surface);
  border: 2px solid var(--citi-border);
}
.hist_item.is-actual .hist_marca {
  background: var(--citi-accent-strong);
  border-color: var(--citi-accent-strong);
  box-shadow: 0 0 0 4px var(--citi-surface-brand);
}

.hist_periodo {
  display: flex;
  align-items: baseline;
  gap: var(--citi-space-3);
  margin-block-end: var(--citi-space-3);
}
.hist_anios {
  font-size: var(--citi-text-xl);
  font-weight: var(--citi-weight-bold);
  color: var(--citi-text-strong);
  letter-spacing: var(--citi-tracking-tight);
}
.hist_sigla {
  font-size: var(--citi-text-xs);
  font-weight: var(--citi-weight-semibold);
  letter-spacing: var(--citi-tracking-wide);
  color: var(--citi-text-brand);
  background: var(--citi-surface-brand);
  border-radius: var(--citi-radius-pill);
  padding: 2px var(--citi-space-2);
}

.hist_card {
  display: flex;
  align-items: center;
  gap: var(--citi-space-6);
  background: var(--citi-surface);
  border: 1px solid var(--citi-border);
  border-radius: var(--citi-radius-lg);
  padding: var(--citi-space-5);
  transition: box-shadow var(--citi-duration) var(--citi-ease);
}
.hist_card:hover { box-shadow: var(--citi-shadow-md); }
.hist_item.is-actual .hist_card {
  background: var(--citi-surface-brand);
  border-color: var(--citi-blue-200);
}

.hist_foto {
  flex: 0 0 auto;
  width: 96px;
  aspect-ratio: 4 / 5;
  border-radius: var(--citi-radius-md);
  overflow: hidden;
  background: var(--citi-surface-alt);
}
.hist_foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hist_datos { min-width: 0; }
.hist_cargo {
  display: block;
  font-size: var(--citi-text-xs);
  font-weight: var(--citi-weight-semibold);
  letter-spacing: var(--citi-tracking-wide);
  text-transform: uppercase;
  color: var(--citi-text-muted);
  margin-block-end: var(--citi-space-1);
}
.hist_nombre {
  margin: 0;
  font-size: var(--citi-text-lg);
  line-height: var(--citi-leading-snug);
  color: var(--citi-text-strong);
}
.hist_actual {
  display: inline-block;
  margin-block-start: var(--citi-space-2);
  font-size: var(--citi-text-xs);
  font-weight: var(--citi-weight-semibold);
  color: var(--citi-text-on-dark);
  background: var(--citi-accent-strong);
  border-radius: var(--citi-radius-pill);
  padding: 3px var(--citi-space-3);
}
.hist_nota {
  margin: var(--citi-space-2) 0 0;
  font-size: var(--citi-text-sm);
  line-height: var(--citi-leading-normal);
  color: var(--citi-text-body);
}


@media (max-width: 575.98px) {
  .hist_item { padding-inline-start: var(--citi-space-8); }
  .hist_card { flex-direction: column; align-items: flex-start; gap: var(--citi-space-4); }
  .hist_foto { width: 108px; }
}

/* ============================================================
   (33) LA CABECERA NO SE PARTE EN DOS FILAS.
   ------------------------------------------------------------
   Medido en /directorio/historia a 1440px: logo 150 + navegación 1175 +
   bloque derecho 485 = 1810px dentro de un contenedor de 1410. Como el
   wrapper tiene flex-wrap:wrap, el bloque derecho (teléfono + Portal
   Afiliados + Menú) caía a una segunda fila y la cabecera pasaba de 90 a
   165px de alto. A 1280 no ocurría, lo que hacía el fallo intermitente.

   Forzar nowrap a secas tampoco vale: entre 992 y 1150px el contenido no
   cabe y aparecía desborde horizontal. Lo honesto es que, por debajo de
   1200px, el menú de escritorio NO cabe junto al logo, el CTA y el botón
   de menú — así que ahí se oculta y manda el panel offcanvas, que en las
   páginas interiores siempre está disponible. Es el mismo criterio del
   template, sólo que en el punto de corte correcto.
   ============================================================ */
@media (min-width: 1280px) {
  .pxn_header_main_wrap { flex-wrap: nowrap !important; }
  .pxn_header_main_inner { flex: 0 1 auto; flex-wrap: nowrap !important; }
  .pxn_header_right { flex: 0 0 auto; flex-wrap: nowrap !important; }
  .pxn_site_logo { flex: 0 0 auto; }
  .pxn_main_navigation > ul { flex-wrap: nowrap !important; white-space: nowrap; }
}
/* El teléfono del header aparecía a partir de 1400px (d-xxl del template).
   Con el botón Portal Afiliados ocupando ahora ese espacio, entre 1400 y
   1500 el bloque derecho medía 485px y se salía 32px de la ventana. Se
   muestra desde 1500. El número sigue en el panel móvil, en el pie y en
   /contacto, así que no se pierde de ningún sitio. */
@media (max-width: 1499.98px) {
  .pxn_header_contact { display: none !important; }
}

/* Por debajo de 1280: sin menú horizontal, el hamburguesa se encarga.
   (En 1200 justo el menú entraba pero se salía 30px; 1280 es el primer
   ancho donde logo + menú + CTA + hamburguesa caben de verdad.) */
@media (max-width: 1279.98px) {
  .pxn_header_main_inner,
  .pxn-header .pxn_main_navigation.d-none.d-lg-inline-block {
    display: none !important;
  }
  .pxn_offcanvas_toggle { display: inline-flex !important; }
}

/* ============================================================
   (34) BOTÓN PRIMARIO: EL DISCO DEL ICONO, DENTRO DE LA PÍLDORA.
   ------------------------------------------------------------
   Esto lo rompí yo en el arreglo (28): convertí .pxn-btn-primary y
   .pxn_header_btn en píldoras (999px) pero el .btn_icon del template seguía
   siendo un CUADRADO de 8px de radio y 42x42 dentro de un botón de 50px de
   alto. Resultado: una caja blanca cuadrada encajada en una píldora, con las
   esquinas peleándose con la curva. Afectaba a TODOS los primarios del sitio
   (hero, "Afíliate", "Enviar", "Ver todas las noticias", Portal Afiliados),
   no sólo al rojo del header.

   El disco pasa a círculo y se le deja aire para que la curva de la píldora
   se lea. Referencia: el CTA del panel móvil, que ya iba con círculo de 34px.
   ============================================================ */
.pxn-btn-primary .btn_icon,
.pxn_header_btn .btn_icon,
.hero_btn .btn_icon,
.about_btn .btn_icon,
.blog_more_btn .btn_icon,
.contact_btn .btn_icon,
.cta_btn .btn_icon {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 auto;
  border-radius: var(--citi-radius-circle) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* El botón deja el mismo aire a ambos lados del disco. */
.pxn-btn-primary,
.pxn_header_btn.pxn-btn-primary {
  /* mismo aire que arriba y abajo: (alto - 38) / 2 = 4px */
  padding-inline-end: var(--citi-space-1) !important;
  gap: var(--citi-space-3);
}

/* ============================================================
   (35) BOTÓN DE MENÚ: EL ICONO HABLA SOLO.
   ------------------------------------------------------------
   Llevaba la palabra "Menú" al lado de un glifo de rejilla de cuadrados, que
   no significa "menú" para nadie. Ahora es un hamburguesa (tres líneas), que
   sí es la convención universal, y la palabra desaparece de la vista.

   OJO: el texto NO se borra del DOM, se oculta visualmente. Es lo que da
   nombre accesible al botón; con display:none un lector de pantalla anunciaría
   sólo "botón". Además lleva aria-label y aria-expanded.
   ============================================================ */
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.pxn_offcanvas_toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: var(--citi-radius-circle);
  background: rgba(255, 255, 255, 0.10);
  transition: background-color var(--citi-duration) var(--citi-ease);
}
.pxn_offcanvas_toggle:hover,
.pxn_offcanvas_toggle:focus-visible {
  background: rgba(255, 255, 255, 0.20);
}
.pxn_offcanvas_toggle .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pxn_offcanvas_toggle svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

/* ============================================================
   (36) "POR QUÉ AFILIARSE": TARJETAS SOBRE FOTO, BIEN HECHAS.
   ------------------------------------------------------------
   Esto lo estropeé yo. El template diseñó estas cajas como DEGRADADOS que se
   desvanecían hasta rgba(...,0) por el lado interior: sin borde visible, y por
   eso tenían `padding` con un lado a CERO y `border-radius: 0`. Cuando en el
   arreglo (27) subí la opacidad a 0.88 para salvar el contraste (el texto caía
   a 1,35:1 sobre la foto), el degradado pasó a ser casi sólido: aparecieron
   cuatro rectángulos de esquinas vivas con el texto pegado al filo.

   Medido antes: radio 0px · padding 30px 30px 30px 0px · sin sombra ·
   columnas desalineadas (x = 73 y 0 a la izquierda; 902 y 975 a la derecha) ·
   alturas 224 / 195 / 224 / 224.

   Ahora son tarjetas de verdad: esquinas redondeadas, aire igual por los
   cuatro lados, columnas alineadas, misma altura por fila y sombra para que
   se lean flotando. El fondo mantiene el contraste pero deja ver la foto
   difuminada por detrás, que era la intención original.
   ============================================================ */
.pxn-h1-why-choose-section .feature_bg_img,
.pxn-h1_why_choose_wrapper .feature_bg_img {
  border-radius: var(--citi-radius-xl);
  overflow: hidden;
}
.pxn-h1-why-choose-section .feature_bg_img img,
.pxn-h1_why_choose_wrapper .feature_bg_img img {
  border-radius: var(--citi-radius-xl);
}

.pxn-h1_feature_box,
.pxn-h1_feature_box.right {
  padding: var(--citi-space-6) !important;
  border-radius: var(--citi-radius-lg) !important;
  box-shadow: var(--citi-shadow-lg);
  background-image: none !important;
  background-color: rgba(13, 30, 85, 0.86) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Columnas alineadas: las dos de la izquierda al mismo borde, las dos de la
   derecha también. Antes cada una caía donde el template la había dejado. */
.why_choose_features .pxn-h1_feature_box {
  inset-inline-start: var(--citi-space-6) !important;
  inset-inline-end: auto !important;
}
.why_choose_features .pxn-h1_feature_box.right {
  inset-inline-start: auto !important;
  inset-inline-end: var(--citi-space-6) !important;
}
/* Misma altura por fila (la tarjeta 2 medía 195 frente a 224). */
.why_choose_features .pxn-h1_feature_box {
  min-height: 224px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pxn-h1_feature_box .feature_box_head {
  gap: var(--citi-space-4);
}

/* ============================================================
   (37) RESULTADOS DE PÁGINAS EN EL BUSCADOR.
   ------------------------------------------------------------
   El buscador sólo miraba noticias, así que "historia" o "estatutos" no
   devolvían nada aunque la página existiera — y el rótulo prometía "noticias,
   servicios o documentos". Ahora las páginas salen primero, antes de las
   noticias, porque casi siempre son lo que se busca.
   ============================================================ */
.page_results {
  margin-block-end: var(--citi-space-8);
}
.page_results_title {
  font-size: var(--citi-text-xs);
  font-weight: var(--citi-weight-semibold);
  letter-spacing: var(--citi-tracking-wide);
  text-transform: uppercase;
  color: var(--citi-text-muted);
  margin: 0 0 var(--citi-space-3);
}
.page_results_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--citi-space-2);
}
.page_results_list a {
  display: block;
  padding: var(--citi-space-4) var(--citi-space-5);
  background: var(--citi-surface);
  border: 1px solid var(--citi-border);
  border-radius: var(--citi-radius-md);
  transition: border-color var(--citi-duration) var(--citi-ease),
              box-shadow var(--citi-duration) var(--citi-ease);
}
.page_results_list a:hover,
.page_results_list a:focus-visible {
  border-color: var(--citi-blue-200);
  box-shadow: var(--citi-shadow-sm);
}
.page_results_name {
  display: block;
  font-weight: var(--citi-weight-semibold);
  color: var(--citi-text-strong);
}
.page_results_desc {
  display: block;
  margin-block-start: 2px;
  font-size: var(--citi-text-sm);
  color: var(--citi-text-muted);
}

/* ============================================================
   (38) RADIOS: TODO A LA ESCALA.
   ------------------------------------------------------------
   Cierre de la normalización. Auditado sobre las 13 páginas, quedaban ocho
   valores fuera de la escala de citi-system.css, todos heredados de
   main.citi.css (que es generado, así que se corrigen aquí):

     5px              .month_year, .hero_sub          -> son chips: píldora
     12px             .citi_doc                       -> md
     14px             .citi-gallery-item, .postnav    -> lg
     18px             imágenes de contenido            -> lg
     10px 0 0         .footer_widgets_inner            } formas asimétricas
     0 10px 0 0       .project_content                 } deliberadas: se
     0 10px 10px      .blog_image                      } conserva la forma
     0 0 10px         .blog_date                       } con el token md

   La escala completa vive en citi-system.css: xs 4 · sm 8 · md 10 · lg 16 ·
   xl 24 · pill · circle. Si hace falta otro valor, se añade AHÍ.
   ============================================================ */
/* main.citi.css los fija con selectores de 3 niveles (.pxn_blog_post_inner
   .blog_date .month_year), así que una clase suelta no gana. */
.pxn_post_thumbnail .post_date .month_year,
.pxn_blog_post_inner .blog_date .month_year,
.pxn_blog_post_2 .blog_date .month_year,
.pxn_blog_post_3 .blog_date .month_year,
.month_year,
.blog_card_date,
.pxn_post_cat {
  border-radius: var(--citi-radius-pill);
}
.pxn_hero_content .hero_sub,
.hero_sub {
  border-radius: var(--citi-radius-pill);
}
.citi_doc {
  border-radius: var(--citi-radius-lg);
}
.citi-gallery-item,
.citi-gallery-item img,
.citi-postnav-item {
  border-radius: var(--citi-radius-lg);
}
.pxn_entry_content img,
.citi_about_img img,
.directorio_fotos img {
  border-radius: var(--citi-radius-lg);
}
/* Formas asimétricas del template: se respetan, pero con el valor de la escala. */
.footer_widgets_inner {
  border-radius: var(--citi-radius-md) 0 0 0;
}
.project_content {
  border-radius: 0 var(--citi-radius-md) 0 0;
}
.blog_image {
  border-radius: 0 var(--citi-radius-md) var(--citi-radius-md) 0;
}
.blog_date {
  border-radius: 0 0 var(--citi-radius-md) 0;
}

/* ============================================================
   (39) MINIATURAS DE NOTICIA CON PORTADA VERTICAL.
   ------------------------------------------------------------
   La miniatura es 3:2 con object-fit:cover. Con una foto apaisada va bien,
   pero los afiches de convocatoria son verticales (1024x1280 es lo habitual)
   y se recortaban a 420x280: desaparecían el título del afiche y los datos
   del pie, que es justo lo que se quiere leer. Medido en /noticias: 3 de 9.

   El generador marca esas portadas con .is-vertical y pasa la propia imagen
   como variable, que se usa difuminada de fondo. Así el afiche se ve ENTERO
   y la tarjeta sigue llena, sin franjas grises.
   ============================================================ */
.blog_card_thumb.is-vertical::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--thumb-bg);
  background-size: cover;
  background-position: center;
  filter: blur(18px) saturate(1.1);
  transform: scale(1.15);
  opacity: 0.55;
}
.blog_card_thumb.is-vertical {
  background: var(--citi-surface-dark);
}
.blog_card_thumb.is-vertical img {
  position: relative;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.blog_card:hover .blog_card_thumb.is-vertical img {
  transform: scale(1.03);
}

/* ============================================================
   (40) AIRE ENTRE EL BOTÓN DEL PORTAL Y EL DE MENÚ.
   ------------------------------------------------------------
   Iban pegados: el gap del bloque derecho quedó a 0 al normalizar la
   cabecera, así que la píldora roja y el círculo del menú se tocaban y se
   leían como un solo control.
   ============================================================ */
/* main.citi.css:2015 fija `.pxn-header-2 .pxn_header_right { gap: 0 }` — dos
   clases, así que una sola no le gana por mucho que vaya después. */
.pxn-header .pxn_header_right,
.pxn-header-2 .pxn_header_right,
.pxn-header-1 .pxn_header_right {
  gap: var(--citi-space-4);
}
@media (max-width: 575.98px) {
  .pxn-header .pxn_header_right,
  .pxn-header-2 .pxn_header_right,
  .pxn-header-1 .pxn_header_right {
    gap: var(--citi-space-3);
  }
}

/* ============================================================
   (41) EL MARQUEE DEL PIE, QUIETO Y LEGIBLE.
   ------------------------------------------------------------
   Repetía "Escríbenos a info@citior.org.bo" desplazándose en bucle, así que
   en cualquier instante se leía cortado a media palabra ("...or.org.bo
   Escríbeno...") y en gris claro sobre navy. La invitación es útil; la
   ejecución no. Se queda una sola copia, centrada y sin movimiento.
   ============================================================ */
.pxn_footer_marquee {
  padding-block: var(--citi-space-10);
  overflow: hidden;
}
.pxn_footer_marquee .pxn_marquee_scroll {
  display: flex;
  justify-content: center;
  animation: none !important;
  transform: none !important;
}
/* sólo la primera copia: las demás existían para el bucle */
.pxn_footer_marquee .pxn_marquee_scroll_wrapper:not(:first-child) {
  display: none !important;
}
.pxn_footer_marquee .pxn_marquee_scroll_wrapper {
  animation: none !important;
  transform: none !important;
}
.pxn_footer_marquee .footer_marquee_text {
  font-size: var(--citi-text-3xl) !important;
  white-space: normal;
  text-align: center;
}
.pxn_footer_marquee .footer_marquee_text a {
  color: var(--citi-text-on-dark) !important;
  -webkit-text-stroke: 0 !important;
  text-decoration: none;
  border-bottom: 2px solid var(--citi-accent);
  padding-bottom: 2px;
  transition: color var(--citi-duration) var(--citi-ease);
}
.pxn_footer_marquee .footer_marquee_text a:hover {
  color: var(--citi-text-on-dark-body) !important;
}

/* ── (42) Hero: variante ligera para móvil ──────────────────────────────────
   Los dos slides del hero son 1920x1000 (173 KB cada uno) y se descargaban
   enteros también en un teléfono de 390px: ~5 veces más píxeles de los que
   caben. Es además la imagen LCP, así que era el cuello de botella de la
   métrica. Se sirve una variante de 960px (45 KB) por debajo de 992px.

   El !important no es capricho: main.js (línea 84) copia data-bg-image a
   style="background-image" en línea, y un estilo en línea gana a cualquier
   hoja. El selector se ata al propio data-bg-image para que la regla siga
   apuntando a la imagen correcta si algún día cambia el orden de los slides. */
@media (max-width: 991.98px) {
  .pxn_slider_bg_img[data-bg-image$="h1-hero-slider-1.webp"] {
    background-image: url("/template/assets/images/hero/h1-hero-slider-1-960.webp") !important;
  }
  .pxn_slider_bg_img[data-bg-image$="h1-hero-slider-2.webp"] {
    background-image: url("/template/assets/images/hero/h1-hero-slider-2-960.webp") !important;
  }
}


/* ── (43) Peso del documento en Transparencia ───────────────────────────────
   La página enlaza 14 PDF que suman 93,7 MB y uno solo pesa 76,7 MB. Nada lo
   avisaba: con datos móviles se arrancaba esa descarga sin saberlo. El tamaño
   va junto a la descripción, en un tono discreto — es un dato, no una alarma.
   Lo escribe scripts/etiquetar-tamano-documentos.mjs leyéndolo del bucket. */
.citi_doc_size {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .5rem;
  border-radius: var(--citi-radius-pill);
  background: var(--citi-surface-alt);
  border: 1px solid var(--citi-border);
  color: var(--citi-text-muted);
  font-size: var(--citi-text-xs);
  font-weight: var(--citi-weight-semibold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 16-oct-2026 — La firma de muestra de la plantilla se cambió por la Presidenta
   real del Colegio (foto + nombre), y las tarjetas de servicios usan fotos
   propias distintas (antes las tres repetían la misma conferencia). */
.citi_president,.pxn-h1_about_content .about_key_feature .citi_president{display:flex;align-items:center;gap:.85rem;max-width:none;width:100%;border-right:0;padding:0 0 20px;margin:0 0 20px;border-bottom:1px solid var(--pxn-color-border-1,#e3e7ef);}
.citi_president img{width:56px;height:56px;max-width:none;border-radius:50%;object-fit:cover;object-position:center 20%;flex:none;}
.citi_president .designation{display:flex;flex-direction:column;justify-content:flex-start;text-align:left;margin-top:0;white-space:nowrap;line-height:1.3;font-size:13px;color:var(--pxn-text-color,#5b6472);}
.citi_president .designation b{font-size:15px;color:var(--pxn-heading-color,#0d1e55);font-weight:700;}
.offer_img img{object-fit:cover;}

/* Afiliación (16-oct-2026): foto real en lugar del afiche recortado, y el
   aviso para quien ya es colegiado (censo, no afiliación). */
.citi_about_img .citi_photo_fill{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;}
.citi_censo_note{margin-top:28px;padding:18px 20px;border:1px solid var(--pxn-color-border-1,#e3e7ef);border-left:4px solid var(--pxn-color-primary,#0d1e55);border-radius:12px;background:#fff;display:flex;flex-direction:column;gap:6px;}
.citi_censo_note b{font-size:17px;color:var(--pxn-color-heading,#0d1e55);}
.citi_censo_note span{font-size:15px;line-height:1.55;color:var(--pxn-color-text-body,#4a5468);}
.citi_censo_note a{align-self:flex-start;margin-top:4px;font-weight:700;color:var(--pxn-color-primary,#0d1e55);display:inline-flex;align-items:center;gap:6px;min-height:44px;}
/* Directorio en la portada: retratos reales con encuadre de rostro. */
.citi_home_team .member_image img{aspect-ratio:4/5;object-fit:cover;object-position:center 18%;width:100%;}

/* ============================================================
   Instalar la app (PWA) — panel offcanvas, bajo «Portal».
   Secundario sobre fondo navy: contorno blanco, sin relleno. Solo se ve
   cuando el navegador permite instalar (html.pwa-can-install, lo pone
   PwaManager); el resto del tiempo [data-pwa-install] queda oculto.
   ============================================================ */
a.offcanvas_install {
  display: flex;
  align-items: center;
  gap: var(--citi-space-3);
  width: 100%;
  margin: calc(-1 * var(--citi-space-3)) 0 var(--citi-space-6);
  min-height: 48px;
  padding: var(--citi-space-2) var(--citi-space-5);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--citi-radius-pill);
  color: var(--citi-text-on-dark) !important;
  font-weight: var(--citi-weight-semibold);
  text-decoration: none;
  transition: border-color var(--citi-duration) var(--citi-ease), background-color var(--citi-duration) var(--citi-ease);
}
a.offcanvas_install:hover,
a.offcanvas_install:focus-visible {
  border-color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
}
a.offcanvas_install svg { flex: 0 0 auto; }