/* ============================================================
   HORST & CO. — ESTILOS ESPECÍFICOS
   Páginas: escritorio.html e contato.html
   Carregado DEPOIS de assets/css/style.css — usa as mesmas
   variáveis e classes já definidas lá (.nav, .label, .section,
   .sobre, .numeros, .processo-grid, .depoimento, .contato,
   .footer-base, .rodape-fino, .logo-fixo, .reveal...).
   ============================================================ */

/* ---------- espaço para a nav fixa não cobrir o conteúdo ---------- */
.escritorio-topo {
  padding-top: 120px;
}

/* ---------- títulos de seção (label + h2 centralizados) ---------- */
.section-title h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(26px, 3vw, 38px);
  color: var(--leather);
  margin-top: 16px;
}

/* ---------- serviços (variação do visual de .processo-grid) ---------- */
.servicos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
  max-width: 1440px;
  margin: 0 auto;
}

.servico {
  padding: clamp(32px, 4vw, 48px) clamp(26px, 3vw, 36px);
  border: 1px solid rgba(163, 150, 141, 0.35);
  background: var(--white);
  transition: border-color 0.4s, transform 0.4s var(--ease);
}

.servico:hover {
  border-color: var(--taupe);
  transform: translateY(-4px);
}

.servico h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 25px);
  color: var(--leather);
  margin-bottom: 14px;
}

.servico p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--cacao);
  max-width: 40ch;
}

/* seção de serviços no mesmo fundo do site (pedido do Igor) */
.servicos {
  background: var(--pearl);
}

/* ---------- página de contato — ocupa a altura da tela com elegância ---------- */
.contato-pagina {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(140px, 16vw, 180px);
}

.contato-pagina .contato-grid {
  padding-bottom: clamp(60px, 8vw, 110px);
}

.contato-pagina .footer-base {
  margin-top: auto;
}

/* logo fixo precisa de contraste sobre o fundo escuro da página de contato */
body.pagina-contato .logo-fixo img {
  filter: invert(1);
  opacity: 0.8;
}

/* ---------- responsivo ---------- */
@media (max-width: 820px) {
  .servicos-grid { grid-template-columns: 1fr; }
  .escritorio-topo { padding-top: 100px; }
  .contato-pagina { padding-top: 120px; }
}

/* ---------- processo com 10 etapas (texto da arquiteta) ---------- */
.processo-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 0 0;
}

.processo-grid .passo {
  border-left: 1px solid rgba(163, 150, 141, 0.35);
  border-bottom: 1px solid rgba(163, 150, 141, 0.18);
  padding-left: clamp(18px, 2vw, 32px);
}

.processo-grid .passo h3 { font-size: clamp(18px, 1.6vw, 22px); }

.processo-grid .passo p { font-size: 17px; line-height: 1.7; }

@media (max-width: 820px) {
  .processo-grid { grid-template-columns: 1fr; }
  .processo-grid .passo { border-left: none; padding-left: 0; }
}


/* alinhamento uniforme — o 1º bloco segue o mesmo recuo dos demais */
.processo-grid .passo:first-child {
  border-left: 1px solid rgba(163, 150, 141, 0.35);
  padding-left: clamp(18px, 2vw, 32px);
  padding-top: clamp(30px, 4vw, 56px);
}