/* =========================================================
   AMNU – RULETA CYBER LUNES
   Marca: crema #FDF7E5 · bordó #521526 · terracota #b75729 · rosa #f8dce6
   Todas las clases empiezan con "amnu-ruleta" para no chocar con otros popups.
   ========================================================= */

#amnu-ruleta,
#amnu-ruleta-launcher {
	--r-crema: #FDF7E5;
	--r-bordo: #521526;
	--r-terra: #b75729;
	--r-rosa: #f8dce6;
	font-family: 'Chivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	box-sizing: border-box;
}
#amnu-ruleta *,
#amnu-ruleta *::before,
#amnu-ruleta *::after {
	box-sizing: border-box;
}
#amnu-ruleta[hidden],
#amnu-ruleta-launcher[hidden] {
	display: none !important;
}

/* ---------- Capa y caja ---------- */
#amnu-ruleta {
	position: fixed;
	inset: 0;
	z-index: 1000000; /* por encima del header móvil (99999) y del popup viejo (999999) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
#amnu-ruleta .amnu-ruleta__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(82, 21, 38, 0.62);
	animation: amnuRuletaFade 0.25s ease both;
}
#amnu-ruleta .amnu-ruleta__box {
	position: relative;
	width: min(100%, 420px);
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--r-crema);
	color: var(--r-bordo);
	border-radius: 26px;
	padding: 26px 22px 20px;
	text-align: center;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
	animation: amnuRuletaIn 0.38s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes amnuRuletaIn {
	from { opacity: 0; transform: translateY(22px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes amnuRuletaFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

#amnu-ruleta .amnu-ruleta__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 5;
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: var(--r-terra);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
#amnu-ruleta .amnu-ruleta__close:hover { background: var(--r-bordo); }

#amnu-ruleta .amnu-ruleta__test {
	margin: 0 36px 8px 0;
	padding: 4px 10px;
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: #fff;
	background: var(--r-bordo);
	border-radius: 999px;
}

#amnu-ruleta .amnu-ruleta__kicker {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--r-terra);
}
#amnu-ruleta .amnu-ruleta__title {
	margin: 0 0 4px;
	font-size: 26px;
	line-height: 1.1;
	font-weight: 800;
	color: var(--r-bordo);
}

/* ---------- Rueda ---------- */
#amnu-ruleta .amnu-ruleta__stage {
	--w: max(190px, min(76vw, 300px, 40vh));
	position: relative;
	width: var(--w);
	height: var(--w);
	margin: 18px auto 14px;
}
#amnu-ruleta .amnu-ruleta__pointer {
	position: absolute;
	top: -12px;
	left: 50%;
	z-index: 4;
	width: 0;
	height: 0;
	transform: translateX(-50%);
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-top: 22px solid var(--r-terra);
	filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.3));
}
#amnu-ruleta .amnu-ruleta__wheel-wrap {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	filter: drop-shadow(0 10px 18px rgba(82, 21, 38, 0.28));
}
#amnu-ruleta .amnu-ruleta__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}
#amnu-ruleta .amnu-ruleta__wheel {
	transform-origin: 150px 150px;
	transition: transform 5.2s cubic-bezier(0.12, 0.62, 0.08, 1);
	will-change: transform;
}
#amnu-ruleta .amnu-ruleta__seg-text {
	font-family: 'Chivo', system-ui, sans-serif;
	font-weight: 800;
	pointer-events: none;
}
#amnu-ruleta .amnu-ruleta__hub {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	width: 21%;
	height: 21%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--r-crema);
	border: 4px solid var(--r-bordo);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--w) * 0.048); /* proporcional al tamaño de la rueda */
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--r-terra);
}

/* Al mostrar el resultado la rueda se achica para que entre el botón sin scrollear */
#amnu-ruleta .amnu-ruleta__box.is-result .amnu-ruleta__stage {
	--w: max(150px, min(56vw, 210px, 27vh));
	margin-bottom: 8px;
}

