/* Mungos — Amor y Amistad 2026 · front (aviso de carrito + pop-up) */

:root {
	--maa-green: #1b6a45;
	--maa-lime: #93b552;
	--maa-cream: #f4f9ec;
	--maa-ink: #24352b;

	/* Paleta de la campaña (pieza «El Club de los Mimos») */
	--maa-crimson: #e3175a;
	--maa-sand: #f7ecd8;
	--maa-bone: #fbf1de;

	/* Fuentes de marca; caen a Fredoka / monoespaciada si Mungos Animations
	   no está instalado (ahí viven los woff2). */
	--maa-display: "maa-display", "custard", "Fredoka", system-ui, sans-serif;
	--maa-mono: "maa-mono", "xanti-typewriter-variable", ui-monospace, "Courier New", monospace;
}

/* ------------------------------------------------------------------ *
 * Aviso del carrito
 * ------------------------------------------------------------------ */

.maa-slot { display: block; }

.maa-notice {
	display: block;
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid #cde4a6;
	border-radius: 14px;
	background: linear-gradient(180deg, #fbfdf6 0%, var(--maa-cream) 100%);
	font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--maa-ink);
	box-shadow: 0 1px 0 rgba(27, 106, 69, .04);
}

.maa-notice__row { display: flex; align-items: center; gap: 10px; }

.maa-notice__icon { flex: 0 0 auto; width: 26px; height: 26px; color: var(--maa-green); }
.maa-notice__icon svg { width: 100%; height: 100%; display: block; }

.maa-notice__text { font-size: 15px; font-weight: 700; line-height: 1.35; }
.maa-notice__text .amount,
.maa-notice__text strong { color: var(--maa-green); }

.maa-notice__bar {
	position: relative;
	height: 8px;
	margin-top: 11px;
	border-radius: 999px;
	background: #e4eed3;
	overflow: hidden;
}

.maa-notice__bar > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--maa-lime) 0%, var(--maa-green) 100%);
	transition: width .35s ease;
}

