/* BD Negocio Digital · stacked parallax panels
   Inspired by the variable-height stacked pinning interaction, implemented with
   native sticky positioning so it does not take control of the existing hero,
   project drag gallery, magnetic buttons or reveal animations. */

.bd-stacked-panels-ready body {
  background: #07050d;
}

.bd-stack-panel {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: var(--bd-stack-top, 0px) !important;
  z-index: var(--bd-stack-z, 30) !important;
  isolation: isolate;
  /* Each incoming panel visually layers over the previous one. */
  box-shadow:
    0 -1px 0 rgba(255,255,255,.055),
    0 -28px 78px rgba(3,2,8,.34);
  will-change: auto;
}

.bd-stack-panel::after {
  content: "";
  position: absolute;
  z-index: 999;
  pointer-events: none;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  opacity: .52;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(157,20,255,.28) 23%,
    rgba(200,88,198,.34) 50%,
    rgba(215,255,99,.18) 76%,
    transparent 100%);
}

.bd-stack-panel.is-bd-stack-active {
  box-shadow:
    0 -1px 0 rgba(255,255,255,.075),
    0 -34px 94px rgba(3,2,8,.42),
    0 -8px 38px rgba(157,20,255,.045);
}

/* The first corporate option must visually start the stacked sequence without
   getting lost under the fixed desktop navigation. Its existing internal layout
   is untouched; we only guarantee enough breathing room at the top. */
#bd-empresas-home.bd-stack-panel {
  padding-top: max(76px, clamp(54px, 6vw, 86px));
}

/* Projects is intentionally kept fully interactive. Pinning belongs to the
   section wrapper only, never to the gallery cards or controls. */
#portafolio.bd-stack-panel .arc-gallery-stage,
#portafolio.bd-stack-panel .arc-project-card,
#portafolio.bd-stack-panel .arc-slider,
#portafolio.bd-stack-panel .arc-nav-btn {
  touch-action: auto;
}
#portafolio.bd-stack-panel .arc-gallery-stage {
  touch-action: pan-y;
}

/* Slightly stronger solid backplates are important when panels overlap. */
#bd-empresas-home.bd-stack-panel,
#problemas.bd-stack-panel,
#servicios.bd-stack-panel,
#portafolio.bd-stack-panel,
#bdcommerce.bd-stack-panel,
#nosotros.bd-stack-panel,
#contacto.bd-stack-panel {
  background-color: #08050f !important;
}

@media (max-width: 899px) {
  .bd-stack-panel {
    box-shadow:
      0 -1px 0 rgba(255,255,255,.045),
      0 -18px 46px rgba(3,2,8,.26);
  }

  /* No forced snapping on phones. Native vertical scrolling remains in charge. */
  .bd-stack-panel::after { opacity: .38; }

  #bd-empresas-home.bd-stack-panel {
    padding-top: max(68px, 10vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bd-stack-panel {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
  }
  .bd-stack-panel::after { display: none !important; }
}

/* 2026-09-19 · Footer recovery after stacked panels v2
   The final sticky contact panel used a higher stacking context than the real
   site footer. Promote the footer so it naturally covers the last sticky panel. */
.parallax-footer {
  position: relative !important;
  z-index: 180 !important;
  isolation: isolate;
  background:
    radial-gradient(circle at 14% 0%, rgba(157,20,255,.10), transparent 24%),
    radial-gradient(circle at 88% 10%, rgba(200,88,198,.08), transparent 24%),
    #07050d !important;
  box-shadow: 0 -30px 90px rgba(3,2,8,.48);
}

.parallax-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7,5,13,.985), #07050d 55%);
}