/**
 * V&J Works Studio — galería horizontal de presentaciones (portada, body.vj-home).
 *
 * Cuatro composiciones (navegador con captura REAL + teléfono con su vista
 * móvil + ficha de paleta y tipografías) en una sola banda. Una es la
 * protagonista (.is-active): más grande, nítida y con los planos más
 * separados en profundidad; las demás reducen escala y opacidad y llevan un
 * desenfoque muy leve. Las vecinas se apartan hacia los lados (--tx).
 *
 * Escritorio (≥ 1100 px): banda de posiciones fijas; el protagonismo cambia
 * con hover, foco de teclado, pestañas numeradas o flechas.
 * Móvil/tablet (< 1100 px): pista con scroll-snap horizontal; el teléfono es
 * el protagonista; el protagonismo lo marca el elemento centrado.
 *
 * Solo se animan transform, opacity y (en el cambio de protagonista) un
 * blur de ≤ 1.6px. will-change solo mientras .is-moving.
 * prefers-reduced-motion: sin transiciones ni animaciones.
 */

.vj-home {
	--vj3-out: cubic-bezier(0.23, 1, 0.32, 1);
	--vj3-io: cubic-bezier(0.77, 0, 0.175, 1);
	--vj3-gut: clamp(1.5rem, 5vw, 4rem);
}

/* ===== Galería ===== */
.vjg {
	--c-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
	position: relative;
	max-width: 1760px;
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 4.5rem) var(--vj3-gut) clamp(3rem, 6vw, 5.5rem);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}
.vjg-stage {
	position: relative;
	aspect-ratio: 10 / 3.1;
	margin-inline: auto;
}

/* ===== Cada presentación ===== */
.vjg-item {
	position: absolute;
	top: 50%;
	left: calc(var(--c) * 1%);
	width: 30%;
	margin: 0;
	container-type: inline-size;
	--tx: 0%;
	--s: 1;
	transform: translate3d(calc(-50% + var(--tx)), -50%, 0) scale(var(--s));
	transform-origin: 50% 50%;
	z-index: calc(8 - var(--dist, 0));
	/* Solo transform y opacity se animan (compositor); el blur cambia sin transición para no repintar cada fotograma. */
	transition: transform 650ms var(--c-ease), opacity 480ms ease;
	contain: layout style;
}
.vjg-item.is-active {
	--s: 1.16;
	--tx: 0%;
	z-index: 9;
}
.vjg-item.is-before,
.vjg-item.is-after {
	--s: 0.9;
	opacity: 0.7;
	filter: blur(1px);
}
.vjg-item.is-before { --tx: -10%; }
.vjg-item.is-after { --tx: 10%; }
.vjg-item[data-dist="2"],
.vjg-item[data-dist="3"] {
	--s: 0.86;
	opacity: 0.5;
	filter: blur(1.6px);
}
.vjg-item.is-moving { will-change: transform, opacity, filter; }

/* Entrada: las cuatro llegan desde la izquierda, escalonadas. */
html.vjt-js .vjg:not(.is-in) .vjg-item {
	opacity: 0;
	--tx: -14%;
	filter: none;
}
.vjg.is-entering .vjg-item {
	transition-duration: 900ms, 700ms;
	transition-delay: calc(var(--i) * 110ms), calc(var(--i) * 110ms);
}

/* ===== Escena (navegador + teléfono + ficha) ===== */
.vj3 {
	--rx: 4deg;
	--ry: 0deg;
	position: relative;
	aspect-ratio: 16 / 11.6;
	perspective: 1500px;
	perspective-origin: 50% 38%;
}
.vjg-item[data-i="0"] .vj3 { --ry: 11deg; }
.vjg-item[data-i="1"] .vj3 { --ry: 5deg; }
.vjg-item[data-i="2"] .vj3 { --ry: -5deg; }
.vjg-item[data-i="3"] .vj3 { --ry: -11deg; }
.vjg-item.is-active .vj3 { --ry: 0deg; --rx: 3deg; }
.vj3-tilt {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform: rotateX(var(--rx)) rotateY(var(--ry));
	transition: transform 700ms var(--c-ease);
}

/* Planos: se separan en Z; el protagonista gana profundidad. */
.vj3-l {
	position: absolute;
	transform: translateZ(var(--z, 0px));
	transition: transform 650ms var(--c-ease), opacity 450ms ease;
}
html.vjt-js .vjg:not(.is-in) .vj3-l { opacity: 0; }
.vjg.is-entering .vj3-l { transition-delay: var(--d, 0ms); }
.vjg-item.is-active .vj3-phone { --z: 120px; }
.vjg-item.is-active .vj3-chip { --z: 170px; }
.vjg-item:not(.is-active) .vj3-phone { --z: 30px; }
.vjg-item:not(.is-active) .vj3-chip { --z: 60px; opacity: 0.4; }
.vjg-item.is-active .vj3-browser { --z: 20px; }

