/* ============================================================================
   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); }

/* ── Tributário: tema escuro, azul nos fundos e branco como cor secundária ── */
/* Azul-marinho do briefing (#14263F) como base, alternando com tons próximos
   para separar as seções. Branco para textos, a folha da avaliação e caixas de
   destaque; champanhe só em detalhes (filetes, números). */
.tema-tributario {
  --tema-fundo: #14263F;        /* base: abertura, como funciona */
  --tema-fundo-2: #182D47;      /* seções alternadas */
  --tema-superficie: #213953;   /* cartões sobre o azul */
  --tema-fundo-funda: #0E1C30;  /* rodapé, hover do botão */
  --tema-linha: rgba(255, 255, 255, 0.12);
  --tema-texto: #FFFFFF;
  --tema-texto-suave: #BCC6D2;
  background: var(--tema-fundo);
  color: var(--tema-texto);
}
.tema-tributario :focus-visible { outline-color: var(--champanhe); }

/* Cabeçalho e abertura */
.tema-tributario .topo,
.tema-tributario .timbre { background: var(--tema-fundo); color: var(--tema-texto); }
.tema-tributario .cabecalho { border-bottom-color: var(--tema-linha); }
.tema-tributario .cabecalho-links a { color: var(--tema-texto); }
.tema-tributario .cabecalho-links a:hover { color: var(--champanhe); }

/* Papel quadriculado de documento fiscal, em linhas brancas quase invisíveis */
.tema-tributario .timbre { position: relative; }
.tema-tributario .timbre::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 2rem 2rem;
  -webkit-mask-image: linear-gradient(105deg, #000 0%, rgba(0, 0, 0, 0.4) 55%, transparent 85%);
  mask-image: linear-gradient(105deg, #000 0%, rgba(0, 0, 0, 0.4) 55%, transparent 85%);
  pointer-events: none;
}
.tema-tributario .timbre > .envoltorio { position: relative; }

/* Selo, como pede o briefing para a primeira dobra */
.tema-tributario .especialidade {
  display: inline-block;
  max-width: none;
  margin-bottom: 1.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 4px solid var(--champanhe);
  color: var(--tema-texto);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tema-tributario .abertura h1 {
  max-width: 20ch;
  color: var(--tema-texto);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.tema-tributario .apresentacao { color: var(--tema-texto-suave); }

/* Estágios de cobrança: a classificação que a avaliação usa, com filete que
   clareia do primeiro ao último estágio (sem cores de alarme) */
.tema-tributario .estagios { max-width: 34rem; margin-top: 2rem; }
.tema-tributario .estagios-titulo {
  margin-bottom: 0.75rem;
  color: var(--tema-texto-suave);
  font-size: 0.875rem;
  font-weight: 500;
}
.tema-tributario .estagios ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.25rem;
}
.tema-tributario .estagios li {
  padding: 0.625rem 0.5rem 0.5rem;
  border-top: 3px solid #FFFFFF;
  background: var(--tema-superficie);
  color: var(--tema-texto);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}
.tema-tributario .estagios li:nth-child(1) { border-top-color: #4A6380; }
.tema-tributario .estagios li:nth-child(2) { border-top-color: #6F86A0; }
.tema-tributario .estagios li:nth-child(3) { border-top-color: #97A9BD; }
.tema-tributario .estagios li:nth-child(4) { border-top-color: #C6D1DC; }
.tema-tributario .estagios li span {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--champanhe);
  font-family: var(--fonte-titulo);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Base discreta + assinatura com o selo de 23 anos */
.tema-tributario .abertura-assinatura {
  margin-top: 2rem;
  border-top-color: var(--tema-linha);
  color: var(--tema-texto-suave);
}
.tema-tributario .abertura-base {
  margin-bottom: 0.25rem;
  color: var(--tema-texto);
  font-weight: 600;
}

/* A folha continua branca: é o elemento secundário que mais se destaca */
.tema-tributario .folha { color: var(--tinta); }
.tema-tributario .folha-cabeca { border-top-color: var(--champanhe); }
.tema-tributario .folha .botao:not(.botao--secundario) { background: var(--tema-fundo); border-color: var(--tema-fundo); }
.tema-tributario .folha .botao:not(.botao--secundario):hover { background: var(--tema-fundo-funda); border-color: var(--tema-fundo-funda); }
.tema-tributario .folha :focus-visible { outline-color: var(--tema-fundo); }

/* Seções */
.tema-tributario .secao { background: var(--tema-fundo-2); border-top: 1px solid var(--tema-linha); }
.tema-tributario .secao--apos-timbre { border-top: 0; }
.tema-tributario .secao h2 { color: var(--tema-texto); }
.tema-tributario .secao-intro { color: var(--tema-texto-suave); }

/* Atuação: cartões numerados 01–04 em azul mais claro, filete champanhe */
.tema-tributario .atuacao { counter-reset: area; }
.tema-tributario .atuacao-cartao {
  counter-increment: area;
  border-top: 0;
  border-left: 3px solid var(--champanhe);
  border-radius: 0 2px 2px 0;
  background: var(--tema-superficie);
}
.tema-tributario .atuacao-cartao::before {
  content: counter(area, decimal-leading-zero);
  color: var(--champanhe);
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}
.tema-tributario .atuacao-cartao h3 { color: var(--tema-texto); }
.tema-tributario .atuacao-cartao p { color: var(--tema-texto-suave); }

/* Como funciona: volta ao azul-base; o quadro de limites é a caixa branca */
.tema-tributario .secao--nevoa { background: var(--tema-fundo); }
.tema-tributario .etapas li { border-top-color: var(--champanhe); }
.tema-tributario .etapas li::before { color: var(--champanhe); }
.tema-tributario .etapas h3 { color: var(--tema-texto); }
.tema-tributario .etapas p { color: var(--tema-texto-suave); }
.tema-tributario .limites {
  border-left-color: var(--champanhe);
  background: var(--papel);
  color: var(--tinta);
}
.tema-tributario .limites h3 { color: var(--tema-fundo); }

/* O escritório */
.tema-tributario .secao--escritorio { background: var(--tema-fundo-2); }
.tema-tributario .escritorio-texto > p,
.tema-tributario .escritorio-foto figcaption { color: var(--tema-texto-suave); }
.tema-tributario .ficha,
.tema-tributario .ficha > div { border-color: var(--tema-linha); }
.tema-tributario .ficha dt { color: var(--tema-texto-suave); }
.tema-tributario .ficha dd { color: var(--tema-texto); }

/* Rodapé no tom mais fundo */
.tema-tributario .rodape { background: var(--tema-fundo-funda); border-top: 1px solid var(--tema-linha); }

@media (max-width: 860px) {
  .tema-tributario .abertura-assinatura { display: none; }
}
@media (max-width: 560px) {
  .tema-tributario .estagios { display: none; }
}