/* Origem (Figma: Sobre 339:987 / Sessão origem, 510:4125 — faixa de 548px
   com o conteúdo a 139px de cada borda: eyebrow+título à esquerda
   (552px), texto de 630px à direita, 20px de vão). */

.origem {
  padding: 56px 0;
  background: var(--color-bg-band);
}
@media (min-width: 1024px) {
  .origem { padding: 139px 0; }
}

.origem-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 1024px) {
  .origem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* O eyebrow fica 18px abaixo do topo do texto da direita (3247 vs 3229). */
@media (min-width: 1024px) {
  .origem-heading { padding-top: 18px; }
}
.origem-heading h2 { max-width: 552px; text-wrap: wrap; }

.origem-text { margin: 0; max-width: 630px; font-size: 16px; line-height: 1.5; }
@media (min-width: 768px) {
  .origem-text { font-size: 18px; }
}
.origem-text p { margin: 0; font-size: inherit; line-height: inherit; }
/* Parágrafo em branco entre os dois (uma linha de 27px). */
.origem-text p + p { margin-top: 27px; }

/* Entrada animada ao rolar: título e texto sobem em sequência. */
.origem-heading,
.origem-text {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.origem-text { transition-delay: 0.15s; }
.origem-heading.is-visible,
.origem-text.is-visible { opacity: 1; transform: none; }
html:not(.js) .origem-heading,
html:not(.js) .origem-text { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .origem-heading, .origem-text { opacity: 1; transform: none; transition: none; }
}