/**
 * Narrativa de Home: secciones editoriales con ritmo y asimetría.
 */

.zihouse-section {
	/* Ritmo vertical ampliado bajo la nueva dirección: el aire es el material
	   principal de una marca de interiorismo. Antes 2xl; ahora 3xl con margen
	   extra en pantallas grandes, donde el espacio sobra y la página lo pedía. */
	padding-block: var(--zihouse-space-3xl);
}

@media (min-width: 75rem) {
	.zihouse-section { padding-block: calc(var(--zihouse-space-3xl) * 1.35); }
}

/* La sección que sigue al hero viaja POR ENCIMA para que la salida
   cinematográfica funcione: el hero retrocede y esta entra sobre él. */
.zihouse-hero + * {
	position: relative;
	z-index: 2;
	background: var(--zihouse-color-bg);
}

.zihouse-section--surface {
	background: var(--zihouse-color-surface);
}

.zihouse-section--dark {
	background: var(--zihouse-color-ink);
	color: #fff;
}

.zihouse-section__head {
	display: flex;
	flex-direction: column;
	gap: var(--zihouse-space-xs);
	max-width: 42rem;
	margin-bottom: var(--zihouse-space-lg);
}

.zihouse-section__head--split {
	max-width: none;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--zihouse-space-md);
	flex-wrap: wrap;
}

/* Categorías --------------------------------------------------------------- */

.zihouse-category-grid {
	display: grid;
	gap: var(--zihouse-space-md);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Especialización / asesoramiento ------------------------------------------ */

.zihouse-editorial {
	display: grid;
	gap: var(--zihouse-space-xl);
	align-items: center;
	grid-template-columns: 1fr;
}

.zihouse-editorial__media {
	border-radius: var(--zihouse-radius-lg);
	overflow: hidden;
	aspect-ratio: 5 / 4;
}

.zihouse-editorial__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zihouse-editorial--reverse .zihouse-editorial__media {
	order: -1;
}

@media (min-width: 56rem) {
	.zihouse-editorial {
		grid-template-columns: 1.05fr 0.95fr;
	}

	.zihouse-editorial--reverse {
		grid-template-columns: 0.95fr 1.05fr;
	}

	.zihouse-editorial--reverse .zihouse-editorial__media {
		order: 1;
	}
}

.zihouse-editorial__body {
	display: flex;
	flex-direction: column;
	gap: var(--zihouse-space-sm);
}

/* Productos ---------------------------------------------------------------- */

.zihouse-product-grid {
	display: grid;
	gap: var(--zihouse-space-md);
	grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}

/* Marcas -------------------------------------------------------------------- */

.zihouse-brand-grid {
	display: grid;
	gap: var(--zihouse-space-sm);
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

/* Tienda física + mapa ------------------------------------------------------- */

.zihouse-store-block {
	display: grid;
	gap: var(--zihouse-space-xl);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 56rem) {
	.zihouse-store-block {
		grid-template-columns: 1fr 1fr;
	}
}

.zihouse-store-block__facts {
	list-style: none;
	margin: var(--zihouse-space-md) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--zihouse-space-xs);
	font-size: var(--zihouse-text-sm);
}

.zihouse-store-block__facts li {
	display: flex;
	gap: var(--zihouse-space-xs);
}

.zihouse-store-block__facts strong {
	color: var(--zihouse-color-ink);
	min-width: 6rem;
	font-weight: 600;
}

/* Colecciones: tarjetas apiladas mediante scroll ---------------------------
   Sin JS: se ven como una lista vertical normal, completamente navegable. */

/* ── Colecciones apiladas — reproducción del prototipo aprobado ────────────────
   Cada tarjeta es `sticky` con un `top` PROGRESIVO por índice: al final quedan
   TODAS apiladas y se ven sus franjas superiores. Degradado blanco SOLO en la
   base de cada tarjeta (::after, dentro de sus bordes). GSAP (scroll-effects.js)
   añade el scrub: zoom de imagen, reveal del contenido y recede (escala/brillo/
   saturación) al llegar la siguiente. Móvil: sin sticky. reduced-motion: sin
   transformaciones. NADA de overflow:clip/hidden en ancestros (rompe el sticky). */
.zihouse-collections-stack {
	--zihouse-stack-h: min(74vh, 41rem);
	--zihouse-stack-base-top: calc(var(--zihouse-header-height) + var(--zihouse-space-sm));
	--zihouse-stack-step: 13px;
}

.zihouse-stack-list {
	max-width: var(--zihouse-container-max);
	margin-inline: auto;
	padding-inline: var(--zihouse-container-pad);
	/* Recorrido corto de scroll extra: la última tarjeta sigue sticky mientras el
	   conjunto se inclina (clip-path) en la fase de salida; luego libera. */
	padding-bottom: 24svh;
}

.zihouse-stack-card {
	position: sticky;
	top: calc(var(--zihouse-stack-base-top) + (var(--zihouse-stack-i, 0) * var(--zihouse-stack-step)));
	height: var(--zihouse-stack-h); /* FIJA → todas las tarjetas y lienzos idénticos */
	margin-bottom: 20vh;
	z-index: calc(10 + var(--zihouse-stack-i, 0));
	border: 1px solid var(--zihouse-color-border);
	border-radius: 9px;
	overflow: hidden;
	background: var(--zihouse-white);
	box-shadow: 0 24px 68px rgba(39, 31, 24, 0.12), 0 2px 10px rgba(39, 31, 24, 0.05);
	transform-origin: 50% 0%;
	isolation: isolate;
	backface-visibility: hidden;
}
.zihouse-stack-card:last-child { margin-bottom: 0; }

/* Degradado blanco SOLO en la base de cada tarjeta (dentro de sus bordes). */
.zihouse-stack-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 18%;
	z-index: 8;
	pointer-events: none;
	background: linear-gradient(to bottom,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.16) 22%,
		rgba(255, 255, 255, 0.58) 58%,
		rgba(255, 255, 255, 0.92) 84%,
		#fff 100%);
}
/* Filo interior sutil (integra el borde superior/inferior). */
.zihouse-stack-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 9;
	pointer-events: none;
	border-radius: inherit;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(255, 255, 255, 0.86);
}

