/**
 * ASESORAMIENTO - composición editorial horizontal (revista de interiorismo).
 *
 * Tres situaciones; cada una es una FOTOGRAFÍA dominante + su panel de texto en
 * crema, con proporciones, alturas y alineaciones distintas para dar ritmo. No es
 * un grid de tarjetas: es una composición dirigida.
 *
 * Base (móvil / sin JS / motion off): se apila en vertical (imagen grande + panel
 * debajo), todo legible. Con [data-enhanced] (advisor.js en escritorio con
 * motion), la composición se recorre en horizontal con pin+scroll.
 *
 * Color: fondo crema muy suave que diferencia la sección; paneles un punto más
 * oscuros. El morado solo en numeración, progreso y foco. CTA textual con flecha.
 */

.zihouse-advisory {
	/* Crema muy sutil: diferencia la sección del fondo de la Home sin pesar. */
	background: var(--zihouse-color-surface);
	padding-block: var(--zihouse-space-3xl) var(--zihouse-space-2xl);
	overflow: hidden;
}

/* --- Intro --- */
.zihouse-advisory__intro {
	display: flex;
	flex-direction: column;
	gap: var(--zihouse-space-sm);
	margin-bottom: var(--zihouse-space-2xl);
	max-width: 60rem;
}

.zihouse-advisory__eyebrow {
	font-family: var(--zihouse-font-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--zihouse-color-accent);
}

.zihouse-advisory__title {
	margin: 0;
	font-family: var(--zihouse-font-display);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: var(--zihouse-tracking-tight);
	font-size: clamp(1.9rem, 4vw, 3.4rem);
	max-width: 24ch;
	text-wrap: balance;
}

.zihouse-advisory__title span { display: block; }
.zihouse-advisory__title span:first-child { color: var(--zihouse-color-ink-muted); }

.zihouse-advisory__description {
	margin: 0;
	max-width: 62ch;
	font-size: clamp(1rem, 1.3vw, 1.12rem);
	line-height: 1.7;
	color: var(--zihouse-color-ink-muted);
}

/* --- Viewport + track ---
   BASE = móvil: pila vertical de situaciones. */
.zihouse-advisory__viewport { overflow: visible; }

.zihouse-advisory__track {
	display: flex;
	flex-direction: column;
	gap: var(--zihouse-space-2xl);
	padding-inline: var(--zihouse-container-pad);
}

/* --- Situación (imagen + panel) --- */
.zihouse-adv-item {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--zihouse-color-ink);
}

.zihouse-adv-item__figure {
	margin: 0 0 var(--zihouse-space-md);
	overflow: hidden;
	border-radius: 4px;
	background: var(--zihouse-color-surface-strong);
	aspect-ratio: 4 / 3;
}

.zihouse-adv-item__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--zihouse-ease-out-quint), opacity 700ms var(--zihouse-ease-out-quart);
}

.zihouse-adv-item:hover .zihouse-adv-item__figure img { transform: scale(1.03); }

/* Panel de texto: pieza independiente en crema, tipo revista. */
.zihouse-adv-item__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
	background: var(--zihouse-color-surface-strong);
	padding: clamp(1.5rem, 2.4vw, 2.6rem);
}

.zihouse-adv-item__number {
	font-family: var(--zihouse-font-display);
	font-size: 0.9rem;
	letter-spacing: 0.1em;
	color: var(--zihouse-color-accent);
}

.zihouse-adv-item__title {
	margin: 0;
	font-family: var(--zihouse-font-display);
	font-weight: 400;
	line-height: 1.14;
	font-size: clamp(1.35rem, 1.9vw, 1.8rem);
	letter-spacing: var(--zihouse-tracking-tight);
	max-width: 18ch;
}

.zihouse-adv-item__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.62;
	color: var(--zihouse-color-ink-muted);
	max-width: 40ch;
}

.zihouse-adv-item__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: 0.4rem;
	font-family: var(--zihouse-font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--zihouse-color-ink);
	padding-bottom: 0.2em;
	border-bottom: 1px solid var(--zihouse-color-ink);
}

.zihouse-adv-item__cta svg {
	width: 0.95em;
	height: 0.95em;
	transition: transform var(--zihouse-duration-base) var(--zihouse-ease-out-quart);
}

.zihouse-adv-item:hover .zihouse-adv-item__cta { color: var(--zihouse-color-accent); border-color: var(--zihouse-color-accent); }
.zihouse-adv-item:hover .zihouse-adv-item__cta svg { transform: translate(2px, -2px); }

.zihouse-adv-item:focus-visible {
	outline: 2px solid var(--zihouse-color-accent);
	outline-offset: 6px;
}

/* --- Barra de progreso (solo escritorio mejorado) --- */
.zihouse-advisory__progress {
	display: none;
	align-items: center;
	gap: var(--zihouse-space-sm);
	margin-top: var(--zihouse-space-lg);
	font-family: var(--zihouse-font-display);
	font-size: 0.9rem;
	color: var(--zihouse-color-ink-muted);
}

