/*
 * Home v2 (29-sep-2026, SPEC-HOME-V2.md): solo con la cookie de preview pmhome2.
 * Todo el markup usa el prefijo z2- para que ninguna regla vieja lo alcance.
 * Fondo negro puro; superficies y brillos ambar sutiles encima.
 */

/* ---------- tokens ---------- */
.z2-main {
	--z2-bg: #000;
	--z2-surface: rgba(255, 255, 255, .035);
	--z2-surface-2: rgba(255, 255, 255, .055);
	--z2-border: rgba(255, 255, 255, .09);
	--z2-border-h: rgba(255, 255, 255, .16);
	--z2-radius: 22px;
	--z2-radius-in: 14px;
	--z2-accent: #FFA500;
	--z2-accent-h: #FFBA3D;
	--z2-title: #FFF;
	--z2-text: #D9D9D9;
	--z2-muted: #9C9C9C;
	--z2-max: 1200px;
	--z2-gut: 24px;
	--z2-gap: 120px;
	--z2-ease: cubic-bezier(.2, .7, .2, 1);
	background: var(--z2-bg);
	color: var(--z2-text);
	font-family: var(--pm-font-ui);
	font-size: 18px;
	line-height: 1.65;
	letter-spacing: -0.005em;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.z2 {
	position: relative;
	isolation: isolate;
}

.z2 p {
	margin: 0 0 1em;
}

.z2 p:last-child {
	margin-bottom: 0;
}

.z2 strong {
	color: var(--z2-title);
	font-weight: 600;
}

.z2 img {
	display: block;
	max-width: 100%;
	height: auto;
}

.z2 a {
	color: var(--z2-accent);
	text-decoration: none;
	transition: color .2s ease;
}

.z2 p a:hover {
	color: var(--z2-accent-h);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.z2-orange,
.z2-price-inline {
	color: var(--z2-accent);
	font-weight: 600;
}

.z2-wrap {
	width: 100%;
	max-width: calc(var(--z2-max) + 2 * var(--z2-gut));
	margin: 0 auto;
	padding: 0 var(--z2-gut);
	position: relative;
}

.z2-section {
	position: relative;
	padding-top: var(--z2-gap);
}

.z2-section--tight {
	padding-top: 72px;
}

/* ---------- tipografia ---------- */
.z2-h1,
.z2-h2,
.z2-h3 {
	margin: 0;
	color: var(--z2-title);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.08;
	font-family: inherit;
}

.z2-h1 {
	font-size: clamp(44px, 5.4vw, 72px);
	letter-spacing: -0.03em;
	line-height: 1.02;
}

.z2-h2 {
	font-size: clamp(32px, 3.2vw, 44px);
}

.z2-h3 {
	font-size: clamp(24px, 2vw, 28px);
	line-height: 1.15;
	margin-bottom: 16px;
}

.z2-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--z2-accent);
}

.z2-kicker::before {
	content: "";
	width: 22px;
	height: 1px;
	background: currentColor;
	opacity: .7;
}

.z2-head {
	text-align: center;
	max-width: 820px;
	margin: 0 auto 56px;
}

.z2-sub {
	margin: 20px auto 0 !important;
	max-width: 760px;
	font-size: 19px;
	color: var(--z2-text);
}

.z2-label {
	margin: 0 0 18px !important;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	color: var(--z2-muted);
}

.z2-note {
	max-width: 820px;
	margin: 40px auto 0 !important;
	text-align: center;
	font-size: 15px;
	line-height: 1.6;
	color: var(--z2-muted);
}

