/* Menu Artigos do Portal Leadlovers 2026.

   Uma pauta de trinta artigos não comporta o bloco de identidade repetido em
   cada página: os tokens da marca e os componentes de leitura moram aqui, e a
   página gerada carrega só o que é dela. A página hospedeira continua sobre a
   base estrutural de /assets/geo-design.css.

   Rosa/carmim = ação e destaque · Navy = âncora institucional
   Dourado = prova e prática de ouro · Neutro = ausência de recurso */

:root {
  --ll: #DD235B;
  --ll-ink: #B01A47;
  --ll-ink-strong: #8A1338;
  --ll-soft: #FCE4EC;
  --ll-hover: rgba(221, 35, 91, 0.08);
  --ll-navy: #1E2365;
  --ll-navy-soft: #E8EAF6;
  --ll-navy-head: #1E2365;
  --gold: #C8962C;
  --gold-ink: #8A6516;
  --gold-ink-strong: #75570F;
  --gold-soft: #F7EED9;
  --green-soft: #E3F3E8;
  --green-ink: #14532D;
  --neutral-soft: #EEF0F4;
  --neutral-ink: #464D5E;
  --ll-line: rgba(30, 35, 101, 0.14);
  --ll-surface: #ffffff;
  --ll-border: #e5e5e5;
  --color-brand: var(--ll-ink);
  --color-brand-light: var(--ll-soft);
  --color-brand-dark: var(--ll-ink);
}

/* O tema escuro do portal troca os tokens que a página consome; os que só
   servem de fundo claro continuam definidos acima, e é de propósito: quem os
   usa como TINTA no escuro derruba o contraste, então cada componente abaixo
   declara a sua cor de texto por extenso. */
:root[data-theme="dark"] {
  --ll-soft: rgba(221, 35, 91, 0.16);
  --ll-navy-soft: rgba(120, 132, 214, 0.16);
  --gold-soft: rgba(200, 150, 44, 0.16);
  --green-soft: rgba(20, 83, 45, 0.22);
  --neutral-soft: rgba(148, 163, 184, 0.14);
  --neutral-ink: #C3CBDA;
  --ll-line: rgba(148, 163, 184, 0.28);
  --ll-surface: #131722;
  --ll-ink: #FF8FB0;
  --ll-ink-strong: #FFB3C8;
  --gold-ink: #E7C06A;
  --gold-ink-strong: #F0D28F;
  --green-ink: #8FD9AC;
  --ll-navy-head: #AEB8F0;
}

/* ---- cabeçalho do artigo ---- */
.lla-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--ll-soft);
  color: var(--ll-ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lla-eyebrow .geo-icon { width: 15px; height: 15px; }
.lla-sub {
  margin: 0.2rem 0 1rem;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--neutral-ink);
}
.lla-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0 0 1.6rem;
  padding: 0.7rem 0 0;
  border-top: 1px solid var(--ll-line);
  font-size: 0.85rem;
  color: var(--neutral-ink);
}
.lla-ficha span { display: inline-flex; align-items: center; gap: 0.35rem; }
.lla-ficha .geo-icon { width: 15px; height: 15px; color: var(--ll-ink); }

/* ---- caixas de apoio ---- */
.lla-caixa {
  margin: 1.6rem 0;
  padding: 1.05rem 1.2rem;
  border-radius: 12px;
  border: 1px solid var(--ll-line);
  border-left: 4px solid var(--ll);
  background: var(--ll-surface);
}
.lla-caixa > :first-child { margin-top: 0; }
.lla-caixa > :last-child { margin-bottom: 0; }
.lla-caixa h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ll-navy-head);
}
.lla-caixa--conta { border-left-color: var(--gold); background: var(--gold-soft); }
.lla-caixa--conta h3 { color: var(--gold-ink-strong); }
.lla-caixa--limite { border-left-color: var(--neutral-ink); background: var(--neutral-soft); }
.lla-caixa--limite h3 { color: var(--neutral-ink); }
.lla-caixa--decisao { border-left-color: var(--green-ink); background: var(--green-soft); }
.lla-caixa--decisao h3 { color: var(--green-ink); }

/* ---- número em destaque ---- */
.lla-numeros {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
}
.lla-numeros li {
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--ll-line);
  background: var(--ll-surface);
}
.lla-numeros strong {
  display: block;
  font-size: 1.75rem;
  line-height: 1.1;
  font-weight: 800;
  color: var(--ll-ink);
  font-variant-numeric: tabular-nums;
}
.lla-numeros span { display: block; margin-top: 0.3rem; font-size: 0.88rem; color: var(--neutral-ink); }

/* ---- lista de execução ---- */
.lla-passos { margin: 1.4rem 0; padding-left: 0; list-style: none; counter-reset: passo; }
.lla-passos li {
  position: relative;
  margin: 0 0 0.9rem;
  padding-left: 2.6rem;
  counter-increment: passo;
}
.lla-passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ll-navy);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .lla-passos li::before { background: var(--ll); color: #14161f; }

/* ---- fontes datadas ---- */
.lla-fontes { margin: 1.2rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; color: var(--neutral-ink); }
.lla-fontes li { margin-bottom: 0.5rem; }

/* ---- índice do bloco e navegação entre artigos ---- */
.lla-bloco-lista { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: 0.85rem; }
.lla-bloco-lista > li {
  padding: 0.95rem 1.1rem;
  border-radius: 12px;
  border: 1px solid var(--ll-line);
  background: var(--ll-surface);
}
.lla-bloco-lista a { font-weight: 700; text-decoration: none; }
.lla-bloco-lista a:hover { text-decoration: underline; }
.lla-bloco-lista p { margin: 0.35rem 0 0; font-size: 0.92rem; color: var(--neutral-ink); }

.lla-paginacao {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  align-items: stretch;
  gap: 0.8rem;
  margin: 2.4rem 0 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--ll-line);
}
.lla-paginacao a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--ll-line);
  background: var(--ll-surface);
  text-decoration: none;
}
.lla-paginacao a:hover { border-color: var(--ll-ink); background: var(--ll-hover); }
.lla-paginacao small { display: block; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--neutral-ink); }
.lla-paginacao strong { display: block; font-size: 0.95rem; line-height: 1.35; color: var(--ll-navy-head); }
.lla-paginacao .lla-proximo { text-align: right; justify-content: flex-end; }
.lla-paginacao .geo-icon { width: 20px; height: 20px; flex: none; color: var(--ll-ink); }
.lla-posicao {
  display: grid;
  place-items: center;
  padding: 0.75rem;
  font-size: 0.85rem;
  color: var(--neutral-ink);
}

.lla-topo { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; font-size: 0.9rem; }
.lla-topo .geo-icon { width: 17px; height: 17px; }

/* ---- hub da pauta ---- */
.lla-bloco { margin: 2.6rem 0; }
.lla-bloco-resumo { margin: 0.3rem 0 0; color: var(--neutral-ink); }
.lla-contador {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--neutral-soft);
  color: var(--neutral-ink);
  font-size: 0.78rem;
  font-weight: 800;
  vertical-align: middle;
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-llx-motion="reduce"]) .lla-paginacao a,
  html:not([data-llx-motion="reduce"]) .lla-bloco-lista > li {
    transition: border-color 140ms ease, background 140ms ease;
  }
}