/* ============================================================
   CORES 2026 — o site inteiro com um amarelo só
   (30/09/2026) O dono, depois de aprovar a capa em preto e branco:
   "faça com que o site inteiro fique congruente com esse tema do
   início… ainda quero o amarelo do site, só que em várias partes (o
   marca-texto, o laranja do 'Visão de negócio') é uma cor que destoa,
   não é aquele amarelo forte".
   Primeira versão foi longe demais (quase tudo cinza) e ele puxou de
   volta: "você tirou muito o amarelo das seções, por exemplo na parte
   da localização, antes estava mais bonito. Não precisa exagerar.
   Quero um site congruente."

   A REGRA (versão que ficou)
   1. Um amarelo só: #F0BB4A, o do bloco da Integração e do 65+.
   2. Os tons derivados saem: o marrom-dourado (#A87A1F, #7A5A18), o
      dourado fosco (#C99528, #B8862B) e o amarelo lavado de fundo.
      - onde eram desenho (pinos, numerais, fios, ícones, anel da
        órbita, o número grande do +400): viram o amarelo forte;
      - onde eram letra miúda sobre branco, que em amarelo não se lê
        (rótulos, a segunda voz dos títulos, categorias): viram cinza;
      - o marca-texto sobre branco vira cinza (pedido dele).
   3. Sobre os painéis escuros o amarelo já era o certo: fica como
      estava.

   Carrega por último. Só cor (e o formato do marca-texto): nenhuma
   medida de layout muda aqui.
   ============================================================ */

:root {
  --cor-marca: #F0BB4A;
  --cor-tinta: #1A1D24;
  --cor-cinza: #6B7280;          /* rótulos e segunda voz sobre branco (AA) */
  --cor-cinza-forte: #4D525C;
  --cor-marcador: #E6E9EE;       /* marca-texto sobre branco */

  /* os dois marrons-dourados de texto viram cinza em tudo o que os usa
     (--text-accent e --text-accent-hover apontam para eles); o que deve
     ser amarelo é devolvido por seletor, abaixo */
  --brand-600: var(--cor-cinza);
  --brand-700: var(--cor-cinza-forte);
}

/* ---------- 1. Rótulos sobre branco: cinza ----------
   (sobre os painéis escuros continuam amarelos, como eram) */
.eyebrow,
#artigos .ah-head .eyebrow { color: var(--cor-cinza); }
.section-dark .eyebrow,
.metodo .eyebrow,
.para-quem .eyebrow,
.cta-final .eyebrow { color: var(--cor-marca); }

/* ---------- 2. Títulos: a segunda voz é cinza, sem sublinhado ----------
   "Especialização jurídica. Visão de negócio." A cor vem do token
   (--text-accent); aqui sai o fio que se desenhava embaixo. Sobre
   preto ("diagnóstico.") a palavra continua amarela. */
.h1 .accent { background-image: none; }

/* ---------- 3. Marca-texto ----------
   Sobre branco, um bloco cinza de cantos redondos, o mesmo desenho do
   marca-texto da capa (lá, branco sobre preto). Sobre preto, o mesmo
   bloco em amarelo cheio com letra em tinta. Continua se desenhando
   da esquerda para a direita. */
.marker {
  padding: 0.06em 0.3em 0.12em;
  margin: 0 -0.06em;
  border-radius: 0.36em;
  background-image: linear-gradient(var(--cor-marcador), var(--cor-marcador));
  background-size: 100% 100%;
  background-position: 0 0;
}
.section-dark .marker {
  background-image: linear-gradient(var(--cor-marca), var(--cor-marca));
}
@media (prefers-reduced-motion: no-preference) {
  .reveal .marker { background-size: 0% 100%; }
  .reveal.visible .marker { background-size: 100% 100%; }
}
#nucleos .extrato-total .total-label .marker {
  background-image: none;
  background-color: var(--cor-marca);
  color: var(--cor-tinta);
}

