/* Instituto ALUTHA · cor de destaque de cada página (carregado por último em todas as páginas)
   Regras fixas: fundos claros em creme e branco; faixas escuras em Grafite; botão principal e números no escuro em Amarelo solar;
   faixa de parceiros em Azul céu. Cada página tem UMA cor de destaque da paleta, usada só nos detalhes
   (títulos pequenos, links, bordas de cartões, ícones e o sublinhado do menu).
   Início: Dourado · Quem somos: Azul céu · Projetos e programas: Coral · MOVA: Verde · PES: Azul céu · Voluntário: Coral · Área do(a) educador(a): Verde
   --acento = cor da paleta; --acento-txt = tom mais escuro dela, para texto no branco (contraste acima de 4,5:1); --acento-suave = fundo claro. */
:root, body.c-dourado { --acento: #E9A92B; --acento-txt: #8A5F07; --acento-suave: #FFF4D6; }
body.c-azul  { --acento: #3F97D9; --acento-txt: #1F6FAD; --acento-suave: #E8F2FB; }
body.c-coral { --acento: #EE5F3F; --acento-txt: #B83A20; --acento-suave: #FDECE7; }
body.c-verde { --acento: #1E7A5A; --acento-txt: #1E7A5A; --acento-suave: #E4F2EC; }

/* títulos pequenos e links no fundo claro */
.eyebrow { color: var(--acento-txt); }
.link-mais, .prog a.more, .join .go, .rcard .link-mais, .mcard em { color: var(--acento-txt); }
.cab-nav a[aria-current] { text-decoration-color: var(--acento); }

/* no fundo escuro (Grafite), o destaque é sempre o Amarelo solar */
.sec-navy .eyebrow, .pg-hero .eyebrow, .pandemic .eyebrow, .numbers .num-tit, .rcard.destaque .link-mais, .pes-card.escuro .eyebrow { color: var(--sun); }

/* cartões e etiquetas */
.rcard .tag { background: var(--acento-suave); color: var(--acento-txt); }
.rcard .ico, .pes-card .ico, .class .pin { background: var(--acento-suave); }
.rcard.destaque .tag { background: rgba(255,255,255,.16); color: #fff; }
.rcard.destaque .ico { background: rgba(255,255,255,.14); }
.mcard, .mcard.m-gold, .mcard.m-leaf, .mcard.m-sky, .mcard.m-coral { --b: var(--acento); --c: var(--acento-txt); }
.join.j1, .join.j2, .join.j3 { border-top-color: var(--acento); }
.prog, .prog.partner, .prog.cause { border-top-color: var(--acento); }
.status.on { background: var(--acento-suave); color: var(--acento-txt); }
.month .m { color: var(--acento-txt); }
.month .tagp { background: var(--acento-suave); }
.pen-body .of { color: var(--acento-txt); }
.pencinha-intro, .name-origin { background: var(--acento-suave); }
.concept { border-color: var(--acento); }
.mvv h3 i { background: var(--acento) !important; } /* as três bolinhas (missão, visão, valores) na mesma cor */
.class .time { color: var(--acento-txt); }
.selos b { color: var(--acento-txt); }
.cert .badge { background: var(--acento-suave); color: var(--acento-txt); border-color: var(--acento); }
.stop .year { color: var(--acento-txt); }
.stop .dot { border-color: var(--acento); }
.stop.win .dot { border-color: var(--acento); background: var(--acento-suave); }
.street::before { background: repeating-linear-gradient(var(--acento) 0 18px, transparent 18px 30px); }