/* ═══════════════════════════════════════════════════════════════════
   FRANJA BLACK FRIDAY del header (partials/header.php, $strip 'bf-countdown')
   Negra, con la cuenta atrás y el botón amarillo; va dentro del header y lo
   acompaña al bajar. Cuenta atrás en js/bf-bar.js.
   - La usan la landing de Black Friday, la home y para tiendas.
   - Se carga después de styles.css y antes de black-friday.css, que usa
     estos colores de campaña.
   - Paleta de campaña: negro + amarillo #FFC629, el mismo del mailing y
     de la diapositiva Black Friday del hero.
   ═══════════════════════════════════════════════════════════════════ */
:root {
	--bf-k:#0B0B0C;
	--bf-k2:#17171A;
	--bf-k3:#24242A;
	--bf-y:#FFC629;
	--bf-y-h:#FFD45C;      /* hover del botón amarillo */
	--bf-m:#B8B8C0;        /* texto secundario sobre negro */
	--bf-bar:52px;         /* alto de la franja (el hero de la home lo descuenta de su alto) */
}
/* el header crece con la franja: los anclajes quedan por debajo */
html {
	scroll-padding-top:calc(clamp(68px,5vw,88px) + 1px + var(--bf-bar) + 16px);
}

/* ── botón amarillo (misma forma que .btn de styles.css) ── */
.btn.btn--bf {
	background:var(--bf-y);
	color:var(--bf-k);
	transition:background .2s ease;
}
.btn.btn--bf:hover {
	background:var(--bf-y-h);
}
.btn.btn--bf:focus-visible {
	outline:2px solid var(--bf-y);
	outline-offset:3px;
}

/* ── franja ── */
.bf-bar {
	background:var(--bf-k);
	color:#fff;
}
.bf-bar .wrap {
	height:var(--bf-bar);
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
}
.bf-bar__t {
	font-size:clamp(12px,.85vw,14px);
	font-weight:600;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--bf-y);
	white-space:nowrap;
}
.bf-bar__t span {
	color:var(--bf-m);
}
.bf-bar__r {
	display:flex;
	align-items:center;
	gap:clamp(12px,1.4vw,24px);
	margin-left:auto;
}
.bf-cd {
	display:flex;
	align-items:center;
	gap:6px;
	font-size:13px;
	color:var(--bf-m);
}
.bf-cd b {
	min-width:34px;
	padding:3px 6px;
	text-align:center;
	font-size:15px;
	font-weight:600;
	font-variant-numeric:tabular-nums;
	color:var(--bf-y);
	background:var(--bf-k2);
	border:1px solid var(--bf-k3);
	border-radius:4px;
}
.bf-cd__l {
	margin-right:4px;
}
.bf-bar .btn {
	height:36px;
	padding:0 16px;
	font-size:14px;
}

/* ── adaptación ── */
@media (max-width:760px) {
	.bf-bar__t span {
		display:none;
	}
}
@media (max-width:560px) {
	/* solo cuenta atrás + botón, repartidos a lo ancho */
	.bf-bar__t,.bf-cd__l {
		display:none;
	}
	.bf-bar__r {
		width:100%;
		justify-content:space-between;
	}
	.bf-cd {
		gap:4px;
	}
	.bf-cd b {
		min-width:30px;
		padding:3px 4px;
		font-size:14px;
	}
	.bf-bar .btn {
		padding:0 14px;
		font-size:13px;
	}
}
@media (prefers-reduced-motion:reduce) {
	.btn.btn--bf {
		transition:none;
	}
}