/* === Paleta === */
:root{
  --mvv-brown: #7b4e27;
  --mvv-brown-2: #b07b4e;
  --mvv-ink: #2b231b;
  --mvv-card: #ffffff;
  --mvv-card-bd: #f2ebe6;
}

/* ===== HERO (texto + imagem lado a lado) ===== */
.sobre-hero{
  align-items: start;
}
.sobre-hero picture img{
  display:block;
  border-radius:16px;
}

/* ===== Linha de 3 cards “O que nos diferencia” ===== */
.features-row{
  display:grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1.25rem;
}
@media (max-width: 960px){
  .features-row{ grid-template-columns: 1fr; }
}

.feature-card{
  background: var(--mvv-card);
  border: 1px solid var(--mvv-card-bd);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  transition: box-shadow .2s ease, transform .2s ease;
}
.feature-card h4{
  margin: 0 0 .25rem;
  color: var(--mvv-brown);
  font-weight: 700;
}
.feature-card p{ margin: .25rem 0 0; color: var(--mvv-ink); }
.feature-card:hover{ box-shadow: 0 8px 22px rgba(0,0,0,.06); transform: translateY(-1px); }

/* ===== Nossos Valores (grade de 2×2 no desktop) ===== */
.values-grid{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px){ .values-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){  .values-grid{ grid-template-columns: 1fr; } }

.values-grid .value-card{
  background: var(--mvv-card);
  border: 1px solid var(--mvv-card-bd);
  border-radius: 16px;
  padding: 1rem 1.1rem;
}
.values-grid .value-card h4{
  margin: .25rem 0;
  color: var(--mvv-brown);
  font-weight: 700;
}
.values-grid .value-card p{ margin: .25rem 0 0; color: var(--mvv-ink); }

/* ===== Ajuste de respiro entre topo e “Nossos Valores” ===== */
.values-section{ padding-top: .75rem !important; }

/* ===== MVV (Missão / Visão / Valores) ===== */
.mvv-section{
  background: #fffaf6;                /* fundo suave */
  border-top: 1px solid #f0e6df;
  border-bottom: 1px solid #f0e6df;
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;

  /* espaçamento extra após MVV */
  margin-bottom: 2.5rem;
}

.mvv{
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
@media (max-width: 960px){
  .mvv{ grid-template-columns: 1fr; }
}

.mvv-card{
  background: var(--mvv-card);
  border: 1px solid var(--mvv-card-bd);
  border-radius: 16px;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

.mvv__title{
  margin: .5rem 0 .5rem;
  font-size: 1.85rem;
  color: var(--mvv-brown);
}

.mvv__text{
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--mvv-ink);
}

.mvv__icon{ margin-bottom: .35rem; }
.mvv__icon svg{ display:block; }

/* ===== Divisor ===== */
.divider{
  height: 8px;
  background: var(--mvv-brown-2);
  border-radius: 8px;
  margin: 2rem 0;
}

/* ===== Container mais largo para página sobre-nos no desktop ===== */
@media (min-width: 961px){
  .container{
    width: min(1280px, 88%) !important;
  }
}