/* ---------- iconos (mascaras SVG, mismos trazos de icons.css) ---------- */
.z2-ico {
	display: inline-block;
	flex: none;
	width: var(--z2-w, 1em);
	height: 1em;
	font-style: normal;
	background-color: currentColor;
	-webkit-mask: var(--z2-i) no-repeat center / contain;
	mask: var(--z2-i) no-repeat center / contain;
}
.z2-ico--download{--z2-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z'/%3E%3C/svg%3E")}
.z2-ico--cart{--z2-w:1.125em;--z2-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z'/%3E%3C/svg%3E")}
.z2-ico--badge{--z2-w:0.75em;--z2-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M336 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm0 464H48V48h288v416zM144 112h96c8.8 0 16-7.2 16-16s-7.2-16-16-16h-96c-8.8 0-16 7.2-16 16s7.2 16 16 16zm48 176c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm-89.6 128h179.2c12.4 0 22.4-8.6 22.4-19.2v-19.2c0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6v19.2c0 10.6 10 19.2 22.4 19.2z'/%3E%3C/svg%3E")}
.z2-ico--windows{--z2-w:0.875em;--z2-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z'/%3E%3C/svg%3E")}
.z2-ico--apple{--z2-w:0.75em;--z2-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/%3E%3C/svg%3E")}
.z2-ico--linux{--z2-w:0.875em;--z2-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M220.8 123.3c1 .5 1.8 1.7 3 1.7 1.1 0 2.8-.4 2.9-1.5.2-1.4-1.9-2.3-3.2-2.9-1.7-.7-3.9-1-5.5-.1-.4.2-.8.7-.6 1.1.3 1.3 2.3 1.1 3.4 1.7zm-21.9 1.7c1.2 0 2-1.2 3-1.7 1.1-.6 3.1-.4 3.5-1.6.2-.4-.2-.9-.6-1.1-1.6-.9-3.8-.6-5.5.1-1.3.6-3.4 1.5-3.2 2.9.1 1 1.8 1.5 2.8 1.4zM420 403.8c-3.6-4-5.3-11.6-7.2-19.7-1.8-8.1-3.9-16.8-10.5-22.4-1.3-1.1-2.6-2.1-4-2.9-1.3-.8-2.7-1.5-4.1-2 9.2-27.3 5.6-54.5-3.7-79.1-11.4-30.1-31.3-56.4-46.5-74.4-17.1-21.5-33.7-41.9-33.4-72C311.1 85.4 315.7.1 234.8 0 132.4-.2 158 103.4 156.9 135.2c-1.7 23.4-6.4 41.8-22.5 64.7-18.9 22.5-45.5 58.8-58.1 96.7-6 17.9-8.8 36.1-6.2 53.3-6.5 5.8-11.4 14.7-16.6 20.2-4.2 4.3-10.3 5.9-17 8.3s-14 6-18.5 14.5c-2.1 3.9-2.8 8.1-2.8 12.4 0 3.9.6 7.9 1.2 11.8 1.2 8.1 2.5 15.7.8 20.8-5.2 14.4-5.9 24.4-2.2 31.7 3.8 7.3 11.4 10.5 20.1 12.3 17.3 3.6 40.8 2.7 59.3 12.5 19.8 10.4 39.9 14.1 55.9 10.4 11.6-2.6 21.1-9.6 25.9-20.2 12.5-.1 26.3-5.4 48.3-6.6 14.9-1.2 33.6 5.3 55.1 4.1.6 2.3 1.4 4.6 2.5 6.7v.1c8.3 16.7 23.8 24.3 40.3 23 16.6-1.3 34.1-11 48.3-27.9 13.6-16.4 36-23.2 50.9-32.2 7.4-4.5 13.4-10.1 13.9-18.3.4-8.2-4.4-17.3-15.5-29.7zM223.7 87.3c9.8-22.2 34.2-21.8 44-.4 6.5 14.2 3.6 30.9-4.3 40.4-1.6-.8-5.9-2.6-12.6-4.9 1.1-1.2 3.1-2.7 3.9-4.6 4.8-11.8-.2-27-9.1-27.3-7.3-.5-13.9 10.8-11.8 23-4.1-2-9.4-3.5-13-4.4-1-6.9-.3-14.6 2.9-21.8zM183 75.8c10.1 0 20.8 14.2 19.1 33.5-3.5 1-7.1 2.5-10.2 4.6 1.2-8.9-3.3-20.1-9.6-19.6-8.4.7-9.8 21.2-1.8 28.1 1 .8 1.9-.2-5.9 5.5-15.6-14.6-10.5-52.1 8.4-52.1zm-13.6 60.7c6.2-4.6 13.6-10 14.1-10.5 4.7-4.4 13.5-14.2 27.9-14.2 7.1 0 15.6 2.3 25.9 8.9 6.3 4.1 11.3 4.4 22.6 9.3 8.4 3.5 13.7 9.7 10.5 18.2-2.6 7.1-11 14.4-22.7 18.1-11.1 3.6-19.8 16-38.2 14.9-3.9-.2-7-1-9.6-2.1-8-3.5-12.2-10.4-20-15-8.6-4.8-13.2-10.4-14.7-15.3-1.4-4.9 0-9 4.2-12.3zm3.3 334c-2.7 35.1-43.9 34.4-75.3 18-29.9-15.8-68.6-6.5-76.5-21.9-2.4-4.7-2.4-12.7 2.6-26.4v-.2c2.4-7.6.6-16-.6-23.9-1.2-7.8-1.8-15 .9-20 3.5-6.7 8.5-9.1 14.8-11.3 10.3-3.7 11.8-3.4 19.6-9.9 5.5-5.7 9.5-12.9 14.3-18 5.1-5.5 10-8.1 17.7-6.9 8.1 1.2 15.1 6.8 21.9 16l19.6 35.6c9.5 19.9 43.1 48.4 41 68.9zm-1.4-25.9c-4.1-6.6-9.6-13.6-14.4-19.6 7.1 0 14.2-2.2 16.7-8.9 2.3-6.2 0-14.9-7.4-24.9-13.5-18.2-38.3-32.5-38.3-32.5-13.5-8.4-21.1-18.7-24.6-29.9s-3-23.3-.3-35.2c5.2-22.9 18.6-45.2 27.2-59.2 2.3-1.7.8 3.2-8.7 20.8-8.5 16.1-24.4 53.3-2.6 82.4.6-20.7 5.5-41.8 13.8-61.5 12-27.4 37.3-74.9 39.3-112.7 1.1.8 4.6 3.2 6.2 4.1 4.6 2.7 8.1 6.7 12.6 10.3 12.4 10 28.5 9.2 42.4 1.2 6.2-3.5 11.2-7.5 15.9-9 9.9-3.1 17.8-8.6 22.3-15 7.7 30.4 25.7 74.3 37.2 95.7 6.1 11.4 18.3 35.5 23.6 64.6 3.3-.1 7 .4 10.9 1.4 13.8-35.7-11.7-74.2-23.3-84.9-4.7-4.6-4.9-6.6-2.6-6.5 12.6 11.2 29.2 33.7 35.2 59 2.8 11.6 3.3 23.7.4 35.7 16.4 6.8 35.9 17.9 30.7 34.8-2.2-.1-3.2 0-4.2 0 3.2-10.1-3.9-17.6-22.8-26.1-19.6-8.6-36-8.6-38.3 12.5-12.1 4.2-18.3 14.7-21.4 27.3-2.8 11.2-3.6 24.7-4.4 39.9-.5 7.7-3.6 18-6.8 29-32.1 22.9-76.7 32.9-114.3 7.2zm257.4-11.5c-.9 16.8-41.2 19.9-63.2 46.5-13.2 15.7-29.4 24.4-43.6 25.5s-26.5-4.8-33.7-19.3c-4.7-11.1-2.4-23.1 1.1-36.3 3.7-14.2 9.2-28.8 9.9-40.6.8-15.2 1.7-28.5 4.2-38.7 2.6-10.3 6.6-17.2 13.7-21.1.3-.2.7-.3 1-.5.8 13.2 7.3 26.6 18.8 29.5 12.6 3.3 30.7-7.5 38.4-16.3 9-.3 15.7-.9 22.6 5.1 9.9 8.5 7.1 30.3 17.1 41.6 10.6 11.6 14 19.5 13.7 24.6zM173.3 148.7c2 1.9 4.7 4.5 8 7.1 6.6 5.2 15.8 10.6 27.3 10.6 11.6 0 22.5-5.9 31.8-10.8 4.9-2.6 10.9-7 14.8-10.4s5.9-6.3 3.1-6.6-2.6 2.6-6 5.1c-4.4 3.2-9.7 7.4-13.9 9.8-7.4 4.2-19.5 10.2-29.9 10.2s-18.7-4.8-24.9-9.7c-3.1-2.5-5.7-5-7.7-6.9-1.5-1.4-1.9-4.6-4.3-4.9-1.4-.1-1.8 3.7 1.7 6.5z'/%3E%3C/svg%3E")}

/* ---------- botones ---------- */
.z2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 52px;
	padding: 0 26px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.z2-btn:focus-visible {
	outline: 2px solid var(--z2-accent);
	outline-offset: 3px;
}

.z2 .z2-btn--primary {
	background: var(--z2-accent);
	color: #000;
	box-shadow: 0 10px 34px -12px rgba(255, 165, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.z2 .z2-btn--primary:hover {
	background: var(--z2-accent-h);
	color: #000;
	transform: translateY(-1px);
	box-shadow: 0 14px 40px -12px rgba(255, 165, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .4);
}

.z2 .z2-btn--ghost {
	color: #FFF;
	background: rgba(255, 255, 255, .02);
	border: 1px solid rgba(255, 255, 255, .2);
}

.z2 .z2-btn--ghost:hover {
	color: #FFF;
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .38);
	transform: translateY(-1px);
}

.z2-btn--block {
	display: flex;
	width: 100%;
}

.z2-btn--lg {
	height: 60px;
	padding: 0 34px;
	font-size: 18px;
}

.z2-btn__plats {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	opacity: .8;
}

.z2-btn__price {
	padding-left: 12px;
	margin-left: 2px;
	border-left: 1px solid rgba(0, 0, 0, .22);
	font-feature-settings: "tnum" 1;
}

/* ---------- cards ---------- */
.z2-card {
	position: relative;
	background: var(--z2-surface);
	border: 1px solid var(--z2-border);
	border-radius: var(--z2-radius);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .4);
}

@media (hover: hover) {
	.z2-card:hover {
		border-color: var(--z2-border-h);
		transform: translateY(-2px);
	}
}

/* ---------- reveal al scroll (fade + 16 px, stagger por --z2-d) ---------- */
.z2-card,
.z2-reveal {
	transition:
		opacity .6s var(--z2-ease) var(--z2-d, 0ms),
		translate .6s var(--z2-ease) var(--z2-d, 0ms),
		scale 1.6s var(--z2-ease),
		transform .2s ease,
		border-color .2s ease;
}

.z2-js .z2-reveal:not(.is-in) {
	opacity: 0;
	translate: 0 16px;
}

.z2-js .z2-reveal--zoom:not(.is-in) {
	translate: none;
	scale: 1.06;
}

/* ---------- brillos ambar ---------- */
.z2-glow {
	position: absolute;
	z-index: -1;
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 165, 0, .10), rgba(255, 140, 0, .04) 55%, rgba(255, 140, 0, 0));
}

.z2-glow--hero {
	width: 1100px;
	height: 900px;
	top: -220px;
	right: -260px;
}

.z2-glow--price {
	width: 1000px;
	height: 900px;
	left: 50%;
	top: 120px;
	transform: translateX(-50%);
}

/* ---------- hero ---------- */
.z2-hero {
	position: relative;
	padding: 96px 0 24px;
}

.z2-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: 64px;
	align-items: center;
}

/* el PNG trae aire negro alrededor del logotipo: se compensa para alinear con el texto */
.z2-hero__logo {
	--z2-lw: 230px;
	mix-blend-mode: screen; /* el fondo negro del PNG desaparece sobre el brillo */
	width: var(--z2-lw);
	margin: calc(var(--z2-lw) * -.045) 0 28px calc(var(--z2-lw) * -.134);
}

.z2-hero__copy .z2-h1 {
	margin-bottom: 28px;
}

.z2-lead {
	font-size: 19px;
	color: #E4E4E4;
}

.z2-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 36px;
}

.z2-avail {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-top: 24px !important;
	font-size: 15px;
	line-height: 1.55;
	color: var(--z2-muted);
	max-width: 520px;
}

.z2-avail__icons {
	display: inline-flex;
	gap: 9px;
	padding-top: 4px;
	font-size: 16px;
	color: #CFCFCF;
}

.z2-hero__media {
	perspective: 1200px;
}

.z2-hero__frame {
	position: relative;
	border-radius: 28px;
	padding: 28px;
	background:
		#000;
	border: 1px solid var(--z2-border);
	box-shadow: 0 40px 120px -40px rgba(255, 140, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
	transform: rotateY(-6deg) rotateX(2deg);
	transform-origin: 60% 50%;
	transition: transform .6s var(--z2-ease), border-color .3s ease;
}

.z2-hero__media:hover .z2-hero__frame {
	transform: none;
	border-color: var(--z2-border-h);
}

.z2-hero__frame img {
	width: 100%;
}

/* ---------- video demo ---------- */
.z2-video {
	max-width: 1040px;
	margin: 0 auto;
	padding: 10px;
	border-radius: 26px;
	background: var(--z2-surface);
	border: 1px solid var(--z2-border);
	box-shadow: 0 40px 100px -50px rgba(255, 150, 0, .35);
}

.z2-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: #0A0A0A;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}

.z2-video__frame iframe,
.z2-video__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.z2-video__cover {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	cursor: pointer;
}

.z2-video__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 60% at 50% 50%, rgba(0, 0, 0, .05), rgba(0, 0, 0, .35));
	transition: opacity .3s ease;
}

.z2-video__play {
	position: relative;
	z-index: 1;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .45);
	border: 1px solid rgba(255, 255, 255, .45);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: background-color .25s ease, border-color .25s ease, transform .25s var(--z2-ease);
}

