/* Cintillo Cupón */
.cc-cintillo {
	--cc-gap: 40px;
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	background-color: #111;
	color: #fff;
	line-height: 1.4;
}

.cc-track {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	/* flex: none evita que el track se encoja al ancho de la pantalla */
	flex: none;
	width: max-content;
	min-width: 100%;
}

.cc-static .cc-track {
	justify-content: center;
	width: 100%;
	flex-wrap: wrap;
}

.cc-group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: var(--cc-gap);
	padding-right: var(--cc-gap);
}

.cc-static .cc-group {
	padding: 0 12px;
	flex-shrink: 1;
}

.cc-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.cc-static .cc-item {
	white-space: normal;
	flex-wrap: wrap;
	justify-content: center;
}

.cc-code {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 10px;
	font: inherit;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: inherit;
	color: #111;
	background-color: #ffd400;
	border: 1px dashed #111;
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
	text-transform: none;
	transition: background-color .2s, color .2s, border-color .2s, transform .15s;
}

.cc-code:hover {
	transform: translateY(-1px);
}

.cc-code:active {
	transform: scale(.97);
}

.cc-code:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.cc-code-text {
	display: inline-block;
	text-align: center;
}

.cc-copy-icon {
	display: inline-flex;
	line-height: 1;
}

.cc-copy-icon svg,
.cc-sep svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.cc-sep {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

/* Animación: el JS desplaza el track (2 grupos idénticos) el ancho de un grupo en bucle */
.cc-animated .cc-track {
	will-change: transform;
	backface-visibility: hidden;
}

/* Evita que estilos del tema (p. ej. botones al 100% en móvil) rompan la fila */
.cc-animated .cc-group,
.cc-animated .cc-item,
.cc-animated .cc-sep,
.cc-animated .cc-code {
	flex: 0 0 auto;
}

.cc-animated .cc-prefix,
.cc-animated .cc-suffix {
	white-space: nowrap;
}

.cc-cintillo .cc-code {
	width: auto;
	min-width: 0;
	max-width: none;
	height: auto;
	min-height: 0;
	box-sizing: border-box;
}

/* Bordes difuminados */
.cc-fade-yes .cc-cintillo {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* Región accesible para anunciar "Copiado" */
.cc-live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}