@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#080b14;--panel:#0e1320;--panel2:#111827;--text:#f3f6ff;--muted:#9ca8bd;--cyan:#65e4f2;--violet:#a88bff;--line:rgba(174,195,229,.14);--max:1160px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;line-height:1.6;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.ambient{position:absolute;pointer-events:none;border-radius:50%;filter:blur(90px);opacity:.13;z-index:-1}.ambient-one{width:360px;height:360px;background:#2863e9;top:140px;left:-190px}.ambient-two{width:360px;height:360px;background:#8b4dff;top:580px;right:-230px}.section-wrap{width:min(var(--max),calc(100% - 48px));margin-inline:auto}.site-header{height:82px;display:flex;align-items:center;justify-content:space-between;width:min(var(--max),calc(100% - 48px));margin:auto;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;background:rgba(8,11,20,.84);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.brand{display:inline-flex;align-items:center;gap:11px;font:800 18px Manrope,sans-serif;letter-spacing:-.6px;flex-shrink:0}.brand-logo{display:block;width:43px;height:43px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(101,228,242,.12))}.brand-name{white-space:nowrap}.core-logo span,.about-monogram span{color:var(--cyan)}.nav-links{display:flex;align-items:center;gap:31px;font-size:13px;color:#c2cada}.nav-links>a:not(.nav-cta):hover,.footer-links a:hover{color:var(--cyan)}.nav-cta{border:1px solid rgba(101,228,242,.4);padding:10px 15px;border-radius:8px;color:var(--text)}.nav-cta span{color:var(--cyan);margin-left:8px}.menu-toggle{display:none;background:none;border:0}.hero{min-height:630px;padding:92px 0 25px;display:grid;grid-template-columns:1.04fr .96fr;align-items:center;position:relative}.hero-copy{position:relative;z-index:2}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#9cabc4;display:flex;align-items:center;gap:10px}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);display:inline-block}.hero h1,.section-heading h2,.about-copy h2,.contact-copy h2{font:800 clamp(42px,5.2vw,66px)/1.12 Manrope,sans-serif;letter-spacing:-3.4px;margin:24px 0 22px}.gradient-text{background:linear-gradient(100deg,#65e4f2 4%,#8ca9ff 52%,#b68aff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-lead{font-size:16px;line-height:1.85;color:#aab5c9;max-width:515px}.hero-actions{display:flex;align-items:center;gap:27px;margin-top:31px}.button{display:inline-flex;align-items:center;justify-content:center;gap:17px;border:0;border-radius:8px;padding:14px 19px;font-weight:700;font-size:13px;cursor:pointer}.button-primary{color:#071016;background:linear-gradient(100deg,#65e4f2,#91d9f4);box-shadow:0 9px 35px rgba(67,209,231,.14);transition:transform .2s,box-shadow .2s}.button-primary:hover{transform:translateY(-2px);box-shadow:0 12px 35px rgba(67,209,231,.23)}.text-link{font-size:13px;color:#d9e0ef}.text-link span{color:var(--cyan);margin-left:8px}.hero-proof{display:flex;align-items:center;gap:14px;margin-top:53px}.proof-avatars{display:flex;padding-left:5px}.proof-avatars span{width:31px;height:31px;margin-left:-5px;display:grid;place-items:center;border:2px solid var(--bg);border-radius:50%;background:#192d40;color:var(--cyan);font-size:10px;font-weight:800}.proof-avatars span:nth-child(2){background:#28203e;color:#c6b5ff}.proof-avatars span:nth-child(3){background:#1e3838;color:#a2f3d4}.hero-proof p{font-size:11px;line-height:1.5;margin:0;color:#e1e7f3}.hero-proof small{font-size:10px;color:#8d9ab0}.hero-art{height:440px;position:relative;display:grid;place-items:center}.orbit{position:absolute;border:1px solid rgba(119,157,236,.17);border-radius:50%;transform:rotate(-25deg)}.orbit-a{width:420px;height:250px}.orbit-b{width:340px;height:410px;transform:rotate(35deg);border-color:rgba(165,132,255,.18)}.glow-core{width:190px;height:190px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#253b58,#111829 65%);border:1px solid rgba(119,214,245,.45);box-shadow:0 0 70px rgba(72,159,234,.16),inset 0 0 40px rgba(101,228,242,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1}.core-logo{font:800 70px/1 Manrope;letter-spacing:-7px}.core-caption{font-size:8px;letter-spacing:3px;color:#91a6c2;margin-top:12px}.float-card{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid rgba(162,186,223,.19);border-radius:11px;background:rgba(13,19,32,.92);box-shadow:0 15px 50px #03050a88;backdrop-filter:blur(12px);min-width:205px}.float-card b{font-size:10px;display:block}.float-card small{font-size:9px;color:#92a1b7;display:block;margin-top:2px}.mini-icon{width:31px;height:31px;border-radius:8px;background:#193b49;color:var(--cyan);display:grid;place-items:center;font-size:18px}.mini-purple{background:#302347;color:#c5a4ff}.card-check{color:#81e9d0;margin-left:auto}.card-web{top:49px;left:0;animation:float 5s ease-in-out infinite}.card-ai{right:-7px;top:188px;animation:float 5s 1s ease-in-out infinite}.card-growth{bottom:41px;left:40px;animation:float 5s 2s ease-in-out infinite}.growth-arrow{font-size:24px;color:#80f0ce}.spark{position:absolute;color:var(--cyan);font-size:27px}.spark-one{top:77px;right:75px}.spark-two{bottom:95px;right:40px;color:#b69bff}@keyframes float{50%{transform:translateY(-7px)}}.hero-bottom{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;margin-top:12px;font-size:9px;letter-spacing:1.6px;color:#718099}.scroll-cue b{font-size:15px;color:var(--cyan);margin-left:12px}.trust-strip{border-block:1px solid var(--line);background:#0a0e18}.trust-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:15px;color:#8491a8;font-size:10px;letter-spacing:1.5px;font-weight:700}.trust-inner i{width:4px;height:4px;background:#61718b;border-radius:50%}.section-block{padding-top:112px;padding-bottom:112px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:43px}.section-heading h2,.about-copy h2,.contact-copy h2{font-size:clamp(34px,4vw,48px);letter-spacing:-2.3px;margin:18px 0 0}.muted-heading{color:#79869d}.section-heading>p{max-width:370px;color:#9aa7bd;font-size:13px;line-height:1.9;margin:0 0 5px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.service-card{background:linear-gradient(145deg,#101725,#0b101b);border:1px solid var(--line);border-radius:13px;padding:26px 25px 23px;min-height:380px;position:relative;transition:transform .25s,border-color .25s}.service-card:hover,.project-card:hover{transform:translateY(-5px);border-color:rgba(101,228,242,.35)}.featured-service{border-color:rgba(168,139,255,.35);background:radial-gradient(ellipse at top right,#211a36 0%,#101522 45%,#0b101b 100%)}.service-top{display:flex;align-items:center;justify-content:space-between}.service-icon{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(101,228,242,.22);border-radius:10px;background:rgba(101,228,242,.07);font-size:23px;color:var(--cyan)}.purple-icon{color:#c0a7ff;border-color:#a88bff40;background:#a88bff12}.green-icon{color:#82e6c2;border-color:#82e6c240;background:#82e6c212}.service-number{font-size:11px;color:#64718a}.popular-label{font-size:8px;letter-spacing:1.5px;color:#c4a9ff;margin-top:17px}.service-card h3{font:700 20px Manrope;margin:25px 0 10px;letter-spacing:-.5px}.featured-service h3{margin-top:8px}.service-card>p,.project-card>p{font-size:12px;line-height:1.85;color:#9aa7bd;margin:0}.service-card ul{list-style:none;padding:0;margin:20px 0 26px}.service-card li{font-size:11px;color:#c0cada;margin:9px 0}.service-card li:before{content:'✓';color:var(--cyan);margin-right:9px}.card-link{font-size:11px;font-weight:700;color:#dfe6f4;border-top:1px solid var(--line);padding-top:15px;display:flex;justify-content:space-between}.card-link span{color:var(--cyan)}.process-section{background:linear-gradient(180deg,#0b101a,#0a0e17);border-block:1px solid var(--line)}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.process-step{padding:23px 25px 12px 0;position:relative;border-top:1px solid rgba(152,178,222,.22)}.process-step:not(:last-child){margin-right:24px}.step-index{position:absolute;top:-12px;left:0;background:#0b101a;padding-right:10px;color:var(--cyan);font-size:10px;letter-spacing:1px}.step-symbol{font-size:28px;color:#9f8cff;margin:17px 0 12px}.process-step h3{font:700 17px Manrope;margin:0 0 8px}.process-step p{font-size:12px;color:#96a3b8;line-height:1.85;margin:0}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.project-card{border:1px solid var(--line);border-radius:13px;background:#0c111c;padding:10px;transition:transform .25s,border-color .25s}.project-visual{height:225px;border-radius:8px;overflow:hidden;display:grid;place-items:center;position:relative}.hotel-visual{background:linear-gradient(135deg,#d5c2a3,#6d756b 65%,#232e2e)}.mock-browser{width:86%;height:80%;background:#eee7d9;border-radius:6px;box-shadow:0 15px 30px #1118;overflow:hidden;color:#28302d}.browser-dots{height:18px;background:#f8f3eb;display:flex;gap:4px;align-items:center;padding-left:9px}.browser-dots i{width:4px;height:4px;border-radius:50%;background:#c0b9ad}.hotel-mock{height:calc(100% - 18px);padding:24px 20px;background:linear-gradient(100deg,#e7e2d5 0%,#d4d4c6 60%,#9fa99b 100%);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.mock-kicker{font-size:6px;letter-spacing:1.7px;display:block;color:#56645b}.hotel-mock b{font:700 clamp(16px,2vw,25px)/1.2 Georgia,serif;margin:13px 0;color:#29352e}.mock-pill{font-size:6px;letter-spacing:1px;border:1px solid #596b5f;padding:7px 9px}.food-visual{background:linear-gradient(145deg,#422b24,#bd7951)}.food-window{height:90%;width:88%;background:#f0e5d3;color:#3c2b22;position:relative;overflow:hidden}.food-top{display:flex;justify-content:space-between;padding:12px 13px;border-bottom:1px solid #d6c8b5;font-size:7px;letter-spacing:1px}.food-top span:first-child{font-weight:800;font-size:11px}.food-center{position:relative;z-index:1;padding:28px 17px}.food-center>span:first-child{font-size:6px;letter-spacing:1.3px}.food-center b{display:block;font:700 25px/1.12 Georgia,serif;margin:10px 0 18px}.food-button{font-size:6px;letter-spacing:1px;padding:8px;border:1px solid #b67a4f}.food-orb{position:absolute;width:130px;height:130px;right:-26px;bottom:-24px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#e4c58e,#a44e2f 66%,#5c3026);box-shadow:inset 0 0 0 8px #f0e5d377}.nova-visual{background:linear-gradient(135deg,#152746,#5365a4)}.nova-window{display:flex;width:88%;height:83%;background:#f4f6fb;color:#27334a;box-shadow:0 15px 30px #080e2450}.nova-sidebar{width:34px;background:#182540;color:#9de9f0;padding:10px 9px;font-weight:800;font-size:11px}.nova-sidebar span{color:#9b8cff}.nova-sidebar i{display:block;height:5px;width:13px;background:#5a6b8e;border-radius:3px;margin-top:17px}.nova-content{padding:17px 14px;flex:1}.nova-content .mock-kicker{font-size:5px}.nova-content>b{display:block;font:700 17px/1.2 Manrope;margin-top:10px}.nova-widgets{display:flex;gap:6px;margin-top:13px}.nova-widgets i{height:25px;flex:1;border-radius:4px;background:#e1e8f7;border:1px solid #d2dbee}.nova-chart{height:46px;border-bottom:1px solid #cfd7e7;display:flex;align-items:flex-end;gap:6px;margin-top:10px}.nova-chart span{flex:1;background:linear-gradient(#9a8dff,#6edce6);border-radius:3px 3px 0 0}.nova-chart span:nth-child(1){height:35%}.nova-chart span:nth-child(2){height:65%}.nova-chart span:nth-child(3){height:48%}.nova-chart span:nth-child(4){height:85%}.nova-chart span:nth-child(5){height:60%}.nova-chart span:nth-child(6){height:95%}.nova-chart span:nth-child(7){height:75%}.project-meta{display:flex;align-items:center;justify-content:space-between;padding:18px 8px 6px}.project-type{font-size:8px;letter-spacing:1px;color:#8f9bb2}.project-meta h3{font:700 17px Manrope;margin:5px 0 0}.project-arrow{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--cyan)}.project-card>p{padding:5px 8px 13px}.portfolio-note{font-size:10px;color:#8290a8;margin-top:25px}.portfolio-note span{color:var(--cyan);margin-right:7px}.about-section{background:#0b101a;border-block:1px solid var(--line)}.about-layout{padding-top:94px;padding-bottom:94px;display:grid;grid-template-columns:.9fr 1.1fr;gap:85px;align-items:center}.about-visual{height:360px;position:relative;display:grid;place-items:center;background:radial-gradient(ellipse at center,#192840 0%,#0d1422 55%,#0b101a 75%);border:1px solid var(--line);border-radius:15px;overflow:hidden}.about-grid-lines{position:absolute;inset:0;background-image:linear-gradient(#9eb7dd0b 1px,transparent 1px),linear-gradient(90deg,#9eb7dd0b 1px,transparent 1px);background-size:27px 27px;mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}.about-monogram{font:800 115px Manrope;letter-spacing:-12px;z-index:1;text-shadow:0 0 45px #68dff033}.about-orbit{position:absolute;width:280px;height:130px;border:1px solid #8d9cff35;border-radius:50%;transform:rotate(-35deg)}.about-caption{position:absolute;bottom:20px;left:22px;font-size:8px;letter-spacing:1.7px;color:#92a3bc;display:flex;gap:9px;align-items:center}.about-copy h2{font-size:43px;margin-bottom:24px}.about-copy>p{font-size:13px;line-height:1.95;color:#9eabc0;margin:14px 0}.about-copy .text-link{display:inline-block;margin-top:16px}.contact-section{padding-top:105px;padding-bottom:105px}.contact-panel{position:relative;overflow:hidden;border:1px solid rgba(127,171,225,.2);border-radius:17px;padding:55px;display:grid;grid-template-columns:1fr .82fr;gap:55px;background:radial-gradient(ellipse at 0 0,#172943 0%,#101725 43%,#0d121e 100%)}.contact-orb{position:absolute;width:360px;height:360px;border:1px solid #72d8ee16;border-radius:50%;left:-180px;bottom:-260px;box-shadow:0 0 0 35px #72d8ee08,0 0 0 70px #72d8ee05;pointer-events:none}.contact-copy,.contact-form{position:relative;z-index:1}.contact-copy h2{font-size:43px;margin-bottom:19px}.contact-copy>p{font-size:13px;color:#a3b0c5;line-height:1.9;max-width:400px}.contact-points{display:grid;gap:9px;margin-top:27px;font-size:11px;color:#c7d2e4}.contact-points span: first-letter{color:var(--cyan)}.contact-form{display:flex;flex-direction:column;gap:8px}.contact-form label{font-size:10px;color:#b9c5d8;margin-top:5px}.contact-form input,.contact-form textarea,.contact-form select{width:100%;border:1px solid rgba(161,185,223,.2);border-radius:7px;background:#090f1b;color:#f1f5ff;padding:12px 13px;font-size:11px;outline:none}.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:#65e4f2aa}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#64718a}.contact-form select{color:#aebbd0}.contact-form textarea{resize:vertical}.form-submit{margin-top:8px;width:100%}.form-note{font-size:9px;color:#8493aa;line-height:1.6;margin:5px 0 0}.site-footer{border-top:1px solid var(--line);background:#070a11}.footer-main{padding-top:31px;padding-bottom:31px;display:flex;align-items:center;gap:35px}.footer-main>p{font-size:10px;line-height:1.7;color:#8390a7;margin-right:auto}.footer-links{display:flex;gap:22px;font-size:11px;color:#b7c2d4}.footer-bottom{border-top:1px solid var(--line);padding-top:17px;padding-bottom:20px;display:flex;justify-content:space-between;gap:20px;color:#6f7c93;font-size:9px}.reveal{opacity:0;transform:translateY(15px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@media(max-width:900px){.hero{grid-template-columns:1fr .85fr;min-height:570px;padding-top:70px}.hero h1{font-size:48px}.hero-art{transform:scale(.86);margin-left:-20px}.section-heading{gap:25px}.service-card{padding:22px 19px}.about-layout{gap:45px}.contact-panel{padding:38px;gap:35px}.contact-copy h2{font-size:37px}}
@media(max-width:700px){.section-wrap,.site-header{width:calc(100% - 36px)}.site-header{height:70px}.brand{font-size:16px}.menu-toggle{display:flex;flex-direction:column;gap:5px;padding:9px;border:1px solid var(--line);border-radius:7px}.menu-toggle span{display:block;width:18px;height:2px;background:#dce7f7}.nav-links{display:none;position:absolute;top:62px;left:0;right:0;padding:17px;background:#0d1320;border:1px solid var(--line);border-radius:10px;align-items:stretch;gap:0;box-shadow:0 20px 40px #0008}.nav-links.open{display:flex;flex-direction:column}.nav-links>a{padding:12px 10px}.nav-cta{margin-top:5px;text-align:center}.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:60px;min-height:0}.hero h1{font-size:clamp(39px,10vw,53px);letter-spacing:-2.6px;margin-top:20px}.hero-lead{font-size:14px}.hero-actions{gap:18px;flex-wrap:wrap}.hero-proof{margin-top:35px}.hero-art{height:345px;transform:scale(.85);transform-origin:center top;margin:32px -20px -20px}.orbit-a{width:350px;height:220px}.orbit-b{height:340px;width:280px}.glow-core{width:160px;height:160px}.core-logo{font-size:60px}.card-web{left:0;top:30px}.card-ai{right:-2px;top:155px}.card-growth{left:8px;bottom:25px}.hero-bottom{width:100%;margin-top:0;font-size:7px;letter-spacing:1px}.trust-inner{height:auto;min-height:72px;justify-content:center;flex-wrap:wrap;padding-block:16px;gap:10px 13px}.trust-inner span{font-size:8px}.trust-inner i{width:3px;height:3px}.section-block{padding-top:76px;padding-bottom:76px}.section-heading{display:block;margin-bottom:30px}.section-heading h2,.about-copy h2,.contact-copy h2{font-size:36px;letter-spacing:-1.8px}.section-heading>p{margin-top:20px;font-size:12px}.service-grid,.project-grid{grid-template-columns:1fr}.service-card{min-height:0;padding:24px}.service-card h3{margin-top:20px}.service-card ul{margin-bottom:20px}.service-card li{font-size:12px}.project-visual{height:235px}.project-card>p{font-size:11px}.process-grid{grid-template-columns:1fr 1fr;gap:30px 20px}.process-step:not(:last-child){margin-right:0}.process-step{padding-right:0}.about-layout{padding-top:70px;padding-bottom:70px;grid-template-columns:1fr;gap:35px}.about-visual{height:280px}.about-copy h2{font-size:39px}.contact-section{padding-top:70px;padding-bottom:70px}.contact-panel{grid-template-columns:1fr;padding:28px 22px;gap:25px}.contact-copy h2{font-size:38px}.footer-main{flex-wrap:wrap;gap:15px}.footer-main>p{flex-basis:100%;margin:0}.footer-links{width:100%;gap:18px}.footer-bottom{flex-direction:column;gap:7px;font-size:8px}}
@media(max-width:390px){.hero-actions{align-items:flex-start;flex-direction:column}.hero-art{transform:scale(.74);margin-left:-36px;margin-right:-36px;height:300px}.float-card{min-width:190px}.hero-bottom{font-size:6px}.section-heading h2{font-size:33px}.contact-panel{padding:24px 17px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}


/* WEBSTUDIO 2.0 — capas visuales y microinteracciones */
:root{--electric:#62d9ff;--blue:#5b8cff;--silver:#c9d7ec;--glass:rgba(15,24,41,.72);--ease:cubic-bezier(.2,.75,.25,1)}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{background:radial-gradient(ellipse at 50% -20%,rgba(39,83,151,.18),transparent 48%),#070b13}
body:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(133,169,221,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(133,169,221,.055) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(to bottom,#000 0%,transparent 82%)}
.ambient{animation:ambient-drift 18s ease-in-out infinite alternate;opacity:.17}.ambient-two{animation-delay:-7s}
.site-header{position:sticky;top:0;background:rgba(7,11,19,.74);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom-color:rgba(174,195,229,.12);transition:background .3s,border-color .3s}
.brand-mark{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(92,217,255,.12),rgba(91,140,255,.035));border-color:rgba(141,205,255,.45);box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 26px rgba(72,153,255,.09);transition:transform .35s var(--ease),box-shadow .35s}
.brand:hover .brand-mark{transform:rotate(-7deg) translateY(-2px);box-shadow:0 0 30px rgba(72,153,255,.24)}
.nav-links>a:not(.nav-cta){position:relative;transition:color .25s}.nav-links>a:not(.nav-cta):after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:linear-gradient(90deg,var(--electric),#9c8bff);transition:right .3s var(--ease)}.nav-links>a:not(.nav-cta):hover:after{right:0}
.nav-cta{background:linear-gradient(135deg,rgba(98,217,255,.08),rgba(91,140,255,.04));box-shadow:inset 0 1px rgba(255,255,255,.07);transition:transform .25s,box-shadow .25s,border-color .25s}.nav-cta:hover{transform:translateY(-2px);border-color:rgba(98,217,255,.8);box-shadow:0 8px 28px rgba(40,133,255,.14)}
.hero{min-height:660px;padding-top:88px}.hero:before{content:"";position:absolute;width:540px;height:540px;right:-100px;top:35px;pointer-events:none;background:radial-gradient(circle,rgba(41,107,203,.14),rgba(56,72,137,.055) 36%,transparent 70%);filter:blur(8px);animation:core-breathe 8s ease-in-out infinite}
.hero h1{font-size:clamp(44px,5.35vw,70px);letter-spacing:-3.8px;line-height:1.06;text-wrap:balance}.gradient-text{background-image:linear-gradient(105deg,#eaf7ff 0%,#6dddfb 25%,#8da8ff 60%,#c1a3ff 88%);background-size:180% auto;animation:gradient-flow 8s ease-in-out infinite alternate}.hero-lead{max-width:500px;font-size:15px;line-height:1.9;color:#a9b8ce}.eyebrow{letter-spacing:2.2px}.hero-art{isolation:isolate;perspective:1000px}.hero-art:before{content:"";position:absolute;inset:8% 4%;z-index:-1;border:1px solid rgba(155,194,239,.07);border-radius:50%;transform:rotate(-22deg);box-shadow:0 0 70px rgba(48,125,255,.08),inset 0 0 50px rgba(48,125,255,.035)}
.glow-core{background:radial-gradient(circle at 34% 25%,rgba(105,222,255,.17),transparent 36%),linear-gradient(145deg,rgba(24,43,69,.94),rgba(8,14,25,.98));border:1px solid rgba(183,214,250,.28);box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 0 9px rgba(119,173,237,.025),0 0 70px rgba(51,143,255,.17);animation:core-float 7s ease-in-out infinite}.core-logo{text-shadow:0 0 32px rgba(98,217,255,.34)}.orbit{border-color:rgba(145,190,245,.2);box-shadow:0 0 22px rgba(70,141,255,.04)}.orbit-a{animation:orbit-turn 32s linear infinite}.orbit-b{animation:orbit-turn 42s linear infinite reverse}
.float-card{background:linear-gradient(135deg,rgba(20,31,49,.91),rgba(10,17,29,.84));border:1px solid rgba(180,208,241,.2);box-shadow:0 18px 48px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.075);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:border-color .3s,box-shadow .3s;animation:card-hover 6s ease-in-out infinite}.card-ai{animation-delay:-2s}.card-growth{animation-delay:-4s}.float-card:hover{border-color:rgba(98,217,255,.58);box-shadow:0 20px 55px rgba(0,0,0,.32),0 0 28px rgba(63,151,255,.12),inset 0 1px rgba(255,255,255,.12)}
.button{position:relative;isolation:isolate;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}.button:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.22) 48%,transparent 70%);transform:translateX(-130%);transition:transform .65s var(--ease)}.button:hover:before{transform:translateX(130%)}.button-primary{box-shadow:0 7px 28px rgba(45,143,255,.18),inset 0 1px rgba(255,255,255,.17)}.button-primary:hover{transform:translateY(-3px);box-shadow:0 13px 34px rgba(45,143,255,.28),inset 0 1px rgba(255,255,255,.2)}.text-link{transition:color .25s,transform .25s}.text-link:hover{color:#a8eaff;transform:translateX(3px)}
.trust-strip{background:linear-gradient(90deg,rgba(13,22,36,.75),rgba(17,28,46,.5),rgba(13,22,36,.75));border-block:1px solid rgba(166,199,238,.11)}.trust-inner span{color:#aab9d0;letter-spacing:1.7px}
.section-block{padding-top:108px;padding-bottom:108px}.section-heading h2,.about-copy h2,.contact-copy h2{letter-spacing:-2.6px}.muted-heading{color:#7e8ca4}.service-card,.project-card{position:relative;isolation:isolate;background:linear-gradient(145deg,rgba(18,27,43,.86),rgba(10,16,27,.88));border:1px solid rgba(170,198,234,.14);box-shadow:inset 0 1px rgba(255,255,255,.035);transition:transform .4s var(--ease),border-color .35s,box-shadow .35s,background .35s}.service-card:before,.project-card:before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(68,155,255,.12),transparent 48%);transition:opacity .3s}.service-card:hover,.project-card:hover{transform:translateY(-7px);border-color:rgba(119,193,255,.38);box-shadow:0 22px 55px rgba(0,0,0,.2),0 0 30px rgba(51,126,234,.07),inset 0 1px rgba(255,255,255,.07)}.service-card:hover:before,.project-card:hover:before{opacity:1}.featured-service{background:linear-gradient(145deg,rgba(23,32,56,.96),rgba(11,17,30,.93));border-color:rgba(155,143,255,.3)}.service-icon{box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 25px rgba(80,172,255,.08)}.card-link{transition:gap .25s,color .25s}.card-link:hover{gap:12px;color:#a7eaff}
.process-section{position:relative;background:linear-gradient(180deg,rgba(13,19,31,.45),rgba(8,12,20,.25));border-block:1px solid rgba(165,196,235,.08)}.process-step{transition:transform .35s var(--ease)}.process-step:hover{transform:translateY(-5px)}.step-index{color:#78dffb}.step-symbol{border-color:rgba(147,187,235,.18);background:linear-gradient(145deg,rgba(37,62,96,.42),rgba(15,24,39,.45));box-shadow:inset 0 1px rgba(255,255,255,.06);transition:transform .35s,box-shadow .35s,border-color .35s}.process-step:hover .step-symbol{transform:rotate(-6deg) scale(1.04);border-color:rgba(98,217,255,.4);box-shadow:0 0 25px rgba(54,144,255,.11)}
.project-visual{border-bottom:1px solid rgba(180,207,239,.13)}.mock-browser,.food-window,.nova-window{box-shadow:0 22px 50px rgba(0,0,0,.22);transition:transform .5s var(--ease)}.project-card:hover .mock-browser,.project-card:hover .food-window,.project-card:hover .nova-window{transform:translateY(-3px) scale(1.015)}.project-arrow{transition:transform .25s,border-color .25s,background .25s}.project-card:hover .project-arrow{transform:rotate(45deg);border-color:rgba(98,217,255,.5);background:rgba(98,217,255,.06)}
.about-visual{background:radial-gradient(ellipse at 50% 45%,rgba(34,73,119,.45),rgba(10,17,29,.94) 66%);box-shadow:inset 0 1px rgba(255,255,255,.045)}.about-monogram{background:linear-gradient(150deg,#f0f6ff,#85dffb 45%,#778cff 80%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 35px rgba(98,217,255,.13));animation:monogram-breathe 5s ease-in-out infinite}.about-orbit{animation:orbit-turn 28s linear infinite}
.contact-panel{border-color:rgba(161,202,244,.23);background:radial-gradient(ellipse at 4% 0%,rgba(36,78,126,.45),transparent 55%),linear-gradient(135deg,rgba(18,29,47,.97),rgba(9,14,24,.98));box-shadow:0 28px 85px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.07)}.contact-form input,.contact-form textarea,.contact-form select{transition:border-color .25s,box-shadow .25s,background .25s}.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:rgba(98,217,255,.72);box-shadow:0 0 0 3px rgba(98,217,255,.08);background:#0b1422}
.site-footer{background:rgba(5,8,14,.86)}.footer-bottom{border-top-color:rgba(174,195,229,.1)}
.reveal{opacity:0;transform:translateY(24px) scale(.99);filter:blur(3px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}.reveal.visible{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.scroll-progress{position:fixed;z-index:100;top:0;left:0;height:2px;width:100%;pointer-events:none;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#62d9ff,#5b8cff,#b49aff);box-shadow:0 0 12px rgba(98,217,255,.65)}
@keyframes ambient-drift{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(35px,-22px,0) scale(1.12)}}@keyframes core-breathe{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}@keyframes gradient-flow{from{background-position:0% center}to{background-position:100% center}}@keyframes core-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes orbit-turn{from{rotate:0deg}to{rotate:360deg}}@keyframes card-hover{0%,100%{translate:0 0}50%{translate:0 -5px}}@keyframes monogram-breathe{0%,100%{filter:drop-shadow(0 0 24px rgba(98,217,255,.09))}50%{filter:drop-shadow(0 0 40px rgba(98,217,255,.23))}}
@media(max-width:900px){.section-block{padding-top:88px;padding-bottom:88px}.hero{min-height:600px}.hero h1{letter-spacing:-3px}}
@media(max-width:700px){.site-header{position:sticky;height:68px}.nav-links{background:rgba(9,15,26,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.hero{padding-top:57px}.hero:before{width:380px;height:380px;right:-130px;top:160px}.hero h1{letter-spacing:-2.5px}.section-block{padding-top:75px;padding-bottom:75px}.service-card:hover,.project-card:hover{transform:translateY(-3px)}.reveal{filter:none;transform:translateY(14px)}.float-card{animation-duration:8s}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none;filter:none}.scroll-progress{display:none}}


/* SERVICIOS — extensión del sistema visual WebStudio */
.active-nav{color:var(--cyan)!important}
.services-hero{min-height:590px;padding:76px 0 24px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:30px;position:relative}
.services-hero h1{font:800 clamp(42px,5vw,62px)/1.12 Manrope,sans-serif;letter-spacing:-3px;margin:23px 0 20px}
.services-hero-copy{position:relative;z-index:2}.services-hero-copy .hero-lead{max-width:540px}
.service-trust{display:flex;flex-wrap:wrap;gap:17px;margin-top:35px;color:#a9b6ca;font-size:10px}.service-trust i{font-style:normal;color:var(--cyan);margin-right:5px}
.services-visual{height:420px;position:relative;display:grid;place-items:center;isolation:isolate}.visual-grid{position:absolute;inset:20px 0;background-image:linear-gradient(rgba(112,147,204,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(112,147,204,.08) 1px,transparent 1px);background-size:27px 27px;mask-image:radial-gradient(ellipse at center,#000 15%,transparent 75%);z-index:-2}.visual-orb{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none}.orb-large{width:330px;height:330px;border:1px solid #65e4f225;box-shadow:inset 0 0 70px #2863e91c,0 0 80px #2863e915}.orb-small{width:245px;height:245px;border:1px solid #a88bff32;transform:rotate(34deg) scaleX(.75)}
.glass-panel{background:linear-gradient(145deg,rgba(19,29,47,.94),rgba(8,13,24,.9));border:1px solid rgba(177,201,239,.23);box-shadow:0 25px 90px #0007,inset 0 1px #ffffff0a;backdrop-filter:blur(18px);border-radius:16px}.system-panel{width:min(365px,88%);padding:18px;position:relative;z-index:1;transform:perspective(1000px) rotateY(-5deg) rotateX(2deg);animation:panel-hover 7s ease-in-out infinite}.panel-top,.panel-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:8px;letter-spacing:1.2px;color:#8798b5}.panel-top i{display:inline-block;width:6px;height:6px;background:var(--cyan);border-radius:50%;box-shadow:0 0 12px var(--cyan);margin-right:7px}.panel-top span:last-child{color:#7fe7cf}.panel-main{display:flex;align-items:center;gap:15px;padding:25px 0;border-bottom:1px solid var(--line)}.panel-emblem{display:grid;place-items:center;width:58px;height:58px;border:1px solid #65e4f244;border-radius:15px;background:linear-gradient(140deg,#65e4f216,#a88bff12);font:800 29px Manrope;letter-spacing:-4px;box-shadow:0 0 35px #65e4f20b}.panel-emblem span{color:var(--cyan)}.panel-main b,.panel-main small{display:block}.panel-main b{font:700 15px Manrope}.panel-main small{font-size:9px;color:#94a4bc;margin-top:5px}.panel-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 0}.panel-metrics>div{padding:12px;border:1px solid var(--line);border-radius:9px;background:#ffffff03}.panel-metrics small,.panel-metrics b,.panel-metrics span{display:block}.panel-metrics small{font-size:7px;letter-spacing:1px;color:#7c8da8}.panel-metrics b{font:600 11px Manrope;margin:7px 0 4px}.panel-metrics span{font-size:8px;color:#8c9bb2}.panel-footer{padding-top:13px;border-top:1px solid var(--line)}.panel-bars{display:flex;gap:3px;align-items:end;height:13px}.panel-bars i{width:3px;background:var(--cyan);border-radius:3px;opacity:.8}.panel-bars i:nth-child(1){height:4px}.panel-bars i:nth-child(2){height:8px}.panel-bars i:nth-child(3){height:6px}.panel-bars i:nth-child(4){height:12px}.panel-bars i:nth-child(5){height:9px}.mini-float{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:11px 13px;background:rgba(12,18,30,.94);border:1px solid rgba(174,195,229,.2);border-radius:10px;box-shadow:0 14px 40px #0005;backdrop-filter:blur(14px);animation:float 5s ease-in-out infinite}.mini-float>span{display:grid;place-items:center;width:30px;height:30px;background:#163340;border-radius:8px;color:var(--cyan);font-size:18px}.mini-float b,.mini-float small{display:block}.mini-float b{font-size:10px}.mini-float small{font-size:8px;color:#92a1b7;margin-top:3px}.mini-float-a{top:47px;right:-5px}.mini-float-b{bottom:48px;left:-5px;animation-delay:1.3s}.mini-float-b>span{background:#2b2141;color:#c5a4ff}.services-hero-foot{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:17px;margin-top:8px;font-size:9px;letter-spacing:1.5px;color:#718099}
.service-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.service-detail-card{position:relative;display:flex;flex-direction:column;padding:25px 23px 22px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(150deg,#111a2a,#0b101a 72%);min-height:590px;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}.service-detail-card:before{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),#65e4f20b,transparent 45%);pointer-events:none}.service-detail-card:hover{transform:translateY(-5px);border-color:#65e4f25c;box-shadow:0 18px 55px #0003}.service-detail-featured{background:radial-gradient(ellipse at top right,#211a36 0%,#101522 46%,#0b101b 100%);border-color:#a88bff47}.detail-top{display:flex;align-items:center;justify-content:space-between}.detail-kicker{font-size:8px;letter-spacing:1.7px;color:#73dce9;margin-top:22px}.purple-kicker{color:#c4a9ff}.green-kicker{color:#82e6c2}.service-detail-card h3{font:700 22px/1.25 Manrope;letter-spacing:-.8px;margin:9px 0 12px}.service-detail-card>p{font-size:12px;line-height:1.85;color:#9aa7bd;margin:0}.service-detail-card ul{list-style:none;padding:0;margin:19px 0 23px}.service-detail-card li{font-size:10px;line-height:1.65;color:#c0cada;margin:11px 0;display:flex;gap:9px}.service-detail-card li:before{content:'✓';color:var(--cyan);flex:none}.detail-outcome{margin-top:auto;border-top:1px solid var(--line);padding:16px 0 18px}.detail-outcome small,.detail-outcome b{display:block}.detail-outcome small{font-size:8px;letter-spacing:1.2px;color:#7788a3;margin-bottom:6px}.detail-outcome b{font:600 11px/1.6 Manrope;color:#e4eaf6}.button-outline{width:100%;justify-content:space-between;color:#e5edf9;background:#ffffff04;border:1px solid #8ca7cc3d;transition:border-color .2s,background .2s}.button-outline span{color:var(--cyan)}.button-outline:hover{border-color:#65e4f277;background:#65e4f20b}.scope-note{display:flex;gap:10px;align-items:flex-start;margin:24px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:9px;color:#8f9db3;font-size:10px;line-height:1.8;background:#ffffff02}.scope-note span{color:var(--cyan);font-size:14px}.deliverables-section{border-block:1px solid var(--line);background:linear-gradient(180deg,#0b101a,#0a0e17)}.deliverables-section .section-block{padding-top:90px;padding-bottom:100px}.deliverables-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.deliverable{display:flex;gap:17px;align-items:flex-start;padding:23px 20px;border:1px solid var(--line);border-radius:11px;background:linear-gradient(120deg,#ffffff04,transparent)}.deliverable>span{font:600 11px Manrope;color:var(--cyan);padding-top:2px}.deliverable h3{font:700 14px Manrope;margin:0 0 7px}.deliverable p{font-size:11px;line-height:1.8;color:#97a5ba;margin:0}.fit-panel{display:grid;grid-template-columns:1fr .9fr;gap:55px;padding:clamp(25px,5vw,55px);border:1px solid #65e4f22b;border-radius:17px;background:radial-gradient(ellipse at 0 0,#17324a66,transparent 55%),linear-gradient(140deg,#101827,#0a0f19);box-shadow:inset 0 1px #ffffff09}.fit-panel h2{font:800 clamp(31px,3.5vw,44px)/1.16 Manrope;letter-spacing:-2px;margin:18px 0}.fit-panel>div:first-child>p{font-size:12px;line-height:1.9;color:#9ca9be;max-width:440px;margin-bottom:25px}.fit-list>div{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}.fit-list>div:first-child{border-top:1px solid var(--line)}.fit-list>div>span:first-child{font-size:10px;color:var(--cyan)}.fit-list p{flex:1;margin:0}.fit-list b,.fit-list small{display:block}.fit-list b{font-size:11px}.fit-list small{font-size:9px;color:#8f9db2;margin-top:4px}.fit-arrow{color:var(--cyan)}.site-footer{border-top:1px solid var(--line);background:#080b13}.footer-main{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:30px;padding-bottom:25px}.footer-main>p{font-size:10px;color:#8795aa;margin:0}.footer-links{display:flex;gap:19px;font-size:10px;color:#a9b6ca}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:17px;padding-bottom:20px;font-size:8px;letter-spacing:.8px;color:#6f7d94}
@keyframes panel-hover{0%,100%{transform:perspective(1000px) rotateY(-5deg) rotateX(2deg) translateY(0)}50%{transform:perspective(1000px) rotateY(-3deg) rotateX(1deg) translateY(-6px)}}
@media(max-width:900px){.services-hero{grid-template-columns:1fr;gap:8px;padding-top:60px}.services-hero-copy{max-width:690px}.services-visual{height:370px;max-width:580px;width:100%;margin:0 auto}.service-detail-grid{grid-template-columns:1fr 1fr}.service-detail-card{min-height:570px}.service-detail-card:last-child{grid-column:1/-1;min-height:0}.fit-panel{gap:30px}}
@media(max-width:640px){.services-hero{padding-top:43px}.services-hero h1{font-size:clamp(38px,10vw,51px);letter-spacing:-2.4px}.services-hero .hero-actions{align-items:flex-start;flex-direction:column;gap:17px}.services-hero .hero-actions .button{width:100%}.service-trust{gap:10px 15px}.services-visual{height:340px}.system-panel{width:88%;padding:14px}.mini-float-a{right:-3px;top:20px}.mini-float-b{left:-3px;bottom:19px}.services-hero-foot{font-size:7px;letter-spacing:.8px}.service-detail-grid{grid-template-columns:1fr}.service-detail-card,.service-detail-card:last-child{grid-column:auto;min-height:0}.service-detail-card{padding:23px 21px}.deliverables-grid{grid-template-columns:1fr}.deliverables-section .section-block{padding-top:72px;padding-bottom:75px}.fit-panel{grid-template-columns:1fr;padding:25px 21px;gap:30px}.footer-main{align-items:flex-start;flex-direction:column}.footer-links{flex-wrap:wrap;gap:13px}.footer-bottom{flex-direction:column;gap:7px}.trust-inner{overflow:hidden;justify-content:flex-start;white-space:nowrap}.trust-inner span{font-size:8px}}
@media(prefers-reduced-motion:reduce){.system-panel,.mini-float{animation:none!important}}

/* Navegación compartida y marca oficial */
.nav-links>a[aria-current="page"]{color:var(--cyan)}
.brand-logo{transition:filter .25s,transform .25s}.brand:hover .brand-logo{filter:drop-shadow(0 0 15px rgba(101,228,242,.28));transform:translateY(-1px)}
@media(max-width:640px){.brand-logo{width:38px;height:38px}.brand{gap:8px;font-size:16px}}

/* WebStudio multi-page + portfolio demos */
.standalone-hero{padding:94px 0 44px;min-height:340px}.standalone-hero h1{font:800 clamp(40px,5.5vw,66px)/1.12 Manrope,sans-serif;letter-spacing:-3px;margin:24px 0 20px}.standalone-hero .hero-lead{max-width:760px;margin:0 0 28px}.standalone-process{margin-top:16px}.demo-project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}.demo-project-card{position:relative;overflow:hidden}.demo-card-link{display:block}.demo-visual{height:290px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:22px;background:radial-gradient(ellipse at 15% 15%,rgba(91,139,255,.25),transparent 50%),linear-gradient(145deg,#111a2b,#080c15 75%)}.demo-visual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(150,181,226,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(150,181,226,.08) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,black,transparent)}.demo-visual-b{background:radial-gradient(ellipse at 85% 20%,rgba(82,222,208,.22),transparent 48%),linear-gradient(145deg,#111f2a,#090e15 75%)}.demo-visual-c{background:radial-gradient(ellipse at 30% 70%,rgba(173,125,255,.25),transparent 48%),linear-gradient(145deg,#1a152b,#090b15 75%)}.demo-visual-d{background:radial-gradient(ellipse at 80% 75%,rgba(245,160,101,.2),transparent 48%),linear-gradient(145deg,#241a1a,#0b0d14 75%)}.demo-browser{position:relative;z-index:1;width:min(100%,430px);border:1px solid rgba(196,213,242,.24);border-radius:12px;overflow:hidden;background:rgba(9,15,26,.88);box-shadow:0 20px 60px rgba(0,0,0,.32);transform:perspective(900px) rotateY(-3deg)}.demo-browser-top{height:35px;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid rgba(196,213,242,.14);color:#8f9db4}.demo-browser-top>span{display:flex;gap:4px}.demo-browser-top i{width:6px;height:6px;border-radius:50%;background:#6c7b94}.demo-browser-top small{font-size:8px;letter-spacing:1.2px;margin-left:auto}.demo-browser-top>b{color:#68e5f2;font-size:14px}.demo-screen{position:relative;min-height:174px;padding:23px 23px 18px;overflow:hidden}.demo-screen-kicker{font-size:8px;letter-spacing:2px;color:#8ca9d3;margin-bottom:15px}.demo-screen-line{height:9px;border-radius:8px;background:linear-gradient(90deg,#d7e6ff,rgba(119,151,201,.2));margin:9px 0}.line-wide{width:66%}.line-mid{width:43%;opacity:.7}.demo-screen-button{width:83px;height:21px;border-radius:5px;background:linear-gradient(100deg,#65e4f2,#91d9f4);margin-top:18px}.demo-screen-shapes{position:absolute;right:20px;top:43px;width:120px;height:105px}.demo-screen-shapes i{position:absolute;display:block;border:1px solid rgba(101,228,242,.45);border-radius:12px;background:linear-gradient(145deg,rgba(101,228,242,.18),rgba(133,132,255,.05));box-shadow:0 0 30px rgba(101,228,242,.06)}.demo-screen-shapes i:nth-child(1){width:75px;height:75px;right:6px;top:0;transform:rotate(14deg)}.demo-screen-shapes i:nth-child(2){width:52px;height:52px;right:47px;top:34px;transform:rotate(-13deg)}.demo-screen-shapes i:nth-child(3){width:30px;height:30px;right:0;top:64px;border-radius:50%}.demo-visual-b .demo-screen-button{background:linear-gradient(100deg,#6ce8d4,#a6f0d8)}.demo-visual-c .demo-screen-button{background:linear-gradient(100deg,#ae8bff,#d0b7ff)}.demo-visual-d .demo-screen-button{background:linear-gradient(100deg,#f4b37e,#ffe0a8)}.demo-visual-label{position:absolute;bottom:10px;right:13px;z-index:2;font-size:9px;color:#a7b5ca;letter-spacing:.4px}.demo-project-card .project-meta{margin-top:18px}.demo-project-card>p{color:#aab5c9;font-size:13px;line-height:1.7}.demo-open{margin-top:6px;display:inline-flex}.portfolio-actions{margin-top:28px;display:flex;justify-content:center}.demo-disclaimer{display:flex;flex-direction:column;gap:5px;max-width:750px;padding:16px 18px;border:1px solid rgba(101,228,242,.18);border-radius:12px;background:rgba(14,22,37,.7);color:#aebbd0;font-size:13px}.demo-disclaimer strong{color:#dfe9f8;font-size:12px}.about-values-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.standalone-contact{padding-top:20px;padding-bottom:80px}.subpage .site-header{position:sticky}.subpage main{min-height:55vh}.site-header .brand-logo{width:43px;height:43px}.nav-links a[aria-current="page"]:not(.nav-cta){color:var(--cyan)}.demo-project-card .button-outline{border:1px solid rgba(101,228,242,.35);background:rgba(101,228,242,.04);color:#e6f5ff;border-radius:8px;padding:10px 13px;font-size:12px;font-weight:700;gap:12px;transition:background .2s,border-color .2s}.demo-project-card .button-outline:hover{background:rgba(101,228,242,.12);border-color:rgba(101,228,242,.65)}@media(max-width:760px){.standalone-hero{padding:64px 0 26px;min-height:auto}.standalone-hero h1{letter-spacing:-2px}.demo-project-grid,.about-values-grid{grid-template-columns:1fr}.demo-visual{height:250px;padding:15px}.demo-screen-shapes{right:10px;opacity:.8}.demo-screen{padding:20px 16px}.demo-screen-kicker{font-size:7px}.demo-project-card .project-meta{gap:12px}.demo-disclaimer{font-size:12px}.standalone-contact{padding-bottom:45px}}@media(prefers-reduced-motion:reduce){.demo-project-card,.demo-project-card *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Portfolio demo brand identities */
.demo-brand-stage{position:absolute;inset:14px 14px auto;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;pointer-events:none}.demo-brand-logo{display:block;width:min(230px,72%);height:auto;filter:drop-shadow(0 10px 22px rgba(0,0,0,.24))}.demo-brand-stage .demo-visual-label{position:static;align-self:flex-start;margin-top:5px;max-width:36%;text-align:right;font-size:8px;line-height:1.5;letter-spacing:.6px;color:#d4dfef}.demo-browser{margin-top:70px;width:min(100%,430px)}.demo-project-card .project-meta h3{font-size:20px}.demo-project-card>p{min-height:44px}
@media(max-width:760px){.demo-brand-stage{inset:12px 10px auto}.demo-brand-logo{width:min(190px,68%)}.demo-brand-stage .demo-visual-label{font-size:7px;max-width:31%}.demo-browser{margin-top:66px}.demo-project-card>p{min-height:0}}

/* Portfolio filters and automation concept cards */
.portfolio-filters{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0 6px}
.portfolio-filter{border:1px solid rgba(174,195,229,.2);background:rgba(255,255,255,.025);color:#b8c5d9;border-radius:999px;padding:10px 17px;font-size:12px;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.portfolio-filter:hover,.portfolio-filter.is-active{border-color:rgba(101,228,242,.6);background:rgba(101,228,242,.1);color:#eafcff}
[data-project-category][hidden]{display:none!important}
.automation-visual{height:290px;background:radial-gradient(ellipse at 50% 5%,rgba(101,228,242,.16),transparent 60%),linear-gradient(145deg,#101a2b,#080c15 78%)}
.automation-visual-02{background:radial-gradient(ellipse at 80% 15%,rgba(156,140,255,.22),transparent 55%),linear-gradient(145deg,#17142b,#080c15 78%)}
.automation-visual-03{background:radial-gradient(ellipse at 20% 20%,rgba(108,232,212,.18),transparent 55%),linear-gradient(145deg,#102321,#080c15 78%)}
.automation-visual-04{background:radial-gradient(ellipse at 75% 75%,rgba(244,179,126,.19),transparent 55%),linear-gradient(145deg,#241b19,#080c15 78%)}
.automation-stage{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;gap:15px;padding:12px}
.automation-tag{font-size:8px;letter-spacing:1.8px;color:#8ca9c9;font-weight:800}
.automation-stage>strong{font:800 clamp(19px,2.4vw,27px)/1.2 Manrope,sans-serif;letter-spacing:-.7px}
.workflow-flow{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.workflow-node{border:1px solid rgba(101,228,242,.3);background:rgba(10,18,31,.88);color:#d8e8f5;border-radius:7px;padding:9px 10px;font-size:9px;font-weight:700}
.workflow-node:not(:last-child)::after{content:'›';color:#65e4f2;margin-left:7px}
.automation-caption{position:absolute;bottom:11px;left:14px;right:14px;color:#8f9db4;font-size:8px;line-height:1.5}
.automation-outcome{display:flex;flex-direction:column;gap:5px;padding:13px;border:1px solid rgba(174,195,229,.13);border-radius:9px;background:rgba(255,255,255,.02);font-size:11px;line-height:1.7;color:#aab8cc}
.automation-outcome strong{font-size:10px;letter-spacing:.5px;color:#dfe9f8}
.automation-status{font-size:10px!important;color:#c5adff!important;border-left:2px solid #a88bff;padding-left:10px}
.automation-card .demo-open{margin-top:4px}
@media(max-width:760px){.automation-visual{height:250px}.workflow-flow{gap:5px}.workflow-node{padding:7px 8px;font-size:8px}.portfolio-filters{gap:7px}.portfolio-filter{padding:9px 13px}}

/* WebStudio refinement: compact typography, consistent rhythm and contact details */
.about-hero{padding-bottom:28px;min-height:0}.about-hero h1{max-width:1000px;margin-bottom:16px}.about-hero .hero-lead{max-width:790px;line-height:1.72}.about-hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:23px}.about-intro{display:grid;grid-template-columns:.88fr 1.12fr;gap:48px;align-items:start}.about-intro-copy h2{font:800 clamp(30px,3.5vw,43px)/1.17 Manrope,sans-serif;letter-spacing:-1.8px;margin:16px 0}.about-intro-copy p{font-size:13px;line-height:1.8;color:#a3afc3;margin:0 0 13px}.about-focus-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.about-focus-card{border:1px solid var(--line);border-radius:12px;padding:21px;background:linear-gradient(145deg,#101725,#0b101b)}.about-focus-card h3{font:700 15px/1.35 Manrope,sans-serif;margin:15px 0 8px}.about-focus-card p{font-size:11px;line-height:1.75;color:#9aa7bd;margin:0}.about-principles{border-block:1px solid var(--line);background:linear-gradient(180deg,#0b101a,#0a0e17)}.about-principles .section-heading{margin-bottom:30px}.about-principles .service-card{min-height:0;padding:23px}.about-principles .service-card h3{margin:19px 0 8px}.about-principles .service-card p{line-height:1.8}.founder-panel{display:grid;grid-template-columns:150px 1fr;gap:30px;align-items:center;padding:clamp(24px,4vw,42px);border:1px solid rgba(168,139,255,.23);border-radius:16px;background:radial-gradient(ellipse at 0 0,#29204470,transparent 55%),linear-gradient(140deg,#101827,#0a0f19)}.founder-mark{width:120px;height:120px;display:grid;place-items:center;border:1px solid #65e4f244;border-radius:28px;background:linear-gradient(145deg,#142c3b,#17142a);font:800 74px/1 Manrope;letter-spacing:-6px;color:#eaf8ff;box-shadow:0 0 55px #65e4f20b}.founder-mark span{color:var(--cyan)}.founder-panel h2{font:800 clamp(25px,3vw,36px)/1.2 Manrope,sans-serif;letter-spacing:-1.3px;margin:12px 0}.founder-panel p{font-size:13px;line-height:1.85;color:#a3afc3;max-width:750px;margin:0 0 17px}.about-vision-panel{grid-template-columns:1fr .72fr;gap:45px}.about-vision-panel h2{max-width:600px}.about-vision-list>div{display:flex;align-items:flex-start;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}.about-vision-list>div:first-child{border-top:1px solid var(--line)}.about-vision-list>div>span{font-size:11px;color:var(--cyan);padding-top:2px}.about-vision-list p{margin:0}.about-vision-list b,.about-vision-list small{display:block}.about-vision-list b{font:700 13px Manrope,sans-serif}.about-vision-list small{font-size:11px;color:#96a3b8;margin-top:4px}.contact-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-top:8px}.contact-method-card{display:flex;align-items:flex-start;gap:14px;border:1px solid var(--line);border-radius:12px;padding:20px;background:linear-gradient(145deg,#101725,#0b101b)}.contact-method-card h3{font:700 14px Manrope,sans-serif;margin:2px 0 8px}.contact-method-card a{color:#7fe7f1;font-size:12px;overflow-wrap:anywhere}.contact-method-card p{font-size:11px;line-height:1.7;color:#98a6bb;margin:8px 0 0}.footer-contact{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:14px;padding-bottom:14px;font-size:10px;color:#9baac0}.footer-contact a{color:#8de7f0}.footer-contact a:hover{text-decoration:underline}.standalone-hero .hero-lead{margin-bottom:18px}.standalone-hero h1{margin-top:18px;margin-bottom:16px}.section-block{padding-top:84px;padding-bottom:84px}.section-heading{margin-bottom:32px}.hero-lead{line-height:1.72}.service-card h3{margin-top:19px}.site-footer p{line-height:1.6}
@media(max-width:760px){.about-intro{grid-template-columns:1fr;gap:26px}.about-focus-grid{grid-template-columns:1fr 1fr}.founder-panel{grid-template-columns:1fr;gap:20px}.founder-mark{width:84px;height:84px;font-size:54px;border-radius:20px}.about-vision-panel{grid-template-columns:1fr;gap:25px}.contact-methods{grid-template-columns:1fr}.about-hero-actions{align-items:stretch;flex-direction:column;gap:15px}.about-hero-actions .button{width:100%}.about-intro.section-block,.about-principles.section-block{padding-top:58px;padding-bottom:58px}}
@media(max-width:480px){.section-wrap{width:calc(100% - 34px)}.standalone-hero h1{font-size:clamp(34px,9vw,45px);letter-spacing:-1.8px}.about-focus-grid{grid-template-columns:1fr}.footer-contact{justify-content:flex-start;gap:7px;font-size:10px}.founder-panel{padding:23px 19px}.section-block{padding-top:60px;padding-bottom:60px}}

/* Ajustes de consistencia, desbordamiento y diseño adaptable */
html, body { width:100%; max-width:100%; }
html { overflow-x:clip; }
body { overflow-x:clip; }
*, *::before, *::after { min-width:0; }
img, svg, video, canvas, iframe { max-width:100%; }
main, header, footer, section, article, nav, .section-wrap { max-width:100%; }
.section-wrap { width:min(var(--max), calc(100% - 48px)); }
.hero, .section-heading, .about-intro, .about-focus-grid, .fit-panel, .contact-panel,
.service-grid, .project-grid, .process-grid, .service-detail-grid, .contact-methods,
.demo-project-grid, .about-values-grid, .about-commitment, .about-commitment-list { min-width:0; }
.hero h1, .section-heading h2, .about-copy h2, .contact-copy h2,
.about-hero h1, .about-intro-copy h2, .about-commitment h2 { overflow-wrap:anywhere; }
.hero-art, .services-visual, .project-visual, .demo-visual, .automation-visual { max-width:100%; }
.section-block { scroll-margin-top:90px; }
.site-footer { overflow:hidden; }
.footer-main, .footer-links, .footer-contact, .footer-bottom { min-width:0; }
.footer-links a, .footer-main p { overflow-wrap:anywhere; }
.about-commitment-section { padding-top:30px; }
.about-commitment { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); gap:clamp(24px,4vw,54px); align-items:start; padding:clamp(24px,4vw,42px); border:1px solid rgba(101,228,242,.2); border-radius:16px; background:radial-gradient(ellipse at 0 0,rgba(41,83,109,.22),transparent 52%),linear-gradient(140deg,#101827,#0a0f19); }
.about-commitment-main h2 { font:800 clamp(29px,3.3vw,42px)/1.16 Manrope,sans-serif; letter-spacing:-1.8px; margin:17px 0 18px; }
.about-commitment-main p { font-size:13px; line-height:1.85; color:#a3afc3; margin:0 0 13px; }
.about-commitment-list > div { display:flex; gap:14px; align-items:flex-start; padding:15px 0; border-bottom:1px solid var(--line); }
.about-commitment-list > div:first-child { border-top:1px solid var(--line); }
.about-commitment-list > div > span { flex:0 0 28px; color:var(--cyan); font-size:11px; padding-top:2px; }
.about-commitment-list p { margin:0; }
.about-commitment-list b, .about-commitment-list small { display:block; }
.about-commitment-list b { font:700 13px Manrope,sans-serif; color:#e5edf9; }
.about-commitment-list small { font-size:11px; line-height:1.65; color:#96a3b8; margin-top:4px; }
.about-legal-note { max-width:900px; margin:13px auto 0; color:#7f8da5; font-size:10px; line-height:1.7; text-align:center; }
/* Tablets: columnas equilibradas, nada debe empujar el lienzo horizontalmente. */
@media (max-width:1024px) {
  .section-wrap { width:calc(100% - 40px); }
  .hero { grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:10px; min-height:0; padding-top:70px; }
  .hero h1 { font-size:clamp(38px,5.1vw,52px); letter-spacing:-2.4px; }
  .hero-art { transform:scale(.78); transform-origin:center center; margin:0 -30px; }
  .card-web { left:0; }
  .card-ai { right:0; }
  .about-intro { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:26px; }
  .service-grid, .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 22px; }
  .service-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .service-detail-card:last-child { grid-column:auto; }
  .contact-methods { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about-commitment { grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:24px; }
}
@media (max-width:760px) {
  .section-wrap { width:calc(100% - 36px); }
  .hero { display:flex; flex-direction:column; align-items:stretch; gap:0; padding-top:44px; min-height:0; }
  .hero-copy { width:100%; }
  .hero h1 { font-size:clamp(35px,9vw,48px); line-height:1.12; letter-spacing:-2px; }
  .hero-art { width:100%; height:300px; transform:none; margin:22px 0 0; overflow:hidden; }
  .orbit-a { width:min(350px,95vw); height:210px; }
  .orbit-b { width:min(280px,78vw); height:300px; }
  .glow-core { width:145px; height:145px; }
  .core-logo { font-size:56px; }
  .card-web { left:0; top:16px; }
  .card-ai { right:0; top:125px; }
  .card-growth { left:0; bottom:13px; }
  .float-card { min-width:0; max-width:205px; padding:10px; gap:8px; }
  .hero-bottom { flex-wrap:wrap; gap:8px 14px; }
  .section-block { padding-top:58px; padding-bottom:58px; }
  .section-heading { display:block; margin-bottom:26px; }
  .section-heading > p { max-width:none; }
  .service-grid, .project-grid, .process-grid, .service-detail-grid,
  .contact-methods, .demo-project-grid, .about-values-grid { grid-template-columns:minmax(0,1fr); }
  .process-step { margin-right:0!important; }
  .service-detail-card, .service-detail-card:last-child { min-height:0; grid-column:auto; }
  .about-intro { grid-template-columns:minmax(0,1fr); gap:24px; }
  .about-focus-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about-vision-panel, .fit-panel { grid-template-columns:minmax(0,1fr); gap:24px; }
  .about-commitment { grid-template-columns:minmax(0,1fr); padding:23px 20px; gap:20px; }
  .about-commitment-main h2 { font-size:clamp(29px,8vw,38px); letter-spacing:-1.4px; }
  .contact-panel { grid-template-columns:minmax(0,1fr); padding:24px 20px; }
  .section-heading h2, .about-copy h2, .contact-copy h2 { font-size:clamp(30px,8vw,38px); }
  .footer-main { align-items:flex-start; }
  .footer-links { display:flex; flex-wrap:wrap; gap:12px 18px; }
  .footer-contact { justify-content:flex-start; overflow-wrap:anywhere; }
}
@media (max-width:420px) {
  .section-wrap { width:calc(100% - 30px); }
  .site-header { width:calc(100% - 30px); }
  .brand { gap:7px; font-size:15px; }
  .brand-logo, .site-header .brand-logo { width:36px; height:36px; }
  .hero h1 { font-size:clamp(33px,9vw,39px); letter-spacing:-1.7px; }
  .hero-actions { flex-direction:column; align-items:stretch; gap:14px; }
  .hero-actions .button { width:100%; }
  .hero-art { height:270px; }
  .float-card { max-width:178px; }
  .float-card b { font-size:9px; }
  .float-card small { font-size:8px; }
  .about-focus-grid { grid-template-columns:minmax(0,1fr); }
  .about-hero-actions { align-items:stretch; flex-direction:column; gap:13px; }
  .about-hero-actions .button { width:100%; }
  .contact-method-card { padding:16px; }
  .footer-contact { font-size:10px; gap:6px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}


/* WebStudio refinement: motion feels immediate, process cards stay symmetrical. */
:root { --motion-fast: 160ms; --motion-base: 220ms; }
html { scroll-behavior: smooth; }
.button, .button-primary, .button-outline, .text-link, .nav-links a,
.service-card, .project-card, .contact-method-card, .about-focus-card,
.process-step, .footer-links a, .menu-toggle {
  transition-duration: var(--motion-fast) !important;
  transition-timing-function: cubic-bezier(.2,.75,.25,1) !important;
}
.button-primary:hover, .button-outline:hover { transform: translateY(-2px); }
.service-card:hover, .project-card:hover, .about-focus-card:hover, .process-step:hover {
  transform: translateY(-3px);
}
/* Motion override: visible response, no slow fade or blur. */
.reveal, .reveal.visible {
  filter: none !important;
  transition: opacity 100ms linear, transform 100ms ease-out !important;
  transition-delay: 0ms !important;
}
.reveal { transform: translateY(3px); }
.reveal.visible { transform: translateY(0); }
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  position: relative;
  isolation: isolate;
}
/* Animated connector travels through the gaps between the four stages. */
.standalone-process::before,
.standalone-process::after {
  content: "";
  position: absolute;
  top: 47px;
  left: 6%;
  right: 6%;
  height: 2px;
  border-radius: 999px;
  pointer-events: none;
}
.standalone-process::before {
  background: rgba(152,178,222,.2);
}
.standalone-process::after {
  left: 6%;
  right: auto;
  width: 23%;
  background: linear-gradient(90deg, transparent, var(--cyan), #b8a5ff, transparent);
  box-shadow: 0 0 12px rgba(101,228,242,.55);
  animation: process-line-travel 3.2s ease-in-out infinite;
}
@keyframes process-line-travel {
  0% { transform: translateX(0); opacity: .2; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateX(290%); opacity: .2; }
}
.process-step {
  min-width: 0;
  min-height: 100%;
  margin: 0 !important;
  padding: 23px 20px 19px;
  border: 1px solid rgba(152,178,222,.2);
  border-radius: 15px;
  background: linear-gradient(155deg, rgba(17,25,40,.96), rgba(10,15,25,.96));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.process-step::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  opacity: .72;
  z-index: -1;
}
.process-step:hover { border-color: rgba(101,228,242,.48); }
.process-step .step-index {
  position: absolute;
  inset: 17px 17px auto auto;
  top: 17px;
  left: auto;
  padding: 0;
  background: transparent;
  color: #91a3bf;
  font-size: 11px;
  letter-spacing: 1.2px;
  line-height: 1.4;
}
.process-step .step-symbol {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  margin: 0 0 23px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(168,139,255,.32);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(101,228,242,.11), rgba(168,139,255,.11));
  color: #b8a5ff;
  font-size: 25px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.process-step h3 {
  margin: 0 0 10px;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.3;
  letter-spacing: -.35px;
}
.process-step > p {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: #a1aec3;
  flex: 1 0 auto;
}
.step-outcome {
  width: 100%;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(152,178,222,.16);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.step-outcome span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.25px;
  color: #7d8da8;
}
.step-outcome b {
  font-size: 11px;
  line-height: 1.45;
  font-weight: 700;
  color: #dbe7f6;
}
.standalone-process-section { padding-top: 54px; }
.process-intro { margin-bottom: 30px; }
.process-intro h2 { font-size: clamp(34px, 4vw, 48px); line-height: 1.13; letter-spacing: -2px; margin: 17px 0 0; }
.process-intro > p { max-width: 430px; }
.about-values-grid { align-items: stretch; gap: 18px; }
.about-values-grid .service-card {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 25px;
  border-radius: 14px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.about-values-grid .service-top { min-height: 42px; gap: 12px; }
.about-values-grid .service-icon {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 10px;
  font-size: 15px;
}
.about-values-grid .service-number { white-space: nowrap; letter-spacing: 1px; }
.about-values-grid .service-card h3 { margin: 22px 0 10px; line-height: 1.35; }
.about-values-grid .service-card > p { font-size: 13px; line-height: 1.75; }
@media (max-width: 1024px) {
  .process-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
  .standalone-process::before, .standalone-process::after { display: none; }
  .process-step { padding: 22px 20px 18px; }
  .process-step h3 { font-size: 19px; }
  .process-step > p { font-size: 13px; }
}
@media (max-width: 600px) {
  .section-wrap { width: calc(100% - 32px); }
  .site-header { width: calc(100% - 32px); }
  .standalone-process-section { padding-top: 28px; }
  .process-intro { display: block; margin-bottom: 22px; }
  .process-intro h2 { font-size: clamp(31px, 8.8vw, 39px); letter-spacing: -1.4px; }
  .process-intro > p { margin-top: 14px; font-size: 14px; line-height: 1.75; }
  .process-grid { grid-template-columns: minmax(0,1fr); gap: 12px; padding-left: 0; }
  .standalone-process { padding-left: 0; }
  .standalone-process::before, .standalone-process::after {
    display: block;
    left: 42px;
    right: auto;
    top: 43px;
    bottom: 43px;
    width: 2px;
    height: auto;
  }
  .standalone-process::before { background: rgba(152,178,222,.2); }
  .standalone-process::after {
    top: 43px;
    bottom: auto;
    height: 70px;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--cyan), #b8a5ff, transparent);
    animation: process-line-travel-mobile 3.2s ease-in-out infinite;
  }
  @keyframes process-line-travel-mobile {
    0% { transform: translateY(0); opacity: .2; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateY(650%); opacity: .2; }
  }
  .process-step { padding: 20px; border-radius: 14px; }
  .process-step .step-symbol { width: 46px; height: 46px; flex-basis: 46px; margin-bottom: 18px; }
  .process-step h3 { font-size: 19px; }
  .process-step > p { font-size: 14px; line-height: 1.7; }
  .step-outcome { margin-top: 16px; }
  .about-values-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .about-values-grid .service-card { padding: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.visible, .process-step, .service-card, .project-card, .button,
  .button-primary, .button-outline, .about-focus-card { transition: none !important; transform: none !important; }
}


/* FIX DEFINITIVO: proceso conectado al scroll y ajustes reales para móvil */
html { scroll-behavior: auto !important; }
.reveal, .reveal.visible {
  opacity: 1;
  filter: none !important;
  transition: opacity 140ms ease-out, transform 140ms ease-out !important;
  transition-delay: 0ms !important;
}
.reveal { transform: translateY(5px) !important; }
.reveal.visible { transform: translateY(0) !important; }

.standalone-process {
  --process-progress: 0;
  position: relative;
  isolation: isolate;
}
.standalone-process::before,
.standalone-process::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  border-radius: 999px;
}
.standalone-process::before {
  left: 6%; right: 6%; top: 47px; height: 2px;
  background: rgba(152,178,222,.23);
}
.standalone-process::after {
  left: 6%; right: auto; top: 47px; height: 2px; width: 88%;
  transform: scaleX(var(--process-progress)); transform-origin: left center;
  background: linear-gradient(90deg, #65e4f2, #8ca9ff 55%, #b68aff);
  box-shadow: 0 0 13px rgba(101,228,242,.6);
  transition: transform 80ms linear;
}
.standalone-process .process-step { z-index: 1; background: linear-gradient(155deg, rgba(17,25,40,.98), rgba(10,15,25,.98)); }
.standalone-process .step-symbol { position: relative; z-index: 3; background-color: #111827; }
.standalone-process .process-step.is-active { border-color: rgba(101,228,242,.68); box-shadow: 0 0 0 1px rgba(101,228,242,.07), 0 10px 28px rgba(0,0,0,.14); }
.standalone-process .process-step.is-complete .step-index { color: var(--cyan); }
.standalone-process .process-step.is-active .step-symbol { border-color: rgba(101,228,242,.72); color: var(--cyan); box-shadow: 0 0 20px rgba(101,228,242,.12); }

/* Tablet: mantener dos columnas, evitando que la línea horizontal cruce el contenido. */
@media (max-width: 1024px) {
  .standalone-process::before, .standalone-process::after { display: none; }
}
@media (max-width: 760px) {
  *, *::before, *::after { min-width: 0; }
  body { width: 100%; overflow-x: clip; }
  img, svg, video, iframe { max-width: 100%; }
  .section-wrap { width: calc(100% - 32px) !important; }
  .site-header { width: calc(100% - 32px) !important; }
  .standalone-hero { padding-top: 46px !important; padding-bottom: 20px !important; }
  .standalone-hero h1 { font-size: clamp(34px, 9vw, 45px) !important; line-height: 1.12; letter-spacing: -1.5px !important; overflow-wrap: normal; }
  .standalone-hero .hero-lead { font-size: 14px; line-height: 1.75; }
  .standalone-process-section { padding-top: 26px !important; }
  .process-intro { display: block !important; margin-bottom: 24px !important; }
  .process-intro h2 { font-size: clamp(30px, 8.5vw, 38px) !important; line-height: 1.14; letter-spacing: -1.25px !important; }
  .process-intro > p { margin-top: 15px; font-size: 14px; line-height: 1.7; }
  .standalone-process { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 13px !important; padding: 0 !important; overflow: visible; }
  .standalone-process::before, .standalone-process::after { display: block; left: 42px; right: auto; top: 43px; bottom: 43px; width: 2px; height: auto; }
  .standalone-process::before { background: rgba(152,178,222,.23); }
  .standalone-process::after {
    top: 43px; bottom: 43px; left: 42px; width: 2px; height: auto;
    transform: scaleY(var(--process-progress)); transform-origin: top center;
    background: linear-gradient(180deg, #65e4f2, #8ca9ff 55%, #b68aff);
    box-shadow: 0 0 13px rgba(101,228,242,.55);
  }
  .standalone-process .process-step {
    min-height: 0 !important; height: auto; padding: 21px 18px 20px 78px !important;
    border-radius: 14px; overflow: visible;
  }
  .standalone-process .step-symbol {
    position: absolute; top: 20px; left: 18px; width: 48px; height: 48px;
    margin: 0; flex: none; border-radius: 12px; background: #111827;
  }
  .standalone-process .step-index { top: 17px; right: 15px; font-size: 10px; }
  .standalone-process .process-step h3 { font-size: 19px; margin: 1px 36px 9px 0; line-height: 1.3; }
  .standalone-process .process-step > p { font-size: 13px; line-height: 1.7; }
  .standalone-process .step-outcome { margin-top: 16px; padding-top: 12px; }
  .standalone-process .step-outcome span { font-size: 9px; }
  .standalone-process .step-outcome b { font-size: 12px; }
  .fit-panel { padding: 23px 19px !important; }
  .footer-main, .footer-bottom { gap: 15px; }
  .footer-contact { flex-wrap: wrap; overflow-wrap: anywhere; }
}
@media (max-width: 380px) {
  .section-wrap, .site-header { width: calc(100% - 26px) !important; }
  .standalone-process .process-step { padding-left: 72px !important; padding-right: 14px !important; }
  .standalone-process .step-symbol { left: 14px; width: 44px; height: 44px; }
  .standalone-process::before, .standalone-process::after { left: 36px; }
  .standalone-process .process-step h3 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .standalone-process::after { transition: none !important; }
  .reveal, .reveal.visible { transition: none !important; transform: none !important; }
}

/* Timeline secuencial: la línea avanza con el scroll y cada etapa se ilumina al alcanzarla. */
.standalone-process { --process-progress: 0; }
.standalone-process::before {
  z-index: 2 !important;
  left: 6% !important; right: 6% !important; top: 48px !important;
  height: 2px !important; bottom: auto !important; width: auto !important;
  background: rgba(152,178,222,.25) !important;
}
.standalone-process::after {
  z-index: 3 !important;
  left: 6% !important; right: auto !important; top: 48px !important;
  bottom: auto !important; height: 2px !important; width: 88% !important;
  transform: scaleX(var(--process-progress)) !important;
  transform-origin: left center !important;
  background: linear-gradient(90deg, #65e4f2, #8ca9ff 55%, #b68aff) !important;
  box-shadow: 0 0 12px rgba(101,228,242,.65) !important;
  animation: none !important;
  transition: transform 90ms linear !important;
}
.standalone-process .process-step {
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}
.standalone-process .step-symbol {
  transition: border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}
.standalone-process .process-step.is-active {
  border-color: rgba(101,228,242,.95) !important;
  background: linear-gradient(150deg, rgba(24,48,65,.98), rgba(13,20,34,.99)) !important;
  box-shadow: 0 0 0 1px rgba(101,228,242,.16), 0 0 30px rgba(101,228,242,.18), 0 12px 28px rgba(0,0,0,.22) !important;
}
.standalone-process .process-step.is-active .step-symbol,
.standalone-process .process-step.is-complete .step-symbol {
  border-color: rgba(101,228,242,.9) !important;
  color: #65e4f2 !important;
  background: linear-gradient(145deg, rgba(101,228,242,.2), rgba(168,139,255,.17)) !important;
  box-shadow: 0 0 0 3px rgba(101,228,242,.06), 0 0 22px rgba(101,228,242,.25) !important;
}
.standalone-process .process-step.is-complete {
  border-color: rgba(101,228,242,.42) !important;
  box-shadow: inset 0 0 24px rgba(101,228,242,.045) !important;
}
.standalone-process .process-step.is-complete .step-index { color: var(--cyan) !important; }
@media (min-width: 1025px) {
  .standalone-process .step-symbol { align-self: center; }
}
@media (max-width: 1024px) {
  .standalone-process::before, .standalone-process::after { display: none !important; }
}
@media (max-width: 760px) {
  .standalone-process::before, .standalone-process::after {
    display: block !important; left: 41px !important; right: auto !important;
    top: 43px !important; bottom: 43px !important; width: 2px !important;
    height: auto !important;
  }
  .standalone-process::before { background: rgba(152,178,222,.25) !important; }
  .standalone-process::after {
    top: 43px !important; bottom: auto !important; left: 41px !important;
    width: 2px !important; height: calc((100% - 86px) * var(--process-progress)) !important;
    max-height: calc(100% - 86px) !important;
    transform: none !important; transform-origin: top center !important;
    background: linear-gradient(180deg, #65e4f2, #8ca9ff 55%, #b68aff) !important;
  }
  .standalone-process .process-step { position: relative; z-index: 1; }
  .standalone-process .step-symbol { z-index: 4 !important; }
}
@media (max-width: 380px) {
  .standalone-process::before, .standalone-process::after { left: 36px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .standalone-process::after, .standalone-process .process-step, .standalone-process .step-symbol { transition: none !important; }
}


/* Timeline autoplay: la línea se detiene brevemente en cada icono antes de continuar. */
.standalone-process {
  --process-progress: 0;
  --process-line-height: 44px;
}
.standalone-process::before,
.standalone-process::after {
  content: "" !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
@media (min-width: 761px) {
  .standalone-process::before,
  .standalone-process::after {
    top: 48px !important;
    left: 12.5% !important;
    right: 12.5% !important;
    bottom: auto !important;
    width: auto !important;
    height: 2px !important;
  }
  .standalone-process::before { background: rgba(152,178,222,.24) !important; }
  .standalone-process::after {
    left: 12.5% !important;
    right: 12.5% !important;
    width: auto !important;
    transform: scaleX(var(--process-progress)) !important;
    transform-origin: left center !important;
    background: linear-gradient(90deg, #65e4f2, #8ca9ff 55%, #b68aff) !important;
    box-shadow: 0 0 14px rgba(101,228,242,.75) !important;
    transition: transform 900ms cubic-bezier(.22,.8,.25,1) !important;
  }
}
@media (max-width: 760px) {
  .standalone-process::before,
  .standalone-process::after {
    top: 44px !important;
    left: 42px !important;
    right: auto !important;
    bottom: auto !important;
    width: 2px !important;
    height: auto !important;
  }
  .standalone-process::before {
    height: calc(100% - 88px) !important;
    background: rgba(152,178,222,.25) !important;
  }
  .standalone-process::after {
    height: var(--process-line-height) !important;
    max-height: calc(100% - 44px) !important;
    transform: none !important;
    background: linear-gradient(180deg, #65e4f2, #8ca9ff 55%, #b68aff) !important;
    box-shadow: 0 0 14px rgba(101,228,242,.75) !important;
    transition: height 900ms cubic-bezier(.22,.8,.25,1) !important;
  }
  .standalone-process .process-step { position: relative; z-index: 1; }
  .standalone-process .step-symbol { z-index: 4 !important; }
}
.standalone-process .process-step {
  transition: border-color 260ms ease, box-shadow 260ms ease, background 260ms ease !important;
}
.standalone-process .step-symbol {
  transition: border-color 260ms ease, color 260ms ease, box-shadow 260ms ease, background 260ms ease, transform 260ms ease !important;
}
.standalone-process .process-step.is-active {
  border-color: rgba(101,228,242,.98) !important;
  background: linear-gradient(150deg, rgba(24,48,65,.99), rgba(13,20,34,.99)) !important;
  box-shadow: 0 0 0 1px rgba(101,228,242,.2), 0 0 32px rgba(101,228,242,.2), 0 12px 28px rgba(0,0,0,.22) !important;
}
.standalone-process .process-step.is-active .step-symbol {
  border-color: #65e4f2 !important;
  color: #d8fbff !important;
  background: linear-gradient(145deg, rgba(101,228,242,.32), rgba(168,139,255,.25)) !important;
  box-shadow: 0 0 0 4px rgba(101,228,242,.1), 0 0 28px rgba(101,228,242,.55) !important;
  transform: scale(1.06);
}
.standalone-process .process-step.is-complete { border-color: rgba(101,228,242,.45) !important; }
.standalone-process .process-step.is-complete .step-symbol {
  border-color: rgba(101,228,242,.78) !important;
  color: #65e4f2 !important;
  background: linear-gradient(145deg, rgba(101,228,242,.17), rgba(168,139,255,.13)) !important;
  box-shadow: 0 0 14px rgba(101,228,242,.17) !important;
}
.standalone-process.timeline-resetting::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .standalone-process::after,
  .standalone-process .process-step,
  .standalone-process .step-symbol { transition: none !important; }
}

@media (max-width: 380px) { .standalone-process::before, .standalone-process::after { left: 36px !important; } }


/* WebStudio 2026 — refinamiento final de responsividad y ruta de energía de metodología.
   Estas reglas consolidan el comportamiento de los overrides anteriores. */
html, body { max-width:100%; overflow-x:clip; }
body { min-width:320px; }
img, video, iframe, canvas { max-width:100%; }
.section-wrap { width:min(var(--max), calc(100% - 48px)); }
.site-header { width:min(var(--max), calc(100% - 48px)); }

/* Desktop: ruta SVG curva, centrada exactamente en los cuatro iconos. */
.standalone-process {
  position:relative !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:clamp(12px,1.5vw,20px) !important;
  align-items:stretch;
  overflow:visible !important;
  isolation:isolate;
  --process-progress:0;
}
.standalone-process::before,
.standalone-process::after { display:none !important; content:none !important; }
.process-timeline-svg {
  position:absolute; z-index:2; pointer-events:none;
  left:0; top:0; width:100%; height:96px; overflow:visible;
}
.process-timeline-svg path { fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.process-timeline-svg .timeline-track { stroke:rgba(112,143,193,.28); stroke-width:2; }
.process-timeline-svg .timeline-energy-glow {
  stroke:url(#timelineEnergy); stroke-width:8; opacity:.48; filter:url(#timelineGlow);
  stroke-dasharray:1000; stroke-dashoffset:1000;
  transition:stroke-dashoffset 900ms cubic-bezier(.22,.8,.25,1);
}
.process-timeline-svg .timeline-progress-path {
  stroke:url(#timelineEnergy); stroke-width:2.4;
  stroke-dasharray:1000; stroke-dashoffset:1000;
  filter:drop-shadow(0 0 3px rgba(101,228,242,.95));
  transition:stroke-dashoffset 900ms cubic-bezier(.22,.8,.25,1);
}
.standalone-process .process-step { position:relative; z-index:1; min-width:0; }
.standalone-process .step-symbol { position:relative; z-index:4; }
.standalone-process .process-step.is-active {
  border-color:rgba(101,228,242,.98) !important;
  background:linear-gradient(150deg,rgba(24,48,65,.99),rgba(13,20,34,.99)) !important;
  box-shadow:0 0 0 1px rgba(101,228,242,.2),0 0 32px rgba(101,228,242,.2),0 12px 28px rgba(0,0,0,.22) !important;
}
.standalone-process .process-step.is-active .step-symbol {
  border-color:#65e4f2 !important; color:#d8fbff !important;
  background:linear-gradient(145deg,rgba(101,228,242,.32),rgba(168,139,255,.25)) !important;
  box-shadow:0 0 0 4px rgba(101,228,242,.1),0 0 28px rgba(101,228,242,.55) !important;
  transform:scale(1.06);
}
.standalone-process .process-step.is-complete { border-color:rgba(101,228,242,.48) !important; }
.standalone-process .process-step.is-complete .step-symbol {
  border-color:rgba(101,228,242,.82) !important; color:#65e4f2 !important;
  box-shadow:0 0 14px rgba(101,228,242,.2) !important;
}

/* Tablets and phones: one-column flow; the glowing connector follows the icon rail. */
@media (max-width:900px) {
  .section-wrap { width:calc(100% - 40px) !important; }
  .site-header { width:calc(100% - 40px) !important; }
  .standalone-process { grid-template-columns:minmax(0,1fr) !important; gap:14px !important; }
  .process-timeline-svg { display:none !important; }
  .standalone-process::before,
  .standalone-process::after {
    content:"" !important; display:block !important; position:absolute !important;
    z-index:2 !important; left:42px !important; right:auto !important; top:44px !important;
    bottom:auto !important; width:2px !important; height:auto !important; border-radius:999px;
    pointer-events:none !important;
  }
  .standalone-process::before {
    height:calc(100% - 88px) !important;
    background:linear-gradient(180deg,rgba(101,228,242,.28),rgba(140,169,255,.2),rgba(182,138,255,.25)) !important;
    box-shadow:0 0 8px rgba(101,228,242,.08);
  }
  .standalone-process::after {
    top:44px !important; bottom:auto !important; height:var(--process-line-height,0px) !important;
    max-height:calc(100% - 44px) !important;
    background:linear-gradient(180deg,#65e4f2 0%,#8ca9ff 55%,#b68aff 100%) !important;
    box-shadow:0 0 7px rgba(101,228,242,.95),0 0 16px rgba(101,228,242,.4) !important;
    transition:height 900ms cubic-bezier(.22,.8,.25,1) !important;
  }
  .standalone-process .process-step {
    z-index:1; min-height:0 !important; height:auto; padding:21px 18px 20px 78px !important;
    overflow:visible; border-radius:15px;
  }
  .standalone-process .step-symbol {
    position:absolute !important; top:20px !important; left:18px !important;
    width:48px !important; height:48px !important; flex:0 0 48px !important;
    margin:0 !important; border-radius:12px !important; z-index:4 !important;
    background:#111827;
  }
  .standalone-process .process-step h3 { font-size:clamp(18px,3vw,20px) !important; line-height:1.3; margin:1px 36px 9px 0 !important; }
  .standalone-process .process-step > p { font-size:14px !important; line-height:1.7; }
  .standalone-process .step-outcome { margin-top:16px; padding-top:12px; }
  .standalone-hero h1 { font-size:clamp(34px,6vw,48px) !important; line-height:1.12; letter-spacing:-1.5px !important; overflow-wrap:break-word; }
  .standalone-hero .hero-lead { font-size:clamp(14px,2vw,16px); }
}
@media (max-width:600px) {
  .section-wrap, .site-header { width:calc(100% - 32px) !important; }
  .section-block { padding-top:54px; padding-bottom:54px; }
  .standalone-hero { padding-top:40px !important; padding-bottom:18px !important; }
  .standalone-hero h1 { font-size:clamp(32px,9vw,43px) !important; letter-spacing:-1.2px !important; }
  .standalone-hero .hero-lead { font-size:14px; line-height:1.75; }
  .standalone-process-section { padding-top:28px !important; }
  .process-intro { display:block !important; margin-bottom:24px !important; }
  .process-intro h2 { font-size:clamp(30px,8.5vw,38px) !important; letter-spacing:-1.2px !important; }
  .process-intro > p { margin-top:14px; font-size:14px; line-height:1.7; }
  .standalone-process { gap:12px !important; }
  .standalone-process::before, .standalone-process::after { left:41px !important; }
  .standalone-process .process-step { padding:20px 15px 18px 75px !important; }
  .standalone-process .step-symbol { left:16px !important; top:19px !important; width:46px !important; height:46px !important; }
  .standalone-process .step-index { top:15px !important; right:13px !important; }
  .standalone-process .process-step h3 { font-size:18px !important; margin-right:31px !important; }
  .standalone-process .process-step > p { font-size:13px !important; }
  .standalone-process .step-outcome b { font-size:12px !important; overflow-wrap:anywhere; }
  .fit-panel { padding:23px 18px !important; }
  .footer-main, .footer-bottom { gap:15px; }
  .footer-contact { flex-wrap:wrap; overflow-wrap:anywhere; }
  .button { max-width:100%; white-space:normal; }
}
@media (max-width:380px) {
  .section-wrap, .site-header { width:calc(100% - 26px) !important; }
  .standalone-process::before, .standalone-process::after { left:37px !important; }
  .standalone-process .process-step { padding-left:68px !important; padding-right:12px !important; }
  .standalone-process .step-symbol { left:12px !important; width:44px !important; height:44px !important; }
  .standalone-process .process-step h3 { font-size:17px !important; }
}
@media (prefers-reduced-motion:reduce) {
  .process-timeline-svg .timeline-energy-glow, .process-timeline-svg .timeline-progress-path,
  .standalone-process::after, .standalone-process .process-step, .standalone-process .step-symbol {
    transition:none !important;
  }
}
/* Stacking order: the route sits above card surfaces but never over the step symbols. */
.standalone-process .process-step { z-index:auto !important; isolation:auto !important; }
.standalone-process .step-symbol { position:relative; z-index:4 !important; }
@media (max-width:900px) {
  .standalone-process .process-step { z-index:auto !important; isolation:auto !important; }
  .standalone-process .step-symbol { z-index:4 !important; }
}

/* Interacción reactiva de metodología: no se dibuja una línea permanente.
   La señal entre anclas es conceptual e invisible; solo se ilumina cada destino. */
.standalone-process .process-timeline-svg,
.standalone-process::before,
.standalone-process::after {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}
.standalone-process .timeline-track,
.standalone-process .timeline-energy-glow,
.standalone-process .timeline-progress-path { opacity: 0 !important; stroke: transparent !important; }
.standalone-process .process-step {
  border-color: rgba(112,143,193,.18) !important;
  background: linear-gradient(155deg, rgba(17,25,40,.96), rgba(10,15,25,.97)) !important;
  box-shadow: none !important;
  transition: border-color 160ms ease, box-shadow 180ms ease, background 180ms ease !important;
}
.standalone-process .step-symbol {
  color: #8293ad !important;
  border-color: rgba(112,143,193,.24) !important;
  background: rgba(11,18,31,.86) !important;
  box-shadow: none !important;
  transform: none;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}
.standalone-process .process-step.is-complete {
  border-color: rgba(101,228,242,.35) !important;
  box-shadow: inset 0 0 20px rgba(101,228,242,.025) !important;
}
.standalone-process .process-step.is-complete .step-symbol {
  color: #65e4f2 !important;
  border-color: rgba(101,228,242,.62) !important;
  background: linear-gradient(145deg, rgba(101,228,242,.16), rgba(91,111,207,.13)) !important;
  box-shadow: 0 0 13px rgba(101,228,242,.17) !important;
}
.standalone-process .process-step.is-active {
  border-color: rgba(101,228,242,.82) !important;
  background: linear-gradient(150deg, rgba(19,38,54,.98), rgba(10,16,29,.99)) !important;
  box-shadow: 0 0 0 1px rgba(101,228,242,.10), 0 0 25px rgba(101,228,242,.10) !important;
}
.standalone-process .process-step.is-active .step-symbol {
  color: #e3fcff !important;
  border-color: #65e4f2 !important;
  background: linear-gradient(145deg, rgba(101,228,242,.36), rgba(141,137,255,.25)) !important;
  box-shadow: 0 0 0 4px rgba(101,228,242,.08), 0 0 30px rgba(101,228,242,.52), 0 0 48px rgba(101,228,242,.16) !important;
  transform: scale(1.07);
}
@media (prefers-reduced-motion: reduce) {
  .standalone-process .process-step, .standalone-process .step-symbol { transition: none !important; }
}

/* Microinteracciones globales: misma fluidez que la metodología en todo el sitio. */
:root { --interaction-ease: cubic-bezier(.2,.75,.25,1); }
:where(a, button, [role="button"], .button, .menu-toggle, summary) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
:where(.button, .button-primary, .button-outline, .nav-cta, .menu-toggle, .demo-screen-button) {
  transition: transform 180ms var(--interaction-ease),
    box-shadow 200ms var(--interaction-ease),
    border-color 180ms ease, background-color 180ms ease,
    color 180ms ease, filter 180ms ease !important;
}
:where(.button, .button-primary, .button-outline, .nav-cta, .menu-toggle, .demo-screen-button):hover {
  filter: brightness(1.07);
}
:where(.button, .button-primary, .button-outline, .nav-cta, .menu-toggle, .demo-screen-button):active {
  transform: translateY(0) scale(.975) !important;
  filter: brightness(1.12);
  transition-duration: 80ms !important;
}
:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
  outline: 2px solid rgba(101,228,242,.92);
  outline-offset: 4px;
  border-radius: 8px;
}
:where(.nav-links a, .footer-links a, .footer-contact a, .text-link, .card-link, .project-arrow, .demo-card-link) {
  transition: color 180ms ease, opacity 180ms ease, transform 200ms var(--interaction-ease),
    text-shadow 180ms ease !important;
}
:where(.nav-links a, .footer-links a, .footer-contact a, .text-link, .card-link, .project-arrow, .demo-card-link):active {
  opacity: .78;
}
:where(.service-card, .project-card, .contact-method-card, .about-focus-card,
  .service-detail-card, .automation-card, .featured-service, .demo-project-card,
  .card-ai, .card-web, .card-growth, .fit-panel) {
  transition: transform 220ms var(--interaction-ease),
    border-color 200ms ease, background 220ms ease,
    box-shadow 220ms var(--interaction-ease), opacity 180ms ease !important;
  will-change: auto;
}
@media (hover:hover) and (pointer:fine) {
  :where(.service-card, .project-card, .contact-method-card, .about-focus-card,
    .service-detail-card, .automation-card, .featured-service, .demo-project-card,
    .card-ai, .card-web, .card-growth):hover {
    transform: translateY(-3px);
    border-color: rgba(101,228,242,.38);
    box-shadow: 0 12px 34px rgba(0,0,0,.18), 0 0 22px rgba(101,228,242,.055);
  }
  :where(.service-card, .project-card, .contact-method-card, .about-focus-card,
    .service-detail-card, .automation-card, .featured-service, .demo-project-card,
    .card-ai, .card-web, .card-growth):hover :where(.service-icon, .project-arrow, .card-link) {
    transition: transform 200ms var(--interaction-ease), color 180ms ease, filter 180ms ease;
  }
  :where(.service-card, .project-card, .contact-method-card, .about-focus-card,
    .service-detail-card, .automation-card, .featured-service, .demo-project-card):active {
    transform: translateY(-1px) scale(.99);
  }
}
:where(input, select, textarea, .contact-form input, .contact-form select, .contact-form textarea) {
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease !important;
}
:where(input, select, textarea):focus {
  border-color: rgba(101,228,242,.72) !important;
  box-shadow: 0 0 0 3px rgba(101,228,242,.09) !important;
}
:where(.menu-toggle) svg, :where(.button, .nav-cta) svg, :where(.text-link, .card-link, .project-arrow) svg {
  transition: transform 200ms var(--interaction-ease), opacity 180ms ease;
}
@media (hover:hover) and (pointer:fine) {
  :where(.button, .nav-cta, .text-link, .card-link, .project-arrow):hover svg { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
  :where(a, button, [role="button"], .button, .menu-toggle, summary,
    .service-card, .project-card, .contact-method-card, .about-focus-card,
    .service-detail-card, .automation-card, .featured-service, .demo-project-card,
    .card-ai, .card-web, .card-growth, input, select, textarea, svg) {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    transform: none !important;
  }
}

/* Portafolio separado por categorías: páginas web y automatizaciones */
.portfolio-filters{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 0}
.portfolio-filter{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:11px 17px;border-radius:12px;font-size:13px;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
.portfolio-filter:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(101,228,242,.08)}
.portfolio-filter:active{transform:translateY(0) scale(.985)}
.portfolio-filter:focus-visible{outline:2px solid #65e4f2;outline-offset:3px}
.portfolio-count{display:inline-grid;place-items:center;min-width:25px;height:24px;padding:0 6px;border-radius:7px;background:rgba(255,255,255,.06);color:#9eafc8;font-size:10px;letter-spacing:.4px}
.portfolio-filter.is-active .portfolio-count{background:rgba(101,228,242,.16);color:#aaf5fc}
.portfolio-content-section{padding-top:38px}
.portfolio-category-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid rgba(174,195,229,.13)}
.portfolio-category-heading .eyebrow{font-size:10px;letter-spacing:1.8px}
.portfolio-category-heading h2{font:800 clamp(27px,3.5vw,38px)/1.15 Manrope,sans-serif;letter-spacing:-1.4px;margin:10px 0 8px}
.portfolio-category-heading p{max-width:690px;margin:0;color:#aab5c9;font-size:13px;line-height:1.7}
.portfolio-category-index{flex:none;color:#71829c;font-size:11px;font-weight:800;letter-spacing:1.3px;padding-bottom:5px}
.portfolio-card-enter{animation:portfolioEnter .32s cubic-bezier(.2,.75,.25,1) both}
@keyframes portfolioEnter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.portfolio-filters{display:grid;grid-template-columns:1fr 1fr;gap:8px}.portfolio-filter{justify-content:center;gap:7px;min-height:44px;padding:10px 9px;font-size:11px}.portfolio-count{min-width:22px;height:21px}.portfolio-content-section{padding-top:26px}.portfolio-category-heading{align-items:flex-start;margin-bottom:21px;gap:10px}.portfolio-category-heading h2{font-size:27px}.portfolio-category-heading p{font-size:12px}.portfolio-category-index{font-size:9px;white-space:nowrap;padding-top:4px}}
@media(max-width:380px){.portfolio-filters{grid-template-columns:1fr}.portfolio-filter{justify-content:space-between;padding-inline:15px}.portfolio-category-index{display:none}}
@media(prefers-reduced-motion:reduce){.portfolio-card-enter{animation:none!important}.portfolio-filter{transition:none!important}}

/* Portafolio: la tarjeta completa se comporta como un control accesible */
.is-clickable-card{cursor:pointer;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;}
.is-clickable-card:hover{transform:translateY(-4px);border-color:rgba(101,228,242,.5);box-shadow:0 18px 46px rgba(0,0,0,.22),0 0 0 1px rgba(101,228,242,.08);}
.is-clickable-card:focus-visible{outline:2px solid #65e4f2;outline-offset:4px;}
.is-clickable-card .demo-open{pointer-events:auto;}
.automation-detail-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(3,7,15,.82);backdrop-filter:blur(12px);}
.automation-detail-backdrop[hidden]{display:none!important;}
.automation-detail-dialog{position:relative;width:min(100%,620px);max-height:min(88vh,800px);overflow:auto;padding:clamp(24px,5vw,42px);border:1px solid rgba(101,228,242,.28);border-radius:20px;background:linear-gradient(145deg,#111b2d,#080d17 78%);box-shadow:0 28px 100px rgba(0,0,0,.55);color:#e8f1ff;}
.automation-detail-close{position:absolute;top:14px;right:16px;width:38px;height:38px;border:1px solid rgba(200,220,255,.2);border-radius:50%;background:rgba(255,255,255,.04);color:#edf6ff;font-size:27px;cursor:pointer;}
.automation-detail-dialog h2{margin:18px 44px 12px 0;font-size:clamp(27px,5vw,40px);line-height:1.12;}
.automation-detail-dialog>p{color:#afbdd2;line-height:1.75;font-size:14px;}
.automation-detail-flow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:24px 0;padding:18px 12px;border:1px solid rgba(101,228,242,.18);border-radius:12px;background:rgba(101,228,242,.04);}
.automation-detail-flow span{flex:1;text-align:center;padding:11px 6px;border:1px solid rgba(101,228,242,.24);border-radius:8px;background:rgba(101,228,242,.06);font-size:12px;font-weight:700;}
.automation-detail-flow b{color:#65e4f2;}
.automation-detail-dialog h3{margin:24px 0 12px;font-size:17px;}
.automation-detail-dialog ol{padding-left:22px;color:#c4d0e1;line-height:1.8;font-size:14px;}
.automation-detail-dialog .automation-status{padding:12px 14px;border-left:2px solid rgba(101,228,242,.55);background:rgba(101,228,242,.04);font-size:12px;}
.automation-detail-dialog .button{margin-top:10px;}
body.automation-dialog-open{overflow:hidden;}
@media(max-width:480px){.automation-detail-backdrop{padding:12px}.automation-detail-dialog{padding:25px 19px;border-radius:16px}.automation-detail-flow{gap:5px;padding:12px 6px}.automation-detail-flow span{font-size:10px;padding:10px 3px}.automation-detail-flow b{font-size:11px}}
@media(prefers-reduced-motion:reduce){.is-clickable-card{transition:none!important}}


/* === FIX GLOBAL DE VIEWPORT Y DESBORDAMIENTO MÓVIL === */
*, *::before, *::after { box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: clip; }
body { width: 100%; max-width: 100%; min-width: 0; overflow-x: clip; }
img, video, canvas, iframe, svg { max-width: 100%; }
main, header, footer, section, article, nav, .section-wrap, .site-header { min-width: 0; }
.hero-copy, .hero-art, .project-card, .service-card, .contact-panel,
.contact-copy, .contact-form, .portfolio-category-heading,
.portfolio-category-heading > div, .project-meta, .demo-card-link { min-width: 0; }
.hero h1, .standalone-hero h1, h2, h3, p, a, button, label { overflow-wrap: anywhere; }
.project-grid, .service-grid, .process-grid, .service-detail-grid,
.contact-methods, .demo-project-grid { grid-template-columns: repeat( auto-fit, minmax(min(100%, 260px), 1fr)); }

@media (max-width: 767px) {
  html, body { max-width: 100vw; overflow-x: hidden; }
  .section-wrap { width: calc(100% - 32px) !important; max-width: 100%; }
  .site-header { width: calc(100% - 32px) !important; max-width: 100%; gap: 12px; }
  .hero { width: calc(100% - 32px); max-width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 38px; }
  .hero-copy { width: 100%; max-width: 100%; }
  .hero h1, .standalone-hero h1 { max-width: 100%; font-size: clamp(31px, 8.8vw, 44px) !important; letter-spacing: -1.25px !important; line-height: 1.13; overflow-wrap: break-word; }
  .hero-lead, .standalone-hero .hero-lead { max-width: 100%; }
  .hero-art { width: 100%; max-width: 100%; margin: 18px 0 0 !important; transform: none !important; overflow: hidden; }
  .hero-bottom { width: 100%; max-width: 100%; flex-wrap: wrap; }
  .float-card { max-width: min(205px, 72vw); }
  .service-grid, .project-grid, .process-grid, .service-detail-grid,
  .contact-methods, .demo-project-grid, .about-values-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .project-card, .service-card, .contact-method-card, .contact-panel,
  .automation-detail-dialog { width: 100%; max-width: 100%; }
  .project-visual, .demo-visual, .automation-visual { width: 100%; max-width: 100%; min-width: 0; }
  .project-meta { gap: 10px; }
  .portfolio-filters { width: 100%; max-width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-filter { min-width: 0; white-space: normal; }
  .portfolio-category-heading { display: flex; flex-wrap: wrap; }
  .portfolio-category-heading > div { flex: 1 1 220px; }
  .contact-panel { grid-template-columns: minmax(0, 1fr) !important; }
  .contact-form input, .contact-form textarea, .contact-form select { width: 100%; max-width: 100%; min-width: 0; }
  .automation-detail-backdrop { padding: 12px; }
  .automation-detail-dialog { max-height: calc(100dvh - 24px); overflow-y: auto; }
  .footer-main, .footer-bottom, .footer-contact { max-width: 100%; flex-wrap: wrap; }
}

@media (max-width: 380px) {
  .section-wrap, .site-header, .hero { width: calc(100% - 26px) !important; }
  .portfolio-filters { grid-template-columns: minmax(0, 1fr); }
  .hero h1, .standalone-hero h1 { font-size: clamp(29px, 8.6vw, 34px) !important; letter-spacing: -1px !important; }
  .float-card { max-width: 174px; }
}

/* MOTION SYSTEM 2.0 — entrada coreografiada, profundidad y feedback táctil */
:root {
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-cyan: rgba(101,228,242,.34);
}
html { scroll-behavior: smooth !important; }
body { isolation: isolate; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .16;
  background-image: linear-gradient(rgba(130,164,216,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(130,164,216,.045) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse at 50% 12%, #000 0%, transparent 76%);
}
.scroll-progress { height: 3px; transform-origin: left center; will-change: transform; }
/* Mantener el contenido visible si el JS está desactivado; la clase .js-ready activa el estado inicial. */
.reveal {
  opacity: 0; transform: translate3d(0, 26px, 0) scale(.985) !important;
  filter: blur(2px) !important;
  transition: opacity 720ms var(--motion-ease), transform 780ms var(--motion-ease), filter 720ms var(--motion-ease) !important;
  transition-delay: var(--reveal-delay, 0ms) !important;
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1; transform: translate3d(0, 0, 0) scale(1) !important; filter: blur(0) !important;
}
.hero-copy.reveal { transform: translate3d(0, 18px, 0) !important; }
.hero-copy.reveal.visible { transform: translate3d(0, 0, 0) !important; }
.hero-art.reveal { transform: translate3d(0, 12px, 0) scale(.975) !important; }
.hero-art.reveal.visible { transform: translate3d(0, 0, 0) scale(1) !important; }
.hero-copy > .eyebrow { animation: motion-eyebrow-in 700ms var(--motion-ease) both; }
.hero-copy h1 { animation: motion-title-in 950ms var(--motion-ease) 80ms both; }
.hero-copy .hero-lead { animation: motion-copy-in 850ms var(--motion-ease) 190ms both; }
.hero-copy .hero-actions { animation: motion-copy-in 850ms var(--motion-ease) 280ms both; }
.hero-copy .hero-proof { animation: motion-copy-in 850ms var(--motion-ease) 370ms both; }
@keyframes motion-eyebrow-in { from { opacity: 0; transform: translateY(9px); letter-spacing: 4px; } to { opacity: 1; transform: translateY(0); } }
@keyframes motion-title-in { from { opacity: 0; transform: translateY(22px); clip-path: inset(0 0 18% 0); } to { opacity: 1; transform: translateY(0); clip-path: inset(0); } }
@keyframes motion-copy-in { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
.gradient-text { background-size: 220% auto; animation: gradient-flow 7s ease-in-out infinite alternate; }
@keyframes gradient-flow { from { background-position: 0% center; } to { background-position: 100% center; } }
.hero-art { --pointer-x: 0; --pointer-y: 0; transform-style: preserve-3d; }
.hero-art .orbit-a { transform: translate3d(calc(var(--pointer-x) * -9px), calc(var(--pointer-y) * -7px), 0) rotate(-25deg); }
.hero-art .orbit-b { transform: translate3d(calc(var(--pointer-x) * 12px), calc(var(--pointer-y) * 9px), 0) rotate(35deg); }
.hero-art .glow-core { transform: translate3d(calc(var(--pointer-x) * 8px), calc(var(--pointer-y) * 6px), 0); transition: box-shadow 500ms ease; }
.hero-art:hover .glow-core { box-shadow: inset 0 1px rgba(255,255,255,.14), 0 0 0 10px rgba(119,173,237,.035), 0 0 92px rgba(51,143,255,.23); }
.status-dot { animation: status-pulse 2.8s ease-in-out infinite; }
@keyframes status-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(101,228,242,.32), 0 0 12px var(--cyan); } 50% { box-shadow: 0 0 0 6px rgba(101,228,242,0), 0 0 18px var(--cyan); } }
.trust-inner span { transition: color 240ms ease, text-shadow 240ms ease; }
.trust-inner span:hover { color: #e8f8ff; text-shadow: 0 0 18px rgba(101,228,242,.28); }
.trust-inner i { box-shadow: 0 0 12px rgba(101,228,242,.25); animation: trust-dot 3.8s ease-in-out infinite; }
.trust-inner i:nth-of-type(2) { animation-delay: .8s; }
.trust-inner i:nth-of-type(3) { animation-delay: 1.6s; }
@keyframes trust-dot { 0%,100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.35); } }
.service-card, .project-card, .contact-method-card, .about-focus-card, .service-detail-card, .automation-card {
  position: relative; isolation: isolate; overflow: hidden;
  transition: transform 420ms var(--motion-ease), border-color 320ms ease, box-shadow 420ms ease !important;
}
.service-card::after, .project-card::after, .contact-method-card::after, .about-focus-card::after, .service-detail-card::after, .automation-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(101,228,242,.105), transparent 68%);
  transition: opacity 320ms ease;
}
.service-card:hover::after, .project-card:hover::after, .contact-method-card:hover::after, .about-focus-card:hover::after, .service-detail-card:hover::after, .automation-card:hover::after { opacity: 1; }
.service-card:hover, .project-card:hover, .contact-method-card:hover, .about-focus-card:hover, .service-detail-card:hover, .automation-card:hover {
  transform: translateY(-6px) scale(1.006) !important;
  border-color: rgba(101,228,242,.38);
  box-shadow: 0 22px 55px rgba(0,0,0,.2), 0 0 24px rgba(101,228,242,.045);
}
.service-icon, .step-symbol, .mini-icon { transition: transform 360ms var(--motion-ease), box-shadow 360ms ease, border-color 360ms ease; }
.service-card:hover .service-icon, .process-step:hover .step-symbol { transform: translateY(-3px) rotate(-4deg); box-shadow: 0 8px 22px rgba(101,228,242,.1); }
.button, .nav-cta, .text-link, .card-link { transition: transform 280ms var(--motion-ease), color 220ms ease, border-color 220ms ease, box-shadow 280ms ease !important; }
.button:active { transform: translateY(1px) scale(.985) !important; }
.button-primary:hover { box-shadow: 0 14px 40px rgba(67,209,231,.25), inset 0 1px rgba(255,255,255,.28); }
.button span, .card-link span, .project-arrow { display: inline-block; transition: transform 260ms var(--motion-ease); }
.button:hover span, .card-link:hover span, .project-card:hover .project-arrow { transform: translate(3px,-2px); }
.process-step { transition: border-color 350ms ease, background 350ms ease, transform 350ms var(--motion-ease), box-shadow 350ms ease; }
.process-step.scroll-current { border-color: rgba(101,228,242,.48); background: linear-gradient(155deg, rgba(19,35,51,.98), rgba(10,15,25,.98)); box-shadow: 0 0 28px rgba(101,228,242,.055); }
.process-step.scroll-current .step-symbol { color: var(--cyan); border-color: rgba(101,228,242,.5); box-shadow: 0 0 24px rgba(101,228,242,.12); }
.portfolio-filter { transition: color 260ms ease, background 260ms ease, border-color 260ms ease, transform 260ms var(--motion-ease) !important; }
.portfolio-filter:active { transform: scale(.97); }
.automation-detail-backdrop:not([hidden]) { animation: backdrop-in 220ms ease both; }
.automation-detail-backdrop:not([hidden]) .automation-detail-dialog { animation: dialog-in 430ms var(--motion-ease) both; }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(18px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }
input, textarea, select { transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease; }
input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(101,228,242,.65); box-shadow: 0 0 0 3px rgba(101,228,242,.09); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
@media (max-width: 760px) {
  body::before { background-size: 42px 42px; opacity: .1; }
  .reveal { transform: translate3d(0, 18px, 0) scale(.99) !important; filter: none !important; transition-duration: 560ms !important; }
  .hero-art .orbit-a, .hero-art .orbit-b, .hero-art .glow-core { transform: none; }
  .service-card:hover, .project-card:hover, .contact-method-card:hover, .about-focus-card:hover, .service-detail-card:hover, .automation-card:hover { transform: translateY(-2px) !important; }
  .trust-inner { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, .reveal.visible { opacity: 1 !important; transform: none !important; filter: none !important; }
  body::before { display: none; }
}


/* WEBSTUDIO CINEMATIC MOTION SYSTEM — V3 */
:root{--cin-ease:cubic-bezier(.2,.75,.2,1);--cin-glow:rgba(101,228,242,.2)}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{isolation:isolate}
body:after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.site-header{transition:height .45s var(--cin-ease),background .4s,border-color .4s,box-shadow .4s}
.site-header.is-scrolled{height:70px;background:rgba(6,10,18,.9);border-color:rgba(101,228,242,.2);box-shadow:0 12px 40px rgba(0,0,0,.18)}
.brand-logo{transition:transform .6s var(--cin-ease),filter .4s}.brand:hover .brand-logo{transform:rotate(-8deg) scale(1.06);filter:drop-shadow(0 0 18px rgba(101,228,242,.35))}
.nav-links a:not(.nav-cta){position:relative}.nav-links a:not(.nav-cta):after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:right .35s var(--cin-ease)}.nav-links a:not(.nav-cta):hover:after,.nav-links a:not(.nav-cta):focus-visible:after{right:0}
.hero{isolation:isolate}.hero:before{content:"";position:absolute;z-index:-1;width:min(58vw,680px);aspect-ratio:1;border-radius:50%;right:-8%;top:2%;pointer-events:none;background:radial-gradient(circle,rgba(44,104,177,.13),rgba(104,73,183,.055) 34%,transparent 68%);animation:cin-breathe 8s ease-in-out infinite alternate}
.hero-copy .eyebrow{animation:cin-rise .8s .05s both}.hero-copy h1{animation:cin-title-in 1.05s .13s both}.hero-copy .hero-lead{animation:cin-rise .9s .3s both}.hero-copy .hero-actions{animation:cin-rise .9s .43s both}.hero-copy .hero-proof{animation:cin-rise .9s .56s both}
.hero h1{text-wrap:balance}.gradient-text{background-size:220% 100%;filter:drop-shadow(0 0 18px rgba(101,228,242,.06));animation:gradient-flow 8s ease-in-out infinite alternate,cin-text-glow 6s ease-in-out infinite alternate}
.hero-art{transform-style:preserve-3d;will-change:transform;transition:transform .35s ease-out}.hero-art:after{content:"";position:absolute;inset:7%;border-radius:50%;border:1px solid transparent;background:linear-gradient(135deg,rgba(101,228,242,.22),transparent 32%,rgba(168,139,255,.2) 67%,transparent) border-box;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.55;animation:cin-orbit 24s linear infinite;pointer-events:none}
.orbit{will-change:transform;animation:cin-orbit 32s linear infinite}.orbit-b{animation-direction:reverse;animation-duration:42s}.glow-core{animation:core-breathe 5s ease-in-out infinite,cin-core-shadow 5s ease-in-out infinite;transform:translateZ(25px)}.core-logo{text-shadow:0 0 30px rgba(101,228,242,.2)}.float-card{transition:border-color .4s,box-shadow .4s,background .4s;transform-style:preserve-3d}.float-card:hover{border-color:rgba(101,228,242,.5);box-shadow:0 20px 65px rgba(0,0,0,.4),0 0 28px rgba(101,228,242,.08)}.spark{animation:cin-spark 4.5s ease-in-out infinite}.spark-two{animation-delay:-2.2s}
.scroll-cue b{display:inline-block;animation:cin-nudge 1.8s ease-in-out infinite}.hero-bottom{animation:cin-fade .9s .7s both}
.trust-inner span{transition:color .3s,letter-spacing .3s}.trust-inner span:hover{color:#e7f7ff;letter-spacing:1.9px}
.section-heading h2{text-wrap:balance}.section-heading.reveal h2,.standalone-hero h1{animation:cin-heading-mask .9s var(--cin-ease) both}
.reveal{transition:opacity .85s var(--cin-ease),transform .95s var(--cin-ease),filter .85s var(--cin-ease);transition-delay:var(--reveal-delay,0ms)}
.service-card,.project-card,.contact-method-card,.about-focus-card,.service-detail-card,.automation-card,.demo-project-card{transform-style:preserve-3d;will-change:transform;transition:transform .5s var(--cin-ease),border-color .4s,box-shadow .5s var(--cin-ease),background .4s;--mx:50%;--my:50%}
.service-card:before,.project-card:before,.contact-method-card:before,.about-focus-card:before,.service-detail-card:before,.automation-card:before,.demo-project-card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(360px circle at var(--mx) var(--my),rgba(101,228,242,.12),transparent 44%);transition:opacity .45s;z-index:0}.service-card:hover:before,.project-card:hover:before,.contact-method-card:hover:before,.about-focus-card:hover:before,.service-detail-card:hover:before,.automation-card:hover:before,.demo-project-card:hover:before{opacity:1}.service-card:hover,.project-card:hover,.contact-method-card:hover,.about-focus-card:hover,.service-detail-card:hover,.automation-card:hover,.demo-project-card:hover{box-shadow:0 22px 55px rgba(0,0,0,.22),0 0 0 1px rgba(101,228,242,.035)}
.service-card>* ,.project-card>* ,.contact-method-card>* ,.about-focus-card>* ,.service-detail-card>* ,.automation-card>* ,.demo-project-card>*{position:relative;z-index:1}
.service-icon,.step-symbol,.project-arrow,.service-number{transition:transform .45s var(--cin-ease),color .35s,text-shadow .35s}.service-card:hover .service-icon,.process-step:hover .step-symbol{transform:translateY(-3px) rotate(-5deg);text-shadow:0 0 20px rgba(101,228,242,.25)}.project-card:hover .project-arrow{transform:translate(4px,-4px) rotate(0deg);color:var(--cyan)}
.project-visual,.demo-visual,.automation-visual{isolation:isolate}.project-visual:after,.demo-visual:after,.automation-visual:after{content:"";position:absolute;inset:-50% auto -50% -75%;width:42%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .9s var(--cin-ease);pointer-events:none;z-index:4}.project-card:hover .project-visual:after,.demo-project-card:hover .demo-visual:after,.automation-card:hover .automation-visual:after{left:145%}.demo-browser{transition:transform .65s var(--cin-ease),box-shadow .65s var(--cin-ease)}.demo-project-card:hover .demo-browser{transform:perspective(900px) rotateY(0) translateY(-4px) scale(1.025);box-shadow:0 26px 70px rgba(0,0,0,.48),0 0 32px rgba(101,228,242,.07)}
.button,.nav-cta,.demo-open{position:relative;isolation:isolate;overflow:hidden;transition:transform .35s var(--cin-ease),box-shadow .35s,border-color .35s,background .35s}.button:before,.nav-cta:before,.demo-open:before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-120%) skewX(-18deg);background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transition:transform .7s var(--cin-ease)}.button:hover:before,.nav-cta:hover:before,.demo-open:hover:before{transform:translateX(120%) skewX(-18deg)}.button:active{transform:scale(.975)}
.process-step:before{content:"";position:absolute;left:0;right:100%;top:-1px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:right .65s var(--cin-ease)}.process-step:hover:before,.process-step.scroll-current:before,.process-step.is-active:before{right:0}.process-step .step-index{transition:color .35s}.process-step:hover .step-index,.process-step.scroll-current .step-index{color:#fff}
.scroll-progress{height:3px;background:linear-gradient(90deg,#65e4f2 0%,#688cff 48%,#b68aff 78%,#65e4f2 100%);background-size:200% 100%;animation:cin-progress-flow 5s linear infinite;box-shadow:0 0 18px rgba(101,228,242,.42)}
@keyframes cin-rise{from{opacity:0;transform:translateY(22px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes cin-title-in{from{opacity:0;transform:translateY(28px);clip-path:inset(0 0 100% 0);filter:blur(8px)}to{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0);filter:blur(0)}}@keyframes cin-heading-mask{from{clip-path:inset(0 0 100% 0);transform:translateY(10px)}to{clip-path:inset(0 0 0 0);transform:translateY(0)}}@keyframes cin-breathe{from{transform:scale(.92);opacity:.65}to{transform:scale(1.08);opacity:1}}@keyframes cin-orbit{to{transform:rotate(360deg)}}@keyframes cin-core-shadow{0%,100%{box-shadow:0 0 65px rgba(72,159,234,.14),inset 0 0 35px rgba(101,228,242,.05)}50%{box-shadow:0 0 95px rgba(72,159,234,.25),inset 0 0 48px rgba(101,228,242,.12)}}@keyframes cin-text-glow{from{filter:drop-shadow(0 0 0 rgba(101,228,242,0))}to{filter:drop-shadow(0 0 13px rgba(101,228,242,.16))}}@keyframes cin-spark{0%,100%{opacity:.5;transform:scale(.82) rotate(0deg)}50%{opacity:1;transform:scale(1.18) rotate(18deg)}}@keyframes cin-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}@keyframes cin-fade{from{opacity:0}to{opacity:1}}@keyframes cin-progress-flow{to{background-position:200% 0}}
@media(hover:hover) and (pointer:fine){.button-primary:hover{box-shadow:0 12px 45px rgba(67,209,231,.25),0 0 0 1px rgba(101,228,242,.12)}.service-card:hover,.project-card:hover,.demo-project-card:hover{transform:translateY(-7px)}}
@media(max-width:760px){body:after{opacity:.022}.hero:before{width:100vw;right:-15%;top:12%;opacity:.7}.hero-art:after{inset:12%}hero-art{will-change:auto}.orbit{animation-duration:48s}.orbit-b{animation-duration:58s}.float-card{backdrop-filter:blur(8px)}.service-card,.project-card,.contact-method-card,.about-focus-card,.service-detail-card,.automation-card,.demo-project-card{will-change:auto}.service-card:before,.project-card:before,.contact-method-card:before,.about-focus-card:before,.service-detail-card:before,.automation-card:before,.demo-project-card:before{display:none}}
@media(prefers-reduced-motion:reduce){body:after{display:none!important}.hero:before,.hero-art:after{animation:none!important}.hero-copy .eyebrow,.hero-copy h1,.hero-copy .hero-lead,.hero-copy .hero-actions,.hero-copy .hero-proof,.hero-bottom{animation:none!important}.gradient-text{animation:none!important}.orbit,.spark,.glow-core{animation:none!important}.site-header,.brand-logo,.nav-links a:after,.button:before,.nav-cta:before,.demo-open:before{transition:none!important}}


/* Performance pass V4: keep the cinematic character without custom cursor or costly per-frame effects. */
html { scroll-behavior: smooth; }
body, a, button, [role="button"], .is-clickable-card { cursor: auto; }
button, .button, .nav-cta, .portfolio-filter, .automation-detail-close { cursor: pointer; }
/* Prefer composited opacity/transform animations over blur and large shadow repaints. */
.reveal { filter: none !important; transition: opacity .42s ease, transform .42s ease !important; }
.hero-art { will-change: auto !important; transition: none !important; transform: none !important; }
.hero-art .orbit-a, .hero-art .orbit-b { transform: rotate(-25deg); }
.hero-art .orbit-b { transform: rotate(35deg); }
.hero-art .glow-core { transform: none !important; animation: core-breathe 7s ease-in-out infinite !important; }
.gradient-text { filter: none !important; animation: none !important; background-size: 100% 100% !important; }
.hero:before { animation-duration: 14s !important; opacity: .7; }
.hero-art:after { animation-duration: 48s !important; }
.orbit { animation-duration: 64s !important; }
.orbit-b { animation-duration: 78s !important; }
.spark { animation-duration: 7s !important; }
.scroll-progress { background-size: 100% 100% !important; animation: none !important; box-shadow: none !important; }
/* Spotlight gradients update on every pointer movement and can trigger repaints; retain simple hover feedback instead. */
.service-card:before, .project-card:before, .contact-method-card:before, .about-focus-card:before,
.service-detail-card:before, .automation-card:before, .demo-project-card:before { display: none !important; }
.service-card, .project-card, .contact-method-card, .about-focus-card, .service-detail-card,
.automation-card, .featured-service, .demo-project-card { will-change: auto !important; transform-style: flat !important; }
.site-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(8,11,20,.97) !important; }
.float-card, .mini-float { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(13,19,32,.97) !important; }
.automation-detail-backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
@media (hover:hover) and (pointer:fine) {
  body, a, button, [role="button"], .is-clickable-card { cursor: auto !important; }
  .service-card:hover, .project-card:hover, .contact-method-card:hover, .about-focus-card:hover,
  .service-detail-card:hover, .automation-card:hover, .demo-project-card:hover { transform: translateY(-3px); }
}
/* En móviles no se desactivan los efectos por defecto: el perfil JS decide cuánto movimiento usar. */
@media (max-width:760px) {
  .hero:before { animation-duration: 18s !important; }
  .hero-art:after { animation-duration: 52s !important; }
  .orbit { animation-duration: 68s !important; }
  .orbit-b { animation-duration: 82s !important; }
  .spark { animation-duration: 8s !important; }
  .float-card, .mini-float { animation-duration: 6s !important; }
}
@media (prefers-reduced-motion:reduce) {
}


/* Final quality pass: stable mobile layout, accessible focus, and lightweight motion. */
*, *::before, *::after { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
body { width: 100%; max-width: 100%; overflow-x: hidden; overflow-x: clip; }
img, svg, video, canvas, iframe { max-width: 100%; }
button, input, select, textarea { font: inherit; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan, #65e4f2);
  outline-offset: 4px;
}
.demo-project-card[tabindex="0"] { cursor: pointer; }
.demo-project-card[tabindex="0"]:focus-visible { outline-offset: 6px; }
@media (max-width: 760px) {
  .hero, .section-wrap, .section-block, .section-heading, .service-grid, .project-grid,
  .process-grid, .about-grid, .contact-grid, .service-detail-grid, .automation-grid {
    min-width: 0;
    max-width: 100%;
  }
  .hero h1 { overflow-wrap: anywhere; }
  .hero-actions { flex-wrap: wrap; }
  .button, .nav-cta, .demo-open { min-height: 44px; }
  .service-card, .project-card, .contact-method-card, .about-focus-card,
  .service-detail-card, .automation-card, .demo-project-card { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* FAQ: native disclosure controls keep the interaction fast and keyboard accessible. */
.faq-list { max-width: 920px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,.12); }
.faq-item { border-bottom: 1px solid rgba(255,255,255,.12); }
.faq-item summary { position: relative; list-style: none; cursor: pointer; padding: 22px 52px 22px 0; color: var(--text, #eef4ff); font-weight: 600; line-height: 1.5; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--cyan, #65e4f2); font-size: 1.5rem; font-weight: 400; transition: transform .2s ease; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { max-width: 760px; margin: 0; padding: 0 36px 22px 0; color: var(--muted, #a8b3c7); line-height: 1.8; }
.faq-item summary:focus-visible { outline-offset: -2px; }
@media (max-width: 760px) { .faq-item summary { padding: 18px 42px 18px 0; } .faq-item p { padding-right: 8px; } }


/* Perfiles adaptativos de animación. El contenido y las funciones permanecen idénticos. */
html[data-motion-profile="balanced"] .hero:before { animation-duration: 22s !important; opacity: .45; }
html[data-motion-profile="balanced"] .hero-art:after { animation-duration: 70s !important; }
html[data-motion-profile="balanced"] .orbit { animation-duration: 90s !important; }
html[data-motion-profile="balanced"] .orbit-b { animation-duration: 105s !important; }
html[data-motion-profile="balanced"] .spark { animation-duration: 10s !important; }
html[data-motion-profile="balanced"] .reveal { transition-duration: .32s !important; }
html[data-motion-profile="balanced"] .float-card,
html[data-motion-profile="balanced"] .mini-float { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

html[data-motion-profile="lite"] .hero:before,
html[data-motion-profile="lite"] .hero-art:after,
html[data-motion-profile="lite"] .orbit,
html[data-motion-profile="lite"] .orbit-b,
html[data-motion-profile="lite"] .spark,
html[data-motion-profile="lite"] .glow-core,
html[data-motion-profile="lite"] .card-web,
html[data-motion-profile="lite"] .card-ai,
html[data-motion-profile="lite"] .card-growth,
html[data-motion-profile="lite"] .scroll-progress,
html[data-motion-profile="lite"] .gradient-text { animation: none !important; }
html[data-motion-profile="lite"] .reveal { transition-duration: .22s !important; transition-delay: 0ms !important; }
html[data-motion-profile="lite"] .hero-copy .eyebrow,
html[data-motion-profile="lite"] .hero-copy h1,
html[data-motion-profile="lite"] .hero-copy .hero-lead,
html[data-motion-profile="lite"] .hero-copy .hero-actions,
html[data-motion-profile="lite"] .hero-copy .hero-proof,
html[data-motion-profile="lite"] .hero-bottom { animation: none !important; }
html[data-motion-profile="lite"] .float-card,
html[data-motion-profile="lite"] .mini-float,
html[data-motion-profile="lite"] .site-header,
html[data-motion-profile="lite"] .automation-detail-backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html[data-motion-profile="lite"] .glow-core { box-shadow: 0 0 24px rgba(72,159,234,.10) !important; }
html[data-motion-profile="lite"] .service-card,
html[data-motion-profile="lite"] .project-card,
html[data-motion-profile="lite"] .contact-method-card,
html[data-motion-profile="lite"] .about-focus-card,
html[data-motion-profile="lite"] .service-detail-card,
html[data-motion-profile="lite"] .automation-card,
html[data-motion-profile="lite"] .demo-project-card { transition-duration: .16s !important; }

@media (prefers-reduced-motion: reduce) {
  html[data-motion-profile] .hero:before,
  html[data-motion-profile] .hero-art:after,
  html[data-motion-profile] .orbit,
  html[data-motion-profile] .orbit-b,
  html[data-motion-profile] .spark,
  html[data-motion-profile] .glow-core { animation: none !important; }
}


/* Perfil de bajo rendimiento: prioriza contenido visible y pintura barata en móviles limitados. */
html[data-motion-profile="lite"] .reveal,
html[data-motion-profile="lite"] .reveal.visible,
html[data-motion-profile="lite"] .hero-copy.reveal,
html[data-motion-profile="lite"] .hero-art.reveal,
html[data-motion-profile="lite"] .hero-copy.reveal.visible,
html[data-motion-profile="lite"] .hero-art.reveal.visible {
  opacity: 1 !important; transform: none !important; filter: none !important;
  transition: none !important; transition-delay: 0ms !important;
}
html[data-motion-profile="lite"] .ambient,
html[data-motion-profile="lite"] .hero:before,
html[data-motion-profile="lite"] .hero-art:after,
html[data-motion-profile="lite"] .orbit,
html[data-motion-profile="lite"] .orbit-b,
html[data-motion-profile="lite"] .spark,
html[data-motion-profile="lite"] .status-dot,
html[data-motion-profile="lite"] .gradient-text {
  animation: none !important; filter: none !important;
}
html[data-motion-profile="lite"] .ambient { display: none !important; }
html[data-motion-profile="lite"] .service-card,
html[data-motion-profile="lite"] .project-card,
html[data-motion-profile="lite"] .contact-method-card,
html[data-motion-profile="lite"] .about-focus-card,
html[data-motion-profile="lite"] .service-detail-card,
html[data-motion-profile="lite"] .automation-card,
html[data-motion-profile="lite"] .demo-project-card,
html[data-motion-profile="lite"] .button-primary,
html[data-motion-profile="lite"] .portfolio-filter,
html[data-motion-profile="lite"] .faq-item summary {
  transition: none !important; animation: none !important;
}
html[data-motion-profile="lite"] .service-card:hover,
html[data-motion-profile="lite"] .project-card:hover,
html[data-motion-profile="lite"] .contact-method-card:hover,
html[data-motion-profile="lite"] .about-focus-card:hover,
html[data-motion-profile="lite"] .service-detail-card:hover,
html[data-motion-profile="lite"] .automation-card:hover,
html[data-motion-profile="lite"] .demo-project-card:hover,
html[data-motion-profile="lite"] .button-primary:hover {
  transform: none !important; filter: none !important;
}
html[data-motion-profile="lite"] .glow-core,
html[data-motion-profile="lite"] .float-card,
html[data-motion-profile="lite"] .mini-float,
html[data-motion-profile="lite"] .site-header,
html[data-motion-profile="lite"] .automation-detail-dialog,
html[data-motion-profile="lite"] .mock-browser {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
html[data-motion-profile="lite"] .hero { contain: layout paint; }
@media (max-width: 760px) {
  html[data-motion-profile="balanced"] .reveal { filter: none !important; transition-duration: .18s !important; transition-delay: 0ms !important; }
  html[data-motion-profile="balanced"] .ambient { filter: blur(45px) !important; opacity: .07 !important; }
  html[data-motion-profile="balanced"] .float-card,
  html[data-motion-profile="balanced"] .mini-float { animation: none !important; }
}


/* V8: conservar movimiento elegante incluso en el perfil ligero, usando solo transform y opacity. */
html[data-motion-profile="lite"] .reveal,
html[data-motion-profile="lite"] .reveal.visible,
html[data-motion-profile="lite"] .hero-copy.reveal,
html[data-motion-profile="lite"] .hero-art.reveal,
html[data-motion-profile="lite"] .hero-copy.reveal.visible,
html[data-motion-profile="lite"] .hero-art.reveal.visible {
  filter: none !important;
  transition: opacity .34s ease-out, transform .34s cubic-bezier(.2,.7,.2,1) !important;
  transition-delay: 0ms !important;
  will-change: opacity, transform;
}
html[data-motion-profile="lite"] .reveal { opacity: 0 !important; transform: translate3d(0, 12px, 0) scale(.995) !important; }
html[data-motion-profile="lite"] .reveal.visible { opacity: 1 !important; transform: translate3d(0, 0, 0) scale(1) !important; }
html[data-motion-profile="lite"] .hero-copy > .eyebrow { animation: lite-rise .38s ease-out both !important; }
html[data-motion-profile="lite"] .hero-copy h1 { animation: lite-rise .42s .04s ease-out both !important; }
html[data-motion-profile="lite"] .hero-copy .hero-lead { animation: lite-rise .38s .09s ease-out both !important; }
html[data-motion-profile="lite"] .hero-copy .hero-actions { animation: lite-rise .38s .13s ease-out both !important; }
html[data-motion-profile="lite"] .hero-copy .hero-proof { animation: lite-rise .38s .17s ease-out both !important; }
html[data-motion-profile="lite"] .glow-core { animation: lite-core-breathe 7s ease-in-out infinite !important; }
html[data-motion-profile="lite"] .card-web { animation: lite-float 6s ease-in-out infinite !important; }
html[data-motion-profile="lite"] .card-ai { animation: lite-float 6.5s .5s ease-in-out infinite !important; }
html[data-motion-profile="lite"] .card-growth { animation: lite-float 7s 1s ease-in-out infinite !important; }
html[data-motion-profile="lite"] .service-card,
html[data-motion-profile="lite"] .project-card,
html[data-motion-profile="lite"] .contact-method-card,
html[data-motion-profile="lite"] .about-focus-card,
html[data-motion-profile="lite"] .service-detail-card,
html[data-motion-profile="lite"] .automation-card,
html[data-motion-profile="lite"] .demo-project-card,
html[data-motion-profile="lite"] .button-primary,
html[data-motion-profile="lite"] .portfolio-filter,
html[data-motion-profile="lite"] .faq-item summary {
  transition: transform .18s ease-out, border-color .18s ease-out, opacity .18s ease-out !important;
  animation: none !important;
}
html[data-motion-profile="lite"] .service-card:active,
html[data-motion-profile="lite"] .project-card:active,
html[data-motion-profile="lite"] .contact-method-card:active,
html[data-motion-profile="lite"] .about-focus-card:active,
html[data-motion-profile="lite"] .service-detail-card:active,
html[data-motion-profile="lite"] .automation-card:active,
html[data-motion-profile="lite"] .demo-project-card:active,
html[data-motion-profile="lite"] .button-primary:active,
html[data-motion-profile="lite"] .portfolio-filter:active { transform: scale(.985) !important; }
html[data-motion-profile="lite"] .ambient,
html[data-motion-profile="lite"] .hero:before,
html[data-motion-profile="lite"] .hero-art:after,
html[data-motion-profile="lite"] .orbit,
html[data-motion-profile="lite"] .orbit-b,
html[data-motion-profile="lite"] .spark,
html[data-motion-profile="lite"] .gradient-text,
html[data-motion-profile="lite"] .scroll-progress { animation: none !important; }
@keyframes lite-rise { from { opacity: 0; transform: translate3d(0, 9px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes lite-float { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-3px,0); } }
@keyframes lite-core-breathe { 0%,100% { transform: scale(1); opacity: .96; } 50% { transform: scale(1.025); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html[data-motion-profile] .reveal,
  html[data-motion-profile] .reveal.visible,
  html[data-motion-profile] .hero-copy > .eyebrow,
  html[data-motion-profile] .hero-copy h1,
  html[data-motion-profile] .hero-copy .hero-lead,
  html[data-motion-profile] .hero-copy .hero-actions,
  html[data-motion-profile] .hero-copy .hero-proof,
  html[data-motion-profile] .glow-core,
  html[data-motion-profile] .card-web,
  html[data-motion-profile] .card-ai,
  html[data-motion-profile] .card-growth { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}


/* V9: microanimaciones refinadas, priorizando transform/opacity para mantener fluidez. */
html[data-motion-profile="lite"] .reveal,
html[data-motion-profile="lite"] .reveal.visible,
html[data-motion-profile="lite"] .hero-copy.reveal,
html[data-motion-profile="lite"] .hero-art.reveal,
html[data-motion-profile="lite"] .hero-copy.reveal.visible,
html[data-motion-profile="lite"] .hero-art.reveal.visible {
  transition: opacity .4s cubic-bezier(.2,.7,.2,1), transform .4s cubic-bezier(.2,.7,.2,1) !important;
  will-change: auto !important;
}
html[data-motion-profile="lite"] .reveal { transform: translate3d(0, 15px, 0) scale(.994) !important; }
html[data-motion-profile="lite"] .reveal.visible { transform: translate3d(0, 0, 0) scale(1) !important; }
html[data-motion-profile="lite"] .hero:before {
  display: block !important;
  animation: lite-ambient-breathe 12s ease-in-out infinite alternate !important;
  opacity: .28 !important;
}
html[data-motion-profile="lite"] .hero-copy > .eyebrow { animation-duration: .46s !important; }
html[data-motion-profile="lite"] .hero-copy h1 { animation-duration: .5s !important; }
html[data-motion-profile="lite"] .hero-copy .hero-lead,
html[data-motion-profile="lite"] .hero-copy .hero-actions,
html[data-motion-profile="lite"] .hero-copy .hero-proof { animation-duration: .44s !important; }
html[data-motion-profile="lite"] .service-card:active,
html[data-motion-profile="lite"] .project-card:active,
html[data-motion-profile="lite"] .contact-method-card:active,
html[data-motion-profile="lite"] .about-focus-card:active,
html[data-motion-profile="lite"] .service-detail-card:active,
html[data-motion-profile="lite"] .automation-card:active,
html[data-motion-profile="lite"] .demo-project-card:active,
html[data-motion-profile="lite"] .button-primary:active,
html[data-motion-profile="lite"] .portfolio-filter:active,
html[data-motion-profile="lite"] .faq-item summary:active {
  transform: scale(.978) !important;
  transition-duration: .12s !important;
}
html[data-motion-profile="balanced"] .reveal { transition-duration: .44s !important; }
@keyframes lite-ambient-breathe {
  from { transform: scale(.96); opacity: .2; }
  to { transform: scale(1.035); opacity: .34; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-motion-profile="lite"] .hero:before { animation: none !important; }
}


/* V10 — Hero cinematográfico: sistema solar digital optimizado con transform y opacity. */
.solar-stage{isolation:isolate;perspective:900px;overflow:hidden;contain:layout paint;}
.solar-nebula{position:absolute;width:72%;height:72%;border-radius:50%;background:radial-gradient(ellipse,rgba(20,82,130,.19),rgba(8,11,20,0) 68%);pointer-events:none;}
.solar-stage .orbit{display:block;border-style:solid;opacity:.8;will-change:transform;}
.solar-stage .orbit-a{width:90%;height:54%;border-color:rgba(87,197,241,.32);transform:rotate(-23deg);}
.solar-stage .orbit-b{width:73%;height:80%;border-color:rgba(168,139,255,.24);transform:rotate(31deg);}
.solar-stage .orbit-c{width:58%;height:95%;border-color:rgba(242,77,103,.18);transform:rotate(64deg);}
.solar-core{position:relative;z-index:3;width:clamp(118px,14vw,166px);height:clamp(118px,14vw,166px);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 34% 25%,#1a344c 0,#101827 55%,#090e19 100%);border:1px solid rgba(101,228,242,.6);box-shadow:0 0 0 9px rgba(101,228,242,.025),0 0 42px rgba(45,157,222,.24),inset 0 0 28px rgba(101,228,242,.1);animation:solar-core-breathe 5.5s ease-in-out infinite;}
.solar-core .core-logo{font-size:clamp(52px,6vw,72px);letter-spacing:-7px;line-height:.95;text-shadow:0 0 25px rgba(101,228,242,.25);}
.solar-core .core-caption{font-size:9px;letter-spacing:2.2px;margin-top:8px;color:#e4f5ff;font-weight:800;}
.solar-core .core-subcaption{font-size:6px;letter-spacing:2px;margin-top:3px;color:#91a6c2;}
.core-halo{position:absolute;inset:-13px;border:1px solid rgba(101,228,242,.14);border-radius:50%;box-shadow:0 0 28px rgba(101,228,242,.06);}
.solar-planet{--planet-delay:0s;position:absolute;z-index:4;left:50%;top:50%;display:flex;align-items:center;gap:10px;width:max-content;max-width:88%;opacity:0;pointer-events:none;transform:translate3d(-50%,-50%,0) scale(.12);animation:solar-approach 12.6s cubic-bezier(.2,.72,.18,1) infinite;animation-delay:var(--planet-delay);will-change:transform,opacity;}
.planet-web{--planet-delay:0s;--planet-color:#65e4f2;--planet-glow:rgba(61,207,237,.3);}
.planet-ai{--planet-delay:4.2s;--planet-color:#a88bff;--planet-glow:rgba(168,139,255,.32);flex-direction:row-reverse;}
.planet-growth{--planet-delay:8.4s;--planet-color:#ff647d;--planet-glow:rgba(255,77,110,.28);}
.planet-sphere{position:relative;flex:0 0 auto;width:clamp(40px,5vw,58px);height:clamp(40px,5vw,58px);border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--planet-color),white 20%);background:radial-gradient(circle at 30% 24%,color-mix(in srgb,var(--planet-color),white 20%),color-mix(in srgb,var(--planet-color),#101827 70%) 40%,#080b14 100%);box-shadow:0 0 28px var(--planet-glow),inset -8px -8px 14px rgba(0,0,0,.48),inset 3px 3px 9px rgba(255,255,255,.2);}
.planet-sphere:after{content:"";position:absolute;inset:12%;border-radius:50%;border:1px solid rgba(255,255,255,.13);}
.planet-ring{position:absolute;width:150%;height:42%;border:2px solid color-mix(in srgb,var(--planet-color),transparent 26%);border-radius:50%;transform:rotate(-25deg);}
.planet-mark{font-size:25px;color:#fff;text-shadow:0 0 13px var(--planet-color);}
.planet-label{min-width:145px;padding:10px 13px;border:1px solid color-mix(in srgb,var(--planet-color),transparent 65%);border-radius:10px;background:rgba(7,12,23,.94);box-shadow:0 12px 35px rgba(0,0,0,.35);backdrop-filter:blur(5px);}
.planet-label b,.planet-label small{display:block;white-space:normal;}
.planet-label b{font:700 11px/1.35 Manrope,sans-serif;color:#f3f7ff;}
.planet-label small{font-size:9px;line-height:1.45;color:#a8b6cc;margin-top:3px;}
.solar-star{position:absolute;color:#9feeff;text-shadow:0 0 12px #65e4f2;animation:solar-twinkle 3s ease-in-out infinite alternate;}
.star-a{left:17%;top:25%;font-size:14px}.star-b{right:15%;top:32%;font-size:20px;animation-delay:.8s}.star-c{right:23%;bottom:19%;font-size:35px;animation-delay:1.4s}
@keyframes solar-approach{0%,3%{opacity:0;transform:translate3d(-50%,-50%,0) scale(.12)}12%{opacity:1;transform:translate3d(-50%,-50%,0) scale(.55)}22%{opacity:1;transform:translate3d(-50%,-50%,0) scale(1.04)}27%,34%{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}43%{opacity:0;transform:translate3d(-50%,-50%,0) scale(.16)}}
@keyframes solar-core-breathe{0%,100%{box-shadow:0 0 0 9px rgba(101,228,242,.025),0 0 35px rgba(45,157,222,.18),inset 0 0 24px rgba(101,228,242,.08)}50%{box-shadow:0 0 0 13px rgba(101,228,242,.035),0 0 48px rgba(45,157,222,.26),inset 0 0 32px rgba(101,228,242,.13)}}
@keyframes solar-twinkle{from{opacity:.3;transform:scale(.8)}to{opacity:1;transform:scale(1.1)}}
/* En equipos limitados conservamos el movimiento principal, con menos duración gráfica y sin filtros costosos. */
html[data-motion-profile="lite"] .solar-stage .orbit{animation:solar-orbit-drift 22s linear infinite!important;}
html[data-motion-profile="lite"] .solar-planet{animation-duration:12.6s!important;backdrop-filter:none;}
html[data-motion-profile="lite"] .solar-core{animation-duration:7s!important;}
html[data-motion-profile="lite"] .solar-star{animation-duration:4.5s!important;}
@keyframes solar-orbit-drift{from{rotate:0deg}to{rotate:360deg}}
@media(max-width:760px){
 .solar-stage{height:330px!important;margin-top:18px!important;overflow:hidden;}
 .solar-stage .orbit-a{width:98%;height:48%;}
 .solar-stage .orbit-b{width:82%;height:76%;}
 .solar-stage .orbit-c{width:67%;height:91%;}
 .solar-core{width:112px;height:112px;}
 .solar-core .core-logo{font-size:51px;}
 .solar-core .core-caption{font-size:8px;letter-spacing:1.7px;}
 .solar-planet{gap:7px;max-width:94%;}
 .planet-sphere{width:43px;height:43px;}
 .planet-mark{font-size:20px;}
 .planet-label{min-width:0;width:clamp(128px,43vw,165px);padding:9px 10px;}
 .planet-label b{font-size:10px;}
 .planet-label small{font-size:8px;}
 .planet-ai{flex-direction:row-reverse;}
 .star-a{left:7%;top:21%}.star-b{right:7%;top:25%}.star-c{right:12%;bottom:12%;}
}
@media(max-width:380px){.solar-stage{height:300px!important}.solar-core{width:98px;height:98px}.solar-core .core-logo{font-size:45px}.planet-label{width:125px;padding:8px}.planet-label b{font-size:9px}.planet-label small{font-size:7px}.planet-sphere{width:37px;height:37px}}
@media(prefers-reduced-motion:reduce){.solar-stage *, .solar-stage .orbit, .solar-stage .solar-planet{animation:none!important;transition:none!important}.solar-planet{opacity:1;transform:translate3d(-50%,-50%,0) scale(.78);}.planet-web{left:29%;top:24%}.planet-ai{left:68%;top:76%}.planet-growth{left:72%;top:27%}}