/* ============================================================
   ContoPay — Centro de ayuda (Zoho Desk) — Tema de marca
   Fuentes:  Chopin (títulos) · Banter Grotesk (cuerpo)
   Paleta:   #154f91 primario · #20bced cielo (acento/hover)
             #aee6ff pastel · #eef4ff/#d5e3ff suaves · #2a3b4d tinta
   Naranja:  SOLO para CTA (no se usa en el portal de ayuda)
   ============================================================ */

/* ---------- 1. Fuentes de marca (contopay.lat, con CORS) ---------- */
@font-face {
  font-family: 'Chopin';
  font-style: normal; font-weight: 600 700; font-display: swap;
  src: url('https://www.contopay.lat/fonts/chopin-semibold.woff2') format('woff2');
}
@font-face {
  font-family: 'Banter Grotesk';
  font-style: normal; font-weight: 400 500 600 700; font-display: swap;
  src: url('https://www.contopay.lat/fonts/banter-grotesk-medium.woff2') format('woff2');
}

/* ---------- 2. Base: todo el portal en Banter Grotesk ---------- */
.html {
  font-family: 'Banter Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 100%; letter-spacing: .1px; line-height: 1.6; transition: all 50ms ease;
}

/* ---------- 3. Todos los títulos/encabezados -> Chopin ---------- */
h1, h2, h3,
.Header__searchTitle,
.KbDetailLtContainer__detailHeader,
.TOCContainer__tocHeading,
.ListHeader__linkText {
  font-family: 'Chopin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ---------- 4. Color de marca unificado (#154f91) ---------- */
.Icon__brand             { color: #154f91; }
.commonStyle__zt3BrandBg { background-color: #154f91; }

/* ---------- 5. Cabecera / hero + navegación + búsqueda ---------- */
.Header__logo img { max-height: 10rem; max-width: 13.5rem; min-height: auto; display: block; }
.Header__searchTitle { color: #154f91; }
.Header__description { color: #5b7088; }
.Header__menuList { font-weight: 400; text-transform: uppercase; font-size: 10px; line-height: 1em; letter-spacing: 0; }
.Header__tabsTab:hover { color: #20bced !important; }
.Input__headerSearch:focus { border-color: #154f91 !important; }

/* ---------- 6. Migas de pan (breadcrumbs) ---------- */
.BreadCrumbs__breadCrumbsLink       { color: #2a3b4d; }
.BreadCrumbs__breadCrumbsLink:hover { color: #20bced !important; }

/* ---------- 7. Índice del artículo ("En esta página") ---------- */
.TOCContainer__tocHeading                     { color: #154f91; }
.TOCContainer__tocRight .Menu__menuItem       { color: #2a3b4d; }
.TOCContainer__tocRight .Menu__menuItem:hover { color: #20bced !important; }

/* ---------- 8. Encabezados de sección + lista de artículos ---------- */
.ListHeader__linkText        { color: #154f91; }
.ContentList__listLink       { color: #154f91; }
.ContentList__listLink:hover { color: #20bced !important; text-decoration: underline; }

/* ---------- 9. Estados "activo/actual" (índice + lista): cielo + negrita, bien visible ---------- */
.Link__active,
.ContentList__activeLink {
  color: #20bced !important;
  font-weight: 700 !important;
}

/* ---------- 10. Etiquetas (tags) como pastillas de marca ---------- */
.Tag__tag {                          /* quita el chip GRIS por defecto de Zoho */
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}
.Tag__tagLink {
  color: #154f91 !important; background: #eef4ff;
  border-radius: 999px; padding: 3px 12px; text-decoration: none;
}
.Tag__tagLink:hover { background: #d5e3ff; }

/* ---------- 11. Botones de marca (azul primario) ---------- */
.Button__primaryBorder       { color: #154f91 !important; border-color: #154f91 !important; }
.Button__primaryBorder:hover { background: #154f91 !important; color: #fff !important; }
.Button__footerBtn           { background: #154f91 !important; border-color: #154f91 !important; }
.Button__footerBtn:hover     { background: #0f3f74 !important; }

/* ---------- 12. Barra de progreso de lectura (solo el relleno en azul) ---------- */
.Readingprogress__progressBar       { background: #154f91 !important; }
.Readingprogress__progressContainer { background: transparent !important; }

/* ---------- 13. Bloque "¿Útil?" (feedback) ---------- */
.KbDetailLtContainer__review button       { border-color: #154f91 !important; color: #154f91 !important; }
.KbDetailLtContainer__review button:hover { background: #154f91 !important; color: #fff !important; }

/* ---------- 14. Selección de texto + pie de página ---------- */
::selection               { background: #d5e3ff; }
.Footer__footerLink:hover { color: #20bced !important; }

/* ============================================================
   15. ARTÍCULOS (KB) — refuerzo de fuentes/color con !important
   ============================================================ */
.KbDetailLtContainer__articleContent,
.KbDetailLtContainer__articleContent p,
.KbDetailLtContainer__articleContent li,
.KbDetailLtContainer__articleContent div,
.KbDetailLtContainer__articleContent span,
.ArticleDetail_description,
.ArticleDetail_description p,
.ArticleDetail_description li,
.ArticleDetail_description div,
.ArticleDetail_description span {
  font-family: 'Banter Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.KbDetailLtContainer__articleContent h1,
.KbDetailLtContainer__articleContent h2,
.KbDetailLtContainer__articleContent h3,
.ArticleDetail_description h1,
.ArticleDetail_description h2,
.ArticleDetail_description h3 {
  font-family: 'Chopin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.KbDetailLtContainer__articleContent a,
.ArticleDetail_description a { color: #154f91 !important; }