/**
 * CTU Celebración 10 Años — estilos del pop-up.
 * Los colores se inyectan como variables desde PHP:
 *   --ctucel-primario, --ctucel-secundario, --ctucel-acento
 */

:root {
	--ctucel-primario: #002B5C;
	--ctucel-secundario: #003B78;
	--ctucel-acento: #D6A018;
}

/* Bloquea el scroll del fondo cuando el pop-up está abierto. */
body.ctucel-abierto {
	overflow: hidden;
}

/* ---- Fondo / overlay ---- */
.ctucel-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 12, 28, 0.6);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.35s ease;
}
.ctucel-overlay.ctucel-visible {
	opacity: 1;
}

/* Canvas del confeti (por encima del fondo, detrás de la tarjeta). */
.ctucel-canvas {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

/* ---- Tarjeta ---- */
.ctucel-modal {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 460px;
	box-sizing: border-box;
	padding: 40px 34px 34px;
	text-align: center;
	color: #fff;
	border-radius: 22px;
	background:
		radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.08), transparent 60%),
		linear-gradient(160deg, var(--ctucel-primario), var(--ctucel-secundario));
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow:
		0 30px 70px rgba(0, 12, 28, 0.55),
		inset 0 0 0 3px rgba(214, 160, 24, 0.25);
	transform: translateY(20px) scale(0.94);
	opacity: 0;
	transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4), opacity 0.4s ease;
	overflow: hidden;
}
.ctucel-visible .ctucel-modal {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* Brillo decorativo superior dorado. */
.ctucel-modal::before {
	content: "";
	position: absolute;
	top: -60%;
	left: -20%;
	width: 140%;
	height: 120%;
	background: radial-gradient(closest-side, rgba(214, 160, 24, 0.22), transparent);
	pointer-events: none;
}

/* ---- Botón cerrar ---- */
.ctucel-cerrar {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.ctucel-cerrar:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: rotate(90deg);
}

/* ---- Logo opcional ---- */
.ctucel-logo {
	max-width: 120px;
	height: auto;
	margin: 0 auto 14px;
	display: block;
}

/* ---- Kicker (años) ---- */
.ctucel-kicker {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--ctucel-acento);
	padding: 4px 14px;
	border: 1px solid rgba(214, 160, 24, 0.5);
	border-radius: 999px;
	margin-bottom: 10px;
}

/* ---- Número grande ---- */
.ctucel-numero {
	position: relative;
	line-height: 1;
	margin: 6px 0 8px;
}
.ctucel-numero-cifra {
	display: inline-block;
	font-size: 6.2rem;
	font-weight: 900;
	letter-spacing: -2px;
	/* Degradado dorado con una banda brillante que luego "barre" el número. */
	background: linear-gradient(100deg,
		#a97c10 0%,
		var(--ctucel-acento) 25%,
		#ffe9a8 42%,
		#fffdf0 50%,   /* destello */
		#ffe9a8 58%,
		var(--ctucel-acento) 75%,
		#a97c10 100%);
	background-size: 250% 100%;
	background-position: 50% 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--ctucel-acento);
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
	transform: scale(0.6);
	opacity: 0;
}
.ctucel-visible .ctucel-numero-cifra {
	animation:
		ctucel-pop 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.5) 0.15s forwards,
		ctucel-destello 3.2s ease-in-out 1s infinite,
		ctucel-brillo 3.2s ease-in-out 1s infinite;
}

/* El destello: mueve la banda brillante de un lado al otro y hace una pausa. */
@keyframes ctucel-destello {
	0%   { background-position: 150% 0; }
	55%  { background-position: -50% 0; }
	100% { background-position: -50% 0; }
}

/* Resplandor dorado que pulsa junto con el destello. */
@keyframes ctucel-brillo {
	0%, 100% { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 2px rgba(214, 160, 24, 0.35)); }
	50%      { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 16px rgba(244, 196, 48, 0.85)); }
}
.ctucel-numero-texto {
	display: block;
	margin-top: -6px;
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: 8px;
	text-indent: 8px;
	color: #fff;
}

@keyframes ctucel-pop {
	0%   { transform: scale(0.6) rotate(-8deg); opacity: 0; }
	70%  { transform: scale(1.12) rotate(2deg); opacity: 1; }
	100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---- Título y mensaje ---- */
.ctucel-titulo {
	margin: 10px 0 8px;
	font-size: 1.55rem;
	font-weight: 800;
	color: #fff;
	line-height: 1.2;
}
.ctucel-mensaje {
	margin: 0 auto 22px;
	max-width: 360px;
	font-size: 0.98rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

/* ---- Botón CTA ---- */
.ctucel-boton {
	display: inline-block;
	padding: 13px 32px;
	border-radius: 999px;
	background: linear-gradient(180deg, #f0bd3e, var(--ctucel-acento));
	color: var(--ctucel-primario) !important;
	font-size: 1rem;
	font-weight: 800;
	text-decoration: none;
	letter-spacing: 0.3px;
	box-shadow: 0 8px 20px rgba(214, 160, 24, 0.4);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ctucel-boton:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(214, 160, 24, 0.55);
	color: var(--ctucel-primario) !important;
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
	.ctucel-modal { padding: 34px 22px 28px; border-radius: 18px; }
	.ctucel-numero-cifra { font-size: 4.8rem; }
	.ctucel-titulo { font-size: 1.3rem; }
}

/* Respeta a quien prefiere menos movimiento. */
@media (prefers-reduced-motion: reduce) {
	.ctucel-overlay,
	.ctucel-modal,
	.ctucel-numero-cifra { transition: none; animation: none; }
	.ctucel-numero-cifra {
		transform: none;
		opacity: 1;
		/* Dorado fijo (sin barrido) para quien prefiere menos movimiento. */
		background: linear-gradient(180deg, #ffe9a8, var(--ctucel-acento) 55%, #a97c10);
		background-size: auto;
		-webkit-background-clip: text;
		background-clip: text;
	}
}