.z2-video__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 30px;
	margin: -15px 0 0 -10px;
	background: #FFF;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transition: background-color .25s ease;
}

.z2-video__cover:hover .z2-video__play,
.z2-video__cover:focus-visible .z2-video__play {
	background: var(--z2-accent);
	border-color: var(--z2-accent);
	transform: scale(1.06);
}

.z2-video__cover:hover .z2-video__play::before,
.z2-video__cover:focus-visible .z2-video__play::before {
	background: #000;
}

.z2-video__cover:focus-visible {
	outline: none;
}

.z2-credit {
	margin: 20px auto 0 !important;
	max-width: 900px;
	text-align: center;
	font-size: 15px;
	color: var(--z2-muted);
}

/* ---------- bento de features ---------- */
.z2-bento {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--z2-gut);
}

.z2-span-7 {
	grid-column: span 7;
}

.z2-span-5 {
	grid-column: span 5;
}

.z2-feature {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.z2-feature__media {
	margin: 8px 8px 0;
	height: clamp(240px, 25vw, 340px);
	border-radius: var(--z2-radius-in);
	overflow: hidden;
	background: #000;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.z2-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: scale .8s var(--z2-ease);
}

.z2-feature__media--top img {
	object-position: center top;
}

@media (hover: hover) {
	.z2-feature:hover .z2-feature__media img {
		scale: 1.025;
	}
}

.z2-feature__body {
	padding: 30px 34px 36px;
	font-size: 17px;
}

/* ---------- franja glass ---------- */
.z2-band {
	margin-top: var(--z2-gap);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

.z2-band img {
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
}

/* ---------- compatibilidad ---------- */
.z2-compat__group + .z2-compat__group {
	margin-top: 44px;
}

.z2-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.z2-logo {
	flex: 0 0 182px;
	height: 86px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .07);
}

.z2-logo:hover {
	border-color: var(--z2-border-h);
}

.z2-logo img {
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: .8;
	transition: opacity .2s ease;
}

.z2-logo:hover img {
	opacity: 1;
}

/* ---------- one app, any setup ---------- */
.z2-setups {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--z2-gut);
}