.zihouse-stack-card__inner {
	height: 100%;
	display: grid;
	grid-template-columns: 1fr;
	color: inherit;
	text-decoration: none;
	background: var(--zihouse-white);
}

.zihouse-stack-card__media {
	position: relative;
	min-width: 0;
	overflow: hidden;
	background: #d9d0c5;
	aspect-ratio: 4 / 3;
}
.zihouse-stack-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 58%, rgba(24, 20, 17, 0.07) 100%);
}
.zihouse-stack-card__image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transform: scale(1.02);
	will-change: transform;
}

.zihouse-stack-card__content {
	position: relative;
	z-index: 2;
	min-width: 0;
	padding: clamp(var(--zihouse-space-lg), 4.2vw, var(--zihouse-space-3xl));
	padding-bottom: clamp(7rem, 14vh, 9.5rem);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--zihouse-space-2xl);
	background: var(--zihouse-white);
}
.zihouse-stack-card__index {
	display: inline-block;
	margin-bottom: clamp(var(--zihouse-space-md), 5vh, var(--zihouse-space-2xl));
	color: var(--zihouse-color-ink-muted);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}
.zihouse-stack-card__content h3 {
	margin: 0 0 var(--zihouse-space-sm);
	display: -webkit-box;
	-webkit-line-clamp: 2;      /* título máx. 2 líneas: no cambia la altura */
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.zihouse-stack-card__desc {
	max-width: 30ch;
	margin: 0;
	color: var(--zihouse-color-ink-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* El bloque superior del contenido no debe empujar la altura. */
.zihouse-stack-card__content > div:first-child { min-height: 0; overflow: hidden; }

.zihouse-stack-card__footer {
	position: absolute;
	left: clamp(var(--zihouse-space-lg), 4.2vw, var(--zihouse-space-3xl));
	right: clamp(var(--zihouse-space-lg), 4.2vw, var(--zihouse-space-3xl));
	bottom: clamp(5rem, 10vh, 6.5rem);
	z-index: 10;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--zihouse-space-md);
	padding-top: var(--zihouse-space-md);
	border-top: 1px solid var(--zihouse-color-border);
	color: var(--zihouse-color-ink-muted);
	font-size: var(--zihouse-text-sm);
}
.zihouse-stack-card__cta {
	position: relative;
	color: var(--zihouse-color-ink);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}
.zihouse-stack-card__cta::after {
	content: "";
	position: absolute;
	left: 0;
	right: 1.5em;
	bottom: -0.45em;
	height: 1px;
	background: currentColor;
	transform: scaleX(0.35);
	transform-origin: left center;
	transition: transform 0.28s var(--zihouse-ease-out-quart);
}
.zihouse-stack-card__cta b {
	display: inline-block;
	margin-left: 0.5em;
	font-weight: 400;
	transition: transform 0.28s var(--zihouse-ease-out-quart);
}
.zihouse-stack-card:hover .zihouse-stack-card__cta::after { transform: scaleX(1); }
.zihouse-stack-card:hover .zihouse-stack-card__cta b { transform: translateX(0.35em); }

@media (min-width: 61.25rem) {
	.zihouse-stack-card__inner { grid-template-columns: minmax(0, 1.62fr) minmax(20rem, 0.78fr); }
	.zihouse-stack-card__media { aspect-ratio: auto; height: 100%; }
}

/* < 980px: tarjeta VERTICAL (imagen arriba, contenido abajo) con filas FIJAS.
   El apilado sticky SE MANTIENE (también en móvil), no se convierte en lista. */
@media (max-width: 61.24rem) {
	.zihouse-stack-card__inner {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(0, 57%) minmax(0, 43%);
	}
	.zihouse-stack-card__media { aspect-ratio: auto; height: 100%; }
	.zihouse-stack-card__content {
		justify-content: flex-start;
		gap: var(--zihouse-space-sm);
		padding: clamp(var(--zihouse-space-md), 5vw, var(--zihouse-space-xl));
		padding-bottom: clamp(3.5rem, 11vh, 4.75rem);
	}
	.zihouse-stack-card__footer { bottom: clamp(1.1rem, 4vh, 1.6rem); }
}

/* Móvil (≈360–767px): apilado sticky con offsets propios y altura fija en svh. */
@media (max-width: 47.94rem) {
	.zihouse-collections-stack {
		--zihouse-stack-h: clamp(540px, 78svh, 650px);
		--zihouse-stack-base-top: calc(var(--zihouse-header-height) + var(--zihouse-space-2xs));
		--zihouse-stack-step: 7px;
	}
	.zihouse-stack-card { margin-bottom: 12vh; }
	.zihouse-stack-card::after { height: 20%; }
}

/* reduced-motion: el apilado sticky (puro layout) SE CONSERVA; sin parallax,
   sin inclinación, sin scrub. Todo el contenido accesible. */
@media (prefers-reduced-motion: reduce) {
	.zihouse-stack-card,
	.zihouse-stack-card__image,
	.zihouse-stack-card__content {
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		opacity: 1 !important;
	}
}

/* Soluciones: grid con imágenes de escala progresiva ------------------------ */

.zihouse-solutions {
	display: grid;
	gap: var(--zihouse-space-md);
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.zihouse-solution {
	display: flex;
	flex-direction: column;
	gap: var(--zihouse-space-xs);
	text-decoration: none;
	color: var(--zihouse-color-ink);
}

.zihouse-solution__media {
	aspect-ratio: 4 / 5;
	border-radius: var(--zihouse-radius-lg);
	overflow: hidden;
	background: var(--zihouse-color-surface-strong);
}

.zihouse-solution__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zihouse-solution__title {
	margin: 0;
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-lg);
	font-weight: 600;
}

.zihouse-solution__copy {
	margin: 0;
	font-size: var(--zihouse-text-sm);
	color: var(--zihouse-color-ink-muted);
}

/* Cifras reales -------------------------------------------------------------- */

.zihouse-stats {
	display: grid;
	gap: var(--zihouse-space-lg);
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	text-align: center;
}

.zihouse-stats__item {
	display: flex;
	flex-direction: column;
	gap: var(--zihouse-space-3xs);
}

.zihouse-stats__number {
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-3xl);
	color: #fff;
}

.zihouse-stats__label {
	font-size: var(--zihouse-text-sm);
	color: color-mix(in oklch, white 70%, transparent);
}

/* Slider horizontal (marcas) ------------------------------------------------- */

.zihouse-slider__controls {
	display: flex;
	gap: var(--zihouse-space-2xs);
}

.zihouse-slider {
	overflow: hidden;
	padding-inline: var(--zihouse-container-pad);
}

.zihouse-slider__track {
	display: flex;
	gap: var(--zihouse-space-sm);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	max-width: var(--zihouse-container-max);
	margin-inline: auto;
	padding-block: var(--zihouse-space-2xs);
}

.zihouse-slider__track::-webkit-scrollbar {
	display: none;
}

.zihouse-slider__item {
	flex: 0 0 auto;
	min-width: 12rem;
	scroll-snap-align: start;
}

/* Declaración editorial de apertura (tagline) --------------------------------- */

.zihouse-intro {
	padding-block: var(--zihouse-space-3xl);
}

.zihouse-intro .zihouse-eyebrow {
	display: block;
	margin-bottom: var(--zihouse-space-md);
}

.zihouse-intro__statement {
	font-family: var(--zihouse-font-display);
	font-weight: 400;
	font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3rem);
	line-height: 1.2;
	letter-spacing: var(--zihouse-tracking-tight);
	max-width: 22ch;
	margin: 0 0 var(--zihouse-space-lg);
	text-wrap: balance;
}

