:root{
  --bg:#070809;
  --panel:#101214;
  --text:#f2f0e8;
  --muted:#969b9f;
  --line:#292d30;
  --accent:#00e5d4;
  --accent2:#00a89c;
  --c1:#00e5d4;
  --c2:#ffc145;
  --c3:#ff5d73;
  --c4:#b48cff;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
  --max:1180px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
}

a{color:inherit;text-decoration:none}

[id]{scroll-margin-top:84px}

.skip{
  position:absolute;
  left:12px;
  top:-60px;
  z-index:100;
  padding:10px 16px;
  background:var(--accent);
  color:#04201e;
  font-weight:600;
}

.skip:focus{top:12px}

.wrap{width:min(calc(100% - 48px),var(--max));margin:auto}

.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index:50;
}

.scanlines{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.035;
  background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 4px);
  z-index:49;
}

header{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(7,8,9,.82);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border-bottom:1px solid #1d2022;
}

.nav{
  height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{
  display:flex;
  gap:11px;
  align-items:center;
  font-weight:700;
  letter-spacing:.09em;
  font-size:.85rem;
}

.logo>span:last-child>span{color:var(--accent)}

.sigil{
  width:37px;
  height:37px;
  border:1px solid var(--accent);
  display:grid;
  place-items:center;
  font:500 .72rem var(--mono);
  color:var(--accent);
}

.links{
  display:flex;
  gap:18px;
  font-size:.86rem;
}

.links a{
  position:relative;
  padding:8px 0 8px 17px;
  color:var(--c);
  transition:filter .2s ease,text-shadow .2s ease;
}

.links a:nth-child(1){--c:var(--c1)}
.links a:nth-child(2){--c:var(--c2)}
.links a:nth-child(3){--c:var(--c3)}
.links a:nth-child(4){--c:var(--c4)}

.links a:hover{filter:brightness(1.25)}

/* cursor de terminal junto a la opción elegida */
.links a:before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:8px;
  height:1.05em;
  margin-top:-.525em;
  background:var(--c);
  box-shadow:0 0 10px var(--c);
  opacity:0;
}

.links a[aria-current]{text-shadow:0 0 14px color-mix(in srgb,var(--c) 55%,transparent)}

.links a[aria-current]:before{
  opacity:1;
  animation:cursor 1.05s steps(1) infinite;
}

@keyframes cursor{50%{opacity:0}}

.hamb{
  display:none;
  background:none;
  border:0;
  color:var(--text);
  font-size:1.4rem;
  cursor:pointer;
  min-width:44px;
  min-height:44px;
}

.hero{
  min-height:735px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:40px;
  align-items:center;
  position:relative;
}

.hero:before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,229,212,.05) 1px,transparent 1px),
    linear-gradient(rgba(0,168,156,.04) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:linear-gradient(90deg,black,transparent 80%);
  mask-image:linear-gradient(90deg,black,transparent 80%);
}

.hero-copy{position:relative;z-index:2}

.kicker,.label,.project-top,.project-bottom,.hud,footer{
  font-family:var(--mono);
}

.kicker{
  color:var(--accent);
  font-size:.72rem;
  letter-spacing:.13em;
}

.dot{
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--accent);
  border-radius:50%;
  box-shadow:0 0 12px var(--accent);
  margin-right:8px;
}

.hero h1{
  font-size:clamp(4rem,8.7vw,8.1rem);
  line-height:.84;
  letter-spacing:-.075em;
  margin:26px 0;
}

.hero h1 em{
  font-style:normal;
  color:var(--accent);
  text-shadow:0 0 35px rgba(0,229,212,.12);
}

.hero-copy>p{
  max-width:610px;
  color:var(--muted);
  font-size:1.08rem;
}

.actions{
  display:flex;
  gap:12px;
  margin-top:32px;
  flex-wrap:wrap;
}

.btn{
  border:1px solid var(--line);
  padding:13px 19px;
  font-weight:600;
  font-size:.88rem;
}

.btn.hot{
  background:var(--accent);
  color:#04201e;
  border-color:var(--accent);
}

.btn.hot:hover{filter:brightness(1.08)}

.hero-console{
  height:520px;
  position:relative;
  display:grid;
  place-items:center;
}

.hud{
  position:absolute;
  top:55px;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  color:#8a9094;
  font-size:.63rem;
}

.hud span:last-child{color:var(--accent)}

.section{padding:120px 0}

.label{
  font-size:.69rem;
  color:var(--accent);
  letter-spacing:.14em;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}

.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  padding-top:65px;
}

.two h2,.contact h2{
  font-size:clamp(2.5rem,5vw,5rem);
  line-height:.98;
  letter-spacing:-.065em;
  margin:0;
}