.z2-setup {
	padding: 22px 22px 24px;
	text-align: center;
}

.z2-setup img {
	width: 100%;
	aspect-ratio: 760 / 525;
	object-fit: contain;
	margin: 0 auto 14px;
}

.z2-setup p {
	font-size: 16px;
	line-height: 1.45;
	color: #E6E6E6;
}

.z2-outro {
	max-width: 820px;
	margin: 56px auto 0 !important;
	text-align: center;
	font-size: 19px;
}

.z2-gear {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	margin-top: 56px;
}

.z2-gear__item {
	text-align: center;
	padding: 18px 10px 18px;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, .06);
	background: rgba(255, 255, 255, .02);
}

.z2-gear__item img {
	height: 96px;
	width: auto;
	margin: 0 auto 10px;
}

.z2-gear__item p {
	font-size: 16px;
	color: #E6E6E6;
	white-space: nowrap;
}

/* ---------- precio ---------- */
.z2-pricing {
	isolation: isolate;
}

.z2-price {
	max-width: 640px;
	margin: 0 auto;
	padding: 40px 40px 40px;
	text-align: center;
	background:
		radial-gradient(100% 60% at 50% 0%, rgba(255, 165, 0, .09), transparent 70%),
		rgba(255, 255, 255, .04);
	border-color: rgba(255, 165, 0, .22);
	box-shadow: 0 50px 120px -60px rgba(255, 150, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
}

@media (hover: hover) {
	.z2-price:hover {
		border-color: rgba(255, 165, 0, .36);
	}
}

/* flex: cada caption ocupa lo que mide, en un solo renglon */
.z2-plat {
	display: flex;
	justify-content: space-evenly;
	gap: 20px;
}

.z2-plat__item img {
	width: 64px;
	margin: 0 auto 10px;
}

.z2-plat__item p {
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap; /* un renglon por caption (en mobile pueden partirse) */
	color: #E6E6E6;
}

.z2-price__amount {
	margin: 30px 0 26px !important;
	padding: 22px 0;
	border-top: 1px solid var(--z2-border);
	border-bottom: 1px solid var(--z2-border);
	font-size: clamp(64px, 7vw, 84px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--z2-accent);
	font-feature-settings: "tnum" 1;
	text-shadow: 0 0 40px rgba(255, 165, 0, .25);
}

.z2-price__text {
	text-align: left;
	font-size: 17px;
	margin-bottom: 32px;
}

/* ---------- open source ---------- */
.z2-oss {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--z2-gut);
}

