/* Mesma cor nos dois lados das emendas, com fade apenas nas bordas das fotos. */
:root {
  --section-seam: #241a12;
  --section-fade-height: clamp(88px, 8vw, 128px);
}
.hero::after {
  height: var(--section-fade-height);
  background: linear-gradient(to top, var(--section-seam) 0%, rgba(36,26,18,.78) 24%, rgba(36,26,18,.25) 64%, transparent 100%);
}
.events::after,
.about::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
}
.events::after {
  background-image:
    linear-gradient(to bottom, var(--section-seam) 0 8px, rgba(36,26,18,.78) 32%, transparent 100%),
    linear-gradient(to top, var(--section-seam) 0 8px, rgba(36,26,18,.85) 40%, transparent 100%);
  background-position: top, bottom;
  background-size: 100% var(--section-fade-height);
}
.about::after {
  /* Uma camada de tamanho explícito evita emendas nas dimensões fracionárias. */
  inset: -1px 0 auto;
  height: calc(var(--section-fade-height) + 1px);
  background: linear-gradient(to bottom, var(--section-seam) 0 9px, rgba(36,26,18,.85) 40%, transparent 100%);
}
@media (max-width: 767px) {
  :root { --section-fade-height: 80px; }
}