@charset "UTF-8";
:root {
  color-scheme: dark;
  --page:#0d1117; --page-raised:#111821; --page-soft:#151e2a;
  --ink:#f3f5f8; --muted:#c0c8d3; --quiet:#9aa7b8;
  --line:rgba(222,232,247,.15); --line-strong:rgba(222,232,247,.28);
  --accent:#b7c9ff; --accent-strong:#d3ddff; --accent-soft:rgba(133,164,235,.12); --accent-ink:#0d1524;
  --header:rgba(13,17,23,.78); --contact:#151f2c; --contact-ink:#f4f6fa; --contact-muted:#c0ccdc;
  --shadow:0 34px 80px rgba(0,0,0,.28); --ease-out:cubic-bezier(.23,1,.32,1);
  --gutter:clamp(24px,7.2vw,112px); --header-height:78px;
  font-family:"Segoe UI Variable","Segoe UI","Aptos",sans-serif;
  font-synthesis:none; text-rendering:optimizeLegibility; scroll-behavior:smooth; background:var(--page);
}
:root[data-theme="light"] {
  color-scheme:light;
  --page:#f2f4f7; --page-raised:#e9edf3; --page-soft:#e0e6ef;
  --ink:#131923; --muted:#3d4859; --quiet:#586579;
  --line:rgba(29,43,63,.16); --line-strong:rgba(29,43,63,.28);
  --accent:#34518b; --accent-strong:#213e77; --accent-soft:rgba(67,100,158,.1); --accent-ink:#f5f7fc;
  --header:rgba(242,244,247,.82); --contact:#e4eaf3; --contact-ink:#111a28; --contact-muted:#3d4b60;
  --shadow:0 34px 80px rgba(49,64,86,.13);
}
*{box-sizing:border-box}
html{min-width:320px;overflow-x:clip;scroll-padding-top:calc(var(--header-height) + 14px)}
body{min-width:0;width:100%;max-width:100%;margin:0;overflow-x:clip;background:radial-gradient(ellipse at 52% 14%,rgba(43,58,83,.13),transparent 43rem),var(--page);color:var(--ink);font-family:"Segoe UI Variable","Segoe UI","Aptos",sans-serif;font-size:16px;line-height:1.6;caret-color:var(--accent);transition:color .3s ease,background-color .3s ease}
:root[data-theme="light"] body{background:radial-gradient(ellipse at 8% 14%,rgba(115,143,193,.13),transparent 42rem),var(--page)}
::selection{color:var(--accent-ink);background:var(--accent)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--page)}
::-webkit-scrollbar-thumb{background:var(--line-strong);border:3px solid var(--page);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--quiet)}
a{color:inherit;text-decoration:none;text-underline-offset:.25em}
button{color:inherit;font:inherit}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:3px}
img,svg{display:block}
main{width:100%;max-width:100%;min-width:0;margin-inline:auto;overflow:clip}
section{scroll-margin-top:calc(var(--header-height) + 24px)}
.skip{position:fixed;z-index:100;top:10px;left:10px;padding:12px 16px;transform:translateY(-160%);color:var(--accent-ink);background:var(--accent);border-radius:6px}
.skip:focus{transform:translateY(0)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.arrow-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;flex:none}
.arrow-down{transform:none}

/* Navigation */
.site-header{position:sticky;z-index:50;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:var(--header-height);padding:0 var(--gutter);background:var(--header);border-bottom:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.brand{display:inline-flex;align-items:center;gap:11px;width:max-content;font-size:20px;font-weight:600;letter-spacing:-.045em}
.brand img{width:26px;height:26px;object-fit:contain}
.primary-nav{display:flex;align-items:center;gap:clamp(20px,3vw,42px)}
.primary-nav a,.site-footer nav a{color:var(--muted);font-size:13px;transition:color .2s ease}
.primary-nav a:hover,.site-footer nav a:hover{color:var(--ink)}
.header-actions{display:flex;justify-self:end;align-items:center;gap:20px}
.theme-toggle{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--muted);font-size:12px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.theme-toggle:hover{color:var(--ink);background:var(--accent-soft);border-color:var(--line-strong)}
.theme-toggle-icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round}
.theme-icon-moon{display:none}
:root[data-theme="light"] .theme-icon-sun{display:none}
:root[data-theme="light"] .theme-icon-moon{display:block}
.nav-contact{display:inline-flex;align-items:center;gap:10px;padding:8px 0;font-size:13px;color:var(--ink)}
.nav-contact .arrow-icon{transition:transform .25s var(--ease-out)}
.menu-toggle,.mobile-nav{display:none}

/* Scroll-held 3D opening */
.hero-track{position:relative;height:185svh;min-height:1050px}
.hero-sticky{position:sticky;top:var(--header-height);height:calc(100svh - var(--header-height));min-height:590px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse 50% 72% at 78% 48%,rgba(66,86,122,.16),transparent 70%),linear-gradient(115deg,transparent 0 47%,rgba(32,42,58,.16) 75%,transparent 100%)}
.hero-sticky::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 89% 65%,rgba(192,92,38,.09),transparent 25rem);pointer-events:none}
.hero-copy{position:absolute;z-index:2;top:28%;left:var(--gutter);width:min(54vw,740px);will-change:transform}
.hero-copy h1{display:flex;flex-direction:column;max-width:15ch;margin:0;font-size:clamp(58px,7.05vw,102px);line-height:.99;font-weight:350;letter-spacing:-.058em;text-wrap:balance}
.hero-copy h1>span:last-child{color:var(--muted)}
.hero-description{max-width:43ch;margin:27px 0 0;color:var(--muted);font-size:clamp(16px,1.25vw,18px);line-height:1.72}
.hero-actions{display:flex;align-items:center;gap:27px;margin-top:31px}
.button,.contact-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:54px;padding:0 21px;border-radius:5px;background:var(--accent);color:var(--accent-ink);font-size:14px;font-weight:600;transition:background .18s ease,transform .16s var(--ease-out)}
.text-link,.statement-link,.service-detail-link{display:inline-flex;align-items:center;gap:11px;width:max-content;color:var(--ink);font-size:14px;font-weight:500}
.text-link .arrow-icon,.statement-link .arrow-icon,.service-detail-link .arrow-icon{transition:transform .22s var(--ease-out)}
.visual{position:absolute;z-index:1;inset:0 0 0 auto;width:62%;height:100%;overflow:visible;pointer-events:none}
.visual::after{content:"";position:absolute;z-index:-1;width:60%;aspect-ratio:1;top:15%;right:3%;background:radial-gradient(circle,rgba(126,151,206,.1),rgba(126,151,206,.025) 42%,transparent 70%);filter:blur(18px)}
.visual canvas,.visual .fallback{position:absolute;inset:0;width:100%;height:100%}
.visual canvas{display:block}
.visual .fallback{display:none;width:36%;height:36%;top:29%;left:34%;object-fit:contain;opacity:.9}
.visual:not(.ready) .fallback{display:block}
.hero-bottom{position:absolute;z-index:3;right:var(--gutter);bottom:24px}
.scroll-cue{display:inline-flex;align-items:center;gap:11px;color:var(--quiet);font-size:12px}
.scroll-cue .arrow-icon{animation:cue-drift 2.2s ease-in-out infinite}
@keyframes cue-drift{0%,100%{transform:translateY(-2px) rotate(45deg)}50%{transform:translateY(4px) rotate(45deg)}}