/* Trío de accesos editoriales ------------------------------------------------- */

.zihouse-trio {
	display: grid;
	gap: var(--zihouse-space-md);
	grid-template-columns: 1fr;
}

.zihouse-trio__card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 24rem;
	border-radius: var(--zihouse-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	isolation: isolate;
}

.zihouse-trio__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.zihouse-trio__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--zihouse-duration-slow) var(--zihouse-ease-out-quint);
}

.zihouse-trio__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, oklch(12% 0.02 285 / 0.8), oklch(12% 0.02 285 / 0.05) 65%);
}

.zihouse-trio__card:hover .zihouse-trio__media img {
	transform: scale(1.06);
}

.zihouse-trio__body {
	display: flex;
	flex-direction: column;
	gap: var(--zihouse-space-3xs);
	padding: var(--zihouse-space-lg);
	width: 100%;
}

.zihouse-trio__label {
	font-size: var(--zihouse-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: color-mix(in oklch, white 82%, transparent);
}

.zihouse-trio__title {
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-2xl);
	margin: 0;
	color: #fff;
}

.zihouse-trio__arrow {
	display: inline-flex;
	margin-top: var(--zihouse-space-xs);
}

.zihouse-trio__arrow svg {
	width: 1.5rem;
	height: 1.5rem;
	transition: transform var(--zihouse-duration-base) var(--zihouse-ease-out-quart);
}

