/* Pop-ups de oferta: la tarjeta pequeña de la esquina, como el nudge de
   quewood. Sin colores propios: todo `--mrc-*` (el tema los rellena). */

.mrc-popup {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9990;
	box-sizing: border-box;
	display: flex;
	gap: .9rem;
	align-items: center;
	max-width: min( 400px, calc( 100vw - 32px ) );
	padding: 1rem 2.6rem 1rem 1rem;
	background: var( --mrc-surface, #16121f );
	color: var( --mrc-ink, #fff );
	border-radius: var( --mrc-radius-lg, 24px );
	box-shadow: 0 18px 44px rgba( 10, 47, 64, .28 ), 0 2px 6px rgba( 10, 47, 64, .12 );
	font-family: var( --mrc-font-body, inherit );
	/* El filete amarillo arriba: es lo que la distingue de un aviso de cookies. */
	border-top: 5px solid var( --mrc-accent, #FFD400 );
	opacity: 0;
	transform: translateY( 24px ) scale( .96 );
	transition: opacity 220ms ease, transform 220ms ease;
	pointer-events: none;
}

.mrc-popup * {
	box-sizing: border-box;
}

.mrc-popup.is-open {
	opacity: 1;
	transform: translateY( 0 ) scale( 1 );
	pointer-events: auto;
	/* Entrada con un pequeño rebote: el ojo va a lo que se mueve. */
	animation: mrc-popup-in 520ms cubic-bezier( .2, .9, .3, 1.3 ) both;
}

@keyframes mrc-popup-in {
	0%   { transform: translateY( 24px ) scale( .96 ); opacity: 0; }
	60%  { transform: translateY( -6px ) scale( 1.01 ); opacity: 1; }
	100% { transform: translateY( 0 ) scale( 1 ); opacity: 1; }
}

/* El icono se balancea dos veces al abrir, y el botón late suave. */
.mrc-popup.is-open .mrc-popup__art img {
	animation: mrc-popup-wiggle 900ms ease 500ms 2;
	transform-origin: 50% 90%;
}

@keyframes mrc-popup-wiggle {
	0%, 100% { transform: rotate( 0 ); }
	25%      { transform: rotate( -8deg ); }
	75%      { transform: rotate( 8deg ); }
}

.mrc-popup.is-open .mrc-popup__cta {
	animation: mrc-popup-pulse 1.8s ease-in-out 1s infinite;
}

@keyframes mrc-popup-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba( 255, 212, 0, .6 ); }
	60%      { box-shadow: 0 0 0 10px rgba( 255, 212, 0, 0 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.mrc-popup.is-open,
	.mrc-popup.is-open .mrc-popup__art img,
	.mrc-popup.is-open .mrc-popup__cta {
		animation: none;
	}
}

/* ------------------------------------------------------------ píldora
   Cuando el pop-up se cierra (o ya salió otro día), queda una píldora
   pequeña abajo a la izquierda: «Free shot →». Se quita con su × y no
   vuelve en esa visita. Es la segunda oportunidad, sin volver a saltar. */
.mrc-pill {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 9980;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .35rem .35rem .35rem .8rem;
	border-radius: var( --mrc-radius-pill, 9999px );
	background: var( --mrc-accent, #FFD400 );
	color: var( --mrc-accent-ink, #12121a );
	box-shadow: 0 10px 26px rgba( 10, 47, 64, .28 );
	font-family: var( --mrc-font-body, inherit );
	font-weight: 700;
	font-size: .92rem;
	text-decoration: none;
	opacity: 0;
	transform: translateY( 14px );
	transition: opacity 200ms ease, transform 200ms ease;
	pointer-events: none;
}

.mrc-pill.is-open {
	opacity: 1;
	transform: translateY( 0 );
	pointer-events: auto;
}

.mrc-pill__icon {
	width: 26px;
	height: 26px;
	flex: none;
}

.mrc-pill__text {
	white-space: nowrap;
	color: inherit;
	text-decoration: none;
	padding: .4rem 0;
}

.mrc-pill__close {
	appearance: none;
	border: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba( 0, 0, 0, .08 );
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.mrc-pill__close svg {
	width: 16px;
	height: 16px;
}

.mrc-pill__close:hover,
.mrc-pill__close:focus-visible {
	background: rgba( 0, 0, 0, .16 );
	outline: none;
}

.mrc-pill__text:focus-visible,
.mrc-pill__close:focus-visible {
	outline: 2px solid var( --mrc-ring, #fff );
	outline-offset: 2px;
}

@media ( max-width: 640px ) {
	.mrc-pill {
		left: 12px;
		bottom: 12px;
		font-size: .86rem;
	}
}

.mrc-popup.is-leaving {
	opacity: 0;
	transform: translateY( 8px );
	pointer-events: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.mrc-popup {
		transition: opacity 120ms ease;
		transform: none;
	}
}

.mrc-popup__close {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 44px;
	height: 44px;
	border: 0;
	padding: 0;
	background: transparent;
	color: var( --mrc-muted, #a9a3b8 );
	cursor: pointer;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mrc-popup__close svg {
	width: 20px;
	height: 20px;
}

.mrc-popup__close:hover,
.mrc-popup__close:focus-visible {
	color: var( --mrc-ink, #fff );
	background: var( --mrc-surface-2, #0e0b16 );
	outline: none;
}

.mrc-popup__close:focus-visible {
	outline: 2px solid var( --mrc-ring, #fff );
	outline-offset: 2px;
}

.mrc-popup__art {
	flex: none;
	width: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mrc-popup__art img {
	display: block;
	width: 56px;
	height: 56px;
}

/* La miniatura del flyer (4:5), con su sombra, para el pop-up de evento. */
.mrc-popup__art--flyer {
	width: 72px;
}

.mrc-popup__art--flyer img {
	width: 72px;
	height: 90px;
	object-fit: cover;
	border-radius: var( --mrc-radius-sm, 10px );
	box-shadow: 0 6px 16px rgba( 0, 0, 0, .25 );
}

.mrc-popup__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.mrc-popup__title {
	margin: 0;
	font-family: var( --mrc-font-display, inherit );
	font-size: 1.25rem;
	line-height: 1.05;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var( --mrc-ink, #fff );
	overflow-wrap: anywhere;
}

.mrc-popup__line {
	margin: 0;
	font-size: .88rem;
	line-height: 1.45;
	color: var( --mrc-muted, #a9a3b8 );
}

.mrc-popup__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: .3rem;
	padding: .55rem 1.1rem;
	border-radius: var( --mrc-radius-pill, 9999px );
	background: var( --mrc-accent, #FFD400 );
	color: var( --mrc-accent-ink, #12121a );
	font-weight: 700;
	font-size: .92rem;
	text-decoration: none;
	transition: filter 150ms ease;
}

.mrc-popup__cta:hover {
	filter: brightness( 1.08 );
}

.mrc-popup__cta:focus-visible {
	outline: 3px solid var( --mrc-ring, #fff );
	outline-offset: 2px;
}

@media ( max-width: 640px ) {
	.mrc-popup {
		right: 12px;
		left: 12px;
		bottom: 12px;
		max-width: none;
		padding: .9rem 2.6rem .9rem .9rem;
	}
	.mrc-popup__title {
		font-size: 1.15rem;
	}
}