/* 07-faixas-transicao: Faixas em degradê entre as seções (preto, concreto, branco). */

/* =========================================================
   FAIXAS DE TRANSIÇÃO (preto ⇄ concreto ⇄ branco)
   ========================================================= */
.band{
  position:relative;overflow:hidden;
  height:clamp(220px, 42vh, 460px);
}
.band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--tex-light), var(--tex-noise);
  background-size:cover, 260px 260px;
  mix-blend-mode:multiply;
  opacity:.85;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
}
.band-down{background:linear-gradient(to bottom, var(--ink) 0%, #3a3b3a 28%, var(--concrete) 55%, var(--concrete-light) 78%, var(--white) 100%);}
.band-up{background:linear-gradient(to bottom, var(--white) 0%, var(--concrete-light) 22%, var(--concrete) 45%, #3a3b3a 72%, var(--ink) 100%);}
.band-light{background:linear-gradient(to bottom, var(--white) 0%, var(--concrete-light) 100%);height:clamp(140px, 24vh, 260px);}
.band-light-out{background:linear-gradient(to bottom, var(--concrete-light) 0%, var(--white) 100%);height:clamp(140px, 24vh, 260px);}
.band .shape{position:absolute;z-index:1;top:50% !important;translate:0 -50%;}
.shape-circle{border-radius:50%;}
.shape-tri{clip-path:polygon(50% 0, 100% 100%, 0 100%);}
.shape-semi{aspect-ratio:2 / 1;border-radius:999px 999px 0 0;}
.shape-quarter{border-top-left-radius:100%;}
.shape-ring{border-radius:50%;border:clamp(10px,1.2vw,18px) solid var(--red);}