/* Páginas de apps de balcardev.online: misma estética que la home (relieve, Bricolage + Fraunces, menta). Lo genera tools/web/build_app_pages.js */
:root{--night:#04132E;--navy:#052D66;--blue:#0A5CA8;--cyan:#04A4DC;--green:#0AA574;--lime:#5CD474;--mint:#6CDCC4;--card:#0A2147;--line:rgba(255,255,255,.1);--ink:#EAF1FA;--mut:#9CB0CB;
--disp:"Bricolage Grotesque",system-ui,sans-serif;--serif:Fraunces,Georgia,serif;--body:Inter,system-ui,sans-serif;--pad:clamp(20px,5vw,64px)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--ink);font:400 16px/1.6 var(--body);overflow-x:hidden}
a{color:inherit}img{display:block;max-width:100%}::selection{background:var(--mint);color:var(--night)}
.bar{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px var(--pad);padding-top:max(14px,env(safe-area-inset-top));transition:background .4s}
.bar.s{background:rgba(4,19,46,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 19px var(--disp);letter-spacing:-.03em}.brand b{color:var(--green)}
.bdm{display:inline-block;width:52px;height:20.7px;background:url(/brand/balcardev-logo-original.png) no-repeat;background-size:61.8px auto;background-position:-5.2px -1.7px}
.bar nav{display:flex;align-items:center;gap:4px}.bar nav a{font:600 13.5px var(--body);text-decoration:none;padding:8px 12px;border-radius:99px;opacity:.8}.bar nav a:hover{opacity:1;background:rgba(255,255,255,.08)}
.lang{display:flex;border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:3px;margin-left:6px}.lang a{font:700 11.5px var(--body)!important;padding:5px 10px!important;opacity:.7}.lang a.on{background:#fff;color:var(--night);opacity:1}
.hero{position:relative;min-height:max(100svh,640px);overflow:hidden;display:flex;align-items:flex-end}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;background:radial-gradient(120% 90% at 70% 110%,#0A5CA8 0,#052D66 40%,#04132E 75%)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent,var(--night));pointer-events:none}
.hwrap{position:relative;z-index:2;width:100%;max-width:1280px;margin:0 auto;padding:110px var(--pad) clamp(50px,9vh,100px);display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:end}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.chips span{font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mint);border:1px solid rgba(108,220,196,.3);background:rgba(4,19,46,.4);padding:6px 12px;border-radius:99px}
.chips span:first-child{color:#fff;border-color:transparent;background:var(--c)}
.hic{width:92px;height:92px;border-radius:24px;box-shadow:0 20px 50px rgba(0,0,0,.45);margin-bottom:18px}
h1{font:800 clamp(56px,11vw,150px)/.88 var(--disp);letter-spacing:-.055em;margin:0}
h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}h1 .ln>span{display:inline-block}
h1 em{font:italic 400 .62em var(--serif);color:var(--mint);letter-spacing:-.03em}
.short{font-size:clamp(17px,1.9vw,21px);max-width:560px;color:#C9D6E8;margin:18px 0 26px}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.gp{display:inline-flex;align-items:center;gap:10px;font:700 15.5px var(--body);text-decoration:none;color:var(--night);background:linear-gradient(110deg,var(--mint),var(--lime));padding:15px 24px;border-radius:99px;box-shadow:0 18px 44px rgba(108,220,196,.25);transition:transform .25s}.gp:hover{transform:translateY(-3px)}.gp svg{width:18px;height:18px}
.ghost{display:inline-flex;align-items:center;gap:8px;font:700 14.5px var(--body);text-decoration:none;padding:13px 20px;border-radius:99px;border:1.5px solid rgba(255,255,255,.35)}.ghost:hover{background:rgba(255,255,255,.08)}
.soon{font-size:13px;color:var(--mut);width:100%;margin-top:4px}
.stage{position:relative;height:clamp(380px,48vw,560px)}
.ph{position:absolute;bottom:0;width:clamp(150px,17vw,230px);aspect-ratio:9/16;border-radius:clamp(22px,2.4vw,32px);border:5px solid #081426;overflow:hidden;background:#000;box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.1)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.a{left:0;transform:rotate(-8deg);animation:fl 7s ease-in-out infinite}.ph.b{left:28%;bottom:8%;z-index:2;width:clamp(170px,19vw,250px);animation:fl 8s ease-in-out -2s infinite}.ph.c{right:0;transform:rotate(8deg);animation:fl 9s ease-in-out -4s infinite}
@keyframes fl{50%{translate:0 -14px}}
.band{overflow:hidden;border-block:1px solid var(--line);padding:20px 0;white-space:nowrap}
.band .tr{display:inline-flex;gap:40px;will-change:transform}
.band span{font:700 clamp(26px,4.4vw,60px)/1 var(--disp);letter-spacing:-.04em;display:inline-flex;align-items:center;gap:40px}
.band span::after{content:"";width:.26em;height:.26em;background:var(--lime);transform:rotate(45deg);border-radius:3px;box-shadow:0 0 16px var(--lime)}
.band span:nth-child(even){font-family:var(--serif);font-style:italic;font-weight:400;color:var(--mint)}
section{max-width:1280px;margin:0 auto;padding:clamp(80px,13vh,140px) var(--pad) 0}section:last-of-type{padding-bottom:clamp(64px,10vh,110px)}
.lab{font:600 12px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--mint);display:flex;align-items:center;gap:12px;margin:0 0 22px}.lab::before{content:"";width:28px;height:1px;background:currentColor}
.shots{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 24px;scrollbar-width:thin}
.shots figure{margin:0;flex:0 0 auto;width:min(260px,64vw);scroll-snap-align:start}
.shots img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:26px;border:5px solid #081426;box-shadow:0 26px 60px rgba(0,0,0,.45);transition:transform .4s cubic-bezier(.2,.8,.2,1)}.shots figure:hover img{transform:translateY(-8px) rotate(-1.5deg)}
.intro{font:500 clamp(24px,3.6vw,46px)/1.15 var(--disp);letter-spacing:-.03em;max-width:1000px;margin:0 0 44px}
.intro p{margin:0 0 .5em}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
.ft{position:relative;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:26px;overflow:hidden;transition:border-color .3s,transform .3s}
.ft::before{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:var(--c);opacity:.18;filter:blur(40px)}
.ft:hover{transform:translateY(-4px);border-color:rgba(108,220,196,.4)}
.ft .n{font:600 13px var(--body);color:var(--mint);letter-spacing:.12em}
.ft h3{font:700 clamp(22px,2.4vw,28px)/1.1 var(--disp);letter-spacing:-.03em;margin:14px 0 10px}
.ft p,.ft li{color:#C9D6E8;font-size:15.5px}.ft p{margin:0 0 8px}.ft ul{margin:0;padding-left:18px}.ft li{margin:4px 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.box{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:28px}
.box .big{font:500 clamp(20px,2.2vw,26px)/1.35 var(--disp);letter-spacing:-.015em;margin:0;color:#E2EAF6}
.rows{border-top:1px solid var(--line)}.rows div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}.rows dt{color:var(--mut)}.rows dd{margin:0;text-align:right}
.rows a{color:var(--mint)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{position:relative;display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px;text-decoration:none;overflow:hidden;transition:transform .25s,border-color .25s}
.card::after{content:"";position:absolute;left:-40px;bottom:-60px;width:140px;height:140px;border-radius:50%;background:var(--c);opacity:.22;filter:blur(36px)}
.card:hover{transform:translateY(-4px);border-color:rgba(108,220,196,.45)}.card img{position:relative;z-index:1;width:60px;height:60px;border-radius:16px;flex:none}.card div{position:relative;z-index:1}.card b{display:block;font:700 18px var(--disp);letter-spacing:-.02em}.card span{font-size:13px;color:var(--mut)}
.end{position:relative;text-align:center;padding:clamp(100px,16vh,170px) var(--pad) clamp(70px,10vh,110px);overflow:hidden}
.end::before{content:"";position:absolute;left:50%;top:45%;width:900px;height:900px;transform:translate(-50%,-50%);background:radial-gradient(circle,color-mix(in srgb,var(--c) 30%,transparent),transparent 60%);pointer-events:none}
.end h2{position:relative;font:800 clamp(48px,9vw,130px)/.9 var(--disp);letter-spacing:-.055em;margin:0 0 16px}.end h2 em{font:italic 400 .85em var(--serif);color:var(--mint)}
.end p{position:relative;color:#C9D6E8;font-size:18px;margin:0 0 28px}.end .cta{justify-content:center;position:relative}
footer{padding:28px var(--pad) max(34px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13.5px;color:#8FA3BF;border-top:1px solid var(--line)}footer a{color:#8FA3BF}
/* catálogo */
.cat-hero{min-height:max(78svh,560px)}
.grid-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:18px}
.ap{position:relative;display:flex;flex-direction:column;gap:14px;border-radius:30px;padding:26px;min-height:300px;text-decoration:none;overflow:hidden;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 55%,#0A2147),#0A2147 75%);border:1px solid var(--line);transition:transform .3s,border-color .3s}
.ap:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.3)}
.ap::after{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;background:var(--c);filter:blur(60px);opacity:.45}
.ap>*{position:relative;z-index:1}.ap img{width:76px;height:76px;border-radius:20px;box-shadow:0 14px 34px rgba(0,0,0,.4)}
.ap b{font:800 30px/1 var(--disp);letter-spacing:-.04em}.ap .c{font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}.ap p{margin:0;color:#D5E0EF}
.ap .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:700 14px var(--body)}.ap .go svg{width:16px;height:16px}
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}
@media(max-width:900px){.hwrap{grid-template-columns:1fr}.stage{height:360px;margin-top:10px}.ph{width:150px}.ph.b{width:170px;left:30%}.two{grid-template-columns:1fr}.bar nav a.hide{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
.soc{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.soc a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:600 13.5px var(--body);padding:8px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.25);background:rgba(4,19,46,.35)}.soc a:hover{border-color:var(--mint);color:var(--mint)}.soc svg{width:17px;height:17px}
.gp svg{width:18px;height:18px}.ghost svg{width:15px;height:15px}