:root {
  --site-teal: #2d7d8e;
  --site-teal-dark: #245f6d;
  --site-red: #c0392b;
  --site-red-dark: #a93226;
}

.site-hero {
  min-height: 60vh;
  background-size: cover;
  background-position: center;
  background-color: var(--site-teal);
  background-image: linear-gradient(135deg, var(--site-teal) 0%, var(--site-teal-dark) 100%);
}
.site-hero h1 { max-width: 18ch; }

/* Títulos de seção: vermelho + fio teal */
section h2 { font-weight: 700; color: var(--site-red); }
section h2::after {
  content: ""; display: block; width: 42px; height: 3px;
  background: var(--site-teal); margin-top: .5rem;
}

.bg-faixa { background: #fafbfb; }

/* Destaques vermelhos (mantém Fase 1) */
.text-primary { color: var(--site-red) !important; }
.btn-primary {
  --bs-btn-bg: var(--site-red); --bs-btn-border-color: var(--site-red);
  --bs-btn-hover-bg: var(--site-red-dark); --bs-btn-hover-border-color: var(--site-red-dark);
  --bs-btn-active-bg: #922b21; --bs-btn-active-border-color: #922b21;
}

/* MVV: cards vermelhos, fonte branca */
.mvv-card { background: var(--site-red); color: #fff; border-radius: 10px; }
.mvv-card h5 { color: #fff; }

/* Pílulas (governança / como atuamos) */
.pill { border: 1px solid var(--site-teal); color: var(--site-teal); border-radius: 18px; padding: .35rem .8rem; display: inline-block; }

/* Linha do tempo: horizontal no desktop, vertical no mobile */
.timeline { display: flex; gap: 1rem; overflow-x: auto; }
.timeline .marco { flex: 1 1 0; min-width: 200px; border-top: 3px solid var(--site-red); background: #fff; padding: 1rem; border-radius: 0 0 8px 8px; }
.timeline .marco .ano { color: var(--site-teal); font-weight: 800; font-size: 1.4rem; }
@media (max-width: 768px) { .timeline { flex-direction: column; } }