/* ============================================================
   KOMFY — Barra financiación "18 cuotas sin interés"
   Port 1:1 del handoff `komfy-cuotas-bar`.
   Va entre el banner hero y "La comunidad Komfy" (.kh-ugc).
   Scope: .komfy-cuotas--bar
   Ancho/radio/sombra = los de .kh-wrap (menú): 20px laterales, radio 18px.

   NOTA: el handoff hereda --komfy-carbon y --komfy-yellow de la regla
   .komfy-cuotas de komfy-cuotas-banner.css, que hoy NO se carga (el banner
   viejo de 18 cuotas salió del home). Los declaramos acá para que el
   archivo sea autocontenido.
   ============================================================ */

.komfy-cuotas {
	--komfy-carbon: #1C1C1C;
	--komfy-yellow: #F5C518;
}

.komfy-cuotas--bar {
	margin: 40px 20px;
	background: var(--komfy-carbon);
	border-radius: 18px;
	box-shadow: 0 4px 14px rgba(0,0,0,.06);
	padding: 16px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: nowrap;
	color: #fff;
}

.komfy-cuotas-bar-info {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: nowrap;
}

/* En desktop el stack no existe como caja: lead, separador y texto quedan
   en la misma fila que el número. En mobile pasa a columna. */
.komfy-cuotas-bar-stack { display: contents; }

.komfy-cuotas-bar-num {
	font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	font-weight: 600;
	font-size: 46px;
	line-height: .8;
	letter-spacing: -.03em;
	color: #fff;
}

.komfy-cuotas-bar-lead {
	font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: -.01em;
	color: #fff;
	white-space: nowrap;
}

.komfy-cuotas-bar-sep { width: 1px; height: 30px; background: rgba(255,255,255,.22); }

.komfy-cuotas-bar-text {
	font-family: 'Noto Sans', system-ui, -apple-system, sans-serif;
	font-size: 14.5px;
	line-height: 1.4;
	color: #fff;
	margin: 0;
	min-width: 0;
}
.komfy-cuotas-bar-text strong { font-weight: 700; color: #fff; }

.komfy-cuotas-bar-cta {
	font-family: 'Noto Sans', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--komfy-carbon);
	background: #fff;
	border-radius: 999px;
	padding: 12px 24px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease;
}
.komfy-cuotas-bar-cta:hover,
.komfy-cuotas-bar-cta:focus {
	background: var(--komfy-yellow);
	color: var(--komfy-carbon);
	text-decoration: none;
}

/* Copy corto y chevron: solo mobile */
.komfy-cuotas-bar-short { display: none; }
.komfy-cuotas-bar-chev { display: none; }

/* La sección siguiente arranca con el mismo aire que hay entre el hero
   y esta barra (40px). Quitar si la barra se usa en otro lugar. */
.komfy-cuotas--bar + .kh-ugc { padding-top: 0; }

/* El menú (.kh-wrap) pasa a márgenes de 12px y radio 14px a los 820px, pero
   el layout compacto de esta barra recién entra a los 768px. En esa franja
   la barra quedaba 8px más angosta de cada lado. Igualamos la geometría sin
   tocar dónde arranca el contenido compacto. */
@media (max-width: 820px) and (min-width: 769px) {
	.komfy-cuotas--bar { margin-inline: 12px; border-radius: 14px; }
}

/* ---------- Mobile: tira chica de una sola fila ---------- */
@media (max-width: 768px) {
	.komfy-cuotas--bar {
		margin: 24px 20px;
		padding: 10px 12px 10px 16px;
		gap: 10px;
		flex-wrap: nowrap;
		border-radius: 14px;
	}
	.komfy-cuotas-bar-info { gap: 10px; flex-wrap: nowrap; align-items: center; }
	.komfy-cuotas-bar-stack {
		display: flex;
		flex-direction: column;
		gap: 3px;
		min-width: 0;
	}
	.komfy-cuotas-bar-sep { display: none; }
	.komfy-cuotas-bar-text { display: none; }
	.komfy-cuotas-bar-num { font-size: 30px; }
	.komfy-cuotas-bar-lead { font-size: 15px; letter-spacing: 0; }
	.komfy-cuotas-bar-short {
		display: block;
		font-family: 'Noto Sans', system-ui, -apple-system, sans-serif;
		font-size: 11.5px;
		line-height: 1.25;
		color: rgba(255,255,255,.78);
		margin: 0;
		min-width: 0;
	}
	.komfy-cuotas-bar-short strong { color: #fff; font-weight: 700; }
	.komfy-cuotas-bar-cta { display: none; }
	.komfy-cuotas-bar-chev {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 28px;
		height: 28px;
		border-radius: 999px;
		background: #fff;
		color: var(--komfy-carbon);
		text-decoration: none;
	}
}

@media (max-width: 400px) {
	.komfy-cuotas-bar-lead { font-size: 13px; }
	.komfy-cuotas-bar-short { font-size: 11px; }
}