/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 09 2026 | 13:14:18 */
/* ============================================================
   cp-pages-fontes.css — Guia de Fontes Abertas (cp-fon-)
   Página /fontes-abertas/ (PageFontesAbertasHelper).
   Catálogo curado + ficha em drawer canônico (cpds-drawer).
   Doc: guia-fontes-abertas.md
   ============================================================ */

/* ── Cover ── */
.cp-fon-cover {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--cp-preto, #1A1A1A);
  padding: 56px 20px 48px !important;
}
.cp-fon-cover-inner {
  max-width: var(--cp-page-max, 1100px);
  margin: 0 auto !important;
}
.cp-fon-cover-eyebrow {
  color: var(--cp-amarelo, #F7D44A) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 14px !important;
}
h1.cp-fon-cover-title {
  color: #fff !important;
  font-size: 40px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  margin: 0 0 14px !important;
}
.cp-fon-cover-deck {
  color: #d8d8dc !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  max-width: 760px;
}

/* ── Seções ── */
.cp-fon-sec {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: #fff;
  padding: 48px 20px !important;
}
.cp-fon-sec-alt { background: var(--cp-bg, #f4f4f6); }
.cp-fon-inner {
  max-width: var(--cp-page-max, 1100px);
  margin: 0 auto !important;
}
.cp-fon-sec-kicker {
  color: #8a8a92 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 8px !important;
}
h2.cp-fon-sec-title {
  color: var(--cp-preto, #1A1A1A) !important;
  font-size: 26px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  margin: 0 0 10px !important;
}
.cp-fon-sec-deck {
  color: #55555c !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 0 22px !important;
  max-width: 700px;
}

/* ── Princípios ── */
.cp-fon-princ {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cp-fon-princ-item {
  background: #fff;
  border: 1px solid #e4e4ea;
  border-radius: 14px;
  padding: 20px 18px !important;
}
.cp-fon-princ-ico i {
  font-size: 20px !important;
  color: var(--cp-preto, #1A1A1A) !important;
}
.cp-fon-princ-t {
  color: var(--cp-preto, #1A1A1A) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  margin: 10px 0 6px !important;
}
.cp-fon-princ-d {
  color: #55555c !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* ── Toolbar / busca ── */
.cp-fon-toolbar { margin: 0 0 14px !important; }
.cp-fon-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #c9c9d2;
  border-radius: 10px;
  background: #fff;
  padding: 10px 14px !important;
  max-width: 460px;
}
.cp-fon-search i { color: #9a9aa4 !important; }
.cp-fon-search input {
  border: 0;
  outline: none;
  background: transparent;
  color: var(--cp-preto, #1A1A1A) !important;
  font-size: 14.5px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  box-shadow: none;
}

/* ── Chips ── */
.cp-fon-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px !important;
}
.cp-fon-chip {
  background: #fff;
  border: 1px solid #d5d5dc;
  border-radius: 999px;
  color: #44444b !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.cp-fon-chip i { color: #8a8a92 !important; font-size: 12px !important; }
.cp-fon-chip:hover { border-color: var(--cp-preto, #1A1A1A); }
.cp-fon-chip-on {
  background: var(--cp-preto, #1A1A1A);
  border-color: var(--cp-preto, #1A1A1A);
  color: #fff !important;
}
.cp-fon-chip-on i { color: var(--cp-amarelo, #F7D44A) !important; }
.cp-fon-chip-n {
  background: rgba(0, 0, 0, .08);
  border-radius: 999px;
  font-size: 11.5px !important;
  padding: 1px 7px !important;
}
.cp-fon-chip-on .cp-fon-chip-n { background: rgba(255, 255, 255, .18); }

/* ── Contagem / lista ── */
.cp-fon-count {
  color: #8a8a92 !important;
  font-size: 12.5px !important;
  margin: 0 0 12px !important;
}
.cp-fon-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.cp-fon-loading, .cp-fon-empty {
  grid-column: 1 / -1;
  color: #77777f !important;
  font-size: 14px !important;
  padding: 26px 0 !important;
}

/* ── Card de fonte ── */
a.cp-fon-card, a.cp-fon-card:visited {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid #e4e4ea;
  border-radius: 14px;
  padding: 18px 20px !important;
  color: inherit !important;
  text-decoration: none !important;
  transition: border-color .15s, box-shadow .15s;
}
a.cp-fon-card:hover {
  border-color: var(--cp-preto, #1A1A1A);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.cp-fon-card-anti { background: #fafafc; border-style: dashed; }
.cp-fon-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.cp-fon-card-nome {
  color: var(--cp-preto, #1A1A1A) !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}
.cp-fon-card-meta {
  color: #8a8a92 !important;
  font-size: 12.5px !important;
}
.cp-fon-card-desc {
  color: #55555c !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.cp-fon-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}
.cp-fon-card-val {
  color: #6d8a4e !important;
  font-size: 12px !important;
}
.cp-fon-card-cta {
  color: var(--cp-preto, #1A1A1A) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

/* ── Pill de status ── */
.cp-fon-st {
  border-radius: 999px;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .03em;
  padding: 3px 10px !important;
  white-space: nowrap;
  flex: 0 0 auto;
}
.cp-fon-st-ok   { background: #eef6e9; color: #4a7028 !important; }
.cp-fon-st-warn { background: #fdf5e3; color: #8a6d1f !important; }
.cp-fon-st-dead { background: #f2f2f5; color: #77777f !important; }

/* ── Drawer da ficha (corpo; shell vem do cpds-drawer) ── */
.cp-fon-d-title {
  color: var(--cp-preto, #1A1A1A) !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  margin: 0 0 8px !important;
}
.cp-fon-d-meta {
  color: #8a8a92 !important;
  font-size: 13px !important;
  margin: 0 0 18px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cp-fon-d-val { color: #6d8a4e !important; font-size: 12px !important; }
.cp-fon-d-sec { margin: 0 0 18px !important; }
.cp-fon-d-sec-t {
  color: #8a8a92 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 6px !important;
}
.cp-fon-d-sec-p {
  color: #33333a !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.cp-fon-d-limites {
  border-left: 4px solid var(--cp-amarelo, #F7D44A);
  background: #fffcf0;
  border-radius: 0 10px 10px 0;
  padding: 12px 14px !important;
}
.cp-fon-d-interno {
  background: #f0f4fa;
  border: 1px solid #d4dff0;
  border-radius: 10px;
  color: #3a5578 !important;
  font-size: 13.5px !important;
  padding: 12px 14px !important;
  margin: 0 0 18px !important;
}
.cp-fon-d-interno i { margin-right: 6px; }
.cp-fon-d-rels { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-fon-d-rel {
  background: #fff;
  border: 1px solid #d5d5dc;
  border-radius: 999px;
  color: #44444b !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  cursor: pointer;
}
.cp-fon-d-rel:hover { border-color: var(--cp-preto, #1A1A1A); }
a.cp-fon-d-go, a.cp-fon-d-go:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cp-preto, #1A1A1A);
  border-radius: 9px;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 11px 18px !important;
  margin: 4px 0 0 !important;
}
a.cp-fon-d-go:hover { background: #000; }

/* ── Disclaimer ── */
.cp-fon-disclaimer {
  border-left: 4px solid var(--cp-amarelo, #F7D44A);
  background: #fffcf0;
  border-radius: 0 10px 10px 0;
  color: #55555c !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  padding: 14px 18px !important;
}
.cp-fon-disclaimer i { color: #a8892a !important; margin-right: 6px; }

/* ── Responsivo ── */
@media (max-width: 1024px) {
  .cp-fon-princ { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  h1.cp-fon-cover-title { font-size: 30px !important; }
  .cp-fon-cover { padding: 40px 16px 36px !important; }
  .cp-fon-sec { padding: 36px 16px !important; }
  .cp-fon-list { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  h1.cp-fon-cover-title { font-size: 26px !important; }
  h2.cp-fon-sec-title { font-size: 22px !important; }
  .cp-fon-princ { grid-template-columns: 1fr; }
}