/* ---------- 4. O +400 ----------
   Na faixa que abre a folha, o "+" em amarelo. Na seção de clientes,
   o número grande em amarelo, sem bloco ("tire o destaque, coloque
   apenas o número grande em destaque"). */
.folha .hp-mais { color: var(--cor-marca); }
.clientes { background-image: none; }
.clientes-num .accent { color: var(--cor-marca); }

/* ---------- 5. A órbita ----------
   O anel, o fio da praça e os ícones dos núcleos no amarelo forte (eram
   dourado fosco). Sai só o halo amarelado atrás do prédio, que sujava
   o branco. */
.pos-orbita .po-brilho {
  background: radial-gradient(closest-side, rgba(26, 29, 36, 0.13) 0 34%, transparent 58%);
}
.pos-orbita .po-anel path { stroke: var(--cor-marca); }
.pos-orbita .po-anel--tras path { stroke: rgba(240, 187, 74, 0.5); }
.pos-orbita .po-anel--frente path { stroke: var(--cor-marca); }
.pos-orbita .predio .b-praca-fio { stroke: var(--cor-marca); }
.pos-orbita .po-chip .ic { color: var(--cor-marca); }
.pos-orbita .po-nucleos li.is-frente .po-chip .ic { color: var(--cor-tinta); }
.pos-orbita .po-nucleos li.is-frente .po-chip {
  box-shadow: 0 18px 32px -18px rgba(26, 29, 36, 0.5);
}

/* ---------- 6. Unidades ----------
   Pino, "· SC / · SP" e o selo 01/02 no amarelo forte (eram marrom). O
   risquinho e a linha do hover já eram amarelos e ficam. */
.unidade-card .city .pin,
.unidade-card .city .accent { color: var(--cor-marca); }
#unidades .unidade-index {
  background: var(--cor-marca);
  color: var(--cor-tinta);
}
#unidades .phone:hover { border-color: var(--cor-tinta); }

/* ---------- 7. Miudezas sobre branco ---------- */
/* etiquetas dos artigos em tinta (eram marrom) */
#artigos .ah-nucleo { color: var(--cor-tinta); }
/* o hover dos cartões de núcleo tinha um véu amarelado */
a.ext-link:hover { background-color: rgba(26, 29, 36, 0.03); }

/* ---------- 8. Cabeçalho e utilitários ---------- */
/* A seção atual no menu é sempre um véu cinza, em qualquer fundo. O
   dono: "às vezes um está amarelo, outro está cinza… quero tudo no
   mesmo tom cinza para não ficar estranho". (Sobre branco era amarelo
   lavado; sobre preto, letra amarela.) */
#site-header#site-header .nav-list a[aria-current="page"] {
  background-color: rgba(26, 29, 36, 0.07);
  color: var(--cor-tinta);
}
#site-header#site-header.theme-dark .nav-list a[aria-current="page"] {
  background-color: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
/* no menu do celular, o mesmo: sem letra amarela na seção atual */
.mobile-menu a[aria-current="page"] { color: #FFFFFF; }
.site-header.theme-light .mobile-menu a[aria-current="page"] { color: var(--cor-tinta); }

/* barra de rolagem: o amarelo da marca, sem o degradê para o fosco */
html { scrollbar-color: var(--cor-marca) transparent; }
::-webkit-scrollbar-thumb { background: var(--cor-marca); }
::-webkit-scrollbar-thumb:hover { background: #E5AB35; }

/* foco visível sobre branco: tinta (o anel amarelo lavado sumia) */
.btn:focus-visible,
.faq-summary:focus-visible,
.article-card:focus-visible { outline-color: var(--cor-tinta); }
.section-dark .btn:focus-visible,
.cta-final .btn:focus-visible { outline-color: var(--cor-marca); }

/* órbita no celular: o número do núcleo em destaque era marrom (#8A6516) */
.pos-orbita .po-leg-num { color: var(--cor-cinza); }
