/* ==========================================================================
   TEMA — Bastos & Ferraz Advocacia (site de exemplo)
   Direção: editorial sóbrio. Nicho de foto BAIXA: a confiança vem da
   tipografia, da hierarquia e da clareza, não de imagem.
   Referência do nicho: bancas tradicionais e escritórios internacionais,
   onde o site parece um documento bem impresso.
   ========================================================================== */

:root {
  --cor-fundo: #fbfaf7;
  --cor-superficie: #f2efe8;
  --cor-escuro: #10302b;          /* verde-petróleo profundo */
  --cor-texto: #1c2a27;
  --cor-texto-suave: #5c6a66;
  --cor-borda: #e0dbd0;

  --cor-marca: #10302b;
  --cor-marca-escura: #0a201c;
  --cor-destaque: #8a6a2f;        /* latão escurecido, passa contraste no claro */
  --cor-destaque-escura: #6d5325;
  --cor-destaque-clara: #d0b578;  /* latão claro, para o fundo escuro */

  --fonte-titulo: "Lora", Georgia, serif;
  --fonte-corpo: "Inter", system-ui, sans-serif;
  --peso-titulo: 500;

  --raio: 2px;
  --raio-g: 4px;
}

h1, h2 { letter-spacing: -0.005em; }

.marca-nome {
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cor-texto);
  white-space: nowrap;
}
.marca-nome em { font-style: normal; color: var(--cor-destaque); }
.superficie-escura .marca-nome,
.rodape .marca-nome { color: #fff; }
.superficie-escura .marca-nome em,
.rodape .marca-nome em { color: var(--cor-destaque-clara); }

/* Régua fina, no espírito de documento */
.regua { width: 64px; height: 2px; background: var(--cor-destaque); margin-bottom: 1.4rem; }
.superficie-escura .regua { background: var(--cor-destaque-clara); }

/* Áreas de atuação: lista numerada com filete, sem card pesado */
.area { border-top: 1px solid var(--cor-borda); padding-top: 1.2rem; }
.area .num {
  font-family: var(--fonte-titulo);
  font-size: 0.95rem;
  color: var(--cor-destaque);
  display: block;
  margin-bottom: 0.4rem;
}

/* Números de credibilidade */
.credenciais { display: grid; gap: var(--e-6); }
.credencial strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  color: #fff;
  font-weight: 500;
}
.credencial span { color: var(--cor-texto-inverso-suave); font-size: 0.95rem; }

/* Contato em linhas legíveis, sem caixa dentro de caixa */
.contato-dados { display: grid; gap: var(--e-4); }
.contato-dados div { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }
.contato-dados dt {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  color: var(--cor-texto);
  min-width: 8rem;
}
.contato-dados dd { margin: 0; color: var(--cor-texto-suave); }

@media (min-width: 760px) { .credenciais { grid-template-columns: repeat(3, 1fr); } }