/* ---------- Paneles ---------- */
#amnu-ruleta .amnu-ruleta__panel[hidden] { display: none !important; }
#amnu-ruleta .amnu-ruleta__lead {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.35;
	color: var(--r-bordo);
}
#amnu-ruleta .amnu-ruleta__label {
	display: block;
	margin: 0 0 6px;
	text-align: left;
	font-size: 13px;
	font-weight: 700;
	color: var(--r-bordo);
}
#amnu-ruleta .amnu-ruleta__input {
	display: block;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 16px;
	font-family: inherit;
	font-size: 16px; /* 16px evita el zoom automático en iPhone */
	color: var(--r-bordo);
	background: #fff;
	border: 2px solid rgba(82, 21, 38, 0.18);
	border-radius: 14px;
	outline: none;
	box-shadow: none;
}
#amnu-ruleta .amnu-ruleta__input:focus {
	border-color: var(--r-terra);
	box-shadow: 0 0 0 3px rgba(183, 87, 41, 0.22);
}
#amnu-ruleta .amnu-ruleta__input[aria-invalid="true"] { border-color: #b3261e; }
#amnu-ruleta .amnu-ruleta__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
}
#amnu-ruleta .amnu-ruleta__error {
	margin: 8px 0 0;
	text-align: left;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: #b3261e;
}
#amnu-ruleta .amnu-ruleta__error[hidden] { display: none; }

#amnu-ruleta .amnu-ruleta__btn,
#amnu-ruleta .amnu-ruleta__cta {
	display: block;
	width: 100%;
	margin: 12px 0 0;
	padding: 0 20px;
	height: 52px;
	line-height: 52px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 800;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: var(--r-terra);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 6px 0 rgba(82, 21, 38, 0.9);
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease;
}
#amnu-ruleta .amnu-ruleta__btn:hover,
#amnu-ruleta .amnu-ruleta__cta:hover { background: #a24a22; color: #fff; }
#amnu-ruleta .amnu-ruleta__btn:active,
#amnu-ruleta .amnu-ruleta__cta:active {
	transform: translateY(4px);
	box-shadow: 0 2px 0 rgba(82, 21, 38, 0.9);
}
#amnu-ruleta .amnu-ruleta__btn[disabled] {
	opacity: 0.7;
	cursor: progress;
	transform: translateY(4px);
	box-shadow: 0 2px 0 rgba(82, 21, 38, 0.9);
}
#amnu-ruleta .amnu-ruleta__fine {
	margin: 12px 0 0;
	font-size: 11.5px;
	line-height: 1.35;
	color: rgba(82, 21, 38, 0.72);
}

/* ---------- Resultado ---------- */
#amnu-ruleta .amnu-ruleta__result { animation: amnuRuletaIn 0.4s ease both; }
#amnu-ruleta .amnu-ruleta__res-emoji { margin: 0; font-size: 38px; line-height: 1; }
#amnu-ruleta .amnu-ruleta__res-title {
	margin: 6px 0 6px;
	font-size: 24px;
	line-height: 1.15;
	font-weight: 800;
	color: var(--r-bordo);
}
#amnu-ruleta .amnu-ruleta__res-text {
	margin: 0 0 10px;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--r-bordo);
}
#amnu-ruleta .amnu-ruleta__code {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 6px 0 10px;
	padding: 10px 12px;
	background: #fff;
	border: 2px dashed var(--r-terra);
	border-radius: 14px;
}
#amnu-ruleta .amnu-ruleta__code-text {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--r-terra);
	word-break: break-all;
}
#amnu-ruleta .amnu-ruleta__copy {
	flex: none;
	margin: 0;
	padding: 7px 12px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 800;
	color: #fff;
	background: var(--r-bordo);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