.vj3-plate {
	--z: -110px;
	inset: 3% 0 7% 8%;
	border: 1px solid var(--rule);
}
.vj3-num {
	--z: -60px;
	--d: 80ms;
	right: 1%;
	top: -4%;
	margin: 0;
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 22cqw;
	line-height: 0.8;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(10, 10, 10, 0.3);
	pointer-events: none;
	user-select: none;
}
.vj3-shadow {
	--z: -120px;
	--d: 40ms;
	left: 8%;
	width: 80%;
	bottom: 1%;
	height: 10%;
	background: radial-gradient(closest-side, rgba(10, 10, 10, 0.32), rgba(10, 10, 10, 0));
}
.vjg-item.is-active .vj3-shadow { opacity: 1; }
.vjg-item:not(.is-active) .vj3-shadow { opacity: 0.5; }

/* --- Navegador --- */
.vj3-browser {
	--z: 0px;
	--d: 140ms;
	left: 0;
	top: 9%;
	width: 86%;
	overflow: hidden;
	background: #fff;
	border: 1px solid #d3d3d3;
	border-radius: 1.1cqw;
	box-shadow: 0 4cqw 6cqw -3cqw rgba(10, 10, 10, 0.45);
}
.vj3-bar {
	display: flex;
	align-items: center;
	gap: 1.2cqw;
	padding: 1.1cqw 1.8cqw;
	background: var(--paper);
	border-bottom: 1px solid #e6e6e6;
}
.vj3-bar::before {
	content: "";
	flex: none;
	width: 5cqw;
	height: 1.1cqw;
	background:
		radial-gradient(circle at 0.7cqw 0.55cqw, #d6d6d6 0 0.4cqw, transparent 0.5cqw),
		radial-gradient(circle at 2.5cqw 0.55cqw, #d6d6d6 0 0.4cqw, transparent 0.5cqw),
		radial-gradient(circle at 4.3cqw 0.55cqw, #d6d6d6 0 0.4cqw, transparent 0.5cqw);
}
.vj3-url {
	flex: 1;
	min-width: 0;
	padding: 0.5cqw 1.5cqw;
	background: #f1f1f1;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: max(0.56rem, 1.05cqw);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--mid);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.vj3-screen {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #ececec;
}
.vj3-img {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	filter: none !important;
	/* --y0: encuadre inicial (% del alto de la captura). */
	transform: translateY(calc(var(--y0, 0%) * -1));
	transition: transform 3200ms cubic-bezier(0.45, 0, 0.2, 1);
}
.vj3-sheen {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.34) 50%, transparent 62%);
	transform: translateX(-70%);
	opacity: 0;
}

/* --- Enlace que cubre toda la presentación (foco visible) --- */
.vjg-link {
	position: absolute;
	inset: -2% -2% 0 -2%;
	z-index: 12;
	border-radius: 4px;
	outline-offset: 4px;
	-webkit-tap-highlight-color: transparent;
}
.vjg-link:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 6px;
}
@media (hover: hover) and (pointer: fine) {
	.vjg-link { cursor: pointer; }
}

/* --- Teléfono --- */
.vj3-phone {
	--z: 80px;
	--d: 260ms;
	right: 0;
	bottom: 3%;
	width: 21%;
	aspect-ratio: 9 / 18.4;
	padding: 0.9cqw;
	background: #111;
	border-radius: 3.2cqw;
	box-shadow: 0 3cqw 5cqw -2.5cqw rgba(10, 10, 10, 0.6);
}
.vj3-pscreen {
	position: relative;
	height: 100%;
	overflow: hidden;
	background: #ececec;
	border-radius: 2.4cqw;
}

/* --- Ficha de identidad (paleta y tipografías reales) --- */
.vj3-chip {
	--z: 130px;
	--d: 380ms;
	left: 2%;
	bottom: -1%;
	display: flex;
	align-items: center;
	gap: 1.4cqw;
	padding: 1.1cqw 1.5cqw;
	background: var(--paper);
	border: 1px solid var(--rule);
	box-shadow: 0 2cqw 3cqw -1.6cqw rgba(10, 10, 10, 0.5);
}
.vj3-sw { display: flex; }
.vj3-sw i {
	display: block;
	width: 2.4cqw;
	height: 2.4cqw;
	margin-left: -0.35cqw;
	border: 1px solid rgba(10, 10, 10, 0.22);
}
.vj3-sw i:first-child { margin-left: 0; }
.vj3-ft {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: max(0.52rem, 1cqw);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
	white-space: nowrap;
}

