/*
  Bordes modulares IKIGAI.
  Las tres piezas de cada lado usan la misma base visual para mantener
  tamaño, alineación y uniones limpias en páginas de cualquier largo.
*/
.page-side-stack {
  position: absolute;
  inset-block: 0;
  z-index: 4;
  width: var(--index-border-width, var(--ikigai-side-border-width, clamp(170px, 16vw, 280px)));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.page-side-stack--left { left: -6px; }
.page-side-stack--right { right: -1px; }

.page-side-stack__top,
.page-side-stack__bottom {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
}

.page-side-stack--left .page-side-stack__top,
.page-side-stack--left .page-side-stack__bottom {
  object-position: left top;
}

.page-side-stack--right .page-side-stack__top,
.page-side-stack--right .page-side-stack__bottom {
  object-position: right top;
}

.page-side-stack__middle {
  flex: 1 1 auto;
  min-height: 180px;
  background-repeat: repeat-y;
  background-size: 100% auto;
  margin-top: -1px;
  margin-bottom: -1px;
}

.page-side-stack--left .page-side-stack__middle { background-position: left top; }
.page-side-stack--right .page-side-stack__middle { background-position: right top; }

.services,
.diag-stage,
.maint-stage,
.mc-stage,
.fc-stage,
.tr-stage,
.el-stage,
.sus-stage,
.extra-stage,
.merch-stage,
.tips-stage {
  --index-border-width: clamp(170px, 16vw, 280px);
}

@media (max-width: 1240px) {
  .services,.diag-stage,.maint-stage,.mc-stage,.fc-stage,.tr-stage,.el-stage,.sus-stage,.extra-stage,
.merch-stage,
.tips-stage {
    --index-border-width: 138px;
  }
}

@media (max-width: 1100px) {
  .services,.diag-stage,.maint-stage,.mc-stage,.fc-stage,.tr-stage,.el-stage,.sus-stage,.extra-stage,
.merch-stage,
.tips-stage {
    --index-border-width: 112px;
  }
}

@media (max-width: 900px) {
  .page-side-stack { display: none; }
}

/* Ajuste solicitado: fondo lateral más suave, sin alterar los dibujos manga. */
@media (min-width: 901px) {
  .ikigai-border-stage::before,
  .ikigai-border-stage::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: var(--index-border-width, var(--ikigai-side-border-width, clamp(170px, 16vw, 280px)));
    background: rgba(255, 255, 255, 0.58);
    pointer-events: none;
  }

  .ikigai-border-stage::before { left: 0; }
  .ikigai-border-stage::after { right: 0; }
}