/* ---------- Botón flotante para reabrir ---------- */
#amnu-ruleta-launcher {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 99998;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px 11px 12px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	background: var(--r-bordo);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(82, 21, 38, 0.38);
	animation: amnuRuletaPulse 2.6s ease-in-out 4; /* late 4 veces y se queda quieto */
}
#amnu-ruleta-launcher:hover { background: var(--r-terra); }
#amnu-ruleta-launcher .amnu-ruleta-launcher__icon { font-size: 18px; line-height: 1; }
@keyframes amnuRuletaPulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.05); }
}

html.amnu-ruleta-open,
html.amnu-ruleta-open body { overflow: hidden; }

/* ---------- Pantallas chicas ---------- */
@media (max-width: 480px) {
	#amnu-ruleta { padding: 10px; align-items: center; }
	#amnu-ruleta .amnu-ruleta__box {
		max-height: calc(100vh - 20px);
		max-height: calc(100dvh - 20px);
		padding: 22px 16px 16px;
		border-radius: 22px;
	}
	#amnu-ruleta .amnu-ruleta__title { font-size: 23px; }
	#amnu-ruleta .amnu-ruleta__stage { margin: 16px auto 10px; }
	#amnu-ruleta .amnu-ruleta__lead { font-size: 14px; margin-bottom: 10px; }
	#amnu-ruleta .amnu-ruleta__input { height: 48px; }
	#amnu-ruleta .amnu-ruleta__btn,
	#amnu-ruleta .amnu-ruleta__cta { height: 50px; line-height: 50px; font-size: 16px; }
	#amnu-ruleta-launcher { left: 12px; bottom: 12px; font-size: 13px; padding: 10px 14px 10px 10px; }
}

/* Celular acostado: rueda y formulario lado a lado */
@media (max-height: 480px) and (orientation: landscape) {
	#amnu-ruleta .amnu-ruleta__box {
		width: min(100%, 700px);
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas: "titulo titulo" "rueda panel";
		column-gap: 22px;
		text-align: left;
		padding: 14px 20px;
	}
	#amnu-ruleta .amnu-ruleta__kicker,
	#amnu-ruleta .amnu-ruleta__title { grid-area: titulo; margin-bottom: 0; }
	#amnu-ruleta .amnu-ruleta__kicker { display: none; }
	#amnu-ruleta .amnu-ruleta__stage { grid-area: rueda; --w: max(150px, min(60vh, 240px)); margin: 14px 0 6px; }
	#amnu-ruleta .amnu-ruleta__panel { grid-area: panel; align-self: center; }
	#amnu-ruleta .amnu-ruleta__test { display: none; }
	#amnu-ruleta .amnu-ruleta__box.is-result .amnu-ruleta__stage { --w: max(150px, min(60vh, 240px)); margin-bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	#amnu-ruleta .amnu-ruleta__box,
	#amnu-ruleta .amnu-ruleta__backdrop,
	#amnu-ruleta .amnu-ruleta__result,
	#amnu-ruleta-launcher { animation: none; }
	#amnu-ruleta .amnu-ruleta__wheel { transition-duration: 0.6s; }
}


/* Boton flotante: mas grande + Cyber Lunes */
#amnu-ruleta-launcher { gap: 12px; padding: 14px 24px 14px 16px; font-size: 19px; line-height: 1.1; box-shadow: 0 10px 30px rgba(82, 21, 38, 0.45); }
#amnu-ruleta-launcher .amnu-ruleta-launcher__icon { font-size: 30px; }
#amnu-ruleta-launcher .amnu-ruleta-launcher__text { display: block; text-align: left; }
#amnu-ruleta-launcher .amnu-ruleta-launcher__text::before { content: "CYBER AMNU"; display: block; margin-bottom: 3px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--r-rosa); }
@media (max-width: 480px) { #amnu-ruleta-launcher { left: 12px; bottom: 12px; font-size: 16px; padding: 12px 18px 12px 12px; } #amnu-ruleta-launcher .amnu-ruleta-launcher__icon { font-size: 26px; } }