/* El sitio se desplaza dentro del marco: hover en el protagonista (cursor fino). */
@media (hover: hover) and (pointer: fine) {
	.vjg-item.is-active:hover .vj3-browser .vj3-img {
		transform: translateY(calc((var(--y0, 0%) + var(--peek, 40%)) * -1));
	}
	.vjg-item.is-active:hover .vj3-phone .vj3-img {
		transform: translateY(calc((var(--y0m, 0%) + var(--peek-m, 40%)) * -1));
	}
	.vjg-item.is-active:hover .vj3-sheen {
		animation: vj3-sheen 1.6s ease-out 1;
	}
}

/* ===== Pie editorial: ficha de la presentación activa ===== */
.vjg-caps {
	display: grid;
	margin-top: clamp(1.6rem, 3vw, 2.6rem);
	min-height: 11rem;
}
.vjg-cap {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto;
	gap: clamp(1.2rem, 3vw, 3rem);
	align-items: end;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 360ms ease, transform 480ms var(--c-ease), visibility 0s linear 360ms;
}
.vjg-cap.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 90ms, 90ms, 0s;
}
.vjg-cap-index {
	margin: 0 0 0.7rem;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mid);
}
.vjg-cap-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(2.2rem, 4.6vw, 4rem);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.03em;
	color: var(--ink);
}
.vjg-cap-cat {
	margin: 0.8rem 0 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mid);
}
.vjg-cap-desc {
	margin: 0;
	max-width: 42ch;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ink);
}
.vjg-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	min-height: 48px;
	padding: 0.8rem 1.4rem;
	border: 1px solid var(--ink);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
	background: transparent;
	white-space: nowrap;
	transition: background-color 240ms ease, color 240ms ease;
}
.vjg-cta::after {
	content: "→";
	display: inline-block;
	transition: transform 280ms var(--c-ease);
}
.vjg-cta:hover { background: var(--ink); color: #fff; }
.vjg-cta:hover::after { transform: translateX(5px); }
.vjg-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ===== Pestañas numeradas ===== */
.vjg-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem clamp(0.8rem, 2.4vw, 2.2rem);
	margin-top: clamp(1.4rem, 2.6vw, 2.2rem);
	padding-top: 0.4rem;
	border-top: 1px solid var(--rule);
}
.vjg-tab {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 0.6rem;
	min-height: 48px;
	padding: 0.6rem 0.2rem;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mid);
	transition: color 240ms ease;
}
.vjg-tab span {
	font-size: 0.66rem;
	letter-spacing: 0.18em;
}
.vjg-tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	height: 2px;
	background: var(--ink);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 420ms var(--c-ease);
}
.vjg-tab:hover { color: var(--ink); }
.vjg-tab[aria-pressed="true"] { color: var(--ink); }
.vjg-tab[aria-pressed="true"]::after { transform: scaleX(1); }
.vjg-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.vjg-pause {
	display: none;
	align-items: center;
	gap: 0.6rem;
	min-height: 48px;
	margin-left: auto;
	padding: 0.5rem 1rem;
	border: 1px solid var(--ink);
	background: transparent;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
}
.vjg-pause i {
	display: block;
	width: 10px;
	height: 12px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}
