
.cem27 [hidden],
.cem27-message[hidden],
.cem27-detail[hidden] {
	display: none !important;
}

.cem27-message:empty {
	display: none !important;
}


.cem27,
.cem27 *,
.cem27 *::before,
.cem27 *::after {
	box-sizing: border-box !important;
}

.cem27 {
	font-family: inherit !important;
}

.cem27-title,
.cem27-prefix,
.cem27-label,
.cem27-detail,
.cem27-message {
	font-family: inherit !important;
}

.cem27-body {
	position: relative !important;
	z-index: 3 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	width: 100% !important;
}

.cem27-countdown {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 10px !important;
	width: 100% !important;
}

.cem27-segment {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px !important;
	min-height: 76px !important;
	padding: 10px 6px 8px !important;
	text-align: center !important;
	border-radius: 14px !important;
	background: rgba(8, 15, 38, .72) !important;
	border: 1px solid rgba(255,255,255,.10) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.14) !important;
}

.cem27-value {
	display: block !important;
	margin: 0 !important;
	color: #ffffff !important;
	font-size: clamp(38px, 4.7vw, 66px) !important;
	line-height: .9 !important;
	font-weight: 900 !important;
	letter-spacing: -.055em !important;
	text-shadow: 0 3px 12px rgba(0,0,0,.16) !important;
}

.cem27-label {
	display: block !important;
	color: rgba(255,255,255,.96) !important;
	font-size: 13px !important;
	line-height: 1 !important;
	font-weight: 900 !important;
	letter-spacing: .055em !important;
	text-transform: uppercase !important;
}

.cem27-message {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 78px !important;
	padding: 16px !important;
	border-radius: 14px !important;
	background: rgba(8, 15, 38, .76) !important;
	color: #ffffff !important;
	font-size: 24px !important;
	font-weight: 900 !important;
	text-align: center !important;
}

.cem27-prefix {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	color: rgba(255,255,255,.98) !important;
	font-size: 18px !important;
	line-height: 1.1 !important;
	font-weight: 900 !important;
	letter-spacing: .02em !important;
	text-align: center !important;
}

.cem27-prefix::before {
	content: "Cuenta regresiva" !important;
	display: inline-flex !important;
	padding: 6px 11px !important;
	border-radius: 999px !important;
	background: rgba(255,255,255,.18) !important;
	color: rgba(255,255,255,.98) !important;
	font-size: 12px !important;
	font-weight: 900 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
}

.cem27-detail {
	display: none !important;
}

