/* ============================================================
   SECTION TRANSITIONS — Maio 2026
   Resolve cortes abruptos entre seções de cores diferentes.
   Aplica fade gradient harmônico nos limites de cada bloco.
   ============================================================ */

/* ─── Cor canônica de fundo entre seções warm ─── */
:root{
  --warm-section-bg: #100904;
  --warm-section-bg-alt: #0a0604;
}

/* ─── Page-hero (sobre/ambientes/etc) → próxima seção ─── */
.page-hero{
  position:relative;
  isolation:isolate;
}
.page-hero::after{
  content:'';
  position:absolute;
  inset-inline:0;
  inset-block-end:-1px;
  height:160px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(16,9,4,0.55) 55%,
    var(--warm-section-bg) 100%);
  pointer-events:none;
  z-index:6;
}

/* ─── Hero home (homepage) → manifesto ─── */
.hero.hero--fluid::after{
  content:'';
  position:absolute;
  inset-inline:0;
  inset-block-end:-1px;
  height:140px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(16,9,4,0.50) 55%,
    var(--warm-section-bg) 100%);
  pointer-events:none;
  z-index:7;
}

/* ─── Top fade nas seções com bg image (home-cta) ─── */
.home-cta{
  position:relative;
  isolation:isolate;
}
.home-cta::before{
  content:'';
  position:absolute;
  inset-inline:0;
  inset-block-start:0;
  height:140px;
  background:linear-gradient(180deg,
    var(--warm-section-bg) 0%,
    rgba(16,9,4,0.45) 55%,
    transparent 100%);
  pointer-events:none;
  z-index:1;
}

/* ─── Transição entre processo e depoimentos (mantém harmonia) ─── */
.home-process{
  position:relative;
}
.home-process::after{
  content:'';
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  height:80px;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.18) 100%);
  pointer-events:none;
  z-index:1;
}

/* ─── Garante que conteúdo das seções fica acima dos overlays ─── */
.page-hero__content,
.hero__wordmark,
.home-cta__inner,
.home-process .container{
  position:relative;
  z-index:8;
}

/* ─── Mobile: encurta fades ─── */
@media (max-width: 760px){
  .page-hero::after,
  .hero.hero--fluid::after{
    height:90px;
  }
  .home-cta::before{
    height:80px;
  }
}