/* ============================================================
   NOSSA HISTÓRIA — conteúdo preservado do original.
   Ajustes: alinhamento à esquerda (o justificado criava rios),
   medida de 62ch e a citação do Seu João passando a usar a
   moldura irregular da marca.
   ============================================================ */
/* Os corações que fecham o título — estavam no Figma e eu tinha
   deixado de fora. Alinhados à linha de base do texto. */
.historia__coracoes {
  color: var(--c-laranja);
  height: .48em; width: auto; aspect-ratio: 77/56;
  margin-left: .12em; vertical-align: -.02em;
}

.historia__selo { display: block; margin: 0 auto var(--sp-lg); width: clamp(92px, 10vw, 132px); }

.historia__grid { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .historia__grid { grid-template-columns: 5fr 7fr; } }

/* quadro-h.svg: a xilogravura do casarão deixa de ser retângulo
   de cantos arredondados e passa a ter a borda irregular da marca. */
.historia__ilustra {
  clip-path: var(--shape-foto);
  overflow: hidden;
  aspect-ratio: 367 / 315;
}
.historia__ilustra picture, .historia__ilustra img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.historia__texto > p + p { margin-top: var(--sp-md); }
.historia__texto { max-width: var(--measure); text-align: left; }
.historia__texto strong { font-weight: 600; }


/* Citação do Seu João */
.citacao {
  display: grid; gap: var(--sp-md); align-items: center;
  /* max-content: a barra vermelha acompanha a frase em vez de
     esticar pela coluna inteira — e a assinatura fica alinhada
     à borda da barra, não à borda da página. */
  grid-template-columns: auto minmax(0, max-content);
  justify-content: center;
  margin-top: clamp(40px, 6vw, 72px);
}
@media (max-width: 599px) { .citacao { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.citacao picture { display: block; }
.citacao__avatar {
  width: clamp(92px, 12vw, 128px); aspect-ratio: 1; flex: none;
  clip-path: var(--shape-circulo);   /* moldura irregular da marca */
  object-fit: cover;
}
.citacao__bloco {
  max-width: 46ch;
  background: var(--c-tijolo); color: var(--c-creme);
  padding: var(--sp-md) var(--sp-xl);
  clip-path: var(--shape-citacao);   /* Vector 45.svg */
  font-size: var(--fs-lead);
}
.citacao__bloco strong { color: #fff; font-weight: 600; }
.citacao__autor {
  grid-column: 2; justify-self: end;
  /* assinatura: um degrau ABAIXO da frase, não acima dela — com
     --fs-display-md ela competia com a própria citação */
  font-family: var(--font-display); font-size: clamp(1rem, 0.86rem + 0.6vw, 1.3125rem);
  color: var(--c-texto); margin-top: var(--sp-xs);
}
@media (max-width: 599px) { .citacao__autor { grid-column: 1; justify-self: center; } }