/**
 * YoLaburo home desktop (≥900px).
 * Mobile: sin cambios (bloques extra ocultos).
 *
 * v2 (2026-11): tokens --ylb-d-*, panel dibujado con ::before para que la
 * franja de valores y «¿Cómo funciona?» queden fuera del panel sin tocar el
 * markup, pasos con icono a la izquierda, mascota + nota WA en fila.
 */

.zp-yolaburo-mascot__wa-note {
	display: none;
}

.zp-ylb-hero-ctas,
.zp-ylb-search-card-title,
.zp-ylb-desktop-value-band,
.zp-ylb-desktop-how,
.zp-ylb-live {
	display: none;
}

@media (min-width: 900px) {
	/* ── Tokens ─────────────────────────────────────────────── */
	body.zp-yolaburo-home-desktop {
		--ylb-d-primary: #2563eb;
		--ylb-d-primary-dark: #1d4ed8;
		--ylb-d-text: #0f172a;
		--ylb-d-body: #334155;
		--ylb-d-muted: #64748b;
		--ylb-d-border: #e2e8f0;
		--ylb-d-surface: #ffffff;
		--ylb-d-tint: #eef2ff;
		--ylb-d-band: #f8fafc;
		--ylb-d-green: #84cc16;
		--ylb-d-green-light: #a3e635;
		--ylb-d-wa: #25d366;
		--ylb-d-wa-text: #15803d;
		--ylb-d-radius-lg: 26px;
		--ylb-d-radius-card: 20px;
		--ylb-d-radius-btn: 12px;
		--ylb-d-max: 1240px;
		--ylb-d-gutter: 24px;
		/* Isotipo YoLaburo como marca de agua (anillo + punto verde + puntito).
		   Proporciones del logo: interior 0.63R, puntos 0.23R, puntito a (R, 0.96R). */
		--ylb-d-iso-x: 52%;
		--ylb-d-iso-y: 36%;
		--ylb-d-iso-r: 110px;
		--ylb-d-iso:
			radial-gradient(circle calc(var(--ylb-d-iso-r) + 1px) at var(--ylb-d-iso-x) var(--ylb-d-iso-y), transparent calc(var(--ylb-d-iso-r) * 0.63), rgba(22, 89, 184, 0.08) calc(var(--ylb-d-iso-r) * 0.63 + 1px) var(--ylb-d-iso-r), transparent calc(var(--ylb-d-iso-r) + 1px)),
			radial-gradient(circle calc(var(--ylb-d-iso-r) * 0.23 + 1px) at var(--ylb-d-iso-x) var(--ylb-d-iso-y), rgba(29, 191, 115, 0.14) calc(var(--ylb-d-iso-r) * 0.23), transparent calc(var(--ylb-d-iso-r) * 0.23 + 1px)),
			radial-gradient(circle calc(var(--ylb-d-iso-r) * 0.23 + 1px) at calc(var(--ylb-d-iso-x) + var(--ylb-d-iso-r)) calc(var(--ylb-d-iso-y) + var(--ylb-d-iso-r) * 0.96), rgba(22, 89, 184, 0.09) calc(var(--ylb-d-iso-r) * 0.23), transparent calc(var(--ylb-d-iso-r) * 0.23 + 1px));
		--ylb-d-pad: 36px;
		--ylb-d-col-gap: 36px;
		--ylb-d-col2: minmax(340px, 400px);
		--ylb-d-shadow-card: 0 16px 36px rgba(15, 23, 42, 0.07);
		--ylb-d-shadow-panel: 0 18px 48px rgba(15, 23, 42, 0.06);
		--ylb-d-shadow-btn: 0 8px 20px rgba(37, 99, 235, 0.28);
		--ylb-d-shadow-soft: 0 6px 16px rgba(15, 23, 42, 0.06);
	}

	body.zp-yolaburo-home-desktop .zp-ylb-hero-ctas,
	body.zp-yolaburo-home-desktop .zp-ylb-search-card-title,
	body.zp-yolaburo-home-desktop .zp-ylb-desktop-value-band,
	body.zp-yolaburo-home-desktop .zp-ylb-desktop-how {
		display: flex;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-live {
		display: inline-flex;
	}

	body.zp-yolaburo-home-desktop .zp-app-hero,
	body.zp-yolaburo-home-desktop .zp-app-search-wrap,
	body.zp-yolaburo-home-desktop .zp-home-explore,
	body.zp-yolaburo-home-desktop .zp-ylb-home-stack,
	body.zp-yolaburo-home-desktop .zp-section--ylb-trial-nearby,
	body.zp-yolaburo-home-desktop .zp-home-explore--ylb-trial,
	body.zp-yolaburo-home-desktop .zp-ylb-trial-allies-foot {
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	body.zp-yolaburo-home-desktop .zp-app-home {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	/* Desktop: offset = altura real del header (no 108px móvil → franja gris) */
	body.zp-yolaburo-home-desktop.zp-home-inplace-search.zp-market-home .zp-home.zp-home--app-redesign,
	body.zp-yolaburo-home-desktop.zp-zippyn-light-surfaces.zp-market-home .zp-home.zp-home--app-redesign {
		--zp-home-header-offset: calc(env(safe-area-inset-top, 0px) + var(--zp-header-desktop-min-h, 72px));
		padding-top: var(--zp-home-header-offset) !important;
		margin-top: 0 !important;
	}

	body.zp-yolaburo-home-desktop.zp-market-home .zp-home.zp-home--app-redesign .zp-ylb-desktop-hero {
		margin-top: 0;
	}

	body.zp-yolaburo-home-desktop.zp-home-inplace-search .zp-app-home,
	body.zp-yolaburo-home-desktop.zp-home-inplace-search .zp-app-hero {
		padding-top: 0 !important;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-home-hero-visual {
		display: none !important;
	}

	/* ── Grilla del hero ────────────────────────────────────────
	 * Columnas: pad | col 1 | gap | col 2 | pad
	 * Filas:    pad-top | copy+card | CTAs+mascota | categorías | pad-bottom
	 *           | espacio | franja valores | espacio | cómo funciona
	 * El panel blanco es ::before (filas 1–6); franja y pasos quedan fuera.
	 */
	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero {
		position: relative;
		isolation: isolate;
		display: grid;
		grid-template-columns:
			[full-start] var(--ylb-d-pad)
			[main-start] minmax(0, 1fr)
			var(--ylb-d-col-gap)
			[c2-start] var(--ylb-d-col2) [c2-end]
			var(--ylb-d-pad) [full-end];
		grid-template-rows:
			[panel-start] 32px
			auto
			auto
			auto
			24px [panel-end]
			28px
			auto
			32px
			auto;
		gap: 0;
		align-items: start;
		width: min(var(--ylb-d-max), calc(100% - 2 * var(--ylb-d-gutter)));
		max-width: var(--ylb-d-max);
		margin: 0 auto 8px;
		padding: 0;
		box-sizing: border-box;
		background: none;
		border: 0;
		box-shadow: none;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero::before {
		content: "";
		grid-column: full-start / full-end;
		grid-row: panel-start / panel-end;
		align-self: stretch;
		z-index: -1;
		border-radius: 0 0 var(--ylb-d-radius-lg) var(--ylb-d-radius-lg);
		border: 1px solid rgba(226, 232, 240, 0.9);
		/* Decoración: anillos finos + círculos azules de baja opacidad + lavados suaves.
		   Todo es fondo del panel: no captura clics ni tapa contenido. */
		background:
			/* isotipo YoLaburo (marca de agua) */
			var(--ylb-d-iso),
			/* anillo chico arriba a la izquierda */
			radial-gradient(circle 56px at 5% 8%, transparent 54px, rgba(37, 99, 235, 0.14) 55px 56.5px, transparent 57.5px),
			/* círculo azul grande, apenas visible, detrás de card + mascota */
			radial-gradient(circle 230px at 90% 34%, rgba(37, 99, 235, 0.06) 229px, transparent 230px),
			/* círculo azul medio junto a las categorías */
			radial-gradient(circle 120px at 101% 96%, rgba(37, 99, 235, 0.06) 119px, transparent 120px),
			/* círculo verde abajo a la izquierda */
			radial-gradient(circle 90px at 2% 94%, rgba(132, 204, 22, 0.10) 89px, transparent 90px),
			/* lavados suaves originales */
			radial-gradient(600px 320px at 92% 6%, rgba(37, 99, 235, 0.07), transparent 70%),
			radial-gradient(520px 300px at 4% 100%, rgba(132, 204, 22, 0.07), transparent 70%),
			rgba(255, 255, 255, 0.86);
		box-shadow: var(--ylb-d-shadow-panel);
		pointer-events: none;
	}

	/* Trama de puntos en la esquina superior izquierda, se desvanece hacia el centro */
	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero::after {
		content: "";
		grid-column: full-start / full-end;
		grid-row: panel-start / panel-end;
		align-self: stretch;
		z-index: -1;
		border-radius: 0 0 var(--ylb-d-radius-lg) var(--ylb-d-radius-lg);
		background-image: radial-gradient(rgba(37, 99, 235, 0.22) 1.4px, transparent 1.6px);
		background-size: 22px 22px;
		background-position: 12px 12px;
		-webkit-mask-image: radial-gradient(420px 260px at 0% 0%, #000 20%, transparent 75%);
		mask-image: radial-gradient(420px 260px at 0% 0%, #000 20%, transparent 75%);
		opacity: var(--ylb-d-deco-opacity, 1);
		pointer-events: none;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-yolaburo-search-mascot-row,
	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-app-search-wrap {
		display: contents;
	}

	/* ── Columna 1: copy + CTAs ─────────────────────────────── */
	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero > .zp-app-hero {
		grid-column: 2;
		grid-row: 2;
		align-self: end;
		max-width: none;
		padding: 0 !important;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero > .zp-ylb-hero-ctas {
		grid-column: 2;
		grid-row: 3;
		align-self: start;
		flex-wrap: wrap;
		gap: 12px;
		margin: 24px 0 0;
		padding: 0;
	}

	body.zp-yolaburo-home-desktop .zp-app-hero__logo-wrap {
		display: none !important;
	}

	body.zp-yolaburo-home-desktop .zp-home-lab-eyebrow {
		margin: 0 0 18px !important;
		padding: 6px 12px 6px 10px;
		border-color: #c7d7fe;
		background: var(--ylb-d-surface);
		color: var(--ylb-d-primary-dark);
	}

	body.zp-yolaburo-home-desktop .zp-home-lab-eyebrow__dot {
		background: var(--ylb-d-green);
		box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.22);
	}

	body.zp-yolaburo-home-desktop .zp-app-hero:has(.zp-ylb-live) .zp-home-lab-eyebrow {
		display: none !important;
	}

	/* ── Tira en vivo (reemplaza eyebrow en desktop) ─────────── */
	body.zp-yolaburo-home-desktop .zp-ylb-live {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		max-width: 100%;
		min-width: 0;
		height: 34px;
		margin: 0 0 18px;
		padding: 0 14px 0 12px;
		box-sizing: border-box;
		border: 1px solid #c7d7fe;
		border-radius: 999px;
		background: var(--ylb-d-surface, #ffffff);
		font-size: 13px;
		line-height: 1.25;
		color: var(--ylb-d-body, #334155);
		vertical-align: middle;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-live__dot {
		flex-shrink: 0;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--ylb-d-green, #84cc16);
		box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.22);
	}

	@media (prefers-reduced-motion: no-preference) {
		body.zp-yolaburo-home-desktop .zp-ylb-live__dot {
			animation: zp-ylb-live-dot-pulse 2.4s ease-in-out infinite;
		}
	}

	@keyframes zp-ylb-live-dot-pulse {
		0%,
		100% {
			opacity: 1;
			transform: scale(1);
		}
		50% {
			opacity: 0.72;
			transform: scale(0.92);
		}
	}

	body.zp-yolaburo-home-desktop .zp-ylb-live__count {
		flex-shrink: 0;
		white-space: nowrap;
		color: var(--ylb-d-body, #334155);
		font-weight: 600;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-live__count strong {
		font-weight: 700;
		color: var(--ylb-d-text, #0f172a);
	}

	body.zp-yolaburo-home-desktop .zp-ylb-live__sep {
		flex-shrink: 0;
		color: #94a3b8;
		font-weight: 600;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-live__items {
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		height: 1.25em;
		margin: 0;
		padding: 0;
		list-style: none;
		overflow: hidden;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-live__item {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		margin: 0;
		padding: 0;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		pointer-events: none;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-live__item.is-active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-live__item a {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--ylb-d-body, #334155);
		font-weight: 600;
		text-decoration: none;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-live__item a:hover,
	body.zp-yolaburo-home-desktop .zp-ylb-live__item a:focus-visible {
		text-decoration: underline;
		color: var(--ylb-d-text, #0f172a);
		outline: none;
	}

	body.zp-yolaburo-home-desktop .zp-home-lab-hero-title,
	body.zp-yolaburo-home-desktop .zp-home-lab-hero-title .zp-app-hero__line {
		font-size: clamp(2.625rem, 3.75vw, 3.5rem) !important;
		line-height: 1.06 !important;
		letter-spacing: -0.03em !important;
	}

	/* Subrayado verde como fondo del span (no pseudo con z-index negativo,
	   que queda detrás del panel). */
	body.zp-yolaburo-home-desktop .zp-home-lab-hero-accent {
		display: inline !important;
		color: var(--ylb-d-text) !important;
		-webkit-text-fill-color: var(--ylb-d-text);
		background: linear-gradient(90deg, var(--ylb-d-green), var(--ylb-d-green-light)) no-repeat 0 100% / 100% 7px !important;
		-webkit-background-clip: border-box !important;
		background-clip: border-box !important;
		padding-bottom: 2px;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}

	body.zp-yolaburo-home-desktop .zp-home-lab-hero-accent::after {
		content: none !important;
		display: none !important;
	}

	body.zp-yolaburo-home-desktop .zp-home-lab-hero-hint {
		max-width: 28rem !important;
		margin: 16px 0 0 !important;
		font-size: 1rem !important;
		line-height: 1.5 !important;
		color: var(--ylb-d-muted) !important;
	}

	body.zp-yolaburo-home-desktop .zp-home-lab-wa {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		margin: 0 0 0 2px;
		color: var(--ylb-d-wa-text);
		font-weight: 650;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-home-lab-trust {
		display: none !important;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-hero-ctas__primary,
	body.zp-yolaburo-home-desktop .zp-ylb-hero-ctas__secondary {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 48px;
		padding: 0 22px;
		box-sizing: border-box;
		border-radius: var(--ylb-d-radius-btn);
		font-family: inherit;
		font-size: 15px;
		font-weight: 700;
		line-height: 1;
		text-decoration: none;
		cursor: pointer;
		transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-hero-ctas__primary {
		border: 0;
		background: linear-gradient(180deg, var(--ylb-d-primary), var(--ylb-d-primary-dark));
		color: #fff;
		box-shadow: var(--ylb-d-shadow-btn);
	}

	body.zp-yolaburo-home-desktop .zp-ylb-hero-ctas__primary:hover {
		box-shadow: 0 10px 24px rgba(37, 99, 235, 0.34);
		transform: translateY(-1px);
	}

	body.zp-yolaburo-home-desktop .zp-ylb-hero-ctas__secondary {
		border: 1.5px solid var(--ylb-d-primary);
		background: var(--ylb-d-surface);
		color: var(--ylb-d-primary-dark);
	}

	body.zp-yolaburo-home-desktop .zp-ylb-hero-ctas__secondary:hover {
		background: var(--ylb-d-tint);
		color: var(--ylb-d-primary-dark);
	}

	body.zp-yolaburo-home-desktop .zp-ylb-hero-ctas__primary:focus-visible,
	body.zp-yolaburo-home-desktop .zp-ylb-hero-ctas__secondary:focus-visible {
		outline: 3px solid rgba(37, 99, 235, 0.35);
		outline-offset: 2px;
	}

	/* ── Columna 2: card de búsqueda ────────────────────────── */
	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-app-search-card {
		grid-column: c2-start / c2-end;
		grid-row: 2;
		align-self: start;
		margin: 0;
		padding: 24px 24px 22px !important;
		border-radius: var(--ylb-d-radius-card) !important;
		border: 1px solid var(--ylb-d-border) !important;
		background: var(--ylb-d-surface) !important;
		box-shadow: var(--ylb-d-shadow-card) !important;
	}

	/* Borde degradé del lab: alinear al radio de la card */
	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-app-search-card::before {
		border-radius: calc(var(--ylb-d-radius-card) + 1px);
	}

	body.zp-yolaburo-home-desktop .zp-ylb-search-card-title {
		display: block;
		margin: 0 0 16px;
		font-size: 1.0625rem;
		font-weight: 750;
		letter-spacing: -0.02em;
		line-height: 1.25;
		color: var(--ylb-d-text);
	}

	body.zp-yolaburo-home-desktop .zp-app-search-field__label {
		font-size: 11px !important;
		font-weight: 650 !important;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--ylb-d-muted) !important;
	}

	body.zp-yolaburo-home-desktop .zp-app-search-submit,
	body.zp-yolaburo-home-desktop #zp-app-search-submit {
		display: flex !important;
		margin-top: 6px !important;
	}

	body.zp-yolaburo-home-desktop .zp-app-search-submit__btn {
		min-height: 48px !important;
		border-radius: var(--ylb-d-radius-btn) !important;
		background: linear-gradient(180deg, var(--ylb-d-primary), var(--ylb-d-primary-dark)) !important;
		box-shadow: var(--ylb-d-shadow-btn) !important;
		font-size: 15px !important;
		font-weight: 700 !important;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-app-search-wrap {
		padding: 0 !important;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-hybrid-geo-fallback__gps {
		min-height: 48px !important;
		padding: 12px 16px !important;
		font-size: 15px !important;
		font-weight: 650 !important;
		gap: 10px !important;
		border-radius: var(--ylb-d-radius-btn) !important;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-hybrid-geo-fallback__gps .fa {
		font-size: 18px !important;
	}

	/* Sugerencias: no tapar columnas vecinas */
	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-app-search-suggestions,
	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-hybrid-geo-fallback__list {
		z-index: 30;
		max-height: min(280px, 40vh);
		overflow: auto;
	}

	/* ── Columna 2: mascota + nota WhatsApp (debajo de la card) ─ */
	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-yolaburo-mascot {
		grid-column: c2-start / c2-end;
		grid-row: 3;
		align-self: start;
		justify-self: stretch;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 6px;
		order: unset;
		width: auto !important;
		max-width: 100%;
		margin: 14px 0 0 !important;
		padding: 0;
		position: relative;
		z-index: 1;
	}

	body.zp-yolaburo-home-desktop .zp-yolaburo-mascot::before,
	body.zp-yolaburo-home-desktop .zp-yolaburo-mascot::after {
		display: none !important;
		content: none !important;
	}

	body.zp-yolaburo-home-desktop .zp-yolaburo-mascot__wa-note {
		display: flex;
		align-items: center;
		gap: 10px;
		order: -1;
		flex: 0 1 auto;
		margin: 0;
		padding: 10px 16px 10px 12px;
		max-width: 210px;
		box-sizing: border-box;
		border-radius: 999px;
		border: 1px solid var(--ylb-d-border);
		background: var(--ylb-d-surface);
		box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
		font-size: 13px;
		font-weight: 650;
		line-height: 1.3;
		color: var(--ylb-d-text);
		text-align: left;
	}

	body.zp-yolaburo-home-desktop .zp-yolaburo-mascot__wa-note .fa-whatsapp {
		flex-shrink: 0;
		font-size: 22px;
		color: var(--ylb-d-wa);
	}

	body.zp-yolaburo-home-desktop .zp-yolaburo-mascot__img {
		flex: 0 0 auto;
		width: min(160px, 45%) !important;
		max-height: 200px;
		object-fit: contain;
		animation: none !important;
		transform: none !important;
	}

	/* ── Categorías (ancho completo, dentro del panel) ──────── */
	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-app-search-cat {
		grid-column: main-start / c2-end;
		grid-row: 4;
		position: relative;
		z-index: 4;
		isolation: isolate;
		margin: 0 !important;
		padding: 24px 0 0 !important;
		border-top: 1px solid var(--ylb-d-border);
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-app-search-cat > .zp-app-search-field__label {
		display: block;
		width: 100%;
		margin: 0 0 14px !important;
		font-size: 13px !important;
		font-weight: 650 !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
		color: var(--ylb-d-muted) !important;
		text-align: center;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-app-cat-chips {
		display: grid !important;
		grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
		justify-items: center;
		align-items: start;
		gap: 18px 14px !important;
		margin: 0 !important;
		padding: 2px 4px 8px !important;
		overflow: visible !important;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-app-cat-chip {
		position: relative;
		z-index: 0;
		box-sizing: border-box;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 8px !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 108px !important;
		min-height: 92px !important;
		padding: 2px 4px 6px !important;
		border: none !important;
		background: transparent !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none !important;
		font-size: 12px !important;
		font-weight: 650 !important;
		color: var(--ylb-d-body) !important;
		white-space: normal !important;
		overflow: hidden;
		cursor: pointer;
		pointer-events: auto;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-app-cat-chip:hover,
	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-app-cat-chip.is-active {
		z-index: 2;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-app-cat-chip span {
		display: -webkit-box;
		width: 100%;
		max-width: 100%;
		text-align: center;
		line-height: 1.25;
		overflow-wrap: anywhere;
		word-break: break-word;
		hyphens: auto;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		white-space: normal;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-app-cat-chip .fa {
		width: 56px !important;
		height: 56px !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		margin: 0 !important;
		border-radius: 50% !important;
		border: 1px solid var(--ylb-d-border) !important;
		background: var(--ylb-d-surface) !important;
		box-shadow: var(--ylb-d-shadow-soft) !important;
		font-size: 20px !important;
		color: var(--ylb-d-primary) !important;
		transition: border-color 0.15s ease, box-shadow 0.15s ease;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-app-cat-chip:hover .fa {
		border-color: rgba(37, 99, 235, 0.45) !important;
		box-shadow: 0 8px 20px rgba(37, 99, 235, 0.16) !important;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-app-cat-chip.is-active .fa {
		background: linear-gradient(145deg, var(--ylb-d-primary), var(--ylb-d-primary-dark)) !important;
		border-color: transparent !important;
		color: #fff !important;
	}

	/* ── Franja de valores (fuera del panel) ────────────────── */
	body.zp-yolaburo-home-desktop .zp-ylb-desktop-value-band {
		grid-column: full-start / full-end;
		grid-row: 7;
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
		margin: 0;
		padding: 20px 28px;
		list-style: none;
		box-sizing: border-box;
		border-radius: var(--ylb-d-radius-card);
		border: 1px solid var(--ylb-d-border);
		background: var(--ylb-d-band);
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-value-band__item {
		display: flex;
		align-items: center;
		gap: 12px;
		min-width: 0;
		font-size: 13px;
		font-weight: 650;
		line-height: 1.3;
		color: var(--ylb-d-text);
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-value-band__label {
		min-width: 0;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-value-band__ico {
		flex-shrink: 0;
		width: 36px;
		height: 36px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		border: 1px solid var(--ylb-d-border);
		background: var(--ylb-d-surface);
		color: var(--ylb-d-primary);
		font-size: 16px;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-value-band__ico .fa-whatsapp {
		color: var(--ylb-d-wa);
	}

	/* ── ¿Cómo funciona? (fuera del panel) ──────────────────── */
	body.zp-yolaburo-home-desktop .zp-ylb-desktop-how {
		grid-column: full-start / full-end;
		grid-row: 9;
		display: grid;
		grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
		align-items: center;
		gap: 32px;
		margin: 0;
		padding: 0;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-how__title {
		justify-self: start;
		margin: 0;
		padding-bottom: 3px;
		font-size: 1.25rem;
		font-weight: 800;
		letter-spacing: -0.02em;
		line-height: 1.2;
		color: var(--ylb-d-text);
		text-align: left;
		background: linear-gradient(90deg, var(--ylb-d-green), var(--ylb-d-green-light)) no-repeat 0 100% / 100% 5px;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-how__steps {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
		margin: 0;
		padding: 10px 0 0;
		list-style: none;
	}

	/* Paso: icono a la izquierda, nombre + descripción a la derecha */
	body.zp-yolaburo-home-desktop .zp-ylb-desktop-how__step {
		position: relative;
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: 14px;
		row-gap: 4px;
		align-items: center;
		min-width: 0;
		padding: 24px 20px 20px;
		text-align: left;
		border-radius: var(--ylb-d-radius-card);
		border: 1px solid var(--ylb-d-border);
		background: var(--ylb-d-surface);
		box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-how__step:not(:last-child)::after {
		content: none;
		display: none;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-how__num {
		position: absolute;
		top: -10px;
		left: 18px;
		width: 26px;
		height: 26px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: var(--ylb-d-green);
		color: var(--ylb-d-text);
		font-size: 13px;
		font-weight: 800;
		box-shadow: 0 4px 10px rgba(132, 204, 22, 0.35);
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-how__ico {
		grid-column: 1;
		grid-row: 1 / 3;
		width: 44px;
		height: 44px;
		margin: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		border-radius: var(--ylb-d-radius-btn);
		background: var(--ylb-d-tint);
		color: var(--ylb-d-primary);
		font-size: 20px;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-how__step:nth-child(2) .zp-ylb-desktop-how__ico {
		background: #ecfdf5;
		color: var(--ylb-d-wa);
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-how__name {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
		margin: 0;
		font-size: 0.9375rem;
		font-weight: 800;
		color: var(--ylb-d-text);
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-how__desc {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		max-width: 100%;
		font-size: 12px;
		font-weight: 500;
		line-height: 1.45;
		color: var(--ylb-d-muted);
	}

	/* ── Secciones inferiores ───────────────────────────────── */
	body.zp-yolaburo-home-desktop .zp-home-explore,
	body.zp-yolaburo-home-desktop .zp-section--latest-published,
	body.zp-yolaburo-home-desktop .zp-info-what {
		max-width: var(--ylb-d-max);
		margin-left: auto;
		margin-right: auto;
		padding-left: 36px;
		padding-right: 36px;
		box-sizing: border-box;
	}

	body.zp-yolaburo-home-desktop .zp-home-explore {
		margin-top: 8px !important;
		padding-top: 8px !important;
	}
}

/* Tablet ancha: columnas más angostas, mascota en columna, pasos debajo del título */
@media (min-width: 900px) and (max-width: 1100px) {
	body.zp-yolaburo-home-desktop {
		--ylb-d-iso: linear-gradient(transparent, transparent);
		--ylb-d-pad: 24px;
		--ylb-d-col-gap: 24px;
		--ylb-d-col2: minmax(300px, 360px);
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-yolaburo-mascot {
		flex-direction: column;
		gap: 8px;
	}

	body.zp-yolaburo-home-desktop .zp-yolaburo-mascot__wa-note {
		max-width: 100%;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-value-band {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-how {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	body.zp-yolaburo-home-desktop .zp-ylb-desktop-hero .zp-app-cat-chips {
		grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
		gap: 16px 10px !important;
	}
}

@media (min-width: 1200px) {
	body.zp-yolaburo-home-desktop {
		--ylb-d-pad: 44px;
		--ylb-d-col-gap: 48px;
	}
}

/* YoLaburo home móvil: burbujas en fila horizontal (scroll), como inplace-search */
@media (max-width: 899px) {
	body.zp-yolaburo-home-mascot .zp-app-search-cat .zp-app-cat-chips {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		align-items: center !important;
		gap: 8px !important;
		margin: 0 -2px !important;
		padding: 4px 2px 8px !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
	}

	body.zp-yolaburo-home-mascot .zp-app-search-cat .zp-app-cat-chips::-webkit-scrollbar {
		display: none;
	}

	body.zp-yolaburo-home-mascot .zp-app-search-cat .zp-app-cat-chip {
		flex: 0 0 auto !important;
		flex-direction: row !important;
		align-items: center !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		min-height: 44px !important;
		padding: 0 14px 0 10px !important;
		white-space: nowrap !important;
		text-align: left;
		scroll-snap-align: start;
	}

	body.zp-yolaburo-home-mascot .zp-app-search-cat .zp-app-cat-chip span {
		display: inline !important;
		white-space: nowrap !important;
		overflow: visible !important;
		-webkit-line-clamp: unset !important;
		-webkit-box-orient: unset !important;
	}
}