.two h2 span{color:#70767a}

.copy{max-width:570px}

.copy p{color:var(--muted)}

.copy .big{
  font-size:1.3rem;
  color:var(--text);
  line-height:1.45;
}

.text-link{
  display:inline-block;
  margin-top:20px;
  color:var(--accent);
  font:500 .75rem var(--mono);
}

.projects{
  background:var(--panel);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.project-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding-top:50px;
}

.project{
  min-height:540px;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid var(--line);
  overflow:hidden;
  position:relative;
  transition:transform .25s ease,border-color .25s ease;
}

.project:hover,.project:focus-visible{
  transform:translateY(-6px);
  border-color:var(--accent2);
}

.project:after{
  content:'';
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;
  right:-110px;
  bottom:-100px;
  background:radial-gradient(circle,rgba(0,229,212,.14),transparent 67%);
  pointer-events:none;
}

.p1{background:linear-gradient(145deg,#171b1b,#0b0d0e)}
.p2{background:linear-gradient(145deg,#101c1b,#0b0d0d)}

.project-image{
  position:absolute;
  z-index:0;
  inset:0 0 auto 0;
  height:52%;
  overflow:hidden;
  pointer-events:none;
  opacity:.24;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 100%);
}

.project-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  filter:saturate(.7) contrast(.92);
}

.p1 .project-image img{object-position:center 48%}
.p2 .project-image img{object-position:center 44%}

.project-top,.project-content,.project-bottom{
  position:relative;
  z-index:2;
}

.project-top,.project-bottom{
  display:flex;
  justify-content:space-between;
  color:#8a9094;
  font-size:.65rem;
  letter-spacing:.1em;
}

.project-top span:last-child{
  color:var(--accent);
  font-size:1.2rem;
}

.project-content{padding-top:10px}

.glyph{
  color:var(--accent);
  font-size:2.6rem;
  margin-bottom:55px;
}

.project h3{
  font-size:clamp(2.7rem,5vw,5.4rem);
  line-height:.82;
  letter-spacing:-.07em;
  margin:0;
}

.project h3 em{
  font-style:normal;
  color:var(--accent);
}

.project p{
  max-width:500px;
  color:#94999c;
  margin-top:25px;
}

.project-bottom{
  padding-top:25px;
  border-top:1px solid var(--line);
}

.project-bottom span{color:var(--accent)}

.universe{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:50px;
}

.universe article{
  background:var(--bg);
  min-height:245px;
  padding:27px;
}

.universe span{
  color:var(--c1);
  font:500 .68rem var(--mono);
}

.universe article:nth-child(2) span{color:var(--c2)}
.universe article:nth-child(3) span{color:var(--c3)}
.universe article:nth-child(4) span{color:var(--c4)}

.universe h3{
  font-size:1rem;
  margin:55px 0 9px;
}

.universe p{
  color:var(--muted);
  font-size:.82rem;
  margin:0;
}

.contact{
  background:var(--accent);
  color:#04201e;
  padding:105px 0;
}

.label.dark{
  color:#00514b;
  border-color:#04201e55;
}

.contact-in{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
}

.contact p{color:#0b3a36}

.social-links{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:300px;
}

.bluesky,.mastodon{
  display:flex;
  align-items:center;
  gap:15px;
  padding:18px 22px;
  border:1px solid rgba(0,0,0,.25);
  min-width:300px;
  font-family:var(--mono);
}

.bluesky{background:rgba(255,255,255,.08)}

.bluesky small,.mastodon small{
  display:block;
  font-size:.6rem;
  opacity:.65;
}

.bluesky b,.mastodon b{margin-left:auto}

.mast-icon{font-size:1.5rem}

footer{
  padding:27px 0;
  color:#8a9094;
  font-size:.65rem;
}

.foot{
  display:flex;
  justify-content:space-between;
  gap:20px;
}

.pixel-ship-wrap{
  position:relative;
  width:min(430px,100%);
  height:330px;
  display:grid;
  place-items:center;
}

.halo{
  position:absolute;
  left:50%;
  top:50%;
  width:min(100%,410px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.halo svg{
  width:100%;
  height:100%;
  opacity:.55;
  animation:gira 70s linear infinite;
}

@keyframes gira{to{transform:rotate(360deg)}}

.pixel-ship{
  position:relative;
  z-index:1;
  width:277px;
  height:auto;
  filter:drop-shadow(0 0 18px rgba(0,229,212,.22));
}

@media(max-width:850px){
  .links.open{
    display:flex;
    position:absolute;
    top:74px;
    left:0;
    right:0;
    padding:20px 24px;
    background:#070809;
    flex-direction:column;
    gap:4px;
    border-bottom:1px solid #292d30;
  }

  .wrap{width:min(calc(100% - 32px),var(--max))}
  .links{display:none}
  .hamb{display:block}

  .hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding:100px 0 80px;
  }

  .hero-console{height:390px}
  .hero h1{font-size:clamp(4rem,17vw,6rem)}
  .two,.project-grid{grid-template-columns:1fr;gap:45px}
  .universe{grid-template-columns:1fr 1fr}
  .contact-in{align-items:flex-start;flex-direction:column}
  .mastodon{width:100%;min-width:0}
  .section{padding:85px 0}
  .pixel-ship-wrap{height:270px}
  .pixel-ship{width:232px}
  .halo{width:min(100%,340px)}
  .noise{display:none}
  header{-webkit-backdrop-filter:none;backdrop-filter:none;background:#070809}
  .social-links{min-width:0;width:100%}
  .bluesky,.mastodon{min-width:0;width:100%}
}

@media(max-width:520px){
  .halo{width:min(100%,300px)}
  .universe{grid-template-columns:1fr}
  .project{min-height:460px}
  .foot{flex-direction:column}
  .hero-console{height:330px}
}

@media(prefers-reduced-motion:reduce){
  .halo svg{animation:none}
  .links a[aria-current]:before{animation:none}
  .project,.links a{transition:none}
  .project:hover,.project:focus-visible{transform:none}
}