/* CreatixNova · Logros Digitales (portafolio). Paquete "logros" del plugin CreatixNova Core.
   Rejilla de 3 columnas (2 en tablet, 1 en celular) alimentada por el CPT Proyectos, con paginación debajo.
   Cada tarjeta es una pantalla: se ve la portada del sitio (parte de arriba de la captura completa); al pasar el puntero
   la captura se recorre sola de arriba abajo, como si alguien bajara por la página. La lupa abre la vista previa centrada.
   El número del proyecto va en la esquina superior derecha. Sin botón hacia la web del cliente. */

/* ---------- Rejilla ---------- */
.cnx-logros .elementor-loop-container{counter-reset:cnxLg 0;gap:40px 28px!important}
.cnx-logros .e-loop-item{counter-increment:cnxLg 1}
.cnx-pf5-card{position:relative;height:100%}

/* ---------- Pantalla ---------- */
.cnx-pf5-img{position:relative;padding:34px 8px 8px!important;border-radius:18px;isolation:isolate;
	background:linear-gradient(160deg,#26262c,#141418 60%,#1c1c22);
	box-shadow:0 0 0 1px rgba(255,255,255,.08),0 26px 50px -30px rgba(0,0,0,.9);
	transition:box-shadow .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
/* Barra superior tipo navegador (tres puntos) */
.cnx-pf5-img::before{content:"";position:absolute;top:13px;left:16px;width:9px;height:9px;border-radius:50%;
	background:#ff5f57;box-shadow:15px 0 0 #febc2e,30px 0 0 #28c840;opacity:.85}
/* Número del proyecto (esquina superior derecha) */
.cnx-pf5-img::after{content:counter(cnxLg,decimal-leading-zero);position:absolute;top:7px;right:14px;z-index:3;
	font:700 15px/20px "Quicksand",sans-serif;letter-spacing:.08em;color:rgba(255,255,255,.55);transition:color .4s ease}
.cnx-pf5-card:hover .cnx-pf5-img{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(138,153,255,.45),0 34px 60px -30px rgba(35,7,242,.9)}
.cnx-pf5-card:hover .cnx-pf5-img::after{color:#B6C1FF}
.cnx-pf5-photo{position:relative;width:100%!important;margin:0!important;line-height:0;aspect-ratio:16/10;overflow:hidden;border-radius:10px;background:#0b0b0e}
.cnx-pf5-photo img{display:block;width:100%!important;max-width:none!important;height:auto!important;border-radius:0!important;
	transform:translateY(0);transition:transform var(--cnx-back,1.2s) cubic-bezier(.45,.05,.3,1);will-change:transform}
/* Recorrido al pasar el puntero: la distancia y el tiempo los calcula logros.js según el alto de cada captura */
.cnx-pf5-card:hover .cnx-pf5-photo img,.cnx-pf5-card.is-peek .cnx-pf5-photo img{transform:translateY(calc(var(--cnx-dist,0px) * -1));transition-duration:var(--cnx-dur,8s);transition-timing-function:linear}

/* Lupa: vidrio esmerilado abajo a la derecha de la pantalla */
.cnx-pf5-zoom{position:absolute!important;right:20px;bottom:20px;z-index:3;width:auto!important;margin:0!important}
.cnx-pf5-zoom .elementor-icon{width:54px;height:54px;display:flex!important;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
	color:#fff!important;font-size:20px;background:rgba(14,15,17,.45);border:1px solid rgba(255,255,255,.35);
	-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .4s ease,transform .4s ease}
.cnx-pf5-zoom .elementor-icon svg{width:20px;height:20px;fill:currentColor!important}
.cnx-pf5-zoom .elementor-icon:hover,.cnx-pf5-zoom .elementor-icon:focus-visible{background:linear-gradient(135deg,#2307F2,#5C64FF);transform:scale(1.08)}

/* ---------- Texto bajo la pantalla (compacto, sin cinta de color) ---------- */
.cnx-pf5-content{position:relative;width:100%!important;margin:0!important;padding:18px 6px 0!important;align-items:flex-start!important;text-align:left}
.cnx-pf5-cat .elementor-heading-title{margin:0 0 6px;font-family:"Familjen Grotesk",sans-serif!important;font-size:14px!important;font-weight:600!important;
	letter-spacing:.12em;line-height:1.3!important;color:#8A99FF!important;text-transform:uppercase}
.cnx-pf5-title .elementor-heading-title{margin:0;font-family:"Quicksand",sans-serif!important;font-size:21px!important;font-weight:700!important;line-height:1.3!important;color:#fff!important}

/* ---------- Paginación ---------- */
.cnx-logros .elementor-pagination{margin-top:56px!important;display:flex;justify-content:center;align-items:center;gap:10px;font-family:"Familjen Grotesk",sans-serif}
.cnx-logros .elementor-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:48px;padding:0 16px;border-radius:999px;
	border:1px solid rgba(255,255,255,.18);color:#fff!important;font-size:16px;font-weight:600;text-decoration:none;transition:background .3s ease,border-color .3s ease}
.cnx-logros .elementor-pagination .page-numbers:hover{border-color:#3B36FF}
.cnx-logros .elementor-pagination .page-numbers.current{background:linear-gradient(135deg,#2307F2,#5C64FF);border-color:transparent}
.cnx-logros .elementor-pagination .page-numbers.dots{border:0;min-width:auto}

@media (max-width:767px){.cnx-pf5-title .elementor-heading-title{font-size:19px!important}.cnx-pf5-zoom .elementor-icon{width:50px;height:50px}}

/* ---------- Visor: monitor sin teclado ---------- */
.cnx-lx{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:4vh 4vw;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.cnx-lx.is-open{opacity:1;visibility:visible}
.cnx-lx__bg{position:absolute;inset:0;background:rgba(7,6,14,.72);-webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%)}
.cnx-lx__stage{position:relative;width:min(1180px,100%);display:flex;flex-direction:column;align-items:center;transform:translateY(30px) scale(.96);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.cnx-lx.is-open .cnx-lx__stage{transform:none}
.cnx-lx__bezel{position:relative;width:100%;padding:16px 16px 34px;border-radius:22px;background:linear-gradient(160deg,#2a2b31,#121216 55%,#1d1e23);
	box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 120px -30px rgba(35,7,242,.55),0 30px 60px -20px rgba(0,0,0,.8)}
.cnx-lx__bezel::before{content:"";position:absolute;top:6px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#3a3b42}
.cnx-lx__bezel::after{content:"";position:absolute;left:50%;bottom:11px;width:58px;height:5px;margin-left:-29px;border-radius:4px;background:rgba(255,255,255,.12)}
.cnx-lx__screen{position:relative;width:100%;aspect-ratio:16/9;max-height:68vh;overflow-y:auto;overflow-x:hidden;border-radius:6px;background:#0b0b0e;
	scrollbar-width:thin;scrollbar-color:#3B36FF #0b0b0e;overscroll-behavior:contain}
.cnx-lx__screen img{display:block;width:100%;height:auto}
.cnx-lx__neck{width:16%;height:56px;background:linear-gradient(90deg,#17181c,#2b2c32 50%,#17181c);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.cnx-lx__base{width:32%;height:12px;border-radius:0 0 14px 14px;background:linear-gradient(180deg,#2b2c32,#141418);box-shadow:0 18px 30px -12px rgba(0,0,0,.8)}
.cnx-lx__cap{margin-top:22px;text-align:center;color:#fff;font-family:"Quicksand",sans-serif;font-size:22px;font-weight:700}
.cnx-lx__cap small{display:block;margin-bottom:4px;font-family:"Familjen Grotesk",sans-serif;font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8A99FF}
.cnx-lx__hint{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);padding:8px 16px;border-radius:999px;font:600 14px/1 "Familjen Grotesk",sans-serif;color:#fff;
	background:rgba(14,15,17,.6);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;transition:opacity .5s ease}
.cnx-lx__hint.is-off{opacity:0}
.cnx-lx__close{position:absolute;top:18px;right:18px;z-index:2;width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.3)!important;cursor:pointer;
	background:rgba(255,255,255,.1)!important;color:#fff!important;font-size:26px;line-height:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .3s ease,transform .3s ease}
.cnx-lx__close:hover,.cnx-lx__close:focus-visible{background:linear-gradient(135deg,#2307F2,#5C64FF)!important;transform:rotate(90deg)}
@media (max-width:767px){.cnx-lx{padding:70px 12px 20px}.cnx-lx__bezel{padding:8px 8px 20px;border-radius:14px}.cnx-lx__screen{aspect-ratio:9/14;max-height:66vh}
	.cnx-lx__neck,.cnx-lx__base{display:none}.cnx-lx__cap{font-size:18px}.cnx-lx__hint{bottom:30px}}
@media (prefers-reduced-motion:reduce){.cnx-lx,.cnx-lx__stage,.cnx-pf5-img,.cnx-pf5-photo img{transition:none!important}.cnx-pf5-card:hover .cnx-pf5-photo img{transform:none}}

/* ---------- Visor como laptop (12/10): sin pata; la base es el teclado plano de una laptop, todo centrado y adaptable ---------- */
.cnx-lx{padding:80px 4vw 30px}
.cnx-lx__stage{width:min(1120px,100%)}
.cnx-lx__bezel{width:100%;padding:14px 14px 16px;border-radius:20px 20px 8px 8px}
.cnx-lx__bezel::after{display:none}
.cnx-lx__screen{aspect-ratio:16/10;max-height:calc(100vh - 260px);max-height:calc(100dvh - 260px)}
.cnx-lx__neck{display:none!important}
.cnx-lx__base{display:block!important;position:relative;width:calc(100% + 8%);height:18px;margin-top:-1px;border-radius:2px 2px 22px 22px;
	background:linear-gradient(180deg,#3a3b42 0%,#25262b 45%,#141418 100%);box-shadow:0 26px 40px -18px rgba(0,0,0,.9),0 40px 80px -40px rgba(35,7,242,.55)}
.cnx-lx__base::before{content:"";position:absolute;top:0;left:50%;width:16%;height:7px;transform:translateX(-50%);border-radius:0 0 10px 10px;background:#111216}
.cnx-lx__cap{margin-top:26px}
.cnx-lx__hint{bottom:30px}
/* Botón cerrar: círculo perfecto con una X dibujada (el tema le metía relleno y lo deformaba) */
.cnx-lx__close{top:20px;right:20px;width:52px!important;height:52px!important;min-width:0!important;min-height:0!important;padding:0!important;margin:0!important;
	display:flex!important;align-items:center;justify-content:center;border-radius:50%!important;font-size:0!important;line-height:0!important;box-sizing:border-box;aspect-ratio:1}
.cnx-lx__close svg{width:20px;height:20px;stroke:#fff;stroke-width:2.4;stroke-linecap:round;fill:none;pointer-events:none}
@media (max-width:767px){.cnx-lx{padding:76px 12px 20px}.cnx-lx__screen{aspect-ratio:9/14;max-height:calc(100dvh - 230px)}
	.cnx-lx__base{display:block!important;height:12px;width:calc(100% + 12px)}.cnx-lx__close{top:14px;right:14px;width:46px!important;height:46px!important}}