/**
 * Muninfor · Promo Loterías
 * Frontend styles · v1.3.0
 *
 * Diseño con personalidad: gradiente verde en el header (cuando no hay imagen),
 * tréboles decorativos animados, bote dorado con shimmer, juegos en mini-tarjetas
 * con punto de color, CTA con pulse sutil, sombra del modal con tinte verde.
 *
 * Reset agresivo se mantiene para inmunidad frente al tema anfitrión.
 */

/* ============================================================
 * RESET
 * ============================================================ */

.mpl-overlay,
.mpl-overlay *,
.mpl-overlay *::before,
.mpl-overlay *::after,
.mpl-banner,
.mpl-banner *,
.mpl-banner *::before,
.mpl-banner *::after {
	box-sizing: border-box !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.mpl-overlay div,
.mpl-overlay h1,
.mpl-overlay h2,
.mpl-overlay h3,
.mpl-overlay p,
.mpl-overlay span,
.mpl-overlay button,
.mpl-overlay a,
.mpl-overlay ul,
.mpl-overlay li,
.mpl-banner div,
.mpl-banner h1,
.mpl-banner h2,
.mpl-banner h3,
.mpl-banner p,
.mpl-banner span,
.mpl-banner button,
.mpl-banner a,
.mpl-banner ul,
.mpl-banner li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	text-decoration: none !important;
	letter-spacing: normal !important;
	font-style: normal !important;
	list-style: none !important;
	float: none !important;
	clear: none !important;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	max-width: none;
	max-height: none;
	line-height: 1.5;
	font-family: inherit;
	font-weight: 400;
	color: inherit;
}

.mpl-overlay button,
.mpl-banner button {
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	outline: none !important;
}

.mpl-overlay button:focus-visible,
.mpl-banner button:focus-visible,
.mpl-overlay a:focus-visible,
.mpl-banner a:focus-visible {
	outline: 2px solid #ffffff !important;
	outline-offset: 2px !important;
}

.mpl-overlay svg,
.mpl-banner svg {
	display: inline-block !important;
	vertical-align: middle !important;
	max-width: none;
	max-height: none;
}

/* Forzamos visibilidad de la imagen del banner — bypass lazy-load del tema/ShortPixel */
.mpl-overlay img,
.mpl-overlay .mpl-modal__banner-img {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	filter: none !important;
	transform: none !important;
}

/* ============================================================
 * OVERLAY
 * ============================================================ */

.mpl-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: rgba(15, 23, 42, 0.7) !important;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	z-index: 99998 !important;
	display: none;
	align-items: center !important;
	justify-content: center !important;
	opacity: 0;
	transition: opacity 0.3s ease-out;
	padding: 20px !important;
	overflow-y: auto;
}

.mpl-overlay.is-active {
	display: flex;
	opacity: 1;
}

/* ============================================================
 * MODAL
 * ============================================================ */

.mpl-overlay .mpl-modal {
	position: relative;
	background: #ffffff !important;
	border-radius: 20px !important;
	max-width: 480px;
	width: 100%;
	box-shadow:
		0 30px 80px rgba(15, 23, 42, 0.32),
		0 12px 24px rgba(15, 23, 42, 0.1),
		0 0 60px rgba(138, 196, 79, 0.18) !important;
	overflow: hidden;
	transform: translateY(20px) scale(0.94);
	opacity: 0;
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-out;
	color: #1f2937 !important;
}