.zihouse-trio__card:hover .zihouse-trio__arrow svg {
	transform: translateX(0.35rem);
}

@media (min-width: 52rem) {
	.zihouse-trio {
		grid-template-columns: repeat(3, 1fr);
	}

	.zihouse-trio__card {
		min-height: 30rem;
	}

	/* La primera tarjeta ocupa más altura para una composición asimétrica. */
	.zihouse-trio__card:first-child {
		grid-row: span 1;
	}
}

/* SECCIÓN 4 — CATEGORÍAS (editorial) -------------------------------------------
   Ninguna categoría se compone igual que otra: cambian el ancho, la alineación y
   la proporción. Sin cajas, sin sombras: solo imagen grande, aire y tipografía. */

.zihouse-cats {
	max-width: var(--zihouse-container-max);
	margin-inline: auto;
	padding: var(--zihouse-space-3xl) var(--zihouse-container-pad);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--zihouse-space-2xl) var(--zihouse-space-md);
}

.zihouse-cats__intro {
	grid-column: 1 / -1;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--zihouse-space-md);
	flex-wrap: wrap;
	margin-bottom: var(--zihouse-space-lg);
}

.zihouse-cats__intro h2 {
	margin: 0;
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-3xl);
	font-weight: 400;
	letter-spacing: var(--zihouse-tracking-tight);
	line-height: 1.02;
}

.zihouse-link-arrow {
	font-size: var(--zihouse-text-xs);
	letter-spacing: var(--zihouse-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--zihouse-color-ink);
	border-bottom: 1px solid var(--zihouse-color-ink);
	padding-bottom: 3px;
	transition: color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart),
		border-color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart);
}

.zihouse-link-arrow:hover { color: var(--zihouse-color-accent); border-color: var(--zihouse-color-accent); }

.zihouse-cat { display: flex; flex-direction: column; gap: var(--zihouse-space-sm); }

.zihouse-cat__media {
	display: block;
	overflow: hidden;
	background: var(--zihouse-color-surface);
}

.zihouse-cat__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--zihouse-ease-out-quint);
}

.zihouse-cat__media:hover img { transform: scale(1.04); }

.zihouse-cat__body { display: flex; flex-direction: column; gap: 0.3rem; }

/* El nombre de la categoría es el destino de navegación: tiene que competir con
   el titular de sección, no ir a la mitad de su cuerpo. Antes 22px frente a los
   45px del H2 de encima, y por eso las categorías se percibían "pequeñitas". */
