/* ==========================================================================
   Silvtech — Quem somos (novo design system)
   Depende de tokens.css + base.css. Só esta página usa este arquivo.
   ========================================================================== */

/* ---- Hero (tipo A) ---- */
.hero {
  padding-block: var(--esp-7) var(--respiro-secao);
}

.hero h1 {
  max-width: 16ch;
}

.hero__apoio {
  margin-top: var(--esp-4);
  max-width: 52ch;
}

/* ---- História (tipo B) ---- */
.historia {
  background: var(--cor-fundo-alt);
}

.historia p {
  max-width: 65ch;
  margin-bottom: var(--esp-3);
}

.historia p:last-child {
  margin-bottom: 0;
}

/* ---- Missão / Visão / Valores (tipo A, itens em card real) ---- */
.mvv__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-4);
}

.mvv__item {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-4);
}

.mvv__item h3 {
  margin-bottom: var(--esp-2);
}

.mvv__item p {
  color: var(--cor-neutro);
}

.mvv__item ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.mvv__item li {
  color: var(--cor-neutro);
}

.mvv__item li strong {
  color: var(--cor-texto);
}

@media (min-width: 1024px) {
  .mvv__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--esp-5);
  }
}

/* ---- Metodologia (tipo B, resumo, sem duplicar a página) ---- */
.metodologia-resumo {
  background: var(--cor-fundo-alt);
}

.metodologia-resumo p {
  max-width: 60ch;
}

.metodologia-resumo__link {
  margin-top: var(--esp-4);
  display: inline-flex;
}

/* ---- CTA final ---- */
.cta-final {
  background: var(--cor-acento);
  color: var(--cor-fundo);
}

.cta-final h2,
.cta-final p {
  color: var(--cor-fundo);
}

.cta-final__inner {
  max-width: 60ch;
}

.cta-final p {
  margin-top: var(--esp-3);
  opacity: 0.85;
}

.cta-final .btn {
  margin-top: var(--esp-5);
}

.cta-final .btn--primario {
  background: var(--cor-fundo);
  color: var(--cor-acento);
}