/* ============================================================
   Portadas con visual propio (.zs-pv)
   ------------------------------------------------------------
   Reemplaza la ilustracion SVG fija que llevaba la columna
   derecha de las portadas por una pieza hecha con HTML y CSS.
   Cinco variantes, todas dentro del mismo marco de ventana:

     data-pv="venta"  -> /servicios/   venta que se arma sola
     data-pv="menu"   -> /erp/ y /demo/  indice/pasos como panel
     data-pv="swap"   -> /desarrollo-a-medida/  planilla -> sistema
     data-pv="chat"   -> /contacto/   conversacion de WhatsApp
     data-pv="pila"   -> /proyectos/  capturas reales en volumen

   Sin JS todo se ve en su estado final: el JS solo anima.
   Criterio de movimiento: el de style.css (skills de Emil Kowalski).
   ============================================================ */

.zs-pv {
	--pv-menta: #0FD4A8;
	--pv-linea: #2A3766;
	--pv-linea-2: #33427E;
	--pv-txt-2: #A9B2D0;
	--pv-txt-3: #7C88B4;
	position: relative;
	font-size: 13px;
	line-height: 1.5;
	color: var(--pv-txt-2);
}
.zs-pv *,
.zs-pv *::before,
.zs-pv *::after { box-sizing: border-box; }

/* ---------- marco de ventana ---------- */
.zs-pv-vw {
	background: linear-gradient(160deg, #1B2757, #131C42);
	border: 1px solid var(--pv-linea-2);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 30px 60px -20px rgba(4, 8, 28, .75);
}
.zs-pv-barra {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 14px;
	background: rgba(8, 13, 36, .6);
	border-bottom: 1px solid var(--pv-linea);
}
.zs-pv-barra i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #3A4780;
	flex: 0 0 auto;
}
.zs-pv-barra i:nth-child(1) { background: #F2665E; }
.zs-pv-barra i:nth-child(2) { background: #F2B33D; }
.zs-pv-barra i:nth-child(3) { background: #3FCF7F; }
.zs-pv-url {
	margin-left: 8px;
	flex: 1 1 auto;
	min-width: 0;
	background: rgba(255, 255, 255, .06);
	border-radius: 999px;
	padding: 5px 12px;
	color: var(--pv-txt-3);
	font-size: 11.5px;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zs-pv-cuerpo { padding: 16px 18px 18px; }
.zs-pv-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}
.zs-pv-tit {
	font-family: Sora, Inter, sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: #fff;
}
.zs-pv-est.zs-pv-alerta {
	color: #F2A98F;
	background: rgba(242, 169, 143, .12);
	border-color: rgba(242, 169, 143, .32);
}
.zs-pv-est {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pv-menta);
	background: rgba(15, 212, 168, .12);
	border: 1px solid rgba(15, 212, 168, .3);
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

/* ---------- venta (/servicios/) ---------- */
.zs-pv-lineas {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: 14px;
}
.zs-pv-l {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 12px;
	align-items: center;
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 10px;
	padding: 9px 12px;
}
.zs-pv-l b { color: #fff; font-weight: 600; }
.zs-pv-l .c { color: var(--pv-txt-3); font-size: 12px; }
.zs-pv-l .v { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }

.zs-pv-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	border-top: 1px dashed var(--pv-linea-2);
	padding-top: 13px;
	margin-bottom: 12px;
}
.zs-pv-total > span:first-child {
	color: var(--pv-txt-3);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
}
.zs-pv-total b {
	font-family: Sora, Inter, sans-serif;
	font-size: 26px;
	font-weight: 700;
	color: #fff;
	font-variant-numeric: tabular-nums;
	margin-left: auto;
}
.zs-pv-cta {
	background: var(--pv-menta);
	color: #06231C;
	border-radius: 10px;
	padding: 10px 18px;
	font-weight: 700;
	font-size: 13.5px;
	white-space: nowrap;
}

.zs-pv-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.zs-pv-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--pv-menta);
	background: rgba(15, 212, 168, .1);
	border: 1px solid rgba(15, 212, 168, .35);
	border-radius: 999px;
	padding: 5px 11px;
	transition: color .4s ease, background-color .4s ease, border-color .4s ease, opacity .4s ease;
}
.zs-pv-chip i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}
.zs-pv-aviso {
	position: absolute;
	right: 0;
	bottom: -20px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	background: rgba(13, 21, 51, .92);
	border: 1px solid rgba(15, 212, 168, .45);
	color: #BFFAEB;
	padding: 10px 15px;
	border-radius: 12px;
	font-size: 12.5px;
	font-weight: 600;
	box-shadow: 0 18px 34px -14px rgba(3, 6, 22, .9);
}
.zs-pv-aviso svg { flex: 0 0 auto; }