.zihouse-cat__title {
	margin: 0;
	font-family: var(--zihouse-font-display);
	font-size: clamp(1.6rem, 2.8vw, 2.6rem);
	line-height: 1.04;
	letter-spacing: var(--zihouse-tracking-tight);
	font-weight: 400;
}
.zihouse-cat__title a { text-decoration: none; color: var(--zihouse-color-ink); }
.zihouse-cat__title a:hover { color: var(--zihouse-color-accent); }

.zihouse-cat__meta {
	margin: 0;
	font-size: var(--zihouse-text-xs);
	letter-spacing: 0.04em;
	color: var(--zihouse-color-ink-muted);
	white-space: nowrap;
}

/* Móvil: una columna, proporciones propias. */
.zihouse-cat { grid-column: 1 / -1; }
.zihouse-cat__media { aspect-ratio: 4 / 3; }

@media (min-width: 64rem) {
	/* Cada una con su propio ancho, posición y proporción. */
	.zihouse-cat--1 { grid-column: 1 / span 7; }
	.zihouse-cat--1 .zihouse-cat__media { aspect-ratio: 4 / 3; }

	.zihouse-cat--2 { grid-column: 9 / span 4; align-self: end; }
	.zihouse-cat--2 .zihouse-cat__media { aspect-ratio: 3 / 4; }

	.zihouse-cat--3 { grid-column: 1 / span 5; }
	.zihouse-cat--3 .zihouse-cat__media { aspect-ratio: 1 / 1; }

	.zihouse-cat--4 { grid-column: 7 / span 6; align-self: end; }
	.zihouse-cat--4 .zihouse-cat__media { aspect-ratio: 16 / 10; }
}

/* Clusters: mosaico masonry ---------------------------------------------------
   Móvil: 2 columnas simples. Escritorio: rejilla de 12 con teselas de distinto
   tamaño y flujo denso, para una lectura editorial y no de parrilla de fichas. */

.zihouse-masonry {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 9rem;
	grid-auto-flow: dense;
	gap: var(--zihouse-space-xs);
}

.zihouse-masonry__tile {
	position: relative;
	grid-column: span 1;
	grid-row: span 2;
	overflow: hidden;
	border-radius: var(--zihouse-radius-md);
	background: var(--zihouse-color-surface-strong);
	text-decoration: none;
	color: #fff;
	display: block;
	margin: 0;
	isolation: isolate;
}

.zihouse-masonry__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--zihouse-ease-out-quint);
	will-change: transform;
}

a.zihouse-masonry__tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, oklch(12% 0.02 285 / 0.82) 0%, oklch(12% 0.02 285 / 0.15) 55%, transparent 100%);
}

a.zihouse-masonry__tile:hover img {
	transform: scale(1.07);
}

.zihouse-masonry__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	padding: var(--zihouse-space-sm);
}

.zihouse-masonry__label {
	font-size: var(--zihouse-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: color-mix(in oklch, white 78%, transparent);
}

.zihouse-masonry__title {
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-lg);
	line-height: 1.15;
	color: #fff;
}

.zihouse-masonry__meta {
	font-size: var(--zihouse-text-sm);
	font-weight: 600;
	color: color-mix(in oklch, white 88%, transparent);
}

@media (min-width: 62rem) {
	.zihouse-masonry {
		grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: 7rem;
		gap: var(--zihouse-space-sm);
	}

	.zihouse-masonry__tile { grid-column: span 4; grid-row: span 3; }
	.zihouse-masonry__tile--a { grid-column: span 5; grid-row: span 5; }
	.zihouse-masonry__tile--b { grid-column: span 4; grid-row: span 4; }
	.zihouse-masonry__tile--c { grid-column: span 3; grid-row: span 4; }
	.zihouse-masonry__tile--d { grid-column: span 5; grid-row: span 3; }
	.zihouse-masonry__tile--amb { grid-column: span 3; grid-row: span 5; }

	.zihouse-masonry__title {
		font-size: var(--zihouse-text-xl);
	}
}

/* Marquee de marcas (cinta infinita) ------------------------------------------ */

.zihouse-marquee {
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.zihouse-marquee__track {
	display: flex;
	gap: var(--zihouse-space-lg);
	width: max-content;
	animation: zihouse-marquee 38s linear infinite;
}

.zihouse-marquee:hover .zihouse-marquee__track {
	animation-play-state: paused;
}

.zihouse-marquee__item {
	flex: 0 0 auto;
	font-family: var(--zihouse-font-display);
	font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	color: var(--zihouse-color-ink);
	text-decoration: none;
	opacity: 0.55;
	transition: opacity var(--zihouse-duration-fast) var(--zihouse-ease-out-quart), color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart);
	white-space: nowrap;
}

