/* ===========================================================================
   Bússola 2026 · layout
   Fluxo normal, sem posicionamento absoluto. Grids que refluem sozinhos.
   =========================================================================== */

.section, .hero {
  /* o header é sticky: a âncora precisa parar abaixo dele */
  scroll-margin-top: 96px;
}

.section {
  padding-block: clamp(3rem, 8vw, 6.5rem);
}

.section--muted { background: var(--bg-muted); }
.section--dark  { background: var(--bg-dark); color: rgb(255 255 255 / 0.82); }
.section--dark h2, .section--dark h3 { color: var(--c-white); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section__head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section__head .eyebrow { margin-bottom: var(--sp-4); }
.section__head h2 { margin-bottom: var(--sp-4); }
.section--center .section__head { margin-inline: auto; text-align: center; }
.section--center .section__head p { margin-inline: auto; }

/* --- hero ---------------------------------------------------------------- */

.hero {
  background: var(--bg-brand);
  padding-block: clamp(2.5rem, 7vw, 5.5rem);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero__title {
  margin-block: var(--sp-5) var(--sp-5);
  color: var(--text-on-brand);
}

.hero__text {
  color: #4a3d05;
  font-size: var(--fs-600);
  line-height: 1.55;
  max-width: 34rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.hero__cover {
  justify-self: center;
  max-width: 320px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  rotate: -2deg;
}

@media (min-width: 56em) {
  .hero__grid { grid-template-columns: 1fr minmax(260px, 34%); }
  .hero__cover { justify-self: end; max-width: 100%; }
}

/* --- números ------------------------------------------------------------- */

.stats {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* --- grade dos eixos ------------------------------------------------------ */

.eixos {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

/* --- edições -------------------------------------------------------------- */

.edicoes {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* --- duas colunas genérico ------------------------------------------------ */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.split h2 { margin-block: var(--sp-4); }

@media (min-width: 56em) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--form { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
}