/*
 * MK Popup — estilos del frontend.
 *
 * Todo va namespaced bajo .mkp-* para no chocar con el tema. La
 * posición en pantalla usa un contenedor .mkp-popup a pantalla
 * completa (position: fixed) con display: flex y un margen interno
 * (padding) de 20px; las 9 clases .mkp-pos-* combinan
 * justify-content/align-items para las 9 posiciones. El escalado
 * responsivo (transform: scale()) lo aplica JS sobre .mkp-stage; la
 * animación de entrada/salida (fade/zoom/slide) la aplica JS sobre
 * .mkp-frame añadiendo la clase .mkp-anim-{tipo} y alternando
 * .is-open.
 */

.mkp-popup,
.mkp-popup *,
.mkp-popup *::before,
.mkp-popup *::after {
	box-sizing: border-box;
}

.mkp-popup {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--mkp-duration, 300ms) ease,
		visibility var(--mkp-duration, 300ms) ease;
}

.mkp-popup[hidden] {
	display: none;
}

.mkp-popup.is-open {
	opacity: 1;
	visibility: visible;
}

.mkp-popup.mkp-anim-none {
	transition: none;
}

/* Posiciones (cuadrícula de 9) */
.mkp-pos-top-left {
	justify-content: flex-start;
	align-items: flex-start;
}

.mkp-pos-top-center {
	justify-content: center;
	align-items: flex-start;
}

.mkp-pos-top-right {
	justify-content: flex-end;
	align-items: flex-start;
}

.mkp-pos-middle-left {
	justify-content: flex-start;
	align-items: center;
}

.mkp-pos-middle-center {
	justify-content: center;
	align-items: center;
}

.mkp-pos-middle-right {
	justify-content: flex-end;
	align-items: center;
}

.mkp-pos-bottom-left {
	justify-content: flex-start;
	align-items: flex-end;
}

.mkp-pos-bottom-center {
	justify-content: center;
	align-items: flex-end;
}

.mkp-pos-bottom-right {
	justify-content: flex-end;
	align-items: flex-end;
}

.mkp-overlay {
	position: fixed;
	inset: 0;
	z-index: 0;
}

.mkp-frame {
	position: relative;
	z-index: 1;
	overflow: hidden;
	flex-shrink: 0;
	transition: transform var(--mkp-duration, 300ms) ease;
}

.mkp-anim-zoom .mkp-frame {
	transform: scale(0.85);
}

.mkp-anim-zoom.is-open .mkp-frame {
	transform: scale(1);
}

.mkp-anim-slide-up .mkp-frame {
	transform: translateY(40px);
}

.mkp-anim-slide-up.is-open .mkp-frame {
	transform: translateY(0);
}

.mkp-anim-slide-down .mkp-frame {
	transform: translateY(-40px);
}

.mkp-anim-slide-down.is-open .mkp-frame {
	transform: translateY(0);
}

.mkp-anim-none .mkp-frame {
	transition: none;
}

.mkp-stage {
	position: relative;
	display: none;
	transform-origin: top left;
	margin: 0;
	line-height: 1.4;
	font-size: 16px;
	color: #1e1e1e;
}

.mkp-stage.is-active {
	display: block;
}

.mkp-stage * {
	line-height: inherit;
}

.mkp-el {
	position: absolute;
	box-sizing: border-box;
	margin: 0;
}

.mkp-el-text p:first-child {
	margin-top: 0;
}

.mkp-el-text p:last-child {
	margin-bottom: 0;
}

.mkp-el-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border: 0;
	padding: 0;
}

.mkp-el-button,
button.mkp-el {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	line-height: normal;
}

.mkp-el-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: #333333;
}

.mkp-el-close svg {
	width: 60%;
	height: 60%;
}

.mkp-trigger {
	cursor: pointer;
}

html.mkp-scroll-lock {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.mkp-popup,
	.mkp-frame {
		transition: none !important;
	}
}