/*
  História — seção CLARA editorial: fundo areia (sem foto), texto à esquerda
  (eyebrow terra + título em vinho + deck/parágrafos recuados com destaques em
  terra) e uma imagem menor no canto inferior direito.
*/
.historia {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;   /* conteúdo ancorado no topo */
  min-height: 100vh;
  padding: var(--sp-section) var(--grid-margin);
  background-color: var(--color-areia);
  color: var(--color-dark);
}

/* ── Texto (esquerda) ── */
.historia__content {
  position: relative;
  z-index: 2;
  max-width: 52vw;   /* texto chega a ~52% da tela */
}
.historia__eyebrow {
  margin: 0 0 var(--sp-6);
  color: var(--color-terra);
}
.historia__title {
  margin: 0 0 var(--sp-8);
  color: var(--color-vinho);
}
/* Deck e corpo recuados à direita do eyebrow/título (degrau editorial) */
.historia__deck {
  margin: 0 0 var(--sp-8);
  padding-left: var(--sp-16);
  color: var(--color-dark);
}
.historia__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-left: var(--sp-16);
}
.historia__body p {
  margin: 0;
  color: var(--color-dark);
}
/* Destaques em terra */
.historia__hl,
.historia__body em {
  color: var(--color-terra);
  font-style: normal;
}
.historia__body strong {
  font-weight: 700;
  color: var(--color-dark);
}

/* ── Imagem menor sobreposta (canto inferior direito) ── */
.historia__inset {
  position: absolute;
  right: var(--grid-margin);
  bottom: var(--sp-16);
  z-index: 2;
  width: 30%;
  max-width: 420px;
}
.historia__inset-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ── Responsivo ── */
@media (max-width: 1024px) {
  .historia {
    padding: var(--sp-16) var(--grid-margin);
  }
  .historia__inset {
    position: static;
    width: 60%;
    margin-top: var(--sp-12);
  }
  .historia__content {
    max-width: none;
  }
  .historia__deck,
  .historia__body {
    padding-left: 0;
  }
}