.zihouse-marquee__item:hover {
	opacity: 1;
	color: var(--zihouse-color-accent);
}

@keyframes zihouse-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	html:not(.zihouse-motion-full) .zihouse-marquee__track {
		animation: none;
		flex-wrap: wrap;
		width: 100%;
		justify-content: center;
	}
	html:not(.zihouse-motion-full) .zihouse-marquee__item[aria-hidden="true"] {
		display: none;
	}
}

/* Scroll horizontal anclado (proceso) ------------------------------------------
   Por defecto es un carril con scroll horizontal + snap (usable sin JS). Cuando el
   JS lo activa, la sección crece, el viewport queda sticky y el carril se desplaza
   con la rueda. */

.zihouse-hscroll {
	position: relative;
	padding-block: var(--zihouse-space-2xl);
	background: var(--zihouse-color-ink);
	color: #fff;
}

.zihouse-hscroll[data-hscroll="on"] {
	padding-block: 0;
}

.zihouse-hscroll__viewport {
	overflow: hidden;
}

.zihouse-hscroll[data-hscroll="on"] .zihouse-hscroll__viewport {
	position: sticky;
	top: 0;
	height: 100svh;
	display: flex;
	align-items: center;
}

.zihouse-hscroll__track {
	display: flex;
	gap: var(--zihouse-space-lg);
	padding-inline: var(--zihouse-container-pad);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	will-change: transform;
}

.zihouse-hscroll__track::-webkit-scrollbar { display: none; }

.zihouse-hscroll[data-hscroll="on"] .zihouse-hscroll__track {
	overflow: visible;
	scroll-snap-type: none;
}

.zihouse-hscroll__panel {
	flex: 0 0 min(84vw, 40rem);
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--zihouse-space-sm);
}

.zihouse-hscroll__panel--lead h2 {
	color: #fff;
	font-size: var(--zihouse-text-3xl);
	margin: 0;
}

.zihouse-hscroll__panel--lead .zihouse-lede,
.zihouse-hscroll__panel--lead .zihouse-eyebrow {
	color: color-mix(in oklch, white 75%, transparent);
}

.zihouse-hscroll__panel--cta {
	flex-basis: min(70vw, 30rem);
	align-items: flex-start;
}

.zihouse-hscroll__panel--cta h3 {
	color: #fff;
	font-size: var(--zihouse-text-3xl);
	margin: 0;
}

.zihouse-step {
	background: color-mix(in oklch, white 6%, var(--zihouse-color-ink));
	border-radius: var(--zihouse-radius-lg);
	overflow: hidden;
	gap: 0;
}

.zihouse-step__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.zihouse-step__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zihouse-step__body {
	padding: var(--zihouse-space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--zihouse-space-2xs);
}

.zihouse-step__body h3 {
	margin: 0;
	color: #fff;
	font-size: var(--zihouse-text-xl);
}

.zihouse-step__body p {
	margin: 0;
	color: color-mix(in oklch, white 72%, transparent);
	font-size: var(--zihouse-text-sm);
}

/* Intro cinética --------------------------------------------------------------- */

.zihouse-intro__statement .zihouse-word {
	display: inline-block;
	overflow: hidden;
}

/* Reveal helper: visible por defecto, la animación solo mejora la entrada. */

.zihouse-reveal {
	opacity: 1;
	transform: none;
}

.zihouse-motion-on .zihouse-reveal {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity var(--zihouse-duration-slow) var(--zihouse-ease-out-quint),
		transform var(--zihouse-duration-slow) var(--zihouse-ease-out-quint);
}

.zihouse-motion-on .zihouse-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html:not(.zihouse-motion-full) .zihouse-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =============================================================================
   SECCIÓN 3 — BLOQUE EDITORIAL (galería asimétrica)
   Ninguna imagen se alinea con otra: distinto ancho, distinta altura, distinto
   arranque. El vacío alrededor es deliberado.
   ========================================================================== */

.zihouse-editorial-block {
	max-width: var(--zihouse-container-max);
	margin-inline: auto;
	padding: var(--zihouse-space-3xl) var(--zihouse-container-pad);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--zihouse-space-md);
	align-items: start;
}

.zihouse-editorial-block__text {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: var(--zihouse-space-sm);
	align-items: flex-start;
	margin-bottom: var(--zihouse-space-lg);
}