.cem27-mini {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 20px 22px 18px !important;
	border-radius: 22px !important;
	background: linear-gradient(135deg, #7a6cb0 0%, #8074bb 45%, #c14d86 100%) !important;
	box-shadow: 0 18px 38px rgba(69, 51, 128, .22) !important;
	overflow: hidden !important;
	color: #ffffff !important;
}

.cem27-mini::before,
.cem27-card::before {
	content: "" !important;
	position: absolute !important;
	left: 16px !important;
	top: 16px !important;
	z-index: 1 !important;
	width: 76px !important;
	height: 76px !important;
	border-radius: 0 40px 0 40px !important;
	background: rgba(176, 236, 180, .50) !important;
}

.cem27-mini::after,
.cem27-card::after {
	content: "" !important;
	position: absolute !important;
	right: -24px !important;
	bottom: -30px !important;
	z-index: 1 !important;
	width: 132px !important;
	height: 132px !important;
	border-radius: 16px 16px 0 0 !important;
	background: rgba(237, 94, 146, .72) !important;
}

.cem27-mini .cem27-title,
.cem27-card .cem27-title {
	position: relative !important;
	z-index: 3 !important;
	display: block !important;
	margin: 0 !important;
	color: #ffffff !important;
	text-align: center !important;
	font-size: clamp(34px, 4.4vw, 56px) !important;
	line-height: 1.02 !important;
	font-weight: 900 !important;
	letter-spacing: -.035em !important;
	text-shadow: 0 2px 10px rgba(0,0,0,.12) !important;
}

.cem27-mini .cem27-countdown,
.cem27-card .cem27-countdown {
	position: relative !important;
	z-index: 3 !important;
	padding: 9px 12px !important;
	background: rgba(38, 40, 88, .58) !important;
	backdrop-filter: blur(3px) !important;
	border-radius: 0 !important;
}

.cem27-mini .cem27-segment,
.cem27-card .cem27-segment {
	min-height: 88px !important;
	padding: 8px 6px 7px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.cem27-mini .cem27-value,
.cem27-card .cem27-value {
	font-size: clamp(42px, 5.4vw, 76px) !important;
}

.cem27-mini .cem27-label,
.cem27-card .cem27-label {
	font-size: clamp(12px, 1.2vw, 17px) !important;
	letter-spacing: .05em !important;
}

.cem27-mini .cem27-segment-seconds .cem27-value,
.cem27-card .cem27-segment-seconds .cem27-value {
	color: #ff5d96 !important;
}

.cem27-mini .cem27-prefix,
.cem27-card .cem27-prefix {
	font-size: 15px !important;
	margin-top: -2px !important;
}

.cem27-mini .cem27-prefix::before,
.cem27-card .cem27-prefix::before {
	font-size: 11px !important;
	padding: 5px 10px !important;
}

.cem27-mini .cem27-message,
.cem27-card .cem27-message {
	min-height: 88px !important;
	border-radius: 0 !important;
	background: rgba(38, 40, 88, .72) !important;
	font-size: 26px !important;
}

.cem27-card {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
	width: 100% !important;
	padding: 24px 26px 22px !important;
	border-radius: 26px !important;
	background: linear-gradient(135deg, #7a6cb0 0%, #8074bb 45%, #c14d86 100%) !important;
	box-shadow: 0 20px 44px rgba(69, 51, 128, .25) !important;
	overflow: hidden !important;
	color: #ffffff !important;
}

.cem27-topbar {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 7px 10px !important;
	border-radius: 16px !important;
	background: rgba(255,255,255,.08) !important;
	border: 1px solid rgba(255,255,255,.12) !important;
	color: #ffffff !important;
}

.cem27-topbar .cem27-title { display: none !important; }
.cem27-topbar .cem27-body { gap: 6px !important; }
.cem27-topbar .cem27-prefix { font-size: 12px !important; }
.cem27-topbar .cem27-prefix::before { display: none !important; }
.cem27-topbar .cem27-countdown {
	display: inline-grid !important;
	grid-template-columns: repeat(4, auto) !important;
	gap: 5px !important;
	padding: 0 !important;
	background: transparent !important;
}
.cem27-topbar .cem27-segment {
	min-height: auto !important;
	padding: 6px 7px !important;
	border-radius: 10px !important;
	background: rgba(255,255,255,.08) !important;
	border: 1px solid rgba(255,255,255,.08) !important;
	box-shadow: none !important;
}
.cem27-topbar .cem27-value { font-size: 19px !important; line-height: 1 !important; }
.cem27-topbar .cem27-label { font-size: 9px !important; letter-spacing: .04em !important; }
.cem27-topbar .cem27-message { min-height: auto !important; padding: 9px 10px !important; border-radius: 12px !important; font-size: 14px !important; }

.cem27-inline {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 9px 11px !important;
	border-radius: 16px !important;
	background: #f8fafc !important;
	border: 1px solid rgba(15, 23, 42, .08) !important;
	color: #0f172a !important;
}
.cem27-inline .cem27-prefix { color: #0f172a !important; font-size: 13px !important; }
.cem27-inline .cem27-prefix::before { display: none !important; }
.cem27-inline .cem27-countdown { grid-template-columns: repeat(4, auto) !important; gap: 5px !important; }
.cem27-inline .cem27-segment { min-height: auto !important; padding: 7px 7px 6px !important; background: #ffffff !important; border-radius: 11px !important; border: 1px solid rgba(15, 23, 42, .08) !important; box-shadow: none !important; }
.cem27-inline .cem27-value { color: #0f172a !important; font-size: 22px !important; }
.cem27-inline .cem27-label { color: #334155 !important; font-size: 9px !important; }
.cem27-inline .cem27-message { min-height: auto !important; padding: 9px 11px !important; background: #ffffff !important; border-radius: 12px !important; color: #0f172a !important; font-size: 14px !important; }

@media (max-width: 767px) {
	.cem27-mini,
	.cem27-card {
		gap: 10px !important;
		padding: 16px 12px 14px !important;
		border-radius: 18px !important;
	}
	.cem27-mini::before,
	.cem27-card::before {
		left: 10px !important;
		top: 10px !important;
		width: 60px !important;
		height: 60px !important;
		border-radius: 0 34px 0 34px !important;
	}
	.cem27-mini::after,
	.cem27-card::after {
		right: -28px !important;
		bottom: -34px !important;
		width: 105px !important;
		height: 105px !important;
	}
	.cem27-mini .cem27-title,
	.cem27-card .cem27-title {
		font-size: clamp(27px, 8vw, 38px) !important;
		line-height: .98 !important;
	}
	.cem27-mini .cem27-prefix,
	.cem27-card .cem27-prefix {
		flex-wrap: nowrap !important;
		gap: 7px !important;
		font-size: 13px !important;
	}
	.cem27-mini .cem27-prefix::before,
	.cem27-card .cem27-prefix::before {
		font-size: 10px !important;
		padding: 5px 8px !important;
		letter-spacing: .05em !important;
	}
	.cem27-countdown,
	.cem27-mini .cem27-countdown,
	.cem27-card .cem27-countdown {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 3px !important;
		padding: 8px 6px !important;
	}
	.cem27-mini .cem27-segment,
	.cem27-card .cem27-segment {
		min-height: 66px !important;
		padding: 5px 2px 4px !important;
		gap: 4px !important;
	}
	.cem27-mini .cem27-value,
	.cem27-card .cem27-value,
	.cem27-value {
		font-size: clamp(25px, 8vw, 38px) !important;
		letter-spacing: -.055em !important;
	}
	.cem27-mini .cem27-label,
	.cem27-card .cem27-label,
	.cem27-label {
		font-size: clamp(7px, 2.35vw, 10px) !important;
		letter-spacing: .035em !important;
	}
	.cem27-mini .cem27-message,
	.cem27-card .cem27-message {
		min-height: 66px !important;
		font-size: 18px !important;
	}
	.cem27-topbar,
	.cem27-inline { width: 100% !important; }
	.cem27-topbar .cem27-countdown,
	.cem27-inline .cem27-countdown {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		width: 100% !important;
	}
	.cem27-topbar .cem27-segment,
	.cem27-inline .cem27-segment { padding: 6px 3px !important; }
	.cem27-topbar .cem27-value,
	.cem27-inline .cem27-value { font-size: 18px !important; }
	.cem27-topbar .cem27-label,
	.cem27-inline .cem27-label { font-size: 8px !important; }
}

@media (max-width: 390px) {
	.cem27-mini .cem27-title,
	.cem27-card .cem27-title { font-size: 25px !important; }
	.cem27-mini .cem27-prefix,
	.cem27-card .cem27-prefix { font-size: 12px !important; }
	.cem27-mini .cem27-value,
	.cem27-card .cem27-value,
	.cem27-value { font-size: 24px !important; }
	.cem27-mini .cem27-label,
	.cem27-card .cem27-label,
	.cem27-label { font-size: 7px !important; }
}
