/* Sección de demos */
.demos{padding:clamp(90px,14vh,160px) 0;border-top:1px solid var(--rule)}
.demos-head{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,5vw,80px);align-items:end}
.ind-tabs{display:flex;gap:clamp(18px,2.6vw,38px);border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none;margin-bottom:clamp(30px,5vh,52px)}
.ind-tabs::-webkit-scrollbar{display:none}
.ind-tabs button{position:relative;flex:none;background:none;border:0;color:var(--fg2);font:200 clamp(18px,1.75vw,25px)/1.2 var(--disp);padding:0 0 18px;cursor:pointer;transition:color .5s;display:flex;gap:10px;align-items:baseline}
.ind-tabs button span{font-size:11.5px;font-weight:300;letter-spacing:.12em}
.ind-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sig);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--out)}
.ind-tabs button:hover,.ind-tabs button[aria-selected="true"]{color:var(--fg)}
.ind-tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.ind-tabs button:focus-visible{outline-offset:-2px}
.ind-stage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,80px);align-items:start}
.ind-info,.frame{transition:opacity .32s ease,transform .7s var(--out)}
.frame{transition-delay:.04s}
.swap .ind-info,.swap .frame{opacity:0;transform:translateY(12px)}

.ind-info dl{margin:0 0 26px}
.ind-info dt{font:400 12px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.ind-info dd{margin:0 0 22px;color:var(--fg2)}
.ind-mod{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:1px 20px;font-size:15.5px}
.ind-mod li{border-top:1px solid var(--rule);padding:10px 0}
.ind-srv{font-size:14.5px;color:var(--fg2);margin:0 0 28px}
.ind-srv span{color:var(--fg)}

/* Marco de navegador */
.frame{--a:#0E7C86;--ink:#14282C;--mut:#5F7377;--bg:#F7FAFA;--card:#fff;--ln:#DDE6E7;--on:#fff;--f:var(--body);--ff:var(--body);border-radius:10px;overflow:hidden;background:var(--bg);color:var(--ink);box-shadow:0 30px 80px -30px rgba(0,0,0,.65),0 0 0 1px rgba(237,242,240,.1);min-width:0}
.frame-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:rgba(0,0,0,.05);border-bottom:1px solid var(--ln)}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.2}
.frame-bar span{margin-left:10px;font:400 12px/1 var(--body);color:var(--mut)}
.demo{padding:clamp(16px,2.2vw,28px);height:620px;overflow-y:auto;font:400 14.5px/1.45 var(--f);-webkit-font-smoothing:antialiased}
.t-comercio{--a:#8A5A36;--ink:#2B211B;--mut:#7B6A5E;--bg:#FAF6F0;--card:#fff;--ln:#E8DFD4;--f:Georgia,"Times New Roman",serif}
.t-gastro{--a:#E2A04D;--ink:#F5EDE1;--mut:#B4A594;--bg:#1E1612;--card:#2A201A;--ln:#40322A;--on:#1E1612;--f:Georgia,"Times New Roman",serif}
.t-inmo{--a:#17181C;--ink:#17181C;--mut:#6B6D73;--bg:#F3F2EE;--card:#fff;--ln:#DEDCD5}
.t-edu{--a:#4A4FC4;--ink:#1F2148;--mut:#676A8E;--bg:#F5F5FC;--card:#fff;--ln:#E0E1F0}
.t-logi{--a:#F2A33A;--ink:#E9EDF2;--mut:#93A0AE;--bg:#12181F;--card:#1B242D;--ln:#2C3843;--on:#12181F}
.demo button{font:inherit;color:inherit;cursor:pointer}
.demo button:disabled{cursor:not-allowed}
.demo :focus-visible{outline:2px solid var(--a);outline-offset:2px}
.d-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--ln)}
.d-top strong{font-size:18px;font-weight:600}
.d-top>span{color:var(--mut);font-size:13px}
.d-step{margin:16px 0 8px;font-size:13px;font-weight:600;color:var(--mut)}
.d-mut{color:var(--mut);font-size:13.5px;margin:8px 0}
.d-chips{display:flex;flex-wrap:wrap;gap:6px}
.d-chip{background:var(--card);border:1px solid var(--ln);border-radius:4px;padding:7px 12px;transition:background-color .3s,color .3s,border-color .3s}
.d-chip:hover{border-color:var(--a)}
.d-chip.is-on{background:var(--a);border-color:var(--a);color:var(--on)!important}
.d-btn{display:block;width:100%;margin-top:16px;background:var(--a);color:var(--on)!important;border:0;border-radius:4px;padding:12px 16px;font-weight:600!important;transition:opacity .3s,transform .5s var(--out)}
.d-btn:hover:not(:disabled){transform:translateY(-1px)}
.d-btn:disabled{opacity:.42}
.d-link{background:none;border:0;border-bottom:1px solid var(--a);padding:2px 0;color:var(--ink);white-space:nowrap}
.d-link:disabled{opacity:.45;border-color:transparent}
.d-qty{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.d-qty button{width:24px;height:24px;background:var(--card);border:1px solid var(--ln);border-radius:4px;padding:0;line-height:1}
.d-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px}
.d-total strong{font-size:18px}
.d-done{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:400px;margin:auto;animation:dIn .8s var(--out)}
.d-done h4{font-size:26px;font-weight:600;margin:14px 0 8px;font-family:inherit}
.d-done p{margin:0 0 6px}
.d-check{width:38px;height:38px;border-radius:50%;background:var(--a);position:relative}
.d-check::after{content:"";position:absolute;left:13px;top:9px;width:9px;height:16px;border:solid var(--on);border-width:0 2px 2px 0;transform:rotate(42deg)}
@keyframes dIn{from{opacity:0;transform:translateY(10px)}}

/* Salud */
.d-days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:8px}
.d-day{background:var(--card);border:1px solid var(--ln);border-radius:4px;padding:8px 0;font-size:17px!important;font-weight:600!important;transition:background-color .3s,color .3s}
.d-day small{display:block;font-size:11.5px;font-weight:400;color:inherit;opacity:.72}
.d-day.is-on{background:var(--a);border-color:var(--a);color:var(--on)!important}
.d-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.d-slot{background:var(--card);border:1px solid var(--ln);border-radius:4px;padding:8px 0;transition:background-color .3s,color .3s}
.d-slot.is-on{background:var(--a);color:var(--on)!important;border-color:var(--a)}
.d-slot:disabled{opacity:.34;text-decoration:line-through}

/* Comercio */
.d-shop{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;margin-top:14px}
.d-prods{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.d-prod{animation:dIn .6s var(--out) both}
.d-swatch{aspect-ratio:2.5;background:linear-gradient(145deg,var(--c),color-mix(in srgb,var(--c) 62%,#000));border-radius:4px;margin-bottom:8px}
.d-prod h5,.d-dish h5,.d-prop h5,.d-cart h5{font:inherit;font-weight:600;margin:0}
.d-prod p{margin:0 0 2px;color:var(--mut)}
.d-cart{background:var(--card);border:1px solid var(--ln);border-radius:4px;padding:14px;align-self:start;position:sticky;top:0}
.d-cart h5{margin-bottom:10px}
.d-line{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--ln);font-size:13.5px}

/* Gastronomía */
.d-menu{margin-top:12px}
.d-dish{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--ln);animation:dIn .6s var(--out) both}
.d-dish h5{font-size:16px}
.d-dish p{margin:2px 0 0;color:var(--mut)}
.d-book{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:12px;align-items:end;margin-top:16px}
.demo label{font-size:12.5px;color:var(--mut);display:block}
.demo select{display:block;width:100%;margin-top:4px;background:var(--card);color:var(--ink);border:1px solid var(--ln);border-radius:4px;padding:8px;font:inherit;font-size:14px}
.d-book .d-total{margin:0;display:block;text-align:right}
.d-book .d-total span{display:block;font-size:12.5px;color:var(--mut)}

/* Inmobiliaria */
.d-seg{display:inline-flex;border:1px solid var(--ln);border-radius:4px;overflow:hidden}
.d-seg button{background:none;border:0;padding:6px 12px;transition:background-color .3s,color .3s}
.d-seg .is-on{background:var(--a);color:var(--bg)!important}
.t-inmo .d-chip.is-on,.t-inmo .d-btn{color:#fff!important}
.d-filter{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.d-filter label{min-width:140px}
.d-prop{display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--ln);animation:dIn .6s var(--out) both}
.d-prop h5{font-size:15px}
.d-prop p{margin:1px 0;color:var(--mut);font-size:13px}
.d-plan{height:50px;display:grid;grid-template:1fr 1fr/1.4fr 1fr;gap:2px;border:1.5px solid var(--ink);padding:2px}
.d-plan i{background:var(--ln)}
.d-plan i:first-child{grid-row:span 2;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.d-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;margin:14px 0}
.d-kpis div{background:var(--card);border:1px solid var(--ln);border-radius:4px;padding:11px 12px}
.d-kpis small{display:block;color:var(--mut);font-size:12px}
.d-kpis strong{font-size:21px;font-weight:600}
.d-bars{height:150px;display:flex;align-items:flex-end;gap:8px;border-bottom:1px solid var(--ln);margin-top:24px}
.d-bars i{flex:1;background:var(--a);position:relative;animation:dGrow .9s var(--out) both;transform-origin:bottom}
.d-bars b{position:absolute;top:-20px;left:0;right:0;text-align:center;font-style:normal;font-weight:500;font-size:12px}
@keyframes dGrow{from{transform:scaleY(0)}}

/* Educación */
.d-rows{display:grid}
.d-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--ln)}
.d-row>span:first-child{min-width:96px}
.d-tag{border:1px solid var(--ln);background:var(--card);border-radius:4px;padding:4px 10px;font-size:13px!important;transition:background-color .3s,color .3s;min-width:82px}
.d-tag.is-on{background:color-mix(in srgb,var(--a) 13%,transparent);border-color:transparent;color:var(--a)!important}
.d-meter{flex:1;height:5px;background:var(--ln)}
.d-meter i{display:block;height:100%;background:var(--a);animation:dBar .9s var(--out) both;transform-origin:left}
@keyframes dBar{from{transform:scaleX(0)}}
.d-note{background:var(--card);border:1px solid var(--ln);border-radius:4px;padding:12px 14px}

/* Logística */
.d-flow{display:grid;gap:7px;margin-bottom:14px}
.d-flow>div{display:grid;grid-template-columns:82px 1fr 16px;gap:10px;align-items:center;font-size:12.5px}
.d-flow small{font-size:12.5px;color:var(--mut)}
.d-flow span{height:5px;background:var(--ln)}
.d-flow i{display:block;height:100%;background:var(--a);transition:width .8s var(--out)}
.d-flow b{font-weight:500;text-align:right}
.d-table .d-row{display:grid;grid-template-columns:52px 1fr 86px 58px;gap:8px;padding:7px 0;font-size:13.5px}
.d-table .d-row>span:first-child{min-width:0}
.d-st{font-size:12.5px;color:var(--mut)}
.d-st.s2{color:var(--a)}
.d-st.s3{color:#5CCB9A}

/* Preguntas */
.faq{padding:clamp(90px,14vh,160px) 0 0}
.faq-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(30px,6vw,110px)}
.q{border-top:1px solid var(--rule)}
.q:last-child{border-bottom:1px solid var(--rule)}
.q button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;background:none;border:0;color:inherit;text-align:left;padding:22px 0;cursor:pointer;font:200 clamp(18px,1.7vw,24px)/1.3 var(--disp)}
.q button i{position:relative;width:15px;height:15px;flex:none}
.q button i::before,.q button i::after{content:"";position:absolute;background:currentColor;transition:transform .7s var(--out)}
.q button i::before{left:0;right:0;top:7px;height:1px}
.q button i::after{top:0;bottom:0;left:7px;width:1px}
.q.open button i::after{transform:scaleY(0)}
.q-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--out)}
.q.open .q-body{grid-template-rows:1fr}
.q-body>div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s .8s}
.q.open .q-body>div{visibility:visible;transition-delay:0s}
.q-body p{margin:0;padding:0 40px 26px 0;color:var(--fg2);max-width:58ch}

@media(max-width:900px){
  .demos-head,.ind-stage,.faq-grid{grid-template-columns:1fr}
  .demo{height:auto;min-height:480px}
  .d-swatch{aspect-ratio:1.4}
  .d-shop{grid-template-columns:1fr}
  .d-cart{position:static}
  .d-book{grid-template-columns:1fr 1fr}
  .d-book .d-total{grid-column:1/-1;display:flex;text-align:left}
  .d-prop{grid-template-columns:50px 1fr}
  .d-prop .d-link{grid-column:2;justify-self:start}
  .d-table .d-row{grid-template-columns:44px 1fr 72px 54px;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){.d-bars i,.d-meter i,.d-prod,.d-dish,.d-prop,.d-done{animation:none}}