.zihouse-editorial-block__text h2 {
	margin: 0;
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-2xl);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: var(--zihouse-tracking-tight);
	max-width: 18ch;
}

.zihouse-editorial-block__copy {
	margin: 0;
	font-size: var(--zihouse-text-sm);
	line-height: 1.7;
	color: var(--zihouse-color-ink-muted);
	max-width: 42ch;
}

.zihouse-editorial-block__fig {
	margin: 0;
	overflow: hidden;
	background: var(--zihouse-color-surface);
	grid-column: span 6;
	aspect-ratio: 4 / 3;
}

.zihouse-editorial-block__fig img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--zihouse-ease-out-quint);
}

.zihouse-editorial-block__fig:hover img { transform: scale(1.04); }

@media (min-width: 64rem) {
	.zihouse-editorial-block__text {
		grid-column: 1 / span 4;
		position: sticky;
		top: calc(var(--zihouse-header-height) + var(--zihouse-space-lg));
		margin-bottom: 0;
	}
	/* Racimo asimétrico: anchos, alturas y arranques distintos. */
	.zihouse-editorial-block__fig--a { grid-column: 6 / span 5; aspect-ratio: 4 / 3; }
	.zihouse-editorial-block__fig--b { grid-column: 11 / span 2; aspect-ratio: 3 / 4; margin-top: var(--zihouse-space-2xl); }
	.zihouse-editorial-block__fig--c { grid-column: 5 / span 4; aspect-ratio: 1 / 1; margin-top: var(--zihouse-space-lg); }
	.zihouse-editorial-block__fig--d { grid-column: 9 / span 4; aspect-ratio: 16 / 10; margin-top: calc(var(--zihouse-space-lg) * -1); }
}

/* =============================================================================
   SECCIÓN 10 — MARCAS: carril de tarjetas rectangulares
   Se desliza solo y se detiene al pasar el ratón. Sin animación (reduced-motion)
   se convierte en un carril desplazable y se ocultan las tarjetas duplicadas.
   ========================================================================== */

.zihouse-brands { overflow: hidden; }

