/* CreatixNova · Anatomía de una web (paquete "anatomia", página Cómo trabajamos, 12/10/2026).
   Izquierda: pantalla de navegador fija con las partes de la web dibujadas. Derecha: pasos unidos por una línea que se dibuja
   con el scroll; al llegar a cada punto se ilumina la parte correspondiente de la pantalla. */
.cnx-ct2-anat{background:#0E0F11}
.cnx-an-block{margin-top:90px!important}
.cnx-an-block+.cnx-an-block{margin-top:150px!important}
.cnx-an-block{align-items:flex-start!important}
.cnx-an-left{align-self:flex-start!important}
@media (min-width:1025px){.cnx-an-left{position:sticky!important;top:130px}}

/* ---------- Navegador ---------- */
.cnx-an-browser{border-radius:20px;overflow:hidden;background:#12131A;border:1px solid rgba(138,153,255,.22);
	box-shadow:0 40px 90px -40px rgba(0,0,0,.95),0 0 0 6px rgba(92,100,255,.05)}
.cnx-an-bar{padding:12px 16px!important;background:#191A22;border-bottom:1px solid rgba(255,255,255,.06)}
.cnx-an-dots{flex:0 0 10px;width:10px!important;height:10px;margin-right:34px;border-radius:50%;background:#ff5f57;box-shadow:16px 0 0 #febc2e,32px 0 0 #28c840}
.cnx-an-url{flex:1}
.cnx-an-url .elementor-heading-title{display:block;padding:5px 14px;border-radius:999px;background:rgba(255,255,255,.06);font:500 13px/1.3 "Familjen Grotesk",sans-serif!important;color:#9EA2B8!important}
.cnx-an-screen{display:flex!important;flex-direction:column;gap:14px;padding:22px 18px 18px!important}

/* ---------- Partes ---------- */
.cnx-an-part{position:relative;display:flex!important;flex-direction:column;gap:7px;padding:14px!important;border-radius:12px;
	background:rgba(255,255,255,.03);border:1px dashed rgba(138,153,255,.2);opacity:.5;
	transition:opacity .5s ease,background .5s ease,border-color .5s ease,box-shadow .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.cnx-an-part.is-done{opacity:.8}
.cnx-an-part.is-on{opacity:1;border-style:solid;border-color:#5C64FF;background:rgba(35,7,242,.18);transform:scale(1.025);
	box-shadow:0 0 0 4px rgba(92,100,255,.16),0 22px 44px -22px rgba(35,7,242,.9);z-index:2}
.cnx-an-tag{position:absolute!important;top:-12px;left:12px;width:auto!important;z-index:3;opacity:0;transform:translateY(4px);transition:opacity .4s ease,transform .4s ease}
.cnx-an-tag .elementor-heading-title{display:block;padding:4px 11px;border-radius:999px;background:linear-gradient(135deg,#2307F2,#5C64FF);
	font:600 12px/1.2 "Familjen Grotesk",sans-serif!important;color:#fff!important;white-space:nowrap}
.cnx-an-part.is-on .cnx-an-tag{opacity:1;transform:none}
.cnx-an-r{width:100%}
:where(.cnx-an-r,.cnx-an-pages)>.e-con{--width:auto}

/* Formas de la web de ejemplo */
.cnx-an-l{width:100%!important;height:8px;border-radius:4px;background:rgba(255,255,255,.14)}
.cnx-an-l--t{height:13px;background:rgba(255,255,255,.34)}
.cnx-an-l--70{width:70%!important}
.cnx-an-l--s{width:55%!important;background:rgba(255,255,255,.1)}
.cnx-an-logo{flex:0 0 46px;width:46px!important;height:12px;border-radius:4px;background:#5C64FF}
.cnx-an-btn{width:112px!important;height:26px;border-radius:99px;background:linear-gradient(90deg,#2307F2,#5C64FF);margin-top:4px}
.cnx-an-btn--s{flex:0 0 70px;width:70px!important;height:20px;margin:0}
.cnx-an-hero{padding:20px 16px!important;background:radial-gradient(80% 120% at 100% 0,rgba(35,7,242,.22),transparent 60%),rgba(255,255,255,.03)}
.cnx-an-box{flex:1 1 0;display:flex!important;flex-direction:column;gap:8px;min-height:62px;padding:9px!important;border-radius:10px;background:rgba(255,255,255,.06)}
.cnx-an-box--s{min-height:42px;align-items:center;justify-content:center}
.cnx-an-ic{width:18px!important;height:18px;border-radius:6px;background:#3B36FF}
.cnx-an-quote{flex:1 1 0;display:flex!important;flex-direction:row;align-items:center;gap:8px;padding:9px!important;border-radius:10px;background:rgba(255,255,255,.06)}
.cnx-an-av{flex:0 0 22px;width:22px!important;height:22px;border-radius:50%;background:#8A99FF}
.cnx-an-stars{width:90px!important;height:10px;background:radial-gradient(circle,#FFB020 3.5px,transparent 4px) 0 50%/18px 10px repeat-x}
.cnx-an-acc{width:100%!important;height:16px;border-radius:6px;background:rgba(255,255,255,.07);border-left:3px solid #5C64FF}
.cnx-an-in{flex:1 1 auto;width:auto!important;min-width:60px;height:26px;border-radius:8px;border:1px solid rgba(255,255,255,.22)}
.cnx-an-wa{width:26px!important;height:26px;border-radius:50%;background:#25D366;align-self:flex-end}
.cnx-an-menu .elementor-heading-title{font:500 12px/1 "Familjen Grotesk",sans-serif!important;color:#C9CCDA!important;white-space:nowrap}
.cnx-an-pages{width:100%}
.cnx-an-pg{flex:1 1 calc(50% - 6px)!important;min-height:92px}
.cnx-an-img{flex:1 1 0;height:42px;border-radius:8px;background:linear-gradient(135deg,rgba(92,100,255,.45),rgba(35,7,242,.2))}
.cnx-an-map{flex:0 0 88px;width:88px!important;height:62px;border-radius:8px;
	background:linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/14px 14px,linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/14px 14px,rgba(92,100,255,.18)}
.cnx-an-admin .elementor-icon{color:#8A99FF!important}

/* ---------- Pasos y línea ---------- */
.cnx-an-badge .elementor-heading-title{display:inline-block;padding:6px 15px;border-radius:999px;border:1px solid rgba(138,153,255,.4);
	font:600 13px/1.2 "Familjen Grotesk",sans-serif!important;letter-spacing:.12em;text-transform:uppercase;color:#8A99FF!important}
.cnx-an-badge--g .elementor-heading-title{background:rgba(35,7,242,.22);border-color:transparent;color:#fff!important}
.cnx-an-bt .elementor-heading-title{font:700 clamp(28px,2.6vw,36px)/1.2 "Quicksand",sans-serif!important;color:#fff!important;margin:16px 0 8px!important}
.cnx-an-bs,.cnx-an-bs p,.cnx-an-sp,.cnx-an-sp p{font-family:"Familjen Grotesk",sans-serif!important;font-size:18px!important;line-height:1.65!important;color:#C9CCDA!important;margin:0!important}
.cnx-an-steps{position:relative;margin:40px 0!important}
.cnx-an-step{position:relative;z-index:2;min-height:30vh;align-items:flex-start!important}
.cnx-an-step:last-child{min-height:0}
.cnx-an-dot{flex:0 0 54px;width:54px!important}
.cnx-an-dot .elementor-heading-title{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;
	background:#0E0F11;border:1.5px solid rgba(138,153,255,.35);font:700 17px/1 "Quicksand",sans-serif!important;color:#8A99FF!important;
	transition:background .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.cnx-an-step.is-done .cnx-an-dot .elementor-heading-title{border-color:#5C64FF;color:#fff!important}
.cnx-an-step.is-on .cnx-an-dot .elementor-heading-title{background:linear-gradient(135deg,#2307F2,#5C64FF);border-color:transparent;color:#fff!important;
	transform:scale(1.12);box-shadow:0 0 0 8px rgba(92,100,255,.16),0 0 30px rgba(92,100,255,.6)}
.cnx-an-txt{padding-top:10px!important;opacity:.5;transition:opacity .45s ease}
.cnx-an-step.is-on .cnx-an-txt,.cnx-an-step.is-done .cnx-an-txt{opacity:1}
.cnx-an-st .elementor-heading-title{font:700 24px/1.25 "Quicksand",sans-serif!important;color:#fff!important;margin:0 0 8px!important}
.cnx-an-line{position:absolute;left:0;top:0;width:140px;height:100%;pointer-events:none;z-index:1;overflow:visible}
.cnx-an-line .cnx-an-base{stroke:rgba(138,153,255,.22);stroke-width:2;fill:none;stroke-dasharray:4 8}
.cnx-an-line .cnx-an-prog{stroke:url(#cnxAnGrad);stroke-width:3;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(92,100,255,.8))}
.cnx-an-line .cnx-an-head{fill:#fff;filter:drop-shadow(0 0 8px #5C64FF)}
.cnx-an-ideal{padding:22px 24px!important;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(138,153,255,.2);gap:12px}

/* ---------- Tablet y celular: la pantalla queda fija arriba y los pasos pasan por debajo ---------- */
@media (max-width:1024px){
	.cnx-an-left{position:sticky!important;top:76px;z-index:5;padding-bottom:14px!important;background:linear-gradient(#0E0F11 85%,rgba(14,15,17,0))}
	.cnx-an-screen{gap:9px;padding:16px 12px 12px!important;max-height:40vh;overflow:hidden}
	.cnx-an-part{padding:9px!important}
	.cnx-an-step{min-height:44vh}
	.cnx-an-block+.cnx-an-block{margin-top:100px!important}
}
@media (max-width:767px){
	.cnx-an-dot{flex-basis:44px;width:44px!important}
	.cnx-an-dot .elementor-heading-title{width:44px;height:44px;font-size:15px!important}
	.cnx-an-st .elementor-heading-title{font-size:21px!important}
	.cnx-an-bs,.cnx-an-bs p,.cnx-an-sp,.cnx-an-sp p{font-size:17px!important}
	.cnx-an-menu .elementor-heading-title{font-size:10px!important}
	.cnx-an-pages>.cnx-an-pg{min-height:70px}
}
@media (prefers-reduced-motion:reduce){.cnx-an-part,.cnx-an-dot .elementor-heading-title,.cnx-an-txt{transition:none}}
/* Pantalla más compacta para que entre completa en laptops de 768 px de alto */
@media (min-width:1025px){
	.cnx-an-screen{gap:11px;padding:20px 16px 16px!important}
	.cnx-an-part{padding:11px!important;gap:6px}
	.cnx-an-hero{padding:16px 14px!important}
	.cnx-an-box{min-height:50px}
	.cnx-an-pg{min-height:80px}
	.cnx-an-left{top:max(110px,calc(50vh - 330px))}
}
/* Celular: la pantalla no se sale a lo ancho y deja ver la parte activa (12/10, revisión) */
@media (max-width:1024px){
	.cnx-an-screen{overflow:hidden;scroll-behavior:smooth}
	.cnx-an-browser{max-width:100%}
	.cnx-an-r{min-width:0;flex-wrap:nowrap}
	.cnx-an-r>.cnx-an-menu{flex:0 1 auto;min-width:0;overflow:hidden}
	.cnx-an-left{top:70px}
}
@media (max-width:767px){.cnx-an-menu .elementor-heading-title{font-size:9px!important}.cnx-an-r{gap:6px!important}}