:root{color-scheme:dark;--text:#f3f7ff;--muted:#94a8c2;--line:#79b7ff29;--accent:#8fe4ff;--duration:1280ms;--ease:cubic-bezier(.22,.62,.21,1);--glow-core:10.5px;--glow:30px;--glow-wide:54px;--flash:150ms;--copy-size:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px;scrollbar-gutter:stable}body{margin:0;background:#02050b;color:var(--text);font-family:"Roboto Flex","Helvetica Neue",Arial,sans-serif;line-height:1.6;isolation:isolate}body:before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(ellipse at 50% 24%,#133b78 0%,#0b2854 18%,#061a37 40%,#020711 68%,#010307 100%)}.glow{position:fixed;z-index:-2;inset:-24%;pointer-events:none;background:radial-gradient(circle at 50% 31%,rgba(73,171,244,.29) 0%,rgba(50,141,225,.16) 18%,rgba(46,140,255,.06) 34%,transparent 50%);animation:atmosphere 11s ease-in-out infinite alternate}#particles{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}@keyframes atmosphere{from{opacity:.6;transform:scale(.96)}to{opacity:1;transform:scale(1.04)}}
.wrap{width:min(1160px,calc(100% - 64px));margin:auto}a{color:inherit}.skip-link{position:fixed;left:20px;top:-90px;z-index:100;background:#8fe4ff;color:#020711;padding:10px 20px;border-radius:999px}.skip-link:focus{top:15px}a:focus-visible,button:focus-visible{outline:2px solid #8fe4ff;outline-offset:5px}button{font:inherit;cursor:pointer;touch-action:manipulation}.site-header{position:sticky;top:0;z-index:40;background:#030b16b3;border-bottom:1px solid #8abaff12;backdrop-filter:blur(20px)}.nav{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{display:block;width:174px;line-height:0;text-decoration:none}.brand svg{display:block;width:100%;height:auto}.primary-nav{display:flex;align-items:center;gap:35px}.primary-nav a{position:relative;text-decoration:none;font-size:13px;font-weight:400;color:#b3c0d1;padding:11px 0;transition:color .25s,text-shadow .25s}.primary-nav a:hover,.primary-nav a[aria-current]{color:#c8f1ff;text-shadow:0 0 20px #65adff70}.primary-nav a[aria-current]:after{content:"";position:absolute;height:1px;background:#80dcff;box-shadow:0 0 12px #65d9ff7a;left:0;right:0;bottom:4px}.menu-toggle{display:none;border:1px solid #70b9fa44;border-radius:999px;padding:7px 13px;background:#071326;color:#d9e8f8;font-size:12px}
.projects-hero{position:relative;isolation:isolate;overflow:hidden;min-height:390px;display:flex;align-items:center;padding:66px 0 75px}.projects-hero:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#020711d9 0%,#06172a50 39%,transparent 72%)}.project-earth{position:absolute;z-index:-2;width:max(1450px,120vw);max-width:none;height:auto;right:-21%;bottom:-28px;transform:rotate(-10deg);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 77%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 77%,transparent);filter:brightness(.95);pointer-events:none}.eyebrow{color:#87bdfa;font-size:10px;font-weight:500;letter-spacing:.29em;margin:0 0 20px}.projects-hero h1{font-size:clamp(48px,6.5vw,88px);font-weight:300;letter-spacing:-.045em;line-height:1;margin:0 0 22px}.hero-lead{max-width:470px;font-size:clamp(16px,1.6vw,20px);font-weight:300;color:#c6d6e9;line-height:1.55;margin:0}.hero-bottom{display:flex;align-items:center;gap:18px;color:#87b0d3;font:9px ui-monospace,monospace;letter-spacing:.18em;margin-top:28px}.hero-bottom:before{content:"";width:30px;height:1px;background:#72c9ff;box-shadow:0 0 10px #71d7ff60}
.project-index{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:20px 0 32px}.project-index a{color:#8eaac8;text-decoration:none;font-size:11px;letter-spacing:.025em;padding:7px 14px;border:1px solid #80bbef24;border-radius:999px;transition:background .25s,border-color .25s}.project-index a:hover{color:#d8f3ff;border-color:#82dcff80;background:#2d99ed12}.project-list{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}.project-item{min-width:0;scroll-margin-top:105px;opacity:1}.motion-ready .project-item{opacity:0;transform:translateY(12px);transition:opacity .9s ease,transform .9s var(--ease)}.motion-ready .project-item.is-visible{opacity:1;transform:none}
/* Frozen card geometry and opening are inserted at build time. */
.project-card{
 --base-clip:polygon(0 0,92% 0,78% 100%,0 100%);--open-clip:polygon(0 0,58% 0,44% 100%,0 100%);--left:6.2%;--title-width:44%;--copy-width:39%;--title-top:26%;--copy-top:51%;
 position:relative;width:100%;height:440px;isolation:isolate;overflow:hidden;border-radius:18px;border:1px solid #63b8f54a;background:#020b17;box-shadow:0 18px 55px #0005}
.app-image{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:grayscale(1) saturate(0) brightness(.48);opacity:.76}.shutter{position:absolute;inset:-1px;z-index:2;clip-path:var(--base-clip);background:radial-gradient(circle at 25% 45%,#103b5c29,transparent 53%),linear-gradient(110deg,#020e1dfa 0%,#031426fb 60%,#031325f5 100%);pointer-events:none}.shutter:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 26% 15%,#479fff0a,transparent 50%)}
.project-card.expanded .shutter{clip-path:var(--open-clip)}.project-card.expanded .app-image{filter:grayscale(0) saturate(1) brightness(1);opacity:1}
.project-label{position:absolute;z-index:5;top:6%;left:var(--left);color:#88c8ed;font:10px ui-monospace,monospace;letter-spacing:.22em;display:flex;align-items:center;gap:10px}.project-label:before{content:"";width:6px;height:6px;border-radius:50%;background:#6ad7ff;box-shadow:0 0 13px #61ceff8a}.phase{position:absolute;z-index:5;top:5%;right:3.5%;background:#020c19b3;border:1px solid #73b6f54d;border-radius:999px;color:#a8c5df;font:9px ui-monospace,monospace;letter-spacing:.08em;padding:6px 11px}
.title-stack{position:absolute;z-index:4;left:var(--left);top:var(--title-top);width:var(--title-width)}.title-stack h3{width:fit-content;max-width:100%;font-size:clamp(31px,3.5vw,46px);font-weight:400;line-height:1.05;letter-spacing:-.035em;margin:0 0 11px;text-shadow:0 2px 25px #0005}.subtitle{width:fit-content;max-width:100%;font-size:clamp(14px,1.45vw,18px);font-weight:300;line-height:1.4;margin:0;color:#c4d4e6}.rule{width:35px;height:2px;background:#63d5ff;box-shadow:0 0 10px #63d5ff45;margin:18px 0 0}
.ver-proyecto{display:flex;align-items:center;justify-content:space-between;gap:28px;min-width:175px;margin:25px 0 0;padding:12px 23px;border:1px solid #8ad7ff9c;border-radius:999px;background:#031225a8;color:#e8f5ff;font:14px "Helvetica Neue",Arial,sans-serif;cursor:pointer;box-shadow:0 8px 28px #0004;touch-action:manipulation}.ver-proyecto .arrow{font-size:23px;font-weight:300;line-height:1}.ver-proyecto:hover{background:#0b2d4e;box-shadow:0 0 27px #37bfff22}
.project-card[data-variant=center]:not(.expanded) .title-stack{left:50%;top:50%;transform:translate(-50%,-50%)}.project-card[data-variant=center]:not(.expanded) .title-stack>*{margin-left:auto;margin-right:auto}
.copy{position:relative;width:calc(var(--copy-width) / var(--title-width) * 100%);margin-top:18px;font-size:var(--copy-size);font-weight:300;line-height:1.5;color:#cbd9e9}.copy p{margin:0}.word{display:inline-block;max-width:100%;overflow-wrap:anywhere}.char{opacity:0}.char.lit{opacity:1;animation:ignite var(--flash) ease-out both}.char.static{opacity:1;animation:none}@keyframes ignite{0%{color:#f4feff;text-shadow:0 0 var(--glow-core) #fff,0 0 var(--glow) #8fe4ff,0 0 var(--glow-wide) #54bdff}100%{color:#cbd9e9;text-shadow:0 0 0 transparent}}

.project-card{--spot-x:50%;--spot-y:20%;border:1px solid #6bbfff55;background:#020b17;box-shadow:0 22px 75px #0004;transition:border-color .4s,box-shadow .4s}.project-card:hover{border-color:#8bdcff88;box-shadow:0 25px 80px #0006,0 0 35px #3ca3ff09}.project-card .shutter{background:radial-gradient(circle at var(--spot-x) var(--spot-y),#2375b21c,transparent 43%),linear-gradient(110deg,#020e1dfa 0%,#031426fb 60%,#031325f5 100%)}.project-card .ver-proyecto{border-color:#5ebcfa8c;background:linear-gradient(120deg,#176bd9,#3299ff);color:#f4fbff;box-shadow:0 9px 32px #1687ef20;transition:box-shadow .25s,background .25s}.project-card .ver-proyecto:hover{box-shadow:0 0 30px #3abfff40}
.edge-light{position:absolute;z-index:7;inset:0;border-radius:inherit;border:1px solid #69d1ff50;opacity:0;pointer-events:none}.expanded .edge-light{animation:edge-breathe 5s ease-in-out infinite alternate}@keyframes edge-breathe{from{opacity:.15}to{opacity:.7}}.rim-glint{position:absolute;left:-24%;top:-1px;width:24%;height:2px;z-index:8;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent 0%,#80dcff 35%,#f2fdff 50%,#80dcff 65%,transparent 100%);filter:drop-shadow(0 0 6px #62cfff)}
.project-card.rim-running .rim-glint{animation:rim-arrival var(--rim-duration,3200ms) linear 1 both}
@keyframes rim-arrival{0%{left:-24%;opacity:0;filter:drop-shadow(0 0 4px #62cfff)}12%{opacity:.45}35%{left:29%;opacity:.75}48%{left:36%;opacity:1;filter:drop-shadow(0 0 12px #b2f3ff) drop-shadow(0 0 24px #4acaff)}60%{left:43%;opacity:1;filter:drop-shadow(0 0 12px #b2f3ff) drop-shadow(0 0 24px #4acaff)}78%{opacity:.65}100%{left:100%;opacity:0;filter:drop-shadow(0 0 4px #62cfff)}}
.project-card .title-stack h3:focus{outline:none}.project-card .title-stack h3:focus-visible{outline:1px solid #9bdfff;outline-offset:7px}.project-card .copy{font-size:18px}.project-card .visual-copy{white-space:pre-wrap;text-align:left}
.fileforge{position:relative;overflow:hidden;display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:28px;padding:34px 42px;border:1px solid #7cbcf233;border-radius:18px;background:linear-gradient(120deg,#051326e8,#081e3490);margin-top:28px}.fileforge svg{width:55px;height:55px;stroke:#7acbff;fill:none;stroke-width:1;filter:drop-shadow(0 0 12px #4cbbff35)}.fileforge .eyebrow{font-size:9px;margin:0 0 5px}.fileforge h2{font-size:27px;font-weight:350;letter-spacing:-.035em;margin:0 0 7px}.fileforge p{font-size:14px;color:#a1b6ce;max-width:590px;margin:0}.development{font:10px ui-monospace,monospace;color:#93b5d4;white-space:nowrap;letter-spacing:.06em}.development:before{content:"";display:inline-block;width:5px;height:5px;margin-right:8px;border-radius:50%;background:#6db7e7}
.contact-strip{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:62px 0 56px}.contact-strip p{font-size:clamp(23px,2.8vw,36px);font-weight:300;letter-spacing:-.03em;line-height:1.2;margin:0 0 8px}.contact-strip small{font-size:12px;color:#88a4c3}.pill-link{display:inline-flex;align-items:center;gap:25px;white-space:nowrap;text-decoration:none;border:1px solid #79bef364;border-radius:999px;padding:12px 22px;font-size:12px;color:#d9edff;transition:background .3s,box-shadow .3s}.pill-link:hover{background:#2275be20;box-shadow:0 0 25px #6acaff18}.site-footer{border-top:1px solid #79b7ff22;color:#6585a5;font-size:10px;letter-spacing:.09em}.footer-row{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer-row a{text-decoration:none;color:#8ba9c8}.footer-row a:hover{color:#d4efff}.footer-brand{width:120px}.candidate-note{font:8px ui-monospace,monospace;letter-spacing:.06em;color:#587594;padding:0 0 18px;text-align:center}
[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){html{scroll-padding-top:85px}.wrap{width:calc(100% - 28px)}.nav{min-height:72px;gap:20px}.brand{width:139px}.menu-toggle{display:block}.primary-nav{display:none;position:absolute;top:68px;left:14px;right:14px;padding:16px 20px;border:1px solid #75baff38;border-radius:15px;background:#041023f5;flex-direction:column;align-items:stretch;gap:3px}.primary-nav.open{display:flex}.primary-nav a{font-size:14px;padding:9px 0}.primary-nav a[aria-current]:after{right:auto;width:30px}.projects-hero{min-height:365px;padding:50px 0 68px}.project-earth{width:1250px;right:-730px;bottom:-15px;opacity:.75;transform:rotate(-13deg)}.projects-hero:after{background:linear-gradient(90deg,#020711b0 0%,#071c3450 68%,transparent)}.eyebrow{font-size:8px;letter-spacing:.21em}.hero-lead{max-width:290px;font-size:16px}.hero-bottom{font-size:8px;letter-spacing:.11em}.project-index{gap:6px;padding:15px 0 25px}.project-index a{font-size:10px;padding:6px 11px}.project-list{gap:21px}.project-item{scroll-margin-top:88px}.fileforge{grid-template-columns:38px 1fr;gap:18px;padding:25px 22px}.fileforge svg{width:35px;height:35px}.fileforge h2{font-size:25px}.fileforge p{font-size:12px}.development{grid-column:2;font-size:9px}.contact-strip{align-items:flex-start;flex-direction:column;gap:23px;padding:42px 0}.footer-row{padding:25px 0;align-items:flex-start;flex-direction:column;gap:15px}.footer-brand{width:110px}.candidate-note{text-align:left;font-size:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.glow,.expanded .edge-light,.project-card.rim-running .rim-glint{animation:none}.motion-ready .project-item{opacity:1;transform:none;transition:none}.char.lit{animation:none}}

/* C007: one inset defines left padding and clearance from the diagonal.
   A shaped float lets each paragraph line follow the shutter without a second box.
   Its dimensions are resolved from the reserved card geometry before opening. */
.project-card,.project-card[data-app=xray]{
 --left:6.2%;--title-width:87.6%;--title-top:9%;--open-top:.57;--open-bottom:.43;
 --base-clip:polygon(0 0,100% 0,88% 100%,0 100%);
 --open-clip:polygon(0 0,57% 0,43% 100%,0 100%);
 --heading-width:46%;--flow-width:55%;--flow-cut:12%;--flow-height:400px;
 height:440px;
}
.project-card .title-stack{width:var(--title-width)}
.project-card .title-stack h3{max-width:var(--heading-width);font-size:clamp(29px,3.1vw,40px)}
.project-card .subtitle{max-width:var(--heading-width);font-size:clamp(13px,1.3vw,16px)}
.project-card .copy{display:flow-root;width:100%;font-size:18px;line-height:1.5}
.project-card .copy[hidden]{display:flow-root!important;visibility:hidden;pointer-events:none}
.project-card .visual-copy::before{content:"";float:right;width:var(--flow-width);height:var(--flow-height);shape-outside:polygon(var(--flow-cut) 0,100% 0,100% 100%,0 100%);pointer-events:none}
.project-card .ver-proyecto{position:relative;justify-content:center;gap:0;width:128px;min-width:128px;min-height:36px;padding:6px 16px;font-size:12px;margin-top:20px}
.project-card .ver-proyecto::before{content:"";position:absolute;inset:-4px}
.project-card[data-variant=center]:not(.expanded) .title-stack{top:var(--title-top);transform:translate(-50%,var(--center-shift,0px));text-align:center}
.project-card.expanded .title-stack{text-align:left}
@media(min-width:761px){.project-card[data-app=exo] .app-image,.project-card[data-app=tornado] .app-image{left:auto;right:0;width:57%;object-fit:contain;object-position:70% 50%!important;padding:20px 30px;background:radial-gradient(ellipse at 70% 50%,#0b2440,#020b17 70%)}}
@media(min-width:761px) and (max-width:1000px){.project-card,.project-card[data-app=xray]{height:540px}.project-card .title-stack h3{font-size:30px}.project-card .copy{font-size:16px}}
@media(max-width:760px){
 .project-card,.project-card[data-app=xray]{--left:6%;--title-width:88%;--heading-width:47%;--open-top:.57;--open-bottom:.43;--open-clip:polygon(0 0,57% 0,43% 100%,0 100%);height:auto;min-height:224px;padding:0;border-radius:16px}
 .project-card .app-image{height:100%;object-position:50% 50%!important}
 .project-card .shutter{inset:0;height:auto}
 .project-card[data-app=tornado] .app-image,.project-card[data-app=exo] .app-image{left:auto;right:0;width:55%;object-fit:contain;object-position:65% 50%!important;padding:10px 16px;background:radial-gradient(ellipse at 65% 50%,#0b2440,#020b17 70%)}
 .project-card .title-stack,.project-card[data-variant=center]:not(.expanded) .title-stack{position:relative;left:var(--left);top:auto;width:var(--title-width);padding:22px 0 20px;transform:none;text-align:left}
 .project-card[data-variant=center]:not(.expanded) .title-stack{left:50%;transform:translate(-50%,var(--center-shift,0px));text-align:center}
 .project-card .title-stack h3{font-size:23px;line-height:1.08;margin-bottom:8px}
 .project-card[data-app=xray] .title-stack h3{font-size:19px;line-height:1.08}
 .project-card .subtitle{font-size:11px;line-height:1.4}
 .project-card .rule{width:27px;margin-top:11px}
 .project-card .ver-proyecto{position:absolute;left:50%;transform:translateX(-50%);width:112px;min-width:112px;min-height:32px;margin-top:14px;padding:5px 12px;font-size:10px}
 .project-card .ver-proyecto::before{inset:-6px}
 .project-card .copy{position:relative;left:auto;top:auto;width:100%;margin:12px 0 0;padding:0;border:0;background:none;font-size:13px;line-height:1.45}
}
@media(max-width:360px){.project-card .title-stack h3{font-size:22px}.project-card[data-app=xray] .title-stack h3{font-size:18px}.project-card .copy{font-size:12px}}