.mpl-overlay.is-active .mpl-modal {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* ============================================================
 * BANNER IMAGEN — fila superior
 * ============================================================ */

.mpl-overlay .mpl-modal__banner {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
	background: linear-gradient(135deg, #6ba832 0%, #8AC44F 100%) !important;
	overflow: hidden;
}

.mpl-overlay .mpl-modal__banner-img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 150px !important;
	object-fit: cover !important;
	object-position: center !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
}

/* ============================================================
 * HEADER (top)
 *  - Sin imagen: gradiente verde + tréboles flotantes + texto blanco
 *  - Con imagen: fondo blanco + texto oscuro
 * ============================================================ */

.mpl-overlay .mpl-modal__top {
	position: relative;
	overflow: hidden;
	text-align: center !important;
}

/* Variante SIN imagen banner: header verde con vida */
.mpl-overlay .mpl-modal--no-banner .mpl-modal__top {
	background: linear-gradient(135deg, #5b9028 0%, #6ba832 35%, #8AC44F 70%, #a3d96b 100%) !important;
	padding: 36px 32px 30px !important;
	color: #ffffff !important;
}

.mpl-overlay .mpl-modal--no-banner .mpl-modal__top::before {
	content: "" !important;
	position: absolute !important;
	top: -40%;
	left: -20%;
	width: 80%;
	height: 200%;
	background: radial-gradient(ellipse, rgba(255,255,255,0.18) 0%, transparent 60%) !important;
	pointer-events: none;
	display: block !important;
}

/* Variante CON imagen banner: header blanco bajo la imagen */
.mpl-overlay .mpl-modal--has-banner .mpl-modal__top {
	background: #ffffff !important;
	padding: 24px 32px 18px !important;
	color: #1f2937 !important;
}

/* ============================================================
 * TRÉBOLES DECORATIVOS DEL HEADER (sólo cuando no hay imagen)
 * ============================================================ */

.mpl-overlay .mpl-decor {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	pointer-events: none;
	z-index: 0;
}

.mpl-overlay .mpl-decor__leaf {
	position: absolute !important;
	color: rgba(255, 255, 255, 0.22) !important;
	display: block !important;
}

.mpl-overlay .mpl-decor__leaf svg {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
}

.mpl-overlay .mpl-decor__leaf--1 {
	top: 12% !important;
	left: 6% !important;
	width: 32px !important;
	height: 32px !important;
	transform: rotate(-18deg);
	animation: mpl-float-a 7s ease-in-out infinite;
}
.mpl-overlay .mpl-decor__leaf--2 {
	top: 50% !important;
	left: 14% !important;
	width: 22px !important;
	height: 22px !important;
	transform: rotate(25deg);
	animation: mpl-float-b 6s ease-in-out infinite 0.8s;
}
.mpl-overlay .mpl-decor__leaf--3 {
	top: 18% !important;
	right: 8% !important;
	width: 28px !important;
	height: 28px !important;
	transform: rotate(15deg);
	animation: mpl-float-a 8s ease-in-out infinite 1.5s;
}
.mpl-overlay .mpl-decor__leaf--4 {
	top: 60% !important;
	right: 14% !important;
	width: 36px !important;
	height: 36px !important;
	transform: rotate(-10deg);
	animation: mpl-float-b 7.5s ease-in-out infinite 0.3s;
}
.mpl-overlay .mpl-decor__leaf--5 {
	bottom: 12% !important;
	left: 45% !important;
	width: 18px !important;
	height: 18px !important;
	transform: rotate(40deg);
	animation: mpl-float-a 5.5s ease-in-out infinite 2s;
}

@keyframes mpl-float-a {
	0%, 100% { transform: translateY(0) rotate(-18deg); }
	50% { transform: translateY(-8px) rotate(-10deg); }
}
@keyframes mpl-float-b {
	0%, 100% { transform: translateY(0) rotate(25deg); }
	50% { transform: translateY(-6px) rotate(35deg); }
}

/* ============================================================
 * EYEBROW (badge "Prueba suerte")
 * ============================================================ */

.mpl-overlay .mpl-eyebrow {
	position: relative;
	z-index: 1;
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	padding: 6px 14px !important;
	border-radius: 999px !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	margin: 0 0 14px !important;
	line-height: 1 !important;
}

.mpl-overlay .mpl-modal--no-banner .mpl-eyebrow {
	background: rgba(255, 255, 255, 0.95) !important;
	color: #4d7a1c !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.mpl-overlay .mpl-modal--has-banner .mpl-eyebrow {
	background: rgba(138, 196, 79, 0.12) !important;
	color: var(--mpl-accent-dark, #6ba832) !important;
}

.mpl-overlay .mpl-eyebrow__icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 14px !important;
	height: 14px !important;
	color: var(--mpl-accent, #8AC44F) !important;
	flex-shrink: 0 !important;
}

.mpl-overlay .mpl-eyebrow__icon svg {
	width: 14px !important;
	height: 14px !important;
	display: block !important;
}

/* ============================================================
 * TÍTULO Y SUBTÍTULO
 * ============================================================ */

.mpl-overlay h2.mpl-title {
	position: relative;
	z-index: 1;
	font-size: 26px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	margin: 0 0 8px !important;
	display: block !important;
	visibility: visible !important;
	text-align: center !important;
	letter-spacing: -0.015em !important;
}

.mpl-overlay .mpl-modal--no-banner h2.mpl-title {
	color: #ffffff !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.mpl-overlay .mpl-modal--has-banner h2.mpl-title {
	color: #111827 !important;
}

.mpl-overlay p.mpl-subtitle {
	position: relative;
	z-index: 1;
	font-size: 14px !important;
	margin: 0 !important;
	display: block !important;
	line-height: 1.4 !important;
}

.mpl-overlay .mpl-modal--no-banner p.mpl-subtitle {
	color: rgba(255, 255, 255, 0.92) !important;
}

.mpl-overlay .mpl-modal--has-banner p.mpl-subtitle {
	color: #6b7280 !important;
}

/* ============================================================
 * BOTÓN CERRAR
 * ============================================================ */

.mpl-overlay button.mpl-close {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	width: 34px !important;
	height: 34px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s ease, box-shadow 0.2s ease !important;
	z-index: 10 !important;
	flex-shrink: 0 !important;
}

.mpl-overlay button.mpl-close--on-color {
	background: rgba(255, 255, 255, 0.25) !important;
	color: #ffffff !important;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.mpl-overlay button.mpl-close--on-color:hover,
.mpl-overlay button.mpl-close--on-color:focus {
	background: rgba(255, 255, 255, 0.4) !important;
	color: #ffffff !important;
	transform: rotate(90deg);
}

.mpl-overlay button.mpl-close--on-image {
	top: 8px !important;
	right: 8px !important;
	width: 26px !important;
	height: 26px !important;
	background: rgba(255, 255, 255, 0.95) !important;
	color: #1f2937 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}
.mpl-overlay button.mpl-close--on-image svg {
	width: 10px !important;
	height: 10px !important;
}
.mpl-overlay button.mpl-close--on-image:hover,
.mpl-overlay button.mpl-close--on-image:focus {
	background: #ffffff !important;
	color: #111827 !important;
	transform: rotate(90deg);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28) !important;
}

/* ============================================================
 * CUERPO DEL POPUP
 * ============================================================ */

.mpl-overlay .mpl-modal__body {
	padding: 20px 28px 26px !important;
	text-align: center !important;
	background: #ffffff !important;
}

/* ============================================================
 * BOTE — vibrante con shimmer
 * ============================================================ */

.mpl-overlay .mpl-jackpot {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	background: linear-gradient(135deg, #fef9c3 0%, #fde68a 50%, #fcd34d 100%) !important;
	border: 2px solid #f59e0b !important;
	border-radius: 14px !important;
	padding: 18px 16px !important;
	margin: 0 0 18px !important;
	overflow: hidden;
	box-shadow:
		0 4px 12px rgba(245, 158, 11, 0.2),
		inset 0 0 24px rgba(255, 255, 255, 0.4) !important;
}

.mpl-overlay .mpl-jackpot__shine {
	position: absolute !important;
	top: 0 !important;
	left: -50% !important;
	width: 50% !important;
	height: 100% !important;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.6) 50%,
		transparent 100%
	) !important;
	transform: skewX(-20deg);
	animation: mpl-shimmer 3.5s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}

@keyframes mpl-shimmer {
	0%, 70% { left: -50%; }
	100% { left: 110%; }
}

.mpl-overlay .mpl-jackpot__corner {
	position: absolute !important;
	color: rgba(180, 83, 9, 0.25) !important;
	pointer-events: none;
}

.mpl-overlay .mpl-jackpot__corner svg {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
}

.mpl-overlay .mpl-jackpot__corner--tl {
	top: 6px !important;
	left: 8px !important;
	width: 22px !important;
	height: 22px !important;
	transform: rotate(-20deg);
}

.mpl-overlay .mpl-jackpot__corner--br {
	bottom: 6px !important;
	right: 10px !important;
	width: 18px !important;
	height: 18px !important;
	transform: rotate(15deg);
}

.mpl-overlay .mpl-jackpot__label {
	position: relative;
	z-index: 2;
	font-size: 11px !important;
	font-weight: 800 !important;
	color: #92400e !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	margin: 0 0 6px !important;
	display: block !important;
}

.mpl-overlay .mpl-jackpot__amount {
	position: relative;
	z-index: 2;
	font-size: 34px !important;
	font-weight: 900 !important;
	color: #78350f !important;
	line-height: 1.05 !important;
	letter-spacing: -0.025em !important;
	display: block !important;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* ============================================================
 * JUEGOS — mini-tarjetas con punto de color
 * ============================================================ */

.mpl-overlay ul.mpl-games {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: stretch !important;
	gap: 6px !important;
	margin: 0 0 18px !important;
	padding: 0 !important;
	list-style: none !important;
}

.mpl-overlay .mpl-games__item {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #374151 !important;
	background: #ffffff !important;
	padding: 7px 12px !important;
	border-radius: 8px !important;
	border: 1px solid #e5e7eb !important;
	line-height: 1.2 !important;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.mpl-overlay .mpl-games__item:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
	border-color: #d1d5db !important;
}

.mpl-overlay .mpl-games__dot {
	display: inline-block !important;
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	flex-shrink: 0 !important;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 3px rgba(0, 0, 0, 0.06) !important;
}

.mpl-overlay .mpl-games__name {
	display: inline-block !important;
}

/* ============================================================
 * TEXTO DESCRIPTIVO
 * ============================================================ */

.mpl-overlay p.mpl-text {
	font-size: 14px !important;
	color: #4b5563 !important;
	line-height: 1.55 !important;
	margin: 0 0 22px !important;
	display: block !important;
}

/* ============================================================
 * CTA — botón vibrante con pulse
 * ============================================================ */

.mpl-overlay a.mpl-cta {
	position: relative;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	background: linear-gradient(135deg, #6ba832 0%, #8AC44F 100%) !important;
	color: #ffffff !important;
	text-decoration: none !important;
	padding: 15px 36px !important;
	border-radius: 12px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.01em !important;
	transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease !important;
	box-shadow:
		0 4px 14px rgba(138, 196, 79, 0.45),
		0 1px 3px rgba(107, 168, 50, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
	margin: 0 !important;
	border: 0 !important;
	animation: mpl-cta-pulse 2.5s ease-in-out infinite;
}

@keyframes mpl-cta-pulse {
	0%, 100% { box-shadow: 0 4px 14px rgba(138, 196, 79, 0.45), 0 1px 3px rgba(107, 168, 50, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
	50% { box-shadow: 0 4px 14px rgba(138, 196, 79, 0.65), 0 1px 3px rgba(107, 168, 50, 0.4), 0 0 0 6px rgba(138, 196, 79, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
}

.mpl-overlay a.mpl-cta:hover,
.mpl-overlay a.mpl-cta:focus {
	background: linear-gradient(135deg, #5b9028 0%, #7ab83e 100%) !important;
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow:
		0 8px 20px rgba(138, 196, 79, 0.5),
		0 2px 6px rgba(107, 168, 50, 0.4) !important;
	text-decoration: none !important;
	animation: none;
}

.mpl-overlay a.mpl-cta:active {
	transform: translateY(0);
}

.mpl-overlay .mpl-cta__label {
	display: inline-block !important;
}

.mpl-overlay .mpl-cta__arrow {
	transition: transform 0.25s ease !important;
	color: #ffffff !important;
	flex-shrink: 0 !important;
}

.mpl-overlay a.mpl-cta:hover .mpl-cta__arrow {
	transform: translateX(4px);
}

/* ============================================================
 * SELLOS DE CONFIANZA — ticks en círculo verde
 * ============================================================ */

.mpl-overlay ul.mpl-trust {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
	margin: 20px 0 0 !important;
	padding: 16px 0 0 !important;
	list-style: none !important;
	border-top: 1px solid #f1f5f9 !important;
}

.mpl-overlay .mpl-trust__item {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 12px !important;
	color: #4b5563 !important;
	line-height: 1.4 !important;
	font-weight: 500 !important;
}

.mpl-overlay .mpl-trust__check-wrap {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 18px !important;
	height: 18px !important;
	background: var(--mpl-accent, #8AC44F) !important;
	border-radius: 50% !important;
	color: #ffffff !important;
	flex-shrink: 0 !important;
}

.mpl-overlay .mpl-trust__check {
	color: #ffffff !important;
	flex-shrink: 0 !important;
}

.mpl-overlay .mpl-trust__text {
	display: inline-block !important;
}

/* ============================================================
 * BANNER INFERIOR — estilo markets.com modernizado
 * Imagen circular + eyebrow + titular + subtitular + CTA destacado
 * ============================================================ */

.mpl-banner {
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	background: linear-gradient(135deg, #5b9028 0%, #6ba832 35%, #8AC44F 70%, #7ab83e 100%) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
	box-shadow:
		0 -8px 24px rgba(15, 23, 42, 0.2),
		0 -2px 8px rgba(107, 168, 50, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
	z-index: 9997 !important;
	transform: translateY(100%);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	color: #ffffff !important;
	overflow: hidden;
}

.mpl-banner.is-active {
	transform: translateY(0);
}

/* El banner entero es un enlace clicable */
.mpl-banner a.mpl-banner__link {
	display: block !important;
	text-decoration: none !important;
	color: inherit !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

.mpl-banner a.mpl-banner__link:hover,
.mpl-banner a.mpl-banner__link:focus {
	text-decoration: none !important;
	color: inherit !important;
}

/* Capa de brillo recorrente */
.mpl-banner .mpl-banner__shine {
	position: absolute !important;
	top: 0 !important;
	left: -30% !important;
	width: 30% !important;
	height: 100% !important;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.22) 50%,
		transparent 100%
	) !important;
	transform: skewX(-20deg);
	animation: mpl-banner-shine 5s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
	display: block !important;
}

@keyframes mpl-banner-shine {
	0%, 55% { left: -30%; }
	100% { left: 130%; }
}

.mpl-banner .mpl-banner__inner {
	position: relative;
	z-index: 2;
	max-width: 1400px;
	margin: 0 auto !important;
	padding: 18px 32px !important;
	display: flex !important;
	align-items: center !important;
	gap: 26px !important;
	flex-wrap: nowrap !important;
}

/* ============================================================
 * IMAGEN CIRCULAR (izquierda) — estrella del banner
 * ============================================================ */

.mpl-banner .mpl-banner__image-wrap {
	position: relative;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 86px !important;
	height: 86px !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	padding: 5px !important;
	flex-shrink: 0 !important;
	box-shadow:
		0 6px 16px rgba(0, 0, 0, 0.22),
		0 0 0 4px rgba(255, 255, 255, 0.28),
		0 0 0 8px rgba(255, 255, 255, 0.14) !important;
	animation: mpl-banner-img-pulse 2.8s ease-in-out infinite;
}

@keyframes mpl-banner-img-pulse {
	0%, 100% {
		box-shadow:
			0 6px 16px rgba(0, 0, 0, 0.22),
			0 0 0 4px rgba(255, 255, 255, 0.28),
			0 0 0 8px rgba(255, 255, 255, 0.14);
	}
	50% {
		box-shadow:
			0 6px 16px rgba(0, 0, 0, 0.26),
			0 0 0 5px rgba(255, 255, 255, 0.42),
			0 0 0 13px rgba(255, 255, 255, 0.16);
	}
}

.mpl-banner .mpl-banner__image {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	border-radius: 50% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	visibility: visible !important;
	opacity: 1 !important;
	filter: none !important;
}

/* Fallback icono trébol cuando no hay imagen */
.mpl-banner .mpl-banner__icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	background: rgba(255, 255, 255, 0.18) !important;
	border-radius: 50% !important;
	color: #ffffff !important;
	flex-shrink: 0 !important;
	animation: mpl-icon-bounce 2.5s ease-in-out infinite;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)) !important;
	padding: 10px !important;
}

@keyframes mpl-icon-bounce {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-3px) rotate(8deg); }
}

.mpl-banner .mpl-banner__icon svg {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
}

/* ============================================================
 * CONTENIDO TEXTUAL (centro)
 * ============================================================ */

.mpl-banner .mpl-banner__content {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: center !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	gap: 4px !important;
	line-height: 1.2 !important;
}

.mpl-banner .mpl-banner__eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.95) !important;
	background: rgba(0, 0, 0, 0.22) !important;
	padding: 4px 10px !important;
	border-radius: 999px !important;
	line-height: 1 !important;
	margin-bottom: 4px !important;
}

.mpl-banner .mpl-banner__eyebrow-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 12px !important;
	height: 12px !important;
	color: #fde68a !important;
	flex-shrink: 0 !important;
}

.mpl-banner .mpl-banner__eyebrow-icon svg {
	width: 12px !important;
	height: 12px !important;
	display: block !important;
}

/*.mpl-banner .mpl-banner__strong {
	display: block !important;
	font-size: 26px !important;
	font-weight: 900 !important;
	color: #ffffff !important;
	line-height: 1.1 !important;
	letter-spacing: -0.01em !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.22) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 100% !important;
}*/

.mpl-banner .mpl-banner__normal {
	display: block !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: rgba(255, 255, 255, 0.95) !important;
	line-height: 1.3 !important;
	margin-top: 3px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 100% !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}

/* ============================================================
 * CTA (derecha) — botón blanco destacado
 * ============================================================ */

.mpl-banner .mpl-banner__cta {
	position: relative;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	background: #ffffff !important;
	color: #4d7a1c !important;
	text-decoration: none !important;
	padding: 16px 34px !important;
	border-radius: 999px !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: 0.02em !important;
	transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease !important;
	box-shadow:
		0 6px 16px rgba(0, 0, 0, 0.22),
		0 2px 5px rgba(0, 0, 0, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
	white-space: nowrap !important;
	margin: 0 !important;
	border: 0 !important;
	flex-shrink: 0 !important;
	animation: mpl-banner-cta-pulse 2.5s ease-in-out infinite;
}

@keyframes mpl-banner-cta-pulse {
	0%, 100% {
		transform: scale(1);
		box-shadow:
			0 6px 16px rgba(0, 0, 0, 0.22),
			0 2px 5px rgba(0, 0, 0, 0.14),
			inset 0 1px 0 rgba(255, 255, 255, 0.6);
	}
	50% {
		transform: scale(1.04);
		box-shadow:
			0 8px 22px rgba(0, 0, 0, 0.28),
			0 2px 5px rgba(0, 0, 0, 0.16),
			0 0 0 8px rgba(255, 255, 255, 0.22),
			inset 0 1px 0 rgba(255, 255, 255, 0.6);
	}
}

.mpl-banner a.mpl-banner__link:hover .mpl-banner__cta,
.mpl-banner a.mpl-banner__link:focus .mpl-banner__cta {
	background: #fefce8 !important;
	color: #3d6516 !important;
	transform: translateY(-2px) scale(1) !important;
	box-shadow:
		0 8px 20px rgba(0, 0, 0, 0.25),
		0 2px 6px rgba(0, 0, 0, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
	animation: none !important;
}

.mpl-banner .mpl-banner__cta-arrow {
	color: #4d7a1c !important;
	flex-shrink: 0 !important;
	transition: transform 0.2s ease !important;
}

.mpl-banner a.mpl-banner__link:hover .mpl-banner__cta-arrow {
	transform: translateX(3px);
	color: #3d6516 !important;
}

/* Hover global del banner: ligeramente más brillante */
.mpl-banner a.mpl-banner__link:hover .mpl-banner__image-wrap {
	transform: scale(1.05);
	transition: transform 0.3s ease;
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */

@media (max-width: 600px) {
	.mpl-overlay .mpl-modal--no-banner .mpl-modal__top {
		padding: 30px 22px 24px !important;
	}
	.mpl-overlay .mpl-modal--has-banner .mpl-modal__top {
		padding: 20px 22px 14px !important;
	}
	.mpl-overlay .mpl-modal__body {
		padding: 18px 20px 22px !important;
	}
	.mpl-overlay h2.mpl-title {
		font-size: 22px !important;
	}
	.mpl-overlay .mpl-jackpot__amount {
		font-size: 28px !important;
	}
	.mpl-overlay a.mpl-cta {
		padding: 14px 28px !important;
		font-size: 15px !important;
	}
	.mpl-overlay .mpl-modal__banner-img {
		max-height: 110px !important;
	}
	.mpl-banner .mpl-banner__inner {
		gap: 14px !important;
		padding: 12px 16px !important;
	}
	.mpl-banner .mpl-banner__image-wrap {
		width: 56px !important;
		height: 56px !important;
		padding: 3px !important;
	}
	.mpl-banner .mpl-banner__icon {
		width: 42px !important;
		height: 42px !important;
		padding: 9px !important;
	}
	.mpl-banner .mpl-banner__eyebrow {
		font-size: 9px !important;
		padding: 3px 7px !important;
	}
	/*.mpl-banner .mpl-banner__strong {
		font-size: 17px !important;
	}*/
	.mpl-banner .mpl-banner__normal {
		font-size: 12px !important;
	}
	.mpl-banner .mpl-banner__cta {
		padding: 11px 18px !important;
		font-size: 13px !important;
	}
	.mpl-banner .mpl-banner__cta-arrow {
		width: 14px !important;
		height: 14px !important;
	}
}

@media (max-width: 420px) {
	.mpl-banner .mpl-banner__inner {
		gap: 10px !important;
		padding: 10px 12px !important;
	}
	.mpl-banner .mpl-banner__image-wrap {
		width: 48px !important;
		height: 48px !important;
		padding: 2px !important;
	}
	/*.mpl-banner .mpl-banner__strong {
		font-size: 14px !important;
	}*/
	.mpl-banner .mpl-banner__normal {
		display: none !important;
	}
	.mpl-banner .mpl-banner__cta {
		padding: 9px 14px !important;
		font-size: 12px !important;
	}
	.mpl-banner .mpl-banner__eyebrow {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mpl-overlay,
	.mpl-overlay .mpl-modal,
	.mpl-banner,
	.mpl-overlay a.mpl-cta,
	.mpl-banner .mpl-banner__cta,
	.mpl-overlay button.mpl-close,
	.mpl-overlay .mpl-decor__leaf,
	.mpl-overlay .mpl-jackpot__shine,
	.mpl-banner .mpl-banner__icon,
	.mpl-banner .mpl-banner__shine,
	.mpl-banner .mpl-banner__image-wrap {
		transition: none !important;
		animation: none !important;
	}
	.mpl-overlay.is-active .mpl-modal {
		transform: none !important;
	}
}