/* ---------- panel de indice / pasos (/erp/, /demo/) ---------- */
.zs-pv-menu { display: flex; flex-direction: column; gap: 6px; }
.zs-pv-item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: center;
	padding: 9px 12px;
	border-radius: 10px;
	border: 1px solid transparent;
	text-decoration: none;
	color: inherit;
	transition: background-color .4s ease, border-color .4s ease;
}
.zs-pv-item .n {
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: rgba(255, 255, 255, .07);
	color: var(--pv-txt-3);
	display: grid;
	place-items: center;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11.5px;
	font-weight: 700;
	transition: background-color .4s ease, color .4s ease;
}
.zs-pv-item b {
	display: block;
	color: #fff;
	font-family: Sora, Inter, sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.25;
}
.zs-pv-item small {
	display: block;
	color: var(--pv-txt-3);
	font-size: 11.5px;
	line-height: 1.35;
}
.zs-pv-item:hover,
.zs-pv-item.zs-pv-on {
	background: rgba(15, 212, 168, .09);
	border-color: rgba(15, 212, 168, .3);
}
.zs-pv-item:hover .n,
.zs-pv-item.zs-pv-on .n {
	background: rgba(15, 212, 168, .18);
	color: var(--pv-menta);
}
a.zs-pv-item:focus-visible {
	outline: 3px solid var(--pv-menta);
	outline-offset: 2px;
}

/* ---------- planilla -> sistema (/desarrollo-a-medida/) ---------- */
.zs-pv-capas { position: relative; }
.zs-pv-capa { transition: opacity .6s ease; }
.zs-pv-capas > .zs-pv-capa + .zs-pv-capa {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}
.zs-pv .zs-pv-capa[data-pv-visible="1"] { opacity: 1; }
.zs-pv .zs-pv-capa[data-pv-visible="0"] { opacity: 0; }

.zs-pv-hoja {
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 8px;
	overflow: hidden;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
}
.zs-pv-hoja div {
	display: grid;
	grid-template-columns: 26px 1fr 64px 58px;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.zs-pv-hoja div:last-child { border-bottom: 0; }
.zs-pv-hoja span {
	padding: 7px 9px;
	border-right: 1px solid rgba(255, 255, 255, .07);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zs-pv-hoja span:last-child { border-right: 0; }
.zs-pv-hoja .cab span {
	background: rgba(255, 255, 255, .06);
	color: var(--pv-txt-3);
	font-weight: 700;
}
.zs-pv-hoja .mal { color: #F2A98F; }

.zs-pv-tarj {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.zs-pv-tarj p {
	margin: 0;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 10px;
	padding: 10px 12px;
}
.zs-pv-tarj span {
	display: block;
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pv-txt-3);
	font-weight: 700;
	margin-bottom: 3px;
}
.zs-pv-tarj b {
	font-family: Sora, Inter, sans-serif;
	font-size: 17px;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

/* ---------- conversacion (/contacto/) ---------- */
.zs-pv-chat {
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-height: 210px;
	justify-content: flex-end;
}
.zs-pv-msg {
	max-width: 74%;
	margin: 0;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 13px;
}
.zs-pv-msg.ellos {
	background: rgba(255, 255, 255, .07);
	border-bottom-left-radius: 4px;
	align-self: flex-start;
}
.zs-pv-msg.yo {
	background: rgba(15, 212, 168, .16);
	border: 1px solid rgba(15, 212, 168, .28);
	color: #DFFFF6;
	border-bottom-right-radius: 4px;
	align-self: flex-end;
}
.zs-pv-msg .h {
	display: block;
	font-size: 10.5px;
	color: var(--pv-txt-3);
	margin-top: 4px;
}
.zs-pv-esc {
	display: none;
	gap: 4px;
	align-items: center;
	align-self: flex-start;
	padding: 12px 14px;
	background: rgba(255, 255, 255, .07);
	border-radius: 14px;
	border-bottom-left-radius: 4px;
}
.zs-pv-esc i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pv-txt-3);
}

/* ---------- capturas reales (/proyectos/) ---------- */
.zs-pv-pila {
	position: relative;
	width: 100%;
	aspect-ratio: 8 / 5.4;
	perspective: 1400px;
	--pv-mx: 0;
	--pv-my: 0;
}
.zs-pv-halo {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 78%;
	height: 70%;
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center, rgba(15, 212, 168, .3), rgba(15, 212, 168, 0) 68%);
	filter: blur(18px);
	pointer-events: none;
}
.zs-pv-cap {
	position: absolute;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--pv-linea-2);
	background: #141D45;
	box-shadow: 0 34px 60px -24px rgba(3, 6, 22, .9);
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.zs-pv-cap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top left;
}
.zs-pv-cap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, rgba(15, 212, 168, .1), transparent 55%);
}
.zs-pv-cap-1 {
	left: 0; top: 6%; width: 62%; aspect-ratio: 16 / 10; z-index: 3;
	transform: rotateY(calc(9deg + var(--pv-mx) * -5deg)) rotateX(calc(4deg + var(--pv-my) * 4deg)) translateZ(40px);
}
.zs-pv-cap-2 {
	right: 0; top: 0; width: 47%; aspect-ratio: 16 / 11; z-index: 2; opacity: .92;
	transform: rotateY(calc(9deg + var(--pv-mx) * -4deg)) rotateX(calc(4deg + var(--pv-my) * 3deg));
}
.zs-pv-cap-3 {
	right: 6%; bottom: 0; width: 53%; aspect-ratio: 16 / 10; z-index: 4;
	transform: rotateY(calc(9deg + var(--pv-mx) * -6deg)) rotateX(calc(4deg + var(--pv-my) * 5deg)) translateZ(70px);
}
/* Variante con dos capturas: sin la del medio, las otras dos se abren
   para que la diagonal siga leyendose. */
