:root {
  --site-gutter: clamp(32px, 5vw, 96px);
  --site-gutter-mobile: 20px;
}

/* Uma única régua lateral para toda a página. */
.topbar,
.hero-content,
.story,
.photo-maker,
.achievements,
.campaign-gallery,
.mobilize,
footer {
  padding-left: var(--site-gutter) !important;
  padding-right: var(--site-gutter) !important;
}

/* Remove recuos internos antigos que criavam margens diferentes. */
.story-copy,
.materials-head,
.mobilize-content {
  padding-left: 0 !important;
}

.story-visual {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Índices e rótulos acompanham a mesma régua. */
.section-index,
.photo-maker .section-index,
.achievements .section-index,
.campaign-gallery .section-index {
  left: var(--site-gutter) !important;
}

/* Blocos internos usam toda a largura útil da seção. */
.story,
.photo-maker,
.achievements,
.campaign-gallery,
.mobilize {
  box-sizing: border-box !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.achievements-head,
.achievement-tabs,
.achievement-panel,
#galeria .gallery-head,
#galeria .gallery-grid.gallery-summary {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Materiais preserva o fundo próprio, mas alinha seu conteúdo. */
.integrated-materials {
  padding-left: var(--site-gutter) !important;
  padding-right: var(--site-gutter) !important;
}

@media (max-width: 720px) {
  .topbar,
  .hero-content,
  .story,
  .photo-maker,
  .achievements,
  .campaign-gallery,
  .mobilize,
  footer {
    padding-left: var(--site-gutter-mobile) !important;
    padding-right: var(--site-gutter-mobile) !important;
  }

  .section-index,
  .photo-maker .section-index,
  .achievements .section-index,
  .campaign-gallery .section-index {
    left: var(--site-gutter-mobile) !important;
  }

  .integrated-materials {
    padding-left: var(--site-gutter-mobile) !important;
    padding-right: var(--site-gutter-mobile) !important;
  }
}