/* ==========================================================================
   TEMA — Oficina do Nando (site de exemplo)
   Direção: industrial confiável. Nicho de foto MÉDIA: a foto da oficina
   organizada é o argumento, porque o medo do cliente é ser passado para trás
   por um lugar bagunçado.
   Referência do nicho: centros automotivos premium, onde o site vende
   transparência (orçamento antes, peça mostrada, prazo cumprido).
   ========================================================================== */

:root {
  --cor-fundo: #ffffff;
  --cor-superficie: #f2f4f5;
  --cor-escuro: #16191c;          /* grafite quase preto */
  --cor-texto: #1a1e21;
  --cor-texto-suave: #5a6167;
  --cor-borda: #e0e4e6;

  --cor-marca: #16191c;
  --cor-marca-escura: #0c0e10;
  --cor-destaque: #3f7a12;        /* verde de sinalização, escurecido p/ contraste */
  --cor-destaque-escura: #2f5c0d;
  --cor-destaque-clara: #a6e35a;  /* verde-limão, sobre o grafite */

  --fonte-titulo: "Archivo", system-ui, sans-serif;
  --fonte-corpo: "Inter", system-ui, sans-serif;
  --peso-titulo: 700;

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

h1, h2 { letter-spacing: -0.025em; text-transform: none; }

.marca-nome {
  font-family: var(--fonte-titulo);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cor-texto);
  text-transform: uppercase;
  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); }

/* Faixa diagonal de destaque, no espírito de sinalização de oficina */
.tarja-verde {
  display: inline-block;
  background: var(--cor-destaque-clara);
  color: var(--cor-escuro);
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
}

/* Serviços em lista com filete, sem card fofo */
.servico { border-top: 3px solid var(--cor-escuro); padding-top: var(--e-4); }
.servico .num {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--cor-destaque);
  display: block;
  margin-bottom: 0.35rem;
}
.superficie-escura .servico { border-top-color: var(--cor-destaque-clara); }
.superficie-escura .servico .num { color: var(--cor-destaque-clara); }

/* Compromissos numerados */
.compromissos { display: grid; gap: var(--e-6); }
.compromisso strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.2rem);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.compromisso span { color: var(--cor-texto-inverso-suave); font-size: 0.95rem; }

.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: 700; color: var(--cor-texto); min-width: 8rem; text-transform: uppercase; font-size: 0.9rem; }
.contato-dados dd { margin: 0; color: var(--cor-texto-suave); }

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