/* ==========================================================================
   ABOUT PAGE SECTION TRANSITIONS (/sobre)
   ==========================================================================
   Mesmo “fluxo elegante” da home, mas aplicado ao wrapper da página sobre.
*/

html.about-page-active .about-page-wrapper > section {
  position: relative;
  overflow: visible !important;
}

/* Conteúdo acima dos degradês */
html.about-page-active .about-page-wrapper > section > * {
  position: relative;
  z-index: 2;
}

/* Se algum section vier com Bootstrap `overflow-hidden`, não pode cortar os degradês */
html.about-page-active .about-page-wrapper > section.overflow-hidden {
  overflow: visible !important;
}

/* Top fade (todas exceto primeira) */
html.about-page-active .about-page-wrapper > section:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 90px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.40) 0%,
    rgba(255,255,255,0.18) 35%,
    rgba(255,255,255,0.06) 65%,
    transparent 100%);
}

/* Bottom fade (todas exceto última) */
html.about-page-active .about-page-wrapper > section:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 90px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(255,255,255,0.40) 0%,
    rgba(255,255,255,0.18) 35%,
    rgba(255,255,255,0.06) 65%,
    transparent 100%);
}

/* Ajuste de “combinação” (claro → claro): um pouco mais visível */
html.about-page-active .about-page-wrapper > section.section-adaptive:not(:first-child)::before,
html.about-page-active .about-page-wrapper > section.section-adaptive-alt:not(:first-child)::before {
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.62) 0%,
    rgba(255,255,255,0.28) 40%,
    rgba(255,255,255,0.10) 70%,
    transparent 100%);
}
html.about-page-active .about-page-wrapper > section.section-adaptive:not(:last-child)::after,
html.about-page-active .about-page-wrapper > section.section-adaptive-alt:not(:last-child)::after {
  background: linear-gradient(to top,
    rgba(255,255,255,0.62) 0%,
    rgba(255,255,255,0.28) 40%,
    rgba(255,255,255,0.10) 70%,
    transparent 100%);
}

/* Seções escuras na /sobre */
html.about-page-active .about-page-wrapper > section.section-adaptive.darkish::before,
html.about-page-active .about-page-wrapper > section.section-adaptive-alt.darkish::before {
  background: linear-gradient(to bottom,
    rgba(26,26,26,0.60) 0%,
    rgba(26,26,26,0.32) 38%,
    rgba(26,26,26,0.12) 68%,
    transparent 100%);
}

html.about-page-active .about-page-wrapper > section.section-adaptive.darkish::after,
html.about-page-active .about-page-wrapper > section.section-adaptive-alt.darkish::after {
  background: linear-gradient(to top,
    rgba(26,26,26,0.60) 0%,
    rgba(26,26,26,0.32) 38%,
    rgba(26,26,26,0.12) 68%,
    transparent 100%);
}

/* Mobile */
@media (max-width: 991px) {
  html.about-page-active .about-page-wrapper > section:not(:first-child)::before,
  html.about-page-active .about-page-wrapper > section:not(:last-child)::after {
    height: 60px;
  }
}