.zs-pv-pila-2 { aspect-ratio: 8 / 5.2; }
.zs-pv-pila-2 .zs-pv-cap-1 { left: 0; top: 0; width: 66%; }
.zs-pv-pila-2 .zs-pv-cap-3 { right: 0; bottom: 0; width: 60%; }

.zs-pv-ficha {
	position: absolute;
	z-index: 6;
	width: max-content;
	max-width: 48%;
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	background: rgba(13, 21, 51, .88);
	border: 1px solid rgba(15, 212, 168, .35);
	border-radius: 12px;
	padding: 9px 13px;
	box-shadow: 0 14px 30px -12px rgba(3, 6, 22, .9);
}
.zs-pv-ficha b {
	font-family: Sora, Inter, sans-serif;
	font-weight: 700;
	color: var(--pv-menta);
	font-size: 21px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.zs-pv-ficha span { font-size: 11px; line-height: 1.25; }
/* Las dos fichas van juntas en el hueco de abajo a la izquierda: apiladas
   se leen como un pie de foto y no como globos sueltos sobre las capturas. */
.zs-pv-ficha-a { left: 0; bottom: 17%; }
.zs-pv-ficha-b { left: 0; bottom: 1%; }

/* ============================================================
   Movimiento. Nada se mueve hasta que el JS marca .zs-pv-vivo
   (entra en pantalla), y el estado sin animar ya es el correcto.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
	.zs-pv-vivo[data-pv="venta"] .zs-pv-l { animation: zs-pv-entra .5s cubic-bezier(.2, .7, .3, 1) backwards; }
	.zs-pv-vivo[data-pv="venta"] .zs-pv-l:nth-child(1) { animation-delay: .25s; }
	.zs-pv-vivo[data-pv="venta"] .zs-pv-l:nth-child(2) { animation-delay: .95s; }
	.zs-pv-vivo[data-pv="venta"] .zs-pv-l:nth-child(3) { animation-delay: 1.65s; }

	/* Solo la venta enciende sus avisos uno a uno; en las demas piezas
	   los chips son texto normal y se ven desde el principio. */
	.zs-pv-vivo[data-pv="venta"] .zs-pv-chip { opacity: .3; }
	.zs-pv-vivo[data-pv="venta"] .zs-pv-chip.zs-pv-on { opacity: 1; }

	.zs-pv-vivo .zs-pv-aviso {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity .45s cubic-bezier(.2, .7, .3, 1), transform .45s cubic-bezier(.2, .7, .3, 1);
	}
	.zs-pv-vivo .zs-pv-aviso.zs-pv-on { opacity: 1; transform: none; }

	.zs-pv-vivo .zs-pv-msg { animation: zs-pv-entra .45s cubic-bezier(.2, .7, .3, 1) backwards; }
	.zs-pv-vivo .zs-pv-msg:nth-of-type(1) { animation-delay: .3s; }
	.zs-pv-vivo .zs-pv-msg:nth-of-type(2) { animation-delay: 1.3s; }
	.zs-pv-vivo .zs-pv-msg:nth-of-type(3) { animation-delay: 2.5s; }
	.zs-pv-vivo .zs-pv-esc {
		display: flex;
		animation: zs-pv-entra .4s ease backwards;
		animation-delay: 1.9s;
	}
	.zs-pv-vivo .zs-pv-esc i { animation: zs-pv-punto 1.1s infinite; }
	.zs-pv-vivo .zs-pv-esc i:nth-child(2) { animation-delay: .18s; }
	.zs-pv-vivo .zs-pv-esc i:nth-child(3) { animation-delay: .36s; }


	.zs-pv-vivo .zs-pv-cap-1 { animation: zs-pv-flota 7s ease-in-out infinite; }
	.zs-pv-vivo .zs-pv-cap-2 { animation: zs-pv-flota 7s ease-in-out infinite .9s; }
	.zs-pv-vivo .zs-pv-cap-3 { animation: zs-pv-flota 7s ease-in-out infinite 1.8s; }
	.zs-pv-vivo .zs-pv-ficha-a { animation: zs-pv-flota 7s ease-in-out infinite .4s; }
	/* Misma espera que la ficha de arriba: apiladas, tienen que flotar juntas. */
	.zs-pv-vivo .zs-pv-ficha-b { animation: zs-pv-flota 7s ease-in-out infinite .4s; }
}

