/* ============================================================
   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-color-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-color-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-color-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-color-brand-hover);
}

/* ---- ROJO CITI como acento de energía (con criterio): CTA del header
        "Get a Quote" y botón destacado -> rojo-700 (AA con blanco) ---- */
.pxn_header_btn .pxn-btn-primary,
.pxn-btn-primary.btn-accent {
  background-color: var(--citi-color-accent-strong);
}
.pxn_header_btn .pxn-btn-primary:hover,
.pxn-btn-primary.btn-accent:hover {
  background-color: var(--citi-red-600);
}
.pxn_header_btn .pxn-btn-primary .btn_icon,
.pxn-btn-primary.btn-accent .btn_icon {
  background-color: #fff;
  color: var(--citi-color-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-color-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-color-ink);
  font-weight: 500;
}
.pxn_categories .cat_filter:hover { color: var(--citi-color-brand); }
.pxn_recent_posts li {
  padding: 10px 0;
  border-bottom: 1px solid var(--citi-slate-200);
}
.pxn_recent_posts li a { color: var(--citi-color-ink); font-weight: 500; }
.pxn_recent_posts li a:hover { color: var(--citi-color-brand); }
.pxn_recent_posts li .date {
  display: block;
  font-size: 13px;
  color: var(--citi-color-muted);
  margin-top: 4px;
}
.pxn_entry_content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 14px 0;
}

/* ---- Directorio (tarjetas de miembros con foto) ---- */
.directorio_grid { margin-top: 10px; }
.directorio_card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--citi-slate-200);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 26px;
  height: 100%;
  text-align: center;
  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-color-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-color-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-color-muted);
  margin: 0 16px 18px;
}
.directorio_fotos {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.directorio_fotos img { width: 100%; max-width: 760px; height: auto; border-radius: 14px; }

/* ============================================================
   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.
   ============================================================ */

/* Badges/etiquetas de sección -> ROJO de marca (presencia en cada sección) */
.sec_sub {
  background-color: var(--citi-color-accent-strong) !important; /* red-700, AA con blanco */
  color: #fff !important;
}
/* sobre secciones oscuras también en rojo (pop sobre navy) */
[class*="theme-bg"] .sec_sub,
.pxn-h1-why-choose-section .sec_sub {
  background-color: var(--citi-color-accent-strong) !important;
  color: #fff !important;
}

/* ---- 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-color-ink) !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-color-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-color-accent); }
.pxn_entry_content blockquote {
  border-left: 4px solid var(--citi-color-accent);
  padding-left: 18px;
}
.pxni-checked-circle { color: var(--citi-color-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-color-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": era pill navy@.5 (3.21 sobre claro).
   -> pill ROJO sólido de marca + blanco (AA 5.9), coherente con .sec_sub. */
.hero_sub {
  background-color: var(--citi-color-accent-strong) !important;
  color: #fff !important;
}

/* (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) VARIABLE DE CUERPO del template: #64748B fallaba sobre secciones
   tintadas (#f5f5f5 -> 4.36). La oscurecemos a slate-600 (#475569, AAA en
   blanco, AA cómodo en tintados). Arregla TODO el texto de cuerpo del sitio. */
:root {
  --pxn-color-text-body: #475569 !important;
}

/* (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-color-brand) !important;
}
.pxn-btn-primary:hover,
.pxn_service_item .service_btn:hover,
.cta_btn.pxn-btn-primary:hover {
  background-color: var(--citi-color-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-slate-500) !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-color-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: 16px;
  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-color-ink) !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: 10px;
  color: var(--citi-color-ink);
  font-weight: 600;
  text-decoration: none;
  transition: all .2s ease;
}
.pxn_pagination a.page-numbers:hover {
  border-color: var(--citi-color-brand);
  color: var(--citi-color-brand);
  background: var(--citi-blue-50);
}
.pxn_pagination .page-numbers.current {
  background: var(--citi-color-brand);
  border-color: var(--citi-color-brand);
  color: #fff;
}
.pxn_pagination .page-numbers.dots {
  border: none;
  min-width: auto;
  color: var(--citi-color-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-color-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: 12px;
  font-size: 15px; color: var(--citi-color-ink); background: #fff;
}
.blog_searchbar input:focus {
  outline: none; border-color: var(--citi-color-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-color-body); font-size: 14px;
}
.blog_status button {
  background: none; border: none; color: var(--citi-color-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: 16px; 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: 8px; 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-color-brand-hover);
  border: none; border-radius: 999px; 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-color-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-color-ink); }
.blog_card_title a:hover { color: var(--citi-color-brand); }
.blog_card_excerpt {
  color: var(--citi-color-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-color-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-color-accent); gap: 10px; }
.blog_empty {
  padding: 48px 24px; text-align: center; color: var(--citi-color-muted);
  border: 1px dashed var(--citi-slate-300); border-radius: 12px;
}
/* Categorías como filtros (sidebar) */
.pxn_categories .cat_filter { cursor: pointer; }
.pxn_categories .cat_filter.is-active { color: var(--citi-color-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-color-ink) !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-color-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-color-body); margin: 18px 0 26px; }
.citi_about_img img { width: 100%; border-radius: 18px; 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: 12px; background: var(--citi-blue-50);
  color: var(--citi-color-brand); font-size: 20px;
}
.citi_facts li span { display: flex; flex-direction: column; color: var(--citi-color-muted); font-size: 13.5px; }
.citi_facts li span strong { color: var(--citi-color-ink); font-size: 15.5px; }
.citi_mv {
  background: #fff; border: 1px solid var(--citi-slate-200); border-radius: 16px;
  padding: 30px 28px; height: 100%;
}
.citi_mv_icon {
  width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px; background: var(--citi-color-brand); color: #fff; font-size: 24px; margin-bottom: 16px;
}
.citi_mv h3 { color: var(--citi-color-ink); margin: 0 0 10px; font-size: 21px; }
.citi_mv p { color: var(--citi-color-body); line-height: 1.75; margin: 0; }
.citi_feature {
  background: #fff; border: 1px solid var(--citi-slate-200); border-radius: 16px;
  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 {
  width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--citi-blue-50); color: var(--citi-color-brand); font-size: 26px; margin-bottom: 18px;
}
.citi_feature_title { font-size: 18px; color: var(--citi-color-ink); margin: 0 0 8px; }
.citi_feature_desc { color: var(--citi-color-body); font-size: 14.5px; line-height: 1.65; margin: 0; }
.citi_benefit {
  display: flex; gap: 16px; background: #fff; border: 1px solid var(--citi-slate-200);
  border-radius: 14px; padding: 22px; height: 100%;
}
.citi_benefit_icon {
  flex: none; width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--citi-color-brand); color: #fff; font-size: 22px;
}
.citi_benefit_title { font-size: 16.5px; color: var(--citi-color-ink); margin: 0 0 5px; }
.citi_benefit_desc { color: var(--citi-color-body); font-size: 14px; 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-color-brand); }
.citi_btn_ghost:hover { color: var(--citi-color-accent); gap: 12px; }
.citi_aporte {
  text-align: center; background: #fff; border: 1px solid var(--citi-slate-200);
  border-radius: 18px; 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-color-brand-hover); margin-bottom: 12px;
}
.citi_aporte_amount {
  font-size: 48px; font-weight: 800; color: var(--citi-color-ink); 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-color-brand); margin-top: 6px; }
