/* Exact approved artwork, uncropped, while the composition is being approved. */
.approved-reference{display:none}
@media(min-width:761px){html:not([lang=en]) body>header{display:none}html:not([lang=en]) .connected-hero{display:none}html:not([lang=en]) .approved-reference{display:block;position:relative;width:100%;background:#05070c;line-height:0;overflow:hidden}.approved-reference>img{display:block;width:100%;height:auto}.reference-hit{position:absolute;display:block;border:0;background:transparent;cursor:pointer;padding:0;border-radius:12px;line-height:1}.reference-hit:focus-visible{outline:2px solid #d0bcff;outline-offset:3px}.ref-home{left:5.8%;top:2%;width:12%;height:6%}.ref-services{left:35.5%;top:3%;width:7%;height:4%}.ref-projects{left:45%;top:3%;width:7%;height:4%}.ref-process{left:54.7%;top:3%;width:6%;height:4%}.ref-english{left:78%;top:3%;width:3%;height:4%}.ref-contact{left:83.3%;top:2%;width:11%;height:6%}.ref-whatsapp{left:6.4%;top:69.8%;width:21.5%;height:6.5%}.ref-work{left:29%;top:69.8%;width:14%;height:6.5%}}
@media(min-width:761px){html:not([lang=en]) .floating-wa,html:not([lang=en]) .chapter-navigation{display:none}}
/* Separate interactive crops preserve the exact approved screen artwork. */
.reference-screen{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:pointer;filter:brightness(1);transform:translate(var(--card-x,0px),var(--card-y,0px)) scale(1);transition:transform .9s cubic-bezier(.22,.61,.25,1),filter 1s ease;z-index:2;appearance:none}
.reference-screen img{display:block;width:100%;height:100%;pointer-events:none}
.reference-screen-web{clip-path:polygon(46% 30%,75.5% 23%,76% 80%,44.8% 79%);transform-origin:60% 52%}
.reference-screen-crm{clip-path:polygon(76.3% 13.8%,95.8% 17%,96.3% 49.4%,76.7% 46.2%);transform-origin:86% 32%}
.reference-screen-flow{clip-path:polygon(81.5% 50.2%,97.2% 52.7%,97.6% 80.4%,81.5% 79.5%);transform-origin:89.5% 66%}
.reference-screen[data-active=true]{transform:translate(var(--card-x,0px),var(--card-y,0px)) scale(1.025);filter:brightness(1.07);z-index:3}
.reference-screen:focus-visible{filter:brightness(1.12);outline:0}
@media(prefers-reduced-motion:reduce){.reference-screen,.reference-screen[data-active=true]{transform:none;transition:none}}
@media(min-width:761px){
.approved-reference{container-type:inline-size}
.approved-reference .reference-control{z-index:5;display:flex;align-items:center;justify-content:center;gap:1.3cqw;border-radius:100px;isolation:isolate;overflow:hidden;text-decoration:none;color:#fff;font:500 clamp(10px,1.05cqw,18px)/1 'DM Sans',Arial,sans-serif;letter-spacing:.05px;transition:box-shadow .55s ease,border-color .55s ease,filter .55s ease,scale .55s cubic-bezier(.22,.61,.25,1)}
.reference-control:before{content:'';position:absolute;inset:0;background:radial-gradient(90px circle at var(--button-x,50%) var(--button-y,50%),#fff2,transparent 80%);opacity:0;transition:opacity .5s;pointer-events:none;z-index:-1}
.approved-reference .ref-whatsapp,.approved-reference .ref-contact{background:linear-gradient(112deg,#8b16e5,#3935ef 55%,#075df2);border:1px solid #bda0ff72;box-shadow:inset 0 1px #ffffff26,0 4px 20px #6635df30}
.approved-reference .ref-work{background:linear-gradient(125deg,#11131eeF,#181b2aF9);border:1px solid #b7acc782;box-shadow:inset 0 1px #fff1}
.reference-control .reference-arrow{font-size:1.65em;font-weight:300;transition:translate .55s cubic-bezier(.22,.61,.25,1)}
.approved-reference .reference-control:hover{box-shadow:inset 0 1px #ffffff32,0 6px 25px #7856dd40;border-color:#d7c8ffbb;filter:brightness(1.04)}.reference-control:hover:before{opacity:1}.reference-control:hover .reference-arrow{translate:2px -2px}
.approved-reference .reference-control:active{scale:.985;filter:brightness(.95)}.approved-reference .reference-control:focus-visible{outline:2px solid #e1d2ff;outline-offset:4px}
.approved-reference .ref-contact{font-size:clamp(10px,1.1cqw,18px);gap:1cqw}
.reference-hit:not(.reference-control):hover{background:#b5a0e710}.reference-hit:not(.reference-control){transition:background .4s}
.reference-screen[data-active=true]{filter:brightness(1.045);transform:translate(var(--card-x,0px),var(--card-y,0px)) scale(1.02)}
}
@media(prefers-reduced-motion:reduce){.approved-reference .reference-control,.reference-control .reference-arrow{transition:none}.reference-control:hover .reference-arrow{translate:none}.approved-reference .reference-control:active{scale:1}}
/* Quieter controls, with generous hit areas and compact visible surfaces. */
@media(min-width:761px){
.approved-reference .reference-control{font-size:clamp(10px,.96cqw,16px);gap:1.05cqw}
.approved-reference .ref-whatsapp,.approved-reference .ref-contact{background:linear-gradient(112deg,#42345f,#303b59);border-color:#a694c568;box-shadow:inset 0 1px #e5d9ff14,0 3px 14px #17132066}
.approved-reference .ref-whatsapp{left:6.4%;top:69.8%;width:21.5%;height:6.5%;clip-path:inset(5% 1% round 100px)}
.approved-reference .ref-contact{font-size:clamp(10px,1cqw,16px);clip-path:inset(5% 1% round 100px)}
.approved-reference .ref-work{background:linear-gradient(125deg,#10131e,#171b29);border-color:#8f87a260;box-shadow:inset 0 1px #ffffff0b;clip-path:inset(5% 1% round 100px)}
.approved-reference .reference-control:hover{background:linear-gradient(112deg,#51416c,#3a4868);border-color:#c2aedb91;box-shadow:inset 0 1px #ffffff1a,0 5px 18px #62517f24;filter:none}
.approved-reference .ref-work:hover{background:#202334}.reference-control .reference-arrow{font-size:1.45em}
}
@media(min-width:761px){.approved-reference .ref-whatsapp,.approved-reference .ref-contact,.approved-reference .ref-work{clip-path:none;border:0;background:#0c0e18;box-shadow:none}.approved-reference .reference-control:after{content:'';position:absolute;inset:4px;border-radius:100px;border:1px solid #a694c568;background:linear-gradient(112deg,#42345f,#303b59);z-index:-1;transition:background .5s,border-color .5s}.approved-reference .ref-work:after{background:linear-gradient(125deg,#10131e,#171b29);border-color:#8f87a260}.approved-reference .reference-control:hover{background:#0c0e18;box-shadow:none}.approved-reference .reference-control:hover:after{background:linear-gradient(112deg,#51416c,#3a4868);border-color:#c2aedb91}}
/* More pronounced selection, preserving the approved artwork. */
@media(min-width:761px){.approved-reference .reference-screen{transition:transform 1.05s cubic-bezier(.2,.65,.2,1),filter 1.05s ease}.approved-reference .reference-screen[data-active=true]{transform:translate(var(--card-x,0px),var(--card-y,0px)) scale(1.065);filter:brightness(1.09);z-index:4}}
@media(prefers-reduced-motion:reduce){.approved-reference .reference-screen,.approved-reference .reference-screen[data-active=true]{transform:none;transition:none}}
/* Illustrative activity runs inside each independently interactive crop. */
.demo-contact,.demo-flow{position:absolute;display:flex;align-items:center;gap:.65cqw;text-align:left;background:linear-gradient(110deg,#211c3df5,#151b32fa);border:1px solid #b491ee60;border-radius:.6cqw;color:#ece6ff;font:400 .65cqw/1.3 'DM Sans',Arial,sans-serif;opacity:0;transition:opacity .85s ease,translate .85s ease;translate:0 3px;pointer-events:none}
.demo-contact{left:78.9%;top:26.4%;width:15.2%;height:5%;padding:.6cqw;rotate:7deg}.demo-contact small{display:block;font-size:.5cqw;color:#aea5c5;margin-top:.2cqw}.demo-avatar{display:grid;place-items:center;width:1.6cqw;height:1.6cqw;border-radius:50%;background:#7c59c82e;border:1px solid #a28bd15c;font-size:.55cqw}.demo-contact b{margin-left:auto;font-size:.5cqw;font-weight:400;padding:.25cqw .5cqw;border-radius:100px;background:#6240ba4a;color:#d8c8ff}
.demo-flow{left:84.1%;width:11.8%;height:5.4%;padding:.65cqw;rotate:5deg;font-size:.56cqw}.demo-flow-0{top:57.7%}.demo-flow-1{top:64.3%}.demo-flow-2{top:71%}.demo-flow i{font-style:normal;color:#c5a6ff;font-size:1.1cqw}.demo-flow b{margin-left:auto;color:#8dd8c7;font-size:.7cqw}
.approved-reference[data-demo-step="1"] .demo-contact,.approved-reference[data-demo-step="2"] .demo-contact,.approved-reference[data-demo-step="3"] .demo-contact,.approved-reference[data-demo-step="1"] .demo-flow-0,.approved-reference[data-demo-step="2"] .demo-flow-0,.approved-reference[data-demo-step="3"] .demo-flow-0,.approved-reference[data-demo-step="2"] .demo-flow-1,.approved-reference[data-demo-step="3"] .demo-flow-1,.approved-reference[data-demo-step="3"] .demo-flow-2{opacity:1;translate:0 0}
.demo-signals{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}.demo-signals path{fill:none;stroke:#d9baff;stroke-width:2;stroke-linecap:round;stroke-dasharray:12 900;opacity:0;filter:drop-shadow(0 0 4px #9779f0)}
.approved-reference[data-demo-step="0"] .demo-signal-0,.approved-reference[data-demo-step="1"] .demo-signal-1{animation:demo-transmit 2.4s cubic-bezier(.3,.4,.3,1) both}
@keyframes demo-transmit{0%{stroke-dashoffset:15;opacity:0}20%{opacity:.8}80%{opacity:.8}100%{stroke-dashoffset:-350;opacity:0}}
.demo-status{position:absolute;left:45%;right:5%;bottom:5%;margin:0;text-align:center;color:#b4a6ce;font:400 clamp(8px,.65cqw,12px)/1.5 'DM Sans',Arial,sans-serif;letter-spacing:.08em;pointer-events:none}
.connected-hero[data-demo-step="1"] .contact-row:first-of-type,.connected-hero[data-demo-step="2"] .contact-row:first-of-type,.connected-hero[data-demo-step="3"] .contact-row:first-of-type{background:#8f67db12;border-color:#b895f04d}
.connected-hero .flow-row,.connected-hero .contact-row{transition:background 1s,border-color 1s,box-shadow 1s}
.connected-hero[data-demo-step="1"] .flow-row:nth-of-type(1),.connected-hero[data-demo-step="2"] .flow-row:nth-of-type(1),.connected-hero[data-demo-step="3"] .flow-row:nth-of-type(1),.connected-hero[data-demo-step="2"] .flow-row:nth-of-type(3),.connected-hero[data-demo-step="3"] .flow-row:nth-of-type(3),.connected-hero[data-demo-step="3"] .flow-row:nth-of-type(5){background:#8f67db15;border-color:#b895f04d;box-shadow:inset 2px 0 #b895f07a}
@media(prefers-reduced-motion:reduce){.demo-contact,.demo-flow{transition:none}.demo-signals path{animation:none!important}.connected-hero .flow-row,.connected-hero .contact-row{transition:none}}
.mobile-reference-scene{display:none}
@media(max-width:760px){
.mobile-reference-scene{display:block;position:relative;width:calc(100% + 10%);margin-left:-5%;aspect-ratio:1.07;overflow:hidden;isolation:isolate;border-radius:8px;container-type:inline-size;background:#080b13}
.mobile-reference-canvas{position:absolute;width:178.57%;aspect-ratio:1.5;left:-78.57%;top:-12%;line-height:0}
.mobile-reference-canvas>img{display:block;width:100%;height:auto;pointer-events:none}
.mobile-reference-canvas .reference-screen{display:block}
.mobile-reference-canvas .reference-screen[data-active=true]{scale:1;transform:translate(var(--card-x,0px),var(--card-y,0px)) scale(1.035);filter:brightness(1.06)}
.mobile-reference-scene:after{content:'';position:absolute;inset:auto 0 0;height:14%;background:linear-gradient(transparent,#080b13);pointer-events:none;z-index:5}
.connected-stage-wrap>.mobile-reference-scene~.stage{display:none}
.connected-hero .connected-stage-wrap{margin-top:30px}.connected-hero .screen-interaction-hint{margin-top:12px;font-size:8px;letter-spacing:.8px;color:#a395bd}
.connected-hero .hero-image{background:radial-gradient(ellipse 110% 40% at 70% 70%,#54348c24,transparent 80%),linear-gradient(#080b12,#080b13)}
.connected-hero .hero-shade{background:linear-gradient(0deg,#0c0e10,transparent 25%)}
.connected-hero h1 em{color:#a58bf5}.connected-hero .hero-buttons .button{border-color:#a694c57a;background:linear-gradient(110deg,#42345f,#303b59)}
}
@media(prefers-reduced-motion:reduce){.mobile-reference-canvas .reference-screen[data-active=true]{transform:none}}
.reference-english-copy{display:none}
@media(min-width:761px){
html[lang=en] body>header{display:none}html[lang=en] .connected-hero{display:none}html[lang=en] .approved-reference{display:block;position:relative;width:100%;background:#05070c;line-height:0;overflow:hidden}html[lang=en] .floating-wa,html[lang=en] .chapter-navigation{display:none}
.reference-english-copy{position:absolute;left:4.8%;top:19%;width:39%;height:48%;padding:1.5% 1.6% 0;background:radial-gradient(ellipse at 100% 0%,#0c1220,#05070b 70%);z-index:1;box-sizing:border-box;pointer-events:none}
html[lang=en] .reference-english-copy{display:block}.reference-english-copy h1{margin:0;color:#f6f2ed;font:400 5.9cqw/1.04 'Playfair Display',Georgia,serif;letter-spacing:-.055em;white-space:nowrap}.reference-english-copy h1 em{color:#9c88f2;font-weight:400}.reference-english-copy p{font:400 1.5cqw/1.45 'DM Sans',Arial,sans-serif;margin:2.4cqw 0 0;color:#d0cdd4;white-space:nowrap}
.approved-reference .ref-services,.approved-reference .ref-projects,.approved-reference .ref-process{display:flex;align-items:center;justify-content:center;font:400 1.1cqw/1 'DM Sans',Arial,sans-serif;color:#e9e4ee;background:#080c16;z-index:5;border-radius:3px}
.approved-reference .ref-english,.approved-reference .ref-spanish{display:flex;align-items:center;justify-content:center;color:#c4bfcf;background:#090d17;font:400 1.05cqw/1 'DM Sans',Arial,sans-serif;z-index:5;border-radius:0}.approved-reference .ref-spanish{left:74.1%;top:3%;width:3%;height:4%}.approved-reference [aria-pressed=true].ref-spanish,.approved-reference [aria-pressed=true].ref-english{color:#fff;text-decoration:underline;text-decoration-color:#ac73f0;text-underline-offset:.7cqw}
}
.reference-en-panel{display:none;position:absolute;pointer-events:none;color:#eee8f5;text-align:left;line-height:1.4;font-family:'DM Sans',Arial,sans-serif}html[lang=en] .reference-en-panel{display:block}
.reference-en-web{left:47.6%;top:40%;width:15.4%;height:23%;background:linear-gradient(90deg,#0b1322fa,#0b1322ee);padding:1cqw;rotate:-3deg}.reference-en-web>small{font-size:.45cqw;letter-spacing:.1em;color:#baa5d6}.reference-en-web strong{display:block;font:400 2cqw/1.1 Georgia,serif;margin-top:.8cqw}.reference-en-web p{font-size:.6cqw;line-height:1.5;margin-top:1cqw}.reference-en-web>span{display:inline-block;border:1px solid #a383ce66;border-radius:100px;padding:.35cqw .7cqw;font-size:.55cqw;background:#25223e}
.reference-en-crm{left:78.7%;top:16.4%;width:15.7%;height:28%;rotate:7deg;background:linear-gradient(130deg,#111425,#121529);padding:.6cqw}.reference-en-panel header{display:block;margin:0;padding:0;height:auto;background:none;border:0;font-size:1cqw;color:#eee6f7}.reference-en-crm p{font-size:.6cqw;border:1px solid #72648e50;padding:.6cqw;border-radius:.4cqw;margin:.8cqw 0}.reference-en-crm>span{display:flex;align-items:center;justify-content:space-between;padding:.7cqw .4cqw;border-bottom:1px solid #a28acb1c;font-size:.65cqw}.reference-en-crm b{font-size:.5cqw;font-weight:400;border-radius:100px;background:#5b3d893b;color:#cbb0ec;padding:.25cqw .45cqw}
.reference-en-flow{left:84%;top:53.4%;width:11.8%;height:24%;rotate:5deg;background:linear-gradient(130deg,#17182c,#111528);padding:.5cqw}.reference-en-flow header{font-size:.85cqw;margin-bottom:1.3cqw}.reference-en-flow>span{display:block;border:1px solid #9e7ad833;border-radius:.4cqw;background:#29213d55;padding:.7cqw .4cqw;margin-bottom:1cqw;font-size:.57cqw}.reference-en-flow small{display:block;color:#a69ab9;font-size:.43cqw;margin-top:.3cqw}
html[lang=en] .demo-contact,html[lang=en] .demo-flow{display:none}
@media(min-width:761px){.reference-english-copy{left:4.8%;top:19%;width:39%;height:47%;background:linear-gradient(110deg,#05070b,#080d17);box-shadow:0 0 16px 9px #070b13}.reference-english-copy h1{font-size:5.15cqw;line-height:1.12;letter-spacing:-.055em}.reference-english-copy p{font-size:1.4cqw;margin-top:2.7cqw}.reference-en-crm{left:78.4%;top:16.3%;width:16.5%;height:30%;padding:.9cqw .6cqw;background:linear-gradient(130deg,#101322,#111527);border-radius:.5cqw}.reference-en-crm>span{padding:.8cqw .4cqw}.reference-en-flow{left:83.7%;top:53%;width:12.7%;height:25%;padding:.7cqw;background:#13162a;border-radius:.5cqw}}
/* Localized artwork shares the exact same frame; remove provisional text patches. */
.reference-english-copy,.reference-en-panel,html[lang=en] .reference-english-copy,html[lang=en] .reference-en-panel{display:none!important}
@media(min-width:761px){.approved-reference .ref-services,.approved-reference .ref-projects,.approved-reference .ref-process,.approved-reference .ref-english,.approved-reference .ref-spanish{background:transparent;color:transparent;text-decoration:none}.approved-reference .ref-services>span,.approved-reference .ref-projects>span,.approved-reference .ref-process>span{opacity:0}.approved-reference [aria-pressed=true].ref-spanish,.approved-reference [aria-pressed=true].ref-english{color:transparent;text-decoration:none}}