.maa-notice--is-done {
	border-color: var(--maa-lime);
	background: linear-gradient(180deg, #f2fbe6 0%, #e7f4ea 100%);
}

.maa-notice--is-blocked { border-color: #f0d3a8; background: #fdf7ec; }
.maa-notice--is-blocked .maa-notice__icon { color: #b7791f; }
.maa-notice--is-blocked .maa-notice__bar > span { background: #d9b382; }

/* ------------------------------------------------------------------ *
 * Pop-up de campaña — dos paneles, como la pieza gráfica
 * ------------------------------------------------------------------ */

.maa-popup {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 20px !important;
}

.maa-popup[hidden] { display: none !important; }

.maa-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(30, 16, 22, .6) !important;
	backdrop-filter: blur(2px);
	animation: maa-fade .25s ease both;
}

.maa-popup__card {
	position: relative;
	width: 100%;
	max-width: 468px;
	max-height: calc(100vh - 40px);
	border-radius: 18px !important;
	overflow: auto;
	background: var(--maa-sand) !important;
	box-shadow: 0 26px 70px rgba(40, 8, 20, .38);
	animation: maa-pop .3s cubic-bezier(.2, .9, .3, 1.2) both;
	-webkit-overflow-scrolling: touch;
}

.maa-popup__x {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 2;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .75) !important;
	color: var(--maa-crimson) !important;
	font-size: 24px !important;
	line-height: 1 !important;
	cursor: pointer;
}

.maa-popup__x:hover { background: #fff !important; }

/* ── Panel superior: el arte ─────────────────────────────────────── */

.maa-popup__art {
	padding: 26px 26px 22px !important;
	text-align: center !important;
	background: var(--maa-sand) !important;
}

.maa-popup__art:has(.maa-popup__art-img) { padding: 0 0 18px !important; }

.maa-popup__art-img {
	display: block !important;
	width: 100%;
	height: auto;
	margin: 0 0 16px !important;
}

.maa-popup__kicker {
	margin: 0 0 6px !important;
	font-family: var(--maa-display) !important;
	font-size: 30px !important;
	line-height: 1.05 !important;
	color: var(--maa-crimson) !important;
}

.maa-popup__pre {
	margin: 0 0 10px !important;
	font-family: var(--maa-mono) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	color: var(--maa-crimson) !important;
}

.maa-popup__title {
	margin: 0 0 14px !important;
	font-family: var(--maa-display) !important;
	font-size: clamp(34px, 9vw, 48px) !important;
	line-height: .95 !important;
	text-transform: uppercase !important;
	color: var(--maa-crimson) !important;
}

.maa-popup__text {
	margin: 0 26px !important;
	font-family: var(--maa-mono) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	letter-spacing: .04em !important;
	color: var(--maa-crimson) !important;
}

/* ── Panel inferior: la mecánica ─────────────────────────────────── */

.maa-popup__deal {
	padding: 26px 26px 22px !important;
	text-align: center !important;
	background: var(--maa-crimson) !important;
	color: var(--maa-bone) !important;
}

.maa-popup__deal-pre {
	margin: 0 0 4px !important;
	font-family: var(--maa-mono) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: .06em !important;
	color: var(--maa-bone) !important;
}

.maa-popup__deal-big {
	margin: 0 0 4px !important;
	font-family: var(--maa-display) !important;
	font-size: clamp(32px, 8.5vw, 44px) !important;
	line-height: 1 !important;
	color: var(--maa-bone) !important;
}

.maa-popup__deal-sub {
	margin: 0 0 18px !important;
	font-family: var(--maa-mono) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: .04em !important;
	color: var(--maa-bone) !important;
}

.maa-popup__cta {
	display: block !important;
	padding: 14px 26px !important;
	border-radius: 14px !important;
	background: var(--maa-bone) !important;
	color: var(--maa-crimson) !important;
	font-family: var(--maa-display) !important;
	font-size: 27px !important;
	line-height: 1.1 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	transition: transform .15s ease, box-shadow .15s ease;
}

.maa-popup__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

.maa-popup__legal {
	margin: 14px 0 0 !important;
	font-family: "Nunito", system-ui, sans-serif !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	color: rgba(251, 241, 222, .85) !important;
}

.maa-popup__later {
	display: block !important;
	margin: 10px auto 0 !important;
	border: 0;
	background: none !important;
	color: rgba(251, 241, 222, .8) !important;
	font-family: "Nunito", system-ui, sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
	cursor: pointer;
}

/* ── La pieza es el pop-up entero ─────────────────────── */

.maa-popup__card--full { background: var(--maa-crimson) !important; }

.maa-popup__art-link { display: block !important; }

.maa-popup__card--full .maa-popup__art-img {
	display: block !important;
	width: 100%;
	height: auto;
	margin: 0 !important;
}

/* Franja al pie, del color en que termina la pieza, para el «Ahora no». */
.maa-popup__foot {
	padding: 0 0 14px !important;
	text-align: center !important;
	background: var(--maa-crimson) !important;
}

.maa-popup__foot .maa-popup__later { margin-top: 0 !important; }

@keyframes maa-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes maa-pop {
	from { opacity: 0; transform: translateY(16px) scale(.96); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
	.maa-popup { padding: 12px !important; align-items: flex-end; }
	.maa-popup__card { border-radius: 16px !important; max-height: calc(100vh - 24px); }
	.maa-popup__art { padding: 22px 18px 18px !important; }
	.maa-popup__deal { padding: 22px 18px 18px !important; }
	.maa-popup__text { margin: 0 6px !important; font-size: 13px !important; }
	.maa-popup__cta { font-size: 23px !important; }
	.maa-notice__text { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.maa-popup__backdrop,
	.maa-popup__card { animation: none; }
	.maa-popup__cta { transition: none; }
	.maa-notice__bar > span { transition: none; }
}