.vjg-pause[aria-pressed="true"] i {
	width: 0;
	height: 0;
	border: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid currentColor;
}
.vjg-pause:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ===== Tablet y móvil: pista horizontal con snap (el teléfono protagoniza) ===== */
@media (max-width: 1099px) {
	.vjg {
		padding-inline: 0;
		padding-top: clamp(2rem, 6vw, 3rem);
	}
	.vjg-stage {
		--w: min(76vw, 440px);
		aspect-ratio: auto;
		display: flex;
		gap: clamp(0.8rem, 3vw, 1.6rem);
		align-items: center;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		padding: 1.4rem calc((100% - var(--w)) / 2) 2.2rem;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.vjg-stage::-webkit-scrollbar { display: none; }
	.vjg-item {
		position: relative;
		top: auto;
		left: auto;
		flex: 0 0 var(--w);
		width: var(--w);
		scroll-snap-align: center;
		scroll-snap-stop: always;
		--tx: 0%;
		transform: scale(var(--s));
		z-index: auto;
	}
	.vjg-item.is-active { --s: 1; }
	.vjg-item.is-before,
	.vjg-item.is-after,
	.vjg-item[data-dist="2"],
	.vjg-item[data-dist="3"] {
		--s: 0.88;
		opacity: 0.6;
		filter: blur(1px);
	}
	html.vjt-js .vjg:not(.is-in) .vjg-item { --tx: 0%; transform: translateY(24px) scale(0.94); }

	.vj3 {
		--rx: 0deg;
		--ry: 0deg;
		aspect-ratio: 1 / 1.13;
		perspective: none;
	}
	.vjg-item[data-i] .vj3,
	.vjg-item.is-active .vj3 { --rx: 0deg; --ry: 0deg; }
	.vj3-tilt { transform: none; transform-style: flat; }
	.vj3-l { transform: none !important; }
	.vj3-plate, .vj3-shadow { display: none; }
	.vj3-num { font-size: 34cqw; right: 0; top: -5%; }
	.vj3-browser { top: 3%; left: 0; width: 88%; border-radius: 2cqw; }
	.vj3-phone {
		right: 1%;
		bottom: 0;
		width: 52%;
		padding: 1.7cqw;
		border-radius: 7cqw;
	}
	.vj3-pscreen { border-radius: 5.4cqw; }
	.vj3-chip {
		left: 0;
		bottom: 2%;
		max-width: 44%;
		flex-wrap: wrap;
		gap: 1.6cqw;
		padding: 2.4cqw 3cqw;
	}
	.vj3-sw i { width: 5cqw; height: 5cqw; margin-left: -0.8cqw; }
	.vj3-ft { font-size: max(0.56rem, 2.9cqw); white-space: normal; line-height: 1.35; }
	.vj3-url { font-size: max(0.56rem, 2.7cqw); padding: 0.8cqw 2.4cqw; }
	.vj3-bar { padding: 2.2cqw 3cqw; gap: 2cqw; }
	.vj3-bar::before {
		width: 9cqw;
		height: 2cqw;
		background:
			radial-gradient(circle at 1.2cqw 1cqw, #d6d6d6 0 0.8cqw, transparent 0.9cqw),
			radial-gradient(circle at 4.5cqw 1cqw, #d6d6d6 0 0.8cqw, transparent 0.9cqw),
			radial-gradient(circle at 7.8cqw 1cqw, #d6d6d6 0 0.8cqw, transparent 0.9cqw);
	}
	.vjg-item:not(.is-active) .vj3-chip { opacity: 0.55; }

	.vjg-caps { margin-inline: var(--vj3-gut); min-height: 0; }
	.vjg-cap {
		grid-template-columns: 1fr;
		gap: 1rem;
		align-items: start;
	}
	.vjg-cap-desc { max-width: none; }
	.vjg-cta { justify-self: start; min-height: 52px; }
	.vjg-nav { margin-inline: var(--vj3-gut); }
	.vjg-tab { min-height: 52px; padding-inline: 0.5rem; }
	.vjg-pause { display: inline-flex; }
}

/* ===== Movimiento reducido ===== */
@media (prefers-reduced-motion: reduce) {
	.vjg-item,
	.vjg.is-entering .vjg-item,
	.vj3-tilt,
	.vj3-l,
	.vj3-img,
	.vjg-cap,
	.vjg-tab::after,
	.vjg-cta::after {
		transition: none !important;
	}
	html.vjt-js .vjg:not(.is-in) .vjg-item { opacity: 1; --tx: 0%; }
	html.vjt-js .vjg:not(.is-in) .vj3-l { opacity: 1; }
	.vjg .vj3-img, .vjg .vj3-sheen { animation: none !important; }
	.vjg-pause { display: none !important; }
}

/* ===== Sin cursor / pista táctil: la presentación activa se anima sola ===== */
@keyframes vj3-scroll {
	0%, 12% { transform: translateY(calc(var(--y0, 0%) * -1)); }
	58%, 100% { transform: translateY(calc((var(--y0, 0%) + var(--peek, 40%)) * -1)); }
}
@keyframes vj3-scroll-m {
	0%, 12% { transform: translateY(calc(var(--y0m, 0%) * -1)); }
	58%, 100% { transform: translateY(calc((var(--y0m, 0%) + var(--peek-m, 40%)) * -1)); }
}
@keyframes vj3-sheen {
	0% { transform: translateX(-70%); opacity: 0; }
	12% { opacity: 1; }
	100% { transform: translateX(70%); opacity: 0; }
}
@media (hover: none), (pointer: coarse), (max-width: 1099px) {
	.vjg.is-live .vjg-item.is-active .vj3-browser .vj3-img {
		animation: vj3-scroll 12s cubic-bezier(0.45, 0, 0.2, 1) 1.2s infinite alternate;
	}
	.vjg.is-live .vjg-item.is-active .vj3-phone .vj3-img {
		animation: vj3-scroll-m 12s cubic-bezier(0.45, 0, 0.2, 1) 2s infinite alternate;
	}
}