/* ============================================================
   Container, seções, ritmo vertical, separadores
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--tight { padding-block: calc(var(--section-y) * .55); }
.section--dark  { background: var(--ink-soft); }

/* Empilhamento genérico com controle de espaço via --stack */
.stack > * + * { margin-top: var(--stack, 1rem); }

/* Separador emblemático: linha dourada com estrela+lua no centro */
.emblem-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  color: var(--gold);
  margin-block: clamp(2.5rem, 6vw, 4rem);
}
.emblem-divider::before,
.emblem-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft) 40%, var(--gold-soft) 60%, transparent);
  opacity: .35;
  max-width: 140px;
}
.emblem-divider__mark {
  width: 34px;
  height: 34px;
  color: var(--gold);
  opacity: .9;
}

/* Grid genérico responsivo (usado em serviços, depoimentos, etapas) */
.grid {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
}
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Cabeçalho de seção padrão */
.section-head {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head h2 { margin-bottom: 1rem; }
.section-head p {
  color: var(--cream-mute);
  font-size: var(--size-lead);
}

/* Reveal on scroll — controlado por JS via IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}