/* ============================================================
   KOMFY BANNER DE LANZAMIENTO.
   Port 1:1 del handoff de Claude Design: `Banner Lanzamiento.html`
   → componentes LanzB (Desktop 1580x700) y LanzBMobile (Mobile 820x1000)
   de `lanzamiento.jsx`, con los tokens de `styles/tokens.css`.

   OVERLAY sobre el slider del hero: en el handoff la foto es un
   <image-slot>; acá la pone la slide cargada en el admin de Tiendanube,
   así cada lanzamiento se cambia sin tocar el tema.
   Scope: .komfy-lanz
   ============================================================ */

/* La sección del slider es el contexto de posicionamiento del overlay. */
.js-main-slider-section {
	position: relative;
}

/* Mientras el overlay de lanzamiento está activo, ocultamos el texto propio
   de cada slide (título, descripción y botón) para que no se encime con la
   plantilla. Para reactivar el texto del slider, quitar esta regla. */
.js-main-slider-section .js-swiper-text {
	display: none !important;
}

/* Tokens del handoff (styles/tokens.css). */
.komfy-lanz {
	--komfy-yellow: #F5C518;
	--komfy-tiza: #FAF0E6;
	--komfy-carbon: #1C1C1C;
	--font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--font-body: 'Noto Sans', system-ui, -apple-system, sans-serif;
}

/* .lz — el contenedor. pointer-events:none para no bloquear el swipe ni las
   flechas del slider; sólo el botón es clickeable. */
.komfy-lanz--overlay {
	position: absolute;
	inset: 0;
	z-index: 6;
	overflow: hidden;
	pointer-events: none;
	background: transparent; /* en el handoff es --komfy-carbon, acá va la foto del slider */
}

/* .lzB-scrim — degradado LATERAL (izq → der), no de abajo. */
.komfy-lanz-veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(20, 18, 16, .80) 0%,
		rgba(20, 18, 16, .70) 26%,
		rgba(20, 18, 16, .50) 42%,
		rgba(20, 18, 16, .22) 58%,
		rgba(20, 18, 16, 0) 74%
	);
}

/* .lzB-copy — abajo a la izquierda. El handoff usa padding 0 72px 56px sobre
   un lienzo de 1580; 72px ≈ el borde del container de 1440, así que en
   pantallas anchas lo alineamos ahí y nunca bajamos de 72px. */
.komfy-lanz-copy {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 0 max(72px, calc((100% - 1440px) / 2)) 56px;
	pointer-events: none;
}

/* .lzB-eyebrow — OJO: Noto Sans 700, no Barlow. */
.komfy-lanz-eyebrow {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--komfy-yellow);
}

/* .lzB-h */
.komfy-lanz-h {
	margin: 14px 0 0;
	max-width: 720px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 54px;
	line-height: 1.02;
	letter-spacing: -.01em;
	color: #fff;
	text-wrap: pretty;
}

/* .lzB-sub — blanco puro y en una sola línea, como el handoff. */
.komfy-lanz-sub {
	margin: 12px 0 0;
	max-width: none;
	white-space: nowrap;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.5;
	color: #fff;
}

/* .btn + .lz-btn-white (tokens.css). El tema de Tiendanube no tiene .btn,
   así que va todo acá. */
.komfy-lanz-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 22px;
	padding: 13px 26px;
	border-radius: 999px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
	color: var(--komfy-carbon);
	background: #fff;
	text-decoration: none;
	pointer-events: auto;
	transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.komfy-lanz-cta:hover,
.komfy-lanz-cta:focus {
	background: var(--komfy-tiza);
	color: var(--komfy-carbon);
	transform: translateY(-1px);
	text-decoration: none;
}

/* ---------- Desktop chico: bajamos la escala del lienzo de 1580 ---------- */
@media (max-width: 1279px) {
	.komfy-lanz-copy { padding: 0 48px 44px; }
	.komfy-lanz-h { font-size: 44px; max-width: 600px; }
	.komfy-lanz-sub { font-size: 16px; }
}

/* ---------- Tablet: se suelta el nowrap de la bajada ---------- */
@media (max-width: 1023px) {
	.komfy-lanz-copy { padding: 0 32px 36px; }
	.komfy-lanz-h { font-size: 38px; max-width: 520px; }
	.komfy-lanz-sub { font-size: 15px; white-space: normal; max-width: 440px; }
}

/* ---------- Mobile — artboard "LanzBMobile" 820x1000 ----------
   El lienzo del handoff es de 820px de ancho; un teléfono real ronda los
   375–430, así que las proporciones se mantienen y los tamaños se bajan a
   escala legible (el handoff a 1:1 daría un título de ~24px). */
@media (max-width: 768px) {
	/* .lzBm-scrim — de abajo hacia arriba + un refuerzo lateral. */
	.komfy-lanz-veil {
		background:
			linear-gradient(0deg,
				rgba(20, 18, 16, .82) 0%,
				rgba(20, 18, 16, .72) 18%,
				rgba(20, 18, 16, .62) 30%,
				rgba(20, 18, 16, .40) 44%,
				rgba(20, 18, 16, .12) 58%,
				rgba(20, 18, 16, 0) 72%),
			linear-gradient(90deg,
				rgba(20, 18, 16, .50) 0%,
				rgba(20, 18, 16, .26) 40%,
				rgba(20, 18, 16, 0) 70%);
	}

	/* .lzBm-copy — 0 56px 60px sobre 820 ≈ 26px/28px sobre 390. */
	.komfy-lanz-copy { padding: 0 26px 28px; }

	.komfy-lanz-eyebrow { font-size: 11px; }
	.komfy-lanz-h { font-size: 34px; margin-top: 12px; max-width: none; }
	.komfy-lanz-sub { font-size: 15px; margin-top: 12px; max-width: 34ch; white-space: normal; }
	.komfy-lanz-cta { margin-top: 20px; }
}