/* Editorial statement */
.statement-section{
  --statement-surface:#fff;--statement-text:#111318;--statement-secondary:#777b82;--statement-copy:#70747c;--statement-separator:#d8dade;
  --statement-outline:#878b91;--statement-plane-back:#f5f5f6;--statement-plane-mid:#e7e8ea;--statement-plane-top:#fff;--statement-guide:#c1c4c9;--statement-line:#969aa1;
  --statement-mark:#24272c;--statement-connector:#a5a9af;--statement-node:#fff;--statement-node-top:#202329;--statement-node-top-outline:#16181d;--statement-node-side:#eceef0;--statement-node-outline:#8b9097;--statement-dot:#373b42;
  --statement-review-surface:#fff;--statement-review-side:#dfe3e9;--statement-review-badge:#2f63ee;--statement-review-badge-check:#fff;--statement-review-option:#fff;--statement-review-option-selected:#2f63ee;--statement-review-option-check:#fff;
  position:relative;z-index:1;display:block;min-height:780px;padding:clamp(56px,5.3vw,77px) 7.2% 54px;overflow:hidden;border-top:1px solid var(--statement-separator);background:var(--statement-surface);color:var(--statement-text)
}
:root[data-theme="dark"] .statement-section{
  --statement-surface:#111318;--statement-text:#f3f5f8;--statement-secondary:#9ca3ad;--statement-copy:#b3bac4;--statement-separator:#343b44;
  --statement-outline:#929ba6;--statement-plane-back:#161a20;--statement-plane-mid:#252b33;--statement-plane-top:#181d24;--statement-guide:#68717d;--statement-line:#a3abb6;
  --statement-mark:#f3f5f8;--statement-connector:#7c8591;--statement-node:#171b21;--statement-node-top:#edf0f4;--statement-node-top-outline:#edf0f4;--statement-node-side:#252b33;--statement-node-outline:#89919c;--statement-dot:#dce1e7;
}
.statement-section::before{content:none}
.statement-main h2,.services-intro h2,.tech-heading h2,.section-intro h2,.about-statement h2,.faq-intro h2,.contact-section h2{margin:0;font-weight:350;letter-spacing:-.052em;line-height:1.04;text-wrap:balance}
.statement-heading{max-width:11.5ch;margin:0 0 0 11.3%;font-size:clamp(54px,7.4vw,104px);font-weight:420;letter-spacing:-.067em;line-height:.93;text-wrap:initial}
.statement-heading>span{display:block;white-space:nowrap}
.statement-heading>span+span{color:var(--statement-secondary)}
.statement-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.26fr) minmax(0,1fr);margin-top:71px;margin-right:clamp(0px,2.4vw,35px)}
.statement-card{min-width:0;padding:0 clamp(24px,3.2vw,48px) 11px}
.statement-card:first-child{padding-left:0}
.statement-card+.statement-card{border-left:1px solid var(--statement-separator)}
.statement-illustration{display:block;width:min(100%,300px);height:240px;margin:0 auto;overflow:visible}
.statement-plane,.statement-guide,.statement-ink,.statement-mark,.statement-connector,.statement-node,.statement-node-side,.statement-node-top,.statement-review-back,.statement-review-face,.statement-review-badge,.statement-review-badge-check,.statement-review-rule,.statement-review-option,.statement-review-option-check{vector-effect:non-scaling-stroke}
.statement-plane{stroke:var(--statement-outline);stroke-width:1.05;stroke-linejoin:round}
.statement-plane-back{fill:var(--statement-plane-back)}
.statement-plane-mid{fill:var(--statement-plane-mid);stroke:var(--statement-outline)}
.statement-plane-top{fill:var(--statement-plane-top);stroke:var(--statement-outline);stroke-width:1.2}
.statement-guide{fill:none;stroke:var(--statement-guide);stroke-width:1;stroke-dasharray:2 4}
.statement-ink{fill:none;stroke:var(--statement-line);stroke-width:1.1;stroke-linecap:round}
.statement-mark{fill:var(--statement-mark);stroke:none}
.statement-connector{fill:none;stroke:var(--statement-connector);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.statement-node{fill:var(--statement-node);stroke:var(--statement-node-outline);stroke-width:1.1;stroke-linejoin:round}
.statement-node-top{fill:var(--statement-node-top);stroke:var(--statement-node-top-outline);stroke-width:1.1;stroke-linejoin:round}
.statement-node-side{fill:var(--statement-node-side);stroke:var(--statement-node-outline);stroke-width:1.1;stroke-linejoin:round}
.statement-dot{fill:var(--statement-dot)}
.statement-illustration-review{width:min(100%,230px);height:auto;object-fit:contain}
.statement-review-back{fill:var(--statement-review-side);stroke:var(--statement-outline);stroke-width:1;stroke-linejoin:round}
.statement-review-face{fill:var(--statement-review-surface);stroke:var(--statement-outline);stroke-width:1;stroke-linejoin:round}
.statement-review-badge{fill:var(--statement-review-badge)}
.statement-review-badge-check{fill:none;stroke:var(--statement-review-badge-check);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.statement-review-rule{fill:none;stroke:var(--statement-line);stroke-width:1.15;stroke-linecap:round}
.statement-review-option{fill:var(--statement-review-option);stroke:var(--statement-outline);stroke-width:1.1}
.statement-review-option-selected{fill:var(--statement-review-option-selected);stroke:var(--statement-review-option-selected)}
.statement-review-option-check{fill:none;stroke:var(--statement-review-option-check);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.statement-copy{max-width:310px;margin-inline:auto}
.statement-card:first-child .statement-copy{margin-left:0}
.statement-card:nth-child(2) .statement-copy{padding-left:18px}
.statement-card:last-child .statement-copy{padding-left:56px}
.statement-card:first-child .statement-illustration{transform:translate(-18px,-23px) scale(1.02,.95);transform-origin:top center}
.statement-card:nth-child(2) .statement-illustration{width:min(100%,326px);transform:translateY(-3px) scaleY(.8);transform-origin:top center}
.statement-card:last-child .statement-illustration{width:min(100%,230px);transform:none}
.statement-copy h3{margin:0;color:var(--statement-text);font-size:clamp(21px,2vw,29px);font-weight:540;letter-spacing:-.045em;line-height:1.16}
.statement-copy p{max-width:33ch;margin:13px 0 0;color:var(--statement-copy);font-size:clamp(16px,1.36vw,20px);line-height:1.42}

/* Services: selected copy, one floating object, open service list */
.services-section{position:relative;padding:clamp(100px,12vw,170px) var(--gutter) clamp(90px,10vw,140px);background:radial-gradient(ellipse 43% 56% at 53% 53%,rgba(64,84,121,.15),transparent 75%),linear-gradient(180deg,rgba(23,32,44,.48),rgba(15,20,28,.2));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
:root[data-theme="light"] .services-section{background:radial-gradient(ellipse 43% 56% at 53% 53%,rgba(102,127,176,.13),transparent 75%),linear-gradient(180deg,rgba(222,230,241,.7),rgba(239,242,247,.18))}
.services-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.55fr);align-items:end;gap:6vw;margin:0 0 clamp(50px,7vw,94px)}
.services-intro h2{max-width:18ch;font-size:clamp(42px,5.4vw,76px)}
.services-intro p{max-width:38ch;margin:0 0 6px;color:var(--muted);font-size:16px;line-height:1.75}
.service-explorer{display:grid;grid-template-columns:minmax(220px,.86fr) minmax(360px,1.18fr) minmax(260px,.84fr);align-items:center;column-gap:clamp(28px,4.4vw,68px);min-height:600px}
.service-detail{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;min-height:360px;padding:4px 0}
.service-empty-state{display:flex;flex-direction:column;align-items:flex-start;margin:auto 0}
.service-map{width:min(100%,295px);height:auto;margin:0 0 29px;overflow:visible}
.service-map path{stroke:var(--line-strong);stroke-width:1.35}
.service-map circle{fill:var(--page);stroke:var(--accent);stroke-width:1.6}
.service-map path:last-child{stroke:var(--accent)}
.service-empty-state p{margin:0;font-size:clamp(36px,4vw,52px);font-weight:350;letter-spacing:-.05em;line-height:1.05}
.service-empty-state span{max-width:34ch;margin-top:17px;color:var(--muted);font-size:14px;line-height:1.65}
.service-detail-label{display:none;margin:0 0 16px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.service-detail-copy{display:none;margin:0;color:var(--ink);font-size:clamp(18px,1.7vw,23px);line-height:1.5;text-wrap:pretty}
.service-detail-list{display:none;width:100%;margin:23px 0 0;padding:0;list-style:none}
.service-detail-list li{position:relative;padding:9px 0 9px 20px;color:var(--muted);font-size:14px;line-height:1.5}
.service-detail-list li::before{content:"";position:absolute;top:18px;left:1px;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 1px 7px rgba(140,170,230,.3)}
.service-detail-link{display:none;margin-top:auto;padding:20px 0 7px;border-bottom:1px solid var(--line-strong)}
.service-explorer.has-selection .service-empty-state{position:absolute;opacity:0;visibility:hidden;transform:translateX(-12px);pointer-events:none}
.service-explorer.has-selection .service-detail-label{display:block}
.service-explorer.has-selection .service-detail-copy,.service-explorer.has-selection .service-detail-list{display:block}
.service-explorer.has-selection .service-detail-link{display:inline-flex}
.service-visual{position:relative;min-width:0;height:clamp(390px,44vw,610px);overflow:visible;isolation:isolate;transform:translateZ(0)}
.service-visual::before{content:"";position:absolute;z-index:-1;inset:8% -4%;background:radial-gradient(ellipse at 50% 50%,rgba(102,131,194,.13),transparent 64%);filter:blur(20px);opacity:.8}
.service-visual canvas{position:absolute;z-index:2;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .22s ease}
.service-visual.has-webgl #service-scene{opacity:1}
.service-stage-fallback{position:absolute;inset:0;display:grid;place-items:center}
.stage-form{position:relative;display:block;width:160px;height:180px;background:linear-gradient(135deg,#dbe3f1,#8492ab);border-radius:8px;box-shadow:25px 35px 50px rgba(0,0,0,.34);transform:rotate(-8deg)}
.form-commerce{width:158px;height:138px;border-radius:17px}
.form-followup{width:220px;height:9px;border-radius:20px;transform:rotate(-18deg)}
.form-automation{width:175px;height:175px;border:13px solid #c5d0e1;border-radius:50%;background:transparent}
.form-software{width:140px;height:150px;border-radius:18px}
.form-support{width:170px;height:170px;border:14px solid #c5d0e1;border-radius:50%;background:transparent}
.service-visual-shadow{position:absolute;z-index:1;lef
t:19%;right:12%;bottom:5%;height:12%;border-radius:50%;background:rgba(0,0,0,.16);filter:blur(33px);pointer-events:none}
.service-picker{display:flex;flex-direction:column;align-self:stretch;justify-content:center}
.service-choice{position:relative;display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:66px;padding:9px 0;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer}
.service-choice:first-child{border-top:1px solid var(--line)}
.service-choice strong{color:var(--muted);font-size:clamp(16px,1.5vw,21px);font-weight:500;letter-spacing:-.026em;transition:color .16s ease,transform .16s var(--ease-out)}
.service-arrow{width:15px;height:15px;fill:none;stroke:var(--quiet);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.65;transition:opacity .2s ease,transform .25s var(--ease-out),stroke .2s ease}
.service-choice:focus-visible strong,.service-choice.is-active strong{color:var(--ink)}
.service-choice:focus-visible .service-arrow,.service-choice.is-active .service-arrow{opacity:1;stroke:var(--accent)}
.service-choice.is-active{border-color:var(--accent)}
.service-choice.is-active::after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:1px;background:var(--accent)}
.services-note{margin:28px 0 0;color:var(--quiet);font-size:12px;letter-spacing:.01em}

/* The technologies ribbon shows tools, not compatibility promises. */
.tech-rail{position:relative;padding:clamp(110px,13vw,185px) 0 clamp(88px,10vw,140px);overflow:hidden}
.tech-heading{display:flex;align-items:end;justify-content:space-between;gap:42px;margin:0 var(--gutter) clamp(48px,6vw,76px)}
.tech-heading h2{max-width:19ch;font-size:clamp(44px,5.4vw,76px)}
.tech-heading p{max-width:52ch;margin:23px 0 0;color:var(--muted);font-size:16px;line-height:1.72}
.tech-index{padding-bottom:5px;color:var(--quiet);font-size:12px;letter-spacing:.15em;white-space:nowrap}
.tech-marquee{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tech-marquee::before,.tech-marquee::after{content:"";position:absolute;z-index:2;top:0;bottom:0;width:clamp(35px,8vw,112px);pointer-events:none}
.tech-marquee::before{left:0;background:linear-gradient(90deg,var(--page),transparent)}
.tech-marquee::after{right:0;background:linear-gradient(270deg,var(--page),transparent)}
.tech-track{display:flex;width:max-content;animation:tech-flow 54s linear infinite}
.tech-sequence{display:flex;flex:none;align-items:stretch;gap:0;margin:0;padding:0;list-style:none}
.tech-chip{position:relative;display:flex;align-items:center;gap:16px;min-width:205px;min-height:100px;padding:16px 27px;color:var(--quiet);border-right:1px solid var(--line);font-size:15px;font-weight:500;letter-spacing:-.015em;transition:color .28s ease,background .28s ease}
.tech-chip::before{content:"";position:absolute;z-index:1;left:27px;width:34px;height:34px;background:var(--logo-color);opacity:0;-webkit-mask:var(--logo-mask) center/contain no-repeat;mask:var(--logo-mask) center/contain no-repeat;transition:opacity .22s ease,transform .28s var(--ease-out);transform:scale(.82)}
.tech-chip img{width:34px;height:34px;flex:none;object-fit:contain;filter:grayscale(1);opacity:.58;transition:opacity .2s ease}:root:not([data-theme="light"]) .tech-chip img{filter:grayscale(1) brightness(0) invert(.76)}
@keyframes tech-flow{to{transform:translateX(-50%)}}

/* One timeline connects the four project stages. */
.process-section{position:relative;padding:clamp(112px,14vw,190px) var(--gutter) clamp(100px,12vw,160px);overflow:hidden;background:radial-gradient(ellipse 60% 58% at 4% 30%,rgba(71,104,174,.12),transparent 73%),linear-gradient(128deg,rgba(18,26,37,.92),rgba(13,17,23,.75));border-top:1px solid var(--line)}
:root[data-theme="light"] .process-section{background:radial-gradient(ellipse 60% 58% at 4% 30%,rgba(112,141,193,.14),transparent 73%),linear-gradient(128deg,rgba(228,234,243,.98),rgba(239,242,247,.76))}
.section-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.54fr);align-items:end;gap:7vw}
.section-intro h2{max-width:16ch;font-size:clamp(46px,5.7vw,80px)}
.section-intro>p{max-width:41ch;margin:0 0 6px;color:var(--muted);font-size:16px;line-height:1.75}
.process-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3.6vw,52px);margin:clamp(85px,10vw,140px) 0 0;padding:0;list-style:none}
.process-steps::before{content:"";position:absolute;top:8px;right:0;left:0;height:1px;background:linear-gradient(90deg,var(--accent),var(--accent) 66%,var(--line-strong));transform-origin:left center}
.process-step{position:relative;display:flex;flex-direction:column;min-width:0;padding-top:38px}
.process-index{position:absolute;top:35px;right:0;color:var(--quiet);font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.12em}
.process-node{position:absolute;top:0;left:0;width:16px;height:16px;border:1px solid var(--accent);border-radius:50%;background:var(--page-raised);box-shadow:0 0 0 5px var(--page-raised),0 4px 14px rgba(80,112,174,.22);transition:transform .18s var(--ease-out),background .18s ease}
.process-step h3{max-width:16ch;margin:22px 0 10px;font-size:clamp(18px,1.7vw,23px);font-weight:550;letter-spacing:-.035em}
.process-step p{max-width:31ch;margin:0;color:var(--muted);font-size:14px;line-height:1.72}
.process-note{margin:55px 0 0;padding-top:18px;border-top:1px solid var(--line);color:var(--quiet);font-size:13px}

/* The independent, direct nature of the work. */
.about-section{position:relative;display:grid;grid-templa
te-columns:minmax(300px,1.1fr) minmax(170px,.52fr) minmax(260px,.8fr);align-items:center;gap:clamp(34px,6vw,90px);padding:clamp(112px,14vw,190px) var(--gutter);overflow:hidden;border-top:1px solid var(--line)}
.about-section::before{content:"";position:absolute;z-index:-1;top:-15%;right:15%;width:44vw;height:44vw;background:radial-gradient(circle,rgba(74,100,151,.12),transparent 68%);filter:blur(14px)}
.about-statement h2{max-width:15ch;font-size:clamp(46px,4.8vw,68px)}
.about-statement>p,.about-detail>p{margin:24px 0 0;color:var(--muted);font-size:16px;line-height:1.78}
.about-statement>p{max-width:43ch}
.about-portrait{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px}
.about-symbol{display:grid;place-items:center;width:clamp(120px,13vw,178px);aspect-ratio:1;margin-bottom:27px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 71%)}
.about-symbol img{width:56%;height:56%;object-fit:contain;opacity:.96}
.about-portrait-name{margin:0;font-size:16px;font-weight:600;letter-spacing:-.02em}
.about-portrait-role{margin:3px 0 0;color:var(--quiet);font-size:13px}
.about-detail{align-self:end;padding-bottom:4px}
.about-detail>p{margin-top:0}
.about-detail .text-link{margin-top:27px;padding-bottom:8px;border-bottom:1px solid var(--line-strong)}

/* FAQ */
.faq-section{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:clamp(50px,9vw,135px);padding:clamp(110px,13vw,175px) var(--gutter);border-top:1px solid var(--line);background:var(--page-raised)}
.faq-intro{position:sticky;top:calc(var(--header-height) + 38px);align-self:start}
.faq-intro h2{max-width:14ch;font-size:clamp(44px,5vw,68px)}
.faq-intro>p{max-width:36ch;margin:24px 0 0;color:var(--muted);font-size:15px;line-height:1.76}
.faq-list{border-top:1px solid var(--line-strong)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 0;color:var(--ink);cursor:pointer;list-style:none;font-size:clamp(17px,1.65vw,21px);font-weight:500;letter-spacing:-.027em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";width:12px;height:12px;flex:none;margin-right:5px;border-right:1px solid var(--quiet);border-bottom:1px solid var(--quiet);transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease-out),border-color .2s ease}
.faq-list details[open] summary::after{border-color:var(--accent);transform:rotate(225deg) translate(-2px,-1px)}
.faq-list summary:hover{color:var(--accent)}
.faq-list details p{max-width:66ch;margin:-2px 28px 24px 0;color:var(--muted);font-size:15px;line-height:1.75}

/* Contact closes with a full color field. */
.contact-section{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:7vw;row-gap:32px;padding:clamp(74px,9vw,125px) var(--gutter);overflow:hidden;background:radial-gradient(ellipse 54% 130% at 88% 54%,rgba(108,136,196,.2),transparent 68%),linear-gradient(115deg,#182332,var(--contact));color:var(--contact-ink)}
:root[data-theme="light"] .contact-section{background:radial-gradient(ellipse 54% 130% at 88% 54%,rgba(124,153,213,.25),transparent 68%),linear-gradient(115deg,#e3eaf4,var(--contact))}
.contact-section::after{content:"";position:absolute;top:50%;right:-8vw;width:38vw;aspect-ratio:1;border:1px solid rgba(192,210,246,.14);border-radius:50%;transform:translateY(-50%);box-shadow:0 0 0 40px rgba(192,210,246,.025),0 0 0 80px rgba(192,210,246,.018);pointer-events:none}
.contact-section>div,.contact-cta,.contact-number{position:relative;z-index:1}
.contact-section h2{max-width:17ch;font-size:clamp(48px,6.3vw,88px)}
.contact-section>div>p{max-width:58ch;margin:24px 0 0;color:var(--contact-muted);font-size:16px;line-height:1.75}
.contact-cta{min-width:230px;justify-self:end;background:var(--accent);color:var(--accent-ink)}
.contact-number{grid-column:1/-1;justify-self:end;margin:-13px 0 0;color:var(--contact-muted);font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.05em}
.site-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;min-height:106px;padding:20px var(--gutter);border-top:1px solid var(--line)}
.site-footer .brand{font-size:17px}
.site-footer .brand img{width:22px;height:22px}
.site-footer>p{margin:0;color:var(--quiet);font-size:12px}
.site-footer nav{display:flex;justify-self:end;max-width:100%;flex-wrap:wrap;gap:10px clamp(14px,2.3vw,30px)}
@media(max-width:900px){.site-footer{grid-template-columns:1fr;justify-items:start;gap:12px}.site-footer nav{justify-self:start}.site-footer>p{grid-row:auto}}

/* Individual entrances are progressive enhancement; the page is readable by default. */
[data-reveal]{opacity:1}
.service-choice{transition:border-color .16s ease,transform .16s var(--ease-out)}
.mobile-nav{transform-origin:right top}
.tech-track{animation-play-state:paused}
.motion-ready .tech-track[data-motion-running="true"]{animation-play-state:running}
@media(hover:hover) and (pointer:fine){
  .button:hover,.contact-cta:hover{transform:translateY(-2px);background:var(--accent-strong)}
  .nav-contact:hover .arrow-icon,.text-link:hover .arrow-icon,.statement-link:hover .arrow-icon,.service-detail-link:hover .arrow-icon{transform:translate(3px,-3px)}
  .service-choice:hover strong{color:var(--ink);transform:translateX(3px)}
  .service-choice:hover .service-arrow{opacity:1;stroke:var(--accent);transform:translate(2px,-2px)}
  .motion-ready .tech-marquee:hover .tech-track{animation-play-state:paused}
  .tech-chip:hover{color:var(--ink);background:var(--accent-soft)}
  .tech-chip:hover::before{opacity:1;transform:scale(1)}
  .tech-chip:hover img{opacity:0}
  .process-step:hover .process-node{transform:scale(1.16);background:var(--accent)}
}
:root[data-input="keyboard"]{scroll-behavior:auto}
:root[data-input="keyboard"] *,
:root[data-input="keyboard"] *::before,
:root[data-input="keyboard"] *::after{transition-duration:0s!important;transition-delay:0s!important}
:root[data-input="keyboard"] .tech-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  :root{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .tech-track{animation:none}
}

/* Responsive compositions */
@media(max-width:1100px){
  :root{--gutter:clamp(28px,5.2vw,58px)}
  .site-header{grid-template-columns:auto 1fr auto}
  .primary-nav{justify-self:center;gap:20px}
  .hero-copy{width:min(56vw,670px)}
  .hero-copy h1{font-size:clamp(56px,7.4vw,82px)}
  .service-explorer{grid-template-columns:minmax(200px,.83fr) minmax(290px,1fr) minmax(240px,.88fr);column-gap:25px}
  .service-visual{height:490px}
  .service-choice{min-height:60px}
  .service-choice strong{font-size:17px}
  .about-section{grid-template-columns:minmax(260px,1fr) minmax(140px,.46fr) minmax(235px,.9fr);gap:30px}
}
@media(max-width:820px){
  :root{--header-height:70px;--gutter:6vw}
  .site-header{grid-template-columns:1fr auto}
  .primary-nav{display:none}
  .header-actions{gap:14px}
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;padding:7px;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer}
  .menu-toggle span{width:100%;height:1px;background:var(--ink);transition:transform .2s ease}
  .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
  .mobile-nav:not([hidden]){position:fixed;z-index:49;top:var(--header-height);right:0;left:0;display:flex;flex-direction:column;gap:0;padding:12px var(--gutter) 24px;background:var(--header);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}
  .mobile-nav a{padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:16px}
  .mobile-nav .mobile-contact{display:flex;justify-content:space-between;align-items:center;color:var(--accent);border-bottom:0}
  .header-actions .nav-contact{display:none}
  .hero-track{min-height:940px;height:170svh}
  .hero-sticky{min-height:610px}
  .hero-copy{top:18%;width:min(73vw,620px)}
  .hero-copy h1{font-size:clamp(58px,9.4vw,84px)}
  .visual{top:20%;right:-10%;width:72%;height:80%;opacity:.58}
  .statement-section{min-height:740px;padding:80px 6vw 60px}
  .statement-heading{max-width:none;margin-left:0;font-size:clamp(54px,7.4vw,78px)}
  .statement-heading>span{white-space:normal}
  .statement-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:48px;margin-right:0}
  .statement-card{padding-inline:22px;padding-bottom:0}
  .statement-card:last-child{grid-column:1/-1;margin-top:28px;padding-top:28px;border-top:1px solid var(--statement-separator);border-left:0}
  .statement-illustration{width:min(100%,280px);height:190px;margin-bottom:16px}
  .statement-card:first-child .statement-illustration{transform:none}
  .statement-card:last-child .statement-illustration-review{width:min(100%,230px);height:auto;margin:0 auto 16px;transform:none}
  .statement-card:nth-child(2) .statement-illustration{width:min(100%,280px);transform:none}
  .statement-card:nth-child(2) .statement-copy,.statement-card:last-child .statement-copy{padding-left:0}
  .services-intro{grid-template-columns:1fr;gap:20px}
  .service-explorer{grid-template-columns:minmax(0,1fr) minmax(230px,.85fr);grid-template-areas:"visual picker" "detail picker";gap:0 32px;min-height:0}
  .service-visual{grid-area:visual;height:clamp(340px,58vw,490px)}
  .service-detail{grid-area:detail;min-height:290px;padding:20px 0 0}
  .service-empty-state{margin:0}
  .service-map{width:230px;margin-bottom:18px}
  .service-empty-state p{font-size:39px}
  .service-picker{grid-area:picker;justify-content:center}
  .service-choice{min-height:62px}
  .service-choice strong{font-size:17px}
  .tech-heading{align-items:start;flex-direction:column}
  .tech-index{padding:0}
  .section-intro{grid-template-columns:1fr;gap:24px}
  .process-steps{gap:21px}
  .process-step h3{font-size:18px}
  .process-step p{font-size:13px}
  .about-section{grid-template-columns:minmax(0,1fr) minmax(150px,.6fr);gap:40px}
  .about-statement{grid-column:1}
  .about-portrait{grid-column:2;grid-row:1}
  .about-detail{grid-column:1/-1;max-width:65ch}
  .faq-section{grid-template-columns:1fr;gap:44px}
  .faq-intro{position:static}
  .faq-intro h2{max-width:14ch}
  .contact-section{grid-template-columns:1fr;gap:30px}
  .contact-cta{justify-self:start}
  .contact-number{grid-column:1;justify-self:start;margin-top:-18px}
  .site-footer{grid-template-columns:1fr auto}
  .site-footer>p{grid-column:1/-1;grid-row:2}
  .site-footer nav{grid-column:1/-1;grid-row:3;justify-self:start;flex-wrap:wrap}
}
@media(max-width:560px){
  :root{--gutter:22px;--header-height:66px}
  .site-header{padding:0 var(--gutter)}
  .brand{font-size:18px}
  .brand img{width:24px;height:24px}
  .theme-toggle{gap:0;width:39px;height:39px;justify-content:center;padding:0}
  .theme-toggle-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .header-actions{gap:9px}
  .hero-track{height:155svh;min-height:860px}
  .hero-sticky{min-height:580px;height:calc(100svh - var(--header-height))}
  .hero-copy{top:11%;left:var(--gutter);width:calc(100% - var(--gutter)*2)}
  .hero-copy h1{max-width:15ch;font-size:clamp(46px,10.2vw,62px);line-height:1}
  .hero-description{max-width:37ch;margin-top:19px;font-size:15px;line-height:1.65}
  .hero-actions{flex-wrap:wrap;gap:16px 21px;margin-top:23px}
  .button{min-height:49px;padding:0 15px;font-size:13px}
  .text-link{font-size:13px}
  .visual{top:39%;right:-15%;bottom:0;width:112%;height:61%;opacity:.88}
  .hero-bottom{right:var(--gutter);bottom:17px}
  .scroll-cue{font-size:12px}
  .statement-section{min-height:0;padding:76px var(--gutter) 68px}
  .statement-heading{max-width:none;margin:0;font-size:clamp(38px,10vw,50px);line-height:.98}
  .statement-heading>span{white-space:normal}
  .statement-grid{grid-template-columns:1fr;margin-top:36px}
  .statement-card,.statement-card:first-child{display:grid;grid-template-columns:94px minmax(0,1fr);align-items:center;gap:17px;padding:19px 0}
  .statement-card+.statement-card{border-top:1px solid var(--statement-separator);border-left:0}
  .statement-card:last-child{grid-column:auto;margin-top:0;padding-top:19px}
  .statement-illustration{width:94px;height:100px;margin:0;transform:none!important}
  .statement-illustration-review{width:94px;height:auto;margin:0;transform:none!important}
  .statement-copy{max-width:none;margin:0}
  .statement-copy h3{font-size:20px}
  .statement-copy p{margin-top:8px;font-size:15px}
  .services-section{padding:89px var(--gutter) 76px}
  .services-intro{margin-bottom:27px}
  .services-intro h2{max-width:14ch;font-size:clamp(38px,9.5vw,50px)}
  .services-intro p{font-size:14px}
  .service-explorer{grid-template-columns:1fr;grid-template-areas:"picker" "visual" "detail";gap:0}
  .service-picker{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-self:auto}
  .service-choice{min-height:62px;border-bottom:1px solid var(--line)}
  .service-choice:nth-child(2){border-top:1px solid var(--line)}
  .service-choice strong{font-size:14px;line-height:1.35}
  .service-arrow{width:12px;height:12px}
  .service-visual{height:min(91vw,375px);min-height:310px;margin:2px -12px 0}
  .service-detail{min-height:260px;padding-top:14px}
  .service-empty-state{width:100%}
  .service-map{wid
th:min(70%,230px)}
  .service-empty-state p{font-size:36px}
  .service-empty-state span{font-size:13px}
  .service-detail-copy{font-size:18px}
  .service-detail-list li{font-size:13px}
  .service-detail-link{margin-top:24px}
  .services-note{font-size:12px;line-height:1.5}
  .tech-rail{padding:88px 0 80px}
  .tech-heading{gap:22px;margin:0 var(--gutter) 30px}
  .tech-heading h2{font-size:clamp(39px,9.4vw,51px)}
  .tech-heading p{margin-top:16px;font-size:14px}
  .tech-chip{min-width:165px;min-height:78px;gap:13px;padding:13px 18px;font-size:13px}
  .tech-chip img{width:29px;height:29px}
  .tech-chip::before{left:18px;width:29px;height:29px}
  .process-section{padding:91px var(--gutter) 82px}
  .section-intro h2{font-size:clamp(40px,9.6vw,52px)}
  .section-intro>p{font-size:14px}
  .process-steps{grid-template-columns:1fr;gap:0;margin-top:55px;padding-left:2px}
  .process-steps::before{top:0;bottom:0;left:7px;width:1px;height:auto;background:linear-gradient(180deg,var(--accent),var(--line-strong));transform:none}
  .process-step{min-height:154px;padding:0 0 28px 36px}
  .process-step:last-child{min-height:120px}
  .process-node{top:2px;left:0}
  .process-index{top:0;right:0}
  .process-step h3{max-width:22ch;margin:0 0 7px;font-size:18px}
  .process-step p{max-width:46ch;font-size:13px}
  .process-note{margin-top:24px;font-size:12px}
  .about-section{grid-template-columns:1fr;gap:26px;padding:87px var(--gutter)}
  .about-statement{grid-column:1}
  .about-statement h2{font-size:clamp(43px,10.4vw,56px)}
  .about-statement>p,.about-detail>p{margin-top:17px;font-size:14px}
  .about-portrait{grid-column:1;grid-row:auto;justify-self:start;flex-direction:row;justify-content:flex-start;flex-wrap:wrap;min-height:0;column-gap:15px}
  .about-symbol{width:58px;margin:0 2px 0 0}
  .about-symbol img{width:64%;height:64%}
  .about-portrait-name{align-self:end}
  .about-portrait-role{flex-basis:100%;margin:-17px 0 0 75px}
  .about-detail{grid-column:1}
  .about-detail .text-link{margin-top:20px;font-size:13px}
  .faq-section{gap:31px;padding:85px var(--gutter)}
  .faq-intro h2{font-size:clamp(41px,10vw,54px)}
  .faq-intro>p{margin-top:16px;font-size:14px}
  .faq-list summary{min-height:62px;padding:18px 0;font-size:16px}
  .faq-list details p{margin-bottom:19px;font-size:14px}
  .contact-section{gap:25px;padding:69px var(--gutter) 66px}
  .contact-section h2{font-size:clamp(43px,10.8vw,59px)}
  .contact-section>div>p{margin-top:17px;font-size:14px}
  .contact-cta{min-width:0;min-height:51px;font-size:13px}
  .contact-section::after{right:-42vw;width:85vw}
  .site-footer{gap:17px;padding:25px var(--gutter)}
  .site-footer>p{font-size:12px}
  .site-footer nav{gap:11px 19px}
  .site-footer nav a{font-size:12px}
}
@media(max-width:360px){
  .hero-copy h1{font-size:46px}
  .hero-actions{gap:14px}
  .button{gap:12px}
  .service-picker{column-gap:12px}
  .service-choice strong{font-size:13px}
  .site-footer nav{gap:10px 14px}
  .statement-heading{font-size:clamp(30px,10vw,36px)}
}

/* Opening scene: match the supplied Astroly reference. */
.site-header{position:sticky;top:0;display:flex;justify-content:space-between;min-height:60px;padding:0 clamp(24px,6.45vw,92px) 0 clamp(24px,6.45vw,92px);padding-right:clamp(24px,4.4vw,66px);background:#080a0e;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.brand{gap:0;font-size:29px;font-weight:400;letter-spacing:-.045em}
.brand img{display:none}
.primary-nav{margin-left:auto;gap:clamp(22px,2.8vw,36px)}
.primary-nav a{color:#c5cbd6;font-size:12px;font-weight:400}
.header-actions{margin-left:38px;gap:0}
.theme-toggle{position:relative;justify-content:center;width:54px;height:44px;padding:0;border:0;border-radius:99px;background:transparent;color:#aeb8ca}
.theme-toggle:hover{background:transparent;border-color:transparent;color:#f4f6fa}
.theme-toggle-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.theme-switch-track{position:relative;display:block;width:53px;height:26px;border:1px solid rgba(191,204,226,.24);border-radius:99px;background:rgba(10,13,19,.34);transition:background .25s ease,border-color .25s ease}
.theme-switch-knob{position:absolute;z-index:2;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#f3f5fa;box-shadow:0 1px 5px rgba(0,0,0,.28);transition:transform .22s var(--ease-out),background .18s ease}
.theme-switch-sun,.theme-switch-moon{position:absolute;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.theme-switch-sun{left:7px;top:6px;opacity:0;transition:opacity .2s ease}
.theme-switch-moon{right:6px;top:6px;opacity:.8;transition:opacity .2s ease}
.theme-toggle:hover .theme-switch-track{border-color:rgba(210,222,243,.42)}
.hero-track{height:185svh;min-height:1050px}
.hero-sticky{top:60px;height:calc(100svh - 60px);min-height:620px;background:radial-gradient(ellipse 42% 58% at 73% 48%,rgba(37,59,94,.25),transparent 73%),radial-gradient(ellipse 27% 20% at 62% 78%,rgba(18,87,209,.25),transparent 75%),radial-gradient(ellipse 15% 18% at 93% 78%,rgba(202,112,50,.19),transparent 76%),linear-gradient(142deg,#080a0e 0%,#0c1018 54%,#090b10 100%)}
.hero-sticky::before{z-index:0;inset:0;background:radial-gradient(ellipse 38% 52% at 73% 46%,rgba(53,77,117,.2),transparent 74%);pointer-events:none}
.hero-sticky::after{content:"";position:absolute;z-index:0;right:0;bottom:0;left:0;height:32%;border-top:1px solid rgba(159,183,221,.04);background:radial-gradient(ellipse 19% 48% at 59% 12%,rgba(24,103,239,.24),transparent 77%),radial-gradient(ellipse 12% 43% at 92% 12%,rgba(239,139,69,.2),transparent 77%),linear-gradient(180deg,rgba(7,9,13,.02),rgba(5,7,10,.72));pointer-events:none}
.hero-copy{top:19.5%;left:clamp(24px,6.45vw,92px);width:min(60vw,760px)}
.hero-copy h1{max-width:none;font-size:clamp(48px,5.2vw,72px);line-height:1.04;font-weight:350;letter-spacing:-.015em}
.hero-copy h1>span:last-child{color:#c5cfe1}
.hero-description{max-width:none;margin-top:37px;color:#b8c2d2;font-size:clamp(17px,1.55vw,20px);line-height:1.38}
.hero-description span{display:block}
.hero-actions{gap:29px;margin-top:37px}
.hero-actions .button.primary{width:263px;min-height:52px;padding:0 25px;gap:14px;border-radius:999px;background:#1d5fff;color:#f8faff;font-size:14px;font-weight:400;white-space:nowrap;box-shadow:0 8px 24px rgba(18,78,224,.14)}
.hero-actions .button .arrow-icon,.hero-actions .text-link .arrow-icon{transition:transform .16s var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .hero-actions .button.primary:hover{background:#174fce}
  .hero-actions .button:hover .arrow-icon,.hero-actions .text-link:hover .arrow-icon{transform:translateX(4px)}
}
.hero-actions .text-link{gap:13px;color:#c4ccda;font-size:14px;font-weight:400}
.visual{right:-14%;width:76%;height:100%;transform:translate(.3%,-6.8%);opacity:1}
.visual::after{z-index:0;top:40%;right:2%;width:88%;height:43%;aspect-ratio:auto;background:radial-gradient(ellipse 39% 67% at 32% 62%,rgba(22,103,238,.25),transparent 78%),radial-gradient(ellipse 26% 52% at 88% 61%,rgba(246,137,63,.2),transparent 78%),radial-gradient(ellipse 47% 61% at 56% 36%,rgba(50,73,117,.18),transparent 76%);filter:blur(20px)}
.visual canvas{z-index:1}
.hero-bottom{display:none}
:root[data-theme="light"] .site-header{color:#19202b;background:#eef1f6}
:root[data-theme="light"] .primary-nav a{color:#465267}
:root[data-theme="light"] .primary-nav a:hover{color:#101722}
:root[data-theme="light"] .theme-toggle{color:#344052}
:root[data-theme="light"] .theme-switch-track{border-color:rgba(34,47,68,.28);background:rgba(235,239,246,.8)}
:root[data-theme="light"] .theme-switch-knob{transform:translateX(26px);background:#182233}
:root[data-theme="light"] .theme-switch-sun{opacity:.8}
:root[data-theme="light"] .theme-switch-moon{opacity:0}
:root[data-theme="light"] .hero-sticky{background:radial-gradient(ellipse 42% 58% at 73% 48%,rgba(115,145,197,.2),transparent 73%),radial-gradient(ellipse 27% 20% at 62% 78%,rgba(33,101,213,.13),transparent 75%),radial-gradient(ellipse 15% 18% at 93% 78%,rgba(213,128,75,.1),transparent 76%),linear-gradient(142deg,#eef1f6 0%,#e5eaf2 54%,#f0f2f6 100%)}
:root[data-theme="light"] .hero-sticky::before{background:radial-gradient(ellipse 38% 52% at 73% 46%,rgba(72,103,165,.12),transparent 74%)}
:root[data-theme="light"] .hero-sticky::after{border-color:rgba(52,72,105,.1);background:radial-gradient(ellipse 19% 48% at 59% 12%,rgba(34,105,230,.12),transparent 77%),radial-gradient(ellipse 12% 43% at 92% 12%,rgba(231,139,79,.1),transparent 77%),linear-gradient(180deg,rgba(231,236,244,.01),rgba(217,224,235,.62))}
:root[data-theme="light"] .hero-copy h1{color:#171c24}
:root[data-theme="light"] .hero-copy h1>span:last-child{color:#58667d}
:root[data-theme="light"] .hero-description{color:#4e5a6d}
:root[data-theme="light"] .hero-actions .text-link{color:#303c50}
@media(max-width:1100px){
  .site-header{padding-left:clamp(28px,5.2vw,60px);padding-right:clamp(28px,4.4vw,58px)}
  .primary-nav{gap:23px}
  .header-actions{margin-left:27px}
  .hero-copy{width:min(62vw,710px)}
  .visual{right:-16%;width:81%}
}
@media(max-width:820px){
  .site-header{display:flex;min-height:60px;padding-inline:6vw}
  .primary-nav{display:none}
  .header-actions{margin-left:auto;gap:12px}
  .theme-toggle{width:48px}
  .theme-switch-track{transform:scale(.92);transform-origin:right center}
  .menu-toggle{width:44px;height:44px;padding:12px;border-radius:50%;border-color:rgba(191,204,226,.24)}
  .menu-toggle span{background:#d8deea}
  :root[data-theme="light"] .menu-toggle span{background:#273347}
  .mobile-nav:not([hidden]){top:60px}
  .hero-track{height:160svh;min-height:900px}
  .hero-sticky{min-height:620px}
  .hero-copy{top:15%;left:6vw;width:88vw}
  .hero-copy h1{font-size:clamp(43px,7.2vw,59px);line-height:1.03}
  .hero-description{margin-top:19px;font-size:17px;line-height:1.4}
  .hero-actions{gap:20px;margin-top:25px}
  .visual{top:37%;right:-23%;width:124%;height:63%;transform:none}
  .visual::after{top:35%;height:52%}
  .hero-sticky::after{height:30%}
}
@media(max-width:560px){
  .site-header{padding-inline:22px}
  .brand{font-size:25px}
  .hero-track{min-height:860px}
  .hero-sticky{display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;height:calc(100svh - 60px);min-height:680px}
  .hero-copy{position:relative;top:auto;left:auto;align-self:start;width:auto;margin:clamp(48px,9svh,76px) 22px 0}
  .hero-copy h1{font-size:clamp(35px,9vw,46px);line-height:1.04}
  .hero-description{max-width:36ch;margin-top:17px;font-size:15px;line-height:1.42}
  .hero-actions{flex-wrap:wrap;gap:15px 20px;margin-top:21px}
  .hero-actions .button.primary{width:auto;min-height:49px;padding:0 21px;font-size:14px}
  .hero-actions .text-link{min-height:44px;font-size:13px}
  .visual{position:relative;inset:auto;align-self:stretch;min-height:0;width:110%;height:100%;margin-left:-5%;transform:none}
  .hero-sticky::after{height:28%}
}
@media(max-width:360px){
  .hero-copy{margin-top:48px}
  .hero-copy h1{font-size:34px}
  .hero-actions .button.primary{padding-inline:17px;font-size:13px}
}

/* Press feedback is short and works on touch, without a lingering hover state. */
:root:not([data-input="keyboard"]) :is(.button,.contact-cta,.theme-toggle,.menu-toggle):active{transform:scale(.97);transition:transform .1s var(--ease-out)}
:root:not([data-input="keyboard"]) .service-choice:active{transform:scale(.985);transition-duration:.1s}
:root:not([data-input="keyboard"]) .faq-list summary:active{opacity:.75}

@media(prefers-reduced-motion:reduce){
  :root:not([data-input="keyboard"]) :is(.button,.contact-cta,.theme-toggle,.menu-toggle,.service-choice):active{transform:none}
  .button:hover,.contact-cta:hover,.service-choice:hover strong,.service-choice:hover .service-arrow,.process-step:hover .process-node{transform:none}
  .hero-actions .button:hover .arrow-icon,.hero-actions .text-link:hover .arrow-icon,.text-link:hover .arrow-icon,.statement-link:hover .arrow-icon,.service-detail-link:hover .arrow-icon{transform:none}
}

/* Rediseño fase 1: barra de vidrio, barra de secciones y portada centrada con titulares gruesos. */
:root{--header-height:60px;--local-nav:52px;font-family:"Segoe UI Variable","Segoe UI",-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Aptos",sans-serif}
body{font-family:inherit}
html{scroll-padding-top:calc(var(--header-height) + var(--local-nav) + 12px)}
section{scroll-margin-top:calc(var(--header-height) + var(--local-nav) + 12px)}
.faq-intro{top:calc(var(--header-height) + var(--local-nav) + 32px)}
.statement-main h2,.services-intro h2,.tech-heading h2,.section-intro h2,.about-statement h2,.faq-intro h2,.contact-section h2,.service-empty-state p{font-weight:650;letter-spacing:-.038em}
.statement-heading{font-weight:650;letter-spacing:-.05em}

.site-header{background:rgba(8,10,14,.66);border-bottom:1px solid transparent;backdrop-filter:saturate(1.6) blur(20px);-webkit-backdrop-filter:saturate(1.6) blur(20px);transition:background-color .3s ease,border-color .3s ease}
.site-header.is-scrolled{background:rgba(8,10,14,.8);border-bottom-color:var(--line)}
:root[data-theme="light"] .site-header{background:rgba(238,241,246,.72)}
:root[data-theme="light"] .site-header.is-scrolled{background:rgba(238,241,246,.88)}
.primary-nav a{position:relative;padding:6px 0}
.primary-nav a::after{content:"";position:absolute;right:0;bottom:0;left:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform .3s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.primary-nav a:hover::after{transform:scaleX(1);transform-origin:left center}}

.section-nav{position:fixed;z-index:48;top:var(--header-height);right:0;left:0;height:var(--local-nav);background:rgba(13,17,23,.74);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.6) blur(20px);-webkit-backdrop-filter:saturate(1.6) blur(20px);transform:translateY(calc(-100% - var(--header-height)));transition:transform .5s var(--ease-out)}
.section-nav.is-visible{transform:translateY(0)}
:root[data-theme="light"] .section-nav{background:rgba(242,244,247,.86)}
.section-nav-inner{display:flex;align-items:center;gap:clamp(18px,3vw,40px);height:100%;padding:0 clamp(24px,4.4vw,66px) 0 clamp(24px,6.45vw,92px)}
.section-nav-title{min-width:9ch;margin:0 auto 0 0;font-size:19px;font-weight:650;letter-spacing:-.01em}
.section-nav-links{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px)}
.section-nav-links a{position:relative;padding:15px 0;color:var(--muted);font-size:13px;white-space:nowrap;transition:color .2s ease}
.section-nav-links a::after{content:"";position:absolute;right:0;bottom:8px;left:0;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transition:transform .35s var(--ease-out)}
.section-nav-links a:hover,.section-nav-links a.is-active{color:var(--ink)}
.section-nav-links a.is-active::after{transform:scaleX(1)}
.section-nav-cta{flex:none;display:inline-flex;align-items:center;min-height:32px;padding:0 16px;border-radius:9999px;background:#1d5fff;color:#f8faff;font-size:12px;transition:background .18s ease,transform .16s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.section-nav-cta:hover{background:#174fce}}
.section-nav-progress{position:absolute;right:0;bottom:-1px;left:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left center}

.hero-sticky{background:radial-gradient(ellipse 46% 52% at 50% 72%,rgba(37,59,94,.3),transparent 74%),radial-gradient(ellipse 24% 20% at 38% 84%,rgba(18,87,209,.24),transparent 75%),radial-gradient(ellipse 16% 18% at 64% 84%,rgba(202,112,50,.17),transparent 76%),linear-gradient(180deg,#080a0e 0%,#0c1018 58%,#090b10 100%)}
.hero-sticky::before{background:radial-gradient(ellipse 40% 48% at 50% 66%,rgba(53,77,117,.22),transparent 74%)}
.hero-sticky::after{border-top:0;background:linear-gradient(180deg,rgba(7,9,13,0),rgba(5,7,10,.6))}
:root[data-theme="light"] .hero-sticky{background:radial-gradient(ellipse 46% 52% at 50% 72%,rgba(115,145,197,.22),transparent 74%),radial-gradient(ellipse 24% 20% at 38% 84%,rgba(33,101,213,.12),transparent 75%),radial-gradient(ellipse 16% 18% at 64% 84%,rgba(213,128,75,.1),transparent 76%),linear-gradient(180deg,#eef1f6 0%,#e5eaf2 58%,#f0f2f6 100%)}
:root[data-theme="light"] .hero-sticky::before{background:radial-gradient(ellipse 40% 48% at 50% 66%,rgba(72,103,165,.12),transparent 74%)}
:root[data-theme="light"] .hero-sticky::after{background:linear-gradient(180deg,rgba(231,236,244,0),rgba(217,224,235,.55))}
.hero-copy{top:clamp(34px,6.5svh,76px);right:0;left:0;display:flex;flex-direction:column;align-items:center;width:min(calc(100% - 2 * var(--gutter)),1120px);margin-inline:auto;text-align:center;transform-origin:50% 0}
.hero-copy h1{align-items:center;font-size:clamp(40px,min(6.1vw,9.4svh),92px);line-height:1.02;font-weight:650;letter-spacing:-.035em}
.hero-copy h1 .word{display:inline-block;overflow:clip;padding-bottom:.1em;margin-bottom:-.1em;vertical-align:top}
.hero-copy h1 .word-inner{display:inline-block}
.hero-description{margin-top:24px;font-size:clamp(17px,1.45vw,21px)}
.hero-actions{justify-content:center;margin-top:30px}
.hero-actions .button.primary{width:auto}
.visual{inset:0;width:auto;height:auto;transform:none}
.visual::after{top:46%;right:20%;left:20%;width:auto;height:48%}
.hero-capsule{position:absolute;z-index:3;right:0;bottom:clamp(18px,3.4svh,34px);left:0;display:flex;align-items:center;gap:22px;width:max-content;max-width:calc(100% - 2 * var(--gutter));margin-inline:auto;padding:7px 7px 7px 24px;border:1px solid var(--line);border-radius:9999px;background:rgba(17,24,33,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
:root[data-theme="light"] .hero-capsule{background:rgba(255,255,255,.66)}
.hero-capsule p{display:flex;flex-direction:column;margin:0;line-height:1.3}
.hero-capsule strong{font-size:14px;font-weight:600;letter-spacing:-.01em}
.hero-capsule span{color:var(--quiet);font-size:12px}
.hero-capsule-cta{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 18px;border-radius:9999px;background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:600;transition:background .18s ease}
@media(hover:hover) and (pointer:fine){.hero-capsule-cta:hover{background:var(--accent-strong)}.hero-capsule-cta:hover .arrow-icon{transform:translate(2px,-2px)}}
.hero-capsule-cta .arrow-icon{transition:transform .22s var(--ease-out)}

@media(max-width:1100px){
  .section-nav-title{display:none}
  .section-nav-links{margin-right:auto}
}
@media(max-width:820px){
  :root{--local-nav:46px}
  .section-nav-inner{gap:14px;padding:0 0 0 6vw}
  .section-nav-links{flex:1;min-width:0;gap:22px;overflow-x:auto;scrollbar-width:none;padding-right:6vw}
  .section-nav-links::-webkit-scrollbar{display:none}
  .section-nav-links a{padding:13px 0}
  .section-nav-links a::after{bottom:6px}
  .section-nav-cta{display:none}
  .hero-copy{top:clamp(30px,5svh,56px);width:calc(100% - 12vw)}
  .hero-copy h1{font-size:clamp(42px,8.4vw,64px)}
  .hero-description{font-size:17px}
}
@media(max-width:560px){
  .hero-sticky{display:block}
  .hero-copy{position:absolute;top:clamp(26px,5svh,48px);right:0;left:0;width:calc(100% - 44px);margin:0 auto}
  .hero-copy h1{font-size:clamp(36px,10.4vw,48px)}
  .hero-description{margin-top:16px;font-size:15px}
  .hero-actions{gap:12px 20px;margin-top:20px}
  .visual{position:absolute;inset:0;width:auto;height:auto;margin:0}
  .hero-capsule{bottom:14px;gap:12px;padding:6px 6px 6px 16px}
  .hero-capsule strong{font-size:12px}
  .hero-capsule span{font-size:11px}
  .hero-capsule-cta{min-height:36px;padding:0 13px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .section-nav{transition:none}
  .primary-nav a::after,.section-nav-links a::after{transition:none}
}
/* Rediseño fase 2: el mismo lenguaje de escenario para el resto de secciones.
   Titulares centrados, superficies redondeadas de 28px sin sombra y botones en píldora. */
.button,.contact-cta{border-radius:9999px}
.word{display:inline-block;overflow:clip;padding-bottom:.1em;margin-bottom:-.1em;vertical-align:top}
.word-inner{display:inline-block}

.statement-section{min-height:0;padding:clamp(96px,11vw,160px) var(--gutter) clamp(80px,9vw,130px)}
.statement-heading{max-width:none;margin:0 auto;font-size:clamp(46px,6.4vw,96px);line-height:1;text-align:center}
.statement-heading>span{white-space:normal}
.statement-grid{gap:20px;margin:clamp(48px,6vw,84px) 0 0}
.statement-card,.statement-card:first-child{display:flex;flex-direction:column;padding:clamp(28px,3vw,40px);border-radius:28px;background:var(--statement-plane-back)}
.statement-card+.statement-card{border-left:0}
:root[data-theme="dark"] .statement-card{background:#161a20;box-shadow:inset 0 0 0 1px var(--statement-separator)}
.statement-illustration{margin-bottom:28px}
.statement-card .statement-copy,.statement-card:first-child .statement-copy,.statement-card:nth-child(2) .statement-copy,.statement-card:last-child .statement-copy{max-width:none;margin:auto 0 0;padding-left:0}

.services-intro{grid-template-columns:1fr;justify-items:center;gap:22px;text-align:center}
.services-intro h2{max-width:20ch}
.services-intro p{max-width:54ch;margin:0}
.service-explorer{padding:clamp(28px,3.4vw,52px);border:1px solid var(--line);border-radius:28px;background:var(--page-raised)}
.service-choice,.service-choice:first-child{min-height:58px;margin-bottom:4px;padding:9px 18px;border:0;border-radius:16px;transition:background .2s ease,transform .16s var(--ease-out)}
.service-choice.is-active{background:var(--accent-soft)}
.service-choice.is-active::after{content:none}
.service-playback{display:flex;align-items:center;gap:16px;width:max-content;margin:24px auto 0;padding:7px 7px 7px 20px;border-radius:36px;background:rgba(210,210,215,.1)}
:root[data-theme="light"] .service-playback{background:rgba(29,43,63,.07)}
.service-playback[hidden]{display:none}
.service-dots{display:flex;align-items:center;gap:8px}
.service-dots span{position:relative;width:8px;height:8px;overflow:hidden;border-radius:9999px;background:var(--line-strong);transition:width .35s var(--ease-out)}
.service-dots span.is-current{width:30px}
.service-dots span.is-current::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform-origin:left center;animation:dot-fill var(--service-interval,6s) linear forwards}
.service-playback.is-paused .service-dots span.is-current::after{animation:none;transform:none}
@keyframes dot-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.service-pause{min-height:36px;padding:0 16px;border:0;border-radius:9999px;background:var(--page);color:var(--muted);font-size:12px;cursor:pointer;transition:color .16s ease}
.service-pause:hover{color:var(--ink)}
.services-note{text-align:center}

.tech-heading{flex-direction:column;align-items:center;text-align:center}
.tech-heading h2{max-width:none}
.tech-heading p{margin-inline:auto}
.tech-marquee{padding:8px 0;border:0}
.tech-sequence{gap:14px;padding-right:14px}
.tech-chip{min-width:0;min-height:68px;padding:12px 28px 12px 20px;border:1px solid var(--line);border-radius:9999px;background:var(--page-raised)}
.tech-chip::before{left:20px}

.section-intro{grid-template-columns:1fr;justify-items:center;gap:22px;text-align:center}
.section-intro h2{max-width:none}
.section-intro>p{max-width:54ch;margin:0}
.process-steps{gap:20px}
.process-steps::after{content:"";position:absolute;z-index:0;top:8px;right:0;left:0;height:1px;background:var(--line-strong)}
.process-steps::before{z-index:1;background:var(--accent);transform:scaleX(var(--process-draw,1))}
.process-step{padding:58px clamp(20px,2vw,28px) 30px;border-radius:28px;background:var(--page-raised)}
.process-node{z-index:2;left:clamp(20px,2vw,28px)}
.process-index{top:26px;right:clamp(20px,2vw,28px)}
.process-step h3{margin-top:0}
.process-step.is-reached .process-node{border-color:var(--accent);background:var(--accent)}
.process-note{text-align:center;border-top:0}

.about-portrait{min-height:330px;padding:40px 24px;border:1px solid var(--line);border-radius:28px;background:var(--page-raised)}
.about-facts{margin:26px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.about-facts li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.about-facts strong{font-size:15px;font-weight:600;letter-spacing:-.01em}
.about-facts span{color:var(--quiet);font-size:13px;text-align:right}

.faq-list{display:grid;gap:10px;border-top:0}
.faq-list details{padding:0 24px;border:1px solid var(--line);border-radius:20px;background:var(--page);transition:border-color .2s ease}
.faq-list details[open]{border-color:var(--line-strong)}
.faq-list details p{margin-right:0}

.contact-section{grid-template-columns:1fr;justify-items:center;row-gap:30px;margin:clamp(24px,3vw,40px) var(--gutter) clamp(40px,5vw,72px);padding:clamp(76px,9vw,132px) clamp(24px,5vw,80px);border-radius:28px;text-align:center}
.contact-section h2{max-width:18ch;margin-inline:auto}
.contact-section>div>p{margin-inline:auto}
.contact-cta{justify-self:center}
.contact-number{grid-column:auto;justify-self:center;margin:-12px 0 0}
.contact-section::after{right:50%;transform:translate(50%,-50%);width:52vw}

@media(max-width:820px){
  .statement-card:last-child{margin-top:0;padding-top:clamp(28px,3vw,40px);border-top:0}
  .statement-card{padding-inline:28px}
  .tech-heading{align-items:center}
  .process-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-steps::before,.process-steps::after{display:none}
  .about-portrait{min-height:260px}
}
@media(max-width:560px){
  .statement-section{padding:80px var(--gutter) 72px}
  .statement-heading{font-size:clamp(36px,10vw,48px)}
  .statement-grid{gap:12px}
  .statement-card,.statement-card:first-child,.statement-card:last-child{padding:20px;border-top:0;border-radius:22px}
  .statement-card+.statement-card{border-top:0}
  .statement-illustration{margin-bottom:0}
  .service-explorer{padding:20px 16px;border-radius:22px}
  .service-choice,.service-choice:first-child,.service-choice:nth-child(2){min-height:54px;margin:0;padding:8px 12px;border:0}
  .service-picker{gap:6px}
  .service-playback{gap:12px;padding-left:16px}
  .tech-chip{min-height:58px;padding:10px 22px 10px 16px}
  .tech-chip::before{left:16px}
  .process-steps{grid-template-columns:1fr;gap:12px;padding-left:0}
  .process-steps::before,.process-steps::after{display:block;top:0;bottom:0;left:7px;right:auto;width:1px;height:auto}
  .process-steps::before{background:var(--accent);transform:scaleY(var(--process-draw,1));transform-origin:center top}
  .process-steps::after{background:var(--line-strong)}
  .process-step,.process-step:last-child{min-height:0;margin-left:22px;padding:22px 20px 24px;border-radius:22px}
  .process-node{top:26px;left:-22px}
  .process-index{top:22px;right:20px}
  .about-portrait{min-height:0;padding:16px 18px;border-radius:22px}
  .about-portrait{display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:16px;row-gap:2px}
  .about-symbol{grid-row:1/3}
  .about-portrait-name{align-self:end}
  .about-portrait-role{align-self:start;margin:0}
  .faq-list details{padding:0 18px;border-radius:18px}
  .contact-section{margin:16px 12px 32px;padding:64px 22px;border-radius:24px}
  .contact-cta{justify-self:center}
  .contact-number{justify-self:center;margin-top:-14px}
}
@media(prefers-reduced-motion:reduce){
  .service-dots span,.service-dots span.is-current::after{transition:none;animation:none}
}

/* Portada v4: terciopelo negro. Lienzo plano sin brillos, titular serif, botones fantasma
   con borde fino y el isotipo como escultura de metal negro. La barra sigue el mismo lenguaje. */
:root{--hairline:#292d30}
:root[data-theme="light"]{--hairline:rgba(29,43,63,.18)}
.site-header,.site-header.is-scrolled{background:rgba(0,0,0,.82);border-bottom:1px solid var(--hairline);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}
:root[data-theme="light"] .site-header,:root[data-theme="light"] .site-header.is-scrolled{background:rgba(242,244,247,.86)}
.primary-nav a{color:#f0f0f0;font-size:14px;transition:color .15s ease-out}
.primary-nav a::after{content:none}
:root[data-theme="light"] .primary-nav a{color:#465267}
@media(hover:hover) and (pointer:fine){.primary-nav a:hover{color:#fff}:root[data-theme="light"] .primary-nav a:hover{color:#101722}}
.header-cta{display:inline-flex;align-items:center;min-height:34px;margin-right:14px;padding:0 14px;border:1px solid var(--hairline);border-radius:6px;color:#fff;font-size:14px;white-space:nowrap;transition:border-color .15s ease-out}
:root[data-theme="light"] .header-cta{color:#131923}
@media(hover:hover) and (pointer:fine){.header-cta:hover{border-color:#fff}:root[data-theme="light"] .header-cta:hover{border-color:#131923}}
.section-nav{background:rgba(0,0,0,.84);border-bottom-color:var(--hairline);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}
:root[data-theme="light"] .section-nav{background:rgba(242,244,247,.9)}
.section-nav-title{font-weight:500;letter-spacing:-.02em}
.section-nav-links a{font-size:14px}
.section-nav-cta{min-height:32px;border:1px solid var(--hairline);border-radius:6px;background:transparent;color:var(--ink);font-size:13px}
@media(hover:hover) and (pointer:fine){.section-nav-cta:hover{background:transparent;border-color:var(--ink)}}

.hero-track{height:160svh;min-height:1100px}
.hero-sticky,:root[data-theme="dark"] .hero-sticky{background:#000}
:root[data-theme="light"] .hero-sticky{background:#f2f4f7}
.hero-sticky::before,.hero-sticky::after,.visual::after{content:none}
.visual{inset:0;width:auto;height:auto;transform:none}
.hero-copy{top:50%;right:auto;left:max(var(--gutter),calc((100% - 1200px) / 2));align-items:flex-start;width:min(50vw,640px);margin:0;text-align:left;translate:0 -50%}
.hero-pill{display:inline-flex;align-items:center;gap:8px;margin-bottom:30px;padding:6px 12px 6px 14px;border:1px solid var(--hairline);border-radius:9999px;color:#f0f0f0;font-size:14px;transition:border-color .15s ease-out}
.hero-pill .arrow-icon{width:12px;height:12px;color:var(--accent)}
:root[data-theme="light"] .hero-pill{color:#303c50}
@media(hover:hover) and (pointer:fine){.hero-pill:hover{border-color:var(--ink)}}
.hero-copy h1{align-items:flex-start;color:#fff;font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;font-size:clamp(48px,min(6.4vw,11svh),96px);font-weight:400;line-height:1;letter-spacing:-.01em}
.hero-copy h1>span:last-child{color:#a1a4a5}
.hero-copy h1 .word{padding-bottom:.16em;margin-bottom:-.16em}
.hero-description{max-width:34ch;margin-top:28px;color:#a1a4a5;font-size:18px;line-height:1.55}
.hero-actions{justify-content:flex-start;gap:26px;margin-top:38px}
.hero-actions .button.primary{width:auto;min-height:44px;padding:0 16px;gap:10px;border:1px solid var(--hairline);border-radius:6px;background:transparent;color:#fff;font-size:15px;font-weight:500;box-shadow:none;transition:border-color .15s ease-out,transform .16s var(--ease-out)}
.hero-actions .text-link{color:#f0f0f0;font-size:15px}
:root[data-theme="light"] .hero-actions .button.primary{color:#131923}
@media(hover:hover) and (pointer:fine){
  .hero-actions .button.primary:hover{background:transparent;border-color:#fff}
  :root[data-theme="light"] .hero-actions .button.primary:hover{border-color:#131923}
}
@media(max-width:820px){
  .header-cta{display:none}
  .hero-track{height:150svh;min-height:980px}
  .hero-copy{top:clamp(28px,6svh,60px);left:6vw;width:88vw;translate:none}
  .hero-copy h1{font-size:clamp(46px,9vw,72px)}
  .hero-pill{margin-bottom:22px}
}
@media(max-width:560px){
  .hero-copy{top:clamp(22px,4svh,40px);left:22px;width:calc(100% - 44px)}
  .hero-copy h1{font-size:clamp(40px,11.6vw,54px)}
  .hero-pill{margin-bottom:18px;font-size:13px}
  .hero-description{margin-top:18px;font-size:16px}
  .hero-actions{gap:14px 22px;margin-top:24px}
}

/* Colores de marca #367ADF y #6A4DD4: palabras clave en los titulares y botones translúcidos. */
:root{--brand-blue:#367ADF;--brand-violet:#6A4DD4}
.key{font-style:normal}
.key-blue{color:var(--brand-blue)}
.key-violet{color:var(--brand-violet)}
:root:not([data-theme="light"]) .key-violet{color:#8a72f0}
:root :is(.button,.contact-cta,.hero-actions .button.primary,.header-cta,.section-nav-cta,.hero-pill,.service-pause){border:1px solid rgba(255,255,255,.16);background:linear-gradient(135deg,rgba(54,122,223,.28),rgba(106,77,212,.28));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 26px rgba(54,122,223,.14);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .16s var(--ease-out)}
:root[data-theme="light"] :is(.button,.contact-cta,.hero-actions .button.primary,.header-cta,.section-nav-cta,.hero-pill,.service-pause){border-color:rgba(54,122,223,.3);background:linear-gradient(135deg,rgba(54,122,223,.14),rgba(106,77,212,.14));color:#1f3a86;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 22px rgba(54,122,223,.1)}
@media(hover:hover) and (pointer:fine){
  :root :is(.button,.contact-cta,.hero-actions .button.primary,.header-cta,.section-nav-cta,.hero-pill,.service-pause):hover{border-color:rgba(255,255,255,.3);background:linear-gradient(135deg,rgba(54,122,223,.44),rgba(106,77,212,.44));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 34px rgba(106,77,212,.26)}
  :root[data-theme="light"] :is(.button,.contact-cta,.hero-actions .button.primary,.header-cta,.section-nav-cta,.hero-pill,.service-pause):hover{border-color:rgba(54,122,223,.5);background:linear-gradient(135deg,rgba(54,122,223,.24),rgba(106,77,212,.24))}
}
.hero-pill .arrow-icon{color:inherit}

/* Enfoque: tarjetas sobre el lienzo negro con borde fino, más contexto y figuras animadas. */
:root[data-theme="dark"] .statement-section{--statement-surface:#000;--statement-separator:#292d30;border-top-color:#292d30}
:root[data-theme="dark"] .statement-card{background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px #292d30}
.statement-card{transition:box-shadow .25s ease,transform .25s var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .statement-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(54,122,223,.55),0 18px 50px rgba(54,122,223,.1)}
}
.statement-copy .statement-step{margin:0 0 12px;color:var(--brand-blue);font:500 12px/1.3 "Cascadia Mono",Consolas,ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
.statement-points{margin:20px 0 0;padding:16px 0 0;list-style:none;border-top:1px solid var(--statement-separator)}
.statement-points li{position:relative;padding:5px 0 5px 18px;color:var(--statement-copy);font-size:15px;line-height:1.45}
.statement-points li::before{content:"";position:absolute;top:13px;left:2px;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--brand-blue),var(--brand-violet))}

/* 01: documentos que caen y se apilan uno encima de otro, en bucle. */
.statement-doc{animation:doc-fall 5.4s cubic-bezier(.3,.7,.2,1) infinite both}
.statement-doc-2{animation-delay:.5s}
.statement-doc-3{animation-delay:1s}
@keyframes doc-fall{0%{opacity:0;transform:translateY(-72px)}7%{opacity:1}13%{transform:translateY(5px)}17%,80%{opacity:1;transform:translateY(0)}90%,100%{opacity:0;transform:translateY(0)}}
/* 02: el módulo principal se conecta con los demás por líneas en movimiento. */
.statement-card-links .statement-connector{stroke-dasharray:3 4;animation:link-flow 1.2s linear infinite}
.statement-pulse{fill:none;stroke:var(--brand-blue);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:14 86;stroke-dashoffset:100;animation:link-pulse 2.4s cubic-bezier(.45,0,.3,1) infinite}
.statement-pulse-2{stroke:var(--brand-violet);animation-delay:.6s}
.statement-pulse-3{animation-delay:1.2s}
.statement-module-selected{transform-box:fill-box;animation:module-float 3.2s ease-in-out infinite}
.statement-card-links .statement-dot{transform-box:fill-box;transform-origin:center;animation:dot-ping 2.4s ease-out infinite}
.statement-dot-2{animation-delay:.6s!important}
.statement-dot-3{animation-delay:1.2s!important}
@keyframes link-flow{to{stroke-dashoffset:-14}}
@keyframes link-pulse{0%{stroke-dashoffset:100;opacity:0}10%{opacity:1}80%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes module-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes dot-ping{0%,60%{fill:var(--statement-dot);transform:scale(1)}72%{fill:var(--brand-blue);transform:scale(1.7)}100%{fill:var(--statement-dot);transform:scale(1)}}
/* 03: la tarjeta de chequeo se llena y se vacía una y otra vez. */
.statement-review-option{animation:option-fill 6s ease infinite both}
.statement-review-option-check{stroke-dasharray:100;animation:check-draw 6s ease infinite both}
.statement-review-option-2,.statement-review-check-2{animation-delay:.9s}
.statement-review-option-3,.statement-review-check-3{animation-delay:1.8s}
.statement-review-badge{transform-box:fill-box;transform-origin:center;animation:badge-fill 6s ease infinite both;animation-delay:2.7s}
.statement-review-badge-check{stroke-dasharray:100;animation:check-draw 6s ease infinite both;animation-delay:2.7s}
@keyframes option-fill{0%,8%{fill:var(--statement-review-option);stroke:var(--statement-outline)}14%,70%{fill:var(--brand-blue);stroke:var(--brand-blue)}80%,100%{fill:var(--statement-review-option);stroke:var(--statement-outline)}}
@keyframes check-draw{0%,9%{stroke-dashoffset:100}17%,70%{stroke-dashoffset:0}78%,100%{stroke-dashoffset:100}}
@keyframes badge-fill{0%,6%{fill:var(--statement-review-side);transform:scale(.86)}12%{transform:scale(1.08)}16%,62%{fill:var(--brand-violet);transform:scale(1)}72%,100%{fill:var(--statement-review-side);transform:scale(.86)}}
/* Off-screen figures rest; reduced motion shows each figure complete and still. */
.statement-card.is-resting svg *{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .statement-card svg *{animation:none!important}
  .statement-review-option{fill:var(--brand-blue);stroke:var(--brand-blue)}
  .statement-review-badge{fill:var(--brand-violet)}
}
@media(max-width:560px){
  .statement-points li{font-size:14px}
}
.statement-card .statement-copy,.statement-card:first-child .statement-copy,.statement-card:nth-child(2) .statement-copy,.statement-card:last-child .statement-copy{margin-top:0}
@media(min-width:561px){.statement-card .statement-illustration,.statement-card .statement-illustration-review{height:240px}}
@media(max-width:560px){.statement-card .statement-illustration{width:160px;height:140px;margin:0 auto 10px}.statement-card .statement-illustration-review{width:130px;height:auto}}

/* Servicios: tarjetas de selección fantasma que se tiñen al elegir, y ficha ampliada. */
.service-picker .service-choice,.service-picker .service-choice:first-child,.service-picker .service-choice:nth-child(2){margin:0 0 8px;padding:9px 16px;border:1px solid var(--hairline);border-radius:10px;background:transparent;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .16s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.service-picker .service-choice:hover{border-color:rgba(255,255,255,.32)}:root[data-theme="light"] .service-picker .service-choice:hover{border-color:rgba(54,122,223,.5)}}
.service-picker .service-choice.is-active{border-color:rgba(138,114,240,.65);background:linear-gradient(135deg,rgba(54,122,223,.32),rgba(106,77,212,.32));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 30px rgba(54,122,223,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.service-picker .service-choice.is-active strong{color:#fff}
.service-picker .service-choice.is-active .service-arrow{stroke:#fff;opacity:1}
:root[data-theme="light"] .service-picker .service-choice.is-active{border-color:rgba(54,122,223,.55);background:linear-gradient(135deg,rgba(54,122,223,.16),rgba(106,77,212,.16))}
:root[data-theme="light"] .service-picker .service-choice.is-active strong{color:#1f3a86}
:root[data-theme="light"] .service-picker .service-choice.is-active .service-arrow{stroke:#1f3a86}
:root[data-theme="dark"] .service-explorer{border-color:var(--hairline);background:rgba(0,0,0,.55)}
.service-detail-ideal,.service-detail-subhead,.service-detail-note{display:none}
.service-explorer.has-selection .service-detail-ideal,.service-explorer.has-selection .service-detail-subhead,.service-explorer.has-selection .service-detail-note{display:block}
.service-detail-ideal{margin:20px 0 0;color:var(--ink);font-size:15px;line-height:1.5}
.service-detail-ideal span:first-child,.service-detail-subhead{display:block;margin-bottom:4px;color:var(--brand-blue);font:500 11px/1.3 "Cascadia Mono",Consolas,ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.service-detail-subhead{margin:22px 0 0}
.service-explorer.has-selection .service-detail-list{margin-top:6px}
.service-detail-list li::before{background:linear-gradient(135deg,var(--brand-blue),var(--brand-violet));box-shadow:none}
.service-detail-note{margin:16px 0 0;padding-left:12px;border-left:2px solid var(--brand-violet);color:var(--quiet);font-size:13px;line-height:1.5}
@media(max-width:560px){
  .service-picker .service-choice,.service-picker .service-choice:first-child,.service-picker .service-choice:nth-child(2){margin:0;padding:8px 12px}
  .service-detail-ideal{font-size:14px}
}
.service-visual.has-webgl .service-stage-fallback{display:none}

/* Servicios en un solo contenedor: título, texto, explorador y recorrido comparten la misma caja. */
.services-section,:root[data-theme="light"] .services-section{padding:clamp(72px,8vw,120px) var(--gutter);border:0;background:var(--page)}
:root[data-theme="dark"] .services-section{background:#000}
.services-stage{padding:clamp(44px,5vw,76px) clamp(24px,4vw,60px) clamp(32px,4vw,52px);border:1px solid var(--hairline);border-radius:28px;background:linear-gradient(180deg,#0b0e14,#050608)}
:root[data-theme="light"] .services-stage{background:#fff}
.services-stage .services-intro{margin-bottom:clamp(36px,4vw,56px)}
.service-explorer,:root[data-theme="dark"] .service-explorer{padding:0;border:0;border-radius:0;background:transparent}
.service-visual{height:clamp(420px,46vw,640px)}
@media(max-width:560px){
  .services-section{padding:56px 12px}
  .services-stage{padding:36px 16px 28px;border-radius:22px}
  .service-explorer{padding:0}
  .service-visual{height:min(96vw,400px)}
}

/* Explorador: la figura llena su columna hasta rozar la información y la lista; el vidrio se enciende al pasar. */
.service-explorer{column-gap:clamp(12px,1.6vw,24px)}
@media(hover:hover) and (pointer:fine){.service-picker .service-choice:hover{border-color:rgba(138,114,240,.65);background:linear-gradient(135deg,rgba(54,122,223,.32),rgba(106,77,212,.32))}}
.service-picker .service-choice{text-decoration:none}

/* Página de cada servicio: mismo escenario negro, figura grande y la información ampliada. */
:root[data-theme="dark"] .service-page,:root[data-theme="dark"] .service-page .process-section{background:#000}
.service-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(24px,4vw,64px);min-height:calc(100svh - var(--header-height));padding:clamp(40px,6vw,96px) var(--gutter) clamp(32px,4vw,64px)}
.service-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:34px;color:var(--muted);font-size:14px;transition:color .15s ease-out}
.service-back:hover{color:var(--ink)}
.service-kicker{margin:0 0 14px;color:var(--brand-blue);font:500 12px/1.3 "Cascadia Mono",Consolas,ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.service-hero h1{margin:0;font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;font-size:clamp(46px,6vw,92px);font-weight:400;line-height:1;letter-spacing:-.01em}
.service-lead{max-width:34ch;margin:24px 0 0;color:var(--muted);font-size:clamp(17px,1.5vw,21px);line-height:1.5}
.service-hero .hero-actions{margin-top:34px}
.service-page-visual{height:clamp(380px,48vw,660px)}
.service-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:clamp(24px,4vw,56px) var(--gutter) clamp(72px,8vw,120px)}
.service-fact{padding:clamp(26px,3vw,38px);border:1px solid var(--hairline);border-radius:28px;background:rgba(255,255,255,.025)}
:root[data-theme="light"] .service-fact{background:#fff}
.service-fact .statement-step{margin:0 0 14px;color:var(--brand-blue);font:500 12px/1.3 "Cascadia Mono",Consolas,ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
.service-fact-lead{margin:0;color:var(--ink);font-size:clamp(18px,1.6vw,22px);line-height:1.45}
.service-fact .statement-points{margin-top:18px;--statement-separator:var(--hairline);--statement-copy:var(--muted)}
.service-fact .statement-step+.statement-points{margin-top:0;padding-top:0;border-top:0}
.service-process{border-top:1px solid var(--hairline)}
.service-others{padding:clamp(64px,7vw,104px) var(--gutter);border-top:1px solid var(--hairline);text-align:center}
.service-others h2{margin:0 0 28px;font-size:clamp(32px,3.6vw,52px);font-weight:650;letter-spacing:-.035em}
.service-others-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.service-other{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--hairline);border-radius:10px;color:var(--muted);font-size:15px;transition:background .2s ease,border-color .2s ease,color .2s ease}
.service-other:hover,.service-other.is-current{border-color:rgba(138,114,240,.65);background:linear-gradient(135deg,rgba(54,122,223,.32),rgba(106,77,212,.32));color:#fff}
:root[data-theme="light"] .service-other:hover,:root[data-theme="light"] .service-other.is-current{background:linear-gradient(135deg,rgba(54,122,223,.16),rgba(106,77,212,.16));color:#1f3a86}
@media(max-width:900px){
  .service-hero{grid-template-columns:1fr;min-height:0}
  .service-page-visual{height:min(80vw,440px)}
  .service-facts{grid-template-columns:1fr}
}
@media(max-width:560px){
  .service-hero{padding:28px 22px 12px}
  .service-back{margin-bottom:22px}
  .service-fact{border-radius:22px}
}
.service-hero .service-page-visual{grid-area:auto;width:100%;margin:0}

/* Tecnologías agrupadas: un solo bloque sobre negro, el título a la izquierda y dos filas
   de logos que corren en sentidos opuestos a la derecha. Sin información nueva. */
.tech-rail{padding:clamp(56px,6vw,96px) var(--gutter);border-top:1px solid var(--hairline)}
:root[data-theme="dark"] .tech-rail{background:#000}
.tech-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center;gap:clamp(24px,3.4vw,52px);padding:clamp(28px,3.2vw,48px);border:1px solid var(--hairline);border-radius:28px;background:linear-gradient(180deg,#0b0e14,#050608)}
:root[data-theme="light"] .tech-layout{background:#fff}
.tech-layout .tech-heading{flex-direction:column;align-items:flex-start;gap:22px;margin:0;text-align:left}
.tech-layout .tech-heading h2{max-width:13ch;font-size:clamp(34px,3.6vw,56px)}
.tech-layout .tech-heading p{max-width:40ch;margin:16px 0 0;font-size:15px}
.tech-marquees{display:grid;gap:12px;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.tech-marquees .tech-marquee{padding:0}
.tech-marquees .tech-marquee::before,.tech-marquees .tech-marquee::after{content:none}
.tech-marquee-reverse .tech-track{animation-direction:reverse}
.tech-marquees .tech-chip{min-height:58px;padding:9px 22px 9px 16px;font-size:14px}
.tech-marquees .tech-chip img{width:28px;height:28px}
.tech-marquees .tech-chip::before{left:16px;width:28px;height:28px}
:root[data-theme="dark"] .tech-marquees .tech-chip{background:rgba(255,255,255,.03);border-color:var(--hairline)}
@media(max-width:900px){
  .tech-layout{grid-template-columns:1fr}
  .tech-layout .tech-heading h2{max-width:16ch}
}
@media(max-width:560px){
  .tech-rail{padding:48px 12px}
  .tech-layout{padding:28px 0 24px;border-radius:22px}
  .tech-layout .tech-heading{padding:0 18px}
  .tech-marquees .tech-chip{min-height:50px}
}
.tech-layout .tech-heading h2{max-width:15ch;text-wrap:balance}

/* Proceso condensado: pasos en vertical a la izquierda y una ilustración por paso a la derecha. */
.process-section{padding:clamp(56px,6vw,96px) var(--gutter);border-top:1px solid var(--hairline)}
:root[data-theme="dark"] .process-section,:root[data-theme="dark"] .service-page .process-section{background:#000}
:root[data-theme="light"] .process-section{background:var(--page)}
.process-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(28px,3.4vw,52px);border:1px solid var(--hairline);border-radius:28px;background:linear-gradient(180deg,#0b0e14,#050608)}
:root[data-theme="light"] .process-layout{background:#fff}
.process-layout .section-intro{grid-template-columns:1fr;justify-items:start;gap:14px;text-align:left}
.process-layout .section-intro h2{font-size:clamp(34px,3.6vw,56px)}
.process-layout .section-intro>p{max-width:44ch;font-size:15px}
.hl{color:var(--ink);font-weight:600;background:linear-gradient(transparent 62%,rgba(54,122,223,.32) 62%)}
:root[data-theme="light"] .hl{background:linear-gradient(transparent 62%,rgba(54,122,223,.2) 62%)}
.process-layout .process-steps{display:grid;grid-template-columns:1fr;gap:6px;margin:28px 0 0;padding:0}
.process-layout .process-steps::after,.process-layout .process-steps::before{content:"";display:block;position:absolute;top:26px;bottom:26px;left:19px;right:auto;width:1px;height:auto}
.process-layout .process-steps::after{z-index:0;background:var(--line-strong)}
.process-layout .process-steps::before{z-index:1;background:linear-gradient(180deg,var(--brand-blue),var(--brand-violet));transform:scaleY(var(--process-draw,1));transform-origin:center top;transition:transform .6s var(--ease-out)}
.process-layout .process-step,.process-layout .process-step:last-child{min-height:0;margin:0;padding:13px 70px 13px 50px;border:1px solid transparent;border-radius:14px;background:transparent;outline-offset:2px;transition:background .25s ease,border-color .25s ease}
.process-layout .process-node{top:18px;left:12px;z-index:2;box-shadow:0 0 0 5px #08090d}
:root[data-theme="light"] .process-layout .process-node{box-shadow:0 0 0 5px #fff}
.process-layout .process-index{top:16px;right:18px}
.process-layout .process-step h3{max-width:none;margin:0 0 3px;font-size:clamp(17px,1.4vw,20px)}
.process-layout .process-step p{max-width:none;color:var(--quiet);font-size:14px;line-height:1.55}
.process-layout .process-step.is-active{border-color:rgba(138,114,240,.6);background:linear-gradient(135deg,rgba(54,122,223,.24),rgba(106,77,212,.24))}
:root[data-theme="light"] .process-layout .process-step.is-active{background:linear-gradient(135deg,rgba(54,122,223,.12),rgba(106,77,212,.12))}
.process-layout .process-step.is-active p{color:var(--muted)}
.process-layout .process-step.is-reached .process-node{border-color:var(--brand-blue);background:var(--brand-blue)}
.process-layout .process-step.is-active .process-node{border-color:var(--brand-violet);background:var(--brand-violet);transform:scale(1.15)}
.process-note{margin-top:22px;padding-top:0;text-align:center}

.process-stage{position:relative;align-self:stretch;min-height:clamp(320px,34vw,470px);border-radius:22px;background:radial-gradient(circle at 50% 46%,rgba(54,122,223,.12),transparent 66%)}
.process-art{position:absolute;inset:6%;width:88%;height:88%;opacity:0;visibility:hidden;overflow:visible}
.process-art.is-active,.process-stage:not(.is-ready) .process-art:first-child{opacity:1;visibility:visible}
.process-art *{vector-effect:non-scaling-stroke}
.pa-line,.pa-dim,.pa-accent,.pa-accent-dim,.pa-violet,.pa-violet-dim,.pa-check{fill:none;stroke-linecap:round;stroke-linejoin:round}
.pa-line{stroke:#c3c9d3;stroke-width:1.6}
.pa-dim{stroke:#6f7884;stroke-width:1.4}
.pa-dash{stroke-dasharray:3 5}
.pa-accent{stroke:#5b95ea;stroke-width:1.8}
.pa-accent-dim{stroke:rgba(91,149,234,.6);stroke-width:1.4}
.pa-violet{stroke:#8a72f0;stroke-width:1.8}
.pa-violet-dim{stroke:rgba(138,114,240,.5);stroke-width:1.2}
.pa-accent.pa-fill{fill:rgba(54,122,223,.16)}
.pa-check{stroke:#5b95ea;stroke-width:2.4;stroke-dasharray:100}
:root[data-theme="light"] .pa-line{stroke:#4d5868}
:root[data-theme="light"] .pa-dim{stroke:#9aa3b0}
:root[data-theme="light"] .pa-accent,:root[data-theme="light"] .pa-check{stroke:#367adf}
:root[data-theme="light"] .pa-violet{stroke:#6a4dd4}
.pa-bubble,.pa-stamp,.pa-badge,.pa-lid{transform-box:fill-box}
.pa-bubble-1{transform-origin:left bottom}
.pa-bubble-2{transform-origin:right bottom}
.pa-stamp{transform-origin:center;transform:rotate(-12deg)}
.pa-badge{transform-origin:center}
.pa-piece{transform:translateY(60px)}
.pa-lid-left{transform-origin:left center}
.pa-lid-right{transform-origin:right center}

/* Each illustration loops a short, readable story while its step is active. */
.is-playing .pa-bubble{animation:pa-pop 5s var(--ease-out) infinite both}
.is-playing .pa-bubble-2{animation-delay:.7s}
.is-playing .pa-lens{animation:pa-scan 2.6s ease-in-out infinite alternate}
.is-playing .pa-check-1,.is-playing .pa-check-2,.is-playing .pa-check-3,.is-playing .pa-check-4{animation:pa-tick 5s ease infinite both}
.is-playing .pa-check-2{animation-delay:.5s}
.is-playing .pa-check-3{animation-delay:1s}
.is-playing .pa-check-4{animation-delay:1.5s}
.is-playing .pa-stamp{animation:pa-stamp 5s var(--ease-out) infinite both;animation-delay:2.1s}
.is-playing .pa-block{animation:pa-drop 4.6s cubic-bezier(.3,.7,.2,1) infinite both}
.is-playing .pa-block-2{animation-delay:.5s}
.is-playing .pa-block-3{animation-delay:1s}
.is-playing .pa-piece{animation:pa-into 5s cubic-bezier(.3,.7,.2,1) infinite both}
.is-playing .pa-lid-left{animation:pa-lid-left 5s var(--ease-out) infinite both}
.is-playing .pa-lid-right{animation:pa-lid-right 5s var(--ease-out) infinite both}
.is-playing .pa-badge{animation:pa-badge 5s var(--ease-out) infinite both}
.is-playing .pa-badge-check{animation:pa-badge-check 5s ease infinite both}
@keyframes pa-pop{0%{opacity:0;transform:scale(.6)}10%,85%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(1)}}
@keyframes pa-scan{from{transform:translateX(0)}to{transform:translateX(180px)}}
@keyframes pa-tick{0%{stroke-dashoffset:100}12%,85%{stroke-dashoffset:0}95%,100%{stroke-dashoffset:100}}
@keyframes pa-stamp{0%{opacity:0;transform:scale(1.6) rotate(-24deg)}10%,62%{opacity:1;transform:scale(1) rotate(-12deg)}72%,100%{opacity:0;transform:scale(1) rotate(-12deg)}}
@keyframes pa-drop{0%{opacity:0;transform:translateY(-90px)}12%{opacity:1;transform:translateY(4px)}16%,80%{opacity:1;transform:translateY(0)}92%,100%{opacity:0;transform:translateY(0)}}
@keyframes pa-into{0%{opacity:0;transform:translateY(-70px)}10%{opacity:1}28%,88%{opacity:1;transform:translateY(60px)}100%{opacity:0;transform:translateY(60px)}}
@keyframes pa-lid-left{0%,30%{transform:rotate(-55deg)}46%,100%{transform:rotate(0)}}
@keyframes pa-lid-right{0%,30%{transform:rotate(55deg)}46%,100%{transform:rotate(0)}}
@keyframes pa-badge{0%,46%{opacity:0;transform:scale(.5)}56%{opacity:1;transform:scale(1.1)}62%,90%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes pa-badge-check{0%,54%{stroke-dashoffset:100}66%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
@media(prefers-reduced-motion:reduce){.process-art *{animation:none!important}.process-layout .process-steps::before{transition:none}}

@media(max-width:900px){
  .process-layout{grid-template-columns:1fr}
  .process-side{display:contents}
  .process-layout .section-intro{order:1}
  .process-stage{order:2;min-height:240px;background:radial-gradient(circle at 50% 46%,rgba(54,122,223,.14),transparent 66%),#090b10}
  :root[data-theme="light"] .process-stage{background:radial-gradient(circle at 50% 46%,rgba(54,122,223,.1),transparent 66%),#fff}
  .process-layout .process-steps{order:3;margin-top:4px}
}
@media(max-width:560px){
  .process-section{padding:48px 12px}
  .process-layout{gap:18px;padding:26px 14px;border-radius:22px}
  .process-stage{min-height:210px}
  .process-layout .process-step,.process-layout .process-step:last-child{padding:12px 44px 12px 46px}
  .process-layout .process-index{right:12px}
}

/* Portada animada en 3D: una sola pantalla, el lienzo transparente cubre el hero y el texto
   espera al final de la secuencia solo cuando el script corre (clase .hero-intro). */
.hero-track{height:auto;min-height:0}
.hero-sticky{position:relative;top:0;height:calc(100svh - var(--header-height));min-height:560px}
.visual{inset:0;width:auto;height:auto;transform:none}
.visual .fallback{top:26%;left:56%;width:34%;height:48%;object-fit:contain;opacity:1}
.hero-intro .hero-copy>*,.hero-intro .site-header{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.23,1,.32,1)}
.hero-intro .site-header{transform:translateY(-12px)}
.hero-intro .hero-copy>.is-in,.hero-intro .site-header.is-in{opacity:1;transform:none}
@media(max-width:760px){
  .hero-sticky{height:calc(100svh - var(--header-height));min-height:600px}
  .hero-copy,.hero-copy[style]{top:auto;bottom:clamp(28px,6svh,56px)}
  .visual .fallback{top:8%;left:30%;width:40%;height:34%}
}
@media(prefers-reduced-motion:reduce){
  .hero-intro .hero-copy>*,.hero-intro .site-header{opacity:1;transform:none;transition:none}
}
@media(min-width:761px) and (max-width:820px){.hero-copy{top:50%;left:6vw;width:50vw;translate:0 -50%}}

/* Nombre ASTROLY de la intro: delante del logo, emite un brillo suave y se desvanece en el giro. */
.hero-wordmark{position:absolute;z-index:3;top:50%;right:0;left:0;margin:0;color:#f4f6fb;font-size:clamp(54px,12.5vw,210px);font-weight:300;letter-spacing:.16em;line-height:1;text-align:center;text-indent:.16em;text-shadow:0 0 18px rgba(223,232,255,.55),0 0 60px rgba(183,201,255,.4),0 0 120px rgba(54,122,223,.35);pointer-events:none;opacity:0;translate:0 -50%;white-space:nowrap}
:root[data-theme="light"] .hero-wordmark{color:#131923;text-shadow:0 0 30px rgba(54,122,223,.35)}
.hero-wordmark span{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(10px)}
.hero-wordmark.is-on span{animation:wordmark-rise .8s cubic-bezier(.23,1,.32,1) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes wordmark-rise{to{opacity:1;transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.hero-wordmark{display:none}}

/* Halo grafito detrás del logo en reposo: separa la silueta negra del fondo. */
:root[data-theme="dark"] .hero-sticky::before{content:"";position:absolute;z-index:0;inset:0;background:radial-gradient(ellipse 42% 62% at 72% 50%,rgba(92,100,116,.4),rgba(46,50,60,.2) 48%,transparent 72%);opacity:0;transition:opacity 1.6s ease;pointer-events:none}
:root[data-theme="dark"] .hero-sticky.is-settled::before{opacity:1}
@media(max-width:760px){:root[data-theme="dark"] .hero-sticky::before{background:radial-gradient(ellipse 60% 30% at 50% 26%,rgba(92,100,116,.4),rgba(46,50,60,.2) 48%,transparent 72%)}}
@media(prefers-reduced-motion:reduce){:root[data-theme="dark"] .hero-sticky::before{opacity:1;transition:none}}
:root[data-theme="dark"] .hero-sticky{background:#050608}

/* Sobre Astroly condensado: texto técnico a la izquierda y la marca de código en 3D a la derecha. */
.about-section{display:block;padding:clamp(56px,6vw,96px) var(--gutter);border-top:1px solid var(--hairline)}
.about-section::before{content:none}
:root[data-theme="dark"] .about-section{background:#000}
.about-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(28px,3.4vw,52px);border:1px solid var(--hairline);border-radius:28px;background:linear-gradient(180deg,#0b0e14,#050608)}
:root[data-theme="light"] .about-layout{background:#fff}
.about-copy h2{max-width:none;margin:0;font-size:clamp(34px,3.6vw,56px)}
.about-lead{max-width:56ch;margin:20px 0 0;color:var(--muted);font-size:16px;line-height:1.7}
.about-tech{max-width:56ch;margin:14px 0 0;color:var(--quiet);font-size:14px;line-height:1.75}
.about-tech code{padding:2px 7px;border:1px solid var(--hairline);border-radius:6px;background:rgba(54,122,223,.1);color:#8fb4f2;font:500 12.5px/1.4 "Cascadia Mono",Consolas,ui-monospace,monospace}
:root[data-theme="light"] .about-tech code{color:#1f3a86}
.about-copy .about-facts{margin-top:22px}
.about-note{margin:14px 0 0;color:var(--quiet);font-size:13px}
.about-copy>.text-link{margin-top:22px;padding-bottom:8px;border-bottom:1px solid var(--line-strong)}
.about-figure{display:flex;flex-direction:column;align-items:center;margin:0}
.about-stage{position:relative;width:100%;height:clamp(240px,24vw,340px);border-radius:22px;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(92,100,116,.22),rgba(46,50,60,.1) 50%,transparent 75%)}
.about-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.about-stage-fallback{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font:600 64px/1 "Cascadia Mono",Consolas,monospace}
.about-stage.is-ready .about-stage-fallback{display:none}
.about-figure figcaption{display:flex;flex-direction:column;align-items:center;margin-top:6px}
.about-figure figcaption strong{font-size:16px;font-weight:600}
.about-figure figcaption span{color:var(--brand-blue);font:500 12px/1.4 "Cascadia Mono",Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:900px){
  .about-layout{grid-template-columns:1fr}
  .about-figure{order:-1}
}
@media(max-width:560px){
  .about-section{padding:48px 12px}
  .about-layout{padding:26px 18px;border-radius:22px}
  .about-stage{height:210px}
}

/* Sobre Astroly como hoja de vida: el nombre grande arriba a la derecha y una ilustración 2D
   de un equipo escribiendo código en bucle. */
.about-figure{align-self:stretch;align-items:flex-end;justify-content:space-between;gap:18px}
.about-figure .about-name{margin:0;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.about-figure .about-name strong{font-size:clamp(40px,4.6vw,72px);font-weight:650;line-height:1;letter-spacing:-.035em}
.about-figure .about-name span{margin-top:8px;color:var(--brand-blue);font:500 13px/1.4 "Cascadia Mono",Consolas,ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}
.about-art{display:block;width:min(100%,380px);height:auto;margin:auto 0}
.about-art *{vector-effect:non-scaling-stroke}
.code{transform-box:fill-box;transform-origin:left center;animation:code-type 6.5s cubic-bezier(.3,.7,.2,1) infinite both;animation-delay:var(--d)}
.code-violet{fill:#8a72f0}
.code-blue{fill:#5b95ea}
.code-dim{fill:#4a515c}
:root[data-theme="light"] .code-dim{fill:#c3c9d3}
:root[data-theme="light"] .code-violet{fill:#6a4dd4}
:root[data-theme="light"] .code-blue{fill:#367adf}
.code-cursor{fill:#c3c9d3;animation:code-cursor 1s steps(1) infinite}
:root[data-theme="light"] .code-cursor{fill:#4d5868}
@keyframes code-type{0%{transform:scaleX(0)}7%,78%{transform:scaleX(1)}88%,100%{transform:scaleX(0)}}
@keyframes code-cursor{50%{opacity:0}}
@media(max-width:900px){
  .about-figure{order:-1;align-items:center}
  .about-figure .about-name{align-items:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){.code,.code-cursor{animation:none}}

/* El programador frente al equipo: manos que teclean por turnos, cabeza que acompaña y café humeante. */
.about-art{width:min(100%,420px)}
.typing-hand{transform-box:fill-box;transform-origin:left top;animation:typing .42s ease-in-out infinite alternate}
.typing-hand-2{animation-delay:.21s}
.steam{stroke-dasharray:4 4;animation:steam 2.4s linear infinite}
.steam-2{animation-delay:-1.2s}
@keyframes typing{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@keyframes steam{0%{opacity:0;transform:translateY(4px)}30%,70%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.typing-hand,.steam{animation:none}}.about-figure .about-art{width:min(100%,470px)}

/* Ilustración del programador (adaptada al estilo de líneas del landing): ventanas de código
   flotando, la persona tras el escritorio con lápiz, portátil y monitor. */
.about-art .shirt{fill:rgba(106,77,212,.28);stroke:#8a72f0;stroke-width:1.6;stroke-linejoin:round}
.about-art .hair{fill:#2a2d35;stroke:#c3c9d3;stroke-width:1.4;stroke-linejoin:round}
.about-art .face{fill:#c3c9d3}
.about-art .pen{stroke:#5b95ea;stroke-width:3;stroke-linecap:round}
.about-art .device{fill:rgba(255,255,255,.04);stroke:#c3c9d3;stroke-width:1.6;stroke-linejoin:round}
.about-art .desk{stroke-width:3}
.about-art .card-accent{fill:rgba(106,77,212,.35);stroke:#8a72f0;stroke-width:1.4}
.about-art .card-label{fill:#c3c9d3;font:600 14px/1 "Segoe UI Variable","Segoe UI",sans-serif;text-anchor:middle}
.about-art .card-label-strong{fill:#fff;font-size:17px}
:root[data-theme="light"] .about-art .hair{fill:#2a2d35;stroke:#2a2d35}
:root[data-theme="light"] .about-art .face,:root[data-theme="light"] .about-art .card-label{fill:#4d5868}
:root[data-theme="light"] .about-art .device{fill:rgba(29,43,63,.04);stroke:#4d5868}
.float-card{animation:float-card 4.8s ease-in-out infinite;animation-delay:var(--d)}
.coder-head{transform-box:fill-box;transform-origin:50% 100%;animation:coder-nod 3.2s ease-in-out infinite}
.coder-hand{transform-box:fill-box;transform-origin:20% 100%;animation:coder-write .9s ease-in-out infinite alternate}
@keyframes float-card{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes coder-nod{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}
@keyframes coder-write{from{transform:translateX(0)}to{transform:translateX(5px)}}
@media(prefers-reduced-motion:reduce){.float-card,.coder-head,.coder-hand{animation:none}}
/* El computador solo, más grande, con etiquetas de código que salen por sus lados en bucle. */
.about-figure .about-art{width:min(100%,520px)}
.about-art .tag-box{fill:rgba(255,255,255,.03);stroke:#6f7884;stroke-width:1.4}
.about-art .tag-box-accent{fill:rgba(106,77,212,.35);stroke:#8a72f0}
.about-art .tag-box-blue{fill:rgba(54,122,223,.3);stroke:#5b95ea}
:root[data-theme="light"] .about-art .tag-box{fill:#fff;stroke:#9aa3b0}
.code-tag{transform-box:fill-box;transform-origin:center;animation:code-tag 4.8s cubic-bezier(.23,1,.32,1) infinite both;animation-delay:var(--d)}
@keyframes code-tag{0%{opacity:0;transform:translateX(var(--fx)) scale(.55)}14%{opacity:1}30%,72%{opacity:1;transform:translate(0,-3px) scale(1)}86%,100%{opacity:0;transform:translate(0,-12px) scale(.96)}}
@media(prefers-reduced-motion:reduce){.code-tag{animation:none}}
/* Preguntas: un bloque negro con el cubo modular bajo el título y las preguntas a la derecha. */
.faq-section{display:block;padding:clamp(56px,6vw,96px) var(--gutter);border-top:1px solid var(--hairline)}
:root[data-theme="dark"] .faq-section{background:#000}
.faq-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start;gap:clamp(24px,4vw,64px);padding:clamp(28px,3.4vw,52px);border:1px solid var(--hairline);border-radius:28px;background:linear-gradient(180deg,#0b0e14,#050608)}
:root[data-theme="light"] .faq-layout{background:#fff}
.faq-layout .faq-intro{position:sticky;top:calc(var(--header-height) + var(--local-nav) + 24px)}
.faq-intro h2{font-size:clamp(34px,3.6vw,56px)}
.faq-stage{position:relative;height:clamp(240px,24vw,330px);margin-top:18px;border-radius:22px;background:radial-gradient(ellipse 58% 58% at 50% 52%,rgba(92,100,116,.2),rgba(46,50,60,.08) 52%,transparent 76%)}
.faq-stage canvas{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:820px){
  .faq-layout{grid-template-columns:1fr}
  .faq-layout .faq-intro{position:static}
  .faq-stage{height:230px}
}
@media(max-width:560px){.faq-section{padding:48px 12px}.faq-layout{padding:26px 16px;border-radius:22px}}
/* Cubo 3x3 más grande: solo crece su escenario en la columna izquierda. */
.faq-stage{height:clamp(320px,32vw,460px)}
@media(max-width:820px){.faq-stage{height:300px}}

/* Contacto condensado: el mensaje a la izquierda y un isotipo por canal a la derecha,
   con WhatsApp destacado y animado. */
.contact-section{display:block;margin:0;padding:clamp(56px,6vw,96px) var(--gutter);border-top:1px solid var(--hairline);border-radius:0;background:none;text-align:left}
:root[data-theme="dark"] .contact-section,:root[data-theme="light"] .contact-section{background:var(--page)}
:root[data-theme="dark"] .contact-section{background:#000}
.contact-section::after{content:none}
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(28px,3.4vw,52px);border:1px solid var(--hairline);border-radius:28px;background:linear-gradient(180deg,#0b0e14,#050608)}
:root[data-theme="light"] .contact-layout{background:#fff}
.contact-copy h2{max-width:16ch;margin:0;font-size:clamp(34px,3.8vw,58px)}
.contact-copy>p{max-width:46ch;margin:18px 0 0;color:var(--muted);font-size:16px;line-height:1.7}
.contact-copy .contact-number{margin-top:22px;color:var(--ink);font:500 15px/1.4 "Cascadia Mono",Consolas,monospace;letter-spacing:.06em}
.contact-channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.channel{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-height:132px;padding:18px;border:1px solid var(--hairline);border-radius:18px;background:rgba(255,255,255,.025);color:var(--ink);transition:border-color .2s ease,background .2s ease,transform .2s var(--ease-out)}
:root[data-theme="light"] .channel{background:#f7f8fa}
.channel-whatsapp{grid-column:1/-1;flex-direction:row;align-items:center;min-height:0;padding:22px 24px;border-color:rgba(138,114,240,.6);background:linear-gradient(135deg,rgba(54,122,223,.26),rgba(106,77,212,.26))}
.channel-icon{position:relative;display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--hairline)}
.channel-whatsapp .channel-icon{width:60px;height:60px;border-radius:50%;border-color:rgba(91,149,234,.6);background:rgba(54,122,223,.18)}
.channel-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.channel-whatsapp .channel-icon svg{width:30px;height:30px;color:#fff}
.channel-icon .channel-dot{fill:currentColor;stroke:none}
.channel-text{display:flex;flex-direction:column;gap:2px}
.channel-text strong{font-size:16px;font-weight:600}
.channel-text span{color:var(--quiet);font-size:13px}
.channel-whatsapp .channel-text{flex:1}
.channel-whatsapp .channel-text strong{font-size:20px}
.channel-whatsapp .channel-text span{color:var(--muted)}
.channel-whatsapp>.arrow-icon{width:20px;height:20px}
.channel[data-pending]{cursor:default}
.channel[data-pending] .channel-text span{color:var(--brand-violet)}
/* WhatsApp: a ring pulses out of the icon and the handset rocks, in a loop. */
.channel-pulse{position:absolute;inset:-1px;border-radius:50%;border:1.5px solid #5b95ea;animation:channel-pulse 2.2s ease-out infinite}
.channel-handset{transform-box:fill-box;transform-origin:center;animation:channel-ring 2.2s ease-in-out infinite}
@keyframes channel-pulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@keyframes channel-ring{0%,60%,100%{transform:rotate(0)}66%{transform:rotate(-14deg)}72%{transform:rotate(12deg)}78%{transform:rotate(-8deg)}84%{transform:rotate(0)}}
@media(hover:hover) and (pointer:fine){
  .channel:hover{transform:translateY(-3px);border-color:rgba(138,114,240,.6)}
  .channel:not(.channel-whatsapp):hover{background:linear-gradient(135deg,rgba(54,122,223,.16),rgba(106,77,212,.16))}
  .channel-whatsapp:hover{background:linear-gradient(135deg,rgba(54,122,223,.4),rgba(106,77,212,.4))}
}
@media(max-width:900px){.contact-layout{grid-template-columns:1fr}}
@media(max-width:560px){
  .contact-section{padding:48px 12px}
  .contact-layout{padding:26px 16px;border-radius:22px}
  .contact-channels{grid-template-columns:1fr}
  .channel{flex-direction:row;align-items:center;min-height:0}
}
@media(prefers-reduced-motion:reduce){.channel-pulse,.channel-handset{animation:none}}
.channel:not(.channel-whatsapp) .channel-icon{width:56px;height:56px;border-radius:16px}
.channel:not(.channel-whatsapp) .channel-icon svg{width:28px;height:28px}



/* Página de Servicios: portada con formas de estudio flotando libres por el espacio,
   después un estudio fijo a la izquierda que muestra la figura del servicio que se lee. */
.svc-hero{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;height:calc(100svh - var(--header-height));min-height:620px;overflow:hidden;background:#050608}
.svc-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 52% at 50% 40%,rgba(92,100,116,.34),rgba(46,50,60,.16) 50%,transparent 74%);pointer-events:none}
:root[data-theme="light"] .svc-hero{background:#f2f4f7}
:root[data-theme="light"] .svc-hero::before{background:radial-gradient(ellipse 60% 52% at 50% 40%,rgba(255,255,255,.9),transparent 72%)}
.svc-field{position:absolute;inset:0}
.svc-field canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .6s ease}
.svc-field.has-webgl canvas{opacity:1}
.svc-hero-copy{position:relative;z-index:1;grid-row:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:end;gap:clamp(24px,5vw,80px);padding:0 var(--gutter) clamp(36px,5vh,64px)}
.svc-eyebrow{margin:0 0 16px;color:var(--brand-blue);font:500 12px/1.3 "Cascadia Mono",Consolas,ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.svc-hero h1{max-width:21ch;margin:0;color:#fff;font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;font-size:clamp(38px,min(4.2vw,7svh),64px);font-weight:400;line-height:1.02;letter-spacing:-.01em}
:root[data-theme="light"] .svc-hero h1{color:#171c24}
.svc-hero-side p{max-width:36ch;margin:0;color:#a1a4a5;font-size:clamp(16px,1.3vw,18px);line-height:1.55}
:root[data-theme="light"] .svc-hero-side p{color:#4e5a6d}
.svc-hero-side .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:24px}

.svc-detail{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(24px,4vw,64px);padding:clamp(72px,8vw,120px) var(--gutter);border-top:1px solid var(--hairline)}
:root[data-theme="dark"] .svc-detail{background:#000}
.svc-aside{position:sticky;top:calc(var(--header-height) + 24px);display:flex;flex-direction:column;gap:18px;height:calc(100svh - var(--header-height) - 48px);min-height:520px}
.svc-aside .svc-stage{flex:1;height:auto;min-height:0;border:1px solid var(--hairline);border-radius:28px;background:linear-gradient(180deg,#0b0e14,#050608);overflow:hidden}
:root[data-theme="light"] .svc-aside .svc-stage{background:#fff}
.svc-aside .svc-stage::before{content:none}
.svc-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.svc-index a{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 14px;border:1px solid var(--hairline);border-radius:980px;color:var(--muted);font-size:14px;transition:border-color .2s ease,background .2s ease,color .2s ease}
.svc-index a span{color:var(--quiet);font:500 11px/1 "Cascadia Mono",Consolas,ui-monospace,monospace}
.svc-index a:hover,.svc-index a.is-current{border-color:rgba(138,114,240,.65);background:linear-gradient(135deg,rgba(54,122,223,.3),rgba(106,77,212,.3));color:#fff}
.svc-index a.is-current span,.svc-index a:hover span{color:#cfd8ff}
:root[data-theme="light"] .svc-index a:hover,:root[data-theme="light"] .svc-index a.is-current{background:linear-gradient(135deg,rgba(54,122,223,.14),rgba(106,77,212,.14));color:#1f3a86}
:root[data-theme="light"] .svc-index a.is-current span{color:#367adf}

.svc-list{display:flex;flex-direction:column;gap:24px}
.svc-item{scroll-margin-top:calc(var(--header-height) + 24px);padding:clamp(28px,3.4vw,52px);border:1px solid var(--hairline);border-radius:28px;background:rgba(255,255,255,.025)}
:root[data-theme="light"] .svc-item{background:#fff}
.svc-kicker{margin:0 0 18px;color:var(--brand-blue);font:500 12px/1.3 "Cascadia Mono",Consolas,ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
.svc-item h2{max-width:20ch;margin:0;font-size:clamp(32px,3.3vw,50px);font-weight:650;line-height:1.06;letter-spacing:-.035em;text-wrap:balance}
.svc-lead{max-width:46ch;margin:20px 0 0;color:var(--muted);font-size:clamp(17px,1.35vw,20px);line-height:1.5}
.svc-block{margin-top:30px;padding-top:24px;border-top:1px solid var(--hairline)}
.svc-block>p:not(.svc-label){max-width:52ch;margin:0;color:var(--ink);font-size:17px;line-height:1.5}
.svc-label{margin:0 0 14px;color:var(--quiet);font:500 12px/1.3 "Cascadia Mono",Consolas,ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
.svc-pills{display:flex;flex-wrap:wrap;gap:10px}
.svc-pills details{border:1px solid var(--hairline);border-radius:22px;transition:border-color .2s ease,background .2s ease}
.svc-pills details[open]{flex-basis:100%;border-color:rgba(138,114,240,.5);background:linear-gradient(135deg,rgba(54,122,223,.12),rgba(106,77,212,.12))}
.svc-pills summary{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 18px 0 14px;color:var(--ink);font-size:15px;cursor:pointer;list-style:none}
.svc-pills summary::-webkit-details-marker{display:none}
.svc-pills summary::before{content:"+";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(54,122,223,.22);color:#9cc0ff;font-size:15px;line-height:1;transition:transform .25s ease}
.svc-pills details[open] summary::before{transform:rotate(45deg)}
:root[data-theme="light"] .svc-pills summary::before{background:rgba(54,122,223,.14);color:#367adf}
.svc-pills details p{max-width:56ch;margin:0;padding:0 18px 16px 44px;color:var(--muted);font-size:15px;line-height:1.55}
@media(hover:hover) and (pointer:fine){.svc-pills details:not([open]):hover{border-color:rgba(138,114,240,.5)}}
.svc-notes{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.svc-notes li{position:relative;padding-left:22px;color:var(--muted);font-size:16px;line-height:1.5}
.svc-notes li::before{content:"";position:absolute;top:.62em;left:2px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--brand-blue),var(--brand-violet))}
.svc-quote{margin-top:32px}

@media(max-width:900px){
  .svc-hero{min-height:640px}
  .svc-hero-copy{grid-template-columns:1fr;gap:18px}
  .svc-detail{grid-template-columns:1fr}
  .svc-aside{display:none}
}
@media(max-width:560px){
  .svc-hero h1{font-size:clamp(34px,9.6vw,44px)}
  .svc-item{border-radius:22px}
  .svc-detail{padding:56px 12px}
}
/* Cosmos de Servicios: el nombre vive detrás del lienzo para que el isotipo lo tape al pasar. */
.svc-field{z-index:1}
.svc-word{position:absolute;z-index:0;top:34%;right:0;left:0;height:1em;margin:0;color:#f4f6fb;font-size:clamp(26px,7.6vw,140px);font-weight:300;letter-spacing:.14em;line-height:1;pointer-events:none}
.svc-word span{position:absolute;top:0;left:50%;transform:translateX(-50%);padding-left:.14em;white-space:nowrap}
.svc-word-a{clip-path:inset(0 100% 0 0)}
.svc-word-b{clip-path:inset(0 0 0 100%)}
.svc-word:not(.is-live) .svc-word-a{display:none}
.svc-word:not(.is-live) .svc-word-b{clip-path:none}
:root[data-theme="light"] .svc-word{color:#131923}
.svc-hero-copy{z-index:2}
@media(max-width:900px){.svc-word{top:30%;letter-spacing:.1em}}

/* Página de Proceso: paso a paso con lo que recibe el cliente, pagos y forma de trabajar. */
.prc-steps,.prc-pay,.prc-values{padding:clamp(72px,8vw,120px) var(--gutter);border-top:1px solid var(--hairline)}
:root[data-theme="dark"] :is(.prc-steps,.prc-pay,.prc-values){background:#000}
.prc-intro{max-width:760px;margin-bottom:clamp(36px,5vw,64px)}
.prc-intro h2,.prc-pay h2{margin:0;font-size:clamp(32px,3.6vw,54px);font-weight:650;line-height:1.06;letter-spacing:-.035em;text-wrap:balance}
.prc-intro>p:not(.svc-eyebrow){max-width:48ch;margin:20px 0 0;color:var(--muted);font-size:clamp(17px,1.35vw,20px);line-height:1.5}
.prc-timeline{position:relative;display:grid;gap:14px;margin:0;padding:0;list-style:none}
.prc-timeline::before{content:"";position:absolute;top:28px;bottom:28px;left:31px;width:1px;background:linear-gradient(180deg,var(--brand-blue),var(--brand-violet))}
.prc-step{position:relative;display:grid;grid-template-columns:64px minmax(0,1.3fr) minmax(0,.7fr);align-items:center;gap:clamp(18px,3vw,40px);padding:clamp(22px,2.4vw,32px) clamp(22px,2.6vw,36px) clamp(22px,2.4vw,32px) 0;border:1px solid var(--hairline);border-radius:28px;background:rgba(255,255,255,.025)}
:root[data-theme="light"] .prc-step{background:#fff}
.prc-num{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;margin-left:10px;border:1px solid rgba(138,114,240,.6);border-radius:50%;background:#0b0e14;color:#cfd8ff;font:500 13px/1 "Cascadia Mono",Consolas,ui-monospace,monospace}
:root[data-theme="light"] .prc-num{background:#fff;color:#367adf}
.prc-body h3{margin:0;font-size:clamp(21px,1.8vw,26px);font-weight:650;letter-spacing:-.02em}
.prc-body p{max-width:56ch;margin:8px 0 0;color:var(--muted);font-size:16px;line-height:1.55}
.prc-get{margin:0;padding:14px 18px;border:1px solid rgba(138,114,240,.4);border-radius:20px;background:linear-gradient(135deg,rgba(54,122,223,.14),rgba(106,77,212,.14));color:var(--ink);font-size:15px;line-height:1.45}
.prc-get span{display:block;margin-bottom:4px;color:#9cc0ff;font:500 11px/1.3 "Cascadia Mono",Consolas,ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
:root[data-theme="light"] .prc-get span{color:#367adf}
.prc-after{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;margin-top:24px;padding:22px clamp(22px,2.6vw,36px);border:1px dashed var(--hairline);border-radius:28px}
.prc-after .svc-label{margin:0}
.prc-after p:last-child{margin:0;color:var(--muted);font-size:17px}
.prc-after strong{color:var(--ink);font-weight:600}
.prc-pay-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px clamp(28px,5vw,72px);padding:clamp(28px,3.6vw,56px);border:1px solid var(--hairline);border-radius:28px;background:linear-gradient(180deg,#0b0e14,#050608)}
:root[data-theme="light"] .prc-pay-card{background:#fff}
.prc-pay-bar{display:flex;align-self:end;overflow:hidden;height:56px;border:1px solid var(--hairline);border-radius:980px;font-size:14px;font-weight:600}
.prc-pay-bar span{display:flex;align-items:center;padding:0 18px;white-space:nowrap}
.prc-pay-first{flex:0 0 40%;background:linear-gradient(135deg,var(--brand-blue),var(--brand-violet));color:#fff}
.prc-pay-rest{flex:1;color:var(--muted)}
.prc-pay-card .svc-notes{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.prc-value-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.prc-value{padding:clamp(24px,2.6vw,36px);border:1px solid var(--hairline);border-radius:28px;background:rgba(255,255,255,.025);transition:border-color .2s ease}
:root[data-theme="light"] .prc-value{background:#fff}
@media(hover:hover) and (pointer:fine){.prc-value:hover{border-color:rgba(138,114,240,.55)}}
.prc-value-mark{display:block;width:28px;height:28px;margin-bottom:22px;border-radius:9px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-violet));box-shadow:0 0 0 6px rgba(106,77,212,.14)}
.prc-value h3{margin:0;font-size:22px;font-weight:650;letter-spacing:-.02em}
.prc-value p{margin:10px 0 0;color:var(--muted);font-size:16px;line-height:1.55}
@media(max-width:900px){
  .prc-step{grid-template-columns:56px minmax(0,1fr);align-items:start}
  .prc-get{grid-column:2}
  .prc-timeline::before{left:27px}
  .prc-num{margin-left:6px}
  .prc-pay-card{grid-template-columns:1fr}
  .prc-pay-card .svc-notes{grid-template-columns:1fr}
  .prc-value-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .prc-steps,.prc-pay,.prc-values{padding:56px 12px}
  .prc-step,.prc-value,.prc-pay-card,.prc-after{border-radius:22px}
  .prc-value-grid{grid-template-columns:1fr}
}
/* Valores: al pasar el mouse, la marca da paso a un isotipo 2D animado de cada valor. */
.prc-defs{position:absolute;width:0;height:0;overflow:hidden}
.prc-value-slot{position:relative;display:block;width:64px;height:64px;margin-bottom:18px}
.prc-value-slot .prc-value-mark{position:absolute;top:18px;left:0;margin:0;transition:opacity .25s ease,transform .3s ease}
.prc-icon{position:absolute;inset:0;width:64px;height:64px;fill:none;stroke:url(#prc-grad);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transform-origin:20% 60%;transition:opacity .3s ease,transform .45s cubic-bezier(.23,1,.32,1)}
.prc-icon .dot{fill:url(#prc-grad);stroke:none}
.prc-icon *{transform-box:fill-box;transform-origin:center}
:is(.prc-value:hover,.prc-value:focus-within) .prc-value-mark{opacity:0;transform:scale(.4) rotate(45deg)}
:is(.prc-value:hover,.prc-value:focus-within) .prc-icon{opacity:1;transform:none}
/* Los teléfonos no tienen hover: el isotipo se queda visible. */
@media(hover:none){.prc-value-slot .prc-value-mark{opacity:0}.prc-icon{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .prc-value:hover .hand-l{animation:prc-hand-l 2.4s cubic-bezier(.23,1,.32,1) infinite}
  .prc-value:hover .hand-r{animation:prc-hand-r 2.4s cubic-bezier(.23,1,.32,1) infinite}
  .prc-value:hover .star-big{animation:prc-star 2.2s ease-in-out infinite}
  .prc-value:hover .star-a{animation:prc-twinkle 1.6s ease-in-out infinite}
  .prc-value:hover .star-b{animation:prc-twinkle 1.6s ease-in-out .8s infinite}
  .prc-value:hover .bubble-a{animation:prc-pop 2.6s ease-out infinite}
  .prc-value:hover .bubble-b{animation:prc-pop 2.6s ease-out .45s infinite}
  .prc-value:hover .dot{animation:prc-dot 1.2s ease-in-out infinite}
  .prc-value:hover .d2{animation-delay:.15s}
  .prc-value:hover .d3{animation-delay:.3s}
  .prc-value:hover .lens{animation:prc-lens 2.8s ease-in-out infinite}
  .prc-value:hover .key{animation:prc-key 2.6s cubic-bezier(.23,1,.32,1) infinite}
  .prc-value:hover .check{stroke-dasharray:12;animation:prc-check 2.7s ease infinite}
  .prc-value:hover .c2{animation-delay:.35s}
  .prc-value:hover .c3{animation-delay:.7s}
}
@keyframes prc-hand-l{0%{transform:translateX(-9px)}35%,100%{transform:translateX(0)}50%{transform:translate(0,-2px)}65%{transform:translate(0,2px)}80%{transform:translate(0,0)}}
@keyframes prc-hand-r{0%{transform:translateX(9px)}35%,100%{transform:translateX(0)}50%{transform:translate(0,-2px)}65%{transform:translate(0,2px)}80%{transform:translate(0,0)}}
@keyframes prc-star{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(18deg)}}
@keyframes prc-twinkle{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
@keyframes prc-pop{0%{opacity:0;transform:scale(.6)}18%,82%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}
@keyframes prc-dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-3px);opacity:1}}
@keyframes prc-lens{0%,100%{transform:translate(0,0)}33%{transform:translate(-12px,-12px)}66%{transform:translate(-4px,-20px)}}
@keyframes prc-key{0%{transform:translateX(-8px) rotate(0)}40%{transform:translateX(0) rotate(0)}60%,85%{transform:translateX(0) rotate(-35deg)}100%{transform:translateX(0) rotate(0)}}
@keyframes prc-check{0%{stroke-dashoffset:12}25%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:12}}
.prc-icon-24{stroke-width:1.05}
.prc-value-slot,.prc-icon{width:76px;height:76px}
@keyframes prc-hand-l{0%{transform:translateX(-3px)}35%,100%{transform:translateX(0)}50%{transform:translate(0,-.8px)}65%{transform:translate(0,.8px)}80%{transform:translate(0,0)}}
@keyframes prc-hand-r{0%{transform:translateX(3px)}35%,100%{transform:translateX(0)}50%{transform:translate(0,-.8px)}65%{transform:translate(0,.8px)}80%{transform:translate(0,0)}}
.prc-value-slot .prc-value-mark{top:24px}
/* The loader runs only on document entry, with a complete typed name and deletion. */
.page-intro{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;gap:16px;background:#0d1117;color:#f3f5f8;pointer-events:none}
.preloading .page-intro{display:flex}
.page-intro img{width:42px;height:42px;animation:page-intro-mark 1.1s cubic-bezier(.23,1,.32,1) both}
.page-intro-name{display:inline-block;width:8ch;height:1.2em;contain:layout;white-space:nowrap;font:600 23px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em}
.page-intro-text{display:inline-block;white-space:nowrap;padding-right:2px;border-right:2px solid currentColor;animation:page-intro-caret-blink .8s step-end infinite}
@keyframes page-intro-mark{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes page-intro-caret-blink{0%,49%{border-right-color:currentColor}50%,100%{border-right-color:transparent}}
.intro-released .page-intro{animation:page-intro-release .3s cubic-bezier(.23,1,.32,1) both}
@keyframes page-intro-release{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.page-intro{display:none!important}}

/* Pause only invisible decorative timelines; visible motion keeps its original timing. */
.motion-suspended *,
.motion-tab-hidden :is(.statement-card,.process-stage,.about-figure,.contact-channels) *,
.process-art:not(.is-active) *{animation-play-state:paused!important}

.intro-released .page-intro-text{animation-play-state:paused}

/* A brief full-viewport defocus on refresh; only opacity changes during the reveal. */
.page-refresh{position:fixed;inset:0;z-index:9999;pointer-events:none;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:1;transition:opacity .5s cubic-bezier(.23,1,.32,1)}
.page-refresh.is-clear{opacity:0}
@media(prefers-reduced-motion:reduce){.page-refresh{display:none}}

/* Compact primary header with the Astroly mark. */
:root{--header-height:56px}
.site-header{min-height:var(--header-height)}
.site-header .brand{gap:9px}
.site-header .brand img{display:block;width:26px;height:26px;object-fit:contain}

/* Servicios: priorizar el explorador sin limitar la altura del contenido. */
.services-section{padding-block:clamp(40px,5vw,72px)}
.services-section .services-stage{padding:clamp(28px,3vw,44px) clamp(24px,3.4vw,50px) clamp(28px,3vw,44px)}
.services-stage .services-intro{gap:12px;margin-bottom:clamp(22px,2.4vw,34px)}
.services-stage .services-intro h2{max-width:30ch;font-size:clamp(34px,3.5vw,50px);line-height:1.08}
.services-stage .services-intro p{font-size:15px;line-height:1.5}
.services-section .service-explorer{min-height:0;align-items:center;column-gap:clamp(16px,2vw,30px)}
.services-section .service-detail{min-height:0}
.services-section .service-visual{min-height:0;height:clamp(300px,30vw,410px)}
.services-section .service-choice,.services-section .service-choice:first-child,.services-section .service-choice:nth-child(2){min-height:48px;margin-bottom:6px}
.services-section .service-detail-ideal{margin-top:12px}
.services-section .service-detail-subhead{margin-top:14px}
.services-section .service-detail-list li{padding-block:5px}
.services-section .service-detail-list li::before{top:14px}
.services-section .service-detail-note{margin-top:10px}
.services-section .service-detail-link{padding-top:14px}
@media(max-width:560px){
  .services-section{padding:40px 12px}
  .services-section .services-stage{padding:28px 16px 30px}
  .services-stage .services-intro h2{font-size:clamp(30px,8vw,38px);max-width:18ch}
  .services-stage .services-intro p{font-size:14px}
  .services-section .service-explorer{row-gap:12px}
  .services-section .service-visual{height:clamp(220px,72vw,300px);margin:0}
  .services-section .service-choice,.services-section .service-choice:first-child,.services-section .service-choice:nth-child(2){min-height:48px;margin:0}
  .services-section .service-detail{padding-top:0}
}

@media(max-width:560px){
  .services-section .service-explorer{grid-template-columns:minmax(0,1fr)}
  .services-section .service-picker{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}
  .services-section .service-detail{min-width:0;overflow-wrap:anywhere}
  .services-section .service-choice strong{min-width:0;font-size:13px;overflow-wrap:normal}
}

@media(max-width:380px){
  .services-section .service-picker .service-choice{gap:4px;padding-inline:8px}
  .services-section .service-choice strong{font-size:12px;overflow-wrap:normal}
  .services-section .service-arrow{width:10px;height:10px;flex:none}
}

/* El espacio para ambas barras ya está en scroll-padding; no duplicarlo en las secciones. */
main#inicio > section[id]{scroll-margin-top:0}

/* Preguntas: composición compacta que sigue creciendo con las respuestas. */
.faq-section{padding-block:clamp(36px,4.5vw,64px)}
.faq-section .faq-layout{padding:clamp(24px,2.6vw,36px);gap:clamp(24px,3vw,44px)}
.faq-section .faq-intro h2{font-size:clamp(32px,3.2vw,48px);line-height:1.08}
.faq-section .faq-intro>p{margin-top:16px;line-height:1.55}
.faq-section .faq-stage{height:clamp(220px,22vw,310px);margin-top:12px}
.faq-section .faq-list{gap:8px}
.faq-section .faq-list details{padding-inline:20px}
.faq-section .faq-list summary{min-height:52px;padding:13px 0;font-size:clamp(16px,1.35vw,19px);line-height:1.35}
.faq-section .faq-list details p{margin:0 0 16px;line-height:1.55}
@media(max-width:820px){
  .faq-section .faq-stage{height:clamp(200px,55vw,260px)}
  .faq-section .faq-layout{gap:20px}
}
@media(max-width:560px){
  .faq-section{padding:40px 12px}
  .faq-section .faq-layout{padding:24px 16px}
  .faq-section .faq-intro h2{font-size:clamp(30px,8vw,38px)}
  .faq-section .faq-list details{padding-inline:16px}
  .faq-section .faq-list summary{font-size:16px;min-height:50px}
}