:root{
  --espacio:#0B0A12;
  --orbital:#15131F;
  --orbital-2:#1E1B2B;
  --linea:#2C2740;
  --bizcocho:#F6F1E7;
  --miga:#C9C0D6;
  --humo:#8E86A3;
  --logo-ink:#F6F1E7;
  --ember:#FF7A3D;
  --coral:#FF4D7D;
  --violeta:#8B5CF6;
  --orbita:#36C5F0;
  --amber:#FFB23D;
  --exito:#3DD68C;
  --filamento:linear-gradient(100deg,#FFB23D 0%,#FF7A3D 24%,#FF4D7D 50%,#8B5CF6 76%,#36C5F0 100%);
  --display:'Space Grotesk',system-ui,sans-serif;
  --texto:'Hanken Grotesk','Inter',system-ui,sans-serif;
  --t-xs:clamp(.72rem,.69rem + .15vw,.82rem);
  --t-sm:clamp(.85rem,.8rem + .25vw,.98rem);
  --t-base:clamp(1rem,.94rem + .4vw,1.18rem);
  --t-lg:clamp(1.3rem,1.05rem + .9vw,1.8rem);
  --t-xl:clamp(2rem,1.4rem + 2.6vw,3.4rem);
  --t-2xl:clamp(2.6rem,1.8rem + 4.4vw,5rem);
  --maxw:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--texto);
  background:var(--espacio);
  color:var(--bizcocho);
  font-size:var(--t-base);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.02em;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--violeta);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.2rem,4vw,2.4rem)}
.grad{
  background:var(--filamento);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:gradflow 7s linear infinite;
}
@keyframes gradflow{to{background-position:220% center}}

.eyebrow{
  font-family:var(--display);
  font-size:var(--t-xs);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--orbita);
  font-weight:500;
}
.muted{color:var(--miga)}
.lg{display:block;width:100%;height:auto}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--ember);
  color:#1a0e07;
  border:none;
  border-radius:100px;
  padding:.85rem 1.5rem;
  font-family:var(--display);
  font-weight:600;
  font-size:var(--t-sm);
  cursor:pointer;
  transition:.25s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,122,61,.3)}
.btn.ghost{background:transparent;color:var(--bizcocho);border:1px solid var(--linea)}
.btn.ghost:hover{border-color:var(--violeta);box-shadow:none}

.chip{
  display:inline-block;
  border:1px solid var(--linea);
  border-radius:100px;
  padding:.4rem 1rem;
  font-size:var(--t-sm);
  color:var(--miga);
  margin:.25rem .3rem 0 0;
  transition:.25s;
}
.chip:hover{border-color:var(--ember);color:var(--bizcocho)}

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.reveal.in{opacity:1;transform:none}

.note-badge{
  position:fixed;
  bottom:.8rem;
  left:.8rem;
  z-index:400;
  background:rgba(21,19,31,.8);
  backdrop-filter:blur(8px);
  border:1px solid var(--linea);
  border-radius:100px;
  padding:.4rem .9rem;
  font-size:.66rem;
  color:var(--humo);
  font-family:var(--display);
}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  .grad{animation:none}
}