@keyframes zs-pv-entra { from { opacity: 0; transform: translateY(9px); } }
@keyframes zs-pv-punto {
	0%, 60%, 100% { opacity: .3; transform: translateY(0); }
	30% { opacity: 1; transform: translateY(-3px); }
}
@keyframes zs-pv-flota { 0%, 100% { margin-top: 0; } 50% { margin-top: -14px; } }

/* ---------- pantallas chicas ---------- */
@media (max-width: 1024px) {
	.zs-pv { max-width: 560px; }
}

/* ============================================================
   Aislamiento
   ------------------------------------------------------------
   Algunas portadas viven dentro de contenedores que ya traen sus
   propios estilos de parrafo y lista (por ejemplo .zs-demo-hero p
   de articulo-visual.css, que pinta 17px y margen 22px). Estas
   reglas, con la clase repetida para ganar en especificidad,
   evitan que esos estilos se cuelen en la pieza.
   ============================================================ */
.zs-pv p,
.zs-pv ul,
.zs-pv ol,
.zs-pv li { margin: 0; padding: 0; }
.zs-pv ul,
.zs-pv ol { list-style: none; }
.zs-pv .zs-pv-msg { font-size: 13px; line-height: 1.5; color: var(--pv-txt-2); }
.zs-pv .zs-pv-msg.yo { color: #DFFFF6; }
.zs-pv .zs-pv-aviso { font-size: 12.5px; line-height: 1.4; color: #BFFAEB; }
.zs-pv .zs-pv-ficha span { font-size: 11.5px; line-height: 1.3; color: var(--pv-txt-2); }
.zs-pv .zs-pv-tarj p { margin: 0; }
.zs-pv .zs-pv-item small { font-size: 11.5px; line-height: 1.35; color: var(--pv-txt-3); }

/* La capa de arriba del "swap" va en position:absolute, asi que la
   altura la fija la de abajo: se le da un minimo para que la mas
   alta de las dos quepa siempre. */
.zs-pv-capas > .zs-pv-capa:first-child { min-height: 274px; }

/* ============================================================
   Pantallas chicas
   ------------------------------------------------------------
   Va al final del archivo a proposito: asi gana por orden a las
   reglas de escritorio de su misma especificidad, como
   .zs-pv-pila-2 .zs-pv-cap-1.
   ============================================================ */
@media (max-width: 767px) {
	.zs-pv { font-size: 12.5px; }
	.zs-pv-cuerpo { padding: 13px 14px 15px; }
	.zs-pv-total b { font-size: 22px; }
	.zs-pv .zs-pv-aviso { right: 0; bottom: -14px; font-size: 11.5px; padding: 8px 12px; }

	/* La pila deja de ser una composicion en tres planos: en un ancho de
	   celular las otras dos capturas quedan ilegibles y las fichas se
	   montaban encima de la imagen. Queda una captura arriba y las dos
	   fichas en fila debajo, sin taparla. */
	.zs-pv-pila {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		aspect-ratio: auto;
		perspective: none;
		padding-bottom: 0;
	}
	.zs-pv-halo,
	.zs-pv-pila .zs-pv-cap-2,
	.zs-pv-pila .zs-pv-cap-3 { display: none; }
	.zs-pv-pila .zs-pv-cap-1 {
		position: relative;
		inset: auto;
		flex: 1 1 100%;
		width: 100%;
		aspect-ratio: 16 / 10;
		transform: none;
	}
	.zs-pv .zs-pv-ficha,
	.zs-pv .zs-pv-ficha-a,
	.zs-pv .zs-pv-ficha-b {
		position: static;
		inset: auto;
		/* Una ficha por fila: lado a lado, "$500.000 desde, plan Starter"
		   se parte en tres lineas y queda desalineada con la otra. */
		flex: 1 1 100%;
		width: auto;
		max-width: none;
	}
	.zs-pv .zs-pv-ficha span br { display: none; }

	/* Sin composicion no hay nada que flotar. */
	.zs-pv-vivo .zs-pv-cap-1,
	.zs-pv-vivo .zs-pv-ficha-a,
	.zs-pv-vivo .zs-pv-ficha-b { animation: none; }
}