/* CreatixNova · Carrusel de proyectos (paquete "carrusel"). Diseño de tarjetas inclinadas del home (Swiper coverflow),
   alimentado por el CPT Proyectos con el shortcode [cnx_proyectos_carrusel]. Se usa en el home y en Centro Creativo. */
.cnx-pf-stage{position:relative}
.cnx-pf-stage.swiper{display:block!important;min-height:0!important;width:100%;overflow:visible}
.cnx-pf-stage .swiper-wrapper{position:relative;display:flex;width:100%;height:322px;margin:239px 0 249px;box-sizing:content-box;transition-property:transform;z-index:1}
.cnx-pf-stage .swiper-slide{flex-shrink:0;position:relative;height:322px;transition-property:transform}
.cnx-pf-card{position:relative!important;width:100%!important;height:322px;border-radius:50px;overflow:hidden;cursor:grab;background-size:cover;background-position:center top;background-color:#1A1B1F}
.cnx-pf-card::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:0;z-index:1;background:rgba(14,15,17,.5);transition:all .5s ease;pointer-events:none}
.cnx-pf-card::before{content:"";position:absolute;width:142px;height:123px;top:calc(50% - 73.5px);left:50%;z-index:2;opacity:0;pointer-events:none;transition:all .5s ease 0ms;transform:translate(-50%,-400px) rotate(-29deg);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 156 134' fill='none'%3E%3Cpath d='M88.93 1.5c1.69-.01 3.31.6 4.58 1.7l.25.23 58.49 58.49a6.86 6.86 0 0 1 0 9.7L93.73 130.13a6.86 6.86 0 1 1-9.7-9.69l44.25-44.25 2.48-2.48-3.5-.08L8.39 70.77a6.86 6.86 0 0 1-.05-13.72l118.84 2.86 3.75.09-2.65-2.65L84.05 13.12a6.86 6.86 0 0 1 4.88-11.62Z' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat}
.cnx-pf-info{position:absolute!important;left:0;bottom:0;width:100%!important;z-index:3;opacity:0;visibility:hidden;display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;gap:16px;padding:39px 50px;background:linear-gradient(90deg,#2307F2 0%,#5C64FF 100%);transition:opacity .45s ease,visibility .45s}
.cnx-pf-txt{display:flex;flex-direction:column;gap:8px;min-width:0}
.cnx-pf-t{margin:0!important;font:700 24px/1.25 "Quicksand",sans-serif!important;color:#fff!important}
.cnx-pf-t a{color:#fff!important;text-decoration:none!important}
.cnx-pf-c{font:500 16px/1.6 "Familjen Grotesk",sans-serif;color:#fff;text-transform:uppercase;letter-spacing:.02em}
.cnx-pf-year{font:700 49px/1 "Quicksand",sans-serif;color:transparent;-webkit-text-stroke:1.6px #fff;flex:0 0 auto}
.cnx-pf-year .elementor-heading-title{-webkit-text-stroke:1px #fff}
.cnx-pf-stage .center{align-self:center;z-index:3!important}
/* La franja de datos aparece con un fundido suave (antes caía desde arriba con zoom y parecía un salto) */
.cnx-pf-stage .center .cnx-pf-info{opacity:1;visibility:visible;animation:cnx-pf-up .5s ease .15s both!important}
@keyframes cnx-pf-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cnx-pf-stage .center:hover .cnx-pf-card::after{height:100%;top:0}
.cnx-pf-stage .center:hover .cnx-pf-card::before{opacity:1;transition-delay:200ms;transform:translate(-50%,-50%) rotate(-29deg)}
/* Flechas propias del carrusel (cuando el shortcode las incluye) */
.cnx-pf-nav{display:flex;justify-content:center;gap:20px;margin-top:10px}
.cnx-pf-nav .elementor-icon{width:69px;height:69px;display:flex;align-items:center;justify-content:center;border:1px solid #fff;border-radius:50%;color:#fff;cursor:pointer;transition:all .5s ease}
.cnx-pf-nav .elementor-icon svg{width:20px;height:20px;fill:currentColor}
.cnx-pf-prev .elementor-icon,.cnx-pf-next .elementor-icon{width:69px;height:69px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .5s ease}
.cnx-pf-prev .elementor-icon:hover,.cnx-pf-next .elementor-icon:hover{background:linear-gradient(135deg,#2307F2,#5C64FF)!important;border-color:transparent!important}
.cnx-pf-prev .elementor-icon:focus-visible,.cnx-pf-next .elementor-icon:focus-visible{outline:3px solid #8A99FF;outline-offset:3px}
@media (min-width:992px){.cnx-pf-stage .center .cnx-pf-card{position:absolute!important;top:50%;left:50%;transform:translate(-50%,-50%)}}
@media (min-width:1400px){
 .cnx-pf-stage .is-one{z-index:1!important;transform:rotate(46.93deg) translateX(-50px) translateY(-100px)!important}
 .cnx-pf-stage .is-two{z-index:2!important;transform:rotate(-16.97deg) translateX(-150px) translateY(110px)!important}
 .cnx-pf-stage .is-four{z-index:2!important;transform:rotate(16.97deg) translateX(150px) translateY(110px)!important}
 .cnx-pf-stage .is-five{z-index:1!important;transform:rotate(-46.93deg) translateX(50px) translateY(-100px)!important}
}
@media (min-width:1600px){
 .cnx-pf-stage .is-one{transform:rotate(46.93deg) translateX(0) translateY(-100px)!important}
 .cnx-pf-stage .is-two{transform:rotate(-16.97deg) translateX(-100px) translateY(180px)!important}
 .cnx-pf-stage .is-four{transform:rotate(16.97deg) translateX(100px) translateY(180px)!important}
 .cnx-pf-stage .is-five{transform:rotate(-46.93deg) translateX(0) translateY(-100px)!important}
}
@media (max-width:991px){.cnx-pf-stage.swiper{overflow:hidden}.cnx-pf-stage .swiper-wrapper{margin:0 0 60px!important}}
@media (max-width:767px){.cnx-pf-stage .swiper-wrapper,.cnx-pf-stage .swiper-slide,.cnx-pf-card{height:500px!important}
 .cnx-pf-info{padding:24px 26px;flex-direction:column;align-items:flex-start}.cnx-pf-year{display:none}}

/* ---------- Carrusel del home (tarjetas inclinadas): el diseño queda igual, solo la lupa en la tarjeta central ---------- */
.cnx-pf-lupa{position:absolute;top:40px;right:40px;z-index:4;width:66px;height:66px;display:flex;align-items:center;justify-content:center;
	padding:0;border:0;border-radius:50%;background:#fff;color:#121115;cursor:pointer;box-shadow:0 10px 24px -10px rgba(0,0,0,.7);
	opacity:0;visibility:hidden;transform:scale(.6);transition:opacity .4s ease,transform .4s ease,background .3s ease,color .3s ease,visibility .4s}
.cnx-pf-lupa svg{width:26px;height:26px}
.cnx-pf-stage .center .cnx-pf-lupa{opacity:1;visibility:visible;transform:none}
.cnx-pf-stage .center .cnx-pf-lupa:hover,.cnx-pf-stage .center .cnx-pf-lupa:focus-visible{background:linear-gradient(135deg,#2307F2,#5C64FF);color:#fff;transform:scale(1.08)}
.cnx-pf-lupa:focus-visible{outline:3px solid #8A99FF;outline-offset:3px}
@media (max-width:991px){.cnx-pf-lupa{top:26px;right:26px;width:56px;height:56px}}

/* ---------- Tarjeta destacada más contenida (pedido 12/10): mismo carrusel, centro más chico y franja de datos flotante ---------- */
@media (min-width:992px){
	.cnx-pf-stage .center .cnx-pf-card{width:520px!important;height:460px!important;border-radius:40px!important;
		box-shadow:0 0 0 1px rgba(138,153,255,.35),0 40px 80px -36px rgba(35,7,242,.65)}
	.cnx-pf-stage .swiper-wrapper{margin:140px 0 150px!important}
}
@media (min-width:1200px){.cnx-pf-stage .center .cnx-pf-card{width:560px!important;height:490px!important}.cnx-pf-stage .swiper-wrapper{margin:150px 0 160px!important}}
@media (min-width:1400px){.cnx-pf-stage .center .cnx-pf-card{width:600px!important;height:520px!important}.cnx-pf-stage .swiper-wrapper{margin:170px 0 180px!important}}
.cnx-pf-stage .center .cnx-pf-info{left:14px!important;right:14px!important;bottom:14px!important;width:auto!important;padding:20px 28px!important;border-radius:28px;
	background:linear-gradient(90deg,rgba(35,7,242,.92),rgba(92,100,255,.88))!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
	box-shadow:0 18px 40px -20px rgba(0,0,0,.8)}
.cnx-pf-stage .center .cnx-pf-info h3,.cnx-pf-stage .center .cnx-pf-info h3 a{font-size:clamp(20px,1.6vw,24px)!important;line-height:1.25!important;text-transform:none!important}
.cnx-pf-stage .center .cnx-pf-year .elementor-heading-title{font-size:clamp(40px,3.4vw,54px)!important;line-height:1!important}
.cnx-pf-stage .center .cnx-pf-lupa{top:22px;right:22px;width:54px;height:54px}
.cnx-pf-stage .center .cnx-pf-lupa svg{width:22px;height:22px}
.cnx-pf-stage .center .cnx-pf-year{font-size:clamp(40px,3.4vw,54px)}
/* Transición suave (12/10): en escritorio todas las tarjetas quedan centradas en su diapositiva y solo cambian de tamaño,
   así la que pasa al centro crece poco a poco en vez de saltar de golpe. */
@media (min-width:992px){
	.cnx-pf-stage .cnx-pf-card{position:absolute!important;top:50%;left:50%;width:100%!important;height:322px;transform:translate(-50%,-50%);
		transition:width .9s cubic-bezier(.22,.8,.24,1),height .9s cubic-bezier(.22,.8,.24,1),border-radius .9s ease,box-shadow .9s ease}
	.cnx-pf-stage .swiper-slide{transition-property:transform;transition-timing-function:cubic-bezier(.22,.8,.24,1)}
}
@media (prefers-reduced-motion:reduce){.cnx-pf-stage .cnx-pf-card{transition:none!important}}
/* Sin la flecha diagonal al pasar el puntero (pedido 12/10): la lupa es la única acción de la tarjeta */
.cnx-pf-stage .cnx-pf-card::before{display:none!important}
