/* UI-018 · 15 % en la primera compra: píldora al final de la franja del contador (inc/cupon-15.php). */

.vs-cupon15 {
	position: relative;
	z-index: 3; /* por encima del enlace que cubre toda la franja (Essential Addons) */
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	order: 99; /* va primero en el HTML; se pinta al final de la franja */
	height: 26px;
	margin-left: 8px;
	padding: 0 12px 0 10px;
	border-radius: 999px;
	background: #fff;
	color: #111 !important;
	font: 800 13px/1 'Nunito', sans-serif;
	white-space: nowrap;
	text-decoration: none !important;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
	transition: transform 0.15s ease;
}
.vs-cupon15:hover,
.vs-cupon15:focus-visible {
	transform: translateY(-1px);
}
/* Separador respecto al cronómetro */
.vs-cupon15::before {
	content: '';
	position: absolute;
	left: -9px;
	top: 50%;
	width: 1px;
	height: 22px;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.5);
}
.vs-cupon15__ico {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: #e0111b;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.vs-cupon15__cta {
	color: #e0111b;
	font-weight: 900;
}

/* Tablet y móvil (< 1200 px): la franja no tiene sitio (en producción el título pasa a dos líneas y la píldora
 * pisa el cronómetro); la píldora va en una línea propia justo debajo, de borde a borde. La franja
 * no se toca (título y cronómetro siguen en una línea): solo deja 28 px libres abajo. Selector más específico
 * que el del header ordenado (UI-015). */
@media (max-width: 1199px) {
	body .elementor-element.elementor-element-15b8fda:has(> .vs-cupon15) {
		position: relative;
		overflow: visible !important;
		margin-bottom: 28px !important;
	}
	.vs-cupon15 {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		justify-content: center;
		gap: 8px;
		height: 28px;
		margin: 0;
		padding: 0 14px;
		border-radius: 0;
		background: #c70f18;
		color: #fff !important;
		font-size: 12px;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		box-shadow: none;
	}
	.vs-cupon15:hover,
	.vs-cupon15:focus-visible {
		transform: none;
	}
	.vs-cupon15::before {
		display: none;
	}
	.vs-cupon15__ico {
		width: 14px;
		height: 14px;
		stroke: #fff;
	}
	.vs-cupon15__cta {
		padding: 3px 9px;
		border-radius: 999px;
		background: #fff;
		color: #c70f18;
		font-size: 11px;
	}
}