.z2-app {
	grid-column: span 2;
	padding: 30px 30px 34px;
	font-size: 17px;
}

.z2-app:nth-child(4),
.z2-app:nth-child(5) {
	grid-column: span 3;
}

.z2-app__logo {
	height: 52px;
	display: flex;
	align-items: center;
	margin-bottom: 24px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--z2-border);
	box-sizing: content-box;
}

.z2-app__logo a {
	display: block;
	height: 100%;
}

.z2-app__logo img {
	mix-blend-mode: screen;
	height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

/* alturas opticas: cada logotipo tiene otra proporcion */
.z2-app__logo img[src*="mixxx"] {
	height: 44px;
}

.z2-app__logo img[src*="lmms2"] {
	height: 42px;
}

.z2-app__logo img[src*="openmpt2"] {
	height: 46px;
}

.z2-app__logo img[src*="ardour"],
.z2-app__logo img[src*="obs2"] {
	height: 38px;
}

.z2-app p a {
	font-weight: 600;
}

/* ---------- foro ---------- */
.z2-forum {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 48px;
	align-items: center;
	padding: 48px 56px;
}

.z2-forum .z2-h2 {
	margin-bottom: 16px;
	font-size: clamp(28px, 2.8vw, 40px);
}

.z2-forum p {
	max-width: 640px;
}

/* ---------- boton final: suelto sobre el negro (Pablo, 29-sep: sin franja gris) ---------- */
.z2-cta-band {
	margin-top: var(--z2-gap);
	padding: 0;
	text-align: center;
}

/* ---------- built on experience ---------- */
.z2-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	position: relative;
}

