/* Overlay + contenedor con diseño simple y responsive */
.sp-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transition: opacity .2s;
  z-index: 9998;
}
.sp-container {
  position: fixed; inset: auto 50% 10% 50%;
  transform: translate(-50%, 20px);
  background: #fff; max-width: 560px; width: calc(100% - 2rem);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2);
  opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s;
  z-index: 9999; padding: 20px;
}
.sp-container.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.sp-overlay.is-visible { opacity: 1; visibility: visible; }

.sp-close {
  position: absolute; top: 8px; right: 10px; border: 0; background: transparent;
  font-size: 28px; line-height: 1; cursor: pointer;
}
.sp-title { margin: 0 0 10px; font-size: 1.25rem; }
.sp-content { font-size: .95rem; }

.sp-image img { width: 100%; height: auto; border-radius: 8px; margin-bottom: 12px; }

@media (max-width: 480px) {
  .sp-container { inset: auto 1rem 1rem 1rem; transform: translate(0, 20px); }
  .sp-container.is-visible { transform: translate(0, 0); }
}