/* ==========================================================
   Umbral Proyectos — ficha y listado
   ========================================================== */
.upj,.upg{--ink:#022026;--ink2:#0C2A30;--ink3:#16343A;--soft:#F7F7F7;--txt:#5B7075;--acc:#CCECFC;--line:rgba(2,32,38,.12);--r:24px;font-family:"Inter Tight",system-ui,-apple-system,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
.upj *,.upg *{box-sizing:border-box}
.upj h1,.upj h2,.upj h3,.upg h3{font-family:inherit;color:var(--ink);margin:0;font-weight:600}
.upj p{margin:0}
.upj ul,.upj ol,.upg ul{list-style:none;margin:0;padding:0}
.upj a{color:inherit;text-decoration:none}
.upj-wrap{width:100%;max-width:1208px;margin:0 auto;padding:0 24px}

/* Etiquetas y botones */
.upj-label{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--txt);margin-bottom:18px}
.upj-label:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink)}
.upj-label-inv{color:rgba(255,255,255,.64)}.upj-label-inv:before{background:var(--acc)}
.upj-chip{display:inline-flex;align-items:center;font-size:12px;font-weight:500;padding:5px 10px;border-radius:999px;background:var(--acc);color:var(--ink)}
.upj-btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border-radius:8px;border:1px solid var(--ink);font-size:16px;font-weight:500;color:var(--ink);background:#fff;transition:transform .2s,background .2s,color .2s}
.upj-btn:hover{transform:translateY(-2px)}
.upj-btn-dark{background:var(--ink);color:#fff!important}
.upj-btn-dark:hover{background:var(--ink3)}
.upj-btn svg{transition:transform .25s}.upj-btn:hover svg{transform:translate(2px,-2px)}

/* ---------- Hero ---------- */
.upj-hero{padding-top:56px;padding-bottom:48px}
.upj-crumbs{display:flex;gap:8px;font-size:13px;color:var(--txt);margin-bottom:28px;flex-wrap:wrap}
.upj-crumbs a:hover{color:var(--ink)}
.upj-crumbs b{font-weight:500;color:var(--ink)}
.upj-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:24px}
.upj-live{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;padding:4px 10px 4px 8px;border:1px solid var(--line);border-radius:999px;color:var(--ink)}
.upj-live i{width:7px;height:7px;border-radius:50%;background:#2FB36B;box-shadow:0 0 0 0 rgba(47,179,107,.5);animation:upjPulse 2s infinite}
@keyframes upjPulse{70%{box-shadow:0 0 0 7px rgba(47,179,107,0)}100%{box-shadow:0 0 0 0 rgba(47,179,107,0)}}
.upj-hero-grid{display:grid;grid-template-columns:1fr auto;gap:28px 64px;align-items:end}
.upj-hero-grid .upj-title{grid-column:1/-1}
.upj-hero-side{display:contents}
.upj-hero-side .upj-sub{grid-column:1;max-width:680px;margin:0!important}
.upj-hero-side .upj-ctas{grid-column:2;justify-content:flex-end}
.upj-title{font-size:clamp(56px,9.4vw,136px)!important;line-height:.9!important;letter-spacing:-.055em!important}
.upj-sub{font-size:clamp(18px,1.5vw,21px);line-height:1.45;color:var(--txt);margin-bottom:28px!important}
.upj-ctas{display:flex;gap:10px;flex-wrap:wrap}
.upj-meta{display:grid;grid-template-columns:repeat(5,1fr);gap:0 24px;margin:64px 0 0}
.upj-meta>div{border-top:1px solid var(--ink);padding-top:14px}
.upj-meta dt{font-size:13px;color:var(--txt);margin-bottom:6px}
.upj-meta dd{margin:0;font-size:17px;font-weight:500;line-height:1.3}
.upj-meta dd a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Escenario / navegador ---------- */
.upj-stage-wrap{margin-bottom:24px}
.upj-stage{position:relative;overflow:hidden;border-radius:28px;background:var(--ink);padding:clamp(28px,5vw,72px) clamp(16px,6vw,96px) 0;isolation:isolate}
.upj-stage:before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000 0%,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%)}
.upj-stage:after{content:"";position:absolute;z-index:-1;width:70%;height:80%;left:15%;top:18%;background:var(--brand);filter:blur(120px);opacity:.55;border-radius:50%}
.upj-browser{position:relative;background:#fff;border-radius:14px 14px 0 0;box-shadow:0 40px 120px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.upj-chrome{display:flex;align-items:flex-end;gap:18px;padding:12px 14px 0;background:#E9EDEE}
.upj-dots{display:flex;gap:7px;padding-bottom:12px}
.upj-dots i,.upg-bar i{width:11px;height:11px;border-radius:50%;background:#FF5F57}
.upj-dots i:nth-child(2),.upg-bar i:nth-child(2){background:#FEBC2E}
.upj-dots i:nth-child(3),.upg-bar i:nth-child(3){background:#28C840}
.upj-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.upj-tabs::-webkit-scrollbar{display:none}
.upj-tabs button{position:relative;border:0;background:transparent;color:var(--txt);font:500 13px/1 "Inter Tight",sans-serif;padding:11px 18px 12px;border-radius:10px 10px 0 0;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.upj-tabs button:hover{background:rgba(255,255,255,.55);color:var(--ink)}
.upj-tabs button.is-on{background:#fff;color:var(--ink)}
.upj-addr{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid #E6EAEB;background:#fff}
.upj-nav{display:flex;gap:6px;color:#9AA7AA}
.upj-url{flex:1;display:flex;align-items:center;gap:6px;min-width:0;background:#F1F3F4;border-radius:999px;padding:7px 14px;font-size:13px;color:var(--txt);white-space:nowrap;overflow:hidden}
.upj-url b{font-weight:500;color:var(--ink)}
.upj-url em{font-style:normal;overflow:hidden;text-overflow:ellipsis}
.upj-open{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:var(--ink);transition:background .2s}
.upj-open:hover{background:#F1F3F4}
.upj-viewports{position:relative;height:clamp(340px,52vw,640px);background:#fff}
.upj-vp{position:absolute;inset:0;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s;scrollbar-width:none;outline:0}
.upj-vp::-webkit-scrollbar{display:none}
.upj-vp.is-on{opacity:1;visibility:visible}
.upj-vp img{display:block;width:100%;height:auto;max-width:none}
.upj-progress{position:absolute;right:8px;top:12px;bottom:12px;width:3px;border-radius:3px;background:rgba(2,32,38,.08);pointer-events:none}
.upj-progress i{position:absolute;left:0;right:0;top:0;height:18%;border-radius:3px;background:var(--ink);opacity:.55}
.upj-hint{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);background:rgba(2,32,38,.86);color:#fff;font-size:12px;font-weight:500;padding:8px 14px;border-radius:999px;pointer-events:none;transition:opacity .4s;backdrop-filter:blur(6px)}
.upj-browser.is-touched .upj-hint{opacity:0}
.upj-phone{width:230px;border-radius:38px;padding:9px;background:#0B1416;box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.12)}
.upj-phone-in{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:337/729;background:#fff}
.upj-phone-in:before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:34%;height:20px;border-radius:20px;background:#0B1416;z-index:2}
.upj-phone-in img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.upj-phone-float{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(24px,4vw,48px);z-index:3;transform:rotate(4deg);transition:transform .5s}
.upj-stage:hover .upj-phone-float{transform:rotate(0) translateY(-6px)}
.upj-captions{position:relative;min-height:56px;margin-top:20px}
.upj-captions p{position:absolute;inset:0 auto auto 0;max-width:760px;font-size:15px;line-height:1.5;color:var(--txt);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.upj-captions p.is-on{opacity:1;transform:none;position:relative}
.upj-captions b{color:var(--ink);font-weight:600}

/* ---------- El proyecto ---------- */
.upj-story{padding-top:96px;padding-bottom:120px}
.upj-story-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:64px}
.upj-lead{font-size:clamp(24px,2.6vw,36px);line-height:1.25;letter-spacing:-.02em;font-weight:500;color:var(--ink)}
.upj-story-cols{display:grid;gap:32px}
.upj-story-cols h3{font-size:17px;margin-bottom:8px}
.upj-story-cols p{font-size:17px;line-height:1.6;color:var(--txt)}
.upj-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:88px}
.upj-metric{border-top:1px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:8px}
.upj-num{font-size:clamp(48px,6.2vw,92px);font-weight:600;letter-spacing:-.05em;line-height:.95;font-variant-numeric:tabular-nums}
.upj-mlab{font-size:15px;line-height:1.4;color:var(--txt);max-width:240px}

/* ---------- Etiquetas ---------- */
.upj-tagsec{background:var(--soft);padding:120px 0}
.upj-sec-head{margin-bottom:48px}
.upj-sec-head h2,.upj-mobile h2,.upj-cta h2{font-size:clamp(40px,5.4vw,76px)!important;line-height:.98!important;letter-spacing:-.045em!important}
.upj-sec-head-row{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end}
.upj-sec-head-row>p{font-size:17px;line-height:1.55;color:var(--txt)}
.upj-taggroups{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.upj-tg{background:#fff;border-radius:20px;padding:28px 24px 30px;transition:transform .3s,box-shadow .3s}
.upj-tg:hover{transform:translateY(-4px);box-shadow:0 24px 48px rgba(2,32,38,.08)}
.upj-tg-h{display:flex;align-items:baseline;gap:10px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.upj-tg-h span{font-size:12px;color:var(--txt);font-variant-numeric:tabular-nums}
.upj-tg-h h3{font-size:20px;letter-spacing:-.02em}
.upj-tg ul{display:flex;flex-wrap:wrap;gap:6px}
.upj-tg li{font-size:14px;line-height:1;padding:9px 13px;border:1px solid var(--line);border-radius:999px;transition:background .2s,color .2s,border-color .2s;cursor:default}
.upj-tg li:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Qué hicimos (bento) ---------- */
.upj-work{padding-top:120px;padding-bottom:120px}
.upj-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.upj-card{grid-column:span 2;display:flex;flex-direction:column;border-radius:var(--r);padding:30px;background:var(--ink);color:#fff;min-height:300px;overflow:hidden;position:relative}
.upj-card h3{color:#fff;font-size:26px;letter-spacing:-.03em;line-height:1.08;margin:auto 0 12px}
.upj-card p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.66)}
.upj-card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:48px}
.upj-card-n{font-size:13px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.5)}
.upj-mini{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}
.upj-mini li{font-size:11px;font-weight:500;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.8)}
.upj-card.has-img{grid-column:span 3;background:var(--soft);color:var(--ink);padding-bottom:0}
.upj-card.has-img h3{color:var(--ink);margin-top:0}
.upj-card.has-img p{color:var(--txt);max-width:460px}
.upj-card.has-img .upj-card-h{margin-bottom:28px}
.upj-card.has-img .upj-card-n{color:var(--txt)}
.upj-card.has-img .upj-mini li{background:#fff;color:var(--ink)}
.upj-card-shot{margin:32px -2px 0;border-radius:12px 12px 0 0;overflow:hidden;background:#fff;box-shadow:0 20px 50px rgba(2,32,38,.12);transform:translateY(12px);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.upj-card:hover .upj-card-shot{transform:translateY(0)}
.upj-card-img{height:300px;background-size:100% auto;background-position:50% 0;background-repeat:no-repeat;transition:background-position 5s ease-in-out}
.upj-card:hover .upj-card-img{background-position:50% 100%}
.upj-card.is-wide{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.5fr;grid-template-rows:auto 1fr auto;column-gap:56px;padding:40px 0 0 40px}
.upj-card.is-wide .upj-card-h{grid-column:1;grid-row:1;margin-bottom:0}
.upj-card.is-wide .upj-card-h{justify-content:flex-start;gap:16px}
.upj-card.is-wide .upj-mini{justify-content:flex-start}
.upj-card.is-wide>h3{grid-column:1;grid-row:2;align-self:end;font-size:clamp(28px,3vw,40px);margin-bottom:14px}
.upj-card.is-wide>p{grid-column:1;grid-row:3;padding-bottom:40px}
.upj-card.is-wide .upj-card-shot{grid-column:2;grid-row:1/span 3;margin:0;align-self:end}
.upj-card.is-wide .upj-card-img{height:420px}
.upg-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#E9EDEE}
.upg-bar i{width:9px;height:9px}

/* ---------- Móvil ---------- */
.upj-mobile{background:var(--ink);color:#fff;padding:120px 0;overflow:hidden}
.upj-mobile-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:center}
.upj-mobile h2{color:#fff!important;margin-bottom:22px!important;font-size:clamp(36px,4.2vw,60px)!important}
.upj-mobile-txt p{font-size:17px;line-height:1.6;color:rgba(255,255,255,.66);max-width:440px}
.upj-phones{display:flex;justify-content:center;gap:24px}
.upj-phones .upj-phone{transform:translateY(calc(var(--i) * 48px));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.upj-phones .upj-phone:hover{transform:translateY(calc(var(--i) * 48px - 10px))}

/* ---------- Proceso ---------- */
.upj-process{padding-top:120px;padding-bottom:40px}
.upj-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;counter-reset:s}
.upj-steps li{position:relative;padding-top:26px;border-top:1px solid var(--line)}
.upj-steps li:before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.upj-step-n{display:block;font-size:13px;color:var(--txt);margin-bottom:14px}
.upj-steps h3{font-size:21px;letter-spacing:-.02em;margin-bottom:8px}
.upj-steps p{font-size:15px;line-height:1.5;color:var(--txt)}
.upj-stack{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:80px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.upj-stack-l{font-size:14px;color:var(--txt)}
.upj-stack ul{display:flex;flex-wrap:wrap;gap:8px}
.upj-stack li{font-size:14px;font-weight:500;padding:8px 14px;background:var(--soft);border-radius:8px}

/* ---------- Final ---------- */
.upj-end{padding-top:80px;padding-bottom:120px}
.upj-next{display:block;padding:40px 0 48px;border-bottom:1px solid var(--ink);margin-bottom:64px}
.upj-next .upj-label{margin-bottom:8px}
.upj-next-t{display:flex;align-items:center;justify-content:space-between;font-size:clamp(48px,8vw,120px);font-weight:600;letter-spacing:-.055em;line-height:1}
.upj-next-t svg{width:clamp(40px,6vw,88px);height:auto;transition:transform .35s}
.upj-next:hover .upj-next-t svg{transform:translate(8px,-8px)}
.upj-cta{display:flex;justify-content:space-between;align-items:center;gap:40px;background:var(--soft);border-radius:var(--r);padding:clamp(32px,5vw,56px)}
.upj-cta .upj-chip{margin-bottom:22px}
.upj-cta h2{margin-bottom:16px!important}
.upj-cta p{font-size:17px;line-height:1.55;color:var(--txt);max-width:520px}
.upj-cta-btns{display:flex;flex-direction:column;gap:10px;flex-shrink:0}

/* ==========================================================
   Listado de proyectos
   ========================================================== */
.upg{position:relative}
.upg-bar-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:40px;flex-wrap:wrap}
.upg-filters{display:flex;flex-wrap:wrap;gap:8px}
.upg-filters button,.upg-views button{font:500 15px/1 "Inter Tight",sans-serif;border:1px solid var(--ink);background:#fff;color:var(--ink);border-radius:999px;padding:12px 18px;cursor:pointer;transition:background .2s,color .2s}
.upg-filters button sup{font-size:10px;margin-left:2px;opacity:.55;vertical-align:super}
.upg-filters button:hover{background:var(--soft)}
.upg-filters button.is-on{background:var(--ink);color:#fff}
.upg-views{display:flex;align-items:center;gap:6px}
.upg-count{font-size:14px;color:var(--txt);margin-right:10px}
.upg-count b{color:var(--ink);font-weight:600}
.upg-views button{width:42px;height:42px;padding:0;display:grid;place-items:center;border-color:var(--line)}
.upg-views button.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}

.upg-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:48px 24px}
.upg-card{position:relative;grid-column:span 6;transition:opacity .4s,transform .4s}
.upg-card:nth-child(4n+1){grid-column:span 7}
.upg-card:nth-child(4n+2){grid-column:span 5}
.upg-card:nth-child(4n+3){grid-column:span 5}
.upg-card:nth-child(4n+4){grid-column:span 7}
.upg-card.is-out{display:none}
.upg-link{position:absolute;inset:0;z-index:4}
.upg-media{position:relative;border-radius:var(--r);background:var(--soft);padding:28px 28px 0;overflow:hidden;aspect-ratio:4/3;display:flex;align-items:flex-end;transition:background .5s}
.upg-media:after{content:"";position:absolute;width:60%;height:60%;left:20%;bottom:-20%;border-radius:50%;background:var(--brand);filter:blur(80px);opacity:0;transition:opacity .6s}
.upg-card:hover .upg-media{background:var(--ink)}
.upg-card:hover .upg-media:after{opacity:.6}
.upg-win{position:relative;z-index:1;width:100%;height:92%;background:#fff;border-radius:12px 12px 0 0;overflow:hidden;box-shadow:0 24px 60px rgba(2,32,38,.14);transform:translateY(10px);transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s;display:flex;flex-direction:column}
.upg-card:hover .upg-win{transform:translateY(0);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.upg-addr{margin-left:10px;display:inline-flex;align-items:center;gap:5px;background:#fff;border-radius:999px;padding:3px 12px;font-size:11px;color:var(--txt);flex:0 1 240px}
.upg-shot{flex:1;background-size:100% auto;background-repeat:no-repeat;background-position:50% 0;transition:background-position 7s ease-in-out}
.upg-card:hover .upg-shot{background-position:50% 100%}
.upg-info{position:relative;padding:22px 64px 0 4px}
.upg-top{display:flex;gap:14px;font-size:13px;color:var(--txt);margin-bottom:10px}
.upg-n{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.upg-year{margin-left:auto}
.upg-title{font-size:clamp(28px,2.6vw,38px)!important;letter-spacing:-.04em!important;line-height:1!important;margin-bottom:10px!important}
.upg-sub{font-size:16px;line-height:1.5;color:var(--txt);margin:0 0 16px;max-width:560px}
.upg-tags{display:flex;flex-wrap:wrap;gap:6px}
.upg-tags li{font-size:12px;font-weight:500;padding:6px 10px;border-radius:999px;background:var(--soft)}
.upg-go{position:absolute;right:4px;top:26px;width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;transition:background .3s,color .3s,transform .4s}
.upg-card:hover .upg-go{background:var(--ink);color:#fff;transform:rotate(45deg)}

/* Tarjeta XL (destacada o proyecto único) */
.upg-card.is-xl{grid-column:1/-1!important;display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:48px;align-items:end}
.upg-card.is-xl .upg-media{aspect-ratio:16/10;padding:40px 48px 0}
.upg-card.is-xl .upg-info{padding:0 0 12px}
.upg-card.is-xl .upg-title{font-size:clamp(40px,4.2vw,64px)!important;margin-bottom:16px!important;overflow-wrap:break-word}
.upg-card.is-xl .upg-sub{font-size:18px}
.upg-card.is-xl .upg-go{position:static;margin-top:28px;width:56px;height:56px}
.upg-card.is-xl .upg-top{margin-bottom:18px}

/* Cursor */
.upg-cursor{position:fixed;left:0;top:0;z-index:50;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:500;pointer-events:none;transform:scale(0);transition:transform .25s cubic-bezier(.2,.7,.2,1);text-align:center}
.upg-cursor.is-on{transform:scale(1)}
@media (hover:none){.upg-cursor{display:none}}

/* Vista lista */
.upl{display:none;border-top:1px solid var(--ink)}
.upg[data-vista="lista"] .upg-grid{display:none}
.upg[data-vista="lista"] .upl{display:block}
.upl-row{display:grid;grid-template-columns:56px 2fr 1.4fr 1.4fr 70px 44px;gap:20px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:padding .35s,background .35s}
.upl-row.is-out{display:none}
.upl-row:hover{padding-left:16px;padding-right:16px;background:var(--soft)}
.upl-n{font-size:13px;color:var(--txt)}
.upl-t{font-size:clamp(28px,3.2vw,44px);font-weight:600;letter-spacing:-.045em;line-height:1}
.upl-s,.upl-c,.upl-y{font-size:15px;color:var(--txt)}
.upl-go{width:40px;height:40px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;transition:transform .35s,background .35s,color .35s}
.upl-row:hover .upl-go{transform:rotate(45deg);background:var(--ink);color:#fff}
.upl-float{position:fixed;left:0;top:0;z-index:40;width:380px;height:250px;margin:-125px 0 0 24px;pointer-events:none;opacity:0;transform:scale(.9) rotate(-3deg);transition:opacity .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.upl-float.is-on{opacity:1;transform:scale(1) rotate(-3deg)}
.upl-float-in{width:100%;height:100%;border-radius:14px;background-size:100% auto;background-position:50% 0;box-shadow:0 30px 70px rgba(2,32,38,.3);border:6px solid #fff}
.upg-none{padding:48px 0;color:var(--txt);font-size:17px}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
	.upj-hero-grid{grid-template-columns:1fr}
	.upj-hero-side .upj-ctas{grid-column:1;justify-content:flex-start}
	.upj-story-grid,.upj-sec-head-row,.upj-mobile-grid{grid-template-columns:1fr;gap:32px}
	.upj-meta{grid-template-columns:repeat(3,1fr);gap:24px}
	.upj-metrics{grid-template-columns:repeat(2,1fr);gap:40px 24px}
	.upj-taggroups{grid-template-columns:repeat(2,1fr)}
	.upj-bento{grid-template-columns:repeat(2,1fr)}
	.upj-card,.upj-card.has-img{grid-column:span 1}
	.upj-card.has-img,.upj-card.is-wide{grid-column:1/-1}
	.upj-card.is-wide{display:flex;flex-direction:column;padding:30px 30px 0}
	.upj-card.is-wide>h3{margin-top:0}
	.upj-card.is-wide>p{padding-bottom:0}
	.upj-card.is-wide .upj-card-shot{margin-top:32px;align-self:stretch}
	.upj-card.is-wide .upj-card-img{height:300px}
	.upj-steps{grid-template-columns:repeat(2,1fr);gap:32px 20px}
	.upj-phone-float{display:none}
	.upj-cta{flex-direction:column;align-items:flex-start}
	.upg-card,.upg-card:nth-child(n){grid-column:1/-1}
	.upg-card.is-xl{grid-template-columns:1fr;gap:0}
	.upg-card.is-xl .upg-info{padding-top:24px}
	.upl-row{grid-template-columns:40px 1fr 44px}
	.upl-s,.upl-c,.upl-y{display:none}
	.upl-float{display:none}
}
@media (max-width:640px){
	.upj-wrap{padding:0 16px}
	.upj-hero{padding-top:32px}
	.upj-meta{grid-template-columns:repeat(2,1fr)}
	.upj-stage{border-radius:20px;padding:20px 12px 0}
	.upj-chrome{gap:10px;padding:10px 10px 0}
	.upj-dots{display:none}
	.upj-tabs button{padding:10px 12px 11px;font-size:12px}
	.upj-nav{display:none}
	.upj-viewports{height:440px}
	.upj-story,.upj-work,.upj-process{padding-top:72px;padding-bottom:72px}
	.upj-tagsec,.upj-mobile{padding:72px 0}
	.upj-metrics{grid-template-columns:1fr 1fr}
	.upj-taggroups,.upj-bento,.upj-steps{grid-template-columns:1fr}
	.upj-card{min-height:0}
	.upj-card-h{margin-bottom:28px}
	.upj-phones{gap:12px}
	.upj-phones .upj-phone{width:46%;border-radius:28px;padding:6px}
	.upj-phones .upj-phone-in{border-radius:22px}
	.upj-phones .upj-phone:nth-child(3){display:none}
	.upj-btn{height:48px;padding:0 18px;font-size:15px}
	.upg-media{padding:18px 18px 0}
	.upg-card.is-xl .upg-media{padding:18px 18px 0;aspect-ratio:4/3}
	.upg-info{padding-right:56px}
	.upg-views .upg-count{display:none}
}
@media (prefers-reduced-motion:reduce){.upj *,.upg *{transition:none!important;animation:none!important}}
.ud--gris .upg-media{background:#fff}.ud--gris .upg-tags li{background:#fff}