.citi_aporte_cond { color: var(--citi-color-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: 50%; background: var(--citi-color-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-color-ink); font-size: 17px; }
.citi_steps p { margin: 0; color: var(--citi-color-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-color-ink); 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: 12px; padding: 18px 20px; height: 100%; transition: box-shadow .2s ease, border-color .2s ease;
}
.citi_doc:hover { border-color: var(--citi-color-brand); box-shadow: 0 8px 22px rgba(14,30,85,.08); }
.citi_doc_icon {
  flex: none; width: 46px; height: 46px; border-radius: 10px; background: var(--citi-blue-50);
  color: var(--citi-color-brand); display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
.citi_doc_body h3 { font-size: 15.5px; color: var(--citi-color-ink); margin: 0 0 4px; line-height: 1.35; }
.citi_doc_body p { font-size: 13.5px; color: var(--citi-color-muted); margin: 0; }
.citi_doc_note {
  text-align: center; margin-top: 8px; padding: 20px; background: var(--citi-blue-50);
  border-radius: 12px; color: var(--citi-color-body);
}
.citi_doc_note a { color: var(--citi-color-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-color-ink); margin: 34px 0 14px; line-height: 1.3; }
.pxn_page_content h3 { font-size: 19px; color: var(--citi-color-ink); margin: 26px 0 10px; }
.pxn_page_content p { color: var(--citi-color-body); line-height: 1.8; margin: 0 0 16px; }
.pxn_page_content ul, .pxn_page_content ol { color: var(--citi-color-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-color-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-color-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-color-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: 10px; background: var(--citi-blue-50);
  color: var(--citi-color-brand);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
a.citi_doc:hover .citi_doc_dl { background: var(--citi-color-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: 10px; text-decoration: none; font-weight: 600;
  background: var(--citi-blue-50); color: var(--citi-color-brand);
  transition: background .2s ease, color .2s ease;
}
.citi_doc_inline:hover { background: var(--citi-color-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: 14px; 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: 14px;
  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-color-brand); outline-offset: 2px; }

/* Single / double images in a post: full width, still zoomable. */
.citi-figure { display: block; margin: 14px 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; }
.citi-figure img { display: block; width: 100%; height: auto; border-radius: 14px; }

/* ============================================================
   (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: 3px;
  background: var(--citi-color-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-color-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-color-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 */
.pxn-h1_offer_box .offer_icon,
.pxn-h1_offer_box .offer_icon i,
.pxn-h1_offer_box .offer_icon svg,
.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-color-brand) !important;
  fill: var(--citi-color-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; }
}