.z2-timeline::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .18) 60%, rgba(255, 165, 0, .6));
}

.z2-step {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-top: 40px;
	font-size: 17px;
}

.z2-step__dot {
	position: absolute;
	top: 0;
	left: 0;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #000;
	border: 1px solid rgba(255, 255, 255, .45);
	box-shadow: 0 0 0 5px #000;
}

.z2-step--now .z2-step__dot {
	background: var(--z2-accent);
	border-color: var(--z2-accent);
	box-shadow: 0 0 0 5px #000, 0 0 24px 4px rgba(255, 165, 0, .55);
}

.z2-step--now p strong {
	color: var(--z2-accent);
}

/* fotos del archivo + video de Maetrik (misma fila, misma altura) */
.z2-archive {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--z2-gut);
	margin-top: 56px;
	align-items: stretch;
}

.z2-archive__img {
	grid-column: 1 / span 5;
	position: relative;
	min-height: 200px;
	overflow: hidden;
}

.z2-archive__img img {
	position: absolute;
	inset: 8px;
	width: calc(100% - 16px);
	height: calc(100% - 16px);
	object-fit: cover;
	border-radius: var(--z2-radius-in);
	background: #000;
}

/* logo del DJ Mag dentro del hito 2 de la linea de tiempo */
/* el webp trae aire transparente alrededor: se compensa para alinear el logo con el texto */
.z2-step__award {
	width: 240px;
	max-width: none;
	margin: 4px 0 -38px -69px;
}

