/* ==========================================================================
   TEMA — Gesso Eu Aplico
   Direção: editorial premium para acabamento de alto padrão.
   Referência do nicho: estúdios de interiores e arquitetura, onde a OBRA é a
   protagonista, com serif de caráter, paleta quente contida e muito respiro.
   A estrutura vem de base.css. Aqui só a personalidade.
   ========================================================================== */

:root {
  /* Paleta: carvão quente, creme e ouro envelhecido */
  --cor-fundo: #ffffff;
  --cor-superficie: #f7f3ec;
  --cor-escuro: #201d18;
  --cor-texto: #262219;
  --cor-texto-suave: #6b6459;
  --cor-borda: #e6dfd2;

  --cor-marca: #201d18;
  --cor-marca-escura: #14120f;
  /* dourado escurecido para passar contraste AA sobre creme/branco */
  --cor-destaque: #8c6931;
  --cor-destaque-escura: #6f5327;
  /* versão clara, para usar sobre o carvão */
  --cor-destaque-clara: #c9a262;

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

  --raio: 3px;
  --raio-g: 6px;
}

/* Serif de exibição pede um pouco mais de ar entre as linhas do título */
h1, h2 { letter-spacing: -0.015em; }

/* Detalhe da marca: itálico dourado dentro dos títulos */
.destaque-italico {
  font-style: italic;
  color: var(--cor-destaque);
}
.superficie-escura .destaque-italico { color: var(--cor-destaque-clara); }

/* Logotipo tipográfico (o cliente não enviou logo) */
.marca-nome {
  font-family: var(--fonte-titulo);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--cor-texto);
  white-space: nowrap;
}
.marca-nome em { font-style: italic; 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); }

/* Numeração dos serviços, no espírito editorial */
.servico-num {
  font-family: var(--fonte-titulo);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cor-destaque);
}

/* Faixa de prova: itens separados com respiro, centralizados */
.faixa-prova {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-4) var(--e-7);
  text-align: center;
}
.faixa-prova b {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  color: #fff;
}
.faixa-prova span { color: var(--cor-texto-inverso-suave); }

/* Diferenciais: régua dourada no topo, sem card */
.diferencial { border-top: 2px solid var(--cor-destaque); padding-top: var(--e-4); }

/* Contato: os dados 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: 7.5rem;
}
.contato-dados dd { margin: 0; color: var(--cor-texto-suave); }
.superficie-escura .contato-dados dt { color: #fff; }
.superficie-escura .contato-dados dd { color: var(--cor-texto-inverso-suave); }