/* ============================================================================
   Variações de cor por página, sempre dentro da paleta da AZN.
   A página bancária usa o tema padrão (base.css). As demais ativam um tema
   com uma classe no <body> (ex.: tema-trabalhista).
   ============================================================================ */

/* ── Trabalhista: azul-escuro como cor dominante ──────────────────────────── */
/* Sequência das seções: azul (abertura) → névoa (atuação) → azul (como funciona)
   → branco (escritório) → azul (rodapé). */
.tema-trabalhista {
  --tema-fundo: #1C2536;
  --tema-fundo-funda: #141B28;
  --tema-linha-escura: rgba(217, 188, 148, 0.25);
}
.tema-trabalhista .topo,
.tema-trabalhista .timbre,
.tema-trabalhista .rodape { background: var(--tema-fundo); }

.tema-trabalhista .abertura h1 { max-width: 18ch; font-weight: 700; letter-spacing: -0.015em; }

.tema-trabalhista .secao h2 { color: var(--tema-fundo); }

/* Atuação em névoa, cartões brancos com filete azul */
.tema-trabalhista .secao--apos-timbre { background: var(--nevoa); }
.tema-trabalhista .atuacao-cartao {
  background: var(--papel);
  border-top: 3px solid var(--tema-fundo);
}
.tema-trabalhista .atuacao-cartao h3 { color: var(--tema-fundo); }

/* "Como funciona" em azul-escuro, texto claro e detalhes em champanhe */
.tema-trabalhista .secao--nevoa {
  background: var(--tema-fundo);
  color: var(--sobre-ardosia);
}
.tema-trabalhista .secao--nevoa h2 { color: var(--papel); }
.tema-trabalhista .secao--nevoa .secao-intro { color: var(--sobre-ardosia-suave); }
.tema-trabalhista .secao--nevoa .etapas li { border-top-color: var(--champanhe); }
.tema-trabalhista .secao--nevoa .etapas li::before { color: var(--champanhe); }
.tema-trabalhista .secao--nevoa .etapas h3 { color: var(--papel); }
.tema-trabalhista .secao--nevoa .etapas p { color: var(--sobre-ardosia-suave); }
.tema-trabalhista .secao--nevoa .limites {
  background: var(--tema-fundo-funda);
  border-left-color: var(--champanhe);
}
.tema-trabalhista .secao--nevoa .limites h3 { color: var(--papel); }
.tema-trabalhista .secao--nevoa .limites p { color: var(--sobre-ardosia); }
.tema-trabalhista .secao--nevoa :focus-visible { outline-color: var(--champanhe); }

/* O escritório em branco, com filetes e rótulos puxando para o azul */
.tema-trabalhista .secao--escritorio { background: var(--papel); }
.tema-trabalhista .ficha,
.tema-trabalhista .ficha > div { border-color: rgba(28, 37, 54, 0.18); }
.tema-trabalhista .ficha dd { color: var(--tema-fundo); }