:root{--bg:#070707;--ink:#efe9dc;--dim:#8f8a7e;--rule:rgba(239,233,220,.17);--red:#ff2d55;--blue:#4da3ff;
 --d:'Big Shoulders Display','Arial Narrow',sans-serif;--b:'Instrument Sans',system-ui,sans-serif;--m:'Martian Mono',ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:70px;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:400 17px/1.6 var(--b);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}::selection{background:var(--ink);color:#000}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
code{font:400 .84em var(--m);background:rgba(239,233,220,.09);padding:.1em .4em}
img{max-width:100%;height:auto}
#rain{position:fixed;inset:0;width:100%;height:100%;z-index:-1}
main,.foot{position:relative}
.top,main,.foot{transition:opacity .9s ease}
body.is-intro .top,body.is-intro main,body.is-intro .foot{opacity:0}

/* barra */
.top{position:fixed;z-index:30;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:16px max(20px,calc((100vw - 1280px)/2));background:linear-gradient(var(--bg) 25%,transparent)}
.mark{font:600 14px var(--m);letter-spacing:.04em;text-decoration:none}.mark i{font-style:normal;color:var(--dim);margin:0 1px}
.top nav{display:flex;gap:6px}
.top nav a{font:600 12px var(--m);text-transform:uppercase;letter-spacing:.1em;text-decoration:none;padding:9px 14px;border:1px solid transparent;transition:all .2s}
.top nav a:hover{border-color:var(--rule)}
.top nav a.on{background:var(--ink);color:#000}

/* portada */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:100px max(20px,calc((100vw - 1280px)/2)) 0}
.hero-kick{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 2vh;font:600 12px var(--m);text-transform:uppercase;letter-spacing:.12em;color:var(--dim)}
.hero-kick span+span::before{content:'/';margin-right:22px;color:var(--rule)}
.hero-h{margin:0;font:900 clamp(70px,min(24.5vw,31vh),440px)/.8 var(--d);text-transform:uppercase;letter-spacing:.025em;mix-blend-mode:difference;color:var(--ink)}
.hero-h span{display:block}.hero-h span+span{margin-left:.06em}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:5vw;align-items:end;padding:4vh 0 4vh}
.hero-lead{margin:0;max-width:34em;font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:#c9c3b5}.hero-lead b{color:var(--ink);font-weight:600}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--ink)}
.door{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:min(22vh,190px);padding:16px 20px 18px;text-decoration:none;background:rgba(7,7,7,.72);backdrop-filter:blur(6px);transition:background .25s,color .25s}
.door+.door{border-left:1px solid var(--ink)}
.door small{font:600 11px var(--m);text-transform:uppercase;letter-spacing:.14em;color:var(--dim);transition:color .25s}
.door b{font:900 clamp(46px,min(7.4vw,12vh),118px)/.85 var(--d);text-transform:uppercase}
.door span{font:600 11.5px var(--m);letter-spacing:.04em;margin-top:10px}
.door-mac:hover{background:var(--red);color:#fff}.door-win:hover{background:var(--blue);color:#001a33}
.door:hover small{color:inherit}
.door.rec::after{content:'tu sistema';position:absolute;top:14px;right:16px;font:600 10px var(--m);text-transform:uppercase;letter-spacing:.14em;background:var(--ink);color:#000;padding:3px 7px}
.mq{overflow:hidden;border-top:1px solid var(--rule);margin:0 calc(-1*max(20px,(100vw - 1280px)/2));background:rgba(7,7,7,.85)}
.mq-in{display:flex;width:max-content;animation:mq 60s linear infinite;padding:14px 0}
.mq-in span{font-size:22px;padding:0 26px;white-space:nowrap;line-height:1}
.mq-in span::after{content:'/';color:var(--rule);margin-left:52px;font-family:var(--m);font-style:normal;font-weight:400}
@keyframes mq{to{transform:translateX(-50%)}}

/* intro */
#intro{position:fixed;inset:0;z-index:100;pointer-events:none}
#intro.on{pointer-events:auto}
.in-shade{position:absolute;inset:0;background:#000;opacity:0}
.in-type{position:absolute;left:max(20px,6vw);bottom:12vh;margin:0;font:600 clamp(15px,2vw,24px)/1.7 var(--m);color:var(--ink);transition:opacity .6s;white-space:pre-wrap}
.in-type i{font-style:normal;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
#tmask{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.in-skip{position:absolute;right:max(20px,3vw);bottom:max(20px,3vh);font:600 11px var(--m);text-transform:uppercase;letter-spacing:.12em;background:none;border:1px solid var(--rule);color:var(--dim);padding:9px 14px;cursor:pointer;pointer-events:auto}
.in-skip:hover{color:var(--ink);border-color:var(--ink)}

/* secciones */
.sec{background:var(--bg);padding:clamp(70px,10vw,140px) 0;border-top:1px solid var(--rule)}
.wrap{width:min(1280px,100% - 40px);margin:0 auto}.narrow{width:min(900px,100% - 40px)}
.lab{display:flex;align-items:center;gap:16px;margin:0 0 28px;font:600 12px var(--m);text-transform:uppercase;letter-spacing:.14em;color:var(--dim)}
.lab::after{content:'';flex:1;height:1px;background:var(--rule)}
.big{margin:0 0 .5em;font:900 clamp(46px,9.4vw,150px)/.86 var(--d);text-transform:uppercase;letter-spacing:-.005em}
.three{display:grid;grid-template-columns:repeat(3,1fr);margin-top:60px;border-top:1px solid var(--rule)}
.three article{padding:30px 30px 10px 0;border-right:1px solid var(--rule)}.three article+article{padding-left:30px}.three article:last-child{border:0}
.n{display:block;font:900 90px/.8 var(--d);color:transparent;-webkit-text-stroke:1px var(--ink);margin-bottom:22px}
.three h3{margin:0 0 10px;font:900 30px/1 var(--d);text-transform:uppercase;letter-spacing:.01em}
.three p{margin:0;color:#b9b3a5;font-size:16px}

/* registro */
.sec-reg{padding-bottom:0}
.reg-note{margin:0 0 50px;color:var(--dim);max-width:46ch}
.reg{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule)}
.row,.row>a{display:grid;grid-template-columns:70px minmax(0,1.25fr) minmax(0,1fr) 150px;gap:0 24px;align-items:center}
.row{border-top:1px solid var(--rule);padding:20px max(20px,calc((100vw - 1280px)/2));transition:background .18s,color .18s}
.row>a{text-decoration:none;grid-column:1/-1}
.r-n{font:400 12px var(--m);color:var(--dim)}
.r-name{font-family:var(--f);font-weight:var(--w);font-style:var(--i,normal);font-size:clamp(30px,5.2vw,78px);line-height:1;color:var(--c);letter-spacing:-.01em;overflow-wrap:anywhere}
.r-d{font-size:15px;line-height:1.4;color:#a9a396}
.r-s{font:600 11px var(--m);text-transform:uppercase;letter-spacing:.1em;text-align:right;color:var(--dim)}
.row:hover{background:var(--c)}.row:hover .r-name,.row:hover .r-d,.row:hover .r-n,.row:hover .r-s{color:var(--k)}
.row:hover .r-d{opacity:.85}

/* pacto */
.pact{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.pact li{padding:26px 22px 8px 0;border-right:1px solid var(--rule)}.pact li+li{padding-left:22px}.pact li:last-child{border:0}
.pact b{display:block;font:900 clamp(44px,6.6vw,104px)/.85 var(--d);text-transform:uppercase;margin-bottom:14px}
.pact span{color:#b0aa9c;font-size:15.5px;display:block;max-width:24ch}

/* enlaces */
.links{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.links a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 40px;gap:24px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--rule);text-decoration:none;transition:padding .25s,background .2s,color .2s}
.l-t{font:900 clamp(34px,5.4vw,84px)/.95 var(--d);text-transform:uppercase}
.l-d{color:var(--dim);font-size:15px}.l-a{font:400 28px var(--m);text-align:right;transition:transform .25s}
.links a:hover{background:var(--c);color:#000;padding-left:20px;padding-right:20px}.links a:hover .l-d{color:#000}.links a:hover .l-a{transform:translate(4px,-4px)}

/* pie */
.foot{background:var(--bg);border-top:1px solid var(--rule);padding:60px 0 34px;overflow:hidden}
.foot-big{margin:0 0 40px;font:900 clamp(60px,15.6vw,300px)/.8 var(--d);text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(239,233,220,.35);white-space:nowrap;text-align:center}
.foot-in{width:min(1280px,100% - 40px);margin:0 auto;display:flex;flex-wrap:wrap;gap:20px 60px;justify-content:space-between;font:400 12.5px/1.8 var(--m);color:var(--dim)}
.foot-in p{margin:0}.foot-in a{color:var(--ink);text-underline-offset:3px}.foot-in b{color:var(--ink);font-weight:600}

/* páginas de sistema */
.os-hero{padding:130px max(20px,calc((100vw - 1280px)/2)) 40px;background:var(--bg)}
.os-h{margin:0 0 .12em;font:900 clamp(110px,31vw,540px)/.74 var(--d);text-transform:uppercase;letter-spacing:-.015em}
.os-mac .os-h{color:var(--red)}.os-win .os-h{color:var(--blue)}
.os-sub{max-width:40em;color:#b9b3a5;font-size:clamp(17px,1.5vw,20px);margin:0}
.sw{background:var(--bg);border-top:1px solid var(--ink);padding:70px 0 90px}
.sw-head{margin-bottom:40px}
.mb-h{margin:0 0 20px;font:800 clamp(44px,10.4vw,170px)/.9 'Unbounded',sans-serif;letter-spacing:-.045em}.mb-h span{color:var(--red)}
.mb-sub{max-width:44em;margin:0;font-size:clamp(18px,1.7vw,23px);line-height:1.45;color:#c9c3b5}.mb-sub b{color:var(--ink)}
.getbar{display:flex;flex-wrap:wrap;gap:12px;margin:38px 0 14px}
.get{display:inline-flex;justify-content:space-between;align-items:center;gap:36px;min-width:280px;padding:20px 24px;background:var(--ink);color:#000;text-decoration:none;font:600 13px var(--m);text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--ink);transition:transform .2s,box-shadow .2s;flex:1 1 280px;max-width:420px}
.get span{opacity:.7}.get:hover{transform:translate(-4px,-4px);box-shadow:6px 6px 0 var(--c,var(--red))}
.get-line{background:transparent;color:var(--ink)}
.hash{margin:0 0 56px;font:400 11px/1.8 var(--m);color:var(--dim);word-break:break-all}.hash code{background:none;padding:0;color:#bdb7a8}
.copy{font:600 10px var(--m);text-transform:uppercase;background:none;border:1px solid var(--rule);color:var(--ink);padding:2px 8px;cursor:pointer;margin-left:6px}.copy:hover{border-color:var(--ink)}
.tabs{display:flex;flex-wrap:wrap;gap:0 6px;margin-bottom:26px;border-bottom:1px solid var(--rule)}
.tabs button{font:600 13px var(--m);text-transform:uppercase;letter-spacing:.08em;color:var(--dim);background:none;border:0;border-bottom:3px solid transparent;padding:12px 16px;cursor:pointer;margin-bottom:-1px;transition:color .2s}
.tabs button:hover{color:var(--ink)}.tabs button.on{color:var(--ink);border-color:var(--c)}
.shot{margin:0 0 30px;border:1px solid var(--ink);box-shadow:14px 14px 0 var(--c,var(--red));background:#000;line-height:0}
.shot img{display:block;width:100%;height:auto;aspect-ratio:2160/1350;object-fit:cover;transition:opacity .3s}.shot img.swap{opacity:0}
.mods{display:flex;flex-wrap:wrap;gap:8px 28px;margin:34px 0 70px;font:400 13px var(--m);color:var(--dim)}
.mods span{padding-left:14px;border-left:3px solid var(--c)}.mods b{color:var(--ink);margin-right:8px}
.cols{display:grid;grid-template-columns:1.15fr .85fr;gap:70px}
.sub-h{margin:0 0 18px;font:900 30px/1 var(--d);text-transform:uppercase;letter-spacing:.02em}
.feat,.steps{margin:0 0 40px;padding:0;list-style:none;counter-reset:f}
.feat li,.steps li{counter-increment:f;position:relative;padding:15px 0 15px 54px;border-top:1px solid var(--rule);color:#b9b3a5;font-size:15.5px;line-height:1.5}
.feat li:last-child,.steps li:last-child{border-bottom:1px solid var(--rule)}
.feat li::before,.steps li::before{content:counter(f,decimal-leading-zero);position:absolute;left:0;top:17px;font:400 11px var(--m);color:var(--dim)}
.feat b,.steps b{color:var(--ink);font-weight:600}
.man{margin:0 0 18px;color:#b9b3a5;font-size:15.5px}
.go{display:inline-flex;gap:14px;align-items:center;padding:14px 20px;background:var(--ink);color:#000;text-decoration:none;font:600 12px var(--m);text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--ink);transition:transform .2s,box-shadow .2s}
.go:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--red)}.go-line{background:transparent;color:var(--ink)}
.soon{background:var(--bg);border-top:1px solid var(--rule);padding:50px 0}
.soon-t{margin:0;font:900 clamp(26px,3.6vw,50px)/1.05 var(--d);text-transform:uppercase;max-width:30em}.soon-t a{color:var(--dim);text-underline-offset:5px}.soon-t a:hover{color:var(--ink)}
details{border-top:1px solid var(--rule)}details:last-of-type{border-bottom:1px solid var(--rule)}
summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font:600 18px var(--b);position:relative}
summary::-webkit-details-marker{display:none}summary::after{content:'+';position:absolute;right:2px;top:50%;transform:translateY(-52%);font:400 26px var(--m);transition:transform .25s}
details[open] summary::after{transform:translateY(-52%) rotate(45deg)}summary:hover{color:#fff}
details p{margin:0 0 22px;color:#b9b3a5;max-width:62ch}details a{text-underline-offset:3px}

/* legal */
.legal{width:min(820px,100% - 40px);margin:0 auto;padding:130px 0 80px}
.legal h1{font:900 clamp(48px,8vw,100px)/.9 var(--d);text-transform:uppercase;margin:0 0 30px}
.legal h2{font:900 28px var(--d);text-transform:uppercase;margin:36px 0 8px}.legal p{color:#b9b3a5}.legal a{text-underline-offset:3px}

/* aparición */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;transform:none}

@media(max-width:1000px){
  .hero-foot{grid-template-columns:1fr}.three{grid-template-columns:1fr}.three article,.three article+article{padding:26px 0;border-right:0;border-bottom:1px solid var(--rule)}
  .pact{grid-template-columns:1fr 1fr}.pact li:nth-child(2){border-right:0}.pact li:nth-child(n+3){border-top:1px solid var(--rule)}.pact li:nth-child(3){padding-left:0}
  .cols{grid-template-columns:1fr;gap:10px}
  .row,.row>a{grid-template-columns:44px 1fr}.r-d{grid-column:2}.r-s{grid-column:2;text-align:left;margin-top:6px}
  .links a{grid-template-columns:1fr 30px}.l-d{grid-column:1}.l-t{grid-column:1}.l-a{grid-row:1;grid-column:2}
}
@media(max-width:560px){
  body{font-size:16px}.top nav a{padding:8px 10px;font-size:11px}.doors{grid-template-columns:1fr}.door{min-height:130px}.door+.door{border-left:0;border-top:1px solid var(--ink)}
  .hero{padding-top:84px}.get{min-width:100%}.shot{box-shadow:7px 7px 0 var(--c,var(--red))}.mq-in span{font-size:18px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}body.is-intro .top,body.is-intro main,body.is-intro .foot{opacity:1}}

.hero-h span{transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity 1.2s}.hero-h span+span{transition-delay:.14s}
body.is-intro .hero-h span{transform:translateY(32%);opacity:0}
.hero{overflow:hidden}

/* ---- animaciones (fx.js) ---- */
.fx-bar{position:fixed;left:0;top:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--ink);z-index:60;mix-blend-mode:difference}
.fx-curtain{position:fixed;inset:0;z-index:200;display:grid;place-items:center;pointer-events:none;transform:translateY(-100%);overflow:hidden}
.fx-curtain span{font:900 clamp(60px,16vw,280px)/.8 var(--d);text-transform:uppercase;white-space:nowrap}
.fxw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}.fxi{display:inline-block;will-change:transform}
.fx .rv{opacity:1;transform:none}
.fx-cursor,.fx-cursor a,.fx-cursor button,.fx-cursor summary{cursor:none}
.fx-dot,.fx-ring{position:fixed;left:0;top:0;z-index:150;pointer-events:none;border-radius:50%;mix-blend-mode:difference;transform:translate(-50%,-50%)}
.fx-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:#fff}
.fx-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid #fff;transition:width .25s,height .25s,margin .25s,background .25s}
.fx-ring.on{width:74px;height:74px;margin:-37px 0 0 -37px;background:#fff}
.hero-h span,.os-h{will-change:transform}
html.fx .os-h .fxw{padding-bottom:.12em}
.os-h{white-space:nowrap}.os-win .os-h{font-size:clamp(70px,19.2vw,350px)}

/* --- portada más limpia: título sólido y la lluvia se aparta del texto --- */
.hero-h{mix-blend-mode:normal;text-shadow:0 0 60px rgba(7,7,7,.9),0 0 18px rgba(7,7,7,.7)}
#rain{opacity:.85;-webkit-mask-image:radial-gradient(ellipse 62% 52% at 30% 74%,transparent 0,rgba(0,0,0,.18) 55%,#000 100%);mask-image:radial-gradient(ellipse 62% 52% at 30% 74%,transparent 0,rgba(0,0,0,.18) 55%,#000 100%)}
.hero-lead{padding:18px 22px 18px 0;background:linear-gradient(90deg,rgba(7,7,7,.92) 60%,transparent)}
.hero::after{content:'';position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(transparent,rgba(7,7,7,.55));pointer-events:none;z-index:-1}

/* --- portada con capturas --- */
.hero-main{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:2vw;flex:1}
.hero-h{font-size:clamp(56px,min(15.8vw,27vh),340px)}
.stack{position:relative;aspect-ratio:1.25;max-height:52vh;width:100%;justify-self:end;perspective:1400px}
.st{position:absolute;margin:0;width:78%;border:1px solid var(--ink);background:#000;line-height:0;box-shadow:12px 12px 0 var(--sh);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.st img{display:block;width:100%;height:auto}
.st1{--sh:#ff2d55;left:0;bottom:0;transform:rotate(-2deg)}
.st2{--sh:#2fd18a;left:11%;top:22%;transform:rotate(1.5deg)}
.st3{--sh:#ffb020;right:0;top:0;transform:rotate(-1deg)}
.st-icon{position:absolute;right:2%;bottom:-2%;width:clamp(64px,8vw,120px);height:auto;border-radius:22%;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
@media(max-width:1000px){.hero-main{grid-template-columns:1fr}.stack{max-height:none;justify-self:center;max-width:560px;margin:20px 0}}
/* --- qué es con imágenes --- */
.vis{height:210px;overflow:hidden;border:1px solid var(--rule);margin-bottom:22px;background:#0c0c0c;position:relative}
.vis img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:30% 40%;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.three article:hover .vis img{transform:scale(1.85)!important}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;border:0;gap:6px;background:transparent}
.tiles span{display:grid;place-items:center;background:var(--c);color:#0a0a0a;font-size:clamp(13px,1.6vw,22px);text-align:center;padding:4px;transition:transform .3s}
.tiles span:hover{transform:scale(1.06)}
.n{display:none}
/* --- la app en acción: carrusel horizontal --- */
.show{background:var(--bg);border-top:1px solid var(--rule);padding:clamp(60px,8vw,110px) 0 0;overflow:hidden}
.show-pin{height:100vh;display:flex;align-items:center;overflow-x:auto;scroll-snap-type:x mandatory}
html.fx .show-pin{overflow:hidden;scroll-snap-type:none}
.show-track{display:flex;height:78vh}
.slide{flex:none;width:100vw;display:grid;grid-template-columns:minmax(280px,.62fr) minmax(0,1.38fr);gap:3vw;align-items:center;padding:0 max(20px,calc((100vw - 1280px)/2));scroll-snap-align:center}
.sl-n{font:600 12px var(--m);text-transform:uppercase;letter-spacing:.14em;color:var(--c)}
.slide h3{margin:.25em 0 .2em;font:900 clamp(60px,9vw,150px)/.82 var(--d);text-transform:uppercase;color:var(--c)}
.slide p{margin:0;max-width:26em;color:#c3bdae;font-size:clamp(15px,1.3vw,19px)}
.sl-img{margin:0;border:1px solid var(--ink);box-shadow:14px 14px 0 var(--c);background:#000;line-height:0}
.sl-img img{width:100%;height:auto;display:block}
@media(max-width:900px){.show-pin{height:auto;display:block;overflow:visible}.show-track{display:block;height:auto}.slide{width:auto;grid-template-columns:1fr;padding:30px 20px 50px}html.fx .show-pin{overflow:visible}}
/* --- vista previa al pasar por una app --- */
.peek{position:fixed;left:0;top:0;z-index:90;width:300px;height:190px;pointer-events:none;border:1px solid var(--ink);display:grid;place-items:center;overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.8) rotate(-4deg);transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}
.peek b{font-size:44px;line-height:1;text-align:center;padding:0 12px;color:#0a0a0a;position:relative;z-index:1}
.peek::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(0,0,0,.16) 0 2px,transparent 2px 14px)}
.peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sec{padding:clamp(60px,8vw,110px) 0}

#i3d{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.hero-h{font-size:clamp(50px,min(13vw,25vh),300px)}

.show{padding-top:0}
.show-pin{flex-direction:column;justify-content:center;gap:2vh;padding-top:70px}
.show-head{width:min(1280px,100% - 40px);margin:0 auto;flex:none;width:100%;padding:0 max(20px,calc((100vw - 1280px)/2))}
.show-head .lab{margin-bottom:10px}.show-head .big{font-size:clamp(34px,5.4vw,84px);margin:0}
.show-track{height:62vh;flex:none}
.slide h3{font-size:clamp(50px,7.4vw,120px)}
.reg-note b{color:var(--ink)}
@media(max-width:900px){.show-pin{display:block;padding-top:60px}.show-head{padding:0 20px 20px}.show-track{height:auto}}

/* --- la app en acción: filas verticales (sin anclado) --- */
.show-pin,html.fx .show-pin{height:auto;display:block;overflow:visible;padding:0;scroll-snap-type:none}
.show-head{padding:clamp(60px,8vw,110px) max(20px,calc((100vw - 1280px)/2)) 20px}
.show-track{display:block;height:auto}
.slide{width:auto;display:grid;grid-template-columns:minmax(260px,.5fr) minmax(0,1.5fr);gap:4vw;align-items:center;padding:clamp(40px,6vw,90px) max(20px,calc((100vw - 1280px)/2));border-top:1px solid var(--rule)}
.slide:nth-child(even){grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr)}.slide:nth-child(even) .sl-txt{order:2}
.slide h3{font-size:clamp(56px,8vw,130px)}
.show{padding-bottom:0}
@media(max-width:900px){.slide,.slide:nth-child(even){grid-template-columns:1fr}.slide:nth-child(even) .sl-txt{order:0}}
.hero-main{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.stack{width:92%}.st{width:74%}.st1{left:6%}.st2{left:16%}
.slide{grid-template-columns:minmax(300px,.62fr) minmax(0,1.38fr)}.slide:nth-child(even){grid-template-columns:minmax(0,1.38fr) minmax(300px,.62fr)}
.slide h3{font-size:clamp(44px,5.8vw,92px)}

/* --- rendimiento: nada de máscaras ni desenfoques sobre capas que se animan --- */
#rain{-webkit-mask-image:none!important;mask-image:none!important;opacity:.85;will-change:transform}
.hero-h{text-shadow:none!important}
.door{backdrop-filter:none!important;background:rgba(7,7,7,.88)}
.fx-bar,.fx-dot,.fx-ring{mix-blend-mode:normal!important}
.fx-bar{background:var(--ink)}.fx-dot{background:#efe9dc}.fx-ring{border-color:rgba(239,233,220,.8)}.fx-ring.on{background:rgba(239,233,220,.9)}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 62% 48% at 30% 74%,rgba(7,7,7,.92) 0,rgba(7,7,7,.55) 55%,transparent 100%)}
.hero-lead{background:none!important;padding:0!important}
.st,.sl-img,.shot{will-change:transform;transform:translateZ(0)}
.st img,.sl-img img,.shot img{content-visibility:auto}

/* ====== LOGOTIPO GLITCH ====== */
.hero-h,.os-h,.foot-big{font-family:'Unbounded',sans-serif!important;font-weight:800!important;letter-spacing:-.05em!important;line-height:1.02!important}
.hero-h{font-size:clamp(34px,min(8.4vw,14.5vh),165px)!important;mix-blend-mode:normal}
.hero-h span{margin-left:0!important}
.glx{position:relative;display:block;color:var(--ink)}
.glx::before,.glx::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;white-space:nowrap;letter-spacing:inherit;text-transform:inherit}
.glx::before{color:#ff2d55;clip-path:inset(0 0 100% 0);animation:glA 4.6s steps(1) infinite}
.glx::after{color:#00e5ff;clip-path:inset(100% 0 0 0);animation:glB 3.8s steps(1) infinite}
@keyframes glA{0%{clip-path:inset(0 0 100% 0)}5%{clip-path:inset(10% 0 66% 0);transform:translate(-.06em,0)}7%{clip-path:inset(58% 0 18% 0);transform:translate(.045em,0)}9%{clip-path:inset(0 0 100% 0);transform:none}48%{clip-path:inset(32% 0 46% 0);transform:translate(-.08em,0)}50%{clip-path:inset(72% 0 6% 0);transform:translate(.05em,0)}52%,100%{clip-path:inset(0 0 100% 0);transform:none}}
@keyframes glB{0%{clip-path:inset(100% 0 0 0)}12%{clip-path:inset(40% 0 38% 0);transform:translate(.07em,0)}14%{clip-path:inset(8% 0 78% 0);transform:translate(-.04em,0)}16%{clip-path:inset(100% 0 0 0);transform:none}63%{clip-path:inset(62% 0 14% 0);transform:translate(.09em,0)}65%{clip-path:inset(20% 0 60% 0);transform:translate(-.05em,0)}67%,100%{clip-path:inset(100% 0 0 0);transform:none}}
.glx.hit{animation:glHit .24s steps(3)}
@keyframes glHit{0%{transform:translate(.025em,0) skewX(-7deg)}40%{transform:translate(-.035em,0) skewX(6deg)}70%{transform:translate(.02em,.01em) skewX(-3deg)}100%{transform:none}}
.glx.hit::before{clip-path:inset(18% 0 42% 0);transform:translate(-.07em,0);animation:none}
.glx.hit::after{clip-path:inset(56% 0 8% 0);transform:translate(.07em,0);animation:none}
.glw{position:relative;font:600 13px var(--m);letter-spacing:.08em}.glw i{font-style:normal;color:#ff2d55}
.glw::before,.glw::after{content:attr(data-t);position:absolute;left:0;top:0;opacity:0}
.mark:hover .glw::before{opacity:.9;color:#ff2d55;transform:translate(-2px,0);clip-path:inset(0 0 50% 0)}.mark:hover .glw::after{opacity:.9;color:#00e5ff;transform:translate(2px,0);clip-path:inset(50% 0 0 0)}
.mark{display:inline-flex;align-items:center;gap:12px}.mark img{display:block}
.os-mac .os-h{font-size:clamp(70px,20vw,340px)!important;color:var(--red)}
.os-win .os-h{font-size:clamp(46px,11.4vw,205px)!important;color:var(--blue)}
.os-h{white-space:nowrap}.os-h::before,.os-h::after{display:none}.os-h .fxw{overflow:visible}
.foot-big{font-size:clamp(30px,7.6vw,140px)!important;-webkit-text-stroke:1px rgba(239,233,220,.45)!important}
@media(max-width:1000px){.hero-h{font-size:clamp(30px,10.5vw,120px)!important}}

.foot-big{-webkit-text-stroke:0!important;color:rgba(239,233,220,.07)!important}

.st,.sl-img,.shot{will-change:auto!important;transform:none}.st1{transform:rotate(-2deg)}.st2{transform:rotate(1.5deg)}.st3{transform:rotate(-1deg)}
.fx-bar{display:none}
.hero{isolation:isolate}

/* ====== MUNDO 3D CONTINUO + EDICIÓN ====== */
#world{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block}
body.home .sec,body.home .show,body.home .stmt{background:rgba(7,7,7,.58)!important;border-top-color:rgba(239,233,220,.1)}
body.home .sec-pact,body.home .sec-links{background:rgba(7,7,7,.66)!important}
body.home .reg-note b{color:#fff}
.stmt{padding:clamp(90px,14vw,200px) max(20px,calc((100vw - 1280px)/2));border-top:1px solid var(--rule)}
.stmt-t{margin:0;font:800 clamp(30px,5.6vw,92px)/1.02 'Unbounded',sans-serif;letter-spacing:-.045em;max-width:16em}
.stmt-t .w{display:inline-block;opacity:.14;transition:none}
.inter{overflow:hidden;border-block:1px solid var(--rule);background:rgba(7,7,7,.4);padding:3vw 0}
.inter-in{display:flex;gap:5vw;width:max-content;font-size:clamp(70px,13vw,220px);line-height:1;white-space:nowrap;will-change:transform}
.inter-in span{opacity:.92}

/* ---- caja «macOS la bloquea» ---- */
.fix{margin:0 0 60px;padding:28px;border:1px solid var(--ink);background:rgba(239,233,220,.04)}
.fix .lab{color:var(--ink)}
.fix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule)}
.fix-c{padding:22px 22px 24px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:12px}.fix-c:last-child{border:0}
.fix-n{display:grid;place-items:center;width:34px;height:34px;background:var(--ink);color:#000;font:800 16px var(--m)}
.fix-c h4{margin:0;font:900 26px/1 var(--d);text-transform:uppercase}
.fix-c ol{margin:0;padding-left:20px;color:#b9b3a5;font-size:15px;line-height:1.55}.fix-c li{margin-bottom:8px}.fix-c b{color:var(--ink)}
kbd{font:600 12px var(--m);border:1px solid var(--rule);border-bottom-width:2px;padding:1px 6px;background:rgba(239,233,220,.08);color:var(--ink)}
.cmdbox{display:flex;gap:8px;align-items:stretch;margin-top:auto}
.cmdbox code{flex:1;display:block;padding:12px 12px;background:#000;border:1px solid var(--rule);color:#c4ff3d;font-size:12.5px;line-height:1.5;word-break:break-all;overflow-wrap:anywhere}
.cmdbox .copy{align-self:stretch;margin:0;padding:0 14px}
.fix-note{margin:0;font-size:13px;color:var(--dim)}.fix-note a{color:var(--ink)}
@media(max-width:1000px){.fix-grid{grid-template-columns:1fr}.fix-c{border-right:0;border-bottom:1px solid var(--rule)}}

/* ====== LOGO GIGANTE DE CADA SISTEMA ====== */
.os-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:3vw;padding-top:110px;min-height:92vh;position:relative;overflow:hidden}
.os-mac .os-h{font-size:clamp(60px,14vw,250px)!important}.os-win .os-h{font-size:clamp(38px,7.6vw,150px)!important}
.os-stage{position:relative;aspect-ratio:1;width:100%;max-height:78vh;justify-self:center;display:grid;place-items:center;perspective:1400px}
.lg{position:absolute;inset:0;display:grid;place-items:center}
.lg .tilt{position:relative;width:78%;aspect-ratio:1;transform-style:preserve-3d;will-change:transform}
.aura{position:absolute;inset:-18%;pointer-events:none}.aura i{position:absolute;border-radius:50%;will-change:transform}
/* --- Mac: perlado iridiscente --- */
.lg-mac .aura i:nth-child(1){left:6%;top:10%;width:62%;height:62%;background:radial-gradient(circle,rgba(255,45,85,.55),transparent 68%);animation:drift1 11s ease-in-out infinite alternate}
.lg-mac .aura i:nth-child(2){right:4%;top:30%;width:58%;height:58%;background:radial-gradient(circle,rgba(110,90,255,.5),transparent 68%);animation:drift2 13s ease-in-out infinite alternate}
.lg-mac .aura i:nth-child(3){left:24%;bottom:2%;width:52%;height:52%;background:radial-gradient(circle,rgba(255,170,60,.42),transparent 68%);animation:drift1 15s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(9%,-7%) scale(1.14)}}@keyframes drift2{to{transform:translate(-11%,8%) scale(.9)}}
.apple{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 28px rgba(255,255,255,.25)) drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.apple .ap-line{stroke-dasharray:1;stroke-dashoffset:1}
.apple .ap-fill{opacity:0}
.apple .ap-sheen{animation:sheen 5.5s ease-in-out infinite 2.4s}
@keyframes sheen{0%{transform:translateX(0) skewX(-18deg)}55%,100%{transform:translateX(70px) skewX(-18deg)}}
.apple.refl{transform:scaleY(-1) translateY(-4%);opacity:.22;filter:blur(2px);-webkit-mask-image:linear-gradient(transparent 55%,#000 100%);mask-image:linear-gradient(transparent 55%,#000 100%);top:96%}
html:not(.fx) .apple .ap-line{stroke-dashoffset:0}html:not(.fx) .apple .ap-fill{opacity:1}
/* --- Windows: paneles Fluent con luz que sigue al ratón --- */
.lg-win .aura i:nth-child(1){left:2%;top:4%;width:72%;height:72%;background:radial-gradient(circle,rgba(0,120,212,.6),transparent 66%);animation:drift1 12s ease-in-out infinite alternate}
.lg-win .aura i:nth-child(2){right:0;bottom:2%;width:62%;height:62%;background:radial-gradient(circle,rgba(0,200,255,.42),transparent 66%);animation:drift2 14s ease-in-out infinite alternate}
.panes{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3.2%;transform-style:preserve-3d}
.pane{position:relative;overflow:hidden;background:linear-gradient(140deg,#4cc2ff,#0078d4 55%,#0a3f8f);border:1px solid rgba(255,255,255,.4);box-shadow:0 0 50px rgba(0,140,255,.55),0 30px 50px rgba(0,0,0,.5),inset 0 0 30px rgba(255,255,255,.18);will-change:transform;transform-style:preserve-3d}
.pane::after{content:'';position:absolute;inset:0;background:radial-gradient(circle 150px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.6),transparent 70%);opacity:var(--ro,0);transition:opacity .3s}
.pane i{position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.38) 50%,transparent 60%);transform:translateX(-120%);animation:sweep 6s ease-in-out infinite 2.6s}
.pane.p2 i{animation-delay:2.8s}.pane.p3 i{animation-delay:3s}.pane.p4 i{animation-delay:3.2s}
@keyframes sweep{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
.pane.p2{background:linear-gradient(140deg,#6fd0ff,#1a8cf0 55%,#0b4aa0)}.pane.p3{background:linear-gradient(140deg,#3aa9f5,#0067c0 55%,#08357a)}.pane.p4{background:linear-gradient(140deg,#8fe0ff,#2b9bf2 55%,#0c55b5)}
.beam{position:absolute;left:-30%;right:-30%;top:46%;height:6%;background:linear-gradient(90deg,transparent,rgba(120,210,255,.8),transparent);filter:blur(6px);opacity:0;mix-blend-mode:screen}
@media(max-width:1000px){.os-hero{grid-template-columns:1fr;min-height:auto;padding-bottom:30px}.os-stage{max-width:430px;max-height:none}.os-win .os-h{font-size:clamp(38px,12vw,120px)!important}.os-mac .os-h{font-size:clamp(60px,22vw,200px)!important}}
.os-win .os-h{font-size:clamp(32px,6.2vw,122px)!important}