/* MAMPARA – ANIMACION */
.cs-mp-scene {
  position: relative;
  perspective: 900px;
  text-align: center;
}

/* marco */
.cs-mp-frame {
  width: 260px;
  height: 260px;
  border-radius: 14px;
  padding: 12px;
  background: #e4e5e6;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  margin-inline: auto;
  position: relative;
  overflow: hidden;
}

/* vidrio de fondo esmerilado */
.cs-mp-backglass {
  position: absolute;
  inset: 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffffffd0, #e8e8e8aa);
  filter: blur(1px);
  box-shadow: inset 0 0 30px rgba(0,0,0,.18);
  z-index: 1;
}

/* logo */
.cs-mp-logo {
  position: absolute;
 top: 14px;
  bottom: 14px;
  left: 14px;
  width: calc(60% - 7px);
  background-image: url("../img/cristalsur/logo.png");
  background-position: center;
  background-size: 70%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateX(-10px) scale(0.9);
  transition: opacity .4s ease .1s, transform .4s ease .1s;
  z-index: 2;
}

/* panel corredizo */
.cs-mp-panel {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 14px;
  width: calc(50% - 7px);
  border-radius: 10px;
  background: #f4f4f4;
  transform: translateX(0);
  transition: transform .6s cubic-bezier(.25,.9,.25,1), box-shadow .6s ease;
  box-shadow:
    0 0 0 2px #d0d0d0,
    0 10px 24px rgba(0,0,0,.22);
  z-index: 3;
}

.cs-mp-panel-glass {
  position: absolute;
  inset: 4px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e4f3ffdd, #c3ddffbb); /* cristal azul */
  backdrop-filter: blur(3px);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.7),
    inset 0 0 26px rgba(0,0,0,.18);
}

/* manija */
.cs-mp-handle {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 22px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #c9c9c9);
}

/* efecto hover: corre la mampara */
.cs-mp-scene:hover .cs-mp-panel {
  transform: translateX(115%);
  box-shadow:
    0 20px 38px rgba(0,0,0,.35);
}

.cs-mp-scene:hover .cs-mp-logo {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* caption */
.cs-mp-caption {
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.8;
}
/* =========================
   MAMPARA – TOGGLE MOBILE
   ========================= */
.cs-mp-check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cs-mp-hit {
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* En desktop seguís con hover (como ahora) */
@media (hover: hover) and (pointer: fine) {
  .cs-mp-scene:hover .cs-mp-panel { transform: translateX(115%); }
  .cs-mp-scene:hover .cs-mp-logo { opacity: 1; transform: translateX(0) scale(1); }
}

/* En mobile: desactivamos hover y usamos checkbox toggle */
@media (hover: none) and (pointer: coarse) {
  .cs-mp-scene:hover .cs-mp-panel { transform: translateX(0); }
  .cs-mp-scene:hover .cs-mp-logo { opacity: 0; transform: translateX(-10px) scale(.9); }

  /* Abierto cuando el checkbox está tildado */
  .cs-mp-check:checked + .cs-mp-hit .cs-mp-panel {
    transform: translateX(115%);
    box-shadow: 0 20px 38px rgba(0,0,0,.35);
  }

  .cs-mp-check:checked + .cs-mp-hit .cs-mp-logo {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}