.z2-maetrik {
	grid-column: 6 / -1;
	padding: 8px;
}

.z2-maetrik__caption {
	margin: 0 !important;
	padding: 20px 18px 14px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--z2-muted);
}

.z2-maetrik__video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--z2-radius-in);
	overflow: hidden;
	background: #0A0A0A;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}

.z2-maetrik__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* imagen de cierre: solo escritorio (como la franja final de hoy) */
.z2-finale {
	margin-top: 80px;
	aspect-ratio: 1800 / 1200;
	max-height: 900px;
	background: #000 url("https://pablomartin.com/wp-content/uploads/2021/10/unnamed.jpg") center bottom / 100% auto no-repeat;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%);
	mask-image: linear-gradient(to bottom, transparent, #000 30%);
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
	.z2-main {
		--z2-gap: 96px;
	}

	.z2-hero__grid {
		gap: 40px;
	}

	.z2-span-7,
	.z2-span-5 {
		grid-column: span 6;
	}

	.z2-feature__body {
		padding: 26px 26px 30px;
	}

	.z2-app,
	.z2-app:nth-child(4),
	.z2-app:nth-child(5) {
		grid-column: span 3;
	}

	.z2-app:nth-child(5) {
		grid-column: 2 / span 4;
	}

	.z2-gear {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 12px;
	}

	.z2-logo {
		flex-basis: calc((100% - 60px) / 6);
		padding: 0 14px;
	}

	.z2-gear__item img {
		height: 72px;
	}

	.z2-gear__item p {
		font-size: 15px;
		white-space: normal;
	}

	.z2-finale {
		display: none;
	}
}

@media (max-width: 860px) {
	.z2-hero {
		padding-top: 64px;
	}

	.z2-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.z2-hero__media {
		max-width: 520px;
		margin: 0 auto;
		width: 100%;
	}

	.z2-hero__frame {
		transform: none;
	}

	.z2-span-7,
	.z2-span-5 {
		grid-column: 1 / -1;
	}

	.z2-feature__media {
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.z2-setups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.z2-app,
	.z2-app:nth-child(4),
	.z2-app:nth-child(5) {
		grid-column: 1 / -1;
	}

	.z2-forum {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding: 36px 32px;
	}

	.z2-forum .z2-btn {
		justify-self: start;
	}

	.z2-timeline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 48px;
	}

	.z2-timeline::before {
		display: none;
	}

	.z2-archive {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.z2-archive__img {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.z2-maetrik {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	.z2-main {
		--z2-gap: 72px;
		--z2-gut: 20px;
		font-size: 17px;
	}

	.z2-section--tight {
		padding-top: 56px;
	}

	.z2-hero {
		padding-top: 48px;
	}

	.z2-hero__logo {
		--z2-lw: 180px;
		margin-bottom: 20px;
	}

	.z2-lead {
		font-size: 18px;
	}

	.z2-ctas {
		flex-direction: column;
		align-items: stretch;
	}

	.z2-ctas .z2-btn {
		width: 100%;
	}

	.z2-hero__frame {
		padding: 16px;
		border-radius: 22px;
	}

	.z2-head {
		margin-bottom: 40px;
	}

	.z2-sub,
	.z2-outro {
		font-size: 18px;
	}

	.z2-video {
		padding: 6px;
		border-radius: 20px;
	}

	.z2-video__frame {
		border-radius: 14px;
	}

	.z2-video__play {
		width: 68px;
		height: 68px;
	}

	.z2-video__play::before {
		width: 20px;
		height: 24px;
		margin: -12px 0 0 -8px;
	}

	.z2-feature__body {
		padding: 24px 22px 28px;
	}

	.z2-band img {
		aspect-ratio: 4 / 3;
	}

	.z2-logos {
		gap: 8px;
	}

	.z2-logo {
		flex-basis: calc((100% - 16px) / 3);
		height: 64px;
		padding: 0 10px;
		border-radius: 12px;
	}

	.z2-logo img {
		max-height: 34px;
	}

	.z2-setups {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.z2-setup {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 16px;
		align-items: center;
		text-align: left;
		padding: 14px 18px 14px 14px;
	}

	.z2-setup img {
		margin: 0;
	}

	.z2-gear {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.z2-gear__item:last-child {
		grid-column: 1 / -1;
	}

	.z2-price {
		padding: 32px 22px;
	}

	.z2-plat__item img {
		width: 52px;
	}

	.z2-plat {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}

	.z2-plat__item p {
		font-size: 13px;
		white-space: normal;
	}

	.z2-btn--block,
	.z2-btn--lg {
		height: auto;
		min-height: 56px;
		padding: 14px 20px;
		flex-wrap: wrap;
		white-space: normal;
		row-gap: 6px;
		font-size: 16px;
	}

	.z2-cta-band {
		padding: 40px 0;
	}

	.z2-app {
		padding: 26px 22px 30px;
	}

	.z2-forum {
		padding: 30px 22px;
	}

	.z2-forum .z2-btn {
		width: 100%;
	}

	.z2-timeline {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 36px;
		padding-left: 28px;
	}

	.z2-timeline::before {
		display: block;
		top: 8px;
		bottom: 8px;
		left: 7px;
		right: auto;
		width: 1px;
		height: auto;
		background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .2) 60%, rgba(255, 165, 0, .6));
	}

	.z2-step {
		padding-top: 0;
	}

	.z2-step__dot {
		left: -28px;
		top: 5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.z2-card,
	.z2-reveal,
	.z2-hero__frame,
	.z2-feature__media img {
		transition: none !important;
	}

	.z2-js .z2-reveal:not(.is-in) {
		opacity: 1;
		translate: none;
		scale: none;
	}
}