/* Vértice Engenharia — azul-petróleo, cantos retos, ar industrial. */

:root {
  --marca: #0e6b7d;
  --marca-escura: #0a4e5c;
  --marca-fraca: #e4f2f4;
  --tinta: #10181c;
  --tinta-2: #44555c;
  --tinta-3: #728389;
  --fundo-2: #f3f7f8;
  --linha: #dde7e9;
  --raio: 6px;
  --raio-g: 10px;
  --raio-p: 4px;
  --peso-titulo: 750;
  --tracking-titulo: -.025em;
}

.capa-arte svg { width: 100%; height: auto; }
@media (max-width: 899px) { .capa-arte { order: -1; max-width: 420px; } }

/* Lista de etapas numerada com o número desenhado, não o marcador padrão. */
.passos {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  counter-reset: passo;
}
.passos li {
  counter-increment: passo;
  position: relative;
  padding-left: 46px;
  margin-bottom: 18px;
  font-size: 15px;
}
.passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: -1px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--marca);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.passos strong { color: var(--tinta); }

.depoimento { margin: 0; }
.depoimento p { font-size: 15.5px; color: var(--tinta-2); }
.depoimento footer { margin-top: 18px; display: grid; gap: 2px; }
.depoimento strong { color: var(--tinta); font-size: 15px; }
.depoimento span { font-size: 13px; color: var(--tinta-3); }

.chamada {
  background: var(--tinta);
  color: rgba(255, 255, 255, .72);
}
.chamada h2 { color: #fff; }
.chamada .subtitulo { color: rgba(255, 255, 255, .66); }

/* ---- páginas internas ---- */

.capa-interna {
  background: var(--fundo-2);
  border-bottom: 1px solid var(--linha);
  padding-block: clamp(44px, 6vw, 72px);
}
.capa-interna .caminho {
  font-size: 13px;
  color: var(--tinta-3);
  margin-bottom: 14px;
}
.capa-interna h1 { margin-bottom: 14px; }

.servico {
  display: grid;
  gap: 28px;
  padding-block: clamp(36px, 5vw, 56px);
  border-bottom: 1px solid var(--linha);
}
@media (min-width: 880px) { .servico { grid-template-columns: 300px 1fr; gap: 56px; } }
.servico:last-child { border-bottom: 0; }
.servico h3 { margin-bottom: 10px; }
.servico__marca { font-size: 13px; font-weight: 650; color: var(--marca); letter-spacing: .1em; text-transform: uppercase; }
.servico__lista { columns: 2; column-gap: 32px; font-size: 15px; }
@media (max-width: 620px) { .servico__lista { columns: 1; } }

.pessoa { text-align: center; }
.pessoa__foto {
  width: 96px; height: 96px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--marca-fraca);
  color: var(--marca-escura);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.pessoa h3 { font-size: 17px; margin-bottom: 2px; }
.pessoa span { font-size: 13.5px; color: var(--tinta-3); }

.linha-tempo { list-style: none; padding: 0; margin: 0; }
.linha-tempo li {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 20px;
  padding-bottom: 26px;
  border-left: 2px solid var(--linha);
  margin-left: 8px;
  padding-left: 24px;
}
.linha-tempo li:last-child { padding-bottom: 0; }
.linha-tempo b { color: var(--marca); font-size: 15px; }
.linha-tempo p { font-size: 15px; margin: 0; }

.contato-grade { display: grid; gap: clamp(32px, 5vw, 56px); }
@media (min-width: 900px) { .contato-grade { grid-template-columns: 1fr 380px; } }
.bloco-contato {
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 26px;
}
.bloco-contato h4 { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 8px; }
.bloco-contato p { font-size: 15px; margin-bottom: 22px; }
.bloco-contato p:last-child { margin-bottom: 0; }