.zihouse-advisory__progress-current { color: var(--zihouse-color-ink); min-width: 1.6em; }

.zihouse-advisory__progress-line {
	position: relative;
	flex: 1;
	max-width: 22rem;
	height: 1px;
	background: var(--zihouse-color-border);
	overflow: hidden;
}

.zihouse-advisory__progress-fill {
	position: absolute;
	inset: 0;
	background: var(--zihouse-color-accent);
	transform: scaleX(0);
	transform-origin: left center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESCRITORIO CON JS: composición horizontal fijada. Cada figura con su tamaño y
   alineación propios (ritmo editorial); la más centrada crece, gana presencia y
   activa su panel (revela el CTA). Las demás siguen visibles, atenuadas.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 56rem) {
	.zihouse-advisory[data-enhanced] .zihouse-advisory__pin {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--zihouse-space-md);
		/* Fondo propio: al fijarse (position: fixed) cubre toda la pantalla, y sin
		   fondo se veía por detrás la sección anterior (Marcas). El crema lo tapa. */
		background: var(--zihouse-color-surface);
	}

	.zihouse-advisory[data-enhanced] .zihouse-advisory__progress { display: flex; }

	.zihouse-advisory[data-enhanced] .zihouse-advisory__track {
		flex-direction: row;
		align-items: stretch;
		gap: clamp(2rem, 4vw, 5rem);
		height: 76vh;
		width: max-content;
		padding-left: max(var(--zihouse-container-pad), calc(50vw - 13rem));
		padding-right: max(var(--zihouse-container-pad), calc(50vw - 13rem));
		cursor: grab;
		will-change: transform;
	}

	.zihouse-advisory[data-enhanced].is-grabbing .zihouse-advisory__track { cursor: grabbing; }
	.zihouse-advisory.is-grabbing .zihouse-advisory__track { user-select: none; }

	/* La situación es una fila: figura + panel, con alineaciones propias. */
	.zihouse-advisory[data-enhanced] .zihouse-adv-item {
		flex-direction: row;
		align-items: stretch;
		gap: clamp(1rem, 1.6vw, 2rem);
		height: 100%;
		opacity: 0.6;
		transition: opacity 600ms var(--zihouse-ease-out-quart);
	}

	.zihouse-advisory[data-enhanced] .zihouse-adv-item__figure {
		margin: 0;
		will-change: transform;
		height: auto;
	}

	.zihouse-advisory[data-enhanced] .zihouse-adv-item__figure img { opacity: 0.72; }

	.zihouse-advisory[data-enhanced] .zihouse-adv-item__panel {
		width: clamp(15rem, 19vw, 20rem);
		justify-content: center;
		align-self: center;
	}

	/* Proporciones y alturas DISTINTAS por situación: el ritmo editorial. */
	.zihouse-advisory[data-enhanced] .zihouse-adv-item--1 .zihouse-adv-item__figure {
		width: clamp(18rem, 28vw, 27rem);
		align-self: flex-start;   /* arriba */
		aspect-ratio: 4 / 5;
	}
	.zihouse-advisory[data-enhanced] .zihouse-adv-item--1 .zihouse-adv-item__panel { align-self: flex-end; }

	.zihouse-advisory[data-enhanced] .zihouse-adv-item--2 .zihouse-adv-item__figure {
		width: clamp(26rem, 42vw, 40rem);
		align-self: center;
		aspect-ratio: 3 / 2;      /* la más ancha, dominante */
	}
	.zihouse-advisory[data-enhanced] .zihouse-adv-item--2 .zihouse-adv-item__panel { align-self: flex-start; }

	.zihouse-advisory[data-enhanced] .zihouse-adv-item--3 .zihouse-adv-item__figure {
		width: clamp(19rem, 30vw, 28rem);
		align-self: flex-end;     /* abajo */
		aspect-ratio: 4 / 5;
	}
	.zihouse-advisory[data-enhanced] .zihouse-adv-item--3 .zihouse-adv-item__panel { align-self: center; }

	/* Situación activa: a plena presencia; su figura sin atenuar; su CTA revelado. */
	.zihouse-advisory[data-enhanced] .zihouse-adv-item.is-active { opacity: 1; }
	.zihouse-advisory[data-enhanced] .zihouse-adv-item.is-active .zihouse-adv-item__figure img { opacity: 1; }

	.zihouse-advisory[data-enhanced] .zihouse-adv-item__cta {
		opacity: 0;
		transform: translateY(8px);
		transition: opacity 550ms var(--zihouse-ease-out-quart),
			transform 550ms var(--zihouse-ease-out-quart);
	}

	.zihouse-advisory[data-enhanced] .zihouse-adv-item.is-active .zihouse-adv-item__cta {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.zihouse-adv-item__figure img,
	.zihouse-adv-item__cta svg { transition: none; }
}