.zihouse-brandrail {
	position: relative;
	overflow: hidden;
	margin-top: var(--zihouse-space-xl);
	/* Los extremos se desvanecen: el corte es intencionado, no un elemento roto. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.zihouse-brandrail__track {
	display: flex;
	align-items: center;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	width: max-content;
	will-change: transform;
}

.zihouse-brandcard {
	flex: 0 0 auto;
	font-family: var(--zihouse-font-display);
	font-size: clamp(1.5rem, 3.2vw, 2.75rem);
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	color: var(--zihouse-color-ink);
	opacity: 0.55;
	transition: opacity var(--zihouse-duration-base) var(--zihouse-ease-out-quart);
}

.zihouse-brandcard:hover,
.zihouse-brandcard:focus-visible { opacity: 1; }

.zihouse-brandrail__sep {
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--zihouse-color-ink);
	opacity: 0.25;
}

/* SECCIÓN — INSPIRACIÓN (mosaico masonry sobre oscuro) ----------------------
   Columnas CSS: el masonry real, sin JS y sin huecos. Cada imagen conserva su
   proporción natural, que es lo que da el ritmo irregular del mosaico. */
/* Espresso CÁLIDO en lugar del negro frío (#1F1F1F): rompe el crema y da ritmo
   entre bloques, pero desde la misma familia cálida del sitio → se siente
   intencional, no un bloque de otro diseño. Las fotos de ambiente lucen sobre él. */
.zihouse-inspiration {
	background: #241f19;
	color: #ece3d6;
}

/* El título se parte en spans (SplitText) que heredan la tinta OSCURA del sistema
   (#29241f) y pisaban el color claro de la sección → quedaba oscuro sobre oscuro,
   ilegible. Forzamos color claro en el h2 y en todos sus fragmentos. */
.zihouse-inspiration h2,
.zihouse-inspiration h2 * {
	color: #faf6ee;
	-webkit-text-fill-color: #faf6ee;
}

.zihouse-inspiration .zihouse-lede { color: color-mix(in oklch, #faf6ee 74%, transparent); }
.zihouse-inspiration .zihouse-eyebrow { color: color-mix(in oklch, #faf6ee 58%, transparent); }

.zihouse-inspiration__grid {
	columns: 2;
	column-gap: var(--zihouse-space-2xs);
	padding-inline: var(--zihouse-space-2xs);
	margin-top: var(--zihouse-space-lg);
}

.zihouse-inspiration__tile {
	margin: 0 0 var(--zihouse-space-2xs);
	break-inside: avoid;
	overflow: hidden;
	position: relative;
	border-radius: 4px;
	background: #2e2820;
}

.zihouse-inspiration__tile img {
	width: 100%;
	height: auto;
	display: block;
	/* Reposo levemente atenuadas (menos que antes, se leen mejor); al pasar el
	   ratón, la imagen despierta del todo. */
	filter: brightness(0.9) saturate(0.94);
	transform: scale(1.001);
	transition: filter 700ms var(--zihouse-ease-out-quart),
		transform 900ms var(--zihouse-ease-out-quint);
}

.zihouse-inspiration__tile:hover img {
	filter: brightness(1) saturate(1);
	transform: scale(1.06);
}

.zihouse-inspiration__cta {
	display: flex;
	justify-content: center;
	margin-top: var(--zihouse-space-lg);
}

@media (min-width: 48rem) { .zihouse-inspiration__grid { columns: 3; } }
@media (min-width: 75rem) { .zihouse-inspiration__grid { columns: 4; } }

/* Encabezado centrado, reutilizable */
.zihouse-section__head--center {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
	align-items: center;
}

/* «Quiénes somos» en móvil --------------------------------------------------
   En vertical el mosaico caía en una rejilla de cuatro cuadraditos iguales que
   no dice nada. Aquí se convierte en una secuencia asimétrica: una imagen ancha
   que abre, dos que se escalonan y una que cierra desplazada. El escritorio no
   se toca: esta regla solo vive por debajo de 48rem. */
@media (max-width: 47.999rem) {
	.zihouse-editorial-block {
		grid-template-columns: repeat(6, 1fr);
		gap: var(--zihouse-space-sm);
		padding-block: var(--zihouse-space-2xl);
	}

	.zihouse-editorial-block__text { margin-bottom: var(--zihouse-space-md); }

	.zihouse-editorial-block__text h2 { max-width: 14ch; }

	.zihouse-editorial-block__fig--a {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 10;
	}

	.zihouse-editorial-block__fig--b {
		grid-column: 1 / span 4;
		aspect-ratio: 3 / 4;
	}

	.zihouse-editorial-block__fig--c {
		grid-column: 5 / span 2;
		aspect-ratio: 3 / 4;
		align-self: end;
	}

	.zihouse-editorial-block__fig--d {
		grid-column: 2 / -1;
		aspect-ratio: 4 / 3;
		margin-top: var(--zihouse-space-2xs);
	}
}

/* TIENDA FÍSICA ------------------------------------------------------------
   Fotografía a sangre arriba, datos debajo con mucho aire. Sustituye al 50/50
   con caja gris de marcador de posición. Sin fondo de color: la composición y la
   imagen sostienen la sección por sí solas, que es la prueba que tiene que pasar
   cualquier bloque de esta web. */
.zihouse-store {
	padding-bottom: var(--zihouse-space-3xl);
}

.zihouse-store__media {
	margin: 0 0 var(--zihouse-space-2xl);
	overflow: hidden;
	aspect-ratio: 21 / 9;
	background: var(--zihouse-color-surface);
}

.zihouse-store__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zihouse-store__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--zihouse-space-xl);
	align-items: start;
}

.zihouse-store__lead {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--zihouse-space-sm);
}

.zihouse-store__lead h2 {
	margin: 0;
	max-width: 14ch;
}

.zihouse-store__facts {
	margin: 0;
	display: grid;
	gap: var(--zihouse-space-md);
}

.zihouse-store__facts dt {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--zihouse-color-ink-muted);
	margin-bottom: 0.35rem;
}

.zihouse-store__facts dd {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.6;
}

.zihouse-store__facts a { color: inherit; }

.zihouse-store__reasons {
	list-style: none;
	margin: var(--zihouse-space-3xl) 0 0;
	padding: 0;
	display: grid;
	gap: var(--zihouse-space-lg);
}

.zihouse-store__reasons h3 {
	margin: 0 0 0.35rem;
	font-family: var(--zihouse-font-body);
	font-size: 0.95rem;
	font-weight: 600;
}

.zihouse-store__reasons p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--zihouse-color-ink-muted);
	max-width: 32ch;
}

@media (min-width: 56rem) {
	.zihouse-store__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--zihouse-space-3xl); }
	.zihouse-store__facts { grid-template-columns: repeat(2, 1fr); gap: var(--zihouse-space-lg); }
	.zihouse-store__reasons { grid-template-columns: repeat(4, 1fr); }
}