/* =========================================================
   Sobre — conteúdo do diálogo institucional.
   A casca do modal vive em components/dialog.css.

   Copy à esquerda, grade 2×2 de princípios à direita.
   ========================================================= */
.about__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: start;
  gap: 44px;
}

/* O título da seção vive no cabeçalho do diálogo; aqui é só o texto. */
.about__copy p {
  margin: 0 0 16px;
  color: var(--text-soft);
  font-size: .95rem;
  line-height: 1.68;
}

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

.about__principles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.principle {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .022);
  transition: border-color var(--ease);
}

.principle:hover {
  border-color: rgba(245, 168, 0, .3);
}

.principle__mark {
  display: block;
  color: var(--gold);
  font-size: .9rem;
  line-height: 1;
}

.principle h3 {
  margin: 16px 0 9px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.principle p {
  margin: 0;
  color: var(--text-soft);
  font-size: .875rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (max-width: 620px) {
  .about__principles {
    grid-template-columns: 1fr;
  }
}