/* Pagina Quem somos (/empresa/quem-somos/).
   Vai em wp-content/themes/acr/assets/css/pages/empresa-quem-somos.css

   Faixas, rotulo, H2, lead, botoes, split, lista com marcador, moldura de
   imagem, hero, faixa de numeros e fechamento vem do acr-base.css.
   Aqui fica so o que e exclusivo desta pagina. */

/* ---------- Proposito ---------- */

.acr-proposito {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--acr-s3);
  margin-top: var(--acr-s4);
}
.acr-proposito__item {
  padding: var(--acr-s4);
  border-radius: var(--acr-radius);
  background: var(--acr-card-escuro);
  border: 1px solid var(--acr-filete-escuro);
}
.acr-proposito__titulo {
  margin: 0 0 10px;
  font-size: var(--acr-t-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--acr-offwhite);
}
.acr-proposito__texto {
  font-size: var(--acr-t-sm);
  line-height: 1.7;
  color: var(--acr-corpo-escuro);
}

/* ---------- Valores ---------- */

.acr-valores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--acr-s2);
  margin-top: var(--acr-s4);
}
.acr-valor {
  display: flex;
  flex-direction: column;
  padding: var(--acr-s3);
  border-radius: var(--acr-radius-sm);
  border: 1px solid var(--acr-filete-claro);
  background: var(--acr-card-claro);
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.acr-valor:hover {
  border-color: var(--acr-periwinkle);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(12, 18, 56, 0.10);
}
.acr-valor__n {
  margin-bottom: 12px;
  font-size: var(--acr-rotulo);
  font-weight: 800;
  letter-spacing: var(--acr-rotulo-track);
  color: var(--acr-acento);
  line-height: 1;
}
.acr-valor__titulo {
  margin: 0 0 8px;
  font-size: 0.97rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--acr-titulo-claro);
}
.acr-valor__texto {
  font-size: var(--acr-t-sm);
  line-height: 1.6;
  color: var(--acr-corpo-claro);
}

/* ---------- Galeria de infraestrutura ---------- */

.acr-galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--acr-s3);
  margin-top: var(--acr-s4);
}
.acr-galeria figure { margin: 0; }
.acr-galeria img { aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Ponte para Onde estamos ---------- */

.acr-ponte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--acr-s3) var(--acr-s4);
  padding: var(--acr-s4);
  border-radius: var(--acr-radius);
  border: 1px solid var(--acr-filete-claro);
  background: var(--acr-card-claro);
}
.acr-ponte__texto { max-width: 52ch; }
.acr-ponte .acr-h2 { margin-bottom: 8px; }

/* ---------- Responsivo ---------- */

@media (max-width: 1023px) {
  .acr-valores { grid-template-columns: repeat(2, 1fr); }
  .acr-galeria { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .acr-proposito { grid-template-columns: 1fr; }
  .acr-valores { grid-template-columns: 1fr; }
  .acr-galeria { grid-template-columns: 1fr; }
  .acr-ponte { flex-direction: column; align-items: flex-start; }
}