/* VELSUNO Studio edition — clean corporate visual system; 3D introduction unchanged */
:root{--vs-navy:#0b162b;--vs-ink:#16243e;--vs-muted:#566984;--vs-blue:#4777d9;--vs-orange:#de965e;--vs-teal:#57afa7;--vs-soft:#f6f8fc;--vs-border:#dfe6f0}
html{scroll-padding-top:92px}
#capacidades,#sectores,#proyectos,#suite,#demos,#ingenieria{scroll-margin-top:92px}
#capacidades{background:linear-gradient(180deg,#f8faff,#f3f7fe)}
#capacidades .section-header{max-width:780px}
#capacidades .section-header h2{font-size:clamp(32px,4vw,51px);letter-spacing:-.05em;line-height:1.1}
#capacidades .vx-cap-layout{grid-template-columns:minmax(260px,.72fr) minmax(0,1.5fr);gap:18px}
#capacidades .vx-cap-menu button{grid-template-columns:38px 1fr;align-items:center;padding:15px 18px;gap:0 12px;border-radius:13px;min-height:75px}
#capacidades .vx-cap-menu button>span{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:#edf3ff;grid-row:span 2;color:#376cd1}
#capacidades .vx-cap-menu button strong{font-size:15px}
#capacidades .vx-cap-menu button small{font-size:12px}
#capacidades .vx-cap-menu button.active{background:#ecf2ff;border-color:#8eabea;box-shadow:0 9px 22px #3868bd10}
#capacidades .vx-cap-view{padding:clamp(23px,3vw,36px)}
#capacidades .vx-cap-view h3{margin:9px 0;font-size:clamp(25px,2.7vw,37px)}
#capacidades .vx-cap-view p{margin-bottom:20px;line-height:1.6}
#capacidades .vx-cap-preview{margin:20px 0 16px}
#capacidades .vx-preview-bars{position:relative;height:102px;align-items:flex-end;gap:10px}
#capacidades .vx-preview-bars i{border-radius:5px 5px 0 0}
#capacidades .vx-preview-bars[role=img]{outline-offset:4px}
.vs-alt-visual{width:100%;height:92px;display:grid;place-items:center}
.vs-pipeline{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.vs-pipeline span{min-width:0;flex:1;text-align:center;padding:12px 5px;border:1px solid #cbd8ed;border-radius:10px;background:#fff;color:#273e63;font-size:12px;font-weight:750}
.vs-pipeline b{color:#6995d8;flex:0 0 auto}
.vs-alt-progress{display:grid;align-content:center;gap:10px;width:100%}
.vs-alt-progress>div{display:grid;grid-template-columns:100px minmax(0,1fr) 38px;align-items:center;gap:10px;font-size:11px;color:#344b6b;font-weight:700}
.vs-alt-progress i{height:9px;border-radius:50px;background:#e5eaf3;overflow:hidden}
.vs-alt-progress em{display:block;height:100%;width:var(--amount);border-radius:50px;background:var(--bar);animation:vsGrow .8s ease both}
.vs-alt-visual svg{width:100%;height:100%;overflow:visible}
.vs-alt-nodes{display:flex;align-items:center;justify-content:center;gap:8px}
.vs-alt-nodes span{min-width:0;padding:12px 15px;background:#fff;border:1px solid #cad9ed;border-radius:12px;font-weight:800;font-size:12px;color:#284d82}
.vs-alt-nodes b{color:#4777d9}
@keyframes vsGrow{from{width:0}to{width:var(--amount)}}
/* Sector demonstrator: visual directions instead of a decorative repeated card */
#sectores .sector-content{gap:30px}
#sectores .sector-preview{min-width:0;align-self:center}
#sectores .sector-preview-content{padding-bottom:20px}
#sectores .flow-steps{margin:20px 0 18px}
#sectores .flow-steps>div{transition:transform .35s ease,border-color .35s ease,background .35s ease}
#sectores .flow-steps>div.vs-stage-active{background:#e9f2ff;border-color:#9eb9ee;transform:translateY(-4px)}
#sectores .flow-steps>div.vs-stage-done{background:#e6f5ed;border-color:#9fd7ba}
.vs-progress-system{margin:11px 0 13px}
.vs-progress-line{height:5px;border-radius:999px;background:#dae3f1;overflow:hidden}
.vs-progress-line span{display:block;width:15%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4879d9,#58aea4);transition:width .7s cubic-bezier(.2,.7,.2,1)}
.vs-progress-markers{display:flex;justify-content:space-between;gap:8px;margin-top:7px;color:#6a7991;font-size:10px}
.vs-demo-forward{border:1px solid #cdd9ed;background:#fff;border-radius:9px;font-size:12px;font-weight:800;color:#265bb0;padding:9px 13px;cursor:pointer;transition:background .2s,transform .2s}
.vs-demo-forward:hover{background:#edf4ff;transform:translateY(-2px)}
.vs-explainer{display:inline-block;margin-left:13px;color:#566984;font-size:11px}
/* Laboratory: clear diversified chart types */
.vs-metric-lab{background:#fff;padding:clamp(70px,8vw,115px) 0;color:var(--vs-ink);border-top:1px solid #e9edf4}
.vs-lab-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:28px}
.vs-lab-heading h2{font-size:clamp(32px,4vw,50px);letter-spacing:-.05em;line-height:1.13;margin:12px 0 13px}
.vs-lab-heading p{color:#60718a;line-height:1.65;max-width:750px;margin:0}
.vs-range{display:flex;flex-shrink:0;border-radius:10px;background:#f3f6fb;border:1px solid #dbe4f0;padding:4px;gap:3px}
.vs-range button{border:0;padding:10px 12px;border-radius:7px;cursor:pointer;background:transparent;color:#344763;font-weight:750;font-size:12px}
.vs-range button.active{background:#162d56;color:white;box-shadow:0 3px 8px #0f2a5219}
.vs-stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0}
.vs-stat{display:flex;gap:13px;align-items:center;background:#f8faff;border:1px solid #e2e9f2;border-radius:13px;padding:18px;min-width:0}
.vs-stat-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:11px;background:#eaf1ff;color:#3f73d8;font-size:24px;font-weight:700;flex-shrink:0}
.vs-stat-icon.teal{background:#e7f6f4;color:#3f9993}.vs-stat-icon.orange{background:#fff0e3;color:#dc8c4e}.vs-stat-icon.purple{background:#eeeafb;color:#856bcb}
.vs-stat>div{display:flex;flex-direction:column;gap:3px;min-width:0}.vs-stat small{color:#5c6e85;font-size:12px}.vs-stat strong{font-size:clamp(20px,2.2vw,28px);line-height:1.2;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap}.vs-up{color:#19805d;background:#e7f5eb;font-size:10px;font-weight:800;border-radius:4px;padding:3px 6px;width:max-content}
.vs-lab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.vs-visual-card{background:white;border:1px solid #dfe6ef;border-radius:16px;padding:23px 25px;min-width:0;box-shadow:0 10px 25px #152e5410;transition:transform .3s,box-shadow .3s}
.vs-visual-card:hover{transform:translateY(-3px);box-shadow:0 18px 30px #152e5418}
.vs-card-top{display:flex;justify-content:space-between;align-items:start;gap:12px}.vs-card-top h3{margin:0 0 7px;font-size:21px;letter-spacing:-.025em}.vs-card-top p{margin:0;color:#61718a;font-size:12px;line-height:1.55}.vs-chart-tag{white-space:nowrap;color:#516d9a;background:#f2f6fd;border-radius:6px;padding:6px 8px;font-weight:800;font-size:9px;letter-spacing:.06em}
.vs-bar-box{height:230px;position:relative;margin-top:14px}.vs-axis-lines{position:absolute;inset:0 0 30px}.vs-axis-lines i{position:absolute;left:0;right:0;height:1px;background:#e9eef5}.vs-axis-lines i:nth-child(1){top:25%}.vs-axis-lines i:nth-child(2){top:50%}.vs-axis-lines i:nth-child(3){top:75%}
.vs-main-bars{position:absolute;inset:0 5px 0;display:flex;align-items:flex-end;justify-content:space-around;gap:14px}
.vs-bar{display:flex;flex:1;max-width:110px;height:100%;flex-direction:column;justify-content:flex-end;align-items:center;border:0;background:transparent;cursor:pointer;gap:8px;padding:0;color:#677a93;font-size:11px}
.vs-bar i{display:block;width:100%;height:var(--height);border-radius:5px 5px 0 0;background:linear-gradient(180deg,#5d8ce6,#3e6fc7);transition:height .75s cubic-bezier(.2,.8,.2,1),filter .25s;min-height:4px}
.vs-bar:nth-child(3n) i{background:linear-gradient(180deg,#edab72,#d88b4c)}
.vs-bar:hover i,.vs-bar:focus-visible i{filter:brightness(1.13)}.vs-bar:focus-visible{outline:2px solid #3f75d7;border-radius:5px}.vs-bar-status{font-size:12px;color:#657790;margin-top:5px;min-height:18px}
.vs-ring-body{min-height:245px;display:flex;gap:34px;align-items:center;justify-content:center}
.vs-ring{width:190px;height:190px;flex:0 0 190px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#4677d9 0% 48%,#e49c61 48% 80%,#51b0a8 80%);transition:background .6s ease;position:relative}
.vs-ring::before{content:"";position:absolute;inset:24px;background:white;border-radius:50%}
.vs-ring>div{position:relative;display:grid;text-align:center}.vs-ring strong{font-size:31px;line-height:1.2;letter-spacing:-.04em}.vs-ring small{color:#77869a;font-size:12px}
.vs-ring-legend{display:grid;gap:18px;min-width:0;flex:1}.vs-ring-legend span{display:flex;gap:10px;align-items:center;color:#4c607c;font-size:13px}.vs-ring-legend b{margin-left:auto;color:#152b50;font-variant-numeric:tabular-nums}.vs-ring-legend i{display:block;width:12px;height:12px;border-radius:4px;background:#4677d9}.vs-ring-legend i.orange{background:#e49c61}.vs-ring-legend i.teal{background:#51b0a8}
#vsTrend{width:100%;height:235px;display:block;margin-top:9px;overflow:visible}.vs-grid-path{stroke:#e4eaf3;stroke-width:1;fill:none}
#vsTrendLine{stroke-dasharray:750;stroke-dashoffset:0;transition:d .6s;animation:vsDraw 1.8s ease both}#vsTrendArea{transition:d .6s;opacity:.9}#vsTrendDot{transition:cx .6s,cy .6s}
@keyframes vsDraw{from{stroke-dashoffset:750}to{stroke-dashoffset:0}}
.vs-chart-caption{font-size:11px;color:#687c96;margin:12px 0 0;line-height:1.5}
.vs-goals{display:grid;gap:23px;margin:25px 0}.vs-goals>div>span{display:flex;justify-content:space-between;font-size:13px;font-weight:650;color:#4f617a;margin-bottom:8px}.vs-goals b{color:#1b3458;font-variant-numeric:tabular-nums}.vs-goals>div>i{display:block;height:10px;border-radius:999px;background:#e7edf5;overflow:hidden}.vs-goals em{display:block;height:100%;width:var(--goal);border-radius:inherit;transition:width .7s ease;animation:vsGrow .9s both}
.vs-lab-disclaimer{margin:24px 0 0;color:#697b92;font-size:12px}
/* Engineering: ensure code is aligned and readable, not overlaid */
#ingenieria{background:#0e192c;color:#fff}
#ingenieria .engineering-layout{grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);gap:clamp(30px,5vw,75px);align-items:center}
#ingenieria h2{max-width:630px}
#ingenieria .architecture-list{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:0 20px;align-items:stretch}
#ingenieria .architecture-list>.vs-architecture-step{padding:15px 8px;border-bottom:1px solid #35425a;display:grid;grid-template-columns:30px 1fr;gap:1px 13px;min-width:0}
#ingenieria .vs-architecture-step span{grid-row:span 2;color:#e6a673;font-size:12px}
#ingenieria .vs-architecture-step strong{color:#f4f7fc;font-size:14px}
#ingenieria .vs-architecture-step small{color:#bac7d9;font-size:11px;line-height:1.4}
#ingenieria .architecture-code{grid-column:2;grid-row:1/span 4;margin:0;padding:0;overflow:hidden;border:1px solid #40516e;border-radius:12px;background:#0a1222;min-width:0;display:flex;flex-direction:column;gap:0}
.vs-code-top{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;background:#162136;color:#9fb2cf;font-size:10px;border-bottom:1px solid #35425b}
.vs-code-dots{display:flex;gap:5px}.vs-code-dots i{width:7px;height:7px;border-radius:50%;background:#e08d63}.vs-code-dots i:nth-child(2){background:#e6c06d}.vs-code-dots i:nth-child(3){background:#59b68f}
.vs-code-lines{display:grid;gap:16px;padding:24px 16px;flex:1;align-content:center;overflow-wrap:anywhere;color:#dae5f6;font-size:11px;font-weight:650}.vs-code-lines div{white-space:normal}.vs-code-lines em{font-style:normal;color:#7290bb;margin-right:7px}.vs-code-lines b{color:#9ac8ff}.vs-code-lines span{color:#79c9a1}
.vs-code-status{padding:11px 16px;border-top:1px solid #35425b;color:#b7c7df;font-size:9px;letter-spacing:.12em}.vs-code-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#65c9a1;margin-right:5px}
/* portfolio: official assets, correct background hues, five evenly spaced */
#proyectos .vx-project-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:13px}
#proyectos .vx-project-card{grid-column:auto!important;min-width:0;box-shadow:none;display:flex;flex-direction:column}
#proyectos .vx-project-card:hover{transform:translateY(-5px);box-shadow:0 16px 30px #0d325213}
#proyectos .vx-project-art{height:128px;flex:0 0 128px;border-bottom:1px solid #e5e9f2}
#proyectos .vx-project-art.doha{background:#112d49!important}
#proyectos .vx-project-art.diprodeg{background:#194ca6!important}
#proyectos .vx-project-art.chila{background:#ae1e32!important}
#proyectos .vx-project-art.cotiza{background:#e5f0ff;color:#204682}
#proyectos .vx-cotiza-logo{background:#386fd3}
#proyectos .vx-project-art.cotiza strong{font-size:18px;color:#234782}
#proyectos .vx-project-art.cotiza small{font-size:8px;color:#486b9c}
#proyectos .vx-project-art.mccharles{background:#f2f3f0!important}
#proyectos .mcc-identity strong{font-size:27px}
#proyectos .vx-project-content{padding:18px;display:flex;flex:1;flex-direction:column;gap:3px}
#proyectos .vx-project-content .vx-overline{font-size:9px;line-height:1.4;letter-spacing:.06em}
#proyectos .vx-project-content h3{font-size:19px;line-height:1.2}
#proyectos .vx-project-content p{font-size:12px;line-height:1.55;min-height:0;flex:1;margin:7px 0 15px}
#proyectos .vx-project-content a{font-size:12px;color:#225caf;margin-top:auto}
/* mockup showing no invented photographs or fake functionality */
.vs-devices-section{background:#f5f8fc;padding:56px 0 72px}
.vs-device-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:40px;align-items:center}
.vs-device-copy h2{font-size:clamp(29px,3.6vw,44px);letter-spacing:-.05em;line-height:1.12;color:#14243d;margin:13px 0}
.vs-device-copy p{color:#5c6f89;line-height:1.68;max-width:500px}.vs-device-tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px}.vs-device-tags span{border:1px solid #d3dfed;border-radius:9px;padding:8px 11px;color:#243c62;background:white;font-size:12px;font-weight:700}
.vs-device-visual{position:relative;height:315px;min-width:0}
.vs-device-laptop{position:absolute;left:2%;top:7%;width:65%;height:77%;filter:drop-shadow(0 24px 18px #14305127)}
.vs-device-screen{height:88%;border:9px solid #1c2b41;border-radius:10px 10px 5px 5px;background:#f7faff;padding:10px 13px}
.vs-device-laptop-base{height:13px;width:113%;background:linear-gradient(#b4c2d5,#e0e8f2);border-radius:3px 3px 15px 15px;transform:translateX(-6%);box-shadow:0 8px 13px #172b5022}
.vs-device-head{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:800;color:#25447a}.vs-device-head span{margin-right:auto;display:flex;align-items:center;gap:4px}.vs-device-head img{width:18px;height:18px}.vs-device-head i{background:#d7e4f3;border-radius:50%;width:7px;height:7px}
.vs-device-metrics{display:flex;gap:9px;margin:14px 0}.vs-device-metrics span{background:white;border:1px solid #dae4f0;border-radius:6px;display:grid;flex:1;gap:4px;padding:10px;color:#68809e;font-size:9px}.vs-device-metrics strong{font-size:18px;color:#203d70}
.vs-device-chart{height:55px;display:flex;align-items:flex-end;gap:6px}.vs-device-chart i{flex:1;height:55%;background:#5a87dc;border-radius:3px 3px 0 0}.vs-device-chart i:nth-child(2){height:75%}.vs-device-chart i:nth-child(3){height:61%;background:#e6a36c}.vs-device-chart i:nth-child(4){height:95%}.vs-device-chart i:nth-child(5){height:83%;background:#58b0a6}
.vs-device-tablet{position:absolute;bottom:2%;right:10%;width:35%;height:61%;border:9px solid #23364e;border-radius:12px;background:#f8faff;padding:12px;box-shadow:0 15px 30px #14305128}.vs-device-smallhead{font-weight:800;font-size:9px;color:#3467bb}.vs-device-rings{width:78px;height:78px;border-radius:50%;margin:17px auto;background:conic-gradient(#5482d9 0 44%,#e39c67 44% 77%,#57afa9 77%);position:relative}.vs-device-rings:after{content:"";position:absolute;inset:17px;background:#fff;border-radius:50%}.vs-device-tinybars{display:flex;gap:5px;height:30px;align-items:flex-end}.vs-device-tinybars i{height:45%;flex:1;background:#487bd7}.vs-device-tinybars i:nth-child(2){height:72%}.vs-device-tinybars i:nth-child(3){height:89%;background:#e8a576}.vs-device-tinybars i:nth-child(4){height:62%}
.vs-device-phone{position:absolute;bottom:0;right:0;width:18%;height:57%;border:7px solid #182b43;border-radius:19px;background:#fff;padding:17px 7px 5px;box-shadow:0 15px 30px #14305124}.vs-device-notch{position:absolute;width:34%;height:7px;border-radius:0 0 6px 6px;left:33%;top:0;background:#182b43}.vs-device-phonehead{font-size:9px;color:#376bd0;font-weight:900}.vs-device-phonecard{background:#edf3ff;margin-top:13px;border-radius:8px;padding:10px 5px;font-size:9px;color:#627e9e}.vs-device-phonecard strong{display:block;font-size:12px;color:#163867}.vs-device-phonechart{height:27px;margin-top:13px;background:linear-gradient(160deg,transparent 45%,#3d76dc 46%,#3d76dc 51%,transparent 52%)}
/* mobile / tablet legibility */
@media(max-width:1100px){#proyectos .vx-project-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}#ingenieria .architecture-list{grid-template-columns:1fr 1fr}}
@media(max-width:900px){#capacidades .vx-cap-layout{grid-template-columns:1fr}#capacidades .vx-cap-menu{display:flex;overflow:auto;scroll-snap-type:x proximity;padding-bottom:9px}#capacidades .vx-cap-menu button{min-width:200px;flex:0 0 200px;scroll-snap-align:start}.vs-stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}.vs-device-layout{grid-template-columns:1fr}.vs-device-copy{order:-1}.vs-device-visual{max-width:720px;width:100%;margin:auto}#ingenieria .engineering-layout{grid-template-columns:1fr}#proyectos .vx-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:650px){.vs-metric-lab{padding:66px 0}.vs-lab-heading{display:block}.vs-range{width:max-content;max-width:100%;margin-top:17px}.vs-lab-grid{grid-template-columns:1fr}.vs-stat-row{gap:8px}.vs-stat{padding:12px 10px;gap:9px}.vs-stat-icon{height:36px;width:36px;font-size:21px}.vs-stat strong{font-size:19px}.vs-stat small{font-size:10px}.vs-up{font-size:9px}.vs-visual-card{padding:18px}.vs-ring{width:132px;height:132px;flex-basis:132px}.vs-ring::before{inset:18px}.vs-ring-body{gap:18px;min-height:190px}.vs-ring-legend{gap:13px}.vs-bar-box{height:195px}.vs-explainer{display:block;margin:10px 0 0}#ingenieria .architecture-list{grid-template-columns:1fr}#ingenieria .architecture-code{grid-row:auto;grid-column:auto;margin-top:20px;min-height:200px}#proyectos .vx-project-grid{grid-template-columns:minmax(0,1fr)!important}#proyectos .vx-project-art{height:125px;flex-basis:125px}#proyectos .vx-project-content p{margin-bottom:10px}.vs-device-layout{gap:15px}.vs-device-visual{height:220px}.vs-device-screen{border-width:6px;padding:5px}.vs-device-laptop{top:12%}.vs-device-tablet{border-width:6px;padding:5px}.vs-device-phone{border-width:5px;padding:12px 4px}.vs-device-metrics strong{font-size:13px}.vs-device-chart{height:36px}.vs-device-rings{width:45px;height:45px;margin:6px auto}.vs-device-rings:after{inset:12px}}
@media(prefers-reduced-motion:reduce){#vsTrendLine{animation:none}.vs-main-bars i,.vs-goals em,.vs-alt-progress em{animation:none;transition:none}.vs-visual-card{transition:none}}
.vs-reveal{opacity:0;transform:translateY(22px);transition:opacity .72s ease,transform .72s cubic-bezier(.17,.8,.3,1);transition-delay:calc(var(--reveal-order,0) * 55ms)}.vs-reveal.vs-reveal-visible{opacity:1;transform:translateY(0)}@media(prefers-reduced-motion:reduce){.vs-reveal{opacity:1;transform:none;transition:none}}