/* All background treatment stays below the original, unfiltered product cards.
   These shared variables can also be adjusted in the isolated design review. */
.sg-situation-scene {
  --sg-situation-saturation: 1;
  --sg-situation-contrast: .88;
  --sg-situation-veil: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #edf3fb;
}

.sg-situation-scene > .sg-situation-landscape {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--sg-situation-position, 80% 50%);
  filter: saturate(var(--sg-situation-saturation)) contrast(var(--sg-situation-contrast)) !important;
  pointer-events: none;
}

.sg-situation-scene[data-sg-situation="consultas"] {
  --sg-situation-position: 82% 50%;
}

.sg-situation-scene[data-sg-situation="citas"] {
  --sg-situation-position: 44% 50%;
}

.sg-situation-scene[data-sg-situation="seguimiento"] {
  --sg-situation-position: 28% 50%;
}

.sg-situation-veil,
.sg-situation-foreground {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.sg-situation-veil {
  z-index: 1;
  background: rgb(255 255 255 / var(--sg-situation-veil));
}

.sg-situation-foreground {
  z-index: 2;
  filter: drop-shadow(0 3px 8px rgb(5 19 67 / 15%));
}

.sg-situation-foreground > .sg-situation-cutout {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none !important;
  -webkit-mask: var(--sg-situation-mask) center / 100% 100% no-repeat;
  mask: var(--sg-